/* Bandwijs — eigen stijl. Mobiel eerst, geen framework, geen webfont. */
:root{
  --ink:#12181f; --ink-2:#4a5560; --line:#e2e6ea; --bg:#ffffff; --soft:#f5f7f9;
  --accent:#c8451f; --accent-dark:#9c3517; --accent-soft:#fdf1ec;
  --ok:#177245; --warn:#8a6100;
  --radius:12px; --wrap:1120px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dark)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.6rem}
h2{font-size:1.25rem;margin-top:1.6em}
h3{font-size:1.05rem}
@media(min-width:760px){h1{font-size:2.1rem}h2{font-size:1.5rem}}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* topbar + header */
.topbar{background:var(--ink);color:#e8edf2;font-size:.82rem}
.topbar .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding-top:7px;padding-bottom:7px}
.topbar span{white-space:nowrap}
/* Op een telefoon past die rij niet; dan alleen de regel die iets kost of oplevert. */
@media(max-width:660px){.topbar span:not(:last-child){display:none}}

/* Kop in twee balken. Reden: met de navigatie NAAST het logo werd de pagina op
   een 390px-scherm 585px breed (echt gemeten) en viel de halve nav buiten beeld.
   Nu is de navigatie een eigen balk die op smalle schermen horizontaal
   meescrolt en de paginabreedte dus nooit oprekt. */
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:40}
header.site .bar{display:flex;align-items:center;gap:10px;min-height:58px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;min-height:44px}
.logo .dot{width:26px;height:26px;border-radius:50%;border:5px solid var(--accent);flex:0 0 auto}
.zoeklink,.cartlink{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap}
.zoeklink{margin-left:auto;color:var(--ink);border:1px solid var(--line)}
.cartlink{background:var(--accent);color:#fff}
nav.hnav{border-top:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
nav.hnav::-webkit-scrollbar{display:none}
nav.hnav .wrap{display:flex;gap:2px;white-space:nowrap;width:max-content;min-width:100%}
nav.hnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:600;border-radius:8px}
nav.hnav a:hover{background:var(--soft)}
nav.crumbs{font-size:.85rem;color:var(--ink-2);padding:6px 0}
nav.crumbs a{color:var(--ink-2);display:inline-block;padding:6px 0}

/* maatzoeker */
.finder{background:var(--soft);border-bottom:1px solid var(--line);padding:22px 0}
.finder form{display:flex;flex-wrap:wrap;gap:8px}
.finder input,.finder select{flex:1 1 160px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:1rem;background:#fff;font-family:inherit}
.finder button{flex:0 0 auto;padding:12px 20px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
.finder .hint{font-size:.85rem;color:var(--ink-2);margin:8px 0 0}

/* hero */
.hero{padding:26px 0 8px}
.hero p.lead{font-size:1.05rem;color:var(--ink-2);max-width:60ch}

/* raster */
.grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);padding:4px 0 8px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;background:#fff}
.card a.ph{display:block;background:var(--soft);aspect-ratio:1/1;padding:8px}
.card a.ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.card .body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .brand{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:700}
.card h3{font-size:.92rem;margin:0;font-weight:600}
.card h3 a{color:var(--ink);text-decoration:none}
.card .etr{font-size:.85rem;color:var(--ink-2)}
.card .price{font-weight:800;font-size:1.05rem;margin-top:auto}
.card .price small{font-weight:500;font-size:.8rem;color:var(--ink-2);display:block}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.tags li a,a.tag{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:.9rem;background:#fff}
.tags li a:hover,a.tag:hover{border-color:var(--accent);color:var(--accent-dark)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.82rem;font-weight:700;background:var(--accent-soft);color:var(--accent-dark)}
.pill.grey{background:var(--soft);color:var(--ink-2)}

/* pdp */
.pdp{display:grid;gap:20px;padding:8px 0 10px}
@media(min-width:860px){.pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}}
.pdp .shot{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.pdp .shot img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.pdp .price-l{font-size:1.9rem;font-weight:800;margin:.2em 0 0}
.pdp .price-l small{display:block;font-size:.8rem;font-weight:500;color:var(--ink-2)}
.buy{display:flex;gap:8px;align-items:center;margin:16px 0}
.buy input{width:64px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:1rem;text-align:center;font-family:inherit}
.btn{display:inline-block;padding:13px 22px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center;font-family:inherit}
.btn:hover{background:var(--accent-dark)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
table.specs{border-collapse:collapse;width:100%;font-size:.92rem;margin:8px 0 18px}
table.specs th,table.specs td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.specs th{width:44%;font-weight:600;color:var(--ink-2)}

.note{background:var(--soft);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:12px 14px;margin:16px 0;font-size:.93rem}
.prose{max-width:70ch}
.prose p,.prose li{color:#26313c}
.cols{display:grid;gap:16px}
@media(min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}}
.box{border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.box h3{margin-top:0}
.box a{font-weight:600}

/* footer */
footer.site{margin-top:40px;border-top:1px solid var(--line);background:var(--soft);padding:26px 0 34px;font-size:.9rem}
footer.site .cols4{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media(min-width:860px){footer.site .cols4{grid-template-columns:repeat(4,1fr)}}
footer.site h4{margin:0 0 8px;font-size:.9rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0}
footer.site li a{display:inline-block;padding:11px 0;min-height:44px}
footer.site a{color:var(--ink);text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .legal{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.82rem}
.wa{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#0b6b3a;text-decoration:none}

/* consent + cart */
#bw-consent{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--accent);padding:14px 16px;z-index:60;box-shadow:0 -8px 24px rgba(0,0,0,.12)}
#bw-consent .in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.9rem}
#bw-consent p{margin:0;flex:1 1 240px;min-width:0}
#bw-consent button{padding:12px 16px;min-height:44px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:700;cursor:pointer;font-family:inherit;flex:1 1 auto}
/* Op smalle schermen onder elkaar: naast elkaar liepen de twee knoppen tot
   ver buiten de 390px viewport. */
@media(max-width:560px){#bw-consent .in{flex-direction:column;align-items:stretch}#bw-consent button{width:100%}}
#bw-consent button.ok{background:var(--accent);color:#fff;border-color:var(--accent)}
.cartrow{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}
.cartrow img{width:64px;height:64px;object-fit:contain;background:var(--soft);border-radius:8px;flex:0 0 auto}
.cartrow .t{flex:1;min-width:0;font-size:.9rem}
.cartrow .t a{color:var(--ink);text-decoration:none}
.cartrow input{width:56px;padding:8px;text-align:center;border:1px solid var(--line);border-radius:8px;font-family:inherit}
.cartrow .rm{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:.85rem;text-decoration:underline;font-family:inherit}
.totals{margin:16px 0;font-size:1rem}
.totals div{display:flex;justify-content:space-between;padding:5px 0}
.totals .sum{font-weight:800;font-size:1.2rem;border-top:1px solid var(--line);padding-top:10px}
.form label{display:block;margin:12px 0 4px;font-weight:600;font-size:.9rem}
.form input,.form select,.form textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:1rem;font-family:inherit}
.form .two{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
.err{color:#a11b1b;font-weight:600}
.empty{padding:26px 0;color:var(--ink-2)}