:root{--rood:#c8102e;--inkt:#1d2330;--zacht:#5d6675;--lijn:#e3e6eb;--vlak:#f5f6f8;--groen:#1e7e34}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--inkt);background:var(--vlak)}
a{color:inherit}header{background:#fff;border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:5}
.balk{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700}.logo img{height:34px}
.logo small{display:block;font-weight:400;color:var(--zacht);font-size:12px}
form.zoek{flex:1;display:flex;min-width:260px}form.zoek input{flex:1;font-size:16px;padding:10px 12px;border:1px solid var(--lijn);border-radius:8px 0 0 8px}
form.zoek button,button.hoofd{background:var(--rood);color:#fff;border:0;border-radius:0 8px 8px 0;padding:0 18px;font-size:15px;cursor:pointer}
button.hoofd{border-radius:8px;padding:10px 18px}.wie{font-size:13px;color:var(--zacht);text-align:right}
.wie b{color:var(--inkt)}.wie form{display:inline}.wie button{background:none;border:0;color:var(--zacht);text-decoration:underline;cursor:pointer;font-size:13px}
.klantbalk{background:#fff7e6;border-bottom:1px solid #f1d9a6;font-size:13px}.klantbalk .balk{padding:6px 16px}
.test{background:#fde8eb;color:var(--rood);font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px}
main{max-width:1200px;margin:0 auto;padding:18px 16px 60px}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:16px 18px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:8px 10px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--zacht);font-weight:600;background:#fafbfc}td.r,th.r{text-align:right;white-space:nowrap}
tr.klik{cursor:pointer}tr.klik:hover td{background:#fafbff}.klein{font-size:12.5px;color:var(--zacht)}
.duim{width:56px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--lijn);border-radius:4px}
.netto{font-weight:700;font-size:16px}.bruto{color:var(--zacht);text-decoration:line-through;font-size:12.5px}
.chip{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:var(--vlak);border:1px solid var(--lijn)}
.chip.groen{background:#e8f5ec;border-color:#bfe3c9;color:var(--groen)}
.raster{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:18px}@media(max-width:800px){.raster{grid-template-columns:1fr}}
.fotos img{max-width:100%;max-height:340px;object-fit:contain;display:block;margin:0 auto 8px;background:#fff}
.fotos .rij{display:flex;gap:6px;flex-wrap:wrap}.fotos .rij img{width:70px;height:56px;margin:0;border:1px solid var(--lijn);border-radius:4px;cursor:pointer}
dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0}dt{color:var(--zacht)}dd{margin:0}
.prijsblok{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}.prijsblok .netto{font-size:26px}
.melding{background:#fff7e6;border:1px solid #f1d9a6;padding:10px 14px;border-radius:8px}
.fout{background:#fde8eb;border:1px solid #f5b5c0;color:#8a1022;padding:10px 14px;border-radius:8px;margin-bottom:12px}
.login{max-width:380px;margin:8vh auto}.login input{width:100%;padding:10px 12px;font-size:16px;border:1px solid var(--lijn);border-radius:8px;margin:4px 0 12px}
.login label{font-size:13px;color:var(--zacht)}h1{font-size:22px;margin:0 0 6px}h2{font-size:16px;margin:0 0 10px}
@media(max-width:640px){th.mob,td.mob{display:none}}