/*!
 * Pagayo Winkel (v2) — tokens en stijlregels van alle bouwstenen
 * Geen thema's en geen skins: alleen deze tokens, licht en donker.
 * Build: @pagayo/design 2.37.0
 */

/* @pagayo-winkel-v2:tokens begin */
.pw {
  color-scheme: light;
  --surface: #ffffff;
  --surface-warm: #f4f4f2;
  --surface-tint: #ecf0f3;
  --surface-sunk: #e9eaec;
  --media-dark: #3a3e44;
  --line: #e3e5e8;
  --line-strong: #868d97;
  --ink: #17191c;
  --ink-muted: #5b616b;
  --inverse: #17191c;
  --on-inverse: #ffffff;
  --on-inverse-muted: #9aa0a8;
  --scrim: rgba(23, 25, 28, 0.45);
  --brand: #2d4f6b;
  --on-brand: #ffffff;
  --action: #17191c;
  --on-action: #ffffff;
  --sale: #b42318;
  --success: #067647;
  --danger: #b42318;
  --font-sans: "Manrope", system-ui, "Segoe UI", "Noto Sans", sans-serif;
  --font-serif: "Fraunces", "Noto Serif", Georgia, serif;
  --font-grotesk: "Space Grotesk", system-ui, "Noto Sans", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-section: 96px;
  --space-section-compact: 56px;
  --radius-sharp: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-float: 0 12px 32px rgba(23, 25, 28, 0.14);
  --control-md: 48px;
  --control-sm: 44px;
  --header-h: 72px;
  --container: 1200px;
  --category-disc: 128px;
}
:root[data-theme="dark"] .pw {
  color-scheme: dark;
  --surface: #121417;
  --surface-warm: #1b1d21;
  --surface-tint: #18222c;
  --surface-sunk: #24272b;
  --media-dark: #2a2d31;
  --line: #2b2f35;
  --line-strong: #6b727c;
  --ink: #f2f3f5;
  --ink-muted: #a9afb8;
  --inverse: #0b0c0e;
  --on-inverse: #f2f3f5;
  --scrim: rgba(0, 0, 0, 0.6);
  --brand: #9cbcd8;
  --on-brand: #0f1a24;
  --action: #f2f3f5;
  --on-action: #121417;
  --sale: #f97066;
  --success: #47cd89;
  --danger: #f97066;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
}
/* @pagayo-winkel-v2:tokens end */

/* @pagayo-winkel-v2:bundle begin */
/* Pagayo Winkel · winkel-1 (in code: v2)
   De stijlregels van alle bouwstenen. Elke kleur, maat en hoek komt uit de tokens hierboven.
   Bron: uiux/winkel-v2/design-system/components/bundle.css; afwijkingen van de bron staan in README.md.
   De knoppen van Kora zijn attributen, op <html> of op de buitenste .pw:
   data-type (modern|classic|bold) · data-corners (sharp|soft|round) · data-density (airy|compact) · data-media (portrait|square|landscape|lang|eigen)
   data-strip (donker|merk) · data-tiles (tegel|cirkel) · data-fit (vullen|passen) · data-media-corners (volg|recht) · data-hero-fit (vullen|passen)
   data-sale-badge (aan|uit)
   Modus licht/donker: data-theme op <html>. */

.pw {
  --pw-display: var(--font-sans);
  --pw-display-weight: 800;
  --pw-display-track: -0.02em;
  --pw-r: var(--radius-md);
  --pw-r-card: var(--radius-lg);
  --pw-r-btn: var(--radius-md);
  --pw-pad: var(--space-section);
  --pw-gap: var(--space-6);
  --pw-media: 3 / 4;
  --pw-fit: cover;
  --pw-media-pos: absolute;
  --pw-focus: var(--ink);
  --pw-on-sale: var(--on-action);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.pw *, .pw *::before, .pw *::after { box-sizing: border-box; }
.pw h1, .pw h2, .pw h3, .pw p, .pw figure, .pw blockquote, .pw ul, .pw ol { margin: 0; }
/* Afbreken tussen woorden; alleen een te lang woord (12+ tekens, 6 ervoor, 5 erna) krijgt een afbreekstreepje,
   nooit een knip midden in het woord (456, C2). */
.pw h1, .pw h2, .pw h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 6 5; }
:where(.pw) a { color: inherit; text-decoration: none; }
.pw img { max-width: 100%; display: block; }

/* Knoppen van Kora */
:is(.pw[data-type="classic"], [data-type="classic"] .pw) { --pw-display: var(--font-serif); --pw-display-weight: 600; --pw-display-track: -0.01em; }
:is(.pw[data-type="bold"], [data-type="bold"] .pw) { --pw-display: var(--font-grotesk); --pw-display-weight: 700; --pw-display-track: -0.01em; }
:is(.pw[data-corners="sharp"], [data-corners="sharp"] .pw) { --pw-r: var(--radius-sharp); --pw-r-card: var(--radius-sharp); --pw-r-btn: var(--radius-sharp); }
:is(.pw[data-corners="round"], [data-corners="round"] .pw) { --pw-r: var(--radius-lg); --pw-r-card: 28px; --pw-r-btn: var(--radius-pill); }
:is(.pw[data-density="compact"], [data-density="compact"] .pw) { --pw-pad: var(--space-section-compact); --pw-gap: var(--space-5); }
:is(.pw[data-media="square"], [data-media="square"] .pw) { --pw-media: 1 / 1; }
:is(.pw[data-media="landscape"], [data-media="landscape"] .pw) { --pw-media: 4 / 3; }
:is(.pw[data-media="lang"], [data-media="lang"] .pw) { --pw-media: 2 / 5; }
/* Fotopassing (456): de winkel zet object-fit:var(--pw-fit,cover) op de productfoto; passen toont het hele beeld op de
   kleur van de pagina, zodat er geen gekleurde rand om de foto komt (490). */
:is(.pw[data-fit="passen"], [data-fit="passen"] .pw) { --pw-fit: contain; }
:is(.pw[data-fit="passen"], [data-fit="passen"] .pw) .pw-media--product { background: var(--surface); }
/* Eigen verhouding (490): de foto van de kaart en de hoofdfoto van de galerij op de volle breedte, met de hoogte van de
   foto zelf, zonder vlak erachter. De winkel zet position:var(--pw-media-pos,absolute) op de galerijfoto; hier ligt hij
   in de stroom. Duimpjes en lege vakken houden een staande verhouding. Kaarten in een rij lijnen bovenaan uit. */
:is(.pw[data-media="eigen"], [data-media="eigen"] .pw) { --pw-media: 3 / 4; }
:is(.pw[data-media="eigen"], [data-media="eigen"] .pw) :is(.pw-product-media, .pw-gallery) > .pw-media--product:has(> img) { --pw-media-pos: static; aspect-ratio: auto; background: transparent; }
:is(.pw[data-media="eigen"], [data-media="eigen"] .pw) :is(.pw-grid-products, .pw-grid-4) { align-items: start; }
/* Fotohoeken (490): recht haalt de ronde hoeken van de productfoto's (kaart, galerij, duimpjes); knoppen en velden volgen `hoeken`. */
:is(.pw[data-media-corners="recht"], [data-media-corners="recht"] .pw) { --pw-media-r: 0; }
:is(.pw[data-media-corners="recht"], [data-media-corners="recht"] .pw) :is(.pw-product-media, .pw-gallery) .pw-media--product { border-radius: var(--pw-media-r); }
:is(.pw[data-media-corners="recht"], [data-media-corners="recht"] .pw) .pw-thumb { border-radius: var(--pw-media-r); }

/* Opbouw */
.pw-wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); width: 100%; }
.pw-section { padding-block: var(--pw-pad); }
.pw-band-warm { background: var(--surface-warm); }
.pw-band-tint { background: var(--surface-tint); }
.pw-stack { display: flex; flex-direction: column; gap: var(--pw-gap); }
.pw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.pw-head > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pw-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pw-gap); }
.pw-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-gap); }
.pw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); align-items: center; }
.pw-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pw-gap); }

/* Tekst */
.pw-display-xl { font-family: var(--pw-display); font-weight: var(--pw-display-weight); letter-spacing: var(--pw-display-track); font-size: 56px; line-height: 1.05; }
.pw-display-lg { font-family: var(--pw-display); font-weight: var(--pw-display-weight); letter-spacing: var(--pw-display-track); font-size: 34px; line-height: 1.1; }
.pw-title { font-size: 22px; line-height: 1.25; font-weight: 700; }
.pw-eyebrow { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pw-lead { font-size: 19px; line-height: 1.5; }
.pw-muted { color: var(--ink-muted); }
.pw-small { font-size: 14px; line-height: 1.45; }
.pw-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.pw-price-was { color: var(--ink-muted); font-weight: 400; text-decoration: line-through; margin-inline-start: var(--space-1); font-variant-numeric: tabular-nums; }
.pw-price-sale { color: var(--sale); }
.pw-link { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); border-bottom: 1.5px solid currentColor; padding-block: 2px; }
.pw-link svg { flex-shrink: 0; }

/* Knop */
.pw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-md); padding-inline: 22px; border-radius: var(--pw-r-btn); border: 1.5px solid transparent; font: 600 15px/1.2 var(--font-sans); cursor: pointer; text-align: center; white-space: nowrap; }
.pw-btn--action { background: var(--action); color: var(--on-action); }
.pw-btn--brand { background: var(--brand); color: var(--on-brand); }
.pw-btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.pw-btn--light { background: var(--on-inverse); color: var(--inverse); }
.pw-btn--ghost-light { background: color-mix(in srgb, var(--on-inverse) 12%, transparent); color: var(--on-inverse); border-color: color-mix(in srgb, var(--on-inverse) 60%, transparent); }
.pw-btn--sm { min-height: var(--control-sm); padding-inline: 16px; font-size: 14px; }
.pw-btn--block { width: 100%; }
.pw-btn:focus-visible, .pw-icon-btn:focus-visible, .pw-chip:focus-visible, .pw a:focus-visible, .pw-input:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
/* Wat zelf de donkere rand van zijn vlak is, krijgt de ring aan de binnenkant: buiten het vlak staat hij op de pagina. */
.pw .pw-split-panel:focus-visible, .pw-announce .pw-icon-btn:focus-visible { outline-offset: -3px; }
.pw-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--control-sm); min-height: var(--control-sm); padding-inline: 10px; background: transparent; border: 0; color: inherit; font: 600 14px/1 var(--font-sans); cursor: pointer; }
.pw-icon-btn--round { border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface); padding-inline: 0; }
.pw-count { min-width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding-inline: 6px; }

/* Chip */
.pw-chip { display: inline-flex; align-items: center; min-height: var(--control-sm); padding-inline: 18px; border-radius: var(--pw-r-btn); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 15px/1 var(--font-sans); cursor: pointer; }
.pw-chip[aria-pressed="true"] { background: var(--surface-tint); border-color: var(--brand); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand); }
.pw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Badge */
.pw-badge { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; line-height: 1; background: var(--action); color: var(--on-action); }
.pw-badge--sale { background: var(--sale); color: var(--pw-on-sale); }
/* Salelabel (530): bij uit geen label; de actieprijs en de doorgestreepte prijs blijven. */
:is(.pw[data-sale-badge="uit"], [data-sale-badge="uit"] .pw) { --pw-sale-badge: none; }
:is(.pw[data-sale-badge="uit"], [data-sale-badge="uit"] .pw) .pw-badge--sale { display: var(--pw-sale-badge); }
.pw-badge--muted { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* Veld */
.pw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pw-field label { font-size: 16px; font-weight: 600; color: var(--ink-muted); }
.pw-input { min-height: var(--control-md); padding-inline: 14px; border: 1.5px solid var(--line-strong); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font-sans); width: 100%; }
.pw-input::placeholder { color: var(--ink-muted); }
.pw-inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pw-inline-form .pw-input { flex: 1 1 220px; }

/* Media */
.pw-media { background: var(--surface-sunk); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; text-align: center; padding: var(--space-3); border-radius: var(--pw-r-card); max-width: 100%; }
.pw-media--product { aspect-ratio: var(--pw-media); }
.pw-media--dark { --pw-focus: var(--on-inverse); background: var(--media-dark); color: var(--on-inverse-muted); }

/* Strook */
.pw-announce { --pw-focus: var(--pw-on-strip); background: var(--pw-strip); color: var(--pw-on-strip); font-size: 12px; font-weight: 600; }
.pw-announce .pw-wrap { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pw-announce-msgs { display: flex; gap: var(--space-8); flex-wrap: wrap; min-width: 0; }
.pw-announce-tools { display: flex; gap: var(--space-1); align-items: center; flex-shrink: 0; color: inherit; }

/* Kop */
.pw-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.pw-header-row { min-height: var(--header-h); display: flex; align-items: center; gap: var(--space-6); }
.pw-logo { font-family: var(--pw-display); font-weight: var(--pw-display-weight); letter-spacing: var(--pw-display-track); font-size: 22px; flex-shrink: 0; }
.pw-search { flex: 1 1 320px; max-width: 520px; display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding-inline: 14px; border-radius: var(--pw-r); background: var(--surface-warm); border: 1.5px solid transparent; color: var(--ink-muted); font-size: 15px; }
.pw-header-actions { display: flex; gap: 2px; margin-inline-start: auto; flex-shrink: 0; }
.pw-catnav { display: flex; gap: var(--space-1); align-items: center; min-height: 48px; overflow-x: auto; }
.pw-catnav a { min-height: var(--control-sm); display: inline-flex; align-items: center; padding-inline: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pw-catnav .pw-catnav-sale { color: var(--sale); }
.pw-catnav .pw-catnav-end { margin-inline-start: auto; font-weight: 500; color: var(--ink-muted); }

/* Hero */
.pw-hero { --pw-focus: var(--on-inverse); position: relative; background: var(--media-dark); color: var(--on-inverse); min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.pw-hero .pw-wrap { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-block: 72px; }
.pw-hero-copy { max-width: 600px; display: flex; flex-direction: column; gap: var(--space-5); }
.pw-hero-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-inline: 6%; color: var(--on-inverse-muted); font-size: 13px; }
.pw-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pw-hero-nav { position: absolute; inset-inline: 0; bottom: var(--space-6); display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-size: 12px; color: var(--on-inverse-muted); }
.pw-dots { display: flex; gap: 6px; }
.pw-dots span { width: 24px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--on-inverse) 35%, transparent); }
.pw-dots span[aria-current="true"] { background: var(--on-inverse); }
.pw-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: var(--space-6); }
.pw-hero-arrow--next { inset-inline-start: auto; inset-inline-end: var(--space-6); }
.pw-hero--brand { --pw-focus: var(--on-brand); background: var(--brand); color: var(--on-brand); }
.pw-hero--plain { --pw-focus: var(--ink); background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }

/* Hero-carrousel (home-v2 data-v2-dias; geen transition — purity BEWEGING) */
.pw-hero[data-v2-dias] { min-height: 520px; }
.pw-hero[data-v2-dias] [data-v2-dia] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}
.pw-hero[data-v2-dias] [data-v2-dia][aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.pw-hero[data-v2-dias] [data-v2-dia] .pw-wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
}
.pw-hero[data-v2-dias] [data-v2-dia] .pw-hero-media {
  z-index: 0;
  pointer-events: none;
}
.pw-hero[data-v2-dias] [data-v2-dia] .pw-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to inline-end,
    color-mix(in srgb, var(--media-dark) 72%, transparent) 0%,
    color-mix(in srgb, var(--media-dark) 40%, transparent) 50%,
    color-mix(in srgb, var(--media-dark) 22%, transparent) 100%
  );
  pointer-events: none;
}
.pw-hero[data-v2-dias] .pw-hero-arrow,
.pw-hero[data-v2-dias] .pw-hero-nav { z-index: 2; }
.pw-hero[data-v2-dias] .pw-hero-arrow { color: var(--ink); }
.pw-hero[data-v2-dias] .pw-dots button {
  inline-size: 24px;
  block-size: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--on-inverse) 35%, transparent);
  cursor: pointer;
}
.pw-hero[data-v2-dias] .pw-dots button[aria-current="true"] { background: var(--on-inverse); }

/* Heropassing (520, 521): `passen` toont op de telefoon alleen de hele afbeelding van de hero, in plaats van een bijgesneden vak.
   De winkel zet op de foto position:var(--pw-hero-pos,absolute), block-size:var(--pw-hero-h,100%) en
   object-fit:var(--pw-hero-fit,cover); hier gaat de foto de stroom in, zonder donkere laag. Geen pijlen, stippen en teller,
   en de tekst van de slide (eyebrow, kop, lead) blijft alleen voor schermlezers; knoppen van een slide blijven zichtbaar.
   Alleen de getoonde slide neemt ruimte in. Standaard (`vullen`): geen regel. */
@media (max-width: 760px) {
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) { --pw-hero-pos: static; --pw-hero-h: auto; --pw-hero-fit: contain; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero:has(.pw-hero-media) { flex-direction: column; align-items: stretch; min-height: 0; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero .pw-hero-media { position: static; display: block; padding-inline: 0; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero .pw-hero-media > :not(img) { display: none; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero .pw-hero-media::after { display: none; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero:has(.pw-hero-media) .pw-wrap { padding-block: 0; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero:has(.pw-hero-media) .pw-hero-copy:has(> .pw-hero-actions) { padding-block: var(--space-5); }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero:has(.pw-hero-media) .pw-hero-copy > :not(.pw-hero-actions) { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; opacity: 0; pointer-events: none; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero[data-v2-dias] [data-v2-dia] { position: static; flex-direction: column; align-items: stretch; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero[data-v2-dias] [data-v2-dia][aria-hidden="true"] { display: none; }
  :is(.pw[data-hero-fit="passen"], [data-hero-fit="passen"] .pw) .pw-hero[data-v2-dias] :is(.pw-hero-arrow, .pw-hero-nav) { display: none; }
}

/* Vertrouwen */
.pw-trust { border-bottom: 1px solid var(--line); }
.pw-trust .pw-grid-4 { padding-block: var(--space-6); gap: var(--space-6); }
.pw-trust-item { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.pw-trust-item strong { display: block; font-size: 14px; font-weight: 700; }
.pw-trust-item span { font-size: 13px; color: var(--ink-muted); }
.pw-trust-item svg { flex-shrink: 0; margin-top: 2px; }

/* Categorie */
.pw-cat { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; font-size: 15px; font-weight: 600; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 6 5; }
.pw-cat .pw-media { width: 100%; max-width: var(--category-disc); aspect-ratio: 1 / 1; border-radius: var(--radius-pill); }

/* Productkaart */
.pw-product { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; position: relative; }
.pw-product-media { position: relative; }
.pw-product-badges { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); display: flex; gap: var(--space-1); }
.pw-product-fav { position: absolute; top: var(--space-2); inset-inline-end: var(--space-2); }
.pw-product-fav .pw-icon-btn { background: var(--surface); border-radius: var(--radius-pill); min-width: 40px; min-height: 40px; }
.pw-product-body { display: flex; flex-direction: column; gap: 2px; }
.pw-product-brand { font-size: 12px; font-weight: 700; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pw-product-name { font-size: 15px; font-weight: 600; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 6 5; }
.pw-product-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: 13px; color: var(--ink-muted); }
.pw-swatches { display: flex; gap: 4px; }
.pw-swatches > span { width: 14px; height: 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); }
.pw-product--soldout .pw-media { opacity: 0.55; }

/* Gesplitst */
.pw-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-gap); }
.pw-split-panel { --pw-focus: var(--on-inverse); position: relative; min-height: 440px; border-radius: var(--pw-r-card); overflow: hidden; display: flex; align-items: flex-end; background: var(--media-dark); color: var(--on-inverse); }
.pw-split-panel .pw-split-copy { position: relative; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.pw-split-panel .pw-media { position: absolute; inset: 0; border-radius: 0; background: transparent; color: var(--on-inverse-muted); align-items: flex-start; padding-top: 30%; }

/* Actie */
.pw-promo { --pw-focus: var(--on-brand); background: var(--brand); color: var(--on-brand); }
.pw-promo .pw-wrap { padding-block: var(--space-8); display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.pw-promo strong { font-family: var(--pw-display); font-weight: var(--pw-display-weight); letter-spacing: var(--pw-display-track); font-size: 26px; line-height: 1.15; display: block; }

/* Kaart */
.pw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--pw-r-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pw-card--feature { border: 2px solid var(--brand); }

/* Hulp bij kiezen */
.pw-quiz { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-12); align-items: center; }
.pw-steps { display: flex; gap: 6px; }
.pw-steps span { width: 32px; height: 4px; border-radius: 2px; background: var(--line); }
.pw-steps span[aria-current="true"] { background: var(--brand); }
.pw-quiz-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* Shop de look */
.pw-look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pw-gap); }
.pw-look-list { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-look-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--pw-r-card); }
.pw-look-item .pw-media { aspect-ratio: 3 / 4; border-radius: var(--pw-r); padding: 0; font-size: 11px; }

/* Merken */
.pw-brands { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.pw-brands-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.pw-brand-tile { min-height: 72px; border: 1px solid var(--line); border-radius: var(--pw-r); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-muted); text-align: center; padding: var(--space-2); }

/* Reacties */
.pw-review { background: var(--surface); border-radius: var(--pw-r-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pw-stars { display: flex; gap: 2px; color: var(--ink); }
.pw-review-who { font-size: 13px; color: var(--ink-muted); }

/* Betalen */
.pw-pay { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; padding-block: var(--space-6); font-size: 13px; }
.pw-pay-list { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pw-pay-tag { display: inline-flex; align-items: center; height: 28px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; background: var(--surface); }

/* Plannen en afspraken */
.pw-plan-price { font-size: 15px; color: var(--ink-muted); }
.pw-plan-price strong { font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pw-checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; }
.pw-checks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.pw-checks svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.pw-appt { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pw-appt .pw-media { aspect-ratio: 4 / 3; }
.pw-appt-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.pw-service { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.pw-service strong { font-size: 16px; font-weight: 700; }

/* Berichten en klantfoto's */
.pw-article { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pw-article .pw-media { aspect-ratio: 4 / 3; }
.pw-article-meta { font-size: 13px; color: var(--ink-muted); }
.pw-ugc .pw-media { aspect-ratio: 1 / 1; }

/* Vragen */
.pw-faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pw-faq details { border-bottom: 1px solid var(--line); }
.pw-faq summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-weight: 600; }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-muted); flex: none; }
.pw-faq details[open] summary::after { content: "–"; }
.pw-faq summary:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-faq summary > span { flex: 1 1 auto; min-inline-size: 0; padding-block: var(--space-3); }
.pw-faq details p { padding-bottom: var(--space-4); color: var(--ink-muted); }

/* Veelgestelde vragen, de pagina (pw-fq; bron uiux/winkel-v2/faq/faq.css). De lijst zelf is pw-faq. */
.pw-fq { max-inline-size: 720px; margin-inline: auto; padding-block: var(--space-6) var(--space-12); }
.pw-fq-head { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-8); }
.pw-fq-head h1, .pw-fq-head p { margin: 0; }
.pw-fq a:focus-visible, .pw-fq summary:focus-visible, .pw-fq-ask a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-fq .pw-faq details > p { margin: 0; padding-block: var(--space-4) var(--space-3); }
.pw-fq .pw-faq details > p + p { padding-block-start: 0; }
.pw-fq .pw-faq details > p:last-child { padding-block-end: var(--space-5); }
.pw-fq .pw-faq a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pw-fq .pw-faq .pw-link { text-decoration: none; }
.pw-fq-ask { padding-block: var(--space-12); }
.pw-fq-ask-in { max-inline-size: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.pw-fq-ask-in h2, .pw-fq-ask-in p { margin: 0; }

/* Kom langs */
.pw-hours { border-collapse: collapse; font-size: 15px; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums; }
.pw-hours td { padding-block: 8px; border-bottom: 1px solid var(--line); }
.pw-hours td:last-child { text-align: end; }
.pw-open { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 700; color: var(--success); }
.pw-open::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }

/* Voet (v2, opdracht 410) — opbouw: nieuwsbrief-rij, main (naam+contact | kolommen), onderkant. Voorvoegsel pw-vt-. */
.pw-footer { --pw-focus: var(--on-inverse); --pw-vt-hair: color-mix(in srgb, var(--on-inverse) 14%, transparent); background: var(--inverse); color: var(--on-inverse); }
.pw-footer .pw-wrap { padding-block: 56px 32px; display: flex; flex-direction: column; gap: var(--space-8); }
.pw-footer a { text-underline-offset: 3px; }
.pw-footer a:hover { text-decoration: underline; }
.pw-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.pw-footer li a { min-height: var(--control-sm); display: inline-flex; align-items: center; font-size: 16px; color: var(--on-inverse-muted); }
.pw-footer .pw-input { background: transparent; color: var(--on-inverse); border-color: var(--on-inverse-muted); }
.pw-footer .pw-input::placeholder { color: var(--on-inverse-muted); }
.pw-footer .pw-pay-tag { background: transparent; border-color: color-mix(in srgb, var(--on-inverse) 24%, transparent); color: var(--on-inverse); }
.pw-vt-muted { color: var(--on-inverse-muted); }
.pw-vt-ic { flex: none; }

/* Nieuwsbrief-rij */
.pw-vt-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding-block-end: var(--space-8); border-block-end: 1px solid var(--pw-vt-hair); }
.pw-vt-news-copy { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pw-vt-news-copy p { color: var(--on-inverse-muted); }
.pw-vt-news-form { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pw-vt-news-row { display: flex; gap: var(--space-2); }
.pw-vt-news-row .pw-input { flex: 1 1 auto; width: auto; min-width: 0; }
.pw-vt-news-row .pw-btn { flex: none; }
.pw-vt-note { color: var(--on-inverse-muted); }
.pw-vt-status { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--on-inverse); font-weight: 600; }
.pw-vt-status:empty { display: none; }
.pw-vt-status .pw-vt-ic { margin-block-start: 2px; }
.pw-vt-news-form[data-state="fout"] .pw-input { border-color: var(--on-inverse); box-shadow: inset 0 0 0 1px var(--on-inverse); }
.pw-vt-news-form[data-state="ok"] .pw-vt-news-row, .pw-vt-news-form[data-state="ok"] .pw-vt-note { display: none; }

/* Naam, contact, kolommen */
.pw-vt-main { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); }
.pw-vt-id { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.pw-vt-id .pw-logo { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--control-sm); color: var(--on-inverse); }
.pw-vt-contact { font-style: normal; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pw-vt-open { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--on-inverse); }
.pw-vt-open a { display: inline-flex; align-items: center; min-height: var(--control-sm); color: inherit; }
.pw-vt-dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: var(--radius-pill); background: var(--on-inverse); }
.pw-vt-dot--closed { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-inverse); }
.pw-vt-place { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--on-inverse-muted); }
.pw-footer .pw-vt-ways { list-style: none; padding: 0; display: flex; flex-direction: column; }
.pw-footer .pw-vt-ways a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-sm); font-size: 16px; color: var(--on-inverse); overflow-wrap: anywhere; }
.pw-footer .pw-vt-social { list-style: none; padding: 0; flex-direction: row; flex-wrap: wrap; column-gap: var(--space-6); }
.pw-footer .pw-vt-social a { min-height: var(--control-sm); font-size: 16px; font-weight: 600; color: var(--on-inverse); text-decoration: underline; }
.pw-vt-pay { font-size: 14px; line-height: 1.45; color: var(--on-inverse-muted); }
.pw-vt-pay b { font-weight: 600; color: var(--on-inverse); }
.pw-vt-cols { --pw-vt-n: 4; display: grid; grid-template-columns: repeat(var(--pw-vt-n), minmax(0, 200px)); justify-content: start; align-content: start; gap: var(--space-6); }
.pw-footer .pw-vt-cols h3 { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none; margin-block-end: var(--space-2); color: var(--on-inverse); }
.pw-footer .pw-vt-cols li a { min-height: var(--control-sm); font-size: 16px; }
.pw-vt-cols a:hover, .pw-vt-legal a:hover { color: var(--on-inverse); }

/* Onderkant */
.pw-vt-base { display: flex; flex-direction: column; gap: var(--space-2); border-block-start: 1px solid var(--pw-vt-hair); padding-block-start: var(--space-6); font-size: 14px; line-height: 1.45; color: var(--on-inverse-muted); }
.pw-vt-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-6); }
.pw-vt-lead { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-6); min-width: 0; }
.pw-footer .pw-vt-legal { list-style: none; padding: 0; flex-direction: row; flex-wrap: wrap; column-gap: var(--space-6); }
.pw-footer .pw-vt-legal a, .pw-vt-fine a { display: inline-flex; align-items: center; min-height: var(--control-sm); font-size: 14px; color: var(--on-inverse-muted); text-decoration: underline; }
.pw-footer .pw-vt-lang { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-footer .pw-vt-lang .pw-chip { background: transparent; color: var(--on-inverse); border-color: var(--on-inverse-muted); min-height: var(--control-sm); font-size: 14px; }
.pw-footer .pw-chip[aria-current="true"] { background: color-mix(in srgb, var(--on-inverse) 14%, transparent); border-color: var(--on-inverse); font-weight: 700; }
.pw-vt-fine { min-block-size: 0; }

/* Telefoon */
@media (max-width: 760px) {
  .pw-wrap { padding-inline: var(--space-4); }
  .pw-section { padding-block: var(--space-section-compact); }
  .pw-display-xl { font-size: 34px; }
  .pw-display-lg { font-size: 26px; }
  .pw-grid-4, .pw-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-grid-3, .pw-grid-2, .pw-split, .pw-quiz, .pw-look { grid-template-columns: minmax(0, 1fr); }
  .pw-vt-news { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .pw-vt-news-row { flex-direction: column; }
  .pw-vt-news-row .pw-btn { inline-size: 100%; }
  .pw-vt-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .pw-vt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
  .pw-vt-line { flex-direction: column; align-items: flex-start; }
  .pw-search { order: 3; flex-basis: 100%; max-width: none; }
  .pw-header-row { flex-wrap: wrap; padding-block: var(--space-2); }
  .pw-hide-phone { display: none !important; }
  .pw-brands-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-hero { min-height: 0; }
  .pw-hero[data-v2-dias] { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { .pw * { transition: none !important; animation: none !important; } }
/* Categoriepagina (7 oktober 2026): Breadcrumbs, CategoryHeader, SubcategoryNav, ProductGrid, ListToolbar,
   ActiveFilters, FilterPanel, FilterSheet, LoadMore, EmptyResult. Kop en voet: Header en Footer hierboven. */

/* Alleen voor schermlezers (bestaat in de winkel als SR_ONLY; nog geen klasse in de bundel) */
.pw-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Breadcrumbs */
.pw-crumbs { padding-block-start: var(--space-4); }
.pw-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.pw-crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.pw-crumbs a { min-block-size: var(--control-sm); display: inline-flex; align-items: center; }
.pw-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.pw-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* CategoryHeader */
.pw-cat-head { padding-block: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.pw-cat-intro { max-inline-size: 680px; color: var(--ink-muted); }
.pw-cat-intro a { color: var(--ink); text-decoration: underline; }

/* SubcategoryNav: Chips als links */
.pw-subcats { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pw-subcats .pw-chip[aria-current="page"] { background: var(--surface-tint); border-color: var(--brand); font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand); }

/* Lijst: filters naast de producten */
.pw-plp { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-block-end: var(--pw-pad); }
.pw-plp--nofilters { grid-template-columns: minmax(0, 1fr); }
.pw-plp-main { display: flex; flex-direction: column; gap: var(--space-6); min-inline-size: 0; }

/* ProductGrid: drie naast de filters, vier zonder, twee op de telefoon */
.pw-grid-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-gap); }
.pw-plp--nofilters .pw-grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ListToolbar */
.pw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); background: var(--surface); }
.pw-toolbar-count { font-size: 15px; color: var(--ink-muted); }
.pw-toolbar-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pw-toolbar-end { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pw-sort { display: flex; align-items: center; gap: var(--space-2); }
.pw-select-wrap { position: relative; display: inline-flex; }
.pw-select { appearance: none; min-block-size: var(--control-sm); padding-inline: var(--space-4) var(--space-12); border: 1.5px solid var(--line-strong); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; }
.pw-select-wrap svg { position: absolute; inset-inline-end: var(--space-4); inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; }
.pw-filter-open { display: none; }

/* ActiveFilters */
.pw-active { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pw-chip--remove { gap: var(--space-2); padding-inline: var(--space-4) var(--space-3); background: var(--surface-tint); border-color: var(--brand); font-weight: 600; }
.pw-clear { font: 600 14px/1 var(--font-sans); background: none; border: 0; color: var(--ink); text-decoration: underline; min-block-size: var(--control-sm); padding-inline: var(--space-2); cursor: pointer; }

/* FilterPanel: groepen als <details>, zoals Faq */
.pw-filters { display: flex; flex-direction: column; border-block-start: 1px solid var(--line); }
.pw-filters h2 { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding-block: var(--space-4) var(--space-2); }
.pw-fgroup { border-block-end: 1px solid var(--line); }
.pw-fgroup summary { list-style: none; cursor: pointer; min-block-size: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: 700; }
.pw-fgroup summary::-webkit-details-marker { display: none; }
.pw-fgroup summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-muted); }
.pw-fgroup[open] summary::after { content: "–"; }
.pw-fgroup-count { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.pw-fgroup-body { padding-block-end: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.pw-fgroup fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.pw-check { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-sm); font-size: 15px; cursor: pointer; }
.pw-check input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.pw-check .pw-swatch { inline-size: 20px; block-size: 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); flex-shrink: 0; }
.pw-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.pw-sizes .pw-chip { justify-content: center; padding-inline: 0; }
.pw-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.pw-range .pw-input { font-variant-numeric: tabular-nums; }
.pw-range-hint { font-size: 14px; color: var(--ink-muted); margin-block-start: var(--space-2); }
.pw-showmore { align-self: flex-start; font: 600 14px/1 var(--font-sans); background: none; border: 0; color: var(--ink); text-decoration: underline; min-block-size: var(--control-sm); padding: 0; cursor: pointer; }

/* Focus voor de nieuwe bedieningselementen: de focusring van de bundel */
.pw-select:focus-visible, .pw-clear:focus-visible, .pw-showmore:focus-visible, .pw-fgroup summary:focus-visible, .pw-check input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* LoadMore */
.pw-loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-block-start: var(--space-6); }
.pw-loadmore p { font-size: 15px; color: var(--ink-muted); }
.pw-progress { inline-size: 240px; block-size: var(--space-1); border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.pw-progress span { display: block; block-size: 100%; background: var(--ink); border-radius: inherit; }

/* EmptyResult */
.pw-empty { border: 1px solid var(--line); border-radius: var(--pw-r-card); padding: var(--space-12) var(--space-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.pw-empty p { max-inline-size: 460px; color: var(--ink-muted); }

/* Omschrijving onder de producten (tekstdeel op een warme band) */
.pw-cat-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.pw-cat-about .pw-prose { display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink-muted); }

/* FilterSheet: het filterpaneel als venster over het hele telefoonscherm */
.pw-sheet { display: flex; flex-direction: column; background: var(--surface); color: var(--ink); block-size: 100dvh; }
.pw-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--header-h); padding-inline: var(--space-4); border-block-end: 1px solid var(--line); }
.pw-sheet-body { flex: 1; min-block-size: 0; overflow-y: auto; padding-inline: var(--space-4); }
.pw-sheet-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border-block-start: 1px solid var(--line); box-shadow: var(--shadow-float); }

/* Telefoon */
@media (max-width: 760px) {
  .pw-plp { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-plp-aside { display: none; }
  .pw-filter-open { display: inline-flex; }
  .pw-cat-head { padding-block: var(--space-4) var(--space-5); }
  .pw-subcats { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scrollbar-width: none; }
  .pw-subcats .pw-chip { flex-shrink: 0; }
  .pw-grid-products, .pw-plp--nofilters .pw-grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .pw-toolbar { position: sticky; inset-block-start: 0; z-index: 2; padding-block-start: var(--space-3); }
  .pw-cat-about { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-crumbs li:not(:nth-last-child(-n+2)) { display: none; }
  .pw-crumbs li:nth-last-child(2)::before { content: none; }
}

/* ——— Zoeken (13 oktober 2026): veld, suggesties, melding, hulp, laden ———
   De lijst, werkbalk, filters en het raster komen uit de categoriepagina hierboven. */

/* Aantal per filterwaarde */
.pw-zk-n { margin-inline-start: auto; font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-subcats .pw-zk-n { margin-inline-start: var(--space-2); }

/* Kop van de zoekpagina: de zoekterm staat in de titel */
.pw-zk-head { padding-block: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pw-zk-head h1, .pw-zk-head p { margin: 0; }
.pw-zk-head p { color: var(--ink-muted); }
.pw-zk-label { color: var(--ink-muted); }

/* SearchField: echt invoerveld in de kop, met de zoekterm erin en "Wis zoekterm" */
.pw-zk-field { position: relative; }
.pw-zk-field input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: inherit; min-block-size: var(--control-sm); outline: 0; }
.pw-zk-field input::placeholder { color: var(--ink-muted); }
.pw-zk-field input::-webkit-search-cancel-button { appearance: none; }
.pw-zk-field:focus-within { background: var(--surface); border-color: var(--line-strong); outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-zk-x { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-sm); block-size: var(--control-sm); margin-inline-end: calc(-1 * var(--space-3)); border: 0; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--pw-r); }
.pw-zk-x:hover { color: var(--ink); }
.pw-zk-x:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }

/* SearchSuggest: categorieën en producten tijdens het typen, "Toon alle" onderaan; de pagina erachter is gedimd */
.pw-zk-dim { position: fixed; inset: 0; z-index: 39; background: var(--scrim); }
.pw-zk-open .pw-header { position: relative; z-index: 41; }
.pw-zk-suggest { position: absolute; z-index: 40; inset-inline: 0; inset-block-start: calc(100% + var(--space-2)); display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--pw-r-card); box-shadow: var(--shadow-float); }
.pw-zk-suggest ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pw-zk-suggest h2 { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) var(--space-3) var(--space-1); margin: 0; }
.pw-zk-opt { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-sm); padding: var(--space-2) var(--space-3); border-radius: var(--pw-r); color: var(--ink); cursor: pointer; }
.pw-zk-opt:hover, .pw-zk-opt[aria-selected="true"] { background: var(--surface-tint); }
.pw-zk-opt[aria-selected="true"] { outline: 3px solid var(--pw-focus); outline-offset: -3px; }
.pw-zk-opt b { font-weight: 800; }
.pw-zk-opt .pw-price { margin-inline-start: auto; }
.pw-zk-opt svg { flex-shrink: 0; color: var(--ink-muted); }
.pw-zk-thumb { inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--pw-r); background: var(--surface-sunk); overflow: hidden; flex-shrink: 0; }
.pw-zk-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pw-zk-all { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--control-md); margin-block-start: var(--space-1); padding-inline: var(--space-3); border-block-start: 1px solid var(--line); font-weight: 700; color: var(--ink); cursor: pointer; }
.pw-zk-all:hover { text-decoration: underline; }
.pw-zk-none { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.pw-zk-none p { margin: 0; }
.pw-zk-none p + p { color: var(--ink-muted); }
.pw-zk-suggest a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: -3px; }

/* SearchNotice: melding bij een aangepaste zoekterm */
.pw-zk-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface-tint); }
.pw-zk-notice[hidden] { display: none; }
.pw-zk-notice svg { flex-shrink: 0; color: var(--brand); margin-block-start: 2px; }
.pw-zk-notice p { margin: 0; }
.pw-zk-notice a { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* Geen resultaten: eerst de wegen verder, de tips zijn één zin; HelpBlock */
.pw-zk-sec { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-6) var(--space-2); }
.pw-zk-sec h2 { margin: 0; }
.pw-zk-help { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-zk-help h2, .pw-zk-help p { margin: 0; }
.pw-zk-help a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.pw-zk-page { padding-block-end: var(--pw-pad); display: flex; flex-direction: column; gap: var(--space-6); }

/* SkeletonCard: vlakken op de plek van de kaarten, zonder beweging */
.pw-zk-skel { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-zk-skel .pw-media { background: var(--surface-sunk); }
.pw-zk-skel i { display: block; block-size: var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunk); }
.pw-zk-skel i:nth-of-type(1) { inline-size: 40%; }
.pw-zk-skel i:nth-of-type(2) { inline-size: 80%; }
.pw-zk-skel i:nth-of-type(3) { inline-size: 30%; }

/* Telefoon */
@media (max-width: 760px) {
  .pw-zk-head { padding-block: var(--space-4); }
  .pw-zk-help { padding: var(--space-4); }
}


/* ——— Zoeken inhoud (395): ResultTabs, ContentHit, SearchSuggest-soort ——— */

/* ResultTabs: soort resultaat als echte links; alleen soorten met treffers */
.pw-zk-tabs { display: flex; gap: var(--space-6); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.pw-zk-tabs::-webkit-scrollbar { display: none; }
.pw-zk-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 48px; padding-block: var(--space-2); margin-block-end: -1px; border-block-end: 2px solid transparent; font-weight: 600; color: var(--ink-muted); white-space: nowrap; scroll-snap-align: center; }
.pw-zk-tabs a:hover { color: var(--ink); }
.pw-zk-tabs a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--ink); }
.pw-zk-tabs a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: -3px; }
.pw-zk-tabs .pw-zk-n { margin-inline-start: 0; }

.pw-zk-subnav { padding-block-start: var(--space-5); }

/* Overzicht Alles: kopregel per soort met "Toon alle N" */
.pw-zk-all-page { padding-block-end: var(--pw-pad); display: flex; flex-direction: column; gap: var(--space-2); }
.pw-zk-cats { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-block-start: var(--space-5); }
.pw-zk-cats .pw-subcats { flex-wrap: wrap; overflow: visible; }
.pw-zk-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pw-zk-sec-head h2 .pw-zk-n { margin-inline-start: var(--space-2); }
.pw-zk-line { border-block-start: 1px solid var(--line); margin-block-start: var(--space-4); padding-block-start: var(--space-6); }
.pw-zk-countbar { border-block-end: 0; padding-block-start: var(--space-5); padding-block-end: var(--space-2); position: static; }

/* ContentHit: blog (foto) en pagina (tekst) */
.pw-zk-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pw-zk-hits li { border-block-start: 1px solid var(--line); }
.pw-zk-hits li:first-child { border-block-start: 0; }
.pw-zk-hit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; padding-block: var(--space-4); color: var(--ink); }
.pw-zk-hit--text { grid-template-columns: minmax(0, 1fr); }
.pw-zk-hit-media { inline-size: 160px; aspect-ratio: 4 / 3; border-radius: var(--pw-r); font-size: 12px; }
.pw-zk-hit-body { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.pw-zk-meta { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-zk-meta svg { flex-shrink: 0; }
.pw-zk-hit h3 { margin: 0; }
.pw-zk-hit p { margin: 0; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pw-zk-hit b { font-weight: 800; color: var(--ink); }
.pw-zk-hit:hover h3 { text-decoration: underline; }
.pw-zk-hit:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: -3px; }

/* SearchSuggest: soort rechts; placeholder-thumb voor blog/pagina */
.pw-zk-type { margin-inline-start: auto; font-size: 14px; color: var(--ink-muted); }
.pw-zk-thumb--ph { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.pw-zk-suggest { max-block-size: calc(100dvh - var(--header-h) - var(--space-8)); overflow-y: auto; }

.pw-zk-noticewrap { padding-block-start: var(--space-4); }

@media (max-width: 760px) {
  .pw-zk-tabs { gap: var(--space-5); margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .pw-zk-hit { gap: var(--space-4); }
  .pw-zk-hit-media { inline-size: 104px; }
  .pw-zk-cats { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
}

/* ——— Koopflow (product / wagen / checkout / bedankt) ——— */

/* Productpagina */
.pw-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-6) var(--pw-pad);
}
.pw-gallery {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-inline-size: 0;
}
.pw-gallery .pw-media,
.pw-thumb .pw-media,
.pw-cart-item .pw-media,
.pw-xsell-item .pw-media,
.pw-sum-item .pw-media {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.pw-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pw-thumb {
  inline-size: 100%;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--pw-r);
  background: transparent;
  cursor: pointer;
  min-block-size: var(--control-sm);
}
.pw-thumb[aria-current="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.pw-thumb .pw-media { inline-size: 100%; border-radius: calc(var(--pw-r) - 2px); }
/* Eén foto: geen duimpjes, de foto vult de hele kolom (ook op de telefoon). */
.pw-gallery.pw-gallery--single { grid-template-columns: minmax(0, 1fr); }
.pw-buy { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
.pw-buy-price { font-size: 22px; line-height: 1.25; }
.pw-choice { display: flex; flex-direction: column; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pw-choice-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); inline-size: 100%; }
.pw-choice-head .pw-link { min-block-size: 0; padding-block: 0; }
.pw-buy .pw-chip {
  min-block-size: var(--control-sm);
  padding-inline: var(--space-3);
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 500;
}
.pw-buy .pw-chip[aria-pressed="true"] {
  background: transparent;
  border-color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 0 var(--ink);
}
.pw-buy .pw-chips[aria-label="Maat"] .pw-chip,
.pw-buy .pw-chips[data-choice="size"] .pw-chip {
  min-inline-size: 44px;
  padding-inline: var(--space-2);
  justify-content: center;
}
.pw-buy .pw-swatch-name span { inline-size: 12px; block-size: 12px; }
.pw-swatch-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-swatch-name span {
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.pw-buy-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-specs { inline-size: 100%; border-collapse: collapse; }
.pw-specs th,
.pw-specs td {
  text-align: start;
  font-weight: 400;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
.pw-specs th { color: var(--ink-muted); font-weight: 600; inline-size: 40%; }
.pw-review { border: 1px solid var(--line); }

/* Productpagina: koopkolom van de koop-engine in de opmaak van de mock.
   Alleen binnen .pw-buy, zodat winkelwagen en kassa (die pw-btn en pw-chip delen) niet meeveranderen.
   De engine en haar markup blijven; hier alleen stijl. */
.pw-buy .product-detail-purchase-stack,
.pw-buy .product-purchase-region,
.pw-buy .product-purchase-panel,
.pw-buy .product-purchase-panel__choices,
.pw-buy .product-variant-selector { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
/* De prijs staat bovenaan (.pw-buy-price) en volgt de keuze. Bij bundel en cadeaubon rekent de engine
   het bedrag zelf uit: dan blijft haar prijs zichtbaar (--engine-price) en wijkt de regel bovenaan. */
.pw-buy .product-purchase-panel__header,
.pw-buy .pw-pdp-buy-interactive:not(.pw-pdp-buy-interactive--engine-price) .product-purchase-footer__price-stock .product-purchase-price,
.pw-buy .product-info .product-brand { display: none; }
.pw-buy .product-variant-field { display: flex; flex-direction: column; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pw-buy .product-variant-label { font-size: 15px; color: var(--ink); }
.pw-buy .product-variant-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-buy .product-variant-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--control-sm); min-inline-size: var(--control-sm); padding-inline: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--pw-r-btn); background: transparent;
  color: var(--ink); font: 500 15px/1 var(--font-sans); cursor: pointer;
}
.pw-buy .product-variant-choice.is-selected,
.pw-buy .product-variant-choice[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }
.pw-buy .product-variant-choice:disabled,
.pw-buy .product-variant-choice[aria-disabled="true"] { color: var(--ink-muted); text-decoration: line-through; cursor: not-allowed; }
.pw-buy .product-variant-choice.is-out-of-stock:disabled {
  border-style: dashed;
  text-decoration: line-through;
}
.pw-buy .pw-swatches.product-variant-choices {
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pw-buy .product-variant-choice:focus-visible,
.pw-buy .product-variant-select:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-buy .product-variant-choice__meta { font-size: 12px; font-weight: 500; color: var(--ink-muted); text-decoration: none; }
.pw-buy .product-variant-select {
  min-block-size: var(--control-md); padding-inline: var(--space-3); border: 1px solid var(--line-strong);
  border-radius: var(--pw-r-btn); background: var(--surface); color: var(--ink); font: 500 15px/1.2 var(--font-sans);
}
.pw-buy .product-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 700; }
.pw-buy .product-badge::before { content: ""; inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-pill); background: currentColor; }
.pw-buy .product-badge--in-stock { color: var(--success); }
.pw-buy .product-badge--low-stock,
.pw-buy .product-badge--backorder { color: var(--ink); }
.pw-buy .product-badge--out-of-stock { color: var(--sale); }
.pw-buy .product-purchase-footer { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-buy .product-purchase-footer__quantity { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pw-buy .product-purchase-footer__quantity-label { font-size: 15px; }
.pw-buy .add-to-cart-quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--pw-r); }
.pw-buy .add-to-cart-quantity-btn {
  display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-sm); block-size: var(--control-sm);
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.pw-buy .add-to-cart-quantity-btn:disabled { color: var(--ink-muted); cursor: not-allowed; }
.pw-buy .add-to-cart-quantity-value { min-inline-size: var(--control-sm); text-align: center; font-weight: 600; }
.pw-buy .product-purchase-footer__submit .add-to-cart { display: block; }
.pw-buy .btn--purchase,
.pw-buy .add-to-cart-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); inline-size: 100%;
  min-block-size: var(--control-md); padding-inline: var(--space-6); border: 1.5px solid transparent;
  border-radius: var(--pw-r-btn); background: var(--action); color: var(--on-action); font: 600 16px/1 var(--font-sans); cursor: pointer;
  /* De focusring staat buiten de knop (outline-offset), op het paginavlak: daar haalt ink wel 3:1. */
  --pw-focus: var(--ink);
}
.pw-buy .btn--purchase:disabled,
.pw-buy .add-to-cart-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pw-buy .btn--purchase:focus-visible,
.pw-buy .add-to-cart-btn:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-buy .add-to-cart-icon { display: none; }
/* Tweede handeling naast "In de winkelwagen" (bijv. "Plan een afspraak"): outline, volle breedte, zoals "Bewaar" in de mock. */
.pw-buy .product-purchase-panel__secondary { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-buy .product-purchase-panel__secondary .btn,
.pw-buy .product-detail-purchase-block--appointmentButton .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); inline-size: 100%;
  min-block-size: var(--control-md); padding-inline: var(--space-6); border: 1.5px solid var(--line-strong);
  border-radius: var(--pw-r-btn); background: transparent; color: var(--ink); font: 600 16px/1 var(--font-sans); cursor: pointer;
}
.pw-buy .product-purchase-panel__secondary .btn:focus-visible,
.pw-buy .product-detail-purchase-block--appointmentButton .btn:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-buy .product-purchase-questions { border-block: 1px solid var(--line); }
.pw-buy .product-purchase-questions__trigger { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--control-md); cursor: pointer; font-weight: 600; }
.pw-buy .alert { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface-warm); }
.pw-buy .alert__title { font-weight: 700; }

/* Winkelwagen */
.pw-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-8) var(--pw-pad);
}
.pw-cart-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.pw-cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--line);
}
.pw-cart-item .pw-media { aspect-ratio: 3 / 4; }
.pw-cart-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-inline-size: 0; }
.pw-cart-price { text-align: end; }
.pw-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--pw-r);
}
.pw-qty .pw-icon-btn { min-inline-size: var(--control-sm); min-block-size: var(--control-sm); }
.pw-qty .pw-input {
  inline-size: 48px;
  min-block-size: var(--control-sm);
  border: 0;
  border-radius: 0;
  text-align: center;
  padding-inline: 0;
}
.pw-cart-sum {
  border: 1px solid var(--line);
  border-radius: var(--pw-r-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  inset-block-start: var(--space-6);
}
.pw-cart-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.pw-cart-total { font-size: 22px; line-height: 1.25; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }

/* Checkout */
.pw-checkout-bar {
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}
.pw-checkout-bar .pw-wrap {
  min-block-size: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.pw-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-8) var(--pw-pad);
}
.pw-checkout-form { display: flex; flex-direction: column; gap: var(--space-8); min-inline-size: 0; }
.pw-checkout-block { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-field-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pw-field-label a { font-size: 14px; font-weight: 600; text-decoration: underline; }
.pw-form-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.pw-form-postcode { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--space-3); }
.pw-checkline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--control-sm);
  font-size: 15px;
}
.pw-checkline input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.pw-ship,
.pw-payopt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--control-md);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--pw-r);
  background: var(--surface);
  cursor: pointer;
}
.pw-ship:has(input:checked),
.pw-payopt:has(input:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: var(--surface-tint);
}
.pw-ship input,
.pw-payopt input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.pw-ship > span:last-child { margin-inline-start: auto; }
.pw-checkout-sum {
  border: 1px solid var(--line);
  border-radius: var(--pw-r-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  inset-block-start: var(--space-6);
}
.pw-sum-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}
.pw-sum-item .pw-media { aspect-ratio: 3 / 4; }
.pw-sum-row { display: flex; justify-content: space-between; gap: var(--space-4); }
.pw-sum-total { font-size: 22px; line-height: 1.25; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.pw-code { display: flex; gap: var(--space-2); align-items: flex-end; }
.pw-code .pw-field { flex: 1; }
.pw-checkout-foot {
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-6);
  color: var(--ink-muted);
  font-size: 14px;
}
.pw-checkout-foot a { text-decoration: underline; }

/* Afrekenen op één pagina (pw-co-*): drie genummerde blokken, het overzicht ernaast.
   `.pw-co-page` staat op dezelfde bak als `.pw-checkout`; de bedankpagina gebruikt `.pw-checkout` ook. */
.pw-co-secure { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink-muted); }
.pw-co-secure svg { flex-shrink: 0; color: var(--success); }
.pw-co-bar-end { display: flex; align-items: center; gap: var(--space-6); }
.pw-co-step { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.pw-co-num { display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font: 700 14px/1 var(--font-sans); --pw-focus: var(--on-brand); }
.pw-co-note { margin: 0; color: var(--ink-muted); }
.pw-co-note a, .pw-co-final p a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.pw-co-sub { margin: 0; font-size: 16px; font-weight: 700; }
.pw-co-page .pw-form-postcode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pw-co-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.pw-co-modes .pw-ship { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.pw-co-modes .pw-ship > span:last-child { margin-inline-start: 0; }
.pw-co-hint { margin: 0; color: var(--ink-muted); }
.pw-co-ok { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--success); font-weight: 600; }
.pw-co-ok svg { flex-shrink: 0; }
.pw-co-err { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--danger); font-weight: 600; }
.pw-co-err svg { flex-shrink: 0; margin-block-start: 2px; }
.pw-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pw-co-suggest { margin: 0; }
.pw-co-suggest button { padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--font-sans); font-size: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-block-size: var(--control-sm); }
.pw-co-place { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); }
.pw-co-place p { margin: 0; }
.pw-co-more { border-block: 1px solid var(--line); }
.pw-co-more summary { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--control-md); cursor: pointer; font-weight: 600; list-style: none; }
.pw-co-more summary::-webkit-details-marker { display: none; }
.pw-co-more summary::after { content: "+"; font-size: 22px; font-weight: 400; }
.pw-co-more[open] summary::after { content: "−"; }
.pw-co-more-body { display: flex; flex-direction: column; gap: var(--space-3); padding-block-end: var(--space-4); }
.pw-co-when { display: block; color: var(--ink-muted); }
.pw-co-page .pw-ship .pw-price { white-space: nowrap; }
.pw-co-pay-body { display: flex; flex-direction: column; }
.pw-co-pay-body span:last-child { color: var(--ink-muted); }
.pw-co-errsum { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-co-errsum p { margin: 0; }
.pw-co-errsum ul { margin: 0; padding-inline-start: var(--space-6); }
.pw-co-errsum a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.pw-co-final { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-co-final p { margin: 0; }
.pw-co-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.pw-co-sum-head a { font-weight: 600; text-decoration: underline; }
.pw-co-applied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pw-co-applied .pw-clear { min-block-size: var(--control-sm); }
.pw-co-later { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; color: var(--ink-muted); }
.pw-co-page .pw-checkout-sum .pw-checks { margin: 0; }
.pw-co-mini { display: none; border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-co-mini summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--control-md); padding-inline: var(--space-4); cursor: pointer; font-weight: 700; list-style: none; }
.pw-co-mini summary::-webkit-details-marker { display: none; }
.pw-co-mini-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-block-start: 1px solid var(--line); }
.pw-co-paybar { display: none; position: sticky; inset-block-end: 0; z-index: 5; padding: var(--space-3) var(--space-4); background: var(--surface); border-block-start: 1px solid var(--line); box-shadow: var(--shadow-float); }
.pw-co-more summary:focus-visible, .pw-co-mini summary:focus-visible, .pw-co-suggest button:focus-visible, .pw-co-errsum a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
@media (max-width: 760px) {
  .pw-co-bar-end .pw-link { display: none; }
  .pw-co-modes { grid-template-columns: minmax(0, 1fr); }
  .pw-co-modes .pw-ship { flex-direction: row; align-items: center; }
  .pw-co-modes .pw-ship > span:last-child { margin-inline-start: auto; }
  .pw-co-page .pw-checkout-sum { display: none; }
  .pw-co-mini { display: block; }
  .pw-co-pay-inline { display: none; }
  .pw-co-paybar { display: block; }
}

/* Bedankt */
.pw-thanks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  min-inline-size: 0;
  padding-block: var(--space-4) 0;
}
.pw-thanks h1 { margin: 0; }
.pw-thanks-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
}
.pw-thanks-meta h2 { font-size: 15px; }

/* Bedankt (pw-ty-*): de uitkomst bovenaan, wat er nu gebeurt, en het overzicht ernaast.
   `.pw-ty-page` staat op dezelfde bak als `.pw-checkout`; de afrekenpagina houdt haar eigen volgorde. */
.pw-ty { display: flex; flex-direction: column; gap: var(--space-8); min-inline-size: 0; }
.pw-ty-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.pw-ty-head p { margin: 0; }
.pw-ty-head h1 { margin: 0; }
.pw-ty-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--success); color: var(--on-action); }
.pw-ty-mark[data-state="wait"] { background: var(--surface-tint); color: var(--brand); }
.pw-ty-mark[data-state="fail"] { background: var(--surface-warm); color: var(--danger); }
.pw-ty-ref { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); color: var(--ink-muted); }
.pw-ty-ref strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pw-ty-mail { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.pw-ty-mail .pw-clear { padding-inline: 0; }
.pw-ty-block { display: flex; flex-direction: column; gap: var(--space-4); padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
.pw-ty-block > p { margin: 0; }
.pw-ty-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pw-ty-step { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); column-gap: var(--space-4); padding-block-end: var(--space-5); position: relative; }
.pw-ty-step:not(:last-child)::before { content: ""; position: absolute; inset-block: var(--space-6) 0; inset-inline-start: 11px; border-inline-start: 2px solid var(--line); }
.pw-ty-step[data-done="true"]:not(:last-child)::before { border-color: var(--success); }
.pw-ty-dot { inline-size: var(--space-6); block-size: var(--space-6); border-radius: var(--radius-pill); border: 2px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--on-action); }
.pw-ty-step[data-done="true"] .pw-ty-dot { border-color: var(--success); background: var(--success); }
.pw-ty-step p { margin: 0; }
.pw-ty-step-title { font-weight: 700; }
.pw-ty-account { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-ty-account p { margin: 0; }
.pw-ty-account .pw-checks { margin: 0; }
.pw-ty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pw-ty-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--line); }
.pw-ty-item p { margin: 0; }
.pw-ty-help { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; color: var(--ink-muted); }
.pw-ty-help a { color: var(--ink); font-weight: 600; text-decoration: underline; }
@media (max-width: 760px) {
  .pw-ty-account { padding: var(--space-4); }
  .pw-ty-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pw-ty-item > :last-child { justify-self: start; }
  .pw-ty-page .pw-checkout-sum { order: 2; }
}

@media (max-width: 760px) {
  .pw-pdp { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-gallery { grid-template-columns: 64px minmax(0, 1fr); }
  .pw-cart { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-cart-sum { position: static; }
  .pw-checkout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-checkout-sum { position: static; order: -1; }
  .pw-form-2, .pw-form-postcode { grid-template-columns: minmax(0, 1fr); }
  .pw-thanks { order: -1; }
}

/* ——— Contact (pw-ct-*; bron uiux/winkel-v2/contact/contact-r2.css) ——— */
.pw-ct { padding-block: var(--space-12) calc(var(--pw-pad) * 2); }
.pw-ct a:focus-visible, .pw-ct button:focus-visible, .pw-ct-textarea:focus-visible, .pw-ct-select:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-ct-in { display: flex; flex-direction: column; gap: var(--space-8); min-inline-size: 0; }
.pw-ct--solo .pw-ct-in { max-inline-size: 640px; margin-inline: auto; }

/* Kop: titel, één zin, de belofte over de reactietijd en de snelle wegen naar een antwoord */
.pw-ct-head { display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: 640px; }
.pw-ct-head h1, .pw-ct-head p { margin: 0; }
.pw-ct-promise { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink); font-weight: 600; }
.pw-ct-promise svg { flex-shrink: 0; margin-block-start: 2px; color: var(--brand); }
.pw-ct-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.pw-ct-quick li:first-child { color: var(--ink-muted); }
.pw-ct-quick a { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; }

/* Raster: formulier links, wegen en bezoek rechts; op de telefoon eerst de wegen, dan het formulier, dan het bezoek */
.pw-ct-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "form direct" "form visit" "map map"; grid-template-rows: auto 1fr auto; gap: var(--space-6) var(--space-8); align-items: start; }
.pw-ct--solo .pw-ct-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form"; }
.pw-ct-grid > * { min-inline-size: 0; }
.pw-ct-formcol { grid-area: form; }
.pw-ct-direct { grid-area: direct; }
.pw-ct-visit { grid-area: visit; }
.pw-ct-route { grid-area: map; }

.pw-ct-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-ct-card > * { min-inline-size: 0; }
.pw-ct-card h2, .pw-ct-card h3, .pw-ct-card p { margin: 0; }
.pw-ct-title { font: 700 20px/1.25 var(--font-sans); }

/* Formulier */
.pw-ct-form { display: flex; flex-direction: column; gap: var(--space-5); }
.pw-ct-form p { margin: 0; }
.pw-ct-opt { font-weight: 400; color: var(--ink-muted); }
.pw-ct-textarea { min-block-size: calc(var(--control-md) * 3); padding: var(--space-3) 14px; border: 1.5px solid var(--line-strong); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--font-sans); inline-size: 100%; resize: vertical; }
.pw-ct-textarea::placeholder { color: var(--ink-muted); }
.pw-ct-select { appearance: none; min-block-size: var(--control-md); padding-inline: 14px var(--space-12); border: 1.5px solid var(--line-strong); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font-sans); inline-size: 100%; cursor: pointer; }
.pw-ct-selectwrap { position: relative; display: flex; }
.pw-ct-selectwrap svg { position: absolute; inset-inline-end: var(--space-4); inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; }
.pw-ct-hint { margin: 0; color: var(--ink-muted); }
.pw-ct-err { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--danger); font-weight: 600; }
.pw-ct-err svg { flex-shrink: 0; margin-block-start: 2px; }
.pw-ct [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pw-ct-alert { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-ct-alert p, .pw-ct-alert ul { margin: 0; }
.pw-ct-alert ul { padding-inline-start: var(--space-5); }
.pw-ct-alert a { color: var(--ink); font-weight: 600; text-decoration: underline; }
/* [hidden] wint van display:flex op alert en selectwrap (zelfde patroon als .pw-ac) */
.pw-ct [hidden] { display: none !important; }
.pw-ct-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--ink-muted); }
.pw-ct-note svg { flex-shrink: 0; margin-block-start: 2px; }
.pw-ct-privacy { margin: 0; color: var(--ink-muted); }
.pw-ct-privacy a { color: var(--ink); text-decoration: underline; }
.pw-ct-send[disabled] { cursor: default; opacity: 0.7; }

/* Direct contact: e-mail en telefoon als twee grote, aantikbare rijen */
.pw-ct-ways { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pw-ct-way { display: flex; align-items: center; gap: var(--space-4); min-block-size: calc(var(--control-md) + var(--space-4)); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); text-decoration: none; }
.pw-ct-way:hover { border-color: var(--line-strong); }
.pw-ct-wayicon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--brand); }
.pw-ct-waytext { display: flex; flex-direction: column; min-inline-size: 0; }
.pw-ct-waylabel { color: var(--ink-muted); font-size: 14px; line-height: 1.3; }
.pw-ct-wayvalue { font-weight: 700; overflow-wrap: anywhere; }

/* Bezoek: adres, openingstijden, sociale kanalen, kaart */
.pw-ct-block { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-ct-block + .pw-ct-block { padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.pw-ct-block h3 { font: 700 16px/1.3 var(--font-sans); }
.pw-ct-address { margin: 0; font-style: normal; display: flex; flex-direction: column; }
.pw-ct-hours { max-inline-size: none; }
.pw-ct-hours tr[aria-current="date"] td { font-weight: 700; }
.pw-ct-hours tr:last-child td { border-block-end: 0; }
.pw-ct-hours td:last-child { white-space: nowrap; padding-inline-start: var(--space-4); }
.pw-ct-socials { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pw-ct-social { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding-inline: var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; text-decoration: none; }
.pw-ct-map { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); min-block-size: calc(var(--control-md) * 6); padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--pw-r); background: var(--surface-sunk); }
.pw-ct-map p { margin: 0; }
.pw-ct-map--loaded { align-items: center; border-style: solid; text-align: center; color: var(--ink-muted); }

/* Na het versturen */
.pw-ct-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.pw-ct-done h1, .pw-ct-done h2, .pw-ct-done p { margin: 0; }
.pw-ct-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--brand); }
.pw-ct-steps { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pw-ct-steps li { display: flex; align-items: flex-start; gap: var(--space-2); }
.pw-ct-steps svg { flex-shrink: 0; margin-block-start: 2px; color: var(--brand); }
.pw-ct-echo { display: flex; flex-direction: column; gap: var(--space-2); inline-size: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface-sunk); }
.pw-ct-echo p { overflow-wrap: anywhere; }
.pw-ct-echo-label { color: var(--ink-muted); font-size: 14px; font-weight: 600; }
.pw-ct-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 760px) {
  .pw-ct { padding-block: var(--space-6) var(--pw-pad); }
  .pw-ct-in { gap: var(--space-6); }
  .pw-ct-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "direct" "form" "visit" "map"; gap: var(--space-6); }
  .pw-ct-quick li:first-child { flex-basis: 100%; }
  .pw-ct--solo .pw-ct-grid { grid-template-areas: "form"; }
  .pw-ct-card { padding: var(--space-5); }
  .pw-ct-direct.pw-ct-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .pw-ct-direct .pw-ct-title { display: none; }
  .pw-ct-actions .pw-btn { inline-size: 100%; }
}

/* ——— Contact ronde 3 (pw-ct--r3; bron uiux/winkel-v2/contact/contact-r3.css) ———
   Wegwijzer, onderwerpkaartje, band "wat er daarna gebeurt", zijkolom. */
.pw-ct .pw-ic { inline-size: 24px; block-size: 24px; flex-shrink: 0; }
.pw-ct--r3 .pw-ct-grid {
  grid-template-areas: "form side" "after side" "map map";
  grid-template-rows: auto auto auto;
}
.pw-ct-side {
  grid-area: side;
  display: flex; flex-direction: column; gap: var(--space-6);
  min-inline-size: 0;
}
.pw-ct--r3.pw-ct--solo .pw-ct-grid { grid-template-areas: "form" "after"; }
.pw-ct-after { grid-area: after; background: var(--surface-warm); }
.pw-ct-visit .pw-link { align-self: flex-start; }
.pw-ct-help { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-ct-helpgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.pw-ct-helpcard {
  display: flex; align-items: center; gap: var(--space-4);
  min-block-size: calc(var(--control-md) + var(--space-4));
  block-size: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--pw-r-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.pw-ct-helpcard:hover { border-color: var(--line-strong); }
.pw-ct-helpcard[aria-current] { border-color: var(--brand); border-width: 1.5px; background: var(--surface-warm); }
.pw-ct-helpicon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  inline-size: var(--control-md); block-size: var(--control-md);
  border-radius: var(--pw-r);
  background: var(--surface-tint);
  color: var(--brand);
}
.pw-ct-helptext { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.pw-ct-helptitle { font-weight: 700; }
.pw-ct-helpline { color: var(--ink-muted); font-size: 14px; line-height: 1.35; }
.pw-ct-helpcard .pw-ct-helparrow { margin-inline-start: auto; color: var(--ink-muted); }
.pw-ct-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--pw-r-card);
  background: var(--surface-warm);
}
.pw-ct-chiplabel { color: var(--ink-muted); font-size: 14px; }
.pw-ct-chipwaarde { font-weight: 700; }
.pw-ct-chipweg {
  margin-inline-start: auto;
  min-block-size: var(--control-sm);
  display: inline-flex; align-items: center;
  color: var(--ink); font-weight: 600; text-decoration: underline;
}
.pw-ct-open { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 600; }
.pw-ct-openmark {
  inline-size: 10px; block-size: 10px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--success);
}
@media (max-width: 760px) {
  .pw-ct--r3 .pw-ct-grid { grid-template-areas: "direct" "form" "after" "visit" "map"; }
  .pw-ct-side { display: contents; }
  .pw-ct--r3.pw-ct--solo .pw-ct-grid { grid-template-areas: "form" "after"; }
  .pw-ct-helpgrid { grid-template-columns: minmax(0, 1fr); }
  .pw-ct-helpcard { padding: var(--space-4); }
  .pw-ct-helpline { display: none; }
  .pw-ct--r3 .pw-ct-direct .pw-ct-title { display: block; }
}

/* ——— Koopkolom (pw-bd-*, pw-bk-*, pw-sb-*; bron uiux/winkel-v2/koopkolom/canvas) ———
   Bundel (pw-bd-*), boeking (pw-bk-*) en abonnement (pw-sb-*). */

.pw-bd-root { display: flex; flex-direction: column; gap: var(--space-6); min-inline-size: 0; }
.pw-bd-config { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-bd-config-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pw-bd-progress { font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-bd-steps { display: grid; gap: 6px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pw-bd-steps span { block-size: 4px; border-radius: 2px; background: var(--line); }
.pw-bd-steps span[aria-current="true"] { background: var(--brand); }

.pw-bd-items { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-bd-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-bd-item[data-nudge="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pw-bd-thumb { aspect-ratio: 3 / 4; border-radius: var(--pw-r); padding: 0; font-size: 11px; overflow: hidden; }
.pw-bd-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pw-bd-item-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pw-bd-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pw-bd-item-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-bd-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.pw-bd-label { font-size: 14px; color: var(--ink-muted); }
.pw-bd-chosen { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pw-bd-chosen svg { color: var(--brand); flex-shrink: 0; }
.pw-bd-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-bd-options .pw-chip { min-inline-size: 48px; justify-content: center; padding-inline: 14px; }
.pw-bd-options .pw-chip:disabled { color: var(--ink-muted); background: transparent; border-style: dashed; text-decoration: line-through; cursor: not-allowed; }
.pw-bd-dot { inline-size: 14px; block-size: 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); margin-inline-end: 8px; flex-shrink: 0; }
.pw-bd-hint { font-size: 14px; color: var(--ink-muted); }
.pw-bd-nudge { font-size: 14px; font-weight: 600; padding: var(--space-3) var(--space-4); border-radius: var(--pw-r); background: var(--surface-tint); }

.pw-bd-buybox { display: flex; flex-direction: column; gap: var(--space-4); padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
.pw-bd-price { display: flex; flex-direction: column; gap: var(--space-1); }
.pw-bd-price-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pw-bd-price-now { font-size: 34px; line-height: 1.1; font-weight: 800; }
.pw-bd-price-row > .pw-price { font-size: 34px; line-height: 1.1; font-weight: 800; }
.pw-bd-price-row .pw-price-was { font-size: 18px; margin-inline-start: 0; }
.pw-bd-total { font-weight: 700; }
.pw-bd-actions { display: flex; gap: var(--space-3); align-items: stretch; }
.pw-bd-cta { flex: 1; min-inline-size: 0; }
/* Snelle boeking (gratis afspraak): eigen velden, blijft op de telefoon zichtbaar. */
.pw-bd-express { flex: 1; min-inline-size: 0; }
.pw-bd-cta .add-to-cart { display: block; inline-size: 100%; }
.pw-bd-cta .add-to-cart-btn,
.pw-bd-cta .btn--purchase {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  inline-size: 100%; min-block-size: var(--control-md); padding-inline: 22px;
  border-radius: var(--pw-r-btn); border: 1.5px solid transparent;
  background: var(--action); color: var(--on-action); font: 600 15px/1.2 var(--font-sans); cursor: pointer;
  /* Focusring buiten de knop op het paginavlak: daar haalt ink wel 3:1. */
  --pw-focus: var(--ink);
}
.pw-bd-cta .add-to-cart-icon { display: none; }
.pw-bd-qty { display: inline-flex; align-items: center; block-size: var(--control-md); border: 1.5px solid var(--line-strong); border-radius: var(--pw-r-btn); background: var(--surface); }
.pw-bd-qty button { inline-size: var(--control-md); block-size: 100%; border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: inherit; }
.pw-bd-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.pw-bd-qty output { min-inline-size: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pw-bd-added { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pw-bd-added svg { color: var(--brand); flex-shrink: 0; }

.pw-bd-bar { display: none; position: sticky; inset-block-end: 0; z-index: 5; background: var(--surface); border-block-start: 1px solid var(--line); box-shadow: var(--shadow-float); padding: var(--space-3) var(--space-4); grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.pw-bd-bar-price { display: flex; flex-direction: column; line-height: 1.2; }
.pw-bd-bar-price .pw-price { font-size: 20px; font-weight: 800; }
.pw-bd-bar-price .pw-price-was { font-size: 13px; margin-inline-start: 0; }

.pw-bd-qty button:focus-visible,
.pw-bd-options .pw-chip:focus-visible,
.pw-bd-bar .pw-btn:focus-visible {
  outline: 3px solid var(--pw-focus);
  outline-offset: 2px;
}

/* Quantity/CTA from AddToCartButton inside the buybox */
.pw-bd-actions .add-to-cart {
  display: contents;
}
.pw-bd-actions .add-to-cart-quantity {
  display: inline-flex;
  align-items: center;
  block-size: var(--control-md);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--pw-r-btn);
  background: var(--surface);
}
.pw-bd-actions .add-to-cart-quantity-btn {
  inline-size: var(--control-md);
  block-size: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: inherit;
}
.pw-bd-actions .add-to-cart-quantity-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pw-bd-actions .add-to-cart-quantity-value {
  min-inline-size: 32px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pw-bd-actions .add-to-cart-btn,
.pw-bd-actions .pw-bd-cta,
.pw-bd-bar .pw-btn {
  flex: 1;
}
.pw-bd-bar .add-to-cart { display: contents; }
.pw-bd-bar .add-to-cart-quantity { display: none; }


/* Boeking: weekbalk, tijden, samenvatting, goed om te weten (pw-bk-*) */
.pw-bk-steps { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-bk-block { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-bk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pw-bk-steptitle { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.pw-bk-num { display: inline-flex; align-items: center; justify-content: center; inline-size: 28px; block-size: 28px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font: 700 14px/1 var(--font-sans); flex-shrink: 0; --pw-focus: var(--ink); }
.pw-bk-nav { display: flex; align-items: center; gap: var(--space-2); }
.pw-bk-week-label { font-size: 14px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-bk-navbtn { inline-size: var(--control-sm); block-size: var(--control-sm); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-strong); border-radius: var(--pw-r-btn); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.pw-bk-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }

.pw-bk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pw-bk-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: 68px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; }
.pw-bk-wd { font-size: 14px; color: var(--ink-muted); }
.pw-bk-dn { font-size: 20px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.pw-bk-day[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-action); --pw-focus: var(--ink); }
.pw-bk-day[aria-pressed="true"] .pw-bk-wd { color: var(--on-action); }
.pw-bk-day:disabled { border-style: dashed; border-color: var(--line); cursor: not-allowed; }
.pw-bk-day:disabled .pw-bk-dn { color: var(--ink-muted); text-decoration: line-through; font-weight: 600; }
/* Maandkalender (527, tijdkiezer=maand): de weekdagen staan één keer boven de maand; een dag toont alleen zijn nummer. */
.pw-bk-wdrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 14px; color: var(--ink-muted); text-align: center; }
.pw-bk-month .pw-bk-day { min-block-size: 44px; }

.pw-bk-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: 2px; margin: -2px; border-radius: var(--pw-r); }
.pw-bk-times[data-nudge="true"] { box-shadow: 0 0 0 2px var(--brand); padding: var(--space-2); margin: -6px; }
.pw-bk-times .pw-chip { justify-content: center; font-variant-numeric: tabular-nums; }
.pw-bk-times .pw-chip:disabled { color: var(--ink-muted); background: transparent; border-style: dashed; text-decoration: line-through; cursor: not-allowed; }
.pw-bk-empty { font-size: 16px; color: var(--ink-muted); margin: 0; }

.pw-bk-sum { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-bk-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.pw-bk-rows dt { font-size: 14px; color: var(--ink-muted); }
.pw-bk-rows dd { margin: 0; font-weight: 700; }

.pw-bk-know { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pw-bk-know li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.pw-bk-know svg { color: var(--brand); flex-shrink: 0; margin-block-start: 2px; }

.pw-bk-day:focus-visible,
.pw-bk-navbtn:focus-visible,
.pw-bk-times .pw-chip:focus-visible {
  outline: 3px solid var(--pw-focus);
  outline-offset: 2px;
}

/* Abonnement: plankaart (pw-sb-*) */
.pw-sb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pw-sb-plans[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.pw-sb-plan { display: flex; flex-direction: column; gap: var(--space-1); text-align: start; padding: var(--space-4); min-block-size: var(--control-md); border: 1.5px solid var(--line-strong); border-radius: var(--pw-r-card); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; }
.pw-sb-plan[aria-pressed="true"],
.pw-sb-plan[data-selected="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-tint); }
.pw-sb-plan[data-static="true"] { cursor: default; }
.pw-sb-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pw-sb-plan-name { font-size: 16px; font-weight: 700; }
.pw-sb-radio { inline-size: 20px; block-size: 20px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); background: var(--surface); flex-shrink: 0; }
.pw-sb-plan[aria-pressed="true"] .pw-sb-radio,
.pw-sb-plan[data-selected="true"] .pw-sb-radio { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--surface); --pw-focus: var(--ink); }
.pw-sb-plan-price { font-size: 22px; line-height: 1.2; font-weight: 800; }
.pw-sb-plan-note { font-size: 14px; color: var(--ink-muted); }
.pw-sb-plan:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }

@media (max-width: 760px) {
  .pw-bd-item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
  .pw-bd-cta,
  .pw-bd-actions .add-to-cart-btn { display: none; }
  .pw-bd-bar { display: grid; }
  .pw-bk-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-bk-week,
  .pw-bk-wdrow { gap: 4px; }
  .pw-sb-plans { grid-template-columns: minmax(0, 1fr); }
  /* De snelle boeking heeft geen vaste balk: zijn bevestigknop blijft zichtbaar. */
  .pw-bd-express .add-to-cart-btn { display: inline-flex; }
}

/* Winkelwagen ronde 2 — ShipMeter, CartTools, CartHold, CrossSell, CouponDisclosure, CartBar */
.pw-cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-4); }
.pw-cart-head p { margin: 0; }
.pw-shipmeter { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); margin-block-end: var(--space-6); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-shipmeter p { margin: 0; }
.pw-shipmeter-line { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.pw-shipmeter-line svg { flex-shrink: 0; color: var(--brand); }
.pw-shipmeter-track { block-size: var(--space-2); border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.pw-shipmeter-track span { display: block; block-size: 100%; border-radius: inherit; background: var(--brand); }
.pw-shipmeter[data-done="true"] .pw-shipmeter-track span { background: var(--success); }
.pw-cart-meta { display: flex; flex-direction: column; gap: var(--space-1); }
.pw-cart-meta p { margin: 0; }
.pw-cart-save { color: var(--success); font-weight: 600; }
.pw-cart-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-inline-start: calc(-1 * var(--space-2)); }
.pw-cart-tools .pw-clear { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 600; }
.pw-cart-tools .pw-clear span { text-decoration: underline; }
.pw-cart-hold { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-tint); font-weight: 600; }
.pw-cart-hold svg { flex-shrink: 0; color: var(--brand); }
.pw-cart-fixed { color: var(--ink-muted); font-weight: 600; }
.pw-cart-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); background: var(--surface-warm); }
.pw-cart-undo p { margin: 0; }
.pw-xsell { display: flex; flex-direction: column; gap: var(--space-4); margin-block-start: var(--space-8); }
.pw-xsell-head { display: flex; flex-direction: column; gap: var(--space-1); }
.pw-xsell-head p { margin: 0; }
.pw-xsell-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pw-xsell-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-content: start; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-xsell-item > :not(.pw-media) { grid-column: 2; }
.pw-xsell-item .pw-media { grid-row: 1 / span 4; }
.pw-xsell-item[data-fills="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pw-xsell-item .pw-media { aspect-ratio: 1 / 1; border-radius: var(--pw-r); }
.pw-xsell-item .pw-btn { justify-self: start; margin-block-start: var(--space-1); }
.pw-xsell-tag { font-weight: 700; color: var(--brand); }
.pw-xsell-item p { margin: 0; }
.pw-cart-deliver { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.pw-cart-deliver svg { flex-shrink: 0; margin-block-start: 2px; color: var(--brand); }
.pw-cart-later { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--ink-muted); }
.pw-or { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); }
.pw-or::before, .pw-or::after { content: ""; flex: 1; border-block-start: 1px solid var(--line); }
.pw-express { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.pw-express .pw-btn { padding-inline: var(--space-2); }
.pw-coupon { border-block: 1px solid var(--line); }
.pw-coupon summary { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--control-md); cursor: pointer; font-weight: 600; list-style: none; }
.pw-coupon summary::-webkit-details-marker { display: none; }
.pw-coupon summary::after { content: "+"; font-size: 22px; font-weight: 400; }
.pw-coupon[open] summary::after { content: "−"; }
.pw-coupon-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding-block-end: var(--space-4); }
.pw-cart-sum .pw-checks { margin: 0; }
.pw-cart-sum > .pw-link { align-self: center; }
.pw-cart-sum .pw-pay { padding-block: 0; justify-content: flex-start; }
.pw-cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-8) var(--space-12); }
.pw-cart-empty p { margin: 0; }
.pw-cart-empty-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pw-cart-bar { display: none; position: sticky; inset-block-end: 0; z-index: 5; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border-block-start: 1px solid var(--line); box-shadow: var(--shadow-float); }
.pw-cart-bar-total { display: flex; flex-direction: column; }
.pw-cart-bar-total .pw-price { font-size: 20px; font-weight: 800; }
.pw-coupon summary:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }

@media (max-width: 760px) {
  .pw-xsell-list { grid-template-columns: minmax(0, 1fr); }
  .pw-cart-bar { display: grid; }
}

/* ——— Account (pw-ac-*; bron uiux/winkel-v2/account, ronde 2, opdracht 366) ———
   Menu links, bestelling met voortgang, afspraak met verzetten en annuleren, adressen, passkeys.
   Alleen tokens en logische eigenschappen. */
/* Opbouw: menu links, inhoud rechts; op de telefoon een terug-link in plaats van het menu */
.pw-ac { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); column-gap: var(--space-12); align-items: start; padding-block: var(--space-8) var(--pw-pad); }
.pw-ac-main { display: flex; flex-direction: column; gap: var(--space-8); min-inline-size: 0; }
.pw-ac-main > * { min-inline-size: 0; }
.pw-ac-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pw-ac-nav a { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-md); padding-inline: var(--space-4); border: 1.5px solid transparent; border-radius: var(--pw-r); font-weight: 600; }
.pw-ac-nav a:hover { background: var(--surface-tint); }
.pw-ac-nav a[aria-current="page"] { background: var(--surface-tint); border-color: var(--brand); }
@media (min-width: 761px) { .pw-ac-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--brand); } }
.pw-ac-nav a:focus-visible, .pw-ac-back:focus-visible, .pw-ac-more summary:focus-visible, .pw-ac-add:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-ac-nav svg { flex-shrink: 0; }
.pw-ac-nav-n { margin-inline-start: auto; color: var(--ink-muted); font-weight: 500; }
.pw-ac-nav-chev { display: none; }
.pw-ac-out { display: flex; padding-block-start: var(--space-4); padding-inline: var(--space-4); }
.pw-ac-back { display: none; align-items: center; gap: var(--space-2); min-block-size: var(--control-sm); font-weight: 600; }

/* Kop van een pagina */
.pw-ac-head { display: flex; flex-direction: column; gap: var(--space-2); }
.pw-ac-head h1, .pw-ac-head p { margin: 0; }
.pw-ac-sec { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-ac-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.pw-ac-sec-head h2 { margin: 0; }

/* Kaart en rijen */
.pw-ac-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-ac-card p, .pw-ac-card h3 { margin: 0; }
.pw-ac-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.pw-ac-row > div { min-inline-size: 0; }
.pw-ac-row p { margin: 0; }
.pw-ac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pw-ac-sub { margin: 0; color: var(--ink-muted); }
.pw-open[data-tone="wait"] { color: var(--brand); }
.pw-open[data-tone="off"] { color: var(--ink-muted); }
.pw-open[data-tone="attn"] { color: var(--sale); }

/* Iets te doen (pas, betaling): hooguit één kaart bovenaan */
.pw-ac-todo { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--brand); border-radius: var(--pw-r-card); box-shadow: inset 0 0 0 1px var(--brand); }
.pw-ac-todo > p { margin: 0; }
.pw-ac-todo-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pw-ac-todo-row + .pw-ac-todo-row { padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.pw-ac-todo-row p { margin: 0; }
.pw-ac-todo > h2 { margin: 0; }
.pw-ac-qr { inline-size: fit-content; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-ac-qr img { display: block; max-inline-size: 100%; block-size: auto; }

/* Bestelling: voortgang in vier stukken, foto's, regels */
.pw-ac-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-2); }
.pw-ac-prog li { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-muted); }
.pw-ac-prog li::before { content: ""; display: block; block-size: var(--space-1); border-radius: var(--radius-pill); background: var(--line); }
.pw-ac-prog li[data-done="true"] { color: var(--ink); }
.pw-ac-prog li[data-done="true"]::before { background: var(--success); }
.pw-ac-prog li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.pw-ac-prog li[aria-current="step"]::before { background: var(--brand); --pw-focus: var(--on-brand); }
.pw-ac-lines { display: flex; align-items: center; gap: var(--space-4); }
.pw-ac-lines > p { flex: 1 1 auto; min-inline-size: 0; margin: 0; }
.pw-ac-thumbs { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.pw-ac-thumb { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; inline-size: calc(var(--control-md) + var(--space-2)); aspect-ratio: 1; border-radius: var(--pw-r); background: var(--surface-sunk); color: var(--ink-muted); }
.pw-ac-thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pw-ac-thumbs-n { color: var(--ink-muted); font-weight: 600; }
.pw-ac-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.pw-ac-foot p { margin: 0; }
.pw-ac-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.pw-ac-search { flex: 0 1 320px; min-inline-size: 0; }
.pw-ac .pw-chip { min-block-size: var(--control-md); gap: var(--space-2); }
.pw-ac .pw-clear { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-ac-list { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }

/* Afspraak: datumvak, verzetten, annuleren */
.pw-ac-appt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.pw-ac-appt > .pw-ac-actions, .pw-ac-appt > .pw-ac-panel, .pw-ac-appt > .pw-ac-foot, .pw-ac-appt > .pw-ac-lock { grid-column: 1 / -1; }
.pw-ac-date { display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: calc(var(--control-md) + var(--space-4)); aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface-tint); }
.pw-ac-date p { margin: 0; line-height: 1.1; }
.pw-ac-date[data-past="true"] { background: var(--surface-sunk); color: var(--ink-muted); }
.pw-ac-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-ac-panel p, .pw-ac-panel h3 { margin: 0; }
.pw-ac-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.pw-ac-times .pw-chip { justify-content: center; }
.pw-ac-lock { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--ink-muted); }
.pw-ac-lock svg { flex-shrink: 0; margin-block-start: 2px; }

/* Adressen */
.pw-ac-addrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.pw-ac-addr { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-ac-addr[data-default="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pw-ac-addr address { font-style: normal; display: flex; flex-direction: column; flex: 1 1 auto; }
.pw-ac-addr p { margin: 0; }
.pw-ac-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-ac-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: calc(var(--control-md) * 3); padding: var(--space-5); border: 1.5px dashed var(--line-strong); border-radius: var(--pw-r-card); background: transparent; color: var(--ink); font: 600 15px/1.2 var(--font-sans); cursor: pointer; }
.pw-ac-add:hover { background: var(--surface-tint); }

/* Formulier en veldstatus (zoals checkout; samen naar FieldStatus in pagayo-design) */
.pw-ac-form { display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 560px; }
.pw-ac-form h3, .pw-ac-form p { margin: 0; }
.pw-ac-hint { margin: 0; color: var(--ink-muted); }
.pw-ac-ok { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--success); font-weight: 600; }
.pw-ac-ok svg { flex-shrink: 0; }
.pw-ac-err { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--danger); font-weight: 600; }
.pw-ac-err svg { flex-shrink: 0; margin-block-start: 2px; }
.pw-ac .pw-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pw-ac-errsum { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-ac-errsum p { margin: 0; }
.pw-ac-errsum ul { margin: 0; padding-inline-start: var(--space-6); }
.pw-ac-errsum a { color: var(--ink); font-weight: 600; }
.pw-ac-found { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface-tint); }
.pw-ac-found p { margin: 0; }
.pw-ac-found-text { display: flex; gap: var(--space-2); }
.pw-ac-found-text svg { flex-shrink: 0; margin-block-start: 2px; color: var(--success); }
.pw-ac-more { border-block: 1px solid var(--line); }
.pw-ac-more summary { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--control-md); cursor: pointer; font-weight: 600; list-style: none; }
.pw-ac-more summary::-webkit-details-marker { display: none; }
.pw-ac-more summary::after { content: "+"; font-size: 22px; font-weight: 400; }
.pw-ac-more[open] summary::after { content: "\2212"; }
.pw-ac-more-body { display: flex; flex-direction: column; gap: var(--space-3); padding-block-end: var(--space-4); }

/* Inloggen: passkeys */
.pw-ac-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pw-ac-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--line); }
.pw-ac-key p { margin: 0; }
.pw-ac-keyicon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--brand); }

@media (max-width: 760px) {
  .pw-ac { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); padding-block-start: var(--space-4); }
  .pw-ac-main { gap: var(--space-6); }
  .pw-ac:not([data-page="overzicht"]) .pw-ac-side { display: none; }
  .pw-ac:not([data-page="overzicht"]) .pw-ac-back { display: inline-flex; }
  .pw-ac[data-page="overzicht"] .pw-ac-side { order: 2; }
  .pw-ac-nav { gap: 0; }
  .pw-ac-nav a { border: 0; border-radius: 0; padding-inline: 0; border-block-end: 1px solid var(--line); }
  .pw-ac-nav li:has(> a[aria-current="page"]) { display: none; }
  .pw-ac-nav-chev { display: inline-flex; margin-inline-start: auto; color: var(--ink-muted); }
  .pw-ac-nav-n + .pw-ac-nav-chev { margin-inline-start: var(--space-2); }
  .pw-ac-out { padding-inline: 0; }
  .pw-ac-card, .pw-ac-addr { padding: var(--space-4); }
  .pw-ac-lines { flex-wrap: wrap; }
  .pw-ac-addrs { grid-template-columns: minmax(0, 1fr); }
  .pw-ac-actions > .pw-btn { flex: 1 1 auto; }
  .pw-ac-key { grid-template-columns: auto minmax(0, 1fr); }
  .pw-ac-key > :last-child { grid-column: 2; justify-self: start; }
  .pw-ac-search { flex-basis: 100%; }
  .pw-ac-found { flex-direction: column; }
}

/* Bezet of niet te kiezen: één patroon in de hele bundel, gestreepte rand en doorgestreepte tekst, plus de tekst in aria-label */
.pw-ac-times .pw-chip[disabled], .pw-ac-days .pw-chip[disabled] { border-style: dashed; color: var(--ink-muted); text-decoration: line-through; cursor: not-allowed; }
.pw-ac-days { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* [hidden] wint van elke weergave-regel, ook van de terug-link op de telefoon (specificiteit 0,3,0) */
.pw-ac [hidden] { display: none !important; }
.pw-ac-help { margin: 0; }
.pw-ac-help a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.pw-ac-addrs > li { display: flex; }
.pw-ac-addrs > li > .pw-ac-addr, .pw-ac-addrs > li > .pw-ac-add { flex: 1 1 auto; }

/* ——— Account, ronde 3 (opdracht 369): bestelpagina, retouren, abonnementen ———
   Regels en totalen van een bestelling, meldingen in de pagina, retour kiezen, leden en betalingen
   van een abonnement. Alleen tokens en logische eigenschappen; de kaarten, rijen en knoppen van
   ronde 2 worden hergebruikt. */
.pw-ac-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pw-ac-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--line); }
.pw-ac-item:first-child { padding-block-start: 0; }
.pw-ac-item p { margin: 0; }
.pw-ac-item ul { margin-block: var(--space-1) 0; padding-inline-start: var(--space-4); }
.pw-ac-item-end { text-align: end; }
.pw-ac-sum { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.pw-ac-sum > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.pw-ac-sum dt, .pw-ac-sum dd { margin: 0; }
.pw-ac-sum [data-total="true"] { padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); font-weight: 800; }

/* Meldingen in de pagina: gelukt of aandacht nodig, altijd ook in tekst */
.pw-ac-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-ac-note p { margin: 0; }
.pw-ac-note svg { flex-shrink: 0; margin-block-start: 2px; }
.pw-ac-note[data-tone="ok"] { border-color: var(--success); }
.pw-ac-note[data-tone="ok"] svg { color: var(--success); }
.pw-ac-note[data-tone="attn"] { border-color: var(--danger); }
.pw-ac-note[data-tone="attn"] svg { color: var(--danger); }

/* Retour aanvragen: artikelen kiezen, aantal, reden */
.pw-ac-pick { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.pw-ac-pick li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pw-ac textarea.pw-input { min-block-size: calc(var(--control-md) * 2); padding-block: var(--space-3); line-height: 1.5; resize: vertical; }

/* Abonnement: een lid met pas, de teller van de plekken, betalingen */
.pw-ac-member { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.pw-ac-member > .pw-ac-actions, .pw-ac-member > .pw-ac-panel, .pw-ac-member > .pw-ac-foot, .pw-ac-member > .pw-ac-err, .pw-ac-member > .pw-ac-note { grid-column: 1 / -1; }
.pw-ac-member p { margin: 0; }
.pw-ac-member[data-inactive="true"] { background: var(--surface-sunk); color: var(--ink-muted); }
.pw-ac-meter { appearance: none; inline-size: 100%; block-size: var(--space-2); border: 0; border-radius: var(--radius-pill); background: var(--line); }
.pw-ac-meter::-webkit-progress-bar { background: var(--line); border-radius: var(--radius-pill); }
.pw-ac-meter::-webkit-progress-value { background: var(--brand); --pw-focus: var(--on-brand); border-radius: var(--radius-pill); }
.pw-ac-meter::-moz-progress-bar { background: var(--brand); --pw-focus: var(--on-brand); border-radius: var(--radius-pill); }
.pw-ac-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pw-ac-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.pw-ac-rows li p { margin: 0; }
/* Kopjes in kaarten en secties, en een groep velden zonder de rand van de browser */
.pw-ac-card h2, .pw-ac-sec h2, .pw-ac-panel h2, .pw-ac-member h3 { margin: 0; }
.pw-ac fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pw-ac-card address { font-style: normal; }
.pw-ac legend { padding: 0; }

@media (max-width: 760px) {
  .pw-ac-item { grid-template-columns: auto minmax(0, 1fr); }
  .pw-ac-item-end { grid-column: 2; text-align: start; }
  .pw-ac-rows li { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ——— De pas als afbeelding (opdracht 374) ———
   De kaart van een lid: QR links en de gegevens rechts, of foto met barcode, pasnummer onderaan.
   Dezelfde opbouw en namen als de kaart van de beheerder (`pass-card__*`), onder `pw-pass__*`, met
   alleen v2-tokens. Voor "Als afbeelding" maakt de browser een beeld van `.pw-pass-capture`: die
   staat buiten beeld en nooit op display: none of visibility: hidden (dan blijft de afbeelding leeg).
   Het vaste formaat (geen telefoonregels) houdt het beeld op elk scherm gelijk. De pas is altijd
   licht (besluit Sjoerd, 13 oktober 2026): vlak `--on-inverse` en tekst `--inverse` zijn in beide
   modi licht en donker, gedempte tekst is `--inverse` met opacity (geen color-mix: html2canvas). */
.pw-pass { display: flex; flex-direction: column; inline-size: 100%; max-inline-size: 360px; border: 2px solid var(--on-inverse-muted); border-radius: var(--pw-r-card); background: var(--on-inverse); color: var(--inverse); overflow: hidden; }
.pw-pass--sm { max-inline-size: 280px; }
.pw-pass--lg, .pw-pass--qr { max-inline-size: 420px; }
.pw-pass__logo { padding: var(--space-3); text-align: center; border-block-end: 1px solid var(--on-inverse-muted); }
.pw-pass__logo-img { margin-inline: auto; inline-size: auto; max-block-size: var(--control-md); }
.pw-pass__body { padding: var(--space-4); }
.pw-pass__tenant-banner { inline-size: 100%; margin-block-end: var(--space-2); font-size: 14px; line-height: 1.2; color: var(--inverse); opacity: 0.72; }
.pw-pass__tenant-banner--left { text-align: start; }
.pw-pass__tenant-banner--center { text-align: center; }
.pw-pass__qr-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.pw-pass__qr-pane { display: flex; align-items: center; justify-content: center; inline-size: 180px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--on-inverse-muted); border-radius: var(--pw-r); background: var(--on-inverse); color: var(--inverse); }
.pw-pass--sm .pw-pass__qr-pane { inline-size: 140px; }
.pw-pass--lg .pw-pass__qr-pane { inline-size: 200px; }
.pw-pass__qr-image { inline-size: 100%; block-size: 100%; object-fit: contain; }
.pw-pass__qr-fallback { inline-size: 100%; padding: var(--space-2); font-size: 12px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.pw-pass__qr-details { min-inline-size: 0; }
.pw-pass__identity { display: flex; align-items: flex-start; gap: var(--space-3); }
.pw-pass__identity--no-photo { align-items: stretch; }
.pw-pass__photo { flex-shrink: 0; inline-size: 80px; block-size: 100px; overflow: hidden; border-radius: var(--pw-r); }
.pw-pass--sm .pw-pass__photo { inline-size: 60px; block-size: 75px; }
.pw-pass__photo-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pw-pass__photo-placeholder { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; background: var(--on-inverse-muted); color: var(--on-inverse); }
.pw-pass__text-fields { display: flex; flex-direction: column; flex: 1; gap: var(--space-1); min-inline-size: 0; }
.pw-pass__text-field { font-size: 14px; line-height: 1.35; color: var(--inverse); opacity: 0.72; overflow-wrap: break-word; }
.pw-pass__text-field--memberName, .pw-pass__text-field--firstName, .pw-pass__text-field--lastName { font-size: 17px; font-weight: 700; color: var(--inverse); opacity: 1; }
.pw-pass--sm .pw-pass__text-field--memberName, .pw-pass--sm .pw-pass__text-field--firstName, .pw-pass--sm .pw-pass__text-field--lastName { font-size: 15px; }
.pw-pass__barcode { display: flex; justify-content: center; padding: var(--space-3); border-block-start: 1px solid var(--on-inverse-muted); background: var(--on-inverse); }
.pw-pass__barcode svg { max-inline-size: 100%; block-size: auto; }
.pw-pass__pass-number { padding: var(--space-1) var(--space-4) var(--space-3); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; color: var(--inverse); opacity: 0.72; }
.pw-pass__pass-number--right { text-align: end; }
.pw-pass-capture { position: absolute; inset-block-start: 0; inset-inline-start: -9999px; inline-size: 460px; padding: var(--space-4); background: var(--on-inverse); pointer-events: none; }

/* ——— Inloggen (pw-lg-*; bron uiux/winkel-v2/inloggen, ronde 2, opdracht 382) ———
   Tokens en bouwstenen komen uit de bundel; hier alleen wat de bundel nog niet had. Alleen tokens, logische eigenschappen.
   Eerlijk: pw-lg-err en de veldstatus zijn een derde kopie naast pw-co-* en pw-ac-*; samenvoegen tot FieldStatus is een restpunt. */

.pw-lg { display: flex; justify-content: center; padding-block: var(--space-12) calc(var(--pw-pad) * 2); }
.pw-lg-col { display: flex; flex-direction: column; gap: var(--space-4); inline-size: 100%; max-inline-size: 480px; min-inline-size: 0; }
.pw-lg-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-lg-card > *, .pw-lg-col > * { min-inline-size: 0; }
.pw-lg-head { display: flex; flex-direction: column; gap: var(--space-2); }
.pw-lg-head h1, .pw-lg-head p { margin: 0; }
.pw-lg-form { display: flex; flex-direction: column; gap: var(--space-4); }
.pw-lg-form h2, .pw-lg-form p { margin: 0; }
.pw-lg a:focus-visible, .pw-lg-pwtoggle:focus-visible, .pw-lg-who button:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }

/* Wie logt in: het e-mailadres met Wijzig */
.pw-lg-who { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--pw-r); background: var(--surface-tint); }
.pw-lg-who p { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 600; }
.pw-lg-who .pw-clear { flex-shrink: 0; }

/* Wachtwoord met Toon */
.pw-lg-pw { position: relative; display: flex; }
.pw-lg-pw .pw-input { padding-inline-end: calc(var(--control-md) + var(--space-8)); }
.pw-lg-pwtoggle { position: absolute; inset-block: 0; inset-inline-end: var(--space-1); display: inline-flex; align-items: center; padding-inline: var(--space-3); border: 0; background: none; color: var(--ink); font: 600 14px/1 var(--font-sans); text-decoration: underline; cursor: pointer; }

/* Of-lijn tussen de hoofdknop en de andere manieren */
.pw-lg-or { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--ink-muted); }
.pw-lg-or::before, .pw-lg-or::after { content: ""; flex: 1 1 auto; border-block-start: 1px solid var(--line); }
.pw-lg-ways { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-lg-ways .pw-btn { inline-size: 100%; }
.pw-lg-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pw-lg-row a:not(.pw-clear) { color: var(--ink); font-weight: 600; text-decoration: underline; }
.pw-lg-row .pw-clear { display: inline-flex; align-items: center; }

/* Code uit de mail: één veld, groot en met ruimte tussen de cijfers */
.pw-lg-code { text-align: center; font: 700 28px/1 var(--font-grotesk); letter-spacing: 0.35em; font-variant-numeric: tabular-nums; padding-inline-start: 0.35em; }
.pw-lg-code::placeholder { letter-spacing: 0.35em; }

/* Meldingen en veldstatus (zoals checkout en account; samen naar FieldStatus in pagayo-design) */
.pw-lg-hint { margin: 0; color: var(--ink-muted); }
.pw-lg-err { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--danger); font-weight: 600; }
.pw-lg-err svg { flex-shrink: 0; margin-block-start: 2px; }
.pw-lg-alert { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-lg-alert p { margin: 0; }
.pw-lg-alert a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.pw-lg-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--ink-muted); }
.pw-lg-note svg { flex-shrink: 0; margin-block-start: 2px; }

/* Na het aanmaken: controleer je mail, of wacht op goedkeuring */
.pw-lg-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.pw-lg-done h1, .pw-lg-done p { margin: 0; }
.pw-lg-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--brand); }

/* Vanuit de checkout: verder als gast blijft een knop */
.pw-lg-guest { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface-tint); }
.pw-lg-guest p { margin: 0; }
.pw-lg-guest .pw-btn { align-self: stretch; }

@media (max-width: 760px) {
  .pw-lg { padding-block: var(--space-6) var(--pw-pad); }
  .pw-lg-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .pw-lg-code { font-size: 24px; }
  .pw-lg-col { gap: var(--space-6); }
}

/* Opdracht 428: alle winkels naar v2. Wat een winkel in v1 toonde, krijgt hier zijn plek. */

/* Tekst (rich_content): de vrije tekst van de winkelier, opgeschoond zoals v1. Koppen, alinea's, lijsten, links, afbeeldingen, tabellen. */
.pw-tekst { max-inline-size: 760px; display: flex; flex-direction: column; gap: var(--space-4); overflow-wrap: anywhere; }
.pw-tekst h1, .pw-tekst h2 { font-family: var(--pw-display); font-weight: var(--pw-display-weight); letter-spacing: var(--pw-display-track); font-size: 28px; line-height: 1.15; }
.pw-tekst > h2.pw-display-lg { font-size: 34px; line-height: 1.1; }
.pw-tekst h3 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.pw-tekst h4, .pw-tekst h5, .pw-tekst h6 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.pw-tekst > :is(h4, h5, h6, hr, table) { margin: 0; }
.pw-tekst p, .pw-tekst li { color: var(--ink); }
.pw-tekst ul, .pw-tekst ol { padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.pw-tekst ul { list-style: disc; }
.pw-tekst ol { list-style: decimal; }
.pw-tekst a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.pw-tekst a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-tekst img { block-size: auto; border-radius: var(--pw-r-card); }
.pw-tekst blockquote { border-inline-start: 3px solid var(--line); padding-inline-start: var(--space-4); color: var(--ink-muted); }
.pw-tekst table { border-collapse: collapse; inline-size: 100%; }
.pw-tekst th, .pw-tekst td { border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-3); text-align: start; vertical-align: top; }
.pw-tekst hr { border: 0; border-top: 1px solid var(--line); }

/* Gesplitst met elk aantal tegels: één breed, twee naast elkaar, drie of meer in een raster. */
.pw-split[data-tegels="1"] { grid-template-columns: minmax(0, 1fr); }
.pw-split[data-tegels="3"], .pw-split[data-tegels="5"], .pw-split[data-tegels="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-split[data-tegels="4"], .pw-split[data-tegels="7"], .pw-split[data-tegels="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-split[data-tegels="3"] .pw-split-panel, .pw-split[data-tegels="5"] .pw-split-panel, .pw-split[data-tegels="6"] .pw-split-panel, .pw-split[data-tegels="7"] .pw-split-panel, .pw-split[data-tegels="8"] .pw-split-panel { min-height: 320px; }
.pw-split-copy { min-inline-size: 0; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 6 5; }
.pw-split-sub { font-size: 16px; line-height: 1.4; color: var(--on-inverse); }
.pw-split-text { display: flex; flex-direction: column; gap: var(--space-2); color: var(--on-inverse); max-inline-size: 48ch; }
.pw-split-text a { color: var(--on-inverse); text-decoration: underline; }

/* Logo in de kop: de hoogte van de kop, de breedte volgt. */
.pw-logo-img { block-size: 40px; inline-size: auto; max-inline-size: 200px; object-fit: contain; }

/* Hoofdmenu met submenu: een uitklapper zonder script. */
.pw-catnav-sub { position: relative; flex-shrink: 0; }
.pw-catnav-sub > summary { list-style: none; cursor: pointer; min-height: var(--control-sm); display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pw-catnav-sub > summary::-webkit-details-marker { display: none; }
.pw-catnav-sub > summary::after { content: "▾" / ""; font-size: 12px; color: var(--ink-muted); }
.pw-catnav-sub > summary:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-catnav-sub > ul { position: absolute; inset-inline-start: 0; inset-block-start: 100%; z-index: 20; min-inline-size: 220px; list-style: none; padding: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--pw-r-card); box-shadow: var(--shadow-float); display: flex; flex-direction: column; }
.pw-catnav-sub > ul a { display: flex; inline-size: 100%; }
.pw-catnav:has(.pw-catnav-sub) { overflow: visible; flex-wrap: wrap; }

/* Strook: telefoon, e-mail en social links uit de topbalk van v1. */
.pw-announce-contact { font-weight: 600; white-space: nowrap; }

/* Voet: eigen tekst van de winkelier (tekstkolom en omschrijving), opgeschoond zoals v1. */
.pw-footer .pw-vt-text { display: flex; flex-direction: column; gap: var(--space-2); color: var(--on-inverse-muted); overflow-wrap: anywhere; }
.pw-footer .pw-vt-text a { color: var(--on-inverse); text-decoration: underline; }
.pw-footer .pw-vt-text strong { color: var(--on-inverse); }
.pw-footer .pw-vt-text ul { list-style: disc; padding-inline-start: var(--space-5); }
.pw-footer .pw-vt-text ol { list-style: decimal; padding-inline-start: var(--space-5); }

@media (max-width: 760px) {
  .pw-split[data-tegels] { grid-template-columns: minmax(0, 1fr); }
  .pw-tekst h1, .pw-tekst h2 { font-size: 24px; }
  .pw-logo-img { block-size: 32px; max-inline-size: 160px; }
  .pw-catnav-sub > ul { position: static; }
  .pw-announce .pw-wrap { flex-wrap: wrap; padding-block: var(--space-2); }
  .pw-announce-tools { flex-wrap: wrap; flex-shrink: 1; }
  .pw-tekst > h2.pw-display-lg { font-size: 28px; }
}

/* Opdracht 428, levering B: informatiepagina, blogbericht, blogoverzicht en partners (eerste weergave). */
.pw-pg { max-inline-size: 760px; margin-inline: auto; padding-block: var(--space-6) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.pw-pg-head { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-pg-head h1, .pw-pg-head p { margin: 0; }
.pw-pg-foto { inline-size: 100%; block-size: auto; border-radius: var(--pw-r-card); }
.pw-pg a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-lijst { padding-block: var(--space-6) var(--space-12); }
.pw-lijst a:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-lijst-bladeren { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.pw-pt-kaart { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); }
.pw-pt-logo { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--surface-warm); }

/* Opdracht 443 (basisdesign, Skicenter-ronde, 17 oktober 2026). */

/* A1 — knop strook: "donker" (standaard, inverse) of "merk" (merkkleur, tekst en iconen on-brand; contrast 4,5 bewaakt door resolveWinkelV2Brand). */
.pw { --pw-strip: var(--inverse); --pw-on-strip: var(--on-inverse); }
:is(.pw[data-strip="merk"], [data-strip="merk"] .pw) { --pw-strip: var(--brand); --pw-on-strip: var(--on-brand); }

/* A2 — strook: telefoon en e-mail met icoon, sociale kanalen als icoon, contact met icoon en woord (ook op de telefoon). */
.pw-announce-contact { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-announce-ic { flex: none; }
.pw-announce-social { padding-inline: 0; }

/* A3 — categorietegels: een uitgesneden foto staat op een licht vlak, de tekst op een verloop onderaan (niet meer een donkere laag over de hele tegel). */
.pw-split-panel { background: var(--surface-warm); }
.pw-split-panel .pw-link { color: var(--on-inverse); }
/* Het verloop loopt alleen in de bovenruimte van 48px; waar tekst staat is het vlak minstens 82% donker (ook bij een hoog tekstblok). */
.pw-split-panel .pw-split-copy { --pw-focus: var(--on-inverse); inline-size: 100%; padding-block-start: var(--space-12); background: linear-gradient(to top, color-mix(in srgb, var(--media-dark) 92%, transparent) 0%, color-mix(in srgb, var(--media-dark) 82%, transparent) calc(100% - var(--space-12)), transparent 100%); }
.pw-split-panel .pw-split-copy:empty { padding: 0; background: none; }
/* De tegel zelf is nu licht: de focusring in inkt, buiten de tegel (op de pagina). */
.pw-split-panel { --pw-focus: var(--ink); }
.pw .pw-split-panel:focus-visible { outline-offset: 2px; }

/* A3 — knop categorietegel: "tegel" (standaard) of "cirkel": de foto als cirkel, de naam eronder in de tekstkleur.
   Geldt voor de banners én voor de rij categorieën (`pw-split-rij`: een blok in categoriemodus). Opdracht 458: de knop `categorierij`
   ("volg", standaard, of "cirkel") maakt alleen die rij cirkel, ook als de banners tegel blijven. Niet voor een banner op de categoriepagina. */
:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) { --pw-tile-disc: var(--category-disc); }
:is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) { --pw-tile-disc: var(--category-disc); }
/* Opdracht 480 (C34): gelijk aan "Shop op categorie" in het ontwerp. De cirkels staan in gelijke kolommen over de volle breedte van de inhoud
   (zoveel kolommen als er categorieën zijn, tot 6; daarboven 6 kolommen en een volgende regel), de cirkel zelf blijft hooguit --category-disc, gecentreerd.
   Niet meer `auto-fill`: dat liet rechts lege kolommen over en duwde de rondjes links tegen elkaar. Op de telefoon: tot en met 6 categorieën in 3 kolommen,
   meer dan 6 in één rij die horizontaal scrolt. Het aantal staat in `data-tegels` (gesplitst.ts). */
:is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--pw-gap); }
:is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="1"]) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
:is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="3"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="4"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="5"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels .pw-split-panel { --pw-focus: var(--ink); min-height: 0; flex-direction: column; align-items: center; gap: var(--space-3); overflow: visible; background: transparent; color: var(--ink); text-align: center; }
:is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij .pw-split-panel { --pw-focus: var(--ink); min-height: 0; flex-direction: column; align-items: center; gap: var(--space-3); overflow: visible; background: transparent; color: var(--ink); text-align: center; }
:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels .pw-split-panel .pw-media { position: static; inline-size: 100%; max-inline-size: var(--pw-tile-disc); aspect-ratio: 1 / 1; padding: 0; border-radius: var(--radius-pill); background: var(--surface-warm); }
:is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij .pw-split-panel .pw-media { position: static; inline-size: 100%; max-inline-size: var(--pw-tile-disc); aspect-ratio: 1 / 1; padding: 0; border-radius: var(--radius-pill); background: var(--surface-warm); }
:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels .pw-split-panel .pw-split-copy { --pw-focus: var(--ink); padding: 0; align-items: center; gap: var(--space-1); background: none; }
:is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij .pw-split-panel .pw-split-copy { --pw-focus: var(--ink); padding: 0; align-items: center; gap: var(--space-1); background: none; }
:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels .pw-split-panel .pw-display-lg { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
:is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij .pw-split-panel .pw-display-lg { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels .pw-split-panel :is(.pw-split-sub, .pw-split-text, .pw-split-text a, .pw-link) { color: var(--ink-muted); }
:is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij .pw-split-panel :is(.pw-split-sub, .pw-split-text, .pw-split-text a, .pw-link) { color: var(--ink-muted); }
@media (max-width: 760px) {
  :is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  :is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="1"]) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  :is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):is([data-tegels="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Meer dan zes: één rij die zijwaarts scrolt; ruimte rondom zodat de focusring niet wordt afgesneden. */
  :is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):not([data-tegels="1"], [data-tegels="2"], [data-tegels="3"], [data-tegels="4"], [data-tegels="5"], [data-tegels="6"]) { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: var(--space-4); padding: var(--space-1); margin: calc(var(--space-1) * -1); }
  :is(:is(.pw[data-tiles="cirkel"], [data-tiles="cirkel"] .pw) .pw-split-tegels, :is(.pw[data-rows="cirkel"], [data-rows="cirkel"] .pw) .pw-split-rij):not([data-tegels="1"], [data-tegels="2"], [data-tegels="3"], [data-tegels="4"], [data-tegels="5"], [data-tegels="6"]) > .pw-split-panel { flex: 0 0 calc(var(--category-disc) - var(--space-6)); scroll-snap-align: start; }
}

/* A4/A16 — voet ronde 2. Tekst van de winkelier in een voetkolom krijgt de opmaak van de voet: een link ziet eruit als elke voetlink. */
.pw-footer .pw-vt-cols .pw-vt-text { color: var(--on-inverse-muted); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pw-footer .pw-vt-cols .pw-vt-text a { display: inline-flex; align-items: center; min-height: var(--control-sm); color: var(--on-inverse-muted); text-decoration: none; }
.pw-footer .pw-vt-cols .pw-vt-text a:hover { color: var(--on-inverse); text-decoration: underline; }
/* Volgen: icoon plus naam, onder het contactblok (geen eigen kolom). */
.pw-footer .pw-vt-social a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.pw-footer .pw-vt-social a:hover { text-decoration: underline; }
/* Openingstijden als lijst: dag kort, tijd met gelijke cijferbreedte. */
.pw-vt-hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; color: var(--on-inverse-muted); font-variant-numeric: tabular-nums; }
.pw-vt-hours dt { color: var(--on-inverse); font-weight: 600; }
.pw-vt-hours dd { margin: 0; }

/* A10 — kruimelpad: alleen de weg terug, één smalle regel; op de telefoon alleen "‹ Categorie". */
.pw-crumbs { padding-block-start: var(--space-2); }
.pw-crumbs ol { font-size: 13px; }

/* A7 — "Over dit product": een leeskolom over de breedte, specificaties eronder. */
.pw-pd-over { display: flex; flex-direction: column; gap: var(--space-6); }
.pw-pd-prose { display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 72ch; color: var(--ink); line-height: 1.6; }
.pw-pd-prose :is(p, ul, ol) { margin: 0; }
.pw-pd-specs-kop { margin: 0; }
.pw-pd-over .pw-specs th { inline-size: 30%; }
/* Artikelnummer en merk als kleine regel onder de koopknop. */
.pw-buy-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: 13px; color: var(--ink-muted); }
.pw-buy-meta b { font-weight: 600; color: var(--ink); }

/* A9 — dialoog (Dialog): een venster boven de pagina, met kop, sluitknop en inhoud. Native <dialog> met showModal(): focusval en Escape van de browser.
   Zolang hij open is, scrolt de pagina eronder niet; sluit hij (ook met Escape), dan scrolt ze weer, zonder script. */
.pw-dialog { padding: 0; border: 0; border-radius: var(--pw-r-card); background: var(--surface); color: var(--ink); inline-size: min(720px, calc(100% - 2 * var(--space-4))); max-inline-size: none; max-block-size: calc(100% - 2 * var(--space-8)); box-shadow: var(--shadow-float); overflow: hidden; }
.pw-dialog[open] { display: flex; flex-direction: column; }
.pw-dialog::backdrop { background: var(--scrim); }
:root:has(.pw-dialog[open]) { overflow: hidden; }
.pw-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); padding-inline-start: var(--space-5); padding-inline-end: var(--space-3); border-block-end: 1px solid var(--line); }
.pw-dialog-head h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.pw-dialog-body { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--space-5); }

/* A12 — contactgegevens van een afspraak: velden van het basisdesign (label boven, 48 hoog, fout bij het veld). */
.pw-bd-contact { display: flex; flex-direction: column; gap: var(--space-4); inline-size: 100%; }
.pw-bd-contact h3 { margin: 0; font-size: 18px; }
.pw-field-err { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: 14px; font-weight: 600; color: var(--danger); }
/* De bevestiging van een afspraak gebruikt de bedankkop (ThanksHead: pw-ty-head, pw-ty-mark, pw-ty-ref). */
.pw-bd-done { display: flex; flex-direction: column; gap: var(--space-5); inline-size: 100%; }
.pw-bd-done .pw-btn { align-self: flex-start; }

/* A6 — meldingen (Toast): wat er gebeurde na een klik (in winkelwagen gelegd, fout). Altijd tekst, nooit kleur alleen. */
.pw-toasts { position: fixed; inset-block-start: var(--space-4); inset-inline: var(--space-4); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; }
.pw-toast { --pw-focus: var(--on-inverse); pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); max-inline-size: 480px; padding: var(--space-3) var(--space-4); border-radius: var(--pw-r); background: var(--inverse); color: var(--on-inverse); font-size: 15px; font-weight: 600; box-shadow: var(--shadow-float); }
.pw-toast[data-soort="fout"] { --pw-focus: var(--ink); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-inline-start: 4px solid var(--danger); }
.pw-toast a { color: inherit; text-decoration: underline; }

/* A9 — cookiebanner (Consent): een kaart onderaan, met keuzes van het basisdesign. */
.pw-consent { position: fixed; inset-block-end: var(--space-4); inset-inline: var(--space-4); z-index: 50; max-inline-size: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--pw-r-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.pw-consent h2 { margin: 0; font-size: 18px; }
.pw-consent p { margin: 0; color: var(--ink-muted); }
.pw-consent-keuzes { display: flex; flex-direction: column; gap: var(--space-1); }
.pw-consent-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 760px) {
  .pw-crumbs li { display: none; }
  .pw-crumbs li.pw-crumbs-terug { display: inline-flex; }
  .pw-crumbs li.pw-crumbs-terug::before { content: "‹" / ""; color: var(--ink-muted); }
  .pw-dialog { inline-size: 100%; block-size: 100%; max-block-size: none; border-radius: 0; }
}

/* Opdracht 454: mobiel menu. De la, de knop en de strook op de telefoon. Zonder pw-js blijft de categorierij. */
.pw-menu-btn { display: none; }

@media (max-width: 760px) {
  .pw-js .pw-menu-btn { display: inline-flex; margin-inline-start: calc(var(--space-2) * -1); }
  .pw-js .pw-catnav { display: none; }
  .pw-header-row { gap: var(--space-2); }
  .pw-header-row .pw-logo { margin-inline-end: auto; }
  .pw-js .pw-announce .pw-announce-social,
  .pw-js .pw-announce .pw-announce-contact--pagina { display: none; }
}

.pw-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  margin: 0;
  padding: 0;
  border: 0;
  inline-size: 420px;
  max-inline-size: calc(100% - var(--control-md));
  block-size: 100%;
  max-block-size: 100%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  font-family: var(--font-sans);
}
.pw-menu[open] { display: flex; flex-direction: column; }
.pw-menu:focus { outline: none; }
.pw-menu::backdrop { background: var(--scrim); }
html:has(.pw-menu[open]) { overflow: hidden; }

.pw-menu-top {
  flex-shrink: 0;
  min-block-size: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-4) var(--space-2);
  border-block-end: 1px solid var(--line);
}

.pw-menu-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.pw-menu-list { list-style: none; margin: 0; padding: 0; }
.pw-menu-list > li { border-block-end: 1px solid var(--line); }

.pw-menu-list > li > a,
.pw-menu-sub > summary {
  min-block-size: calc(var(--control-md) + var(--space-2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.pw-menu-sub > summary { list-style: none; }
.pw-menu-sub > summary::-webkit-details-marker { display: none; }
.pw-menu-sub > summary:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-menu-chev { flex-shrink: 0; color: var(--ink-muted); }
.pw-menu-sub[open] > summary .pw-menu-chev { transform: rotate(180deg); }

.pw-menu-sub ul {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  background: var(--surface-sunk);
}
.pw-menu-sub li a {
  min-block-size: var(--control-md);
  display: flex;
  align-items: center;
  padding-inline: var(--space-8) var(--space-4);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.pw-menu-sub li:first-child a { font-weight: 700; }

.pw-menu-list a[aria-current="page"] { border-inline-start: 3px solid var(--brand); }
.pw-menu-list .pw-menu-sale { color: var(--sale); }

.pw-menu-list--rustig { padding-block: var(--space-2); }
.pw-menu-list--rustig > li { border: 0; }
.pw-menu-list--rustig > li > a {
  min-block-size: var(--control-md);
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 500;
}
.pw-menu-list--rustig svg { color: var(--ink-muted); }

.pw-menu-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-6);
  background: var(--surface-warm);
  border-block-start: 1px solid var(--line);
}
.pw-menu-contact a.pw-menu-way {
  min-block-size: var(--control-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.pw-menu-social { display: flex; gap: var(--space-1); margin-inline-start: calc(var(--space-2) * -1); }

@media (prefers-reduced-motion: no-preference) {
  .pw-menu[open] { animation: pw-menu-in 200ms ease-out; }
  .pw-menu[open]::backdrop { animation: pw-menu-fade 200ms ease-out; }
  .pw-menu-chev { transition: transform 150ms ease-out; }
  .pw-menu[open]:dir(rtl) { animation-name: pw-menu-in-rtl; }
  @keyframes pw-menu-in-rtl { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes pw-menu-in { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes pw-menu-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ——— Basisdesign, ronde 18 oktober 2026 (opdracht 456) ——— */

/* C1: in een tegel staat een ondertitel (bijv. de omschrijving van een categorie) op hooguit drie regels. In een cirkel
   tekent de winkel alleen foto en naam; de naam staat hierboven op hooguit twee regels. */
.pw-split-tegels .pw-split-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* C5: een productrij met minder kaarten dan kolommen staat in het midden, met dezelfde kaartbreedte. */
.pw-grid-4:has(> .pw-product):not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, calc((100% - 3 * var(--pw-gap)) / 4)); justify-content: center; }

/* C21: de intro van een categorie is één regel over de volle breedte, afgekapt, met "Lees meer" erachter.
   De hele omschrijving onderaan houdt een leesbreedte. */
.pw-cat-intro { display: flex; align-items: baseline; gap: var(--space-2); max-inline-size: none; min-inline-size: 0; }
.pw-cat-intro > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.pw-cat-intro > a { flex-shrink: 0; }
.pw-cat-about .pw-prose { max-inline-size: 75ch; }

/* C27: prijs, oude prijs en kortingslabel op één lijn met vaste ruimte; past het niet, dan loopt het label door. */
.pw-buy-price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pw-buy-price .pw-price-was { margin-inline-start: 0; }

/* C31: het aantal links van "In de winkelwagen", op één regel en even hoog, zoals de bundel (.pw-bd-qty);
   het woord "Aantal" alleen voor schermlezers. Voorraad en prijs staan erboven. */
.pw-buy .product-purchase-footer[data-slots*="quantity"][data-slots*="submit"] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
.pw-buy .product-purchase-footer[data-slots*="quantity"][data-slots*="submit"] > .product-purchase-footer__price-stock { grid-column: 1 / -1; order: -1; }
.pw-buy .product-purchase-footer__quantity-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pw-buy .product-purchase-footer__quantity .add-to-cart { display: flex; block-size: 100%; }
.pw-buy .add-to-cart-quantity { block-size: var(--control-md); border-radius: var(--pw-r-btn); background: var(--surface); }
.pw-buy .add-to-cart-quantity-btn { inline-size: var(--control-md); block-size: 100%; border-radius: inherit; }
.pw-buy .add-to-cart-quantity-value { min-inline-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .pw-grid-4:has(> .pw-product):not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, calc((100% - var(--pw-gap)) / 2)); }
}
/* @pagayo-winkel-v2:bundle end */