:root{--paper:#FFFFFF;--vlak:#F9F9F9;--vlak-warm:#F5F3EF;--pil:#EFF1F2;--pil-hover:#E3E6E8;--ink:#191C1D;--body:#3C4043;--stil:#5F6368;--rand:#C4C7C5;--lijn:#E3E3E3;--merk:#007A52;--merk-donker:#005C3D;--merk-zacht:#DDF3E9;--merk-licht:#BFE6D3;--actie:#FFD54A;--blauw:#007A52;--blauw-donker:#005C3D;--blauw-zacht:#DDF3E9;--blauw-licht:#BFE6D3;--goed:#146C2E;--fout:#B3261E;--font-sans:'Figtree', 'Helvetica Neue', Arial, sans-serif;--radius-kaart:28px;--radius-pil:100px;--gutter:clamp(16px, 2.2vw, 32px);--sectie-y:clamp(56px, 7vw, 100px);--content:1392px;--mail-papier:#F9F9F9;--mail-vlak:#FFFFFF;--mail-kop:#191C1D;--mail-op-kop:#FFFFFF;--mail-stil-op-kop:#BDC1C6;--mail-titel:#191C1D;--mail-tekst:#3C4043;--mail-stil:#5F6368;--mail-lijn:#E3E3E3;--mail-accent:#007A52;--mail-op-accent:#FFFFFF;--mail-accent-tekst:#005C3D;--mail-vak:#DDF3E9;--mail-vak-titel:#005C3D;--mail-vak-tekst:#191C1D;--mail-hulp:#191C1D;--mail-op-hulp:#FFFFFF;--mail-stil-op-hulp:#BDC1C6;--mail-font-titel:'Figtree', 'Helvetica Neue', Arial, sans-serif;--mail-font-tekst:'Figtree', 'Helvetica Neue', Arial, sans-serif;--mail-font-woordmerk:'Figtree', 'Helvetica Neue', Arial, sans-serif;--mail-titel-gewicht:700;--tekst:1156px;--pil-h:64px}
/* Nieuwe TV — design voor het website-skelet (platform-v2). Huisstijl volgens het merkplan van 25-10-2026:
   woordmerk "Nieuwe" + "TV" in een schermkader met voetje (delen/kop.html en delen/voet.html), merkgroen #007A52 als
   enige merkkleur (tokens merk-*; de oude namen blauw-* hebben dezelfde waarden), Figtree (OFL, zelf gehost) voor alle
   tekst met koppen in gewicht 700, het schermkader als vast beeldelement rond de pictogrammen op de homepage, en de
   kernzin "Makkelijk je nieuwe tv kiezen." in de hero en de voet. De indeling komt uit versie 3 (24-10-2026), naar de
   Google Store: één zwevende pilbalk, één voet, de productpagina uit delen/product.html en het afrekenen als kaarten.
   Maten: kaarten 1392px breed met 28px ronde hoeken, tekst 1156px, pillen van 48px. De kleuren en maten komen uit
   tokens.json (CSS-variabelen op :root); dit bestand zet ze op de haken van het skelet
   (docs/platform-v2/STOREFRONT-CONTRACT.md). Alles van de eigen host, geen script. */

@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/thema/Figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/thema/Figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --schaduw: 0 2px 10px rgba(0, 0, 0, .15);
  --schaduw-knop: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .15);
  /* Binnenmarge van de kaarten: bij 1456px staat de tekst op 118px van de kaartrand (Google Store). */
  --kaart-in: clamp(24px, 8vw, 118px);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
#inhoud { flex: 1 0 auto; }
h1, h2, h3, h4 { font-weight: 700; color: var(--ink); letter-spacing: 0; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.17; }
h2 { font-size: clamp(1.75rem, 2.75vw, 2.5rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--merk); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
small { font-size: .875em; }
table { border-collapse: collapse; }
address { font-style: normal; }
.overslaan { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-pil); }
.overslaan:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#inhoud [id] { scroll-margin-top: calc(var(--pil-h) + 40px); }
.leeg { padding: 40px 24px; border-radius: var(--radius-kaart); background: var(--vlak); color: var(--stil); text-align: center; }

/* ---------- Knoppen: pilvormig. Standaard merkgroen gevuld; .btn-tonal lichtgrijs; .btn-mini de kleine "Buy" van 32px. ---------- */
.btn, button, .knop, .filters .wis a, .filters .filters-klaar, .weergave a, .meer-titel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--radius-pil);
  font-family: var(--font-sans); font-weight: 500; font-size: 1rem; line-height: 1.2; letter-spacing: 0; text-transform: none;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--merk); color: #fff;
  transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.btn:hover, button:hover, .knop:hover { background: var(--merk-donker); color: #fff; text-decoration: none; box-shadow: var(--schaduw-knop); }
button:disabled { opacity: .5; cursor: progress; box-shadow: none; }
.btn-tonal, .filters .wis a, .weergave a, .meer-titel, #zoeken > button { background: var(--pil); color: var(--ink); }
.btn-tonal:hover, .filters .wis a:hover, .weergave a:hover, #zoeken > button:hover { background: var(--pil-hover); color: var(--ink); box-shadow: none; text-decoration: none; }
.btn-mini { min-height: 32px; padding: 6px 12px; font-size: .875rem; }
.meer a { font-weight: 500; }

/* ---------- Kop: één zwevende pilbalk (merk, tabs, zoeken, account, mandje), blijft bovenaan plakken ----------
   De kop zelf is doorzichtig en laat klikken door (pointer-events), alleen de pil vangt ze. */
#kop { position: sticky; top: 0; z-index: 50; padding: 12px var(--gutter) 0; pointer-events: none; }
#kop > * { pointer-events: auto; }
#kop > .menu-schakel { position: absolute; opacity: 0; pointer-events: none; }
.pilbalk {
  position: relative; display: flex; align-items: center; gap: 4px; height: var(--pil-h);
  max-width: var(--content); margin: 0 auto; padding: 4px 8px 4px 20px;
  background: var(--paper); border-radius: var(--radius-pil); box-shadow: var(--schaduw);
}
.merk { display: inline-flex; align-items: center; gap: 10px; margin: 0 20px 0 0; color: var(--ink); text-decoration: none; }
.merk:hover { text-decoration: none; }
/* Woordmerk: "Nieuwe" in inkt en "TV" in een schermkader met voetje in merkgroen; alles schaalt met de lettergrootte. */
.woordmerk { display: inline-flex; align-items: center; gap: .3em; font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; line-height: 1; color: var(--ink); white-space: nowrap; }
.woordmerk-scherm { position: relative; display: inline-flex; align-items: center; padding: .1em .32em .12em; margin-bottom: .2em; border: .13em solid var(--merk); border-radius: .26em; color: var(--merk); }
.woordmerk-scherm::after { content: ""; position: absolute; left: 50%; bottom: -.36em; width: .86em; height: .13em; border-radius: .065em; background: var(--merk); transform: translateX(-50%); }
#menu { display: flex; align-items: center; gap: 8px; }
.tab {
  display: inline-flex; align-items: center; height: 48px; padding: 0 16px; border-radius: var(--radius-pil);
  background: var(--pil); color: var(--ink); font-size: 1rem; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background 140ms ease;
}
.tab:hover { background: var(--pil-hover); text-decoration: none; }
body[data-page-type="home"] .tab-home, body[data-page-type="category"] .tab-producten, body[data-page-type="product"] .tab-producten,
body[data-page-type="reviews"] .tab-reviews, body[data-page-type="contact"] .tab-contact { background: var(--merk-zacht); color: var(--merk-donker); }
.alleen-mobiel { display: none; }
.pilbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none; transition: background 140ms ease;
}
.icon-btn:hover { background: var(--pil); text-decoration: none; }
.icon-btn svg, .tekst-knop svg, .pilbalk-knop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tekst-knop {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: var(--radius-pil);
  font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: background 140ms ease;
}
.tekst-knop:hover { background: var(--pil); text-decoration: none; }
.pilbalk-knop { min-height: 48px; margin-left: 8px; padding: 0 18px 0 16px; gap: 8px; }
.pilbalk-knop .count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--merk-donker);
  font-size: .75rem; font-weight: 500; line-height: 22px; text-align: center;
}
body[data-page-type="checkout"] .pilbalk-knop, body[data-page-type="thankyou"] .pilbalk-knop { display: none; }
#kop .burger, .dscrim { display: none; }

/* ---------- Home: hero-kaart met een strook erboven, tekst links, beeld rechts ---------- */
.hero { max-width: var(--content); margin: 0 auto; padding: 24px var(--gutter) 0; }
.hero-kaart { border-radius: var(--radius-kaart); background: var(--vlak); overflow: hidden; }
.hero-strook { margin: 0; padding: 8px 20px; background: var(--vlak-warm); text-align: center; font-size: .875rem; font-weight: 500; color: var(--ink); }
.hero-strook:empty { display: none; }
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 32px;
  padding: clamp(32px, 6vw, 96px) var(--kaart-in) clamp(32px, 5vw, 80px);
}
.hero-tekst h1 { font-size: clamp(2.25rem, 3.3vw, 3rem); line-height: 1.17; margin: 0 0 24px; }
.hero-sub { font-size: 1.25rem; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.hero-sub:empty { display: none; }
.hero-noot { font-size: .75rem; color: var(--ink); margin: 0 0 20px; }
.hero-cta { margin: 0; }
.hero-beeld svg { width: 100%; max-width: 802px; height: auto; display: block; margin: 0 auto; }

/* ---------- Secties op de homepage ---------- */
.sectie { max-width: var(--content); margin: 0 auto; padding: var(--sectie-y) var(--gutter) 0; }
.sectie-smal { max-width: calc(var(--tekst) + 2 * var(--gutter)); }
.sectie-titel, #reviews-kort > h2 { text-align: center; font-size: clamp(1.75rem, 2.75vw, 2.5rem); line-height: 1.2; margin: 0 0 clamp(32px, 5.5vw, 80px); }
.sectie-meer { text-align: center; margin: 40px 0 0; }
#collecties:not(:has(.collectielijst)) { display: none; }

/* Drie kenmerken: beeld in het schermkader (16:9, rand in inkt, voetje eronder), kop van 20px en tekst, gecentreerd. */
.kenmerken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kenmerken li { text-align: center; }
.kenmerk-beeld { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin: 0 0 44px; border: 4px solid var(--ink); border-radius: 18px; background: var(--paper); }
.kenmerk-beeld::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 26%; height: 6px; border-radius: 3px; background: var(--ink); transform: translateX(-50%); }
.kenmerk-beeld svg { width: 30%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kenmerken h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 12px; }
.kenmerken p { margin: 0 auto; max-width: 36ch; }

/* Reviews en contact onder aan de homepage. */
#reviews-kort .score { text-align: center; margin: -24px 0 32px; }
#reviews-kort .meer { text-align: center; margin: 32px 0 0; }
#contact-kort > h2 { font-size: 2rem; margin: 0 0 24px; }
#contact-kort address { line-height: 1.8; }
.sectie-contact { padding-bottom: 0; }

/* ---------- Productkaarten: als de accessoirekaarten van de Google Store ---------- */
.productlijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.productlijst .product {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 24px; border-radius: var(--radius-kaart); background: var(--vlak);
}
.productlijst .product .foto, .productlijst .product:not(:has(.foto))::before { display: block; aspect-ratio: 1 / 1; overflow: hidden; margin: 0 0 24px; }
.productlijst .product:not(:has(.foto))::before {
  content: "Foto volgt"; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--paper); font-size: .875rem; color: var(--stil);
}
.productlijst .product .foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms ease; }
.productlijst .product:hover .foto img { transform: scale(1.03); }
.productlijst .product h2 { font-size: 1rem; font-weight: 500; line-height: 1.3; margin: 0; }
.productlijst .product h2 a { color: var(--ink); }
.productlijst .product .merk { font-size: .875rem; color: var(--stil); margin: 0; }
.prijs { margin: 4px 0 0; color: var(--ink); font-size: .875rem; font-weight: 500; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prijs .van { color: var(--stil); font-weight: 400; }
.prijs-op-aanvraag { font-weight: 400; color: var(--stil); }
.productlijst .product .conditie { font-size: .875rem; color: var(--stil); margin: 0; }
.voorraad { margin: 0; font-size: .875rem; color: var(--goed); }
.voorraad[data-voorraad="uit"] { color: var(--fout); }
.productlijst .mandje-toevoegen { margin: 16px 0 0; }
.productlijst .mandje-toevoegen p, .productlijst .actie { margin: 0 0 8px; }
.productlijst .mandje-toevoegen label { font-size: .8125rem; }
.productlijst .mandje-toevoegen select { max-width: none; background: var(--paper); }
.productlijst .mandje-toevoegen button { min-height: 48px; padding: 0 24px; }
.productlijst .actie a { font-weight: 500; }

/* "Laad meer": de laatste kaart van de lijst, even groot als een productkaart. */
.productlijst .meer { display: block; }
.productlijst .meer a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 280px;
  border-radius: var(--radius-kaart); background: var(--vlak); color: var(--ink); text-decoration: none; text-align: center;
}
.productlijst .meer a:hover { text-decoration: none; }
.productlijst .meer a:hover .meer-titel { background: var(--pil-hover); }
.productlijst .meer a[aria-busy="true"] { cursor: progress; opacity: .6; }
.meer-aantal { font-size: .875rem; color: var(--stil); }

/* Collectiekaarten (categorieën op de homepage). */
.collectielijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.collectielijst .collectie { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: var(--radius-kaart); background: var(--vlak); }
.collectielijst .foto { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 4 / 3; margin: 0 0 16px; border-radius: 20px; background: var(--paper); }
.collectielijst .foto:empty::before { content: "Foto volgt"; font-size: .875rem; color: var(--stil); }
.collectielijst .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.collectielijst .collectie:hover .foto img { transform: scale(1.03); }
.collectielijst h2 { font-size: 1rem; margin: 0; }
.collectielijst h2 a { color: var(--ink); }
.collectielijst .aantal { margin: 0; font-size: .875rem; color: var(--stil); }

/* ---------- Kleur- en maatkeuze (uitvoeringen) ---------- */
.productlijst .product .foto-vak { position: relative; }
.kleuren { list-style: none; margin: 0; padding: 4px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.kleuren::-webkit-scrollbar { display: none; }
.foto-vak .foto, #product .fotos { position: relative; isolation: isolate; }
.foto-vak .foto::after, #product .fotos::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--tint, transparent); mix-blend-mode: color; opacity: 0;
  transition: opacity 240ms ease, background-color 240ms ease;
}
.foto-vak[data-tint] .foto::after, #product .fotos[data-tint]::after { opacity: .9; }
.foto-vak .kleuren { position: absolute; left: 10px; bottom: 10px; z-index: 1; max-width: calc(100% - 20px); }
.kleuren li { flex: none; scroll-snap-align: start; }
.kleur {
  position: relative; display: block; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(25, 28, 29, .25); box-shadow: 0 0 0 2px var(--paper); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: transform 140ms ease;
}
.kleur:hover { transform: scale(1.1); }
.kleur:focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }
.kleur.gekozen { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--merk); }
.kleur.uit { opacity: .45; cursor: not-allowed; }
.kleur.uit:hover { transform: none; }
.kleur.uit::after, .maat.uit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) 50%, var(--paper) 50%, var(--paper) calc(50% + 1px), transparent calc(50% + 1px));
}
.kleur .keuze-naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kleur-tekst { display: flex; align-items: center; width: auto; min-width: 24px; padding: 0 10px; border-radius: var(--radius-pil); background: var(--paper); font-size: .75rem; font-weight: 500; }
.kleur-tekst .keuze-naam { position: static; width: auto; height: auto; clip: auto; }
.maten { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.maat {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 40px; height: 34px; padding: 0 12px; border: 1px solid var(--rand); border-radius: var(--radius-pil); color: var(--ink);
  font-size: .8125rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.maat:hover { border-color: var(--ink); text-decoration: none; }
.maat:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }
.maat.gekozen { background: var(--merk-zacht); border-color: var(--merk-zacht); color: var(--merk-donker); }
.maat.uit, .maat.uit:hover { color: var(--stil); border-color: var(--lijn); cursor: not-allowed; }
.keuze-kop { margin: 0 0 6px; font-size: .875rem; font-weight: 500; color: var(--ink); }
#product .kleuren { gap: 12px; padding: 6px 4px; margin: 0 0 12px; }
#product .kleur { width: 32px; height: 32px; }
#product .kleur-tekst { width: auto; }
@media (pointer: coarse) { .kleur { width: 28px; height: 28px; } .kleur-tekst { width: auto; } }

/* Pil bij bijna uitverkocht en het wishlist-hart: rechtsboven in de kaart. */
.voorraad-pil {
  position: absolute; top: 24px; right: 24px; z-index: 2; max-width: calc(100% - 48px); box-sizing: border-box;
  padding: 5px 12px; border-radius: var(--radius-pil); background: var(--paper); color: var(--merk-donker); box-shadow: var(--schaduw);
  font-size: .75rem; font-weight: 500; line-height: 1.4; text-align: center; pointer-events: none;
}
.voorraad-pil[hidden] { display: none; }
.productlijst .product:has(.wishlist-knop) .voorraad-pil { right: 70px; max-width: calc(100% - 94px); }
.wishlist-knop {
  position: absolute; top: 24px; right: 24px; z-index: 2; width: 40px; height: 40px; min-height: 0; padding: 0; gap: 0;
  justify-content: center; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.15rem; line-height: 1; box-shadow: var(--schaduw);
}
.wishlist-knop:hover { background: var(--paper); color: var(--merk); box-shadow: var(--schaduw); }
.wishlist-knop[aria-pressed="true"], #wishlist button[aria-pressed="true"] { color: var(--merk); }
#product .wishlist-knop { position: static; margin: 0 0 8px; }
#wishlist .wishlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
#wishlist .wishlist button { min-height: 36px; padding: 0 14px; font-size: .875rem; }

/* ---------- Pagina's na de home: tekstbreedte 1156px; de winkel gebruikt de kaartbreedte ---------- */
body:not([data-page-type="home"]) #inhoud > section,
body:not([data-page-type="home"]) #inhoud > article { max-width: calc(var(--tekst) + 2 * var(--gutter)); margin: 0 auto; padding: 16px var(--gutter) 96px; }
body[data-page-type="category"] #inhoud > section { max-width: var(--content); }

/* ---------- Shop: zoekveld bovenaan, filters links, producten rechts; op een telefoon een lade ---------- */
#producten h1 { margin: 0 0 20px; }
.weergave { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.weergave a { min-height: 48px; padding: 0 16px; }
.weergave a[aria-current="page"] { background: var(--merk-zacht); color: var(--merk-donker); }
.winkel-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "zoek zoek" "filters resultaat";
  gap: 24px 40px; align-items: start;
}
.winkel-layout > #zoeken { grid-area: zoek; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.winkel-layout > #zoeken > label[for="q"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.winkel-layout > #zoeken input[type="search"] {
  flex: 1 1 280px; width: auto; max-width: 560px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--rand); border-radius: var(--radius-pil); background: var(--vlak); color: var(--ink); font: inherit;
}
.winkel-layout > #zoeken input[type="search"]::placeholder { color: var(--stil); }
.winkel-layout > #zoeken input[type="search"]:focus { outline: none; border-color: var(--merk); background: var(--paper); box-shadow: 0 0 0 3px var(--merk-zacht); }
.filter-velden { display: none; }
.winkel-layout > .filters { grid-area: filters; }
.winkel-layout:not(:has(.fgroep)):not(:has(.wis)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "zoek" "resultaat"; }
.winkel-layout:not(:has(.fgroep)):not(:has(.wis)) > .filters { display: none; }
.winkel-layout > .resultaat { grid-area: resultaat; min-width: 0; }
.resultaat .resultaten { margin: 0 0 16px; font-size: .9375rem; color: var(--stil); }
.resultaat .productlijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Filtergroepen: uitklapbaar, elke keuze met een vinkvakje (één keuze per groep; opnieuw kiezen haalt het weg). */
.fgroep { margin: 0; padding: 14px 0; border-top: 1px solid var(--lijn); }
.fgroep:first-child { border-top: 0; padding-top: 0; }
.fgroep summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-weight: 500; color: var(--ink); }
.fgroep summary::-webkit-details-marker { display: none; }
.fgroep summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--stil); border-bottom: 2px solid var(--stil); transform: rotate(45deg); margin: -4px 6px 0 0; transition: transform 160ms ease; }
.fgroep:not([open]) summary::after { transform: rotate(-45deg); margin-top: 2px; }
.fgroep ul { list-style: none; margin: 6px 0 0; padding: 0; }
.fgroep a { display: flex; align-items: center; gap: 12px; min-height: 36px; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.fgroep a:hover { color: var(--merk-donker); text-decoration: none; }
.fgroep a::before {
  content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--stil); border-radius: 4px;
  font-size: .75rem; line-height: 14px; text-align: center; color: #fff; transition: background 140ms ease, border-color 140ms ease;
}
.fgroep a[aria-current="true"] { font-weight: 500; }
.fgroep a[aria-current="true"]::before { content: "\2713"; background: var(--merk); border-color: var(--merk); }
.fgroep .n { margin-left: auto; font-size: .8125rem; color: var(--stil); }
.kleurpunt { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(25, 28, 29, .25); }
.filters .filters-voet { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 0; }
.filters .wis { flex: 1 1 auto; margin: 0; }
.filters .wis a, .filters .filters-klaar { min-height: 40px; margin: 0; padding: 0 18px; font-size: .9375rem; }
.filters .filters-chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0; }
.filters .filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pil); background: var(--merk-zacht); color: var(--merk-donker); font-size: .875rem; font-weight: 500; text-decoration: none; }
.filters .filter-chip::after { content: "\D7"; font-size: 1.1rem; line-height: 1; }
.filters .filter-chip:hover { background: #BBD3FA; text-decoration: none; }

/* Op een smal scherm staan de filters in een lade van links; de knop "Filters" opent hem (vinkje #filters-schakel). */
@media (max-width: 900px) {
  .winkel-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "zoek" "knop" "resultaat"; gap: 16px; }
  .winkel-layout > .filters-schakel { display: block !important; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .winkel-layout > .filters-knop {
    display: inline-flex !important; grid-area: knop; justify-self: start; align-items: center; gap: 10px;
    min-height: 44px; margin: 0; padding: 0 18px; border-radius: var(--radius-pil); background: var(--pil); color: var(--ink);
    font-weight: 500; font-size: .9375rem; cursor: pointer;
  }
  .winkel-layout > .filters-knop:hover { background: var(--pil-hover); }
  .winkel-layout > .filters-knop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .winkel-layout > .filters-schakel:focus-visible + .filters-knop { outline: 2px solid var(--merk); outline-offset: 3px; }
  .winkel-layout > .filters-scherm {
    display: block !important; position: fixed; inset: 0; z-index: 80; margin: 0; cursor: pointer; background: rgba(0, 0, 0, .4);
    opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms;
  }
  .winkel-layout > .filters-schakel:checked ~ .filters-scherm { opacity: 1; visibility: visible; transition: opacity 240ms ease; }
  body:has(.filters-schakel:checked) { overflow: hidden; }
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; display: flex; flex-direction: column;
    width: min(360px, 92vw); overflow: hidden; background: var(--paper); border-radius: 0 var(--radius-kaart) var(--radius-kaart) 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2); transform: translateX(-100%); visibility: hidden;
    transition: transform 320ms cubic-bezier(.2, 0, 0, 1), visibility 0s linear 320ms;
  }
  .filters:focus { outline: none; }
  .winkel-layout > .filters-schakel:checked ~ .filters { transform: translateX(0); visibility: visible; transition: transform 320ms cubic-bezier(.2, 0, 0, 1); }
  .filters .filters-kop { display: flex !important; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--lijn); }
  .filters .filters-titel { font-size: 1.125rem; font-weight: 500; color: var(--ink); }
  .filters .filters-sluit { display: inline-flex !important; align-items: center; min-height: 36px; margin: 0; padding: 0 14px; border-radius: var(--radius-pil); background: var(--pil); color: var(--ink); font-size: .875rem; font-weight: 500; cursor: pointer; }
  .filters .filters-lijst { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }
  .fgroep:first-child { padding-top: 14px; }
  .filters .filters-voet { flex: none; padding: 16px 20px; border-top: 1px solid var(--lijn); background: var(--paper); }
  .filters .filters-chips { display: flex !important; }
  .filters .filters-klaar { display: inline-flex !important; flex: 1 1 auto; }
  .resultaat .productlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Productpagina (delen/product.html): foto's links en gegevens rechts, allebei gewoon meescrollend;
   onder de koopknop de vinkjes, daaronder drie servicekaarten, dan omschrijving en specificaties ---------- */
body[data-page-type="product"] #inhoud > article { max-width: var(--content); }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; font-size: .875rem; color: var(--stil); }
.kruimels li + li::before { content: "\203A"; margin-right: 6px; }
.kruimels a { color: var(--stil); }
.product-boven { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 56px; align-items: start; }
.product-media, .product-info { min-width: 0; }
/* De eerste foto groot, de volgende als kleinere tegels eronder; alles blijft in beeld zonder te plakken. */
#product .fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#product .fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 16px; border-radius: 20px; background: var(--vlak); }
#product .fotos img:first-child { grid-column: 1 / -1; padding: 32px; border-radius: var(--radius-kaart); }
.product-media:not(:has(img))::before {
  content: "Foto volgt"; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  border-radius: var(--radius-kaart); background: var(--vlak); font-size: .875rem; color: var(--stil);
}
.product-info h1 { font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.2; margin: 0 0 6px; }
.product-info .merk { color: var(--stil); margin: 0 0 16px; }
.product-info .prijs { font-size: 1.75rem; font-weight: 500; margin: 0 0 4px; }
.product-info .prijs .van { font-size: 1rem; }
.product-info .voorraad { margin: 0 0 8px; font-size: .9375rem; font-weight: 500; }
.product-info .conditie { color: var(--stil); margin: 0 0 8px; }
#product .mandje-toevoegen, #product .voorraadmelding { margin: 16px 0 0; padding: 24px; border-radius: 20px; background: var(--vlak); }
#product .mandje-toevoegen select, #product .mandje-toevoegen input[type="number"] { max-width: none; background: var(--paper); }
#product .mandje-toevoegen input[type="number"] { max-width: 120px; }
#product .mandje-toevoegen > p:has(button) { margin-bottom: 0; }
#product .mandje-toevoegen button { width: 100%; min-height: 56px; font-size: 1.0625rem; }
#product .mandje-toevoegen [data-melding], #product .mandje-toevoegen [data-fout] { margin: 12px 0 0; }
#product .voorraadmelding input { background: var(--paper); }
#product .levering { color: var(--stil); font-size: .9375rem; }
/* Vinkjes: wat de klant krijgt (2 jaar garantie, thuisbezorgd, bezorgkosten, bedenktijd). */
.usps { list-style: none; margin: 20px 0 0; padding: 0 4px; display: grid; gap: 10px; }
.usps li { position: relative; padding-left: 34px; font-size: .9375rem; line-height: 24px; color: var(--ink); }
.usps li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--goed); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 22px; text-align: center;
}
.usps li:empty { display: none; }
/* Drie servicekaarten: bezorgen, garantie, bedenktijd. */
.service { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service li { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 20px; background: var(--vlak); }
.service svg { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--merk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service h2 { font-size: 1.0625rem; font-weight: 500; margin: 0 0 4px; }
.service p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--body); }
#product .omschrijving, #product .specificaties { margin-top: 48px; max-width: 760px; }
#product .omschrijving p { line-height: 1.7; }
.specificaties table { width: 100%; border-collapse: collapse; }
.specificaties th, .specificaties td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--lijn); font-weight: 400; vertical-align: top; }
.specificaties th { color: var(--stil); width: 38%; padding-right: 16px; }
#product-weg p { max-width: 60ch; }

/* ---------- Formulieren: omlijnde velden met ronde hoeken, blauwe focusring ---------- */
form p { margin: 0 0 16px; }
label { display: block; font-size: .875rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
input[type="checkbox"] + *, label:has(input[type="checkbox"]), label:has(input[type="radio"]) { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 1rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  width: 100%; max-width: 520px; min-height: 48px; padding: 10px 16px; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rand); border-radius: 8px;
}
select { appearance: auto; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-zacht); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--merk); flex: none; }
fieldset { min-width: 0; border: 1px solid var(--lijn); border-radius: 20px; padding: 20px 24px 8px; margin: 0 0 24px; }
legend { font-weight: 500; font-size: 1.125rem; color: var(--ink); padding: 0 8px; }
.betaalmethode, .tijd { display: inline-flex; gap: 10px; align-items: center; margin: 0 16px 12px 0; }
[data-fout] { color: var(--fout); }
[data-melding] { color: var(--goed); }
[data-pc="uitleg"] { font-size: .875rem; color: var(--stil); }
[data-pc="uitleg"][data-soort="let-op"] { color: var(--fout); }
.hp { display: none; }

/* ---------- Mandje ---------- */
.mandje-regels, .bestelling { width: 100%; margin: 16px 0 24px; }
.mandje-regels th, .mandje-regels td, .bestelling th, .bestelling td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--lijn); vertical-align: middle; font-weight: 400; }
.mandje-regels thead th, .bestelling thead th { font-size: .8125rem; font-weight: 500; color: var(--stil); }
.bestelling tfoot th, .bestelling tfoot td { font-weight: 500; color: var(--ink); }
.mandje-regels .product { display: flex; align-items: center; gap: 16px; }
.mandje-regels .product img { flex: none; width: 72px; height: 72px; object-fit: contain; padding: 6px; border-radius: 12px; background: var(--vlak); }
.mandje-regels .product a { color: var(--ink); font-weight: 500; }
.mandje-regels input { width: 84px; min-height: 40px; padding: 6px 12px; }
.mandje-regels button { min-height: 36px; padding: 0 14px; background: transparent; color: var(--merk); font-size: .9375rem; box-shadow: none; }
.mandje-regels button:hover { background: var(--merk-zacht); color: var(--merk-donker); box-shadow: none; }
.totaal { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
#mandje .levering { color: var(--stil); font-size: .9375rem; }
.acties { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.acties a:not(.knop) { font-weight: 500; }

/* ---------- Afrekenen: kaarten zoals bij AA Witgoed. Links uw gegevens en bezorgadres, rechts het overzicht, de
   betaalkeuze en de bestelknop. Postcode en huisnummer eerst; straat en plaats vult de postcodecheck in. ---------- */
#afrekenen h1 { margin: 0 0 24px; }
#afrekenformulier {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: 0 32px; align-items: start;
  grid-template-areas: "gegevens overzicht" "levering betalen" "levering acties" "levering fout" "levering melding" "gevonden ." "marketing .";
}
#afrekenformulier > * { min-width: 0; }
#afrekenformulier > .gegevens { grid-area: gegevens; }
#afrekenformulier > .levering-keuze { grid-area: levering; }
#afrekenformulier > .overzicht { grid-area: overzicht; }
#afrekenformulier > .betalen { grid-area: betalen; }
#afrekenformulier > .acties { grid-area: acties; }
#afrekenformulier > [data-fout] { grid-area: fout; }
#afrekenformulier > [data-melding] { grid-area: melding; }
#afrekenformulier > p:has(#af-gevonden) { grid-area: gevonden; }
#afrekenformulier > p:has([name="marketing_consent"]) { grid-area: marketing; }
#afrekenformulier fieldset { border: 1px solid var(--lijn); border-radius: 20px; padding: 24px 24px 8px; margin: 0 0 16px; background: var(--paper); }
#afrekenformulier legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; font-size: 1.125rem; font-weight: 500; color: var(--ink); }
#afrekenformulier legend + * { clear: both; }
#afrekenen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #afrekenen select, #afrekenen textarea { max-width: none; background: var(--vlak); }
#afrekenen input:focus, #afrekenen select:focus, #afrekenen textarea:focus { background: var(--paper); }
/* Uw gegevens: naam over de hele breedte, e-mail en telefoon naast elkaar. */
#afrekenformulier > .gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#afrekenformulier > .gegevens > legend, #afrekenformulier > .gegevens > p:has(#af-naam) { grid-column: 1 / -1; }
/* Bezorgen of afhalen als keuzekaartjes; het gekozen kaartje kleurt blauw, een uitgeschakelde keuze verdwijnt. */
.levering-keuze > p:has(input[name="delivery"]) { margin: 0 0 12px; }
.levering-keuze > p:has(input[name="delivery"]) label { min-height: 52px; padding: 0 16px; border: 1px solid var(--rand); border-radius: 14px; cursor: pointer; font-weight: 500; }
.levering-keuze > p:has(input[name="delivery"]:checked) label { border-color: var(--merk); background: var(--merk-zacht); color: var(--merk-donker); }
.levering-keuze > p:has(input[name="delivery"]:disabled) { display: none; }
/* Adres: postcode, huisnummer en toevoeging op één rij; daaronder de melding van de postcodecheck; dan straat en plaats. */
[data-postcodecheck] { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; margin-top: 8px; }
[data-postcodecheck] > p { min-width: 0; }
[data-postcodecheck] > p:has(#af-postcode) { grid-column: 1; }
[data-postcodecheck] > p:has(#af-huisnummer) { grid-column: 2; }
[data-postcodecheck] > p:has(#af-toevoeging) { grid-column: 3; }
[data-postcodecheck] > [data-pc="uitleg"] { grid-column: 1 / -1; margin: -8px 0 14px; }
[data-postcodecheck] > p:has(#af-straat) { grid-column: 1 / 3; }
[data-postcodecheck] > p:has(#af-plaats) { grid-column: 3; }
[data-pc="uitleg"][data-soort="goed"] { color: var(--goed); }
/* Overzicht: grijze kaart met de regels, subtotaal, bezorgkosten en totaal. */
#afrekenformulier > .overzicht { border: 0; background: var(--vlak); padding: 24px 24px 16px; }
.overzicht ul { list-style: none; margin: 0 0 16px; padding: 0; }
.overzicht li { padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: .9375rem; }
.overzicht p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: .9375rem; color: var(--body); }
.overzicht .totaal { padding-top: 12px; border-top: 1px solid var(--lijn); color: var(--ink); font-size: 1.125rem; }
.overzicht .levering { display: block; font-size: .875rem; color: var(--stil); }
/* Betaalmethodes als keuzekaartjes (winkel.js vult ze); zonder methodes blijft de kaart weg. */
#afrekenformulier > .betalen:not(:has(.betaalmethode)) { display: none; }
.betalen [data-betaalmethodes] { display: grid; gap: 10px; margin: 0 0 12px; }
.betalen .betaalmethode { display: flex; margin: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--rand); border-radius: 14px; cursor: pointer; font-weight: 500; }
.betalen .betaalmethode:has(:checked) { border-color: var(--merk); background: var(--merk-zacht); color: var(--merk-donker); }
#afrekenen .acties { margin: 0 0 12px; }
#afrekenen .acties button { width: 100%; max-width: none; min-height: 56px; font-size: 1.0625rem; }
#afrekenformulier > [data-fout], #afrekenformulier > [data-melding] { margin: 0 0 12px; }
#afrekenen > p[data-mandje-leeg] { padding: 24px; border-radius: 20px; background: var(--vlak); }

/* Bedankpagina */
#bedankt .status { padding: 16px 20px; border-radius: 16px; background: var(--merk-zacht); color: var(--merk-donker); font-weight: 500; }
#bedankt .account-maken { margin-top: 32px; padding: 24px; border-radius: 20px; background: var(--vlak); }

/* ---------- Account ---------- */
#account[data-ingelogd="nee"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
#account[data-ingelogd="nee"] > h1 { grid-column: 1 / -1; margin: 0; }
#account section { padding: 24px; border-radius: 20px; background: var(--vlak); margin: 0 0 20px; }
#account section h2 { font-size: 1.25rem; margin: 0 0 16px; }
#account section input, #account section select, #account section textarea { background: var(--paper); max-width: none; }
#account .verificatie { background: var(--vlak-warm); }
#account .account-beheer { display: flex; flex-wrap: wrap; gap: 12px; background: transparent; padding: 0; }
#account .account-beheer form p { margin: 0; }
#account .account-beheer form:last-child button { background: var(--pil); color: var(--ink); }
#account .account-beheer form:last-child button:hover { background: var(--pil-hover); box-shadow: none; }
.bestellingen { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.bestellingen > li { background: var(--paper); border-radius: 16px; padding: 20px; }
.bestellingen h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.bestellingen h3 small { color: var(--stil); font-weight: 400; }
.bestellingen .regels { list-style: none; padding: 0; margin: 0 0 8px; color: var(--body); }
.bestellingen .totaal { font-size: 1rem; }
#stempelkaart { background: var(--merk-zacht) !important; }
#stempelkaart .stempels { font-size: 1.5rem; font-weight: 500; color: var(--merk-donker); margin: 0 0 4px; }

/* ---------- Contact, reviews, cookies, juridisch, 404 ---------- */
#contact address, #contact-kort address { line-height: 1.8; }
#contact .openingstijden { margin: 0 0 32px; }
.openingstijden caption { text-align: left; font-weight: 500; font-size: 1.125rem; color: var(--ink); padding: 0 0 8px; }
.openingstijden th, .openingstijden td { padding: 4px 24px 4px 0; text-align: left; font-weight: 400; }
.contactformulier, .reviewformulier { margin-top: 32px; padding: 24px; border-radius: 20px; background: var(--vlak); max-width: 640px; }
.contactformulier h2, .reviewformulier h2 { font-size: 1.25rem; margin: 0 0 16px; }
.contactformulier input, .contactformulier textarea, .reviewformulier input, .reviewformulier select, .reviewformulier textarea { background: var(--paper); max-width: none; }
.score { font-weight: 500; color: var(--ink); }
.reviewlijst { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.review { padding: 24px; border-radius: var(--radius-kaart); background: var(--vlak); }
.review .beoordeling { color: var(--ink); letter-spacing: .12em; margin: 0 0 8px; }
.review blockquote { margin: 0 0 12px; color: var(--ink); line-height: 1.6; }
.review footer { font-size: .875rem; color: var(--stil); }
#cookies form, #mijn-data { padding: 24px; border-radius: 20px; background: var(--vlak); margin: 0 0 20px; }
#mijn-data h2 { font-size: 1.25rem; }
#mijn-data p { display: flex; flex-wrap: wrap; gap: 10px; }
#mijn-data button:last-child { background: var(--pil); color: var(--ink); }
#mijn-data pre { white-space: pre-wrap; background: var(--paper); padding: 16px; border-radius: 12px; font-size: .8125rem; max-height: 420px; overflow: auto; }
#juridisch { max-width: 820px; line-height: 1.7; }
#juridisch h1 { margin: 0 0 8px; }
#juridisch .juridisch-intro { color: var(--stil); margin: 0 0 24px; }
#juridisch h2 { font-size: 1.375rem; margin: 40px 0 12px; }
#juridisch ol, #juridisch ul { padding-left: 1.4em; margin: 0 0 16px; }
#juridisch li { margin: 0 0 8px; }
#juridisch li ol { margin: 8px 0 0; }
#juridisch address { display: inline-block; margin: 0 0 16px; padding: 16px 20px; border-radius: 16px; background: var(--vlak); line-height: 1.8; }
#juridisch .inhoud { margin: 0 0 24px; padding: 20px 24px; border-radius: 20px; background: var(--vlak); }
#juridisch .inhoud h2 { font-size: 1rem; margin: 0 0 8px; }
#juridisch .inhoud ol { margin: 0; columns: 2; column-gap: 32px; }
#juridisch .inhoud li { margin: 0 0 4px; break-inside: avoid; }
#juridisch .inhoud a { color: var(--ink); }
#juridisch .herroeping { padding: 24px; border: 1px solid var(--lijn); border-radius: 20px; }
#juridisch .herroeping p:last-child { margin: 0; }
#niet-gevonden ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
#niet-gevonden li a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--radius-pil); background: var(--pil); color: var(--ink); font-weight: 500; }
#niet-gevonden li a:hover { background: var(--pil-hover); text-decoration: none; }
.chat-berichten { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.chat-berichten li { padding: 10px 14px; border-radius: 16px; background: var(--vlak); }
.chat-berichten .chat-bezoeker { background: var(--merk); color: #fff; justify-self: end; }
.diensten { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.diensten li { padding: 20px; border-radius: 16px; background: var(--vlak); }
.tijden { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Voet: één grijze kaart (28px rond) met merk en nieuwsbrief bovenin, vier kolommen en een smalle onderbalk ---------- */
#voet { position: relative; z-index: 3; margin-top: var(--sectie-y); padding: 0 0 24px; background: var(--paper); color: var(--ink); }
#voet .voet-in { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
#voet [id] { scroll-margin-top: calc(var(--pil-h) + 40px); }
#voet a { color: var(--ink); }
.voet-kaart { border-radius: var(--radius-kaart); background: var(--vlak); padding: 56px var(--kaart-in) 24px; }
.voet-boven { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; margin: 0 0 48px; }
.voet-merk { margin: 0; }
.voet-merk .woordmerk { font-size: 2rem; }
.voet-kernzin { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin: 16px 0 0; }
.voet-nb { flex: 0 1 460px; }
.voet-nb h2 { font-size: 1.125rem; font-weight: 500; margin: 0 0 6px; }
.voet-nb-zin { font-size: .9375rem; color: var(--body); margin: 0 0 12px; }
.voet-nb .nieuwsbrief p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.voet-nb .nieuwsbrief label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.voet-nb .nieuwsbrief input { flex: 1 1 200px; width: auto; max-width: none; border-radius: var(--radius-pil); padding: 0 20px; background: var(--paper); }
.voet-nb [data-melding], .voet-nb [data-fout] { margin: 10px 0 0; font-size: .875rem; }
.voet-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 0 40px; }
.voet-kolom h2 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.voet-kolom ul { list-style: none; margin: 0; padding: 0; }
.voet-kolom li a { display: flex; align-items: center; min-height: 40px; font-size: .9375rem; line-height: 22px; }
.voet-kolom address { margin: 12px 0 0; font-size: .875rem; line-height: 22px; color: var(--body); }
.voet-kolom address a { color: var(--body); }
.voet-tijden .openingstijden caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.voet-tijden .openingstijden th, .voet-tijden .openingstijden td { padding: 3px 16px 3px 0; font-size: .875rem; line-height: 22px; font-weight: 400; }
.voet-balk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 0 0; border-top: 1px solid var(--rand); font-size: .75rem; line-height: 16px; color: var(--stil); }
#voet #chat { padding: 40px var(--kaart-in) 0; }
#voet #chat input, #voet #chat textarea { background: var(--vlak); }

/* ---------- Cookiebanner ---------- */
#cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px;
  background: var(--paper); color: var(--body); border-radius: 20px; padding: 20px 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}
#cookie-banner p { margin: 0; }
#cookie-banner .keuzes { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
#cookie-banner .keuzes button:last-child { background: var(--pil); color: var(--ink); }
#cookie-banner .keuzes button:last-child:hover { background: var(--pil-hover); box-shadow: none; }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 1240px) {
  .tab { padding: 0 14px; }
  .tekst-knop span { display: none; }
  .tekst-knop { width: 48px; padding: 0; border-radius: 50%; justify-content: center; }
}
@media (max-width: 1100px) {
  .productlijst, .collectielijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Het menu klapt in tot een paneel van links; de menuknop staat links, daarnaast het merk. */
@media (max-width: 900px) {
  #kop { padding: 8px var(--gutter) 0; }
  .pilbalk { gap: 0; height: 56px; padding: 4px; }
  #kop .burger {
    display: block; position: relative; z-index: 70; flex: none; width: 44px; height: 44px; margin: 0 2px 0 0;
    border-radius: 50%; cursor: pointer; background: transparent; transition: background 140ms ease;
  }
  #kop .burger:hover { background: var(--pil); }
  .burger span { position: absolute; left: 50%; width: 20px; height: 2px; margin-left: -10px; border-radius: 2px; background: var(--ink); transition: transform 200ms ease, opacity 200ms ease; }
  .burger span:nth-child(1) { top: calc(50% - 7px); }
  .burger span:nth-child(2) { top: calc(50% - 1px); }
  .burger span:nth-child(3) { top: calc(50% + 5px); }
  .menu-schakel:checked ~ .pilbalk .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-schakel:checked ~ .pilbalk .burger span:nth-child(2) { opacity: 0; }
  .menu-schakel:checked ~ .pilbalk .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-schakel:focus-visible ~ .pilbalk .burger { outline: 2px solid var(--merk); outline-offset: 2px; }
  .merk { margin: 0; gap: 8px; }
  .woordmerk { font-size: 1.125rem; }
  .dscrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
  .menu-schakel:checked ~ .pilbalk .dscrim { opacity: 1; visibility: visible; transition-delay: 0s; }
  /* De tabs worden een paneel van links; de menuknop staat links in de pil. */
  #menu {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); z-index: 65;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 80px 16px 24px; background: var(--paper);
    border-radius: 0 var(--radius-kaart) var(--radius-kaart) 0; box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 320ms cubic-bezier(.2, 0, 0, 1), visibility 0s linear 320ms;
  }
  .menu-schakel:checked ~ .pilbalk #menu { transform: none; visibility: visible; transition-delay: 0s; }
  #menu .tab { height: auto; min-height: 52px; padding: 0 20px; font-size: 1.125rem; background: transparent; }
  #menu .tab:hover { background: var(--pil); }
  body[data-page-type="home"] #menu .tab-home, body[data-page-type="category"] #menu .tab-producten, body[data-page-type="product"] #menu .tab-producten,
  body[data-page-type="reviews"] #menu .tab-reviews, body[data-page-type="contact"] #menu .tab-contact { background: var(--merk-zacht); color: var(--merk-donker); }
  .alleen-mobiel { display: inline-flex; }
  .pilbalk-rechts .tekst-knop { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  .pilbalk-knop { min-height: 44px; margin-left: 4px; padding: 0 12px 0 14px; }
  .pilbalk-knop-tekst { display: none; }
  .hero-in { grid-template-columns: 1fr; padding: 24px 20px 32px; }
  .hero-beeld { order: -1; max-width: 420px; margin: 0 auto; }
  .hero-tekst { text-align: center; }
  .kenmerken { grid-template-columns: 1fr; gap: 40px; }
  .kenmerk-beeld { max-width: 420px; margin-left: auto; margin-right: auto; }
  .productlijst, .collectielijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .productlijst .product, .collectielijst .collectie { padding: 16px; }
  .product-boven { grid-template-columns: 1fr; gap: 24px; }
  /* Foto's als een schuifrij (één tegelijk, met scroll-snap), zodat de gegevens direct onder de eerste foto staan. */
  #product .fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; scrollbar-width: none; }
  #product .fotos::-webkit-scrollbar { display: none; }
  #product .fotos img, #product .fotos img:first-child { flex: 0 0 100%; scroll-snap-align: start; padding: 20px; border-radius: 20px; }
  .service { grid-template-columns: 1fr; }
  #afrekenformulier { grid-template-columns: 1fr; grid-template-areas: "gegevens" "levering" "overzicht" "betalen" "acties" "fout" "melding" "gevonden" "marketing"; }
  #afrekenformulier > .gegevens { grid-template-columns: 1fr; }
  [data-postcodecheck] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  [data-postcodecheck] > p:has(#af-toevoeging), [data-postcodecheck] > p:has(#af-straat), [data-postcodecheck] > p:has(#af-plaats) { grid-column: 1 / -1; }
  .voet-kaart { padding: 40px 24px 20px; }
  .voet-boven { margin: 0 0 32px; }
  .voet-nb { flex: 1 1 100%; }
  .voet-kolommen { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* Mandje op een telefoon: elke regel wordt een kaartje (foto en naam; prijs en subtotaal; aantal en verwijderen). */
@media (max-width: 700px) {
  .mandje-regels, .mandje-regels tbody { display: block; width: 100%; }
  .mandje-regels thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mandje-regels tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px;
    grid-template-areas: "product product" "prijs subtotaal" "aantal acties";
    padding: 18px 0; border-bottom: 1px solid var(--lijn);
  }
  .mandje-regels td { display: block; min-width: 0; padding: 0; border: 0; }
  .mandje-regels td.product { grid-area: product; display: flex; align-items: center; gap: 14px; }
  .mandje-regels td.product a { min-width: 0; overflow-wrap: anywhere; }
  .mandje-regels td.prijs { grid-area: prijs; color: var(--stil); font-size: .9rem; }
  .mandje-regels td.prijs::after { content: " per stuk"; }
  .mandje-regels td.subtotaal { grid-area: subtotaal; text-align: right; color: var(--ink); font-weight: 500; }
  .mandje-regels td.aantal { grid-area: aantal; }
  .mandje-regels td.acties { grid-area: acties; display: block; text-align: right; }
  #zoeken > button { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .hero-tekst h1 { font-size: 2rem; }
  .btn, button, .knop { padding: 0 20px; }
  .pilbalk-rechts .pilbalk-knop { padding: 0 14px; }
  .voet-kolommen { grid-template-columns: 1fr; }
  .product-info .prijs { font-size: 1.5rem; }
  #juridisch .inhoud ol { columns: 1; }
}
@media (max-width: 400px) {
  .productlijst, .collectielijst { grid-template-columns: 1fr; }
  .woordmerk { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .filters, .winkel-layout > .filters-scherm, #menu, .dscrim, .burger span, .productlijst .product .foto img, .pilbalk { transition: none; animation: none; }
}