:root{--paper:#FFFFFF;--vlak:#F9F9F9;--vlak-warm:#F5F3EF;--pil:#EFF1F2;--pil-hover:#E3E6E8;--ink:#191C1D;--body:#3C4043;--stil:#5F6368;--rand:#C4C7C5;--lijn:#E3E3E3;--blauw:#0B57D0;--blauw-donker:#0842A0;--blauw-zacht:#D3E3FD;--blauw-licht:#C2E7FF;--goed:#146C2E;--fout:#B3261E;--font-sans:'Google Sans Flex', 'Google Sans', Roboto, 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:#0B57D0;--mail-op-accent:#FFFFFF;--mail-accent-tekst:#0842A0;--mail-vak:#D3E3FD;--mail-vak-titel:#0842A0;--mail-vak-tekst:#191C1D;--mail-hulp:#191C1D;--mail-op-hulp:#FFFFFF;--mail-stil-op-hulp:#BDC1C6;--mail-font-titel:'Google Sans Flex', 'Google Sans', Roboto, Arial, sans-serif;--mail-font-tekst:'Google Sans Flex', 'Google Sans', Roboto, Arial, sans-serif;--mail-font-woordmerk:'Google Sans Flex', 'Google Sans', Roboto, Arial, sans-serif;--mail-titel-gewicht:500;--tekst:1156px;--topbar-h:84px;--pil-h:64px}
/* tv webshop — design voor het website-skelet (platform-v2), overgenomen van de Google Store
   (store.google.com, productpagina Google TV Streamer, gemeten op 24-10-2026). Versie 2: de kop in twee
   lagen zoals daar (een gewone bovenbalk met logo, tekstlinks en icoontjes, en daaronder een zwevende
   pilvormige balk met tabs die meescrolt), de hero-kaart met een strook erboven, drie kenmerken met een
   beeld, kop en tekst, productkaarten als de accessoirekaarten, en de voet met een "Shop"-kaart, vier
   kolommen en een smalle onderbalk. Maten: kaarten 1392px breed met 28px ronde hoeken, tekst 1156px,
   koppen in gewicht 500, pillen van 48px, Google Sans Flex (OFL, zelf gehost). 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: 'Google Sans Flex'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url(/thema/GoogleSansFlex-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: 'Google Sans Flex'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url(/thema/GoogleSansFlex-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: 500; 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(--blauw); 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(--blauw); 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 blauw 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(--blauw); color: #fff;
  transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.btn:hover, button:hover, .knop:hover { background: var(--blauw-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, laag 1: de bovenbalk (logo, tekstlinks, zoeken, account, mandje) ----------
   Niet vast. De hele kop plakt met een negatieve top, zodat alleen de pilbalk (laag 2) in beeld blijft. */
#kop { position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 50; background: transparent; }
.topbar {
  display: flex; align-items: center; gap: 0; height: var(--topbar-h);
  padding: 0 calc(var(--gutter) + 20px); background: var(--paper);
}
.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; }
.merk-teken { width: 32px; height: 32px; flex: none; }
.merk-naam { font-size: 1.25rem; font-weight: 500; white-space: nowrap; }
#menu { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; padding: 12px; border-radius: var(--radius-pil);
  font-size: 1rem; font-weight: 500; line-height: 24px; color: var(--ink); white-space: nowrap; text-decoration: none;
  transition: background 140ms ease;
}
.nav-link:hover { background: var(--pil); text-decoration: none; }
.alleen-mobiel { display: none; }
.topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative; width: 40px; height: 40px; 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 { 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: 6px; height: 48px; padding: 0 12px; 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; }
.icon-btn .count {
  position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--blauw); color: #fff; font-size: .6875rem; font-weight: 500; line-height: 18px; text-align: center; border-radius: 999px;
}
.menu-schakel { position: absolute; opacity: 0; pointer-events: none; }
#kop .burger, .dscrim { display: none; }

/* ---------- Kop, laag 2: de zwevende pilbalk (naam, tabs, mandje, knop) ---------- */
.pilbalk {
  position: relative; display: flex; align-items: center; gap: 24px; height: var(--pil-h);
  margin: 4px var(--gutter) 24px; padding: 4px 4px 4px 8px;
  background: var(--paper); border-radius: var(--radius-pil); box-shadow: var(--schaduw);
}
.pilbalk-naam { padding: 0 0 0 16px; font-size: 1.25rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pilbalk-tabs { display: flex; 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(--blauw-zacht); color: var(--blauw-donker); }
.pilbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.pilbalk-tekst { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.pilbalk-tekst strong { font-size: .875rem; font-weight: 500; color: var(--ink); }
.pilbalk-tekst small { font-size: .75rem; color: var(--ink); }
.pilbalk-knop { min-height: 56px; padding: 0 24px; }
.pilbalk-knop-mandje { display: none; }
body[data-page-type="category"] .pilbalk-knop-producten, body[data-page-type="product"] .pilbalk-knop-producten, body[data-page-type="cart"] .pilbalk-knop-producten { display: none; }
body[data-page-type="category"] .pilbalk-knop-mandje, body[data-page-type="product"] .pilbalk-knop-mandje, body[data-page-type="cart"] .pilbalk-knop-mandje { display: inline-flex; }
body[data-page-type="checkout"] .pilbalk-rechts, body[data-page-type="thankyou"] .pilbalk-rechts { display: none; }
/* Bij de Google Store krijgt de balk pas een schaduw en wat lucht erboven zodra de pagina scrolt. Browsers die
   scroll-gestuurde animaties kennen doen dat ook; de rest houdt de schaduw altijd. */
@supports (animation-timeline: scroll()) {
  .pilbalk { box-shadow: none; animation: pilbalk-plakt linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes pilbalk-plakt {
    from { box-shadow: 0 2px 10px rgba(0, 0, 0, 0); transform: translateY(0); }
    to { box-shadow: 0 2px 10px rgba(0, 0, 0, .15); transform: translateY(12px); }
  }
}

/* ---------- 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 (vierkant, 28px rond), kop van 20px en een regel 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 { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin: 0 0 32px; border-radius: var(--radius-kaart); background: var(--vlak); }
.kenmerk-beeld svg { width: 38%; 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(--blauw); outline-offset: 3px; }
.kleur.gekozen { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--blauw); }
.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(--blauw); outline-offset: 2px; }
.maat.gekozen { background: var(--blauw-zacht); border-color: var(--blauw-zacht); color: var(--blauw-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(--blauw-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(--blauw); box-shadow: var(--schaduw); }
.wishlist-knop[aria-pressed="true"], #wishlist button[aria-pressed="true"] { color: var(--blauw); }
#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(--blauw-zacht); color: var(--blauw-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(--blauw); background: var(--paper); box-shadow: 0 0 0 3px var(--blauw-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(--blauw-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(--blauw); border-color: var(--blauw); }
.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(--blauw-zacht); color: var(--blauw-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(--blauw); 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: foto's links (blijven staan bij scrollen), gegevens rechts ---------- */
.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 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4px 56px; align-items: start; }
#product > .kruimels, #product > .omschrijving, #product > .specificaties { grid-column: 1 / -1; }
#product > .fotos { grid-column: 1; grid-row: 2 / span 12; position: sticky; top: calc(var(--pil-h) + 32px); display: grid; gap: 16px; }
#product > .fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 24px; border-radius: var(--radius-kaart); background: var(--vlak); }
#product > :not(.fotos):not(.kruimels):not(.omschrijving):not(.specificaties) { grid-column: 2; }
#product > h1 { font-size: clamp(1.75rem, 2.75vw, 2.5rem); margin: 0 0 4px; }
#product .merk { color: var(--stil); margin: 0 0 12px; }
#product .prijs { font-size: 1.25rem; margin: 8px 0; }
#product .prijs .van { font-size: 1rem; }
#product .voorraad { margin: 0 0 8px; font-size: .9375rem; }
#product .conditie { color: var(--stil); margin: 0 0 8px; }
#product .mandje-toevoegen, #product .voorraadmelding { margin: 16px 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 .voorraadmelding input { background: var(--paper); }
#product .levering { color: var(--stil); font-size: .9375rem; }
#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(--blauw); box-shadow: 0 0 0 3px var(--blauw-zacht); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--blauw); 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(--blauw); font-size: .9375rem; box-shadow: none; }
.mandje-regels button:hover { background: var(--blauw-zacht); color: var(--blauw-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: velden links, overzicht rechts (blijft staan) ---------- */
#afrekenformulier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 0 40px; align-items: start; }
#afrekenformulier > * { grid-column: 1; min-width: 0; }
#afrekenformulier > .overzicht { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: calc(var(--pil-h) + 32px); border: 0; background: var(--vlak); padding: 24px 24px 16px; }
.overzicht legend { padding: 0; }
.overzicht ul { list-style: none; margin: 8px 0 16px; padding: 0; }
.overzicht li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.overzicht p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.overzicht .totaal { padding-top: 12px; border-top: 1px solid var(--lijn); }
.overzicht .levering { display: block; font-size: .875rem; color: var(--stil); }
#afrekenen input, #afrekenen select, #afrekenen textarea { max-width: 520px; }
#afrekenen .acties button { width: 100%; max-width: 360px; min-height: 56px; font-size: 1.0625rem; }
#afrekenen > p[data-mandje-leeg] { padding: 24px; border-radius: 20px; background: var(--vlak); }

/* Bedankpagina */
#bedankt .status { padding: 16px 20px; border-radius: 16px; background: var(--blauw-zacht); color: var(--blauw-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(--blauw-zacht) !important; }
#stempelkaart .stempels { font-size: 1.5rem; font-weight: 500; color: var(--blauw-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: 760px; line-height: 1.7; }
#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(--blauw); 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: "Shop"-kaart (grijs, 28px rond), dan merk en vier kolommen, onderaan een smalle balk ---------- */
#voet { position: relative; z-index: 3; margin-top: var(--sectie-y); 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-shop { border-radius: var(--radius-kaart); background: var(--vlak); padding: 60px var(--kaart-in) 36px; }
.voet-shop h2 { font-size: 2rem; margin: 0 0 40px; }
.voet-shop-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.voet-shop h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 12px; }
.voet-shop ul { list-style: none; margin: 0; padding: 0; }
.voet-shop li a { display: block; padding: 12px 0; font-size: 1rem; line-height: 1.5; }
.voet-nb-zin { font-size: .9375rem; color: var(--body); margin: 0 0 12px; }
.voet-nb .nieuwsbrief p { display: flex; flex-direction: column; 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 { max-width: none; border-radius: var(--radius-pil); padding: 0 20px; }
.voet-nb .nieuwsbrief button { align-self: flex-start; }
.voet-nb [data-melding], .voet-nb [data-fout] { margin: 10px 0 0; font-size: .875rem; }
.voet-onder-deel { padding: 60px var(--kaart-in) 0; }
.voet-merk { font-size: 1.5rem; font-weight: 500; color: var(--ink); margin: 0 0 40px; }
.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: 48px; font-size: .875rem; line-height: 22px; }
.voet-kolom address { margin: 8px 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; gap: 8px 24px; padding: 16px 0 40px; border-top: 1px solid var(--rand); font-size: .6875rem; line-height: 14px; color: var(--ink); }
#voet #chat { padding: 0 var(--kaart-in) 40px; }
#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) {
  .topbar { padding: 0 var(--gutter); }
  .nav-link { padding: 12px 10px; }
  .tekst-knop span { display: none; }
  .tekst-knop { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
}
@media (max-width: 1100px) {
  .productlijst, .collectielijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pilbalk-tekst { display: none; }
}
/* Het menu klapt in tot een paneel van links; de menuknop staat links, daarnaast het merk. */
@media (max-width: 900px) {
  :root { --topbar-h: 64px; }
  .topbar { gap: 0; }
  #kop .burger {
    display: block; position: relative; z-index: 70; flex: none; width: 44px; height: 44px; margin: 0 4px 0 -8px;
    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 ~ .topbar .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-schakel:checked ~ .topbar .burger span:nth-child(2) { opacity: 0; }
  .menu-schakel:checked ~ .topbar .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-schakel:focus-visible ~ .topbar .burger { outline: 2px solid var(--blauw); outline-offset: 2px; }
  .merk { margin: 0; }
  .merk-naam { 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 ~ .topbar .dscrim { opacity: 1; visibility: visible; transition-delay: 0s; }
  #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: 88px 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 ~ .topbar #menu { transform: none; visibility: visible; transition-delay: 0s; }
  #menu .nav-link { min-height: 52px; padding: 0 20px; font-size: 1.125rem; }
  .alleen-mobiel { display: inline-flex; }
  .topbar-rechts .tekst-knop { display: none; }
  .pilbalk { gap: 8px; height: 56px; padding: 4px; margin: 4px var(--gutter) 16px; }
  .pilbalk-naam { display: none; }
  .pilbalk-tabs { overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
  .pilbalk-tabs::-webkit-scrollbar { display: none; }
  .tab, .pilbalk-knop { height: 48px; min-height: 48px; padding: 0 14px; font-size: .9375rem; }
  .pilbalk-rechts { gap: 8px; }
  .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 { grid-template-columns: 1fr; }
  #product > .fotos, #product > :not(.fotos):not(.kruimels):not(.omschrijving):not(.specificaties) { grid-column: 1; grid-row: auto; }
  #product > .fotos { position: static; margin: 0 0 20px; }
  #afrekenformulier { grid-template-columns: 1fr; }
  #afrekenformulier > .overzicht { grid-column: 1; grid-row: auto; position: static; }
  .voet-shop { padding: 40px 24px 24px; }
  .voet-shop-kolommen, .voet-kolommen { grid-template-columns: 1fr 1fr; gap: 24px; }
  .voet-onder-deel { padding: 40px 24px 0; }
}
/* 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-shop-kolommen, .voet-kolommen { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .productlijst, .collectielijst { grid-template-columns: 1fr; }
  .merk-naam { 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; }
}