/* Dexxter Cadeaugids 2026 — stijl volgens het Dexxter design system */
@font-face{font-family:"Circular Std";src:url(fonts/CircularStd-Book.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Circular Std";src:url(fonts/CircularStd-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Circular Std";src:url(fonts/CircularStd-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Circular Std";src:url(fonts/CircularStd-Black.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --blauw:#335EEA; --paars:#170040; --wit:#FFFFFF; --mint:#29FFBF; --geel:#FFDD14; --rood:#E72D53;
  --grond:#F6F7FD; --lijn:#D4DFFF; --lijn-zacht:#E4E8F5; --tekst:#170040; --tekst-zacht:#4A4560; --grijs:#5B6785;
  --mint-pastel:#C3FFED; --geel-pastel:#FFF5BD; --rood-pastel:#F8C4CF; --lichtblauw-pastel:#C9F7FF; --blauw-pastel:#C6D2F9;
  --font:"Circular Std", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grond);color:var(--tekst);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--blauw)} a:hover{color:#2D53E7}
img{max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:3px solid #3EE1FF;outline-offset:2px}

/* Hero */
.hero{background:var(--blauw);color:var(--wit);border-radius:0 0 50px 50px;padding:24px 24px 150px}
.wrap{max-width:1200px;margin:0 auto}
.nav{background:var(--wit);border-radius:16px;height:68px;padding:0 12px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav img{height:38px;width:auto;display:block}
.nav-link{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;color:var(--tekst);font-weight:500;text-decoration:none}
.nav-link:hover{background:var(--grond);color:var(--tekst)}
.hero-grid{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.hero-tekst{flex:999 1 520px;min-width:0}
.hero h1{margin:0;font-size:60px;line-height:1.08;font-weight:900;letter-spacing:-2px;max-width:720px}
.hl{display:inline-block;background:var(--geel);color:#000;padding:0 14px 6px;transform:rotate(-1deg)}
.hero p{margin:24px 0 0;font-size:20px;max-width:620px}
.hero-illu{flex:1 1 280px;max-width:360px;margin:0 auto}
.hero-illu img{display:block;width:100%;height:auto}

/* Filters */
main{max-width:1248px;margin:-110px auto 0;padding:0 24px}
.filters{background:var(--wit);border-radius:24px;padding:32px;box-shadow:0 18px 50px rgba(23,0,64,.10)}
.filters h2{margin:0 0 14px;font-size:22px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--lijn);background:var(--wit);color:var(--tekst);font:500 16px/1 var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--blauw)}
.chip[aria-pressed="true"]{background:var(--blauw);border-color:var(--blauw);color:var(--wit)}
.chip.klein{min-height:44px;padding:0 16px;border-radius:12px;font-size:15px}
.filter-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:24px;padding-top:24px;border-top:1px solid var(--lijn-zacht)}
.filter-rij h3,.filter-rij label{display:block;margin:0 0 12px;font-size:16px;font-weight:700}
select{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--lijn);background:var(--wit);color:var(--tekst);font:400 16px var(--font)}
.hulp{margin:10px 0 0;font-size:14px;color:var(--grijs)}
.knop.meer-knop{display:none}

/* Resultaten */
.resultaat-kop{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.resultaat-kop h2{margin:0;font-size:34px;font-weight:900;letter-spacing:-1px}
.acties{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border-radius:14px;font:700 16px var(--font);cursor:pointer;text-decoration:none}
.knop-lijn{border:2px solid var(--blauw);background:var(--wit);color:var(--blauw)}
.knop-tekst{border:0;background:transparent;color:var(--blauw)}
.knop-mint{border:0;background:var(--mint);color:#17152C;min-height:56px;padding:0 28px;font-size:18px;border-radius:16px}
.knop-mint:hover{color:#17152C;filter:brightness(.97)}
.deellink{flex-basis:100%;margin:0;font-size:14px;color:var(--grijs)}
.deellink span{color:var(--tekst);font-weight:500;word-break:break-all}
.melding{margin-top:16px;padding:14px 18px;border-radius:16px;background:var(--geel-pastel);font-size:15px}

.raster{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.kaart{display:flex;flex-direction:column;background:var(--wit);border-radius:24px;padding:14px 14px 22px;color:var(--tekst);text-decoration:none;box-shadow:0 10px 30px rgba(23,0,64,.07);transition:transform .18s,box-shadow .18s}
.kaart:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(23,0,64,.14);color:var(--tekst)}
.kaart:hover .naar{text-decoration:underline}
.kaart.uitgelicht{outline:3px solid var(--mint);outline-offset:0}
.foto{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--blauw-pastel)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.pil{position:absolute;left:12px;top:12px;color:#000;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px}
.pil.product{background:var(--mint-pastel)} .pil.beleving{background:var(--geel-pastel)} .pil.digitaal{background:var(--rood-pastel)} .pil.bon{background:var(--lichtblauw-pastel)}
.kaart-body{padding:18px 8px 0;display:flex;flex-direction:column;gap:8px;flex:1}
.kaart-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kaart h3{margin:0;font-size:20px;line-height:1.25;font-weight:700}
.prijs{flex:none;font-size:17px;font-weight:700}
.maker,.beschrijving{margin:0;font-size:15px;color:var(--tekst-zacht)}
.maker strong{color:var(--tekst);font-weight:500}
.kaart-voet{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:12px}
.waar{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--grijs)}
.naar{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:var(--blauw)}

.leeg{margin-top:8px;background:var(--wit);border-radius:24px;padding:48px 32px;text-align:center}
.leeg h3{margin:0;font-size:24px;font-weight:900}
.leeg p{margin:14px auto 22px;font-size:17px;color:var(--tekst-zacht);max-width:460px}

.slot{margin:80px 0 0;background:var(--paars);color:var(--wit);border-radius:24px;padding:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.slot div{flex:999 1 480px;min-width:0}
.slot h2{margin:0;font-size:36px;line-height:1.15;font-weight:900;letter-spacing:-1px}
.slot p{margin:14px 0 0;font-size:18px;color:var(--blauw-pastel);max-width:640px}
footer{padding:32px 0 48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--grijs)}
footer a{color:var(--grijs)}

@media (max-width:700px){
  .hero{padding:16px 16px 40px;border-radius:0 0 40px 40px}
  .nav{height:60px;padding:0 8px 0 16px}.nav img{height:32px}.nav-link span{display:none}
  .hero-grid{margin-top:28px;gap:8px}
  .hero h1{font-size:36px;letter-spacing:-1px;line-height:1.2}
  .hl{display:inline;padding:0 8px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transform:none}.hero p{font-size:17px;margin-top:16px}
  .hero-illu{display:none}
  main{margin-top:24px;padding:0 16px}
  .filters{padding:20px;border-radius:24px}
  .chips.voor{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}
  .chips.voor::-webkit-scrollbar{display:none}
  .chips.voor .chip{flex:none;white-space:nowrap;min-height:44px;font-size:15px;padding:0 16px}
  .knop.meer-knop{display:flex;width:100%;margin-top:16px;justify-content:space-between;border:2px solid var(--lijn);background:var(--wit);color:var(--tekst)}
  .filter-rij{display:none;margin-top:16px;padding-top:16px;gap:22px}
  .filters.open .filter-rij{display:grid}
  .resultaat-kop{margin-top:28px}.resultaat-kop h2{font-size:26px}
  .raster{grid-template-columns:1fr;gap:16px}
  .slot{margin-top:48px;padding:28px 22px}.slot h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.kaart,.chip{transition:none}.kaart:hover{transform:none}}