/*!
 * 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.43.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;
  --sier: #e2b97f;
  --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;
  --font-sier: "Snell Roundhand", "Segoe Script", "Apple Chancery", cursive;
  --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) · data-strip ook licht (573)
   De kop (573): data-header-sticky (geen|menu|kop|alles; standaard kop) · data-header-height (laag|normaal|hoog)
   data-header-width (pagina|vol) · data-header-color (licht|donker|merk) · data-menu-color (zoals-kop|licht|donker|merk)
   data-header-layout (logo-links|logo-midden) · data-search-style (balk|icoon) · data-logo-size (klein|normaal|groot)
   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 { position: var(--pw-kop-pos); inset-block-start: var(--pw-kop-top); z-index: 25; --pw-focus: var(--pw-on-kop); background: var(--pw-kop-bg); color: var(--pw-on-kop); border-bottom: 1px solid var(--pw-kop-lijn); }
.pw-header-row { min-height: var(--pw-kop-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-header .pw-logo { font-size: var(--pw-logo-tekst); }
.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 { --pw-focus: var(--pw-on-menu); display: flex; gap: var(--space-1); align-items: center; min-height: var(--pw-menubalk-h); overflow-x: auto; color: var(--pw-on-menu); }
.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(--pw-menu-sale); text-decoration: var(--pw-menu-sale-lijn); }
.pw-catnav .pw-catnav-end { margin-inline-start: auto; font-weight: 500; color: var(--pw-on-menu-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: var(--pw-kop-vast); 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); }
/* De kop is altijd gepositioneerd (--pw-kop-pos: sticky, of relative bij kopvast=geen), dus de z-index werkt; geen
   position hier, anders springt een vaste kop tijdens het zoeken terug naar zijn plek in de pagina (573). */
.pw-zk-open .pw-header { 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: calc(var(--pw-kop-vast) + 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 { 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: var(--pw-logo-h); inline-size: auto; max-inline-size: var(--pw-logo-breed); 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(--pw-on-menu-muted); }
.pw-catnav-sub > summary:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; }
.pw-catnav-sub > ul { --pw-focus: var(--ink); color: var(--ink); 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-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; }

/* 581 — tegel met sierlijke tekst (tegelstijl `sierlijk` van category_banners): een sierregel in schrijfletter, een grote kop,
   een gouden lijntje en een kleine regel in kapitalen, aan één kant van de foto (`data-kant`: eind standaard, begin) op een
   zachte donkere gloed (een ellips zonder richting, dus ook goed van rechts naar links). De schrijfletter is een systeemletter
   (geen lettertype laden). Het goud (--sier) is bewust vast en volgt de merkkleur niet: de merkkleur haalt op het donker
   het contrast niet altijd. Op de telefoon staat de tekst onderaan. */
.pw-split-panel.pw-sierlijk { --pw-sier-schaal: 1; align-items: stretch; justify-content: flex-end; }
.pw-split-panel.pw-sierlijk[data-kant="begin"] { justify-content: flex-start; }
.pw-split-panel.pw-sierlijk .pw-split-copy { inline-size: min(100%, max(62%, 18rem)); padding: var(--space-8); gap: 0; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse farthest-side at center, color-mix(in srgb, var(--media-dark) 92%, transparent) 0%, color-mix(in srgb, var(--media-dark) 85%, transparent) 62%, transparent 100%); }
/* De letters dragen zelf ook een donkere gloed: aan de rand van het tekstvak, over een lichte foto, blijft de tekst leesbaar. */
.pw-sier-accent, .pw-sier-kop, .pw-sier-sub { text-shadow: 0 0 var(--space-3) var(--media-dark), 0 0 var(--space-1) var(--media-dark); }
.pw-sier-accent { font-family: var(--font-sier); color: var(--sier); font-size: calc(40px * var(--pw-sier-schaal)); line-height: 1.15; text-wrap: balance; }
.pw-sier-kop { font-family: var(--font-serif); font-weight: 700; color: var(--on-inverse); font-size: calc(44px * var(--pw-sier-schaal)); line-height: 1.05; }
.pw-sier-lijn { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; max-inline-size: 15rem; margin-block: var(--space-4) var(--space-2); color: var(--sier); font-size: 16px; line-height: 1; }
.pw-sier-lijn::before, .pw-sier-lijn::after { content: ""; flex: 1; block-size: 1px; background: currentColor; }
.pw-sier-sub { font-family: var(--font-serif); color: var(--on-inverse); font-size: 15px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; }
.pw-split[data-tegels="3"] .pw-sierlijk, .pw-split[data-tegels="5"] .pw-sierlijk, .pw-split[data-tegels="6"] .pw-sierlijk { --pw-sier-schaal: 0.8; }
@media (max-width: 760px) {
  .pw-split-panel.pw-sierlijk, .pw-split-panel.pw-sierlijk[data-kant="begin"] { --pw-sier-schaal: 0.75; align-items: flex-end; justify-content: center; }
  .pw-split-panel.pw-sierlijk .pw-split-copy { inline-size: 100%; padding: var(--space-12) var(--space-6) var(--space-8); }
}

/* 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(--pw-kop-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)); }
}

/* Opdracht 573 (23 oktober 2026, stuk A van het kopplan): de kop in de bandbreedte van Kora. Strook, kopregel en
   menubalk: vast tijdens scrollen, hoogte, breedte, kleur (alleen rollen), indeling, zoeken als balk of icoon, de maat
   van het logo en "Naar inhoud". De standaard van elke knop is de look van vóór 573, behalve kopvast: standaard kop
   (kopregel en menu vast; besluit Sjoerd, 23 oktober 2026). Het contract voor de winkel staat in README.md. */
.pw {
  --pw-kop-h: var(--header-h);
  --pw-kop-breed: var(--container);
  --pw-kop-bg: var(--surface);
  --pw-on-kop: var(--ink);
  --pw-on-kop-muted: var(--ink-muted);
  --pw-kop-lijn: var(--line);
  --pw-kop-teller: var(--action);
  --pw-on-kop-teller: var(--on-action);
  --pw-menu-bg: var(--pw-kop-bg);
  --pw-on-menu: var(--pw-on-kop);
  --pw-on-menu-muted: var(--pw-on-kop-muted);
  --pw-menu-sale: var(--sale);
  --pw-menu-sale-lijn: none;
  --pw-menubalk-h: 48px;
  --pw-strook-h: var(--control-sm);
  --pw-kop-pos: sticky;
  --pw-kop-top: 0px;
  /* Wat bovenaan bedekt is als de kop vast staat. De bundel schat het per stand; de winkel meet het en zet
     --pw-kop-gemeten inline op .pw. Focus, ankers en vaste vakken (winkelwagen, werkbalk) lezen --pw-kop-vast. */
  --pw-kop-gemeten: calc(var(--pw-kop-h) + var(--pw-menubalk-h) + 1px);
  --pw-kop-vast: var(--pw-kop-gemeten);
  --pw-kop-telefoon: calc(var(--control-sm) * 2 + var(--space-2) * 3 + 1px);
  --pw-logo-h: 40px;
  --pw-logo-breed: 200px;
  --pw-logo-tekst: 22px;
}
:is(.pw-announce, .pw-header) > .pw-wrap { max-width: var(--pw-kop-breed); }
.pw-header .pw-count { background: var(--pw-kop-teller); color: var(--pw-on-kop-teller); }
/* Het zoekveld en de suggesties zijn een licht eiland in de kop: inkt als focus; de ring om het veld zelf ligt op de kop. */
.pw-search { --pw-focus: var(--ink); }
.pw-header .pw-zk-field:focus-within { outline-color: var(--pw-on-kop); }
.pw :is(:focus, :target) { scroll-margin-block-start: var(--pw-kop-vast); }

/* kophoogte, kopbreedte, logomaat */
:is(.pw[data-header-height="laag"], [data-header-height="laag"] .pw) { --pw-kop-h: 56px; }
:is(.pw[data-header-height="hoog"], [data-header-height="hoog"] .pw) { --pw-kop-h: 88px; }
:is(.pw[data-header-width="vol"], [data-header-width="vol"] .pw) { --pw-kop-breed: none; }
:is(.pw[data-logo-size="klein"], [data-logo-size="klein"] .pw) { --pw-logo-h: 32px; --pw-logo-breed: 160px; --pw-logo-tekst: 18px; }
:is(.pw[data-logo-size="groot"], [data-logo-size="groot"] .pw) { --pw-logo-h: 56px; --pw-logo-breed: 280px; --pw-logo-tekst: 28px; }

/* Kleuren: alleen rollen. merk is de bewaakte merkkleur (resolveWinkelV2Brand: on-brand haalt 4,5 op brand). Sale is op
   een donkere of merkkleurige balk de tekstkleur van de balk, onderstreept: rood haalt daar geen 4,5. */
:is(.pw[data-strip="licht"], [data-strip="licht"] .pw) { --pw-strip: var(--surface-warm); --pw-on-strip: var(--ink); }
:is(.pw[data-header-color="donker"], [data-header-color="donker"] .pw) { --pw-kop-bg: var(--inverse); --pw-on-kop: var(--on-inverse); --pw-on-kop-muted: var(--on-inverse-muted); --pw-kop-lijn: var(--inverse); --pw-kop-teller: var(--on-inverse); --pw-on-kop-teller: var(--inverse); --pw-menu-sale: var(--on-inverse); --pw-menu-sale-lijn: underline; }
:is(.pw[data-header-color="merk"], [data-header-color="merk"] .pw) { --pw-kop-bg: var(--brand); --pw-on-kop: var(--on-brand); --pw-on-kop-muted: var(--on-brand); --pw-kop-lijn: var(--brand); --pw-kop-teller: var(--on-brand); --pw-on-kop-teller: var(--brand); --pw-menu-sale: var(--on-brand); --pw-menu-sale-lijn: underline; }
:is(.pw[data-menu-color="licht"], [data-menu-color="licht"] .pw) { --pw-kop-lijn: var(--line); --pw-menu-bg: var(--surface); --pw-on-menu: var(--ink); --pw-on-menu-muted: var(--ink-muted); --pw-menu-sale: var(--sale); --pw-menu-sale-lijn: none; }
:is(.pw[data-menu-color="donker"], [data-menu-color="donker"] .pw) { --pw-kop-lijn: var(--inverse); --pw-menu-bg: var(--inverse); --pw-on-menu: var(--on-inverse); --pw-on-menu-muted: var(--on-inverse-muted); --pw-menu-sale: var(--on-inverse); --pw-menu-sale-lijn: underline; }
:is(.pw[data-menu-color="merk"], [data-menu-color="merk"] .pw) { --pw-kop-lijn: var(--brand); --pw-menu-bg: var(--brand); --pw-on-menu: var(--on-brand); --pw-on-menu-muted: var(--on-brand); --pw-menu-sale: var(--on-brand); --pw-menu-sale-lijn: underline; }
/* De lijn onder de kop hoort bij de onderste balk: met een eigen menukleur volgt hij het menu.
   Een eigen menukleur loopt over de hele breedte: border-image verft buiten de doos zonder iets af te knippen (het
   uitklapmenu blijft zichtbaar) en zonder extra markup. */
:is(.pw[data-menu-color="licht"], [data-menu-color="licht"] .pw, .pw[data-menu-color="donker"], [data-menu-color="donker"] .pw, .pw[data-menu-color="merk"], [data-menu-color="merk"] .pw) .pw-catnav { border-image: linear-gradient(var(--pw-menu-bg) 0 0) fill 0 / 0 / 0 100vmax; }

/* kopvast op het scherm. kop (standaard): de kop (kopregel en menu) vast op 0. menu: de kop vast op min de kopregel, zodat
   alleen het menu blijft; met focus in de kopregel komt hij terug. alles: het omhulsel .pw-kop (strook en kop) vast op 0;
   zonder omhulsel gedraagt alles zich als kop. geen: niets vast (relative, zodat de kop boven de zoekdimmer kan). */
.pw-kop { display: contents; z-index: 25; }
.pw-zk-open .pw-kop { z-index: 41; }
:is(.pw[data-header-sticky="geen"], [data-header-sticky="geen"] .pw) { --pw-kop-pos: relative; --pw-kop-vast: 0px; }
:is(.pw[data-header-sticky="menu"], [data-header-sticky="menu"] .pw) { --pw-kop-top: calc(var(--pw-kop-h) * -1); --pw-kop-gemeten: calc(var(--pw-menubalk-h) + 1px); }
:is(.pw[data-header-sticky="menu"], [data-header-sticky="menu"] .pw) .pw-header:focus-within { --pw-kop-top: 0px; }
:is(.pw[data-header-sticky="alles"], [data-header-sticky="alles"] .pw) { --pw-kop-gemeten: calc(var(--pw-strook-h) + var(--pw-kop-h) + var(--pw-menubalk-h) + 1px); }
@media (min-width: 761px) {
  :is(.pw[data-header-sticky="alles"], [data-header-sticky="alles"] .pw) .pw-kop { display: block; position: sticky; inset-block-start: 0; }
  :is(.pw[data-header-sticky="alles"], [data-header-sticky="alles"] .pw) .pw-kop > .pw-header { position: relative; }
}

/* kopindeling: logo in het midden, zoeken aan het begin, acties aan het eind (raster: spiegelt in rechts-naar-links).
   De zijkolommen worden nooit smaller dan hun inhoud: past het niet, dan schuift het logo iets op, er valt niets weg. */
:is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) { --pw-kop-raster: 1fr auto 1fr; }
:is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row { display: grid; grid-template-columns: var(--pw-kop-raster); }
:is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row > .pw-logo { grid-column: 2; grid-row: 1; justify-self: center; }
:is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row > .pw-search { grid-column: 1; grid-row: 1; justify-self: start; inline-size: 100%; }
:is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row > .pw-header-actions { grid-column: 3; grid-row: 1; justify-self: end; }

/* zoekvorm icoon: het formulier is een raakvlak; het veld ligt er onzichtbaar over (klikbaar en met Tab bereikbaar) en
   met focus klapt het formulier open over de hele kopregel. Geen script. */
:is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) .pw-header-row { position: relative; }
:is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) .pw-search:not(:focus-within) { flex: 0 0 var(--control-sm); inline-size: var(--control-sm); padding-inline: 0; justify-content: center; background: transparent; color: inherit; }
:is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) .pw-search:not(:focus-within) input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
:is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) .pw-search:not(:focus-within) .pw-zk-x { display: none; }
:is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) .pw-search:focus-within { position: absolute; inset-inline: 0; inset-block: 0; margin-block: auto; block-size: var(--control-sm); max-width: none; z-index: 2; }

/* Naar inhoud: de eerste link van de pagina, zichtbaar zodra hij focus heeft, boven alles. */
.pw-skip { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 70; display: inline-flex; align-items: center; min-height: var(--control-sm); padding-inline: var(--space-4); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-float); transform: translateY(-200%); }
.pw-skip:focus { transform: none; }
.pw-skip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 760px) {
  .pw { --pw-logo-h: 32px; --pw-logo-breed: 160px; }
  :is(.pw[data-logo-size="klein"], [data-logo-size="klein"] .pw) { --pw-logo-h: 28px; --pw-logo-breed: 140px; }
  :is(.pw[data-logo-size="groot"], [data-logo-size="groot"] .pw) { --pw-logo-h: 40px; --pw-logo-breed: 200px; }
  /* Telefoon: alleen de kop kan vast (het menu is de lade, de strook schuift mee weg), en alleen als het script van de
     winkel draait (data-kop-js op <html>): dat schuift hem weg bij omlaag scrollen. Zonder script schuift hij mee. */
  .pw:not(.pw[data-kop-js], [data-kop-js] .pw) { --pw-kop-pos: relative; --pw-kop-top: 0px; --pw-kop-vast: 0px; }
  :is(.pw[data-kop-js]:not([data-header-sticky="geen"]), [data-kop-js]:not([data-header-sticky="geen"]) .pw) { --pw-kop-top: 0px; --pw-kop-gemeten: var(--pw-kop-telefoon); }
  :is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) { --pw-kop-telefoon: calc(max(var(--pw-kop-h), var(--control-sm) + var(--space-2) * 2) + 1px); }
  :is(.pw[data-search-style="icoon"], [data-search-style="icoon"] .pw) .pw-search:not(:focus-within) { order: 0; flex-basis: var(--control-sm); }
  /* Logo in het midden: menuknop, logo, acties; zoeken als balk op een eigen regel, als icoon naast de menuknop. De
     telefoon is te smal voor twee gelijke zijkolommen: de knoppen houden hun plek, het logo krimpt in het midden (een lange
     naam breekt tussen woorden; geen beletselteken, dat zou generate-rtl-truncate in elke v1-bundel zetten). */
  :is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) { --pw-kop-raster: auto minmax(0, 1fr) auto; }
  :is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row > .pw-logo { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-align: center; line-height: 1.15; }
  :is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row > .pw-menu-btn { grid-column: 1; grid-row: 1; justify-self: start; }
  :is(.pw[data-header-layout="logo-midden"], [data-header-layout="logo-midden"] .pw) .pw-header-row > .pw-search { grid-column: 1 / -1; grid-row: 2; }
  :is(.pw[data-header-layout="logo-midden"][data-search-style="icoon"], [data-header-layout="logo-midden"][data-search-style="icoon"] .pw) .pw-header-row > .pw-search:not(:focus-within) { grid-column: 1; grid-row: 1; justify-self: start; }
  .pw-js:is(.pw[data-header-layout="logo-midden"][data-search-style="icoon"], [data-header-layout="logo-midden"][data-search-style="icoon"] .pw) .pw-header-row > .pw-search:not(:focus-within),
  .pw-js :is(.pw[data-header-layout="logo-midden"][data-search-style="icoon"], [data-header-layout="logo-midden"][data-search-style="icoon"] .pw) .pw-header-row > .pw-search:not(:focus-within) { margin-inline-start: var(--control-sm); }
}
/* Telefoon: de winkel zet data-kop-verborgen op <html> bij omlaag scrollen en haalt het weg bij omhoog. Alleen als de
   bezoeker beweging wil; niet als de kop focus heeft; niet bij kopvast=geen. Bij minder beweging blijft de kop staan. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .pw-header { transition: transform 200ms ease; }
  .pw-toolbar { transition: inset-block-start 200ms ease; }
  :is(.pw[data-kop-verborgen]:not([data-header-sticky="geen"]), [data-kop-verborgen]:not([data-header-sticky="geen"]) .pw):not(:has(.pw-header:focus-within)) { --pw-kop-vast: 0px; }
  :is(.pw[data-kop-verborgen]:not([data-header-sticky="geen"]), [data-kop-verborgen]:not([data-header-sticky="geen"]) .pw) .pw-header:not(:focus-within) { transform: translateY(-100%); }
}
/* @pagayo-winkel-v2:bundle end */