/* Pagayo Winkel · categoriepagina
   Tokens uit design-system/tokens.json. Opbouw uit de categoriepagina op Origin. */

:root,
[data-theme="light"] {
  --surface: #ffffff;
  --surface-warm: #f4f4f2;
  --surface-tint: #ecf0f3;
  --surface-sunk: #e9eaec;
  --media-dark: #3a3e44;
  --line: #e3e5e8;
  --line-strong: #868d97;
  --ink: #17191c;
  --ink-muted: #5b616b;
  --inverse: #17191c;
  --on-inverse: #ffffff;
  --on-inverse-muted: #9aa0a8;
  --brand: #2d4f6b;
  --on-brand: #ffffff;
  --action: #17191c;
  --on-action: #ffffff;
  --sale: #b42318;
  --success: #067647;
  --font-sans: "Manrope", system-ui, "Segoe UI", "Noto Sans", sans-serif;
  --font-serif: "Fraunces", "Noto Serif", Georgia, serif;
  --font-grotesk: "Space Grotesk", system-ui, "Noto Sans", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-section: 96px;
  --space-section-compact: 56px;
  --radius-sharp: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --control-md: 48px;
  --control-sm: 44px;
  --header-h: 72px;
  --container: 1200px;
  --category-disc: 128px;
  --pw-focus: var(--ink);
  --shadow-float: 0 12px 32px rgba(23, 25, 28, 0.14);
}

[data-theme="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;
  --on-inverse-muted: #9aa0a8;
  --brand: #9cbcd8;
  --on-brand: #0f1a24;
  --action: #f2f3f5;
  --on-action: #121417;
  --sale: #f97066;
  --success: #47cd89;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
}


/* Pagayo Winkel (v2) · categoriepagina · voorstel voor nieuwe bouwstenen (7 oktober 2026)
   Laadt na @pagayo/design/winkel-v2.css (2.16.0) en leest alleen de tokens daarvan en de --pw-* van de bundel.
   Nieuw: Breadcrumbs, CategoryHeader, SubcategoryNav, ListToolbar, ActiveFilters, FilterPanel, FilterSheet,
   ProductGrid, LoadMore, EmptyResult. Bestaand en ongewijzigd: ProductCard, Chip, Field, Button.
   Elke losse maat staat met zijn reden in README.md, tabel "Wat geen token is". */

/* 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 { display: flex; align-items: baseline; gap: var(--space-2); max-inline-size: none; min-inline-size: 0; color: var(--ink-muted); }
.pw-cat-intro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.pw-cat-intro a { flex-shrink: 0; color: var(--ink); text-decoration: underline; }

/* SubcategoryNav: Chips als links */
.pw-subcats { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.pw-subcats .pw-chip { justify-content: flex-start; }
.pw-subcats .pw-chip[aria-pressed="true"] { 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: 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(4, 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: inline-flex; }

/* 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(--pw-focus); 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-cols { display: none; }
  .pw-cat-head { padding-block: var(--space-4) var(--space-5); }
  .pw-subcats { flex-wrap: nowrap; }
  .pw-grid-products, .pw-plp--nofilters .pw-grid-products, .pw-grid-products[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .pw-toolbar { position: sticky; inset-block-start: 0; z-index: 2; padding-block-start: var(--space-3); }
  .pw-cat-about { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-crumbs li:not(:nth-last-child(-n+2)) { display: none; }
  .pw-crumbs li:nth-last-child(2)::before { content: none; }
}

/* Filtervenster, zoals Stetson: over de pagina, niet vast naast de producten */
.pw-drawer-back { position: fixed; inset: 0; background: rgba(23, 25, 28, 0.45); z-index: 30; }
.pw-drawer-back[hidden] { display: none; }
.pw-plp-aside { position: fixed; z-index: 31; inset-block: 0; inset-inline-start: 0; inline-size: min(400px, 100vw); background: var(--surface); box-shadow: var(--shadow-float); }
.pw-plp-aside[hidden] { display: none; }
.pw-sheet-foot { display: flex; flex-direction: column; align-items: stretch; }
.pw-sheet-foot .pw-btn { inline-size: 100%; }
.pw-sheet-foot .pw-clear { align-self: center; }
.pw-active:empty { display: none; }
.pw-fgroup-count:empty { display: none; }
.pw-filter-open .pw-count[hidden] { display: none; }
.pw-grid-products[hidden], .pw-grid-products > li[hidden], .pw-loadmore[hidden], .pw-empty[hidden], .pw-check[hidden] { display: none; }
.pw-sheet-head h2 { font-size: 22px; line-height: 1.2; font-weight: 700; }

.pw-stock { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 56px; margin-block-start: var(--space-4); border-block-start: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.pw-switch { position: relative; inline-size: 44px; block-size: 26px; flex-shrink: 0; }
.pw-switch input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.pw-switch span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--line); transition: background 0.15s ease; }
.pw-switch span::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: var(--radius-pill); background: var(--surface); }
.pw-switch input:checked + span { background: var(--ink); }
.pw-switch input:checked + span::after { inset-inline-start: 21px; }
.pw-switch input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.pw-cols { display: inline-flex; align-items: center; gap: var(--space-1); }
.pw-cols-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-inline-size: var(--control-sm); min-block-size: var(--control-sm); padding: 0; border: 1.5px solid var(--line); border-radius: var(--pw-r); background: var(--surface); color: var(--ink); cursor: pointer; }
.pw-cols-btn span { inline-size: 5px; block-size: 14px; background: currentColor; opacity: 0.35; }
.pw-cols-btn[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pw-cols-btn[aria-pressed="true"] span { opacity: 1; }

@media (min-width: 761px) {
  .pw-grid-products[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}