/* Automatisch gebundeld door de snelheid-module — bewerk de bronbestanden, niet dit bestand. */

/* == assets/css/main.css == */
/* ============================================================
   Foto de Vakman — main.css
   Gedeelde basis voor elke pagina: designtokens, componenten en
   de kern-compatibiliteitslaag.

   Opbouw:
     1–21  Designsysteem Foto de Vakman (klassen met voorvoegsel fdv-)
     22    Kern-compatibiliteit: de klassennamen die de IMPOSABLE-kern
           gebruikt (.wrap, .btn, .nav, .drawer, .toast, .consent, .qty,
           .field ...) gekoppeld aan dezelfde tokens, zodat pagina's die
           nog niet zijn omgezet leesbaar blijven.

   Paginaspecifieke aanvullingen: home.css, shop.css, product.css,
   cart.css, checkout.css, pages.css.
============================================================ */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Kleur — oppervlak */
  --fdv-canvas:        #EFEDE7;
  --fdv-bg:            #F7F6F2;
  --fdv-surface:       #FFFFFF;
  --fdv-surface-soft:  #F1EFE9;

  /* Kleur — tekst */
  --fdv-ink:           #181A1C;
  --fdv-ink-soft:      #2C3033;
  --fdv-muted:         #6B6660;
  --fdv-muted-soft:    #8A857D;
  --fdv-on-dark:       #EDEAE3;
  --fdv-on-dark-muted: #9A968F;
  --fdv-on-dark-dim:   #7C7873;

  /* Kleur — lijnen */
  --fdv-line:          #E8E5DF;
  --fdv-line-strong:   #D8D4CC;
  --fdv-line-control:  #C9C4BB;
  --fdv-line-dark:     #2C3033;
  --fdv-line-dark-2:   #3A3E41;

  /* Kleur — merk en status */
  --fdv-accent:        #E8612A;
  --fdv-accent-hover:  #C94E1D;
  --fdv-accent-deep:   #B34A17;
  --fdv-accent-soft:   #FFF0E8;
  --fdv-accent-soft-line: #F3D8C8;
  --fdv-success:       #237A57;
  --fdv-warning:       #B34A17;
  --fdv-danger:        #B3261E;

  /* Typografie */
  --fdv-font:          Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fdv-font-display:  "Inter Tight", Inter, Helvetica, Arial, sans-serif;
  --fdv-font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --fdv-r-xs: 5px;
  --fdv-r-sm: 6px;
  --fdv-r-md: 8px;
  --fdv-r-lg: 10px;
  --fdv-r-xl: 12px;
  --fdv-r-pill: 999px;

  /* Schaduw */
  --fdv-shadow-card:  0 4px 16px rgba(24, 26, 28, 0.07);
  --fdv-shadow-pop:   0 12px 40px rgba(24, 26, 28, 0.14);
  --fdv-shadow-sticky: 0 -2px 14px rgba(24, 26, 28, 0.08);

  /* Layout */
  --fdv-max:     1280px;
  --fdv-gutter:  64px;
  --fdv-section: 104px;

  /* Transities */
  --fdv-t: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  :root { --fdv-gutter: 32px; --fdv-section: 72px; }
}
@media (max-width: 640px) {
  :root { --fdv-gutter: 16px; --fdv-section: 56px; }
}

/* -------------------------------------------------------------------------
   2. Reset en basis
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fdv-bg);
  color: var(--fdv-ink);
  font-family: var(--fdv-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--fdv-accent); text-decoration: none; transition: color var(--fdv-t); }
a:hover { color: var(--fdv-accent-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--fdv-font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--fdv-accent); outline-offset: 2px; border-radius: 4px; }

.fdv-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fdv-skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--fdv-ink); color: #fff; padding: 12px 18px; border-radius: var(--fdv-r-md);
  font-size: 14px; font-weight: 600; transition: top var(--fdv-t);
}
.fdv-skip-link:focus { top: 8px; color: #fff; }

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */
.fdv-shell { display: flex; flex-direction: column; min-height: 100vh; }
/* Ook body > main zonder de klasse: een paar modulepagina's (dealers,
   fotoservice, landingen, nieuwsbrief-afmelden) renderen <main id="main">
   zonder .fdv-main. Zonder deze regel groeit main daar niet mee en valt de
   restruimte van de body-kolom ónder de footer — het "gat na de footer". */
.fdv-main, body > main { flex: 1; }

/* De pagina's gebruiken .fdv-shell niet: header, main en footer staan los in
   de body. Op korte pagina's (bevestiging, login, betaling mislukt) eindigde
   de footer daardoor halverwege het scherm, met "ruimte na de footer" als
   gevolg. De body is nu zelf de kolom: .fdv-main (flex: 1 hierboven) neemt de
   restruimte en de footer sluit altijd op de bodem. 100dvh als tweede regel:
   op mobiel telt 100vh de adresbalk mee en klopt hij net niet. Elementen met
   position: fixed (lade, cookiemelding, toasts) doen niet mee in flex en
   merken hier niets van. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* Niets mag de pagina breder maken dan het scherm — op mobiel gaf brede
   inhoud (tabellen, lange codes) witruimte rechts naast de site en
   horizontale scroll. clip en niet hidden: hidden maakt van de body een
   scrollcontainer en breekt position: sticky (vergelijkbalk, navigatie). */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

.fdv-container {
  width: 100%;
  max-width: calc(var(--fdv-max) + var(--fdv-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--fdv-gutter);
}

.fdv-section { padding-block: var(--fdv-section) 0; }
.fdv-section--tight { padding-block: 56px 0; }
.fdv-section--last { padding-bottom: var(--fdv-section); }

.fdv-stack { display: flex; flex-direction: column; }
.fdv-stack--xs { gap: 6px; }
.fdv-stack--sm { gap: 10px; }
.fdv-stack--md { gap: 16px; }
.fdv-stack--lg { gap: 24px; }

.fdv-row { display: flex; align-items: center; gap: 12px; }
.fdv-row--between { justify-content: space-between; }
.fdv-row--wrap { flex-wrap: wrap; }

.fdv-grid { display: grid; gap: 24px; }
/* Rasteritems mogen krimpen; anders duwt brede inhoud de kolom breder dan het scherm. */
.fdv-grid > *, .fdv-listing > *, .fdv-cart-layout > *, .fdv-account > *, .fdv-split > * { min-width: 0; }
.fdv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fdv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fdv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fdv-grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }

/* Samengestelde rasters: smalle kolom naast brede kolom */
.fdv-grid--sidebar { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: center; }
.fdv-grid--panel   { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: center; }

/* Formulier op één regel, gestapeld op mobiel */
.fdv-inline-form { display: flex; gap: 10px; align-items: stretch; }

@media (max-width: 1024px) {
  .fdv-grid--3, .fdv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fdv-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fdv-grid--sidebar, .fdv-grid--panel { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}
@media (max-width: 640px) {
  .fdv-inline-form { flex-direction: column; }
}
@media (max-width: 640px) {
  .fdv-grid { gap: 12px; }
  .fdv-grid--2, .fdv-grid--3 { grid-template-columns: 1fr; }
  .fdv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fdv-grid--8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sectiekop */
.fdv-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 32px;
}
.fdv-section-head h2 { font-size: 36px; }
.fdv-section-head p { font-size: 16px; color: var(--fdv-ink-soft); max-width: 52ch; margin-top: 10px; }
.fdv-section-head__link { font-size: 15px; font-weight: 600; color: var(--fdv-accent); white-space: nowrap; }

@media (max-width: 640px) {
  .fdv-section-head { align-items: baseline; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
  .fdv-section-head h2 { font-size: 26px; }
  .fdv-section-head p { font-size: 15px; }
  .fdv-section-head__link { font-size: 14px; }
}

/* -------------------------------------------------------------------------
   4. Typografie-hulpklassen
   ------------------------------------------------------------------------- */
.fdv-display   { font-family: var(--fdv-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(38px, 5.4vw, 64px); }
.fdv-h1        { font-size: clamp(30px, 4vw, 48px); }
.fdv-h2        { font-size: clamp(26px, 2.8vw, 36px); }
.fdv-h3        { font-size: clamp(22px, 2.2vw, 34px); }
.fdv-h4        { font-size: clamp(19px, 1.6vw, 24px); }
.fdv-h5        { font-size: 19px; }

.fdv-lead      { font-size: 18px; line-height: 1.6; color: var(--fdv-ink-soft); }
.fdv-body      { font-size: 16px; line-height: 1.7; color: var(--fdv-ink-soft); }
.fdv-small     { font-size: 14px; color: var(--fdv-muted); }
.fdv-xsmall    { font-size: 13px; color: var(--fdv-muted); }

.fdv-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fdv-accent);
}
.fdv-eyebrow {
  font-family: var(--fdv-font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fdv-muted-soft);
}
.fdv-mono { font-family: var(--fdv-font-mono); font-size: 11px; color: var(--fdv-muted-soft); }

.fdv-muted { color: var(--fdv-muted); }
.fdv-accent { color: var(--fdv-accent); }
.fdv-success-text { color: var(--fdv-success); }
.fdv-measure { max-width: 56ch; }

@media (max-width: 640px) {
  .fdv-lead { font-size: 15px; }
  .fdv-body { font-size: 15px; }
}

/* -------------------------------------------------------------------------
   5. Knoppen
   ------------------------------------------------------------------------- */
.fdv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--fdv-r-lg);
  background: transparent; color: var(--fdv-ink);
  font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--fdv-t), border-color var(--fdv-t), color var(--fdv-t), transform var(--fdv-t);
}
.fdv-btn:hover { transform: translateY(-1px); }
.fdv-btn:active { transform: translateY(0); }

.fdv-btn--primary { background: var(--fdv-accent); color: #fff; border-color: var(--fdv-accent); }
.fdv-btn--primary:hover { background: var(--fdv-accent-hover); border-color: var(--fdv-accent-hover); color: #fff; }

.fdv-btn--secondary { border-color: var(--fdv-ink); color: var(--fdv-ink); background: transparent; }
.fdv-btn--secondary:hover { background: var(--fdv-ink); color: #fff; }

.fdv-btn--ghost { border-color: var(--fdv-line); background: var(--fdv-surface); color: var(--fdv-ink); font-weight: 500; }
.fdv-btn--ghost:hover { border-color: var(--fdv-line-control); color: var(--fdv-ink); }

.fdv-btn--light { background: #fff; color: var(--fdv-ink); border-color: #fff; }
.fdv-btn--light:hover { background: var(--fdv-bg); color: var(--fdv-ink); }

.fdv-btn--on-dark { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.fdv-btn--on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.fdv-btn--sm { min-height: 36px; padding: 0 16px; font-size: 14px; border-radius: var(--fdv-r-md); }
.fdv-btn--lg { min-height: 52px; padding: 0 26px; }
.fdv-btn--block { width: 100%; }

.fdv-btn[disabled], .fdv-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.fdv-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fdv-accent); }
.fdv-link-arrow svg { flex: 0 0 auto; }

/* Icoonknop */
.fdv-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--fdv-r-md);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--fdv-ink); transition: background var(--fdv-t), border-color var(--fdv-t);
}
.fdv-icon-btn:hover { background: var(--fdv-surface-soft); }
.fdv-icon-btn--round { border-radius: var(--fdv-r-pill); width: 32px; height: 32px; background: #fff; border-color: var(--fdv-line); }
.fdv-icon-btn--round:hover { border-color: var(--fdv-ink); background: #fff; }
.fdv-icon-btn.is-active { color: var(--fdv-accent); border-color: var(--fdv-accent); }

/* -------------------------------------------------------------------------
   6. Chips, badges en labels
   ------------------------------------------------------------------------- */
.fdv-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-md);
  background: var(--fdv-surface); color: var(--fdv-ink-soft);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: border-color var(--fdv-t), background var(--fdv-t), color var(--fdv-t);
}
.fdv-chip:hover { border-color: var(--fdv-line-control); }
.fdv-chip.is-active, .fdv-chip[aria-pressed="true"] { background: var(--fdv-ink); border-color: var(--fdv-ink); color: #fff; }

.fdv-chip--filter {
  min-height: 32px; padding: 0 12px; font-size: 13px;
  background: var(--fdv-accent-soft); border-color: var(--fdv-accent-soft-line); color: var(--fdv-accent-deep);
}
.fdv-chip--filter:hover { border-color: var(--fdv-accent); }
.fdv-chip--filter svg { flex: 0 0 auto; }

.fdv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--fdv-r-pill);
  background: var(--fdv-accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
}

.fdv-tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 6px 10px; border-radius: var(--fdv-r-sm);
  background: var(--fdv-accent-soft); color: var(--fdv-accent-deep);
  font-size: 13px; font-weight: 500;
}
.fdv-tag--new {
  background: #fff; color: var(--fdv-ink);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px;
}
.fdv-tag--outline { background: #fff; border: 1px solid var(--fdv-line); color: var(--fdv-ink-soft); font-size: 11px; font-weight: 600; padding: 5px 9px; }
.fdv-tag--success { background: rgba(35, 122, 87, 0.1); color: var(--fdv-success); }

/* Voorraadstip */
.fdv-stock { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fdv-success); }
.fdv-stock::before { content: ""; width: 7px; height: 7px; border-radius: var(--fdv-r-pill); background: currentColor; flex: 0 0 auto; }
.fdv-stock--low { color: var(--fdv-warning); }
.fdv-stock--out { color: var(--fdv-muted); }

/* Beoordelingssterren */
.fdv-stars { color: var(--fdv-accent); font-size: 13px; letter-spacing: 0.06em; }
.fdv-rating { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fdv-muted); }

/* -------------------------------------------------------------------------
   7. Kaarten en beeldplaatshouders
   ------------------------------------------------------------------------- */
.fdv-card {
  background: var(--fdv-surface);
  border: 1px solid var(--fdv-line);
  border-radius: var(--fdv-r-xl);
  overflow: hidden;
}
.fdv-card--pad { padding: 24px; }
.fdv-card--soft { background: var(--fdv-bg); }
.fdv-card--hover { transition: border-color var(--fdv-t), box-shadow var(--fdv-t), transform var(--fdv-t); }
.fdv-card--hover:hover { border-color: var(--fdv-line-control); box-shadow: var(--fdv-shadow-card); transform: translateY(-2px); }

/* Beeldplaatshouder: diagonale arcering zoals in het ontwerp.
   Vervang later door <img> — de klasse blijft bruikbaar als achtergrond. */
.fdv-media {
  position: relative;
  background: repeating-linear-gradient(135deg, #EDEAE3 0 8px, #F4F2ED 8px 16px);
  display: flex; align-items: flex-end; padding: 12px; overflow: hidden;
}
.fdv-media--product { background: repeating-linear-gradient(135deg, #F1EFE9 0 8px, #F8F7F3 8px 16px); align-items: center; justify-content: center; }
/* Zodra er een echt beeld in de wrapper staat, verdwijnt de arcering.
   Productfoto's van de Logic4-CDN staan vaak op wit met object-fit:
   contain; de strepen zouden er dan omheen blijven schemeren.

   Let op de tweede selector: in de productroosters (shop, occasions,
   gerelateerd) zit het beeld in een <a> — met alleen :has(> img) bleef de
   arcering daar staan, en dat zijn juist de grootste roosters van de winkel.
   De witte achtergrond op het beeld zelf is de terugval voor browsers die
   :has() niet kennen: met box-sizing: border-box dekt die ook de padding. */
.fdv-media:has(> img),
.fdv-media:has(> a > img),
.fdv-media:has(> picture > img) { background: #FFFFFF; }

/* De link mag de hele plaatshouder vullen, anders staat het beeld eronder
   in plaats van erin. */
.fdv-media > a { position: absolute; inset: 0; display: block; }

.fdv-media--product > img,
.fdv-media--product > a > img,
.fdv-media--product > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; background: #FFFFFF; }
.fdv-media--hero { background: repeating-linear-gradient(135deg, #DEDAD2 0 10px, #E6E2DA 10px 20px); }
.fdv-media--1-1 { aspect-ratio: 1 / 1; }
.fdv-media--4-3 { aspect-ratio: 4 / 3; }
.fdv-media--4-5 { aspect-ratio: 4 / 5; }
.fdv-media--16-9 { aspect-ratio: 16 / 9; }
.fdv-media--16-10 { aspect-ratio: 16 / 10; }
.fdv-media > img,
.fdv-media > a > img,
.fdv-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fdv-media__note {
  position: relative;
  font-family: var(--fdv-font-mono); font-size: 11px; line-height: 1.5; color: var(--fdv-muted);
  background: rgba(255, 255, 255, 0.86); padding: 4px 7px; border-radius: var(--fdv-r-xs);
  white-space: pre-line;
}
.fdv-media__note--center { text-align: center; background: none; color: var(--fdv-muted-soft); }

/* -------------------------------------------------------------------------
   8. Productkaart
   ------------------------------------------------------------------------- */
.fdv-product {
  display: flex; flex-direction: column;
  background: var(--fdv-surface); border: 1px solid var(--fdv-line);
  border-radius: var(--fdv-r-xl); padding: 16px;
  transition: border-color var(--fdv-t), box-shadow var(--fdv-t), transform var(--fdv-t);
}
.fdv-product:hover { border-color: var(--fdv-line-control); box-shadow: var(--fdv-shadow-card); transform: translateY(-2px); }

.fdv-product__media { position: relative; border-radius: var(--fdv-r-md); overflow: hidden; }
.fdv-product__fav { position: absolute; top: 10px; right: 10px; z-index: 1; }
.fdv-product__flag { position: absolute; top: 10px; left: 10px; z-index: 1; }

.fdv-product__body { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; flex: 1; }
/* Het merkregeltje is een kicker, geen tekstblok: bij "merk · model" met een
   lang model liep dat op tot vijf regels boven de titel. Eén regel, afgekapt. */
.fdv-product__brand {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--fdv-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Nooit meer dan twee regels: langere Logic4-namen ("IMPÓSABLE - X10 PRO -
   Arctic White - 12MP - Screenless Retro Camera - incl 4GB Memory Card")
   duwden de hele kaart uit model. Afkappen met een beletselteken; de
   volledige naam staat in het title-attribuut en op de productpagina. */
.fdv-product__name {
  font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--fdv-ink);
  min-height: 46px;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  max-height: calc(1.35em * 2);
}
.fdv-product__name:hover { color: var(--fdv-accent); }

.fdv-price { display: flex; align-items: baseline; gap: 10px; padding-top: 4px; }
.fdv-price__now { font-family: var(--fdv-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--fdv-ink); }
.fdv-price__old { font-size: 14px; color: var(--fdv-muted-soft); text-decoration: line-through; }
.fdv-price--lg .fdv-price__now { font-size: 40px; }
.fdv-price--sm .fdv-price__now { font-size: 20px; }

.fdv-product__delivery { font-size: 13px; color: var(--fdv-muted); }
/* Prijs, beschikbaarheid en vergelijkknop als één blok onderaan de kaart:
   daarmee staan ze op elke kaart op dezelfde hoogte, ook als de ene naam
   twee regels beslaat en de andere sterren heeft. */
.fdv-product__meta { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
/* Prijsregel breekt niet: anders staat "incl. btw" op de ene kaart naast de
   prijs en op de andere eronder, en schuift alles daaronder mee. */
.fdv-product__meta .fdv-price { flex-wrap: nowrap; padding-top: 0; }
.fdv-product__vat { display: flex; align-items: baseline; gap: 8px; color: var(--fdv-muted); margin-top: -4px; white-space: nowrap; }
.fdv-product__meta + .fdv-product__foot { margin-top: 0; }
/* Knoppen naast elkaar zolang ze passen, anders onder elkaar. Ze hebben
   `white-space: nowrap`, dus krimpen kunnen ze niet: zonder wrap liep "In
   winkelwagen" buiten de kaart zodra het raster smaller werd. De vaste basis
   van 118px is de knopbreedte; past die er niet naast "Bekijk", dan gaat hij
   naar de volgende regel en worden beide over de volle breedte. */
.fdv-product__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fdv-line);
}
.fdv-product__foot > form { flex: 1 1 118px; min-width: 0; }
.fdv-product__foot > .fdv-btn { flex: 1 1 auto; }
.fdv-product__foot > form > .fdv-btn { width: 100%; }
.fdv-product__foot .fdv-btn--sm { padding-inline: 12px; }

@media (max-width: 640px) {
  .fdv-product { padding: 12px; }
  .fdv-product__name { font-size: 15px; min-height: 40px; }
  .fdv-price__now { font-size: 21px; }
  .fdv-product__foot > .fdv-btn { flex: 1 1 100%; }
}

/* Rij met chips: wrapt gewoon door. Nadrukkelijk geen scroller — een
   horizontale schuifbalk is op deze site niet gewenst, en met tientallen
   merken was dat precies wat .fdv-scroller opleverde. */
.fdv-chiprow { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fdv-chiprow > li { display: flex; }
/* "meer merken": de rest van de rij, achter één regel. */
.fdv-chiprow__more { display: contents; }
.fdv-chiprow__more > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 14px; border-radius: var(--fdv-r-pill);
  border: 1px dashed var(--fdv-line-control); background: none;
  font-size: 14px; color: var(--fdv-ink-soft); list-style: none;
}
.fdv-chiprow__more > summary::-webkit-details-marker { display: none; }
.fdv-chiprow__more > summary:hover { color: var(--fdv-ink); border-color: var(--fdv-ink-soft); }
.fdv-chiprow__more[open] > summary { display: none; }
.fdv-chiprow__rest { display: contents; }

/* Horizontale productscroller (mobiel) */
.fdv-scroller {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.fdv-scroller > * { flex: 0 0 76%; max-width: 296px; scroll-snap-align: start; }
/* De schuifbalk zelf blijft uit beeld: scrollen doet de vinger of het
   scrollwiel, een zichtbare balk hoort niet in dit ontwerp. */
.fdv-scroller { scrollbar-width: none; -ms-overflow-style: none; }
.fdv-scroller::-webkit-scrollbar { width: 0; height: 0; }

/* -------------------------------------------------------------------------
   9. Formulieren
   ------------------------------------------------------------------------- */
.fdv-field { display: flex; flex-direction: column; gap: 7px; }
.fdv-label { font-size: 14px; font-weight: 500; color: var(--fdv-ink-soft); }
.fdv-hint { font-size: 13px; color: var(--fdv-muted); }
.fdv-error { font-size: 13px; color: var(--fdv-danger); font-weight: 500; }

.fdv-input, .fdv-select, .fdv-textarea {
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-lg);
  background: var(--fdv-surface); color: var(--fdv-ink); font-size: 16px;
  transition: border-color var(--fdv-t), box-shadow var(--fdv-t);
}
.fdv-textarea { padding: 14px 16px; min-height: 120px; line-height: 1.6; resize: vertical; }
.fdv-input::placeholder, .fdv-textarea::placeholder { color: var(--fdv-muted-soft); }
.fdv-input:hover, .fdv-select:hover, .fdv-textarea:hover { border-color: var(--fdv-line-control); }
.fdv-input:focus, .fdv-select:focus, .fdv-textarea:focus {
  outline: none; border-color: var(--fdv-ink); box-shadow: 0 0 0 3px rgba(24, 26, 28, 0.08);
}
.fdv-input[aria-invalid="true"] { border-color: var(--fdv-danger); }

.fdv-select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6660' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Checkbox en radio */
.fdv-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--fdv-ink-soft); }
.fdv-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fdv-check__box {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--fdv-line-control); border-radius: 4px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--fdv-t), border-color var(--fdv-t);
}
.fdv-check__box::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform var(--fdv-t); margin-top: -2px;
}
.fdv-check input:checked + .fdv-check__box { background: var(--fdv-accent); border-color: var(--fdv-accent); }
.fdv-check input:checked + .fdv-check__box::after { transform: rotate(-45deg) scale(1); }
.fdv-check input:focus-visible + .fdv-check__box { outline: 2px solid var(--fdv-accent); outline-offset: 2px; }
.fdv-check__count { margin-left: auto; font-size: 13px; color: var(--fdv-muted-soft); }

.fdv-check--radio .fdv-check__box { border-radius: var(--fdv-r-pill); }
.fdv-check--radio .fdv-check__box::after {
  width: 8px; height: 8px; border: 0; border-radius: var(--fdv-r-pill); background: #fff; margin: 0;
  transform: scale(0);
}
.fdv-check--radio input:checked + .fdv-check__box::after { transform: scale(1); }

/* Radiokaart (bezorgopties, betaalmethodes) */
.fdv-radio-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl);
  background: var(--fdv-surface); padding: 16px 18px; cursor: pointer;
  transition: border-color var(--fdv-t), box-shadow var(--fdv-t);
}
.fdv-radio-card:hover { border-color: var(--fdv-line-control); }
.fdv-radio-card:has(input:checked) { border-color: var(--fdv-ink); box-shadow: 0 0 0 1px var(--fdv-ink); }
.fdv-radio-card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.fdv-radio-card__title { font-size: 15px; font-weight: 600; color: var(--fdv-ink); }
.fdv-radio-card__meta { font-size: 13px; color: var(--fdv-muted); }
.fdv-radio-card__price { font-weight: 600; font-size: 15px; margin-left: auto; }

/* Schakelaar */
.fdv-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; min-height: 44px; }
.fdv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fdv-switch__track {
  width: 44px; height: 26px; flex: 0 0 auto; border-radius: var(--fdv-r-pill);
  background: var(--fdv-line-control); padding: 3px; display: flex; align-items: center;
  transition: background var(--fdv-t);
}
.fdv-switch__thumb { width: 20px; height: 20px; border-radius: var(--fdv-r-pill); background: #fff; transition: transform var(--fdv-t); }
.fdv-switch input:checked + .fdv-switch__track { background: var(--fdv-accent); }
.fdv-switch input:checked + .fdv-switch__track .fdv-switch__thumb { transform: translateX(18px); }
.fdv-switch input:focus-visible + .fdv-switch__track { outline: 2px solid var(--fdv-accent); outline-offset: 2px; }

/* Aantalselector */
.fdv-qty { display: inline-flex; align-items: center; border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-md); overflow: hidden; background: #fff; }
.fdv-qty button {
  width: 40px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--fdv-ink); font-size: 18px; line-height: 1; transition: background var(--fdv-t);
}
.fdv-qty button:hover { background: var(--fdv-surface-soft); }
.fdv-qty input {
  width: 46px; height: 44px; border: 0; text-align: center; font-size: 15px; font-weight: 600;
  background: transparent; -moz-appearance: textfield;
}
.fdv-qty input::-webkit-outer-spin-button, .fdv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------------------------------------------------------
   10. Topbalk, header en navigatie
   ------------------------------------------------------------------------- */
.fdv-topbar {
  /* Merk-oranje balk met witte tekst (keuze van Bas). */
  background: #F79B2C; color: #FFFFFF;
  min-height: 32px; display: flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.fdv-topbar ul { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
.fdv-topbar li { font-size: 13px; position: relative; }
.fdv-topbar li + li::before {
  content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: rgba(255, 255, 255, 0.45);
}
@media (max-width: 1024px) { .fdv-topbar { display: none; } }

.fdv-header { background: var(--fdv-surface); border-bottom: 1px solid var(--fdv-line); position: sticky; top: 0; z-index: 60; }
.fdv-header__bar { display: flex; align-items: center; gap: 40px; min-height: 72px; }

.fdv-logo { display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto; font-family: var(--fdv-font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.fdv-logo__a { color: var(--fdv-accent); }
.fdv-logo__b { color: var(--fdv-ink-soft); }
.fdv-logo:hover .fdv-logo__b { color: var(--fdv-ink); }
.fdv-logo__b--light { color: #FFFFFF; }
/* Ingesteld beeldlogo (shop.logo_path): hoogte begrensd, breedte volgt. */
.fdv-logo__img { display: block; height: 34px; width: auto; max-width: 220px; object-fit: contain; }
.fdv-logo__img--footer { background: transparent; }
@media (max-width: 1024px) { .fdv-logo__img { height: 28px; max-width: 170px; } }
.fdv-logo:hover .fdv-logo__b--light { color: #FFFFFF; }

.fdv-search { flex: 1; max-width: 620px; position: relative; }
.fdv-search input {
  width: 100%; min-height: 44px; padding: 0 44px 0 44px;
  border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-lg);
  background: var(--fdv-bg); font-size: 15px;
  transition: border-color var(--fdv-t), background var(--fdv-t);
}
.fdv-search input:focus { outline: none; border-color: var(--fdv-ink); background: #fff; }
.fdv-search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fdv-muted); }
.fdv-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; }

.fdv-header__actions { display: flex; align-items: center; gap: 28px; margin-left: auto; flex: 0 0 auto; }
.fdv-header__action { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fdv-ink-soft); position: relative; }
.fdv-header__action:hover { color: var(--fdv-accent); }

/* position + z-index: het mega menu hangt hieronder en moet over de pagina
   heen vallen. Zonder deze twee positioneert het paneel tegen een verdere
   voorouder en schuift de hero er overheen. */
.fdv-nav { background: var(--fdv-surface); border-bottom: 1px solid var(--fdv-line); position: relative; z-index: 60; }
.fdv-nav__list { display: flex; align-items: stretch; gap: 32px; min-height: 48px; }
/* Elk item spant de volle hoogte van de balk. Zonder dit staan de gewone
   links als losse tekstregels bovenin terwijl "Acties" (met eigen
   flex-centrering) in het midden hangt — precies de scheve uitlijning
   die op de livesite zichtbaar was. Nu centreert alles op dezelfde as en
   valt de actieve onderstreep samen met de onderrand van de balk. */
.fdv-nav__list > li { display: flex; align-items: stretch; }
.fdv-nav__link {
  display: inline-flex; align-items: center; font-size: 15px; font-weight: 500;
  color: var(--fdv-ink-soft); box-shadow: inset 0 0 0 var(--fdv-accent); transition: box-shadow var(--fdv-t), color var(--fdv-t);
}
.fdv-nav__link:hover { color: var(--fdv-ink); box-shadow: inset 0 -2px 0 var(--fdv-line-control); }
.fdv-nav__link.is-active, .fdv-nav__link[aria-current="page"] { font-weight: 600; color: var(--fdv-ink); box-shadow: inset 0 -2px 0 var(--fdv-accent); }
/* Let op de selector: .fdv-nav__list > li zet align-items op stretch en
   wint van een losse .fdv-nav__promo — dan plakt het stipje tegen de
   bovenrand in plaats van naast het woord. */
.fdv-nav__list > li.fdv-nav__promo { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--fdv-ink-soft); }
.fdv-nav__promo a { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-weight: 600; color: var(--fdv-accent); }
.fdv-nav__promo::before { content: ""; width: 6px; height: 6px; border-radius: var(--fdv-r-pill); background: var(--fdv-accent); }

.fdv-burger { display: none; }

@media (max-width: 1024px) {
  .fdv-header__bar { flex-wrap: wrap; gap: 12px; min-height: 0; padding-block: 10px 12px; }
  .fdv-burger { display: inline-flex; order: 1; }
  .fdv-logo { order: 2; margin-inline: auto; font-size: 17px; }
  .fdv-header__actions { order: 3; margin-left: 0; gap: 8px; }
  .fdv-header__action span:not(.fdv-badge) { display: none; }
  .fdv-header__action { width: 44px; height: 44px; justify-content: center; position: relative; }
  .fdv-header__action .fdv-badge { position: absolute; top: 2px; right: 0; }
  .fdv-search { order: 4; flex: 0 0 100%; max-width: none; }
  .fdv-nav { display: none; }
}

/* Mobiel menu */
.fdv-drawer {
  position: fixed; inset: 0; z-index: 120; display: none;
}
.fdv-drawer.is-open { display: block; }
.fdv-drawer__scrim { position: absolute; inset: 0; background: rgba(24, 26, 28, 0.5); }
.fdv-drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px);
  background: var(--fdv-surface); display: flex; flex-direction: column;
  animation: fdv-slide-in 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.fdv-drawer__panel--right { inset: 0 0 0 auto; animation-name: fdv-slide-in-right; }
.fdv-drawer__panel--sheet {
  inset: auto 0 0 0; width: auto; max-height: 88vh; border-radius: var(--fdv-r-xl) var(--fdv-r-xl) 0 0;
  animation-name: fdv-slide-up;
}
.fdv-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0 16px; border-bottom: 1px solid var(--fdv-line); flex: 0 0 auto;
}
.fdv-drawer__title { font-family: var(--fdv-font-display); font-size: 20px; font-weight: 600; }
.fdv-drawer__body { flex: 1; overflow-y: auto; padding: 16px; }
.fdv-drawer__foot {
  flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fdv-line); display: flex; gap: 10px; background: var(--fdv-surface);
}

@keyframes fdv-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fdv-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fdv-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.fdv-drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; border-bottom: 1px solid var(--fdv-line);
  font-size: 16px; font-weight: 500; color: var(--fdv-ink);
}

/* -------------------------------------------------------------------------
   11. Kruimelpad
   ------------------------------------------------------------------------- */
.fdv-breadcrumb { font-size: 13px; color: var(--fdv-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fdv-breadcrumb a { color: var(--fdv-muted); }
.fdv-breadcrumb a:hover { color: var(--fdv-accent); }
.fdv-breadcrumb li + li::before { content: "·"; margin-right: 6px; color: var(--fdv-muted-soft); }
.fdv-breadcrumb li { display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------------
   12. Hero
   ------------------------------------------------------------------------- */
.fdv-hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; background: repeating-linear-gradient(135deg, #DEDAD2 0 10px, #E6E2DA 10px 20px); }
.fdv-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fdv-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,26,28,0.72) 0%, rgba(24,26,28,0.42) 46%, rgba(24,26,28,0) 72%); }
.fdv-hero__inner { position: relative; padding-block: 64px; max-width: 720px; }
.fdv-hero h1 { color: #fff; margin-top: 24px; max-width: 12ch; }
.fdv-hero p { color: var(--fdv-on-dark); margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.6; }
.fdv-hero__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.fdv-hero__note { position: absolute; right: 40px; bottom: 24px; }

.fdv-hero--editorial { min-height: 520px; border-radius: var(--fdv-r-xl); align-items: flex-end; }
.fdv-hero--editorial .fdv-hero__scrim { background: linear-gradient(180deg, rgba(24,26,28,0) 35%, rgba(24,26,28,0.78) 100%); }
.fdv-hero--editorial .fdv-hero__inner { padding: 44px 48px; }

@media (max-width: 1024px) {
  .fdv-hero { min-height: 480px; }
  .fdv-hero__scrim { background: linear-gradient(180deg, rgba(24,26,28,0.15) 30%, rgba(24,26,28,0.82) 100%); }
  .fdv-hero { align-items: flex-end; }
  .fdv-hero__note { display: none; }
}
@media (max-width: 640px) {
  .fdv-hero { min-height: 488px; }
  .fdv-hero__inner { padding-block: 32px 28px; }
  .fdv-hero h1 { max-width: none; margin-top: 16px; }
  .fdv-hero p { font-size: 15px; margin-top: 12px; }
  .fdv-hero__actions { margin-top: 20px; flex-direction: column; }
  .fdv-hero__actions .fdv-btn { width: 100%; }
  .fdv-hero--editorial .fdv-hero__inner { padding: 24px 20px; }
}

/* -------------------------------------------------------------------------
   13. USP-balk
   ------------------------------------------------------------------------- */
.fdv-usp { background: var(--fdv-surface); border-bottom: 1px solid var(--fdv-line); }
.fdv-usp__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 24px; }
.fdv-usp__item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--fdv-ink-soft); }
.fdv-usp__item svg { flex: 0 0 auto; color: var(--fdv-accent); }

@media (max-width: 1024px) { .fdv-usp__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .fdv-usp__list { display: flex; gap: 8px; overflow-x: auto; padding-block: 14px; scrollbar-width: none; }
  .fdv-usp__list::-webkit-scrollbar { width: 0; height: 0; }
  .fdv-usp__item {
    flex: 0 0 auto; border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-md);
    padding: 0 14px; min-height: 36px; font-size: 13px; white-space: nowrap;
  }
  .fdv-usp__item svg { display: none; }
}

/* -------------------------------------------------------------------------
   14. Filters (sidebar en mobiel paneel)
   ------------------------------------------------------------------------- */
.fdv-listing { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 1024px) { .fdv-listing { grid-template-columns: 1fr; } }

.fdv-filters { display: flex; flex-direction: column; gap: 8px; }
.fdv-filters__title { font-family: var(--fdv-font-display); font-size: 18px; font-weight: 600; margin-bottom: 8px; }

.fdv-facet { border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl); background: var(--fdv-surface); }
.fdv-facet > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500; color: var(--fdv-ink); min-height: 52px;
}
.fdv-facet > summary::-webkit-details-marker { display: none; }
.fdv-facet > summary svg { transition: transform var(--fdv-t); color: var(--fdv-muted); flex: 0 0 auto; }
.fdv-facet[open] > summary svg { transform: rotate(180deg); }
.fdv-facet__body { padding: 0 18px 14px; display: flex; flex-direction: column; }
.fdv-facet__body .fdv-check { min-height: 36px; }
.fdv-facet--plain { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.fdv-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--fdv-line); flex-wrap: wrap;
}
.fdv-toolbar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fdv-toolbar__right { display: flex; align-items: center; gap: 12px; }
.fdv-toolbar__clear { font-size: 13px; font-weight: 500; color: var(--fdv-muted); text-decoration: underline; }

.fdv-viewtoggle { display: flex; border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-md); overflow: hidden; }
.fdv-viewtoggle button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; background: var(--fdv-surface); color: var(--fdv-muted); cursor: pointer; }
.fdv-viewtoggle button.is-active { background: var(--fdv-ink); color: #fff; }

/* Mobiele filterbalk */
.fdv-filterbar { display: none; }
@media (max-width: 1024px) {
  .fdv-filterbar {
    display: flex; gap: 10px; position: sticky; top: 0; z-index: 50;
    background: var(--fdv-bg); border-bottom: 1px solid var(--fdv-line);
    padding: 10px 0; margin-bottom: 14px;
  }
  .fdv-filterbar .fdv-btn { flex: 1; min-height: 44px; }
  .fdv-filters--desktop { display: none; }
}

/* -------------------------------------------------------------------------
   15. Tabs en accordeon
   ------------------------------------------------------------------------- */
.fdv-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.fdv-tabs--underline { gap: 28px; border-bottom: 1px solid var(--fdv-line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fdv-tabs--underline::-webkit-scrollbar { width: 0; height: 0; }
.fdv-tabs--underline .fdv-tab {
  border: 0; background: none; padding: 14px 0; font-size: 16px; font-weight: 500;
  color: var(--fdv-muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.fdv-tabs--underline .fdv-tab.is-active { color: var(--fdv-ink); font-weight: 600; border-bottom-color: var(--fdv-accent); }

.fdv-accordion { border-top: 1px solid var(--fdv-line); }
.fdv-accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--fdv-ink);
}
.fdv-accordion > summary::-webkit-details-marker { display: none; }
.fdv-accordion > summary svg { transition: transform var(--fdv-t); color: var(--fdv-muted); flex: 0 0 auto; }
.fdv-accordion[open] > summary svg { transform: rotate(180deg); }
.fdv-accordion__body { padding-bottom: 20px; color: var(--fdv-ink-soft); font-size: 15px; line-height: 1.7; }

/* -------------------------------------------------------------------------
   16. Specificatietabel en vergelijken
   ------------------------------------------------------------------------- */
.fdv-spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.fdv-spec th, .fdv-spec td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--fdv-line); vertical-align: top; }
.fdv-spec th { font-weight: 500; color: var(--fdv-muted); width: 40%; }
.fdv-spec td { font-weight: 500; color: var(--fdv-ink); }
.fdv-spec__group { font-size: 15px; font-weight: 600; color: var(--fdv-ink); margin: 26px 0 2px; }
.fdv-spec__group:first-child { margin-top: 0; }
.fdv-spec + .fdv-spec__group { margin-top: 30px; }
.pp-downloads { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }

.fdv-compare-wrap { overflow-x: auto; border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl); background: var(--fdv-surface); }
.fdv-compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
.fdv-compare th, .fdv-compare td { padding: 16px 20px; border-bottom: 1px solid var(--fdv-line); text-align: left; vertical-align: top; }
.fdv-compare thead th { background: var(--fdv-bg); position: sticky; top: 0; z-index: 2; }
.fdv-compare tbody th {
  font-weight: 500; color: var(--fdv-muted); width: 200px;
  position: sticky; left: 0; background: var(--fdv-surface); z-index: 1;
}
.fdv-compare tr:hover td { background: rgba(247, 246, 242, 0.6); }
.fdv-compare .is-best { color: var(--fdv-success); font-weight: 600; }

/* -------------------------------------------------------------------------
   17. Winkelmand en checkout
   ------------------------------------------------------------------------- */
.fdv-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
@media (max-width: 1024px) { .fdv-cart-layout { grid-template-columns: 1fr; } }

.fdv-line-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--fdv-line); align-items: start; }
.fdv-line-item__media { border-radius: var(--fdv-r-md); overflow: hidden; }
.fdv-line-item__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (max-width: 640px) {
  .fdv-line-item { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .fdv-line-item__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

.fdv-summary { position: sticky; top: 96px; }
.fdv-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; color: var(--fdv-ink-soft); }
.fdv-summary__row--total {
  border-top: 1px solid var(--fdv-line); margin-top: 10px; padding-top: 16px;
  font-family: var(--fdv-font-display); font-size: 20px; font-weight: 700; color: var(--fdv-ink);
}
.fdv-summary__row--discount { color: var(--fdv-success); font-weight: 500; }

.fdv-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fdv-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fdv-muted); }
.fdv-step__dot {
  width: 26px; height: 26px; border-radius: var(--fdv-r-pill); flex: 0 0 auto;
  border: 1px solid var(--fdv-line-control); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.fdv-step.is-active { color: var(--fdv-ink); font-weight: 600; }
.fdv-step.is-active .fdv-step__dot { background: var(--fdv-ink); border-color: var(--fdv-ink); color: #fff; }
.fdv-step.is-done .fdv-step__dot { background: var(--fdv-success); border-color: var(--fdv-success); color: #fff; }
.fdv-step__sep { width: 24px; height: 1px; background: var(--fdv-line-control); }
@media (max-width: 640px) { .fdv-step__sep { width: 10px; } .fdv-step span { font-size: 13px; } }

/* Vaste actiebalk mobiel */
.fdv-sticky-bar { display: none; }
@media (max-width: 640px) {
  /* position: fixed, niet sticky: sticky plakt alleen binnen de eigen
     container (die onderaan de pagina staat) en scrolde dus gewoon mee —
     de balk "zweefde" boven de onderkant en was meestal niet in beeld.
     Nu staat hij altijd vast op de onderrand van het scherm. */
  .fdv-sticky-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--fdv-surface); border-top: 1px solid var(--fdv-line);
    padding: 12px var(--fdv-gutter) calc(12px + env(safe-area-inset-bottom));
    box-shadow: var(--fdv-shadow-sticky);
  }
  .fdv-sticky-bar .fdv-btn { flex: 1; }
  /* Scrollruimte onder aan de pagina, zodat de vaste balk de footer en de
     laatste inhoud niet afdekt. */
  body:has(.fdv-sticky-bar) { padding-bottom: 84px; }
}

/* -------------------------------------------------------------------------
   18. Account
   ------------------------------------------------------------------------- */
.fdv-account { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 1024px) { .fdv-account { grid-template-columns: 1fr; } }

.fdv-sidenav { display: flex; flex-direction: column; }
.fdv-sidenav a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px;
  border-radius: var(--fdv-r-md); font-size: 15px; font-weight: 500; color: var(--fdv-ink-soft);
  transition: background var(--fdv-t), color var(--fdv-t);
}
.fdv-sidenav a:hover { background: var(--fdv-surface); color: var(--fdv-ink); }
.fdv-sidenav a.is-active { background: var(--fdv-ink); color: #fff; }
.fdv-sidenav a.is-active svg { color: #fff; }
@media (max-width: 1024px) {
  .fdv-sidenav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; }
  .fdv-sidenav::-webkit-scrollbar { width: 0; height: 0; }
  .fdv-sidenav a { border: 1px solid var(--fdv-line); background: var(--fdv-surface); white-space: nowrap; }
}

.fdv-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  border-radius: var(--fdv-r-sm); font-size: 13px; font-weight: 500;
  background: var(--fdv-surface-soft); color: var(--fdv-ink-soft);
}
.fdv-status--done { background: rgba(35, 122, 87, 0.1); color: var(--fdv-success); }
.fdv-status--open { background: var(--fdv-accent-soft); color: var(--fdv-accent-deep); }

/* -------------------------------------------------------------------------
   19. Meldingen
   ------------------------------------------------------------------------- */
.fdv-note {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl);
  background: var(--fdv-surface); padding: 16px 18px; font-size: 15px; color: var(--fdv-ink-soft);
}
.fdv-note svg { flex: 0 0 auto; margin-top: 2px; }
.fdv-note--accent { background: var(--fdv-accent-soft); border-color: var(--fdv-accent-soft-line); color: var(--fdv-accent-deep); }
.fdv-note--success { background: rgba(35, 122, 87, 0.08); border-color: rgba(35, 122, 87, 0.25); color: var(--fdv-success); }

.fdv-panel-accent { background: var(--fdv-accent-soft); border-radius: var(--fdv-r-xl); padding: 56px 64px; }
@media (max-width: 640px) { .fdv-panel-accent { padding: 26px 20px 28px; } }

/* Splitpaneel: beeld naast tekst */
.fdv-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--fdv-surface); border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl); overflow: hidden; }
.fdv-split--media-narrow { grid-template-columns: 400px minmax(0, 1fr); }
.fdv-split--store { grid-template-columns: 240px minmax(0, 1fr); }
.fdv-split--store .fdv-split__media { min-height: 0; }
.fdv-split--media-wide { grid-template-columns: minmax(0, 1fr) 480px; }
.fdv-split__media { min-height: 380px; }
.fdv-split__body { padding: 48px; }
@media (max-width: 1024px) {
  .fdv-split, .fdv-split--media-narrow, .fdv-split--media-wide, .fdv-split--store { grid-template-columns: 1fr; }
  .fdv-split__media, .fdv-split--store .fdv-split__media { min-height: 220px; order: -1; }
  .fdv-split__body { padding: 28px 20px 30px; }
}

/* -------------------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------------------- */
.fdv-footer { background: var(--fdv-ink); color: var(--fdv-on-dark-muted); padding-block: 72px 40px; margin-top: var(--fdv-section); }
.fdv-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px 40px; }
/* Op desktop is een kolom geen uitklapper: het driehoekje van <details> hoort
   daar niet en stond in beeld. Onder 640px wordt hij weer een echte
   uitklapper (zie de mediaquery onderaan dit blok). */
.fdv-footer__col > summary { list-style: none; display: block; }
.fdv-footer__col > summary::-webkit-details-marker { display: none; }
.fdv-footer__col > summary::marker { content: ''; }
.fdv-footer__col > summary svg { display: none; }
.fdv-footer__intro { font-size: 14px; line-height: 1.7; max-width: 34ch; }
.fdv-footer__col-title { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.fdv-footer__col a { display: block; font-size: 14.5px; color: var(--fdv-on-dark-muted); padding: 7px 0; text-decoration: none; }
.fdv-footer__col a:hover { color: #fff; }
.fdv-footer__bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--fdv-line-dark);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.fdv-footer__legal { font-size: 13px; color: var(--fdv-on-dark-dim); }
.fdv-pay { display: flex; gap: 10px; flex-wrap: wrap; }
.fdv-pay span { font-size: 12px; font-weight: 500; color: #C9C4BB; border: 1px solid var(--fdv-line-dark-2); border-radius: var(--fdv-r-sm); padding: 6px 10px; }

.fdv-footer--slim { padding-block: 56px 32px; }
.fdv-footer--slim .fdv-footer__grid { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

@media (max-width: 1024px) { .fdv-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .fdv-footer { padding-block: 32px 28px; }
  .fdv-footer__grid { display: block; }
  .fdv-footer__intro { margin-bottom: 20px; }
  .fdv-footer__col { border-top: 1px solid var(--fdv-line-dark); }
  .fdv-footer__col > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 500; color: #fff;
  }
  .fdv-footer__col > summary svg { display: block; }
  .fdv-footer__col-title { margin-bottom: 0; }
  .fdv-footer__col > summary::-webkit-details-marker { display: none; }
  .fdv-footer__col > summary svg { transition: transform var(--fdv-t); }
  .fdv-footer__col[open] > summary svg { transform: rotate(180deg); }
  .fdv-footer__col-links { padding-bottom: 12px; }
  .fdv-footer__bottom { margin-top: 24px; }
}

/* -------------------------------------------------------------------------
   21. Diversen
   ------------------------------------------------------------------------- */
.fdv-divider { height: 1px; background: var(--fdv-line); border: 0; margin: 0; }

/* Zichtbaarheid per breekpunt */
.fdv-only-mobile { display: none; }
@media (max-width: 1024px) {
  .fdv-only-desktop { display: none !important; }
  .fdv-only-mobile { display: block; }
}

.fdv-score { font-family: var(--fdv-font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.fdv-score--sm { font-size: 44px; }

.fdv-brandtile {
  min-height: 82px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl); background: var(--fdv-surface);
  font-size: 15px; font-weight: 600; color: var(--fdv-ink-soft); letter-spacing: 0.02em;
  transition: border-color var(--fdv-t), transform var(--fdv-t);
}
.fdv-brandtile:hover { border-color: var(--fdv-line-control); transform: translateY(-2px); color: var(--fdv-ink); }
@media (max-width: 640px) { .fdv-brandtile { min-height: 60px; font-size: 12px; text-align: center; } }

.fdv-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fdv-checklist li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--fdv-ink-soft); }
.fdv-checklist svg { flex: 0 0 auto; color: var(--fdv-success); }
@media (max-width: 640px) { .fdv-checklist { grid-template-columns: 1fr; gap: 10px; } }

.fdv-steps-inline { display: flex; gap: 32px; flex-wrap: wrap; }
.fdv-steps-inline > li { display: flex; flex-direction: column; gap: 6px; max-width: 20ch; }
.fdv-steps-inline__n { font-family: var(--fdv-font-display); font-size: 22px; font-weight: 700; color: var(--fdv-accent); }

.fdv-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

@media print {
  .fdv-header, .fdv-nav, .fdv-topbar, .fdv-footer, .fdv-sticky-bar, .fdv-filterbar { display: none !important; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   22. Kern-compatibiliteit
   De IMPOSABLE-kern rendert markup met eigen klassennamen. Zolang een
   pagina nog niet is omgezet naar het fdv-designsysteem, geeft dit blok
   die klassen dezelfde tokens, zodat de pagina in de nieuwe huisstijl
   staat zonder de PHP aan te raken.
   ========================================================================= */

/* Aliassen voor de oude variabelenamen, zodat de paginaspecifieke
   stylesheets (pages.css, shop.css ...) blijven werken. */
:root {
  --paper:        var(--fdv-bg);
  --paper-2:      var(--fdv-canvas);
  --paper-3:      var(--fdv-surface-soft);
  --ink:          var(--fdv-ink);
  --ink-2:        var(--fdv-ink);
  --ink-3:        #24272A;
  --muted:        var(--fdv-muted);
  --muted-2:      var(--fdv-muted-soft);
  --paper-muted:  var(--fdv-on-dark-muted);
  --paper-faint:  var(--fdv-on-dark-dim);
  --red:          var(--fdv-accent);
  --ok:           var(--fdv-success);
  --line:         var(--fdv-line);
  --line-soft:    var(--fdv-line);
  --line-ink:     var(--fdv-line-dark);
  --line-ink-soft: var(--fdv-line-dark);

  --serif: var(--fdv-font-display);
  --sans:  var(--fdv-font);
  --mono:  var(--fdv-font-mono);

  --ease:   cubic-bezier(0.2, 0, 0.2, 1);
  --maxw:   var(--fdv-max);
  --gutter: var(--fdv-gutter);
}

/* Layout */
.wrap {
  width: 100%;
  max-width: calc(var(--fdv-max) + var(--fdv-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--fdv-gutter);
}

/* Paginakop */
.page-head { padding-block: 48px 0; }
.page-head .kicker { display: block; }
.page-head__meta { font-size: 14px; color: var(--fdv-muted); margin-top: 12px; }

.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fdv-accent);
}
.display {
  font-family: var(--fdv-font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.12; margin: 14px 0 0;
}
.lead { font-size: 18px; line-height: 1.6; color: var(--fdv-ink-soft); max-width: 62ch; }
.muted { color: var(--fdv-muted); }
.arrow { display: inline-block; transition: transform var(--fdv-t); }
a:hover .arrow, .btn:hover .arrow { transform: translateX(3px); }
.textlink { color: var(--fdv-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent;
  border-radius: var(--fdv-r-lg); background: transparent; color: var(--fdv-ink);
  font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; text-align: center;
  transition: background var(--fdv-t), border-color var(--fdv-t), color var(--fdv-t);
}
.btn--solid { background: var(--fdv-accent); border-color: var(--fdv-accent); color: #fff; }
.btn--solid:hover { background: var(--fdv-accent-hover); border-color: var(--fdv-accent-hover); color: #fff; }
.btn--ghost { border-color: var(--fdv-ink); color: var(--fdv-ink); }
.btn--ghost:hover { background: var(--fdv-ink); color: #fff; }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: var(--fdv-r-md); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Panelen, tabellen en bedragen */
.panel {
  background: var(--fdv-surface); border: 1px solid var(--fdv-line);
  border-radius: var(--fdv-r-xl); padding: 24px; margin-top: 20px;
}
.panel__h { font-family: var(--fdv-font-display); font-size: 20px; font-weight: 600; margin: 0 0 14px; }
.spec, .info-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th, .spec td, .info-table th, .info-table td {
  text-align: left; padding: 12px 0; border-bottom: 1px solid var(--fdv-line); vertical-align: top;
}
.spec th, .info-table th { font-weight: 500; color: var(--fdv-muted); width: 40%; }

.sumline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; color: var(--fdv-ink-soft); }
.sumline--total {
  border-top: 1px solid var(--fdv-line); margin-top: 10px; padding-top: 16px;
  font-family: var(--fdv-font-display); font-size: 20px; font-weight: 700; color: var(--fdv-ink);
}
.sumline--discount { color: var(--fdv-success); font-weight: 500; }
.price { font-family: var(--fdv-font-display); font-weight: 700; letter-spacing: -0.01em; }
.vat { font-size: 13px; color: var(--fdv-muted); }
.pay { display: flex; gap: 10px; flex-wrap: wrap; }

/* Formulieren */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 500; color: var(--fdv-ink-soft); }
.field input, .field select, .field textarea, input[type="text"], input[type="email"],
input[type="tel"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-lg);
  background: var(--fdv-surface); color: var(--fdv-ink); font-size: 16px;
}
textarea { padding: 14px 16px; min-height: 120px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--fdv-ink); box-shadow: 0 0 0 3px rgba(24, 26, 28, 0.08);
}
.field__error { font-size: 13px; color: var(--fdv-danger); font-weight: 500; }
.ph { color: var(--fdv-muted-soft); }

/* Aantalselector uit de kern (main.js gebruikt .qty met data-minus/data-plus) */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-md); overflow: hidden; background: #fff; }
.qty button { width: 40px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--fdv-ink); }
.qty button:hover { background: var(--fdv-surface-soft); }
.qty input { width: 46px; height: 44px; min-height: 0; border: 0; padding: 0; text-align: center; font-size: 15px; font-weight: 600; background: transparent; border-radius: 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Accordeon uit de kern (main.js stuurt .acc__btn met aria-controls) */
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; border: 0; border-top: 1px solid var(--fdv-line); background: none;
  font-size: 16px; font-weight: 600; color: var(--fdv-ink); text-align: left; cursor: pointer;
}
.acc__panel { padding-bottom: 20px; color: var(--fdv-ink-soft); font-size: 15px; line-height: 1.7; }

/* Legal- en tekstpagina's */
.legal { padding-block: 0 var(--fdv-section); }
.legal__body { max-width: 74ch; font-size: 16px; line-height: 1.75; color: var(--fdv-ink-soft); }
.legal__body h2 { font-size: 24px; margin: 36px 0 12px; }
.legal__body h3 { font-size: 19px; margin: 24px 0 8px; }
.legal__body p, .legal__body ul, .legal__body ol { margin-bottom: 14px; }
.legal__body ul, .legal__body ol { padding-left: 20px; list-style: revert; }
.legal__body li { margin-bottom: 6px; }

/* Bestelling en account uit de kern */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.order-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.order-plate { background: var(--fdv-accent-soft); border-radius: var(--fdv-r-xl); padding: 24px; }
.oc-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--fdv-line); }
.oc-item__media { border-radius: var(--fdv-r-md); overflow: hidden; background: var(--fdv-surface-soft); }
.oc-item__name { font-weight: 600; }
.oc-item__meta { font-size: 13px; color: var(--fdv-muted); }
.oc-item__price { font-weight: 600; white-space: nowrap; }
.oc-address { font-size: 15px; line-height: 1.7; color: var(--fdv-ink-soft); }
@media (max-width: 1024px) { .order-grid { grid-template-columns: 1fr; } }

/* Productkaart uit de kern (shop.php, favorieten.php) */
.pcard { display: flex; flex-direction: column; background: var(--fdv-surface); border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-xl); padding: 16px; }
.pcard__media { border-radius: var(--fdv-r-md); overflow: hidden; background: var(--fdv-surface-soft); aspect-ratio: 1 / 1; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__body { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; flex: 1; }
.pcard__brandline { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--fdv-muted); }
.pcard__color { font-size: 13px; color: var(--fdv-muted); }
.pcard__priceline { display: flex; align-items: baseline; gap: 10px; }
.pcard__actions, .pcard__cartform { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 14px; }
.shopf__fav, .shopf__favform { display: inline-flex; }

/* ── Navigatie en lade (kern-id's blijven: #nav, #menuBtn, #drawer) ── */
.nav { position: sticky; top: 0; z-index: 60; background: var(--fdv-surface); border-bottom: 1px solid var(--fdv-line); }
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(88vw, 380px); z-index: 130;
  background: var(--fdv-surface); border-right: 1px solid var(--fdv-line);
  transform: translateX(-100%); transition: transform 220ms var(--ease);
  display: flex; flex-direction: column; padding: 16px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); box-shadow: var(--fdv-shadow-pop); }
.drawer > a, .drawer > form {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; border-bottom: 1px solid var(--fdv-line);
  font-size: 16px; font-weight: 500; color: var(--fdv-ink);
}
.drawer > a:hover { color: var(--fdv-accent); }
.drawer__close {
  align-self: flex-end; min-height: 44px; padding: 0 14px; margin-bottom: 8px;
  border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-md);
  background: var(--fdv-surface); font-size: 14px; font-weight: 500; cursor: pointer;
}

/* ── Toasts ── */
.toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 140; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 520px); }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--fdv-ink); color: #fff; border-radius: var(--fdv-r-lg);
  padding: 14px 18px; font-size: 15px; box-shadow: var(--fdv-shadow-pop);
  opacity: 0; transform: translateY(10px); transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .dot { color: var(--fdv-accent); }

/* ── Cookiemelding ── */
.consent { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; justify-content: center; background: rgba(24, 26, 28, 0.42); padding: 16px; }
.consent__dialog { background: var(--fdv-surface); border-radius: var(--fdv-r-xl); padding: 28px; width: min(94vw, 620px); box-shadow: var(--fdv-shadow-pop); max-height: 88vh; overflow-y: auto; }
.consent__title { font-family: var(--fdv-font-display); font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.consent__text { font-size: 15px; line-height: 1.65; color: var(--fdv-ink-soft); }
.consent__link { text-decoration: underline; }
.consent__cats { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.consent__cat { border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-lg); padding: 14px 16px; }
.consent__cathead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consent__catlabel { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.consent__catdesc { font-size: 14px; color: var(--fdv-muted); margin-top: 6px; }
.consent__badge { font-size: 12px; font-weight: 500; color: var(--fdv-muted); border: 1px solid var(--fdv-line); border-radius: var(--fdv-r-sm); padding: 4px 8px; }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ── Rijke tekst uit Logic4 (safe_html) ── */
.fdv-richtext { font-size: 16px; line-height: 1.75; color: var(--fdv-ink-soft); }
.fdv-richtext p { margin: 0 0 14px; }
.fdv-richtext p:last-child { margin-bottom: 0; }
.fdv-richtext strong, .fdv-richtext b { color: var(--fdv-ink); }
.fdv-richtext h2, .fdv-richtext h3, .fdv-richtext h4 {
  font-family: var(--fdv-font-display); color: var(--fdv-ink); letter-spacing: -0.01em;
  margin: 26px 0 10px;
}
.fdv-richtext h2 { font-size: 24px; }
.fdv-richtext h3 { font-size: 20px; }
.fdv-richtext h4 { font-size: 17px; }
.fdv-richtext ul, .fdv-richtext ol { margin: 0 0 14px; padding-left: 22px; list-style: revert; }
.fdv-richtext li { margin-bottom: 6px; }
.fdv-richtext a { text-decoration: underline; text-underline-offset: 3px; }
.fdv-richtext table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
.fdv-richtext th, .fdv-richtext td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--fdv-line); vertical-align: top; }
.fdv-richtext th { font-weight: 600; color: var(--fdv-ink); }

/* ── Skip-link (kern gebruikt .skip-link) ── */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--fdv-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--fdv-r-md); font-size: 14px; font-weight: 600; transition: top var(--fdv-t);
}
.skip-link:focus { top: 8px; color: #fff; }

/* ── Scroll-reveal uit main.js: nooit inhoud verbergen zonder JS ── */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* Componenten winnen van de compatibiliteitslaag.
   De laag hierboven stijlt kale <input>/<select>/<textarea> voor pagina's
   die nog niet zijn omgezet. Die selectors hebben dezelfde gewichtsklasse
   als de fdv-componenten, dus die worden hier expliciet teruggezet. */
.fdv-header .fdv-search input {
  min-height: 44px; padding: 0 44px; font-size: 15px;
  background: var(--fdv-bg); border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-lg);
}
.fdv-header .fdv-search input:focus { background: #fff; border-color: var(--fdv-ink); box-shadow: none; }

input.fdv-input, select.fdv-select, textarea.fdv-textarea {
  min-height: 48px; padding: 0 16px; font-size: 16px;
  border: 1px solid var(--fdv-line-strong); border-radius: var(--fdv-r-lg); background: var(--fdv-surface);
}
textarea.fdv-textarea { padding: 14px 16px; min-height: 120px; }
select.fdv-select { padding-right: 40px; }
.fdv-qty input, .qty input { min-height: 0; height: 44px; padding: 0; border: 0; border-radius: 0; text-align: center; font-size: 15px; font-weight: 600; background: transparent; }
.fdv-check input, .fdv-switch input { min-height: 0; }

/* ── Melding: uitlopend artikel (end of life) ───────────────── */
.fdv-notice {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--fdv-line);
  border-left: 3px solid #B45309;
  border-radius: var(--fdv-r-sm);
  background: #FFFBEB;
  color: var(--fdv-ink);
  font-size: 14px;
  line-height: 1.55;
}
.pp-eol { margin-top: 12px; }

/* ── Categorienavigatie in het filter ───────────────────────
   Links in plaats van vinkjes: je zakt per klik één niveau de boom in. */
.fdv-catnav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fdv-catnav a,
.fdv-catnav__current {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--fdv-r-xs);
  font-size: 14px; text-decoration: none; color: var(--fdv-ink);
}
.fdv-catnav a:hover { background: var(--fdv-bg); }
.fdv-catnav__up { color: var(--fdv-muted); font-size: 13px; }
.fdv-catnav__current { font-weight: 600; background: var(--fdv-accent-soft); color: var(--fdv-accent-ink, var(--fdv-ink)); }
.fdv-catnav__label { flex: 1 1 auto; min-width: 0; }
.fdv-catnav__more { color: var(--fdv-muted); font-size: 16px; line-height: 1; }
.fdv-catnav__count { color: var(--fdv-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── Subcategorietegels op de categoriepagina ───────────────
   Getoond wanneer er geen artikelen rechtstreeks in de categorie zitten. */
.fdv-subcats { margin-bottom: 28px; }
.fdv-subcats__title { font-size: 18px; margin: 0 0 14px; }
.fdv-subcat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; text-decoration: none; color: var(--fdv-ink);
}
.fdv-subcat__name { font-weight: 600; font-size: 15px; }
.fdv-subcat__count { color: var(--fdv-muted); font-size: 13px; }
/* Met beeld loopt de foto tot aan de rand van de tegel en zit de tekst
   eronder; zonder beeld blijft de tegel precies zoals hij was. */
.fdv-subcat--media { padding: 0; overflow: hidden; }
.fdv-subcat__media { display: block; width: 100%; }
.fdv-subcat--media .fdv-subcat__name { padding: 14px 18px 0; }
.fdv-subcat--media .fdv-subcat__count { padding: 0 18px 16px; }

@media (max-width: 640px) {
  .fdv-subcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fdv-subcat { padding: 14px 16px; }
}

/* ── Mega menu ──────────────────────────────────────────────
   Vier gelijke kolommen met een vaste rechterkolom ernaast, en onderaan een
   balk met populaire producten. Tonen en verbergen doet de CSS (hover en
   :focus-within), zodat het menu ook werkt zonder JavaScript. */
.fdv-nav__has-mega { position: static; }

.fdv-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 61;
  background: #FFFFFF;
  border-top: 1px solid var(--fdv-line);
  box-shadow: 0 20px 44px rgba(24, 26, 28, 0.10);
  opacity: 0;
  visibility: hidden;
  /* height: 0 — een dicht paneel telt anders mee in de scrollhoogte van de
     pagina. Bij veel subcategorieën (accessoires) is een paneel duizenden
     pixels hoog en stak het onzichtbaar onder de footer uit: dát was de
     "ruimte na de footer" op korte pagina's. Met hoogte nul is het paneel
     ook voor de scrollbalk werkelijk weg; de fade werkt gewoon, want de
     hoogtesprong gebeurt terwijl het paneel nog onzichtbaar is. */
  height: 0;
  overflow: clip;
  transform: translateY(-6px);
  transition: opacity var(--fdv-t), transform var(--fdv-t), visibility var(--fdv-t);
}

.fdv-nav__has-mega:hover .fdv-mega,
.fdv-nav__has-mega:focus-within .fdv-mega,
.fdv-mega.is-open {
  opacity: 1;
  visibility: visible;
  height: auto;
  /* Nooit hoger dan het scherm: een paneel met heel veel groepen scrolt
     binnen het paneel in plaats van dat de rest onbereikbaar is. */
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(0);
}

.fdv-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  /* padding-block, niet de shorthand: die zou de padding-inline van
     .fdv-container wissen en dan valt het paneel uit de rooilijn. */
  padding-block: 44px 40px;
}
.fdv-mega__inner--rail { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }

/* Vier gelijke kolommen zoals het ontwerp, maar niet meer tracks dan er
   kolommen zijn: anders werd elke kolom kwart-breed, brak elke wat langere
   naam over twee regels en bleef de halve balk leeg. */
.fdv-mega__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 40px;
  align-content: start;
}
.fdv-mega__columns--n1 { grid-template-columns: minmax(0, 320px); }
.fdv-mega__columns--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fdv-mega__columns--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fdv-mega__rest { font-size: 14px; color: var(--fdv-muted); text-decoration: none; }
.fdv-mega__rest:hover { color: var(--fdv-accent); }

/* Een kolom kan meerdere groepen bevatten; die stapelen met ruimte ertussen. */
.fdv-mega__col { display: flex; flex-direction: column; }
.fdv-mega__col > .fdv-mega__heading + .fdv-mega__list { margin-bottom: 0; }
.fdv-mega__col > .fdv-mega__list + .fdv-mega__heading { margin-top: 30px; }

.fdv-mega__heading {
  display: block;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fdv-muted);
  text-decoration: none;
}
.fdv-mega__heading:hover { color: var(--fdv-accent); }

.fdv-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fdv-mega__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--fdv-ink);
  text-decoration: none;
}
.fdv-mega__list a:hover .fdv-mega__label { color: var(--fdv-accent); }
.fdv-mega__list a.is-strong .fdv-mega__label { font-weight: 700; }
.fdv-mega__label { min-width: 0; }
.fdv-mega__count { color: var(--fdv-muted); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Rechterkolom: uitgelicht product en de keuzehulp. */
.fdv-mega__rail { display: grid; gap: 16px; align-content: start; }
.fdv-mega__product {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--fdv-ink);
  transition: border-color var(--fdv-t), box-shadow var(--fdv-t);
}
.fdv-mega__product:hover { border-color: var(--fdv-line-control); box-shadow: var(--fdv-shadow-card); }
.fdv-mega__media { width: 100%; }
.fdv-mega__product-body { display: grid; gap: 6px; padding: 18px 20px 20px; }
.fdv-mega__kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fdv-accent);
}
.fdv-mega__name { font-weight: 700; font-size: 17px; }
.fdv-mega__price { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.fdv-mega__stock { font-size: 14px; color: var(--fdv-ok, #1B7F4B); }

.fdv-mega__advice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--fdv-r-md);
  background: var(--fdv-bg);
  font-size: 15px;
  color: var(--fdv-ink);
}
.fdv-mega__advice svg { flex: 0 0 auto; color: var(--fdv-accent); }
.fdv-mega__advice a { color: var(--fdv-accent); font-weight: 600; text-decoration: none; }
.fdv-mega__advice a:hover { text-decoration: underline; }

/* Onderbalk: populaire producten links, doorklik rechts. */
.fdv-mega__foot { border-top: 1px solid var(--fdv-line); }
.fdv-mega__foot-inner {
  display: flex; align-items: center; gap: 16px;
  justify-content: space-between; padding-block: 20px 24px;
}
.fdv-mega__popular-label { color: var(--fdv-muted); font-size: 15px; flex: 0 0 auto; }
.fdv-mega__chips { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
.fdv-mega__foot-inner .fdv-chip { white-space: nowrap; }
.fdv-mega__all {
  flex: 0 0 auto;
  color: var(--fdv-accent);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.fdv-mega__all:hover { text-decoration: underline; }

@media (max-width: 1280px) {
  .fdv-mega__inner--rail { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}

/* Onder 1024px doet de mobiele lade het werk; het paneel blijft dan weg. */
@media (max-width: 1024px) {
  .fdv-mega { display: none; }
}

/* == assets/css/pages.css == */
/* ============================================================
   Foto de Vakman — pages.css
   Accountomgeving (account.php), favorieten, de besteldetail- en
   bevestigingspagina, en de informatiepagina's (FAQ, contact,
   verzending, juridisch, bestelling zoeken, betaalfout, wachtwoord).

   Alles wat met fdv- begint staat in main.css; hier alleen de
   paginaspecifieke aanvullingen (pg-, acc-, fav-, ord-, con-,
   faq-, fail-, ship-).
============================================================ */

/* ============================================================
   GEDEELD — informatie- en formulierpagina's
============================================================ */
.pg-head { margin-top: 14px; }
.pg-head + * { margin-top: 28px; }
.pg-narrow { max-width: 480px; }
.pg-aside { margin-top: 20px; }
.pg-cta { margin-top: 28px; }

/* Doorlopende tekst op de informatie- en juridische pagina's. */
.pg-prose { max-width: 78ch; font-size: 16px; line-height: 1.75; color: var(--fdv-ink-soft); }
.pg-prose > :first-child { margin-top: 0; }
.pg-prose h2 {
  font-family: var(--fdv-font-display); font-size: clamp(20px, 2.4vw, 24px); font-weight: 700;
  letter-spacing: -0.01em; color: var(--fdv-ink); margin: 36px 0 12px;
}
.pg-prose h3 { font-size: 18px; font-weight: 600; color: var(--fdv-ink); margin: 24px 0 8px; }
.pg-prose p { margin: 0 0 14px; }
.pg-prose ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.pg-prose li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; }
.pg-prose li::before { content: "—"; font-family: var(--fdv-font-mono); font-size: 13px; color: var(--fdv-accent); flex: 0 0 auto; }
.pg-prose a { color: var(--fdv-ink); text-decoration: underline; text-underline-offset: 2px; }
.pg-prose a:hover { color: var(--fdv-accent); }
.pg-prose strong { color: var(--fdv-ink); }

/* Kleine gegevenstabellen (verzendtarieven). */
.pg-tablewrap { overflow-x: auto; margin: 0 0 14px; }
.pg-tablewrap .fdv-spec { min-width: 420px; }
.pg-tablewrap .fdv-spec th { width: auto; font-size: 13px; }
.pg-tablewrap .fdv-spec td { font-weight: 400; }

/* Nog in te vullen bedrijfsgegevens (KvK, btw, adres, telefoon). */
.ph {
  font-family: var(--fdv-font-mono); font-size: 0.86em; color: var(--fdv-muted);
  background: var(--fdv-surface-soft); border: 1px dashed var(--fdv-line-strong);
  border-radius: var(--fdv-r-xs); padding: 1px 7px; white-space: nowrap;
}

/* ============================================================
   ACCOUNT — gedeelde paginakop
============================================================ */
.acc-intro { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.acc-layout { margin-top: 32px; }
.acc-head { margin-bottom: 18px; }
.acc-value { font-size: 15px; color: var(--fdv-ink); }
.acc-address { font-size: 15px; font-style: normal; line-height: 1.6; color: var(--fdv-ink); }

/* Zijnavigatie: het aantal rechts uitlijnen binnen de bestaande link. */
.acc-count { margin-left: auto; }
.fdv-sidenav a.is-active .acc-count { color: rgba(255, 255, 255, 0.72); }
.acc-side { align-self: start; }
@media (max-width: 1024px) {
  .acc-side { gap: 12px; }
  .acc-logout .fdv-btn { width: auto; }
}

/* ------------------------------------------------------------
   ACCOUNT — inloggen en registreren (uitgelogd)
------------------------------------------------------------ */
.acc-auth { margin-top: 28px; align-items: start; }
.acc-guest { margin-top: 24px; }
.acc-fieldrow { gap: 16px; }
@media (max-width: 640px) { .acc-fieldrow { gap: 16px; } }

/* ------------------------------------------------------------
   ACCOUNT — kaarten met eigen kop- en voetrand
------------------------------------------------------------ */
.acc-card-head,
.ord-card-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 22px 24px; border-bottom: 1px solid var(--fdv-line);
}
.acc-card-body { padding: 22px 24px; }

.acc-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 20px; align-items: center; }
.acc-latest__total { font-family: var(--fdv-font-display); font-size: 22px; font-weight: 700; color: var(--fdv-ink); }
.acc-latest__value { font-size: 15px; color: var(--fdv-ink); }
.acc-latest__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 640px) {
  .acc-latest { grid-template-columns: 1fr; }
  .acc-latest__actions { margin-left: 0; }
  .acc-latest__actions .fdv-btn { flex: 1; }
}

/* ------------------------------------------------------------
   ACCOUNT — bestellingentabel
------------------------------------------------------------ */
.acc-tablewrap { overflow-x: auto; }
.acc-table { min-width: 560px; }
.acc-table th { width: auto; font-size: 13px; }
.acc-table td { vertical-align: middle; font-weight: 400; }
.acc-table tbody tr:last-child td { border-bottom: 0; }
.acc-table__right { text-align: right; }
.acc-table__order { font-size: 15px; font-weight: 600; color: var(--fdv-ink); }
.acc-table__order:hover { color: var(--fdv-accent); }

/* ------------------------------------------------------------
   ACCOUNT — favorieten in het accountpaneel
------------------------------------------------------------ */
.acc-favgrid { gap: 20px; }
.acc-favname,
.fav-name { margin: 0; font: inherit; letter-spacing: normal; }

/* ============================================================
   FAVORIETEN (favorieten.php)
============================================================ */
.fav-head { margin-top: 14px; }
.fav-grid { gap: 20px; margin-top: 4px; }
.fav-empty { max-width: 62ch; }
.fav-cartform { width: 100%; }

/* ============================================================
   BESTELLING — bevestiging en detail (bestelling.php)
============================================================ */
.ord-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.ord-check {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fdv-r-pill); background: var(--fdv-success);
}
.ord-testbadge { margin-top: 14px; }

.ord-confirm { margin-top: 20px; max-width: 72ch; flex-direction: column; align-items: stretch; }
.ord-confirm__lead { font-size: 17px; line-height: 1.6; color: inherit; }
.ord-confirm__delivery { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }

.ord-track { margin-top: 28px; }
.ord-layout { margin-top: 32px; }

.ord-card-body { padding: 4px 24px 0; overflow-x: auto; }
/* Lange ononderbreekbare waarden (serienummers, e-mailadressen, track &
   trace-codes) breken binnen hun vak in plaats van de pagina op te rekken. */
.acc-value, .acc-address, .ord-address, .fdv-mono { overflow-wrap: anywhere; }
.ord-card-foot { padding: 8px 24px 20px; border-top: 1px solid var(--fdv-line); }

.ord-table th { width: auto; font-size: 13px; }
.ord-table td { vertical-align: middle; font-weight: 400; }
.ord-table tbody tr:last-child td { border-bottom: 0; }
.ord-table__right { text-align: right; }
.ord-table__price { font-weight: 600; white-space: nowrap; }

.ord-item { display: flex; align-items: center; gap: 16px; }
.ord-item__media {
  width: 64px; height: 64px; flex: 0 0 auto; padding: 0;
  border-radius: var(--fdv-r-md);
}
.ord-item__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fdv-ink); }

.ord-totals { margin: 0; }

.ord-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  padding: 24px; border-top: 1px solid var(--fdv-line); background: var(--fdv-bg);
}
.ord-meta__value { font-size: 15px; color: var(--fdv-ink); }
.ord-address { font-size: 15px; font-style: normal; line-height: 1.6; color: var(--fdv-ink); }
.ord-address__name { font-weight: 600; }
@media (max-width: 640px) { .ord-meta { grid-template-columns: 1fr; } }

/* Genummerde vervolgstappen */
.ord-next { counter-reset: ordstep; }
.ord-next li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--fdv-line);
  font-size: 15px; line-height: 1.55; color: var(--fdv-ink-soft);
}
.ord-next li:last-child { border-bottom: 0; }
.ord-next li::before {
  counter-increment: ordstep; content: counter(ordstep);
  font-family: var(--fdv-font-mono); font-size: 12px; color: var(--fdv-accent); flex: 0 0 auto;
}

/* ============================================================
   BETALING MISLUKT (betaling_mislukt.php)
============================================================ */
.fail-mark { align-self: flex-start; color: var(--fdv-warning); border-color: var(--fdv-accent-soft-line); background: var(--fdv-accent-soft); }
.fail-note { flex-direction: column; align-items: stretch; margin-top: 24px; max-width: 78ch; }
.fail-layout { margin-top: 28px; align-items: start; gap: 32px; }
.fail-methods { border: 0; padding: 0; margin: 0; min-width: 0; }
.fail-methods legend { padding: 0; margin-bottom: 8px; }
.fail-actions { gap: 12px; }
.fail-help { align-self: start; }

/* ============================================================
   FAQ (faq.php)
============================================================ */
.faq-layout { margin-top: 28px; align-items: start; gap: 32px; }
.faq-list { padding-block: 4px 8px; }
.faq-item__h { margin: 0; font: inherit; letter-spacing: normal; }
.faq-item:first-child .acc__btn { border-top: 0; }
.acc__mark { color: var(--fdv-muted); transition: transform var(--fdv-t); }
.acc__btn[aria-expanded="true"] .acc__mark { transform: rotate(180deg); }
.acc__panel a { color: var(--fdv-ink); text-decoration: underline; text-underline-offset: 2px; }
.acc__panel a:hover { color: var(--fdv-accent); }
.faq-side { align-self: start; }
.faq-links { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   CONTACT (contact.php)
============================================================ */
.con-layout { margin-top: 28px; align-items: start; gap: 32px; }
.con-fieldrow { gap: 16px; }
.con-side { align-self: start; }
.con-links { list-style: none; margin: 0; padding: 0; }
.con-value { font-size: 15px; color: var(--fdv-ink); text-decoration: underline; text-underline-offset: 2px; }
.con-value:hover { color: var(--fdv-accent); }
.con-store { padding-top: 14px; border-top: 1px solid var(--fdv-line); }
.con-address { font-size: 15px; font-style: normal; line-height: 1.6; color: var(--fdv-ink); }

/* ============================================================
   VERZENDING EN RETOURNEREN (verzending_retourneren.php)
============================================================ */
.ship-note { margin-top: 24px; }

/* == modules/keuzehulp/assets/css/keuzehulp.css == */
/* ============================================================
   Foto de Vakman — keuzehulp.css  (module: keuzehulp)

   Alleen wat het designsysteem nog niet heeft. De stappen, kaarten,
   radiokaarten en productkaarten komen uit assets/css/main.css; hier
   staan de paar afstanden en de routekaarten uit het ontwerp.
============================================================ */

.khp-steps { margin: 28px 0 24px; }
.khp-empty { max-width: 46rem; }

/* ── Eén vraag per stap ──────────────────────────────────── */
.khp-step { max-width: 46rem; }
.khp-fieldset { border: 0; margin: 0; padding: 0; }
.khp-legend { padding: 0; }
.khp-help { margin-top: 8px; }
.khp-options { margin-top: 20px; }
.khp-options .fdv-radio-card input {
  accent-color: var(--fdv-accent); width: 18px; height: 18px; flex: 0 0 auto;
}
.khp-nav { margin-top: 24px; gap: 12px; }

/* ── Routekaarten (ook op de homepage) ───────────────────── */
.khp-routeblock { margin-top: 40px; }
.khp-routes { margin-top: 20px; gap: 20px; }
.khp-route { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.khp-route__title { font-family: var(--fdv-font-display); font-weight: 600; color: var(--fdv-ink); display: block; }
.khp-route__body { display: block; line-height: 1.55; }
.khp-route .fdv-link-arrow { margin-top: 4px; }

/* ── Uitkomst ────────────────────────────────────────────── */
.khp-answers { margin: 24px 0 8px; gap: 8px; }
.khp-results-title { margin: 24px 0 20px; }
.khp-results { gap: 24px; }
.khp-why { margin: 8px 0; color: var(--fdv-ink-soft); line-height: 1.55; }
.khp-result__foot { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.khp-share { margin-top: 24px; color: var(--fdv-muted); }

/* == modules/vergelijken/assets/css/vergelijken.css == */
/* ============================================================
   Foto de Vakman — vergelijken.css  (module: vergelijken)

   Alleen wat het designsysteem nog niet heeft. De tabel zelf is
   .fdv-compare-wrap / .fdv-compare uit assets/css/main.css; hier
   staan de vergelijkbalk, het vinkje op de productkaart en de
   paar tabelnuances. Alle kleuren, radii en tijden komen uit de
   bestaande custom properties — geen eigen palet.
============================================================ */

/* ── Paginakop met de schakelaar ─────────────────────────── */
.vgl-head { align-items: flex-start; gap: 24px; }
.vgl-diff { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vgl-diff .fdv-switch { gap: 12px; }
.vgl-note { margin-bottom: 20px; }
.vgl-empty { max-width: 46rem; }
.vgl-foot { margin-top: 16px; color: var(--fdv-muted); }

/* ── Kolomkoppen: de productkaartjes ─────────────────────── */
.vgl-corner { background: var(--fdv-bg); }
.vgl-col { min-width: 220px; }
.vgl-card { align-items: stretch; text-align: left; font-weight: 400; }
.vgl-card .fdv-product__name { font-size: 16px; line-height: 1.35; }
.vgl-card form { margin: 0; }

.vgl-col--add { min-width: 180px; }
.vgl-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 240px; padding: 18px; text-align: center;
  border: 1px dashed var(--fdv-line-control); border-radius: var(--fdv-r-xl);
  color: var(--fdv-muted); transition: border-color var(--fdv-t), color var(--fdv-t);
}
.vgl-add:hover { border-color: var(--fdv-accent); color: var(--fdv-ink); }

/* ── Rijen ───────────────────────────────────────────────── */
/* Verborgen rijen: zowel server-side (?verschillen=1) als via de
   schakelaar met JavaScript. Expliciet, zodat geen enkele
   tabelregel het [hidden]-gedrag van de browser overschrijft. */
.vgl-table tr[hidden] { display: none; }
.vgl-row--differs > th { color: var(--fdv-ink); }
.vgl-none { color: var(--fdv-muted-soft); }

/* ── Het vinkje op een productkaart ──────────────────────── */
.vgl-check { display: flex; align-items: center; margin: 0; }
/* De knop draagt .fdv-check en ziet er dus uit als elk ander vinkje;
   alleen het knop-eigen uiterlijk moet nog weg. */
.vgl-check__btn {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; text-align: left; color: var(--fdv-ink-soft);
}
.vgl-check__btn[aria-pressed="true"] .fdv-check__box { background: var(--fdv-accent); border-color: var(--fdv-accent); }
.vgl-check__btn[aria-pressed="true"] .fdv-check__box::after { transform: rotate(-45deg) scale(1); }
.vgl-check__btn:focus-visible .fdv-check__box { outline: 2px solid var(--fdv-accent); outline-offset: 2px; }
.vgl-check__btn:hover { color: var(--fdv-ink); }
.vgl-check__btn[disabled] { opacity: 0.6; }

/* ── De vergelijkbalk ────────────────────────────────────── */
.vgl-bar {
  position: sticky; bottom: 0; z-index: 60;
  background: var(--fdv-surface); border-top: 1px solid var(--fdv-line);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
}
.vgl-bar[hidden] { display: none; }
.vgl-bar__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vgl-bar__count { margin: 0; color: var(--fdv-ink-soft); }
.vgl-bar__count strong { font-family: var(--fdv-font-display); font-size: 18px; }
.vgl-bar__msg { margin: 0; color: var(--fdv-accent); flex: 1 1 12rem; }
.vgl-bar__msg:empty { display: none; }

.vgl-bar__thumbs { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.vgl-bar__thumb { position: relative; width: 48px; }
.vgl-bar__thumb .fdv-media { border-radius: var(--fdv-r-md); overflow: hidden; }
/* Zonder productfoto zet .fdv-media de productnaam als plaatshouder neer.
   In een miniatuur van 48px levert dat alleen afgekapte letters op; de
   naam staat er al toegankelijk naast (.fdv-visually-hidden). */
.vgl-bar__thumb .fdv-media__note { display: none; }
.vgl-bar__drop { position: absolute; top: -8px; right: -8px; margin: 0; }
.vgl-bar__dropbtn {
  width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: var(--fdv-r-pill);
  background: var(--fdv-surface); border: 1px solid var(--fdv-line-control); color: var(--fdv-ink-soft);
}
.vgl-bar__dropbtn:hover { border-color: var(--fdv-accent); color: var(--fdv-accent); }

.vgl-bar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vgl-bar__actions form { margin: 0; }

@media (max-width: 640px) {
  .vgl-bar__inner { gap: 10px; }
  .vgl-bar__actions { margin-left: 0; width: 100%; }
  .vgl-bar__actions .fdv-btn { flex: 1 1 auto; }
  .vgl-col { min-width: 170px; }
}

/* == modules/bestelplus/assets/css/bestelplus.css == */
/* ============================================================
   Module bestelplus — minicart, adapter-switch, deellevering en de
   op-bestelling-notitie. Alles in de bp-naamruimte; kleuren en maten
   komen uit de fdv-tokens van main.css.
============================================================ */

/* ── Op bestelling: levertijdregel op de productpagina ── */
.bp-onorder { color: var(--fdv-ink-soft); margin-top: 2px; }

/* ── Adapter-switch in het koopblok ── */
.bp-adapter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--fdv-line);
  border-radius: var(--fdv-r-lg);
  background: var(--fdv-surface);
  cursor: pointer;
}
.bp-adapter__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.bp-adapter__track {
  flex: 0 0 auto;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--fdv-line-control);
  position: relative;
  transition: background var(--fdv-t);
}
.bp-adapter__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(24, 26, 28, 0.25);
  transition: transform var(--fdv-t);
}
.bp-adapter__input:checked + .bp-adapter__track { background: var(--fdv-accent); }
.bp-adapter__input:checked + .bp-adapter__track .bp-adapter__thumb { transform: translateX(18px); }
.bp-adapter__input:focus-visible + .bp-adapter__track { outline: 2px solid var(--fdv-accent); outline-offset: 2px; }
.bp-adapter__text { font-size: 15px; line-height: 1.45; }
.bp-adapter__name { font-weight: 600; }
.bp-adapter__price { color: var(--fdv-ink-soft); }

/* ── Deellevering in de checkout ── */
.bp-partial__card { cursor: pointer; }
.bp-partial__card input[type="radio"] { accent-color: var(--fdv-accent); }
.bp-partial__fee { font-weight: 600; color: var(--fdv-ink); }
@media (max-width: 720px) {
  .bp-partial__cards { grid-template-columns: 1fr; }
}

/* Melding in de winkelwagen bij een gemengde wagen. */
.bp-cart-notice { margin-top: 12px; }

/* ── Bezorgen of afhalen in de checkout ── */
.bp-delivery__card { cursor: pointer; }
.bp-delivery__card input[type="radio"] { accent-color: var(--fdv-accent); }
@media (max-width: 900px) {
  .bp-delivery__cards { grid-template-columns: 1fr; }
}

/* ── Minicart ── */
.bp-minicart { position: fixed; inset: 0; z-index: 135; }
.bp-minicart[hidden] { display: none; }
.bp-minicart__scrim {
  position: absolute; inset: 0;
  background: rgba(24, 26, 28, 0.42);
}
.bp-minicart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(94vw, 420px);
  background: var(--fdv-bg);
  border-left: 1px solid var(--fdv-line);
  box-shadow: var(--fdv-shadow-pop);
  display: flex;
  flex-direction: column;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(12px);
  opacity: 0;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.bp-minicart.is-open .bp-minicart__panel { transform: translateX(0); opacity: 1; }

.bp-minicart__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.bp-minicart__title { font-family: var(--fdv-font-display); font-size: 20px; font-weight: 600; margin: 0; }
.bp-minicart__count { color: var(--fdv-muted); font-weight: 500; }
.bp-minicart__empty { padding: 18px 0; }

.bp-minicart__lines { display: flex; flex-direction: column; }
.bp-minicart__line {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--fdv-line);
}
.bp-minicart__line:first-child { border-top: 0; }
/* Vaste vierkante beeldvakken: zonder verhouding vielen de miniaturen
   terug op hun natuurlijke maat en werden ze postzegels. */
.bp-minicart__media {
  flex: 0 0 88px; width: 88px;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--fdv-r-md);
  background: #FFFFFF;
  border: 1px solid var(--fdv-line);
  overflow: hidden;
}
.bp-minicart__media > img {
  position: absolute; inset: 5px;
  width: calc(100% - 10px); height: calc(100% - 10px);
  object-fit: contain;
}
.bp-minicart__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.bp-minicart__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fdv-ink); }
.bp-minicart__name:hover { color: var(--fdv-accent); }
.bp-minicart__onorder { align-self: flex-start; }
.bp-minicart__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bp-minicart__linetotal { font-weight: 600; }
/* Eigen opmaak, bewust niet leunend op .cart-linkbtn: die klasse komt uit de
   winkelwagen-CSS en laadt niet op elke pagina — dan valt de knop terug op de
   kale browserknop. */
.bp-minicart__remove {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--fdv-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--fdv-t);
}
.bp-minicart__remove:hover { color: var(--fdv-accent); }

/* Upsell-strip */
.bp-minicart__upsells {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fdv-line);
}
.bp-minicart__upsells-h {
  display: block;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fdv-muted);
  margin-bottom: 10px;
}
.bp-minicart__upsell-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bp-upsell {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--fdv-line);
  border-radius: var(--fdv-r-lg);
  background: var(--fdv-surface);
  padding: 10px;
}
.bp-upsell__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--fdv-r-sm);
  background: #FFFFFF;
  border: 1px solid var(--fdv-line);
  overflow: hidden;
}
.bp-upsell__media > img {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain;
}
.bp-upsell__name { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--fdv-ink); }
.bp-upsell__name:hover { color: var(--fdv-accent); }
.bp-upsell__price { font-size: 14px; font-weight: 700; }
.bp-upsell__btn { margin-top: auto; width: 100%; }

/* Upsell-kaart op de winkelwagenpagina: zelfde .bp-upsell-tegels als in
   de minicart, maar in een bredere kaart onder de productlijst. */
.bp-cartups { margin-top: 8px; }
.bp-cartups__title { font-family: var(--fdv-font-display); font-weight: 600; }
.bp-cartups__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) { .bp-cartups__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Voet met subtotaal en knoppen: blijft onderaan het paneel plakken. */
.bp-minicart__foot {
  position: sticky; bottom: 0;
  margin-top: auto;
  padding-top: 14px;
  background: var(--fdv-bg);
  border-top: 1px solid var(--fdv-line);
  display: flex; flex-direction: column; gap: 8px;
}
.bp-minicart__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px;
  margin-bottom: 4px;
}
.bp-minicart__subtotal strong { font-family: var(--fdv-font-display); font-size: 19px; }

/* == modules/bundels/assets/css/bundels.css == */
/* ============================================================
   Foto de Vakman — bundels.css  (module: bundels)

   Alleen wat het designsysteem nog niet heeft: de opbouw van het
   blok "Kies je voordeelbundel" (hoofdproduct, aanvinkbare
   kaarten, totalenregel). Alle kleuren, radii en tijden komen uit
   de bestaande custom properties — geen eigen palet.
============================================================ */

.bnd-title { font-size: 32px; margin-bottom: 8px; }
.bnd-intro { margin-bottom: 4px; }
.bnd-groupname { margin: 0 0 24px; color: var(--fdv-muted); }

/* ── Opbouw: hoofdproduct · plus · aanvinkbare artikelen ───
   Eén rij zoals in het ontwerp. Het hoofdproduct houdt een vaste
   breedte, het plusteken blijft even groot en de artikelen krijgen
   de rest. Onder 900px klapt alles onder elkaar en wordt het plusteken
   een liggende scheiding. */
.bnd-body {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bnd-parent {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.bnd-parent__media {
  width: 100%;
  border-radius: var(--fdv-r-md);
}
.bnd-parent__media .fdv-media__note { font-size: 10px; }
.bnd-parent__name { font-size: 15px; }
.bnd-parent__price { color: var(--fdv-muted); }

.bnd-plus {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fdv-accent-soft, #FDF0E9);
  color: var(--fdv-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── Aanvinkbare extra artikelen ─────────────────────────── */
/* Vier vaste kolommen, precies zoals het ontwerp (.fdv-grid--4).
   Nadrukkelijk géén auto-fit: bij één extra artikel rekt die kolom dan over
   de volle breedte uit en krijg je een productfoto van een halve pagina. Met
   vaste kolommen houdt één kaart gewoon een kwart en blijft de rest leeg —
   net als in het ontwerp. */
.bnd-grid {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bnd-item {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--fdv-t), box-shadow var(--fdv-t);
}
.bnd-item:hover { border-color: var(--fdv-line-strong); }
.bnd-item:has(input:checked) { border-color: var(--fdv-accent); }
.bnd-item:has(input:focus-visible) { outline: 2px solid var(--fdv-accent); outline-offset: 2px; }

.bnd-item__check { min-height: 0; align-self: flex-start; margin: 0; }
.bnd-item__media { width: 100%; border-radius: var(--fdv-r-md); }
.bnd-item__media .fdv-media__note { font-size: 10px; }
.bnd-item__cat { font-size: 14px; font-weight: 600; }
.bnd-item__name { text-align: center; line-height: 1.5; }
.bnd-item__price { font-size: 15px; font-weight: 600; margin-top: auto; }

/* ── Totalen en knop ─────────────────────────────────────── */
.bnd-divider { margin-top: 28px; }
.bnd-foot {
  gap: 28px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 22px;
}
.bnd-totals { align-items: flex-end; }
.bnd-total { font-size: 30px; }
.bnd-tag[hidden],
.bnd-old[hidden] { display: none; }

@media (max-width: 1024px) {
  .bnd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bnd-body { flex-direction: column; align-items: stretch; }
  .bnd-parent { flex: 0 0 auto; flex-direction: row; text-align: left; align-items: center; }
  .bnd-parent__media { flex: 0 0 72px; width: 72px; }
  .bnd-parent__price { margin-left: auto; }
  .bnd-plus { align-self: center; }
}

@media (max-width: 640px) {
  .bnd-title { font-size: 26px; }
  .bnd-foot { justify-content: flex-start; }
  .bnd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* == modules/dealers/assets/css/dealers.css == */
/* ============================================================
   IMPÓSABLE X10 PRO — dealers.css
   Store locator: dealer list left, Leaflet/OSM map right.
   Same editorial language as the rest of the shop — thin lines,
   warm paper, mono metadata. Loaded only on dealers.php.
============================================================ */

/* NB: leaflet.css wordt als eigen <link> geladen (zie dealers.php),
   parallel met dit bestand — geen serialiserende @import-keten. */

/* ── Intro ───────────────────────────────────────────────── */
.dl-intro { border-bottom: 1px solid var(--line); }
.dl-intro__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 5vw, 72px); align-items: end; padding-bottom: clamp(32px, 5vw, 56px); }
.dl-intro__side { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); line-height: 2; text-transform: uppercase; text-align: right; }
.dl-intro__side a { border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.2s; }
.dl-intro__side a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .dl-intro__grid { grid-template-columns: 1fr; align-items: start; }
  .dl-intro__side { text-align: left; }
}

/* ── Layout: list left, map right ────────────────────────── */
.dealers { padding-block: clamp(40px, 6vw, 80px); }
/* stretch: de kaartkolom wordt even hoog als de lijstkolom, zodat de
   kaart nooit ergens halverwege "ophoudt" naast een langere lijst. */
.dealers__layout { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; }

/* ── Search ──────────────────────────────────────────────── */
.dealers__search { display: flex; flex-direction: column; gap: 14px; }
.dealers__searchbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.dealers__count { margin-top: 16px; text-transform: uppercase; letter-spacing: 0.1em; }
.dealers__msg { margin-top: 8px; color: var(--red); }

/* ── Dealer list ─────────────────────────────────────────── */
.dealers__list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dealers__layout.js .dealers__list { max-height: clamp(480px, 72vh, 900px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }

.dealer-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  padding: 16px 18px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.dealer-card:hover { border-color: rgba(23, 21, 15, 0.32); }
.dealer-card.is-active { border-color: var(--ink); background: var(--paper-2); }
.dealer-card__selected { color: var(--red); }

.dealer-card__head { display: flex; gap: 12px; align-items: flex-start; }
.dealer-card__logo { width: 44px; height: 44px; object-fit: contain; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 3px; padding: 4px; flex-shrink: 0; }
.dealer-card__name { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.dealer-card__select { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.dealer-card__select:hover:not([disabled]) { border-bottom-color: var(--line); }
.dealer-card__select[disabled] { cursor: default; }
.dealers__layout:not(.js) .dealer-card__select { cursor: default; }
.dealer-card__meta { display: flex; gap: 12px; align-items: baseline; margin-top: 3px; }
.dealer-card__selected[hidden] { display: none; }
.dealer-card__dist { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.dealer-card__addr { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.dealer-card__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.dealer-card__hours { margin-top: 8px; }
.dealer-card__hours summary { cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; }
.dealer-card__hours summary:hover { color: var(--ink); }
.dealer-card__hourlines { margin-top: 6px; }
.dealer-card__contact { margin-top: 8px; }
.dealer-card__contact a { border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color 0.2s; }
.dealer-card__contact a:hover { color: var(--ink); }
.dealer-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.dealers__empty p:first-child { font-size: 15px; color: var(--muted); }
.dealers__empty-live { border: 1px solid var(--line); border-left: 2px solid var(--red); background: var(--paper-2); border-radius: 2px; padding: 14px 16px; font-size: 14.5px; color: var(--ink); margin-top: 14px; }

/* ── Map ─────────────────────────────────────────────────── */
/* De kolom rekt mee met de lijst (align-items: stretch hierboven); de
   kaart vult die volledige hoogte, met een viewport-plafond zodat hij
   bij een heel lange lijst schermvullend blijft plakken (sticky). */
.dealers__map-col { position: sticky; top: 84px; display: flex; flex-direction: column; max-height: calc(100vh - 104px); }
.dealers__map {
  flex: 1;
  height: auto;
  min-height: clamp(480px, 72vh, 900px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.dealers__map-fallback { max-width: 34ch; text-align: center; padding: 0 20px; }
.dealers__map.is-ready { display: block; }
.dealers__map.is-ready .dealers__map-fallback { display: none; }

/* Leaflet chrome in brand style */
.dealers__map .leaflet-container { width: 100%; height: 100%; font-family: var(--sans); background: var(--paper-2); }
.dealers__map .leaflet-control-zoom a { color: var(--ink); border-color: var(--line); }
.dealers__map .leaflet-control-attribution { font: 10px var(--mono); background: rgba(239, 234, 224, 0.85); color: var(--muted); }
.dealers__map .leaflet-popup-content-wrapper { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 12px 30px rgba(23, 21, 15, 0.18); }
.dealers__map .leaflet-popup-tip { background: var(--paper); border: 1px solid var(--line); }
.dealers__map .leaflet-popup-content { margin: 14px 16px; font-size: 13.5px; line-height: 1.55; }
.dl-popup__name { font-family: var(--serif); font-size: 17px; font-weight: 400; margin-bottom: 4px; }
.dl-popup__addr { color: var(--muted); }
.dl-popup__links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.dl-popup__links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.dl-popup__links a:hover { border-color: var(--ink); }

/* Pinpoints: brand dots via divIcon (no default marker images) */
.dealer-pin { background: none; border: 0; }
.dealer-pin span {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--paper);
  box-shadow: 0 1px 5px rgba(23, 21, 15, 0.4);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.dealer-pin:hover span { transform: scale(1.18); }
.dealer-pin.is-active span { background: var(--red); transform: scale(1.25); }
.dealer-pin--user span { background: transparent; border: 2px solid var(--red); box-shadow: 0 0 0 4px rgba(194, 58, 34, 0.18); }

/* ── Responsive: search + list first, then the map ───────── */
@media (max-width: 900px) {
  .dealers__layout { grid-template-columns: 1fr; }
  .dealers__layout.js .dealers__list { max-height: 46vh; }
  .dealers__map-col { position: static; order: 2; }
  .dealers__map { height: clamp(320px, 50vh, 440px); }
}

/* == modules/logic4account/assets/css/logic4account.css == */
/* ============================================================
   logic4account — accountblokken uit het ontwerp: laatste
   bestelling, Mijn apparatuur, eerdere bestellingen, je gegevens
   en de garantiemelding.

   Alles staat onder de eigen `l4a-`-naamruimte, zodat deze module
   nooit iets van de kern overschrijft. Kleuren pakken de
   ontwerptokens van de shop met een letterlijke terugval, zodat
   de blokken ook kloppen als main.css die variabelen anders noemt.

   Dit bestand wordt automatisch ingeladen: includes/header.php
   zet een <link> voor elke module met assets/css/<id>.css.
============================================================ */

.l4a {
  --l4a-ink: var(--ink, #17150F);
  --l4a-muted: var(--muted, #6E685B);
  --l4a-line: var(--line-soft, rgba(23, 21, 15, 0.10));
  --l4a-accent: var(--accent, #E8612A);
  --l4a-ok: #2F6B45;
  --l4a-ok-bg: #E7F2EA;
  --l4a-warn: #C2521F;
  --l4a-peach: #FBE9DE;
  --l4a-inset: #F6F4F0;
  --l4a-card: #FFFFFF;
  --l4a-radius: 10px;
}

/* ── Kop van het account ─────────────────────────────────── */
.l4a-intro__meta { color: var(--l4a-muted); }

/* ── Kaarten ─────────────────────────────────────────────── */
.l4a-card {
  background: var(--l4a-card);
  border: 1px solid var(--l4a-line);
  border-radius: var(--l4a-radius);
  overflow: hidden;
}
.l4a-card + .l4a-card { margin-top: 18px; }

/* ── Laatste bestelling ──────────────────────────────────── */
.l4a-last__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
}
.l4a-last__title { font-size: clamp(19px, 2vw, 23px); line-height: 1.25; margin: 0 0 6px; }
.l4a-last__meta { color: var(--l4a-muted); font-size: 14.5px; }
.l4a-last__body {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--l4a-line);
}
.l4a-last__thumbs { display: flex; gap: 8px; flex: 0 0 auto; }
.l4a-last__text { flex: 1 1 220px; min-width: 180px; }
.l4a-last__when { font-size: 17px; font-weight: 600; line-height: 1.3; }
.l4a-last__sub { color: var(--l4a-muted); font-size: 14.5px; margin-top: 4px; }
.l4a-last__actions { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }

/* ── Statuspil ───────────────────────────────────────────── */
.l4a-badge {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.l4a-badge--done { background: var(--l4a-ok-bg); color: var(--l4a-ok); }
.l4a-badge--open { background: var(--l4a-peach); color: var(--l4a-warn); }
.l4a-badge--muted { background: var(--l4a-inset); color: var(--l4a-muted); }

/* ── Miniatuur met streepvlak als er geen foto is ────────── */
.l4a-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  background: repeating-linear-gradient(
    -45deg,
    #F1EEE8 0 6px,
    #E8E4DB 6px 12px
  );
}
.l4a-thumb img { width: 100%; height: 100%; object-fit: cover; }
.l4a-thumb--sm { width: 40px; height: 40px; border-radius: 6px; }

/* ── Sectiekop met actie rechts ──────────────────────────── */
.l4a-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 34px 0 16px;
}
.l4a-sectionhead h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; margin: 0; }
.l4a-sectionhead p { color: var(--l4a-muted); margin: 6px 0 0; }
.l4a-sectionhead a { color: var(--l4a-accent); font-weight: 500; }
.l4a-sectionhead a:hover { text-decoration: underline; }

/* ── Apparatuur ──────────────────────────────────────────── */
.l4a-gear {
  display: grid;
  /* min(280px, 100%): op een scherm smaller dan de minimumkolom krimpt de
     kolom mee in plaats van de pagina breder te maken (horizontale scroll). */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
.l4a-gear__card {
  background: var(--l4a-card);
  border: 1px solid var(--l4a-line);
  border-radius: var(--l4a-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.l4a-gear__top { display: flex; gap: 14px; align-items: flex-start; }
.l4a-gear__name { font-size: 16.5px; font-weight: 600; line-height: 1.3; margin: 0; }
.l4a-gear__name a:hover { text-decoration: underline; }
.l4a-gear__bought { color: var(--l4a-muted); font-size: 14px; margin-top: 4px; }
.l4a-gear__facts {
  background: var(--l4a-inset);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.l4a-gear__fact { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.l4a-gear__fact dt { color: var(--l4a-muted); }
.l4a-gear__fact dd { margin: 0; text-align: right; }
.l4a-gear__sn { font-family: var(--mono, 'Space Mono', ui-monospace, monospace); font-size: 13.5px; overflow-wrap: anywhere; }
.l4a-facts, .l4a-history__text { overflow-wrap: anywhere; min-width: 0; }
.l4a-gear__actions { display: flex; gap: 10px; margin-top: auto; }
.l4a-gear__actions > * { flex: 1 1 0; text-align: center; }
.l4a-ok { color: var(--l4a-ok); font-weight: 600; }
.l4a-warn { color: var(--l4a-warn); font-weight: 600; }
.l4a-muted { color: var(--l4a-muted); }

/* ── Twee kolommen: eerdere bestellingen + je gegevens ───── */
.l4a-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin-top: 22px;
  align-items: start;
}
.l4a-panel { padding: 22px 24px; }
.l4a-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}
.l4a-panel__head h3 { font-size: clamp(18px, 2vw, 22px); margin: 0; }
.l4a-panel__head a { color: var(--l4a-accent); font-weight: 500; }
.l4a-panel__head a:hover { text-decoration: underline; }

/* Eerdere bestellingen */
.l4a-history { list-style: none; margin: 10px 0 0; padding: 0; }
.l4a-history li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--l4a-line);
}
.l4a-history li:first-child { border-top: 0; }
.l4a-history__text { flex: 1 1 auto; min-width: 0; }
.l4a-history__num { font-weight: 600; display: block; }
.l4a-history__num:hover { text-decoration: underline; }
.l4a-history__sub { color: var(--l4a-muted); font-size: 14px; }
.l4a-history__price { font-weight: 600; white-space: nowrap; }

/* Je gegevens */
.l4a-facts { display: grid; gap: 16px; margin-top: 14px; }
.l4a-facts__label { color: var(--l4a-muted); font-size: 13.5px; display: block; margin-bottom: 2px; }
.l4a-facts address { font-style: normal; }
.l4a-facts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--l4a-line);
  padding-top: 16px;
}
.l4a-facts__link { color: var(--l4a-accent); font-weight: 500; }
.l4a-facts__link:hover { text-decoration: underline; }

/* Schakelaar (alleen weergave — de nieuwsbrief wordt via een formulier gezet) */
.l4a-switch { border: 0; background: none; padding: 0; cursor: pointer; }
.l4a-switch span {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #DDD8CE;
  position: relative;
  transition: background .15s ease;
}
.l4a-switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFF;
  transition: transform .15s ease;
}
.l4a-switch[aria-pressed="true"] span { background: var(--l4a-accent); }
.l4a-switch[aria-pressed="true"] span::after { transform: translateX(20px); }

/* ── Garantiemelding ─────────────────────────────────────── */
.l4a-notice {
  margin-top: 22px;
  background: var(--l4a-peach);
  border-radius: var(--l4a-radius);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.l4a-notice h3 { font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 8px; line-height: 1.25; }
.l4a-notice p { margin: 0; max-width: 46em; }
.l4a-notice__action { flex: 0 0 auto; }

/* ── Lege toestand ───────────────────────────────────────── */
.l4a-empty { padding: 22px 24px; }
.l4a-empty p { margin: 0 0 14px; }

@media (max-width: 720px) {
  .l4a-last__head { flex-direction: column; }
  .l4a-last__actions { width: 100%; }
  .l4a-last__actions > * { flex: 1 1 auto; }
  .l4a-notice { flex-direction: column; align-items: flex-start; }
}

/* == modules/occasions/assets/css/occasions.css == */
/* ============================================================
   Occasions — alleen wat het designsysteem (assets/css/main.css)
   nog niet dekt. Alle basisopmaak komt uit de fdv-klassen; hier
   staan uitsluitend de paginaspecifieke aanvullingen, met dezelfde
   variabelen en breekpunten (1024px en 640px) als de kern.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.occ-hero {
  align-items: center;
  gap: 56px;
  margin-top: 18px;
}

.occ-hero__media {
  border-radius: var(--fdv-r-xl);
  padding: 14px;
}

.occ-usps {
  max-width: 520px;
}

/* ── Occasion-kaart: het detailblokje in de kaart ─────────── */
.occ-grid {
  margin-top: 24px;
}

.occ-facts {
  gap: 7px;
  padding: 12px 14px;
  margin: 4px 0 0;
}

.occ-facts__row {
  gap: 12px;
}

.occ-facts dt {
  margin: 0;
}

.occ-facts__value {
  margin: 0;
  font-weight: 600;
  color: var(--fdv-ink);
  text-align: right;
}

.occ-newprice {
  color: var(--fdv-muted-soft);
}

/* ── Inruilblok ───────────────────────────────────────────── */
.occ-trade__steps {
  margin-top: 4px;
}

.occ-trade__media {
  min-height: 420px;
  padding: 14px;
}

/* ── Detailpagina ─────────────────────────────────────────── */
.occ-crumbs {
  padding-top: 20px;
}

.occ-top {
  padding-top: 18px;
}

.occ-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.occ-gallery {
  position: sticky;
  top: 24px;
}

.occ-stage {
  overflow: hidden;
}

.occ-thumbs {
  gap: 10px;
}

.occ-thumb {
  flex: 0 0 84px;
  width: 84px;
  border-radius: var(--fdv-r-sm);
  overflow: hidden;
  opacity: 0.72;
  transition: opacity 0.16s ease, box-shadow 0.16s ease;
}

.occ-thumb.is-active,
.occ-thumb:hover,
.occ-thumb:focus-visible {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--fdv-ink);
}

.occ-title {
  margin: 0;
}

.occ-sku {
  color: var(--fdv-muted);
}

/* Conditie prominent: het eerste wat je op een occasion wilt zien. */
.occ-condition {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.occ-condition__label {
  margin: 0;
}

.occ-location svg {
  flex: 0 0 auto;
  color: var(--fdv-muted);
}

.occ-buyrow {
  margin: 0;
}

.occ-unique-note {
  color: var(--fdv-muted);
}

.occ-assurances {
  margin-top: 4px;
}

/* ── Breekpunten (zelfde als de kern) ─────────────────────── */
@media (max-width: 1024px) {
  .occ-hero {
    gap: 32px;
  }

  .occ-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .occ-gallery {
    position: static;
  }

  .occ-trade__media {
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .occ-hero {
    gap: 24px;
    margin-top: 12px;
  }

  .occ-facts__row {
    gap: 8px;
  }

  .occ-thumb {
    flex: 0 0 68px;
    width: 68px;
  }
}

/* ── Melding na een verkocht exemplaar ──────────────────────
   .fdv-notice komt uit het designsysteem (main.css); hier alleen de
   plaatsing binnen het occasionoverzicht. */
.occ-sold { margin: 0 0 4px; }

/* == modules/redactie/assets/css/redactie.css == */
/* ============================================================
   Foto de Vakman — redactie.css (module "redactie")
   Uitsluitend de aanvullingen die de adviespagina, het artikel­detail
   en de workshopagenda nodig hebben bovenop assets/css/main.css. Alle
   bouwstenen (hero, kaarten, splitpaneel, media, accentpaneel, knoppen)
   komen uit het designsysteem; hier staan alleen plaatsings- en
   typografiedetails die per blok afwijken — precies de regels die in
   het ontwerp advies.html nog als inline style stonden.

   Voorvoegsel: redactie- (modulespecifiek, nooit fdv-).
   Breekpunten volgen de kern: 1024 px en 640 px.
============================================================ */

/* ── Paginakop ──────────────────────────────────────────────*/
.redactie-head__title { margin-top: 16px; }
.redactie-head__lead  { margin-top: 12px; }

/* ── Editorial hero ─────────────────────────────────────────*/
.redactie-hero        { margin-top: 32px; }
.redactie-hero__kicker { color: #fff; }
.redactie-hero__title  { color: #fff; margin-top: 12px; max-width: 22ch; }
.redactie-hero__title a { color: #fff; }
.redactie-hero__title a:hover { color: #fff; text-decoration: underline; }

/* ── Keuzeblokken "Waar wil je mee verder?" ─────────────────*/
.redactie-choice       { display: flex; flex-direction: column; }
.redactie-choice__body { padding: 26px 24px 28px; flex: 1; }
.redactie-choice__text { font-size: 15px; margin-top: 10px; }
.redactie-choice__link { margin-top: auto; padding-top: 20px; }

/* ── Artikelkaart in een raster ─────────────────────────────*/
.redactie-article__media  { border-radius: var(--fdv-r-xl); }
.redactie-article__kicker { display: block; margin-top: 18px; }
.redactie-article__title  { font-size: 22px; margin-top: 10px; }
.redactie-article__title a { color: var(--fdv-ink); }
.redactie-article__title a:hover { color: var(--fdv-accent); }
.redactie-article__text   { margin-top: 10px; line-height: 1.6; }
.redactie-article__meta   { margin-top: 12px; color: var(--fdv-muted-soft); }

/* ── Productblokje "Uit dit artikel" ────────────────────────*/
.redactie-product        { gap: 14px; padding: 14px; margin-top: 18px; }
.redactie-product__media { width: 64px; height: 64px; border-radius: var(--fdv-r-md); padding: 0; flex: 0 0 auto; }
.redactie-product__name  { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--fdv-ink); }
.redactie-product__price { font-size: 17px; }
.redactie-product__btn   { margin-left: auto; }

/* ── Specialisten ───────────────────────────────────────────*/
.redactie-expert__media { padding: 10px; }
.redactie-expert__body  { padding: 20px; }
.redactie-expert__name  { font-family: var(--fdv-font-display); font-weight: 600; }
.redactie-expert__quote { font-size: 14px; margin-top: 6px; }

/* ── Uitgelicht expert review ───────────────────────────────*/
.redactie-review__media  { min-height: 440px; padding: 14px; }
.redactie-review__title  { margin-top: 14px; }
.redactie-review__title a { color: var(--fdv-ink); }
.redactie-review__title a:hover { color: var(--fdv-accent); }
.redactie-review__text   { margin-top: 16px; line-height: 1.75; }
.redactie-review__facts  { gap: 20px; align-items: flex-start; margin-top: 24px; }
.redactie-review__score  { font-family: var(--fdv-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.redactie-review__strong { font-size: 15px; font-weight: 600; color: var(--fdv-ink); }
.redactie-review__product { gap: 16px; padding: 16px; margin-top: 28px; }
.redactie-review__product .redactie-product__media { width: 72px; height: 72px; }
.redactie-review__product .redactie-product__price { font-size: 20px; }
.redactie-review__actions { margin-top: 24px; }

/* ── Fotografieverhalen ─────────────────────────────────────*/
.redactie-story--big     { min-height: 460px; }
.redactie-story__title   { color: #fff; margin-top: 10px; max-width: 22ch; }
.redactie-story__title a { color: #fff; }
.redactie-story__title a:hover { color: #fff; text-decoration: underline; }
.redactie-story__meta    { color: var(--fdv-on-dark); margin-top: 10px; }
.redactie-story--small   { flex: 1; display: flex; flex-direction: column; }
.redactie-story__media   { height: 132px; flex: 0 0 auto; }
.redactie-story__body    { padding: 18px 20px 20px; }
.redactie-story__name    { font-family: var(--fdv-font-display); font-weight: 600; line-height: 1.3; }
.redactie-story__name a  { color: var(--fdv-ink); }
.redactie-story__name a:hover { color: var(--fdv-accent); }
.redactie-story__byline  { color: var(--fdv-muted-soft); }

/* ── Workshopagenda ─────────────────────────────────────────*/
.redactie-workshop         { gap: 24px; padding: 22px 24px; align-items: flex-start; }
.redactie-workshop__date   { flex: 0 0 92px; }
.redactie-workshop__day    { font-family: var(--fdv-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.redactie-workshop__main   { flex: 1 1 260px; }
.redactie-workshop__title  { font-size: 18px; font-weight: 600; color: var(--fdv-ink); }
.redactie-workshop__where  { flex: 1 1 200px; }
.redactie-workshop__actions { gap: 16px; flex: 1 1 220px; justify-content: flex-end; }
.redactie-workshop__price  { font-family: var(--fdv-font-display); font-size: 18px; font-weight: 700; }
.redactie-workshop--past   { opacity: 0.62; }

/* ── Adviesgesprek-paneel ───────────────────────────────────*/
.redactie-cta        { align-items: center; gap: 64px; }
.redactie-cta__text  { margin-top: 12px; line-height: 1.7; }

/* ── Artikeldetail ──────────────────────────────────────────*/
.redactie-detail__title  { margin-top: 14px; }
.redactie-detail__intro  { margin-top: 16px; }
.redactie-detail__meta   { margin-top: 18px; color: var(--fdv-muted-soft); }
.redactie-detail__hero   { margin-top: 32px; border-radius: var(--fdv-r-xl); }
.redactie-detail__aside  { margin-top: 32px; }
.redactie-detail__facts  { gap: 32px; margin-top: 24px; }

.redactie-body           { margin-top: 32px; }
.redactie-body__p        { margin-top: 18px; line-height: 1.8; }
.redactie-body__h        { margin-top: 40px; }
.redactie-body__list     { margin-top: 16px; display: grid; gap: 10px; }
.redactie-body__list li  { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.65; color: var(--fdv-ink-soft); }
.redactie-body__list li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--fdv-accent);
}
.redactie-body__quote {
  margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--fdv-accent);
  font-family: var(--fdv-font-display); font-size: 20px; line-height: 1.5; color: var(--fdv-ink);
}

.redactie-author__media { width: 84px; height: 84px; border-radius: 50%; padding: 0; flex: 0 0 auto; }
.redactie-author__name  { font-family: var(--fdv-font-display); font-size: 17px; font-weight: 600; color: var(--fdv-ink); }

/* ── Lege staten ────────────────────────────────────────────*/
.redactie-empty { padding: 28px 24px; text-align: center; }

/* ── Breekpunten ────────────────────────────────────────────*/
@media (max-width: 1024px) {
  .redactie-cta { gap: 32px; }
  .redactie-review__media { min-height: 300px; }
  .redactie-story--big { min-height: 380px; }
}
@media (max-width: 640px) {
  .redactie-hero { margin-top: 24px; }
  .redactie-article__title { font-size: 20px; }
  .redactie-workshop { gap: 14px; padding: 18px 16px; }
  .redactie-workshop__date { flex: 0 0 auto; }
  .redactie-workshop__actions { justify-content: flex-start; }
  .redactie-body__quote { font-size: 18px; }
  .redactie-detail__facts { gap: 20px; }
}

/* == modules/reviews/assets/css/reviews.css == */
/* ============================================================
   Beoordelingen — aanvulling op assets/css/main.css

   Alleen wat het designsysteem niet heeft: de sterrenbalk met halve
   sterren, de verdelingsbalkjes, het honeypot-veld en wat ruimte.
   Alles verder met bestaande fdv-klassen.

   Geen inline styles: dynamische breedtes lopen via een vaste set
   klassen (.rv-stars--45, .rv-bar__fill--80), zodat de strenge CSP
   niets hoeft toe te staan.
============================================================ */

/* ── Sterren ─────────────────────────────────────────────── */
/* Twee identieke rijen sterren over elkaar: de onderste in lijnkleur,
   de bovenste in accentkleur en afgeknipt op de score. letter-spacing
   staat hier bewust op 0, zodat de breedte een exacte veelvoud van een
   sterbreedte is en halve sterren precies kloppen. */
.rv-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.rv-stars__base { color: var(--fdv-line-strong); }
.rv-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: var(--rv-fill, 0%);
  color: var(--fdv-accent);
}

.rv-stars--0  { --rv-fill: 0%; }
.rv-stars--5  { --rv-fill: 10%; }
.rv-stars--10 { --rv-fill: 20%; }
.rv-stars--15 { --rv-fill: 30%; }
.rv-stars--20 { --rv-fill: 40%; }
.rv-stars--25 { --rv-fill: 50%; }
.rv-stars--30 { --rv-fill: 60%; }
.rv-stars--35 { --rv-fill: 70%; }
.rv-stars--40 { --rv-fill: 80%; }
.rv-stars--45 { --rv-fill: 90%; }
.rv-stars--50 { --rv-fill: 100%; }

/* ── Samenvatting en verdeling ───────────────────────────── */
.rv-summary__head { gap: 12px; align-items: baseline; }

.rv-dist { list-style: none; margin: 0; padding: 0; }
.rv-dist__row { gap: 12px; align-items: center; }
.rv-dist__label { width: 34px; flex: 0 0 auto; }
.rv-dist__count { width: 30px; flex: 0 0 auto; text-align: right; }

.rv-bar {
  flex: 1;
  height: 6px;
  min-width: 60px;
  border-radius: var(--fdv-r-pill);
  background: var(--fdv-line);
  position: relative;
  overflow: hidden;
  display: block;
}
.rv-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rv-w, 0%);
  background: var(--fdv-ink);
}
.rv-bar__fill--0   { --rv-w: 0%; }
.rv-bar__fill--5   { --rv-w: 5%; }
.rv-bar__fill--10  { --rv-w: 10%; }
.rv-bar__fill--15  { --rv-w: 15%; }
.rv-bar__fill--20  { --rv-w: 20%; }
.rv-bar__fill--25  { --rv-w: 25%; }
.rv-bar__fill--30  { --rv-w: 30%; }
.rv-bar__fill--35  { --rv-w: 35%; }
.rv-bar__fill--40  { --rv-w: 40%; }
.rv-bar__fill--45  { --rv-w: 45%; }
.rv-bar__fill--50  { --rv-w: 50%; }
.rv-bar__fill--55  { --rv-w: 55%; }
.rv-bar__fill--60  { --rv-w: 60%; }
.rv-bar__fill--65  { --rv-w: 65%; }
.rv-bar__fill--70  { --rv-w: 70%; }
.rv-bar__fill--75  { --rv-w: 75%; }
.rv-bar__fill--80  { --rv-w: 80%; }
.rv-bar__fill--85  { --rv-w: 85%; }
.rv-bar__fill--90  { --rv-w: 90%; }
.rv-bar__fill--95  { --rv-w: 95%; }
.rv-bar__fill--100 { --rv-w: 100%; }

/* ── Pagina en panelen ───────────────────────────────────── */
.rv-hero { margin-top: 40px; align-items: start; gap: 48px; }
.rv-hero__dist { max-width: 420px; }
.rv-filters { margin-top: 40px; gap: 10px; }
.rv-filters .fdv-chip[aria-current="true"] { border-color: var(--fdv-ink); color: var(--fdv-ink); font-weight: 600; }
.rv-grid { margin-top: 24px; align-items: start; }
.rv-empty { margin-top: 28px; }

.rv-panel__grid { gap: 56px; align-items: start; }
.rv-list { margin: 0; }
.rv-panel .rv-formwrap { margin-top: 40px; }

/* ── Kaart ───────────────────────────────────────────────── */
.rv-card__head { gap: 12px; }
.rv-card__title { margin: 0; }
.rv-card__body { white-space: normal; }
.rv-card__who { color: var(--fdv-muted); margin-top: auto; }
.rv-card__verified { margin-left: 6px; }
.rv-card__reply { background: var(--fdv-bg); }
.rv-card__reply-head { font-weight: 600; color: var(--fdv-ink); margin-bottom: 4px; }

/* ── Formulier ───────────────────────────────────────────── */
.rv-formsection { max-width: 760px; }
.rv-form__row { gap: 20px; }
.rv-score__options { gap: 18px; }
.rv-score__option { gap: 8px; }
.rv-form fieldset { border: 0; margin: 0; padding: 0; }
.rv-form legend { padding: 0; }

/* Honeypot: buiten beeld, buiten de tabvolgorde, nooit voor mensen.
   display:none wordt door sommige bots herkend — daarom weggeschoven. */
.rv-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .rv-hero { gap: 32px; }
  .rv-panel__grid { gap: 32px; }
}
@media (max-width: 640px) {
  .rv-hero__dist { max-width: none; }
  .rv-score__options { gap: 12px; }
}

/* == modules/vestigingen/assets/css/vestigingen.css == */
/* ==========================================================================
   Vestigingen — aanvullingen op assets/css/main.css

   De opmaak komt uit het designsysteem (fdv-*). Hier staat alleen wat het
   systeem nog niet heeft: de padding in de winkelkaart, de typografie van
   de winkelnaam en een paar kleine correcties op de weektabel. Alle
   variabelen komen uit main.css; deze module definieert er geen nieuwe.
   Klassen dragen het voorvoegsel ves- zodat ze nooit botsen met fdv-.
   ========================================================================== */

/* Paginakop */
.ves-head { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Winkelkaart (overzicht) — spiegelt .fdv-split--store uit het ontwerp
   -------------------------------------------------------------------------- */
.ves-card__body { padding: 26px 24px; }

.ves-card__title {
  font-family: var(--fdv-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}
.ves-card__title a { color: inherit; }
.ves-card__title a:hover { color: var(--fdv-accent); }

.ves-card__address { font-size: 15px; }
.ves-card__hours { color: var(--fdv-muted); }
.ves-card__reason { color: var(--fdv-muted-soft); }

.ves-card__actions {
  gap: 18px;
  margin-top: 8px;
  align-items: center;
}

/* De foto in de winkelkaart vult de hele mediakolom. */
.fdv-split--store .fdv-split__media img,
.ves-hero .fdv-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Detailpagina
   -------------------------------------------------------------------------- */
.ves-hero { margin-top: 18px; }

/* Weektabel en tabel met afwijkende dagen: compacter dan .fdv-spec,
   en de tijden rechts uitgelijnd zodat ze onder elkaar staan. */
.ves-week th,
.ves-week td { padding: 10px 0; }
.ves-week td { text-align: right; font-variant-numeric: tabular-nums; }
.ves-week tr:last-child th,
.ves-week tr:last-child td { border-bottom: 0; }
.ves-week__today th,
.ves-week__today td { color: var(--fdv-ink); font-weight: 600; }

/* "Wat je hier kunt" past in één kolom binnen de kaart. */
.ves-services { grid-template-columns: 1fr; gap: 12px; }

@media (max-width: 640px) {
  .ves-card__body { padding: 22px 20px 24px; }
  .ves-card__title { font-size: 20px; }
}