:root {
  /* Huisstijl afgeleid van deduckman.nl (duckstyle.css + snavel-logo):
     blauw voor structuur, oranje (snavel) als accent, Verdana-typografie. */
  --creme: #78BDF8;        /* lichtblauwe pagina-achtergrond (duckstyle body) */
  --papier: #FFFFFF;       /* witte kaarten/panelen */
  --rood: #2A3A9A;         /* marineblauw — structuur: header, nav, koppen (naam historisch) */
  --rood-licht: #3D52C4;   /* lichter marineblauw — hovers/active */
  --oranje: #E87511;       /* merk-oranje (snavel) — accent: prijzen, knoppen */
  --oranje-donker: #C45F08;
  --inkt: #1A2348;         /* donker marineblauw — tekst + footer */
  --grijs: #54607C;
  --grijs-licht: #7D88A4;
  --lijn: #C9DCF2;         /* lichtblauwe lijnen */
  --serif: Verdana, Arial, Helvetica, sans-serif;  /* huisstijl: Verdana (geen serif) */
  --sans: Verdana, Arial, Helvetica, sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.demo-banner {
  background: var(--inkt);
  color: #FFFFFF;
  text-align: center;
  font-size: 12.5px;
  padding: 6px 12px;
  letter-spacing: .02em;
}

header.site {
  border-bottom: 3px solid var(--oranje);
  background: var(--rood);
}
header.site .row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
}
.logo {
  width: 38px; height: 38px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; text-decoration: none;
}
.logo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.brand-naam { font-family: var(--serif); font-weight: 700; font-size: 19px; color: #FFFFFF; line-height: 1; }
.brand-sub { font-size: 11px; color: #BFD2FF; letter-spacing: .04em; }
/* Originele wordmark van deduckman.nl (duckman_header2). */
.brand-logo { display: flex; align-items: center; line-height: 0; }
.brand-logo img {
  height: 48px; width: auto; display: block; border-radius: 4px;
}
@media (max-width: 520px) { .brand-logo img { height: 38px; } }
.spacer { flex: 1; }
.cart { font-size: 13px; color: #BFD2FF; }

.toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 0; flex-wrap: wrap;
}
.zoekbox {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 0 12px; height: 42px;
}
.zoekbox input {
  border: none; background: transparent; flex: 1; height: 40px;
  font-size: 14px; outline: none; color: var(--inkt);
}
select, button {
  font-family: var(--sans); font-size: 13px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--papier); color: var(--inkt);
  height: 42px; padding: 0 12px; cursor: pointer;
}
button:hover { background: #E3EFFB; }
.view-toggle { display: flex; border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.view-toggle button { border: none; border-radius: 0; height: 40px; }
.view-toggle button + button { border-left: 1px solid var(--lijn); }
.view-toggle button.active { background: var(--rood); color: #FFFFFF; }

.layout { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 48px; }

aside.filters {
  width: 200px; flex-shrink: 0;
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 14px;
}
.filters h3 { font-size: 14px; color: var(--rood); margin: 0 0 4px; font-weight: 600; }
.filter-groep { margin-top: 14px; }
.filter-groep .label { font-size: 12px; color: var(--grijs); margin-bottom: 5px; }
.filters label.opt {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; cursor: pointer; margin: 4px 0;
}
.filters input[type=checkbox] { accent-color: var(--rood); }
#reset { width: 100%; margin-top: 16px; }

main.results { flex: 1; min-width: 0; }
.telling { font-size: 12px; color: var(--inkt); font-weight: 600; margin-bottom: 10px; }

.item-lijst { display: block; }
.rij {
  display: flex; gap: 14px; align-items: center;
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px;
  text-decoration: none; color: inherit;
}
.rij:hover { border-color: var(--rood-licht); }
.thumb {
  width: 46px; height: 62px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--inkt); text-align: center; font-weight: 600;
}
.rij .titel { font-size: 14px; font-weight: 600; }
.rij .meta { font-size: 12px; color: var(--grijs); margin-top: 2px; }
.rij .prijs-blok { text-align: right; flex-shrink: 0; }
.rij .prijs { font-size: 15px; font-weight: 700; color: var(--oranje); }
.rij .cond { font-size: 11px; color: var(--grijs-licht); margin-top: 2px; }

.item-tegel { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kaart {
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit;
}
.kaart:hover { border-color: var(--rood-licht); }
.kaart .cover {
  height: 110px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--inkt); font-weight: 600;
}
.kaart .body { padding: 9px 11px; }
.kaart .titel { font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 34px; }
.kaart .meta { font-size: 11px; color: var(--grijs); margin-top: 3px; }
.kaart .onderkant { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
.kaart .prijs { font-size: 14px; font-weight: 700; color: var(--oranje); }

.badges { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 1px 7px; border-radius: var(--radius); }
.badge.druk { background: #FCE6D2; color: #9A5410; }
.badge.zeld { background: #EFE0F5; color: #7A2A8A; }
.badge.merch { background: #E6F1FB; color: #0C447C; }

.feedback-knop {
  background: none; border: 1px dashed var(--grijs-licht);
  color: var(--grijs); font-size: 11px; height: auto; padding: 3px 8px;
  border-radius: var(--radius); margin-top: 8px;
}
.feedback-knop:hover { background: #E3EFFB; }

.leeg { font-size: 14px; color: var(--grijs-licht); padding: 40px; text-align: center; }

/* productdetailpagina */
.detail { display: flex; gap: 28px; padding: 24px 0 48px; align-items: flex-start; flex-wrap: wrap; }
.detail .cover-groot {
  width: 240px; height: 320px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--inkt); font-weight: 600;
}
.detail .info { flex: 1; min-width: 260px; }
.detail h1 { font-family: var(--serif); font-size: 26px; color: var(--rood); margin: 0 0 4px; }
.detail .prijs-groot { font-size: 26px; font-weight: 700; color: var(--oranje); margin: 14px 0; }
.spec-tabel { width: 100%; border-collapse: collapse; margin: 16px 0; }
.spec-tabel td { padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; vertical-align: top; }
.spec-tabel td.k { color: var(--grijs); width: 130px; }
.koop-knop {
  background: var(--oranje); color: #FFFFFF; border: none;
  font-size: 15px; font-weight: 700; height: 46px; padding: 0 24px; border-radius: var(--radius);
}
.koop-knop:hover { background: var(--oranje-donker); }
.terug { font-size: 13px; color: var(--rood); text-decoration: none; display: inline-block; margin: 16px 0; }

@media (max-width: 720px) {
  .layout { flex-direction: column; }
  aside.filters { width: 100%; }
}

/* --- Item-covers (gegenereerde demo-placeholders) --- */
.thumb { overflow: hidden; }
.thumb img,
.detail .cover-groot img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.kaart .cover { overflow: hidden; }
.kaart .cover img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block;
}

/* --- Paginering --- */
.paginering {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  justify-content: center; margin: 22px 0 8px;
}
.pag-knop {
  font-family: var(--sans); font-size: 13px; min-width: 38px;
  height: 38px; padding: 0 12px; cursor: pointer;
  background: var(--papier); color: var(--rood);
  border: 1px solid var(--lijn); border-radius: var(--radius);
}
.pag-knop:hover { background: #E3EFFB; border-color: var(--rood); }
.pag-knop.actief {
  background: var(--rood); color: #FFFFFF; border-color: var(--rood); font-weight: 700;
}
.pag-knop.uit { color: var(--grijs-licht); background: var(--papier); cursor: default; opacity: .55; }
.pag-ellips { color: var(--grijs); padding: 0 2px; }

/* --- Hoofdmenu --- */
nav.hoofdmenu { background: var(--rood); }
nav.hoofdmenu .wrap { display: flex; flex-wrap: wrap; }
nav.hoofdmenu a {
  color: #DCEBFB; text-decoration: none; font-size: 14px;
  padding: 11px 14px; border-bottom: 3px solid transparent;
}
nav.hoofdmenu a:hover { background: var(--rood-licht); color: #FFFFFF; }
nav.hoofdmenu a.actief { border-bottom-color: var(--oranje); color: #FFFFFF; font-weight: 700; }

/* --- Footer --- */
footer.site-footer {
  margin-top: 48px; background: var(--inkt); color: #C7D2EC;
  border-top: 4px solid var(--oranje);
}
footer.site-footer .footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; padding: 34px 0 26px;
}
footer.site-footer h3 {
  font-family: var(--serif); font-weight: 700; color: #FFFFFF; font-size: 16px; margin: 0 0 10px;
}
footer.site-footer p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
footer.site-footer a { color: #F4B06A; }
footer.site-footer a:hover { color: #FFFFFF; }
.ftr-links { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13.5px; line-height: 1.9; }
.ftr-noot { color: var(--grijs-licht); font-size: 12.5px; }
.ftr-onder {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 14px 0; border-top: 1px solid #33406B; font-size: 12px; color: #9FAAC8;
}
@media (max-width: 720px) {
  footer.site-footer .footer-grid { grid-template-columns: 1fr; gap: 18px; }
}