/* =====================================================================
   ALBLAS Tweewielers — brutalist redesign (2026)
   Shared stylesheet, extracted from /_design/ static prototypes.
   Component-based: topnav, page-hero, prod cards, info-grid, services,
   filters sidebar, visit-band, footer, klantenservice components.
   Page-specific tweaks live in their template <style> blocks.
   Fonts: Bricolage Grotesque + IBM Plex Mono (enqueued separately).

   ⚠ Selector-naming trap — WordPress `body_class()` collisions
   Any bare `.xxx` rule will match `<body class="xxx …">` as well as
   the markup it was intended for. WP emits short generic classes on
   the body — confirmed for this site: `home`, `archive`, `page`,
   `blog`, `single`, `search`, `error404`, `sticky`, plus any
   theme-template name prefixed by `page-template-`. Before adding a
   new top-level layout rule with a single short class name, qualify
   it with its element tag (e.g. `section.cats`, `footer.foot`) or
   nest it under `body.acties-brutalist` — otherwise a future WP page
   type can turn the body into your grid container and destroy the
   layout. This is what historically broke `/scooters/`; see the
   `.archive` → `section.archive` rule below.
   ===================================================================== */

/* =====================================================================
   ALBLAS · Homepage proposal C — "Catalogus / 26"
   Brutalist Swiss retail catalog. Paper + black + brand red.
   Dense, utilitarian, grid-driven. Numerals everywhere.
   No shadows, no rounded corners, hairline rules only.
   ===================================================================== */

:root {
    --paper:    #FAFAF7;       /* page background — the off-white canvas */
    --paper-2:  #FFFFFF;       /* card/panel background — every block uses this */
    --ink:      #0E0E0D;
    --ink-2:    #2C2A26;
    --mid:      #6B6863;
    --rule:     #D9D7D0;
    --rule-strong: #1B1B19;
    --red:      #D91F26;
    --red-deep: #A41218;

    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    /* "Small font" — vroeger IBM Plex Mono, nu hetzelfde grotesque als --display
       zodat UI-labels (badges, breadcrumbs, prijslabels, section-nummers) hetzelfde
       letterskelet hebben als de body. Letter-spacing + uppercase op de
       gebruikende selectors zorgen voor het brutalist-effect. */
    --mono:    'Bricolage Grotesque', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body {
    font-family: var(--display);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-variation-settings: "opsz" 14, "wght" 400;
}
::selection { background: var(--red); color: var(--paper); }
a { color: inherit; text-decoration: none; }

/* ─── topnav ─────────────────────────────────────────────── */
.topnav {
    border-bottom: 1px solid var(--rule-strong);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topnav__strip {
    background: var(--ink);          /* black strip + white text + red ※ (user 2026-05-25) */
    color: var(--paper);
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
}
.topnav__strip-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 6px 32px;
    display: flex;
    justify-content: space-between;   /* 1st left · last right (user 2026-05-23) */
    align-items: center;
    flex-wrap: nowrap;                /* never wrap — hide strip instead when too narrow */
    gap: 24px;
    overflow: hidden;
    white-space: nowrap;
}
.topnav__strip b { color: var(--red); margin-right: 6px; }  /* red ※ on black strip */
/* When JS detects the items can't all fit, .topnav__strip--hide is added.
   Coarse CSS fallback for no-JS clients hides it below tablet. */
.topnav__strip.topnav__strip--hide { display: none; }
@media (max-width: 880px) {
    .topnav__strip { display: none; }
}

.topnav__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 32px;
    display: grid;
    /* la-souris pattern (user 2026-05-23): brand left | search center | phone right. */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}
.topnav__inner > .topnav__brand  { justify-self: start; align-self: center; }
.topnav__inner > .topnav__search { justify-self: stretch; }
.topnav__inner > .topnav__right  { justify-self: end; }
@media (max-width: 880px) {
    .topnav__inner {
        grid-template-columns: auto auto;
        grid-template-areas: "brand right" "search search";
        gap: 12px 18px;
        padding: 12px 24px;
    }
    .topnav__inner > .topnav__brand  { grid-area: brand; }
    .topnav__inner > .topnav__right  { grid-area: right; }
    .topnav__inner > .topnav__search { grid-area: search; }
}
/* At <= 640px the .topnav__right phone CTA, the .topnav__cart, and the search
   form all move into the red menubar as icon buttons; the inner block keeps
   only the centered logo. */
@media (max-width: 640px) {
    .topnav__inner {
        grid-template-columns: 1fr;
        grid-template-areas: "brand";
        gap: 0;
        padding: 14px 16px;
        justify-items: center;
    }
    .topnav__inner > .topnav__brand {
        grid-area: brand;
        justify-self: center;
        text-align: center;
    }
    .topnav__inner > .topnav__right,
    .topnav__inner > .topnav__search {
        display: none;
    }
    .topnav__brand { font-size: 22px; }
    .topnav__brand small { display: none; }
    /* When the user taps the mobile search icon, the search form drops down
       between the inner block and the menubar. */
    .topnav.is-search-open .topnav__inner > .topnav__search {
        display: flex;
        grid-area: search;
        margin-top: 12px;
        max-width: none;
    }
    .topnav.is-search-open .topnav__inner {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "search";
    }
}

/* Vertical stack: phone CTA on top, winkelmandje below */
.topnav__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: right;
}
.topnav__cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 6px 12px;
    transition: background 150ms, color 150ms;
}
.topnav__cart:hover { background: var(--ink); color: #fff; }
.topnav__cart svg { flex-shrink: 0; }
.topnav__cart-label { line-height: 1; }
.topnav__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--red);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1;
}
.topnav__cart-count.is-empty { background: var(--rule); color: var(--mid); }

/* Search bar — hairline ink border + dark submit button */
.topnav__search {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid var(--ink);
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}
.topnav__search input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    min-width: 0;
}
.topnav__search input[type="search"]::placeholder { color: var(--mid); }
.topnav__search button {
    background: var(--ink);
    color: var(--paper);
    border: none;
    padding: 0 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 150ms;
}
.topnav__search button:hover { background: var(--red); }

/* Bottom menu bar — white background with ink menu items. */
.topnav__menubar {
    background: var(--red);          /* red menu bar + white labels (user 2026-05-25) */
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
}
.topnav__menubar .topnav__menu {
    /* Match content container width (1320px) so the first menu item lines
       up vertically with the breadcrumb / page hero / filters column.
       (user 2026-05-25, fixed alignment 2026-05-25 evening) */
    max-width: 1320px;
    margin: 0 auto !important;       /* beats the bare .topnav__menu !important rule below */
    padding: 12px 32px;             /* same horizontal padding as body content */
    /* Flex with space-between: equal gaps between adjacent items regardless
       of word length. First/last items hug the body edges; the gaps between
       all 7 labels are visually consistent. (user 2026-05-28) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    list-style: none;
    background: transparent;
}
.topnav__menubar .topnav__menu li {
    display: flex;
    align-items: center;
}

/* Bounding boxes already line up at x=32 / x=1248, but the mono uppercase
 * font has ~2px side-bearings: the visible "S" of SCOOTERS sits a hair
 * right of "A" of Alblas, and the "E" of KLANTENSERVICE a hair left of
 * the winkelmandje pill edge. transform shifts visible pixels without
 * changing the layout box so the grid distribution stays correct. */
.topnav__menubar .topnav__menu li:first-child a { transform: translateX(-2px); }
.topnav__menubar .topnav__menu li:last-child a  { transform: translateX(2px); }

.topnav__menubar .topnav__menu a {
    color: var(--paper);             /* white labels on red bar */
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    padding: 2px 0;
    line-height: 1;
    transition: border-color 200ms, color 200ms;
    white-space: nowrap;
}
.topnav__menubar .topnav__menu a:hover,
.topnav__menubar .topnav__menu a.is-active {
    border-color: var(--paper);      /* white underline on red */
    color: var(--paper);
}
/* Keep 7 items on a single row across tablet by progressively shrinking
   typography. Wrapping into 2 rows was a previous tradeoff (user 2026-05-25):
   the bar must stay one line on all viewports above mobile. */
@media (max-width: 1100px) {
    .topnav__menubar .topnav__menu { padding: 12px 24px; }
    .topnav__menubar .topnav__menu a { font-size: 13px; letter-spacing: 0.06em; }
}
@media (max-width: 880px) {
    .topnav__menubar .topnav__menu { padding: 10px 16px; }
    .topnav__menubar .topnav__menu a { font-size: 11px; letter-spacing: 0.04em; }
}
/* (640px breakpoint is now the hamburger trigger — see media block below) */
/* Hamburger toggle — hidden on desktop, shown when menu can't fit one row.
   `!important` defeats Storefront's global button + button:hover rules. */
.topnav__menu-toggle,
.topnav__menu-toggle:hover,
.topnav__menu-toggle:focus,
.topnav__menu-toggle:active {
    background: transparent !important;
    color: var(--paper) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.topnav__menu-toggle {
    display: none;                   /* shown below 520px via media query */
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 16px;
    cursor: pointer;
}
.topnav__menu-toggle .topnav__menu-toggle-icon { display: inline-flex; }
.topnav__menu-toggle .topnav__menu-toggle-close { display: none; }
.topnav__menu-toggle[aria-expanded="true"] .topnav__menu-toggle-bars { display: none; }
.topnav__menu-toggle[aria-expanded="true"] .topnav__menu-toggle-close { display: inline; }

/* Mobile + small tablet — switch to hamburger dropdown when items can't sit
   on a single row at a comfortably readable size. */
@media (max-width: 640px) {
    .topnav__menu-toggle { display: inline-flex; }
    .topnav__menubar .topnav__menu {
        display: none;               /* hidden until toggled open */
        flex-direction: column;      /* stacked items in dropdown */
        padding: 0 0 12px;
        max-width: 100%;
        margin: 0 !important;
        background: var(--red);
        gap: 0;
    }
    .topnav__menubar .topnav__menu.is-open { display: flex; }
    .topnav__menubar .topnav__menu li,
    .topnav__menubar .topnav__menu li:first-child,
    .topnav__menubar .topnav__menu li:last-child {
        justify-content: flex-start;
        padding: 0 16px;
    }
    .topnav__menubar .topnav__menu li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .topnav__menubar .topnav__menu li:first-child a,
    .topnav__menubar .topnav__menu li:last-child a { transform: none; }
    .topnav__menubar .topnav__menu a {
        display: block;
        width: 100%;
        padding: 12px 0;
        font-size: 13px;
        letter-spacing: 0.08em;
        border-bottom: 0;
    }
    .topnav__menubar .topnav__menu a.is-active {
        border-bottom: 0;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}
.topnav__brand {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 500;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
}
.topnav__brand b {
    color: var(--red);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-weight: normal;
}
.topnav__brand small {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    align-self: baseline;          /* bottom-align with "Alblas Tweewielers" baseline */
    white-space: nowrap;
}
.topnav__menu {
    display: flex;
    list-style: none;
    gap: 24px;
    justify-content: center;
    /* WC/Storefront types ul {margin-bottom: 1.4em} — was pushing the
       menu items ~23px above the brand+CTA bottom. Kill only the vertical
       margins so horizontal centering still works under .topnav__menubar. */
    margin-block: 0 !important;
    padding: 0;
}
.topnav__menu a {
    font-family: var(--mono);
    font-size: 16px;               /* bumped from 14px per user 2026-05-23 */
    letter-spacing: 0.05em;
    color: var(--ink);
    border-bottom: 1px solid transparent;
    padding: 0 0 2px;
    line-height: 1;
    transition: border-color 200ms;
}
.topnav__menu a:hover { border-color: var(--red); color: var(--red); }
.topnav__cta {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--paper);
    background: var(--red);
    padding: 10px 18px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: background 200ms;
}
.topnav__cta:hover { background: var(--red-deep); }
/* (mobile rules for .topnav__inner now live next to its desktop grid
   definition near the top — no menu hide here, the menu is in the
   red .topnav__menubar bar below.) */

/* ─── hero ───────────────────────────────────────────────── */
.hero {
    padding: 36px 32px 56px;
}
.hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;   /* photo column wider — combined with width:100% gives ~+40% photo */
    gap: 56px;
    align-items: center;
}
@media (max-width: 980px) {
    .hero__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* photo of the shop, brutalist treatment — hairline ink border, mono caption */
.hero__photo {
    margin: 0 0 0 auto;        /* right-align inside its grid column */
    width: 70%;                 /* photo size — shrunk 30% from full column */
    border: 1.5px solid var(--ink);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (max-width: 980px) {
    .hero__photo { width: 100%; margin: 0; }   /* full width on mobile stack */
}
.hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: contrast(1.02) saturate(0.94);
}
.hero__photo figcaption {
    border-top: 1.5px solid var(--ink);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mid);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    background: #fff;
}
.hero__photo figcaption b {
    color: var(--ink);
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    text-transform: none;
}

.hero__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    grid-column: 1 / -1;
}
.hero__head b { color: var(--red); }

.hero__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 800;
    font-size: clamp(43px, 7.2vw, 113px);   /* 40% smaller than original 72/12vw/188 */
    line-height: 0.84;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin-bottom: 22px;
}
.hero__title em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--ink);
}
.hero__title b {
    color: var(--red);
    font-variation-settings: "opsz" 96, "wght" 800;
}
.hero__lead {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.45;
    color: var(--ink);
    max-width: 56ch;
    margin-bottom: 28px;
}
.hero__lead b { color: var(--red); font-variation-settings: "opsz" 18, "wght" 600; }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    padding: 14px 22px;
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: background 200ms, color 200ms, border-color 200ms;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn:hover { background: var(--red); border-color: var(--red); }
.btn--ghost {
    background: #fff;
    color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn svg { width: 14px; height: 14px; }

/* numeric data plate to right of hero */
.hero__plate {
    border: 1.5px solid var(--ink);
    padding: 0;
    background: #fff;
}
.hero__plate-h {
    background: var(--ink);
    color: var(--paper);
    padding: 8px 16px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}
.hero__plate-h b { color: var(--red); }
.hero__plate-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    border-bottom: 1px solid var(--rule);
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.04em;
}
.hero__plate-row:last-child { border-bottom: none; }
.hero__plate-row dt { color: var(--mid); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; align-self: center; }
.hero__plate-row dd {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    text-align: right;
}
.hero__plate-row dd b { color: var(--red); }

/* ─── categories — table ────────────────────────────────── */
.section-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: end;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 12px;
    margin-bottom: 32px;
}
.section-head__num {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    align-self: center;
    border: 1.5px solid var(--red);
    padding: 4px 12px;
}
.section-head__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.section-head__title em { font-style: italic; font-variation-settings: "opsz" 96, "wght" 400; color: var(--red); }
.section-head__meta {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    text-align: right;
    line-height: 1.5;
}

.cats {
    padding: 64px 32px 24px;
    max-width: 1320px;
    margin: 0 auto;
}
.cats__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--ink);
}
.cats__table tr {
    border-bottom: 1px solid var(--rule);
    transition: background 180ms;
    cursor: pointer;
}
.cats__table tr:hover { background: var(--paper-2); }
.cats__table tr:hover .cats__title em { color: var(--red); }
.cats__table td {
    padding: 22px 16px;
    vertical-align: middle;
}
.cats__num {
    font-family: var(--mono);
    font-size: 15px;
    color: var(--mid);
    letter-spacing: 0.06em;
    width: 72px;
}
.cats__icon {
    width: 56px;
    color: var(--ink);
}
.cats__icon svg { width: 56px; height: 56px; display: block; }
.cats__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 700;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.cats__title em {
    font-style: italic;
    font-variation-settings: "opsz" 48, "wght" 400;
    color: var(--mid);
    transition: color 200ms;
}
.cats__desc {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    color: var(--ink-2);
    max-width: 38ch;
}
.cats__count {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--mid);
    text-align: right;
    white-space: nowrap;
}
.cats__count b {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-right: 4px;
}
.cats__cta {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-align: right;
    width: 90px;
    border-bottom: 1px solid transparent;
    transition: color 200ms, border-color 200ms;
}
.cats__table tr:hover .cats__cta {
    color: var(--red);
    border-color: var(--red);
}

@media (max-width: 760px) {
    .cats__icon { display: none; }
    .cats__desc { display: none; }
    .cats__cta { display: none; }
    .cats__count { font-size: 11px; }
    .cats__count b { font-size: 22px; }
}

/* ─── cats — compacte tegels (vervangt de tabel) ────────── */
.cats__tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
.cats__tiles--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
    .cats__tiles,
    .cats__tiles--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cats__tiles,
    .cats__tiles--three { grid-template-columns: 1fr; }
}

.cats__tile {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 22px 22px 18px;
    background: #fff;
    cursor: pointer;
    transition: background 200ms;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ink);
    position: relative;
}
.cats__tile:hover { background: var(--paper-2); }
.cats__tile:hover .cats__tile-cta { color: var(--red); border-color: var(--red); }
.cats__tile:hover .cats__tile-title em { color: var(--red); }

.cats__tile-num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--mid);
}
.cats__tile-icon {
    width: 88px;
    height: 88px;
    object-fit: contain;
    object-position: left center;
    color: var(--ink);
    margin-top: 4px;
}
.cats__tile-title {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 6px 0 0;
}
.cats__tile-title em {
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 400;
    color: var(--mid);
    transition: color 200ms;
}
.cats__tile-desc {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 13px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.4;
}
.cats__tile-cta {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-top: 1px solid var(--rule);
    padding-top: 10px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 200ms;
}

/* ─── featured rail ─────────────────────────────────────── */
.rail {
    padding: 64px 32px;
    max-width: 1320px;
    margin: 0 auto;
}
.rail__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
@media (max-width: 980px) { .rail__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .rail__grid { grid-template-columns: 1fr; } }

.prod {
    border: 1px solid var(--ink);
    background: #fff;
    cursor: pointer;
    transition: background 200ms;
    position: relative;
    display: flex;
    flex-direction: column;
}
.prod:hover { background: #fff; }
.prod__photo {
    aspect-ratio: 4 / 3;
    background: #fff;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--ink);
    position: relative;
    transition: filter 200ms;
    overflow: hidden;
}
.prod__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* show the whole product, never crop */
    object-position: center;    /* centered within the 4:3 frame */
    display: block;
    padding: 6%;                 /* breathing room around the product */
    box-sizing: border-box;
}
/* when there's a real thumbnail, suppress the gradient placeholder */
.prod__photo:has(img) { background: #fff !important; }
.prod:hover .prod__photo { filter: contrast(1.05); }
.prod__photo--p1 { background: linear-gradient(135deg, #e0d5b8, #b8a37a 50%, #7a6240); }
.prod__photo--p2 { background: linear-gradient(135deg, #cfd1cb, #9c9d97 50%, #565853); }
.prod__photo--p3 { background: linear-gradient(135deg, #c8c8d0, #888a96 50%, #44475c); }
.prod__photo--p4 { background: linear-gradient(135deg, #d9c2c2, #ad7c7c 50%, #6e3f3f); }
.prod__photo--p5 { background: linear-gradient(135deg, #f4dba0, #d8a040 50%, #8a6a18); }   /* mustard — Volare Glamour */
.prod__photo--p6 { background: linear-gradient(135deg, #f5cdd5, #d4859a 50%, #7a3e54); }   /* rose — Volare Excellent */
.prod__photo--p7 { background: linear-gradient(135deg, #c8d8e8, #7895b8 50%, #2f4a6a); }   /* blue — Volare Yipeeh */
.prod__photo--p8 { background: linear-gradient(135deg, #cad8c5, #7a9070 50%, #2f4830); }   /* forest — Volare Sportivo */

.prod__num {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--paper);
    background: var(--ink);
    padding: 4px 10px;
}
.prod__badge {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--red);
    padding: 4px 10px;
}
.prod__badge--oos {
    background: var(--ink);
    letter-spacing: 0.12em;
}
.prod__body {
    padding: 16px 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.prod__brand {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 4px;
}
.prod__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}
.prod__specs {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--mid);
    letter-spacing: 0.04em;
    line-height: 1.55;
    margin-bottom: 14px;
}
.prod__specs span { display: block; }
.prod__price {
    border-top: 1px solid var(--rule);
    padding-top: 12px;
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.prod__price b {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 700;
    font-size: 30px;
    color: var(--red);
    letter-spacing: -0.02em;
}
.prod__price span {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--mid);
}

/* single-line spec (compacter dan de oude .prod__specs blokken) */
.prod__spec-line {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--mid);
    letter-spacing: 0.04em;
    line-height: 1.55;
    margin: 0 0 14px;
    border-bottom: 1px dotted var(--rule);
    padding-bottom: 10px;
}

/* 3-prijs blok (Direct / in3 / SprayPay) — actiescooters-stijl */
.prod__pricing {
    margin-top: auto;
    border-top: 1px solid var(--ink);
}
.prod__pricing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}
.prod__pricing-row:last-child { border-bottom: none; }

.prod__pricing-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    line-height: 1.35;
}
.prod__pricing-label b {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 600;
    font-size: 13px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
    display: inline-block;
    margin-right: 2px;
}
.prod__pricing-row--in3 .prod__pricing-label b { color: var(--red); }

.prod__pricing-price {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}
.prod__pricing-row--direct .prod__pricing-price {
    font-size: 20px;
    color: var(--red);
}
/* van–voor: doorgestreepte oude prijs kleiner dan de directprijs, zodat de
   regel (oud + nieuw) binnen de prijskolom van de kaart past i.p.v. uit te lopen. */
.prod__pricing-was {
    font-size: 0.7em;
    letter-spacing: 0;
}
.prod__pricing-row--in3 .prod__pricing-price,
.prod__pricing-row--lease .prod__pricing-price {
    font-size: 17px;
    color: var(--ink);
}

/* ─── join the family — klanten foto's & filmpjes ───────── */
.family {
    padding: 96px 32px;
    max-width: 1320px;
    margin: 0 auto;
}
.family__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
@media (max-width: 980px) { .family__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .family__grid { grid-template-columns: 1fr; } }

.family__cell {
    margin: 0;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: #fff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 200ms;
}
.family__cell:hover { background: var(--paper-2); }

.family__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--paper-2);
    border-bottom: 1px solid var(--ink);
}
.family__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.02) saturate(0.92);
    transition: transform 380ms ease, filter 200ms;
}
.family__cell:hover .family__media img {
    transform: scale(1.03);
    filter: contrast(1.06) saturate(1);
}

/* video play overlay */
.family__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--ink);
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: background 200ms, color 200ms, transform 240ms ease;
    pointer-events: none;
}
.family__play svg { width: 28px; height: 28px; margin-left: 3px; /* optical centering of triangle */ }
.family__cell--video:hover .family__play {
    background: var(--red);
    color: var(--paper);
    transform: translate(-50%, -50%) scale(1.06);
    border-color: var(--red);
}
.family__badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    padding: 4px 8px;
}

.family__cap {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
}
.family__cap b {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.015em;
    font-weight: normal;
}
.family__cap span {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--mid);
}

.family__cta {
    margin: 28px 0 0;
    text-align: right;
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--mid);
}
.family__share {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    transition: color 200ms, border-color 200ms;
}
.family__share:hover { color: var(--red); border-color: var(--red); }

/* ─── werkplaats ────────────────────────────────────────── */
.werk {
    background: var(--ink);
    color: var(--paper);
    padding: 96px 32px;
    position: relative;
    overflow: hidden;
}
.werk__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 880px) { .werk__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.werk__copy h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 800;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--paper);
    margin-bottom: 22px;
}
.werk__copy h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--red);
}
.werk__copy p {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(250, 250, 247, 0.78);
    margin-bottom: 18px;
}
.werk__copy p strong { color: var(--paper); }
.werk__copy .btn { background: var(--red); border-color: var(--red); color: var(--paper); }
.werk__copy .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* werk__photo — constrain the workshop photo to its grid cell */
.werk__photo {
    margin: 0;
    border: 1.5px solid rgba(250, 250, 247, 0.18);
    background: var(--ink);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.werk__photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}
.werk__photo figcaption {
    border-top: 1.5px solid rgba(250, 250, 247, 0.18);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    background: var(--ink);
}
.werk__photo figcaption b {
    color: var(--paper);
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* hours grid */
.werk__hours {
    border: 1px solid rgba(250, 250, 247, 0.18);
}
.werk__hours-h {
    background: var(--red);
    color: var(--paper);
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}
.werk__hours-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(250, 250, 247, 0.12);
    font-family: var(--mono);
    font-size: 15px;
    color: rgba(250, 250, 247, 0.85);
    align-items: center;
}
.werk__hours-row:last-child { border-bottom: none; }
.werk__hours-row b {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    color: var(--paper);
    text-align: right;
    letter-spacing: -0.01em;
}
.werk__hours-row.is-closed b { color: var(--mid); }
.werk__hours-foot {
    background: rgba(250, 250, 247, 0.04);
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: rgba(250, 250, 247, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.werk__hours-foot b { color: var(--red); }

/* ─── timeline ─────────────────────────────────────────── */
.gens {
    padding: 96px 32px;
    max-width: 1320px;
    margin: 0 auto;
}
.gens__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    margin-top: 32px;
}
@media (max-width: 880px) { .gens__list { grid-template-columns: repeat(2, 1fr); } }

.gens__item {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--ink);
    padding: 24px 18px 28px;
    position: relative;
}
.gens__item:last-child { border-right: none; }
.gens__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 24px;
    height: 4px;
    background: var(--red);
}
.gens__num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 14px;
}
.gens__year {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "wght" 800;
    font-size: clamp(56px, 8vw, 92px);
    line-height: 0.85;
    color: var(--ink);
    letter-spacing: -0.045em;
}
.gens__label {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    color: var(--ink);
    margin: 12px 0 4px;
    letter-spacing: -0.01em;
}
.gens__sub {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-style: italic;
    font-size: 14px;
    color: var(--mid);
}

/* ─── brand strip ──────────────────────────────────────── */
.brands {
    padding: 0;
}
.brands__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    border-left: 1px solid var(--rule);
}
@media (max-width: 980px) { .brands__list { grid-template-columns: repeat(3, 1fr); } }
.brands__list li {
    border-right: 1px solid var(--rule);
    padding: 28px 8px;
    text-align: center;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 700;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-transform: uppercase;
    transition: background 200ms, color 200ms;
    cursor: pointer;
}
.brands__list li:hover { background: var(--ink); color: var(--paper); }

/* ─── footer (4 kolommen — vergelijkbaar met actiescooters) ── */
.foot {
    padding: 72px 0 32px;
    background: var(--paper);
    border-top: 1px solid var(--ink);
}
.foot__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
}
@media (max-width: 880px) {
    .foot__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
    .foot__inner { grid-template-columns: 1fr; gap: 28px; }
}

.foot__col h4 {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 14px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
}
.foot__brand-h {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: 36px;
    color: var(--red);
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    line-height: 1;
}
.foot__brand-h b { color: var(--red); }
.foot__brand-h i {
    color: var(--ink);
    font-style: normal;
    font-variation-settings: "opsz" 96, "wght" 500;
    margin-left: 4px;
    letter-spacing: -0.02em;
}
.foot__about {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 32ch;
    margin: 0;
}

.foot__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.foot__list li {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 5px;
}
.foot__list a {
    color: var(--ink-2);
    border-bottom: 1px solid transparent;
    transition: color 200ms, border-color 200ms;
    padding-bottom: 1px;
}
.foot__list a:hover { color: var(--red); border-color: var(--red); }
.foot__hours {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--mid);
    letter-spacing: 0.04em;
    margin-top: 6px !important;
}
.foot__legal {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--mid);
    letter-spacing: 0.06em;
    margin-top: 4px !important;
}

.foot__bottom {
    max-width: 1320px;
    margin: 56px auto 0;
    padding: 24px 32px 0;
    border-top: 1px solid var(--ink);
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
}

/* keyboard focus */
a:focus-visible, button:focus-visible, .prod:focus-visible, .cat:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
}

/* ═══════════════════════════════════════════════════════════
   ARCHIEF-PAGINA · scooters
   ═══════════════════════════════════════════════════════════ */

/* active nav state */
.topnav__menu a.is-active {
    color: var(--red);
    border-color: var(--red);
}

/* ─── breadcrumb + page hero ──────────────────────────── */
.crumb {
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 32px 0;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--mid);
}
.crumb a { color: var(--mid); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.crumb a:hover { color: var(--red); border-color: var(--red); }
.crumb .is-current { color: var(--ink); }
.crumb span[aria-hidden] { margin: 0 8px; color: var(--rule); }

.page-hero {
    padding-bottom: 32px;
}
.page-hero__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 32px 0;
    text-align: left;
}
.page-hero__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 800;
    font-size: clamp(28px, 4.5vw, 60px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 16px;
}
.page-hero__title em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 400;
    color: var(--red);
}
.page-hero__lead {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 17px;
    color: var(--ink-2);
    max-width: 60ch;
    margin: 0;
    line-height: 1.5;
}

/* ─── archive layout ───────────────────────────────────── */
/* NB: selector must stay tag-qualified — WordPress emits `<body class="archive …">`
   on every tax-product_cat-* page; a bare `.archive` rule would turn the body into
   a grid and break the entire layout. */
section.archive {
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 32px 96px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 880px) {
    section.archive { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── filters sidebar ──────────────────────────────────── */
/* ─── filters · uniform CSS-variabelen ─────────────────────
   Eén padding-waarde voor head/body/summary, één gap-waarde
   tussen items binnen een body. Voorkomt afwijkende ritmes. */
.filters {
    --fpad-x: 16px;          /* horizontale padding overal */
    --fpad-y: 14px;          /* verticale padding van summaries */
    --fgap:  6px;            /* afstand tussen items in een body */
    border: 1px solid var(--ink);
    background: #fff;
    min-width: 0;
    /* sidebar groeit mee met de pagina; geen sticky/overflow afkappen */
}
.filters * { box-sizing: border-box; }

.filters__head {
    background: #fff;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 12px var(--fpad-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* sticky binnen panel — header altijd zichtbaar tijdens scroll */
    position: sticky;
    top: 0;
    z-index: 2;
}
.filters__reset {
    background: none;
    border: none;
    color: var(--red);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms;
}
.filters__reset:hover { border-color: var(--red); }

.filters__group {
    border-bottom: 1px solid var(--rule);
}
.filters__group:last-of-type { border-bottom: none; }
.filters__group summary {
    list-style: none;
    cursor: pointer;
    padding: var(--fpad-y) var(--fpad-x);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.filters__group summary::-webkit-details-marker { display: none; }
.filters__group summary::after {
    content: "+";
    font-family: var(--display);
    font-size: 18px;
    color: var(--mid);
    line-height: 1;
    flex-shrink: 0;
    margin-left: 8px;
}
.filters__group[open] > summary::after { content: "−"; color: var(--red); }
.filters__group[open] > summary { color: var(--red); }
.filters__body {
    padding: 0 var(--fpad-x) var(--fpad-y);
    display: flex;
    flex-direction: column;
    gap: var(--fgap);
}

/* select dropdowns */
.filters__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--ink);
    padding: 9px 32px 9px 12px;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink);
    border-radius: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230E0E0D' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    line-height: 1.2;
}
.filters__select:focus { outline: none; border-color: var(--red); }

/* prijs — twee inputs en range slider */
.filters__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}
.filters__price label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    min-width: 0;
}
.filters__price input {
    width: 100%;
    border: 1px solid var(--ink);
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border-radius: 0;
}
.filters__price input:focus { outline: none; border-color: var(--red); }
.filters__range {
    position: relative;
    height: 18px;
    margin: 6px 7px 0;
}
.filters__range-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0; right: 0;
    height: 1px;
    background: var(--rule);
}
.filters__range-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    background: var(--red);
}
/* Knob is rendered as <button> for keyboard/pointer semantics — neutralize
   Storefront's button base (padding, font, shadows) so the dot stays a dot. */
.filters__range-knob,
.filters__range-knob:hover,
.filters__range-knob:focus,
.filters__range-knob:active {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    box-shadow: none;
    text-shadow: none;
    cursor: grab;
    touch-action: none;
    z-index: 1;                 /* sit above the fill bar */
}
.filters__range-knob:active { cursor: grabbing; }
.filters__range-knob:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.filters__hint {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--mid);
    margin: 0;
    text-align: center;
    letter-spacing: 0.04em;
}

/* checkbox-rij (aandrijving / klasse / beschikbaarheid) */
.filters__body--checks { gap: 2px; }
.filters__check {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    column-gap: 10px;
    align-items: center;
    padding: 7px 0;
    cursor: pointer;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.3;
    min-width: 0;
}
.filters__check span { min-width: 0; }
.filters__check:hover { color: var(--red); }
.filters__check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ink);
    background: #fff;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    transition: background 180ms, border-color 180ms;
}
.filters__check input[type="checkbox"]:checked {
    background-color: var(--red);
    border-color: var(--red);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FAFAF7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.5 11.5 12.5 4.5'/></svg>");
}
.filters__check b {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--mid);
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
}

/* merk filter — 2-kol logo-tegels */
.filters__body--brands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 4px;
}
.filters__brand {
    position: relative;
    border: 1.5px solid var(--rule);
    background: #fff;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    transition: border-color 200ms, background 200ms;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 14px 12px 8px;
    min-width: 0;
}
.filters__brand input { position: absolute; opacity: 0; pointer-events: none; }
.filters__brand:hover { border-color: var(--ink); }
.filters__brand:has(input:checked) {
    border-color: var(--red);
    box-shadow: inset 0 0 0 1px var(--red);
}
.filters__brand b {
    position: absolute;
    top: 4px;
    right: 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--mid);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
}
.filters__brand:has(input:checked) b { color: var(--red); }

.filters__brand-mark {
    /* Absolutely positioned to give the inner image a concrete height
       constraint (the parent's grid row would otherwise auto-size to the
       image's natural height, breaking max-height: 100%). Flex centering
       (not grid) so the img's percentage height resolves correctly. */
    position: absolute;
    inset: 14px 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}
.filters__brand-mark img {
    /* Fill the grid cell explicitly via align/justify-self stretch.
       `height: 100%` alone fails here: the parent's `place-items: center`
       gives the grid item content-sized self-alignment, so the image keeps
       its intrinsic (square) ratio and overflows. Forcing stretch on both
       axes lets object-fit clamp the rendering to the parent box. */
    display: block;
    align-self: stretch;
    justify-self: stretch;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    filter: grayscale(1) contrast(0.95);
    opacity: 0.7;
    transition: filter 200ms, opacity 200ms;
}
.filters__brand:hover img,
.filters__brand:has(input:checked) img {
    filter: none;
    opacity: 1;
}
/* Super Soco's PNG is white-on-transparent — invert so it renders as
   black on the white card, matching the desaturated look of the other
   brand logos. The same invert applies on hover so it stays visible. */
.filters__brand img[alt="Super Soco" i] {
    filter: invert(1) grayscale(1) contrast(0.95);
}
.filters__brand:hover img[alt="Super Soco" i],
.filters__brand:has(input:checked) img[alt="Super Soco" i] {
    filter: invert(1);
}

/* type-based brand-marks (Doohan/Super Soco/Yadea — geen PNG beschikbaar) */
.filters__brand-mark--type {
    font-family: var(--display);
    text-transform: uppercase;
    color: var(--ink);
    text-align: center;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.7;
    transition: opacity 200ms;
}
.filters__brand:hover .filters__brand-mark--type,
.filters__brand:has(input:checked) .filters__brand-mark--type {
    opacity: 1;
}
.filters__brand-mark--type[data-brand="berini"] {
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    color: #B41E2A;
    font-style: italic;
    letter-spacing: -0.01em;
}
.filters__brand-mark--type[data-brand="doohan"] {
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 18px;
    color: #3A3A3A;
}
.filters__brand-mark--type[data-brand="supersoco"] {
    font-variation-settings: "opsz" 24, "wght" 800;
    font-size: 13px;
    color: #C92027;
    font-style: italic;
    letter-spacing: 0;
    line-height: 1.05;
}
.filters__brand-mark--type[data-brand="yadea"] {
    font-variation-settings: "opsz" 36, "wght" 800;
    font-size: 20px;
    color: #1B4ECC;
    letter-spacing: 0.04em;
}
/* scootmobiel-merken — type-based placeholders */
.filters__brand-mark--type[data-brand="drive"] {
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 20px;
    color: #C92027;
    letter-spacing: -0.02em;
}
.filters__brand-mark--type[data-brand="kymco"] {
    font-variation-settings: "opsz" 36, "wght" 800;
    font-size: 19px;
    color: #1A4480;
    letter-spacing: 0.02em;
}
.filters__brand-mark--type[data-brand="move"] {
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    color: #2F8C4A;
    font-style: italic;
    letter-spacing: -0.01em;
}
.filters__brand-mark--type[data-brand="nipponia"] {
    font-variation-settings: "opsz" 36, "wght" 600;
    font-size: 17px;
    color: #2A2A2A;
    letter-spacing: 0;
}
.filters__brand-mark--type[data-brand="retelli"] {
    font-variation-settings: "opsz" 36, "wght" 500;
    font-size: 19px;
    color: #1F1F1F;
    font-style: italic;
    letter-spacing: 0;
}
.filters__brand-mark--type[data-brand="sterling"] {
    font-variation-settings: "opsz" 36, "wght" 600;
    font-size: 17px;
    color: #1B2D4A;
    font-style: italic;
    letter-spacing: 0;
}
.filters__brand-mark--type[data-brand="vermeiren"] {
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 14px;
    color: #C32228;
    letter-spacing: 0.02em;
}

/* kleurenswatches — 4-kol grid, vierkant */
.filters__body--swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 4px;
}
.filters__swatch { cursor: pointer; position: relative; min-width: 0; }
.filters__swatch input { position: absolute; opacity: 0; }
.filters__swatch span {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1.5px solid var(--ink);
    transition: transform 200ms;
}
.filters__swatch:hover span { transform: scale(1.06); }
.filters__swatch input:checked + span {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--red);
}

/* ─── results panel ─────────────────────────────────────── */
.results {
    min-width: 0;
}
.results__head {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 18px;
}
.results__count {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin: 0;
}
.results__count b {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-right: 6px;
}
.results__count span { color: var(--mid); }
.results__sort {
    display: flex;
    align-items: center;
    gap: 12px;
}
.results__sort label {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
}
.filters__select--inline { width: auto; min-width: 220px; }

.results__grid {
    display: grid;
    /* minmax(0, 1fr) i.p.v. 1fr: 1fr = minmax(auto, 1fr), waardoor een kaart met
       bredere min-content z'n kolom oprekt en de rest smaller duwt. minmax(0,1fr)
       forceert exact gelijke kolombreedtes. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.results__grid > .prod { min-width: 0; }
@media (max-width: 1180px) { .results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .results__grid { grid-template-columns: minmax(0, 1fr); } }

/* Scooters overzicht: het 4:3-vak (.prod__photo) heeft een vaste aspect-ratio,
 * dus alle kaarten blijven even hoog ongeacht object-fit. Eerder stond hier
 * object-fit:cover om elk vak helemaal te vullen, maar bij bronfoto's die sterk
 * van 4:3 afwijken (bv. de Berini Scout) sneed cover in het product zelf i.p.v.
 * alleen de witte rand → afgeknipte scooters. object-fit:contain toont het hele
 * product, nooit afgesneden; afwijkende ratio's krijgen wat witruimte. */
body.term-scooters .results__grid .prod__photo img { object-fit: contain; padding: 0; }

/* ─── SprayPay logo (official PNG) ─── */
.logo-spraypay {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}
.logo-spraypay img {
    height: 1.4em;
    width: auto;
    display: block;
}

/* ─── empty-state notice (geen producten in filter) ──────── */
.results__empty {
    grid-column: 1 / -1;        /* span full grid width when inside .results__grid */
    margin: 32px 0 24px;
    padding: 24px 28px;
    border: 1.5px solid var(--ink);
    background: var(--paper-2);
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    text-align: center;
}
.results__empty a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── AFM verplichte BNPL-disclaimer ─────────────────────── */
.results__afm {
    margin: 32px 0 24px;
    padding: 14px 18px;
    border: 1.5px solid var(--ink);
    background: #fff;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}
.results__afm b { color: var(--ink); }
.afm-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--ink);
    color: #FFD700;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 800;
    font-size: 16px;
    border-radius: 50%;
    line-height: 1;
}

/* ─── pager ─────────────────────────────────────────────── */
.pager {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink);
}
.pager__prev, .pager__next {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    transition: background 180ms, color 180ms;
}
.pager__prev:hover, .pager__next:hover { background: var(--ink); color: var(--paper); }
.pager__page {
    padding: 6px 12px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
}
.pager__page.is-active { background: var(--red); border-color: var(--red); color: var(--paper); }
.pager__sep, .pager__total { color: var(--mid); }

/* Standard WP paginate_links(type=list) markup — horizontal row */
.pager ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.pager ul.page-numbers li { margin: 0; padding: 0; display: inline-flex; }
/* Scope to button-level elements only — the .page-numbers class is also on
   the wrapping <ul>; without :not(ul) the hover background fills the gaps
   between buttons too. */
.pager .page-numbers:not(ul) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 15px;
    text-decoration: none;
    transition: background 180ms, color 180ms;
}
.pager .page-numbers.current {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}
.pager .page-numbers:not(ul):not(.current):hover { background: var(--ink); color: var(--paper); }
.pager .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--mid);
}
/* prev/next arrows inside paginate_links anchors — collapse inner span paddings */
.pager .page-numbers.prev,
.pager .page-numbers.next { padding: 0; }
.pager .page-numbers.prev .pager__prev,
.pager .page-numbers.next .pager__next {
    border: none;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════
   WERKPLAATS PAGINA — eigen sections
   ═══════════════════════════════════════════════════════════ */

/* gemeenschappelijke section-wrapper voor werkplaats */
.services, .process, .wp-form, .visit {
    max-width: 1320px;
    margin: 0 auto;
    padding: 64px 32px;
}
.services { padding-top: 56px; }

/* gemeenschappelijke header-stijl op werkplaats */
.services__head {
    margin-bottom: 36px;
    max-width: 64ch;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 16px;
}
.services__head h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 14px;
}
.services__head h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--red);
}
.services__head p {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}

/* ─── 4 diensten ──────────────────────────────────────── */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
@media (max-width: 880px) { .services__grid { grid-template-columns: 1fr; } }

.service-cell {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 28px 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.service-cell__icon {
    width: 56px;
    height: 56px;
    color: var(--ink);
    margin-bottom: 6px;
}
.service-cell__icon svg { width: 100%; height: 100%; display: block; }
.service-cell__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}
.service-cell__title em {
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 400;
    color: var(--red);
}
.service-cell__lead {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 500;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-weight: normal;
}
.service-cell__detail {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}

/* ─── voor wie + geen thuisservice (2 kol) ──────────── */
.info-grid--two-up {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 32px 64px;
}
.info-grid--two-up .info-grid__cells { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .info-grid--two-up .info-grid__cells { grid-template-columns: 1fr; } }

/* single-cell variant — voor wanneer er maar 1 info-cell is */
.info-grid--single {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 32px 64px;
}
.info-grid--single .info-grid__cells { grid-template-columns: 1fr; }

/* ─── schadetaxatie band (donker, opvallend) ──────────── */
.taxatie {
    background: var(--ink);
    color: var(--paper);
    padding: 72px 32px;
}
.taxatie__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 880px) {
    .taxatie__inner { grid-template-columns: 1fr; gap: 36px; }
}

.taxatie__eyebrow {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
    display: inline-block;
}
.taxatie__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--paper);
    margin: 0 0 22px;
    max-width: 22ch;
}
.taxatie__title em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--red);
}
.taxatie__lead {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 17px;
    line-height: 1.55;
    color: var(--paper);
    margin: 0 0 16px;
    max-width: 60ch;
}
.taxatie__lead b {
    font-variation-settings: "opsz" 18, "wght" 600;
    font-weight: normal;
    color: var(--paper);
}
.taxatie__detail {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(250, 250, 247, 0.78);
    margin: 0;
    max-width: 60ch;
}

.taxatie__plate {
    border: 1px solid rgba(250, 250, 247, 0.22);
    background: rgba(0, 0, 0, 0.25);
    padding: 24px 26px;
}
.taxatie__plate-h {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.65);
    border-bottom: 1px solid rgba(250, 250, 247, 0.22);
    padding-bottom: 10px;
    margin-bottom: 18px;
}
.taxatie__plate-rate {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}
.taxatie__plate-rate b {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "wght" 800;
    font-size: 88px;
    line-height: 0.85;
    color: var(--red);
    letter-spacing: -0.05em;
    font-weight: normal;
}
.taxatie__plate-rate b span { font-size: 56px; vertical-align: top; }
.taxatie__plate-rate-sub {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.7);
    line-height: 1.2;
    max-width: 120px;
}
.taxatie__plate-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(250, 250, 247, 0.22);
    padding-top: 14px;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(250, 250, 247, 0.85);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.taxatie__plate-list li {
    padding-left: 16px;
    position: relative;
}
.taxatie__plate-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--red);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
}
.taxatie__plate-list b {
    font-variation-settings: "opsz" 14, "wght" 600;
    font-weight: normal;
    color: var(--paper);
}

/* ─── proces — 4 stappen ──────────────────────────── */
.process__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
@media (max-width: 980px) { .process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process__steps { grid-template-columns: 1fr; } }

.process__step {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 28px 24px;
    background: #fff;
}
.process__num {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "wght" 800;
    font-size: 76px;
    line-height: 0.85;
    color: var(--red);
    letter-spacing: -0.05em;
    display: block;
    margin-bottom: 14px;
}
.process__step h3 {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 10px;
}
.process__step p {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}

/* ─── contact formulier ─────────────────────────────── */
.wp-form {
    background: var(--paper-2);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 72px 32px;
}
.wp-form .services__head {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
}
.wp-form__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1.5px solid var(--ink);
    background: #fff;
}
@media (max-width: 880px) { .wp-form__grid { grid-template-columns: 1fr; } }

.wp-form__fieldset {
    border: none;
    border-right: 1px solid var(--rule);
    padding: 22px 24px 16px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 14px;
    align-content: start;
}
.wp-form__fieldset:nth-child(2) { border-right: none; }
@media (max-width: 880px) {
    .wp-form__fieldset { border-right: none; border-bottom: 1px solid var(--rule); }
    .wp-form__fieldset:last-of-type { border-bottom: none; }
}
.wp-form__fieldset--full {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
    border-right: none;
}
.wp-form__legend {
    grid-column: 1 / -1;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px;
    padding: 0;
}

.wp-form__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.wp-form__field--full { grid-column: 1 / -1; }
.wp-form__field label {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 500;
    font-size: 13px;
    color: var(--ink);
    font-weight: normal;
}
.wp-form__field abbr[title] {
    color: var(--red);
    text-decoration: none;
    font-size: 14px;
    margin-left: 2px;
    cursor: help;
}
.wp-form__hint {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--mid);
    text-transform: none;
    font-weight: 400;
    margin-left: 4px;
}
.wp-form__field input,
.wp-form__field textarea {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--mid);
    padding: 9px 12px;
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 15px;
    color: var(--ink);
    border-radius: 0;
    line-height: 1.4;
    transition: border-color 180ms;
}
.wp-form__field textarea {
    resize: vertical;
    min-height: 110px;
}
.wp-form__field input:focus,
.wp-form__field textarea:focus {
    outline: none;
    border-color: var(--red);
}

.wp-form__submit {
    grid-column: 1 / -1;
    border-top: 1px solid var(--ink);
    background: var(--paper-2);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.wp-form__submit button {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    background: var(--red);
    color: var(--paper);
    border: 1.5px solid var(--red);
    padding: 13px 22px;
    cursor: pointer;
    transition: background 180ms, border-color 180ms;
}
.wp-form__submit button:hover {
    background: var(--ink);
    border-color: var(--ink);
}
.wp-form__submit small {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--mid);
}

/* ═══════════════════════════════════════════════════════════
   KLANTENSERVICE — onderwerpen-navigatie + content blokken
   ═══════════════════════════════════════════════════════════ */

.ks-num {
    display: inline-block;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    border: 1.5px solid var(--red);
    padding: 4px 10px;
    margin-bottom: 14px;
}

/* terug-naar-klantenservice link onderaan child pages */
.ks-back {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 32px 8px;
}
.ks-back__link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    transition: color 200ms, border-color 200ms;
}
.ks-back__link:hover {
    color: var(--red);
    border-color: var(--red);
}

.ks-nav {
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 32px 80px;
}
.ks-nav__header {
    margin-bottom: 28px;
    max-width: 64ch;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 16px;
}
.ks-nav__header h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 10px;
}
.ks-nav__header h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--red);
}
.ks-nav__header p {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}
.ks-nav__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
@media (max-width: 980px) { .ks-nav__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ks-nav__inner { grid-template-columns: 1fr; } }

.ks-nav__cell {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 22px;
    background: #fff;
    color: var(--ink);
    transition: background 200ms, color 200ms;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}
.ks-nav__cell:hover { background: var(--ink); color: var(--paper); }
.ks-nav__num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--mid);
}
.ks-nav__cell:hover .ks-nav__num { color: var(--red); }
.ks-nav__cell h3 {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: inherit;
}
.ks-nav__cell p {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0;
    color: inherit;
    opacity: 0.7;
}

.ks-text {
    max-width: 64ch;
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.ks-text p { margin: 0 0 14px; }
.ks-text p:last-child { margin-bottom: 0; }
.ks-text b {
    font-variation-settings: "opsz" 18, "wght" 600;
    font-weight: normal;
    color: var(--ink);
}
.ks-text a {
    color: var(--red);
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
    transition: color 200ms;
}
.ks-text a:hover { color: var(--ink); border-color: var(--ink); }

.ks-timeline {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
}
.ks-timeline b {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 700;
    font-size: 18px;
    color: var(--red);
    margin-right: 12px;
    letter-spacing: -0.01em;
    font-weight: normal;
    display: inline-block;
    min-width: 56px;
}

.ks-disclaimer {
    margin: 24px 0 0;
    padding: 14px 18px;
    border: 1.5px solid var(--ink);
    background: var(--paper-2);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}
.ks-disclaimer b { color: var(--ink); font-variation-settings: "opsz" 14, "wght" 600; font-weight: normal; }
.ks-disclaimer__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--ink);
    color: #FFD700;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 800;
    font-size: 14px;
    border-radius: 50%;
    line-height: 1;
}

.ks-files {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}
.ks-files li {
    border-bottom: 1px solid var(--rule);
    transition: background 180ms;
}
.ks-files li:last-child { border-bottom: none; }
.ks-files li:hover { background: var(--paper-2); }
.ks-files a {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr auto;
    align-items: baseline;
    gap: 24px;
    padding: 14px 22px;
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 15.5px;
    color: var(--ink);
    transition: color 200ms;
}
.ks-files a::after {
    content: "↓";
    font-family: var(--mono);
    color: var(--red);
    font-size: 18px;
    justify-self: end;
}
@media (max-width: 640px) {
    .ks-files a { grid-template-columns: 1fr auto; gap: 4px 18px; padding: 14px 18px; }
    .ks-files a > b { grid-column: 1 / -1; }
}
.ks-files a:hover { color: var(--red); }
.ks-files b {
    font-variation-settings: "opsz" 18, "wght" 600;
    font-weight: normal;
    margin-right: 8px;
}

.ks-files-single { max-width: 720px; }
.ks-file-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border: 1.5px solid var(--ink);
    background: #fff;
    color: var(--ink);
    transition: background 200ms, color 200ms;
    margin-bottom: 18px;
}
.ks-file-card:hover { background: var(--ink); color: var(--paper); }
.ks-file-card__icon {
    background: var(--red);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.12em;
    padding: 14px 0;
    text-align: center;
    line-height: 1;
}
.ks-file-card div b {
    display: block;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 17px;
    color: inherit;
    font-weight: normal;
    margin-bottom: 3px;
    line-height: 1.2;
}
.ks-file-card div span {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--mid);
    letter-spacing: 0.04em;
}
.ks-file-card:hover div span { color: rgba(250, 250, 247, 0.65); }
.ks-file-card__cta {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--red);
    white-space: nowrap;
}
.ks-file-card:hover .ks-file-card__cta { color: var(--paper); }

/* services grid 4 + 5 col varianten */
.services__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .services__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .services__grid--4 { grid-template-columns: 1fr; } }

.services__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .services__grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .services__grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .services__grid--5 { grid-template-columns: 1fr; } }

/* info-grid 3-up override (bestellen/leveren/retour) */
.info-grid--three-up .info-grid__cells { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .info-grid--three-up .info-grid__cells { grid-template-columns: 1fr; } }

/* ─── bezoek-band onderaan ─────────────────────────── */
.visit__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: start;
    border-top: 1px solid var(--ink);
    padding-top: 40px;
}
@media (max-width: 880px) { .visit__inner { grid-template-columns: 1fr; gap: 28px; } }

.visit__copy h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 16px;
}
.visit__copy h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--red);
}
.visit__copy p {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 14px;
    max-width: 50ch;
}
.visit__copy a {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: color 200ms, border-color 200ms;
}
.visit__copy a:hover { color: var(--red); border-color: var(--red); }
.visit__phone {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: 36px;
    color: var(--red) !important;
    letter-spacing: -0.025em;
    border-bottom: none !important;
    line-height: 1;
}

.visit__hours {
    border: 1.5px solid var(--ink);
    background: #fff;
}
.visit__hours dl {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
}
.visit__hours dt, .visit__hours dd {
    padding: 10px 18px;
    margin: 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink);
}
.visit__hours dt {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 500;
    font-size: 15px;
    font-weight: normal;
}
.visit__hours dd {
    text-align: right;
    color: var(--ink);
}
.visit__hours dd.is-closed { color: var(--mid); }
.visit__hours dl > *:nth-last-child(-n+2) { border-bottom: none; }
.visit__addr {
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* uitgebreide contact-block — vervangt het oude tel/email-blok */
.visit__contact {
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 24px;
    align-items: baseline;
}
.visit__contact dt {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mid);
    margin: 0;
    align-self: start;
    padding-top: 4px;
}
.visit__contact dd {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    font-weight: normal;
}
.visit__contact a {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: color 200ms, border-color 200ms;
}
.visit__contact a:hover {
    color: var(--red);
    border-color: var(--red);
}

/* ─── info-vakken (WMO / PGB / particulier / proefrit) ────── */
.info-grid {
    max-width: 1320px;
    margin: 56px auto 32px;
    padding: 40px 32px 0;
}
.info-grid__head {
    margin-bottom: 32px;
    max-width: 64ch;
}
.info-grid__head h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 12px;
}
.info-grid__head h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 400;
    color: var(--red);
}
.info-grid__head p {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}
.info-grid__cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
@media (max-width: 720px) { .info-grid__cells { grid-template-columns: 1fr; } }

.info-cell {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 24px 26px 26px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 200ms;
}
.info-cell:hover { background: var(--paper-2); }

.info-cell__num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--mid);
}
.info-cell__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 4px;
}
.info-cell__title em {
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 400;
    color: var(--red);
}
.info-cell__lead {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.info-cell__lead b {
    font-variation-settings: "opsz" 18, "wght" 600;
    font-weight: normal;
    color: var(--ink);
}
.info-cell__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.info-cell__list li {
    padding-left: 18px;
    position: relative;
}
.info-cell__list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--red);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
}
.info-cell__list a {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: color 200ms, border-color 200ms;
}
.info-cell__list a:hover { color: var(--red); border-color: var(--red); }
.info-cell__cta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color 200ms;
}
.info-cell__cta:hover { color: var(--red); }

.info-grid__foot {
    border: 1px solid var(--ink);
    border-top: none;       /* sits flush against the cells grid above */
    background: var(--ink);
    color: var(--paper);
    padding: 18px 26px;
    margin-top: 0;
}
.info-grid__foot p {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 15px;
    line-height: 1.45;
    margin: 0;
}
.info-grid__foot b {
    font-variation-settings: "opsz" 18, "wght" 600;
    font-weight: normal;
    color: var(--paper);
}
.info-grid__foot a {
    color: var(--paper);
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
    transition: color 200ms;
}
.info-grid__foot a:hover { color: var(--red); }


/* ═══════════════════════════════════════════════════════════
   ONDERDELEN PAGINA — brand strip + model grid + techsheet
   ═══════════════════════════════════════════════════════════ */

/* ─── brand strip — flat row of monospace brand cells ────── */
.brand-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
.brand-strip li { margin: 0; }
.brand-strip__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 22px 22px 18px;
    min-height: 140px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: #fff;
    transition: background 200ms;
}
.brand-strip__card:hover { background: var(--paper-2); }
.brand-strip__mark {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mid);
}
.brand-strip__label {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.brand-strip__card:hover .brand-strip__label { color: var(--red); }

/* ─── model grid — cards with photo + title ──────────────── */
.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
.model-card {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: background 200ms;
}
.model-card:hover { background: var(--paper-2); }
.model-card__media {
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ink);
}
.model-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 6%;
    box-sizing: border-box;
    display: block;
}
.model-card__title {
    margin: 0;
    padding: 14px 18px 18px;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    line-height: 1.25;
    color: var(--ink);
}
.model-card:hover .model-card__title { color: var(--red); }

/* ─── techsheet — key/value spec list ────────────────────── */
.techsheet {
    margin: 0;
    padding: 0;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr;
}
.techsheet__row {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 24px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.techsheet__row:last-child { border-bottom: none; }
.techsheet__row:nth-child(even) { background: var(--paper-2); }
.techsheet dt {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin: 0;
}
.techsheet dd {
    margin: 0;
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 500;
    font-size: 16px;
    color: var(--ink);
}
@media (max-width: 640px) {
    .techsheet__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 18px; }
}

/* page content fallback block for the_content() on landing pages */
.page-content {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 72ch;
}
.page-content p { margin: 0 0 1em; }
.page-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* ─── archive results bottom note (small disclaimer below grid) ─ */
.results__note {
    margin: 24px 0 0;
    padding: 12px 0;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--mid);
    line-height: 1.5;
    border-top: 1px solid var(--rule);
}
.results__note a {
    color: var(--red);
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
}

/* ─── product card inner link wrapper + colour-swatch picker ─ */
/* Card is now <article class="prod"> with TWO separate links:
   .prod__link--photo (wraps the photo)
   .prod__link--body  (wraps brand/title/spec/pricing)
   .prod__swatches sits BETWEEN them (under the photo, above the body).
   .prod__delivery sits at the very bottom (stock + ETA strip). */
.prod__link,
.prod__link--photo,
.prod__link--body {
    display: block;
    color: inherit;
    text-decoration: none;
}
.prod__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: #fff;
}
.prod__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: box-shadow 150ms, transform 150ms;
}
.prod__swatch:hover { transform: scale(1.08); }
.prod__swatch.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red);
}
.prod__swatch:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

/* ─── stock + delivery strip at card bottom ─ */
.prod__delivery {
    margin-top: auto;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--rule);
    background: #fff;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--ink-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.prod__delivery b {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 600;
    font-weight: normal;
    font-size: 12.5px;
    letter-spacing: 0;
    color: var(--ink);
}
.prod__delivery--in-stock b { color: #2e7d32; }
.prod__delivery--in-stock b::before {
    content: '● ';
    color: #2e7d32;
}
.prod__delivery--on-order b::before {
    content: '○ ';
    color: var(--mid);
}
.prod__delivery--oos b { color: var(--red); }
.prod__delivery--oos b::before {
    content: '✕ ';
    color: var(--red);
}

/* ═══════════════════════════════════════════════════════════
   MIJN ACCOUNT — brutalist styling van WooCommerce my-account
   ═══════════════════════════════════════════════════════════ */

.my-account-wrap { max-width: 1100px; margin: 0 auto; }
.my-account-wrap .woocommerce { display: block; }

/* ─── notices ─────────────────────────────────────────────── */
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    border: 1.5px solid var(--ink);
    background: var(--paper-2);
    padding: 14px 18px;
    margin: 0 0 24px;
    font-family: var(--display);
    font-size: 15px;
    list-style: none;
    color: var(--ink);
}
.woocommerce-account .woocommerce-error { background: #fff0ef; border-color: var(--red); }
.woocommerce-account .woocommerce-message { background: #f0f6ef; border-color: #2e7d32; }
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a { color: var(--red); border-bottom: 1px solid var(--red); }

/* ─── login + register forms (twee kolom layout) ───────────── */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
@media (max-width: 780px) {
    .woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; }
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 28px 28px 32px;
    margin: 0;
}
.woocommerce-account .woocommerce-form-login::before,
.woocommerce-account .woocommerce-form-register::before { content: none; }
.woocommerce-account h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 8px;
}
.woocommerce-account .woocommerce-form-row {
    margin-bottom: 16px;
}
.woocommerce-account .woocommerce-form-row label {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 4px;
}
.woocommerce-account .woocommerce-Input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="number"],
.woocommerce-account select,
.woocommerce-account textarea {
    width: 100%;
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 10px 14px;
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 400;
    font-size: 15px;
    color: var(--ink);
    border-radius: 0;
    outline: none;
    transition: background 160ms, border-color 160ms;
    box-sizing: border-box;
}
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
    background: var(--paper-2);
    border-color: var(--red);
}

/* ─── buttons ─────────────────────────────────────────────── */
.woocommerce-account .button,
.woocommerce-account .woocommerce-button {
    display: inline-block;
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 22px;
    cursor: pointer;
    border-radius: 0;
    transition: background 160ms, color 160ms;
    text-decoration: none;
}
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

/* ─── lost password + remember-me ────────────────────────── */
.woocommerce-account .lost_password {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 12px;
}
.woocommerce-account .lost_password a { color: var(--red); border-bottom: 1px solid var(--red); }
.woocommerce-account .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 14px;
    margin-right: 12px;
}

/* ─── ingelogde dashboard ─────────────────────────────────── */
.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
}
@media (max-width: 780px) {
    .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
}

/* sidebar navigation */
.woocommerce-MyAccount-navigation {
    border: 1.5px solid var(--ink);
    background: #fff;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--rule);
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 12px 18px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-decoration: none;
    transition: background 160ms, color 160ms;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--paper-2); color: var(--red); }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
    background: var(--ink);
    color: var(--paper);
}

/* content area */
.woocommerce-MyAccount-content {
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 28px 32px 32px;
}
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content > address {
    font-family: var(--display);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 1em;
}
.woocommerce-MyAccount-content a:not(.button) {
    color: var(--red);
    border-bottom: 1px solid var(--red);
}

/* tables (orders, downloads) */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.woocommerce-table {
    width: 100%;
    border: 1.5px solid var(--ink);
    border-collapse: collapse;
    margin: 8px 0 24px;
    font-family: var(--display);
    font-size: 14px;
}
.woocommerce-MyAccount-content table.shop_table thead th {
    background: var(--ink);
    color: var(--paper);
    text-align: left;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1.5px solid var(--ink);
}
.woocommerce-MyAccount-content table.shop_table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: none; }

/* addresses block */
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 600px) {
    .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; }
}
.woocommerce-MyAccount-content .woocommerce-Address {
    border: 1px solid var(--rule);
    background: var(--paper-2);
    padding: 18px 22px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   KLANTENSERVICE SUB-PAGE — 2-koloms doc + sibling-aside
   ═══════════════════════════════════════════════════════════ */

.ks-doc { padding-top: 32px; }
.ks-doc__layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 56px;
    align-items: start;
}
@media (max-width: 880px) {
    .ks-doc__layout { grid-template-columns: 1fr; gap: 36px; }
}

.ks-doc__body {
    font-family: var(--display);
    font-variation-settings: "opsz" 18, "wght" 400;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 72ch;
}
.ks-doc__body h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 700;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 36px 0 14px;
}
.ks-doc__body h2 em { font-style: italic; color: var(--red); font-variation-settings: "opsz" 48, "wght" 400; }
.ks-doc__body h3 {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 18px;
    color: var(--ink);
    margin: 28px 0 8px;
}
.ks-doc__body p { margin: 0 0 1em; }
.ks-doc__body a:not(.btn) {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ks-doc__body ul, .ks-doc__body ol {
    margin: 0 0 1.2em 1.2em;
    padding: 0;
}
.ks-doc__body li { margin: 0 0 0.4em; }
.ks-doc__body table {
    width: 100%;
    border: 1.5px solid var(--ink);
    border-collapse: collapse;
    margin: 1em 0 1.5em;
    font-size: 15px;
}
.ks-doc__body th {
    background: var(--ink);
    color: var(--paper);
    text-align: left;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ks-doc__body td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule);
}
.ks-doc__body td:first-child { font-weight: 600; }
.ks-doc__body blockquote {
    border-left: 3px solid var(--red);
    padding: 4px 0 4px 18px;
    margin: 1em 0;
    color: var(--ink-2);
    font-style: italic;
}

/* aside met sibling-nav + contact */
.ks-doc__aside { position: sticky; top: 100px; }
@media (max-width: 880px) { .ks-doc__aside { position: static; } }
.ks-doc__aside-card {
    border: 1.5px solid var(--ink);
    background: #fff;
    margin-bottom: 18px;
}
.ks-doc__aside-card--contact {
    background: var(--paper-2);
    padding: 18px 22px;
}
.ks-doc__aside-h {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    padding: 12px 18px;
    margin: 0;
}
.ks-doc__aside-card--contact .ks-doc__aside-h {
    background: transparent;
    color: var(--ink);
    padding: 0 0 6px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 8px;
}
.ks-doc__aside-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ks-doc__aside-list li { border-bottom: 1px solid var(--rule); }
.ks-doc__aside-list li:last-child { border-bottom: none; }
.ks-doc__aside-list a {
    display: block;
    padding: 12px 18px;
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 500;
    font-size: 15px;
    color: var(--ink);
    transition: background 160ms, color 160ms;
}
.ks-doc__aside-list a:hover { background: var(--paper-2); color: var(--red); }
.ks-doc__aside-list a.is-current { background: var(--ink); color: var(--paper); }

.ks-doc__aside-card--contact p {
    font-family: var(--display);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 4px;
    color: var(--ink);
}
.ks-doc__aside-card--contact p b { font-variation-settings: "opsz" 18, "wght" 600; font-weight: normal; }
.ks-doc__aside-card--contact a { color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); }
.ks-doc__hours {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--mid);
    margin-top: 8px !important;
}

/* =====================================================================
   single-product (brutalist port — see woocommerce/content-single-product.php)
   Layout intent: two-column hero (gallery left ~60%, info right ~40%) at
   ≥980px; stack on tablet/mobile. Hairline borders, sharp corners, italic
   display H1, red accent on price + active swatch.
   ===================================================================== */
.prodpage { padding: 32px 0 96px; background: var(--paper); }
.prodpage__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}
.prodpage__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 48px;
    margin: 24px 0 56px;
    align-items: start;
}
@media (max-width: 980px) {
    .prodpage__hero { grid-template-columns: 1fr; gap: 32px; }
}

/* ─ gallery ──────────────────────────────────────────── */
.prodpage__gallery { position: relative; min-width: 0; }
.prodpage__hero-img {
    border: 1.5px solid var(--ink);
    background: #fff;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.prodpage__hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    background: #fff;
}
.prodpage__hero-img--empty {
    color: var(--mid);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 80px 0;
}
.prodpage__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--red);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 10px;
}
.prodpage__thumbs {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.prodpage__thumb button {
    width: 100%;
    border: 1.5px solid var(--rule);
    background: #fff;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    transition: border-color 150ms;
}
.prodpage__thumb button:hover { border-color: var(--ink); }
.prodpage__thumb.is-active button { border-color: var(--red); border-width: 2px; }
.prodpage__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* ─ info card ────────────────────────────────────────── */
.prodpage__info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.prodpage__brand {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--mid);
    margin: 0;
}
.prodpage__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 144, "wght" 700;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}
.prodpage__title em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 500;
    color: var(--red);
}

/* ─ price stack ──────────────────────────────────────── */
.prodpage__pricing {
    border: 1.5px solid var(--ink);
    background: #fff;
    margin-top: 4px;
}
.prodpage__pricing-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
}
.prodpage__pricing-row:last-child { border-bottom: none; }
.prodpage__pricing-row--direct { background: #fff; }
.prodpage__pricing-row--direct .prodpage__pricing-label { color: var(--red); }
.prodpage__pricing-row--direct .prodpage__pricing-value { color: var(--red); font-size: 22px; }
.prodpage__soldout { margin: 6px 0 0; color: var(--red); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.prodpage__pricing-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.prodpage__pricing-value {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 600;
    font-size: 16px;
    color: var(--ink);
}
.prodpage__pricing-value .woocommerce-Price-currencySymbol { margin-right: 2px; }
.prodpage__spraypay-logo { height: 14px; width: auto; vertical-align: middle; }

/* ─ swatches ─────────────────────────────────────────── */
.prodpage__swatches { margin-top: 4px; }
.prodpage__swatches-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    margin: 0 0 8px;
}
.prodpage__swatches-label b {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin-left: 6px;
}
.prodpage__swatch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.prodpage__swatch {
    display: block;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--ink);
    padding: 3px;
    background: #fff;
    transition: border-color 150ms, transform 150ms;
}
.prodpage__swatch:hover { transform: translateY(-1px); }
.prodpage__swatch.is-active { border-color: var(--red); border-width: 2px; padding: 2px; }
.prodpage__swatch-dot {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--swatch, #ccc);
}

/* ─ attributes / specs ───────────────────────────────── */
.prodpage__attrs {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 18px;
    row-gap: 6px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.prodpage__attrs dt {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mid);
}
.prodpage__attrs dd {
    margin: 0;
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 500;
    font-size: 13px;
    color: var(--ink);
}

/* ─ stock + cta ──────────────────────────────────────── */
.prodpage__stock {
    margin: 4px 0 0;
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    color: var(--ink);
    background: var(--paper-2);
}
.prodpage__stock.is-instock   { color: #2e6b3a; border-color: #2e6b3a; }
.prodpage__stock.is-backorder { color: var(--ink); }
.prodpage__stock.is-oos       { color: var(--red);  border-color: var(--red); }
.prodpage__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin-top: 4px;
}
.prodpage__cta-form { display: contents; }
/* The inner WC <form class="cart"> defaults to flex shrinking to its
 * content width, which made the options box visibly narrower than the
 * .prodpage__swatches block above. Stretch to the full column so the
 * Kleur / Snelheid / Opvoeren / Windscherm stack reads at one width. */
.prodpage__cta > form.cart { flex: 1 1 100%; min-width: 0; }
.prodpage__cta button[type="submit"],
.prodpage__cta .single_add_to_cart_button {
    background: var(--red);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 22px;
    border: 1.5px solid var(--red);
    cursor: pointer;
    transition: background 150ms, color 150ms;
    flex: 1 1 auto;
    min-width: 200px;
}
.prodpage__cta button[type="submit"]:hover,
.prodpage__cta .single_add_to_cart_button:hover {
    background: var(--red-deep);
    border-color: var(--red-deep);
}
.prodpage__cta .quantity { display: none; }   /* one-quantity is the only meaningful case for vehicles */

/* ─ usps ─────────────────────────────────────────────── */
.prodpage__usps {
    list-style: none;
    margin: 4px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
@media (max-width: 540px) {
    .prodpage__usps { grid-template-columns: 1fr; }
}
.prodpage__usps li {
    font-family: var(--display);
    font-variation-settings: "opsz" 14, "wght" 500;
    font-size: 13px;
    color: var(--ink);
    padding-left: 18px;
    position: relative;
}
.prodpage__usps li::before {
    content: "+";
    color: var(--red);
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: 700;
}

/* ─ tab anchors ──────────────────────────────────────── */
.prodpage__tabs {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 8px;
    margin: 32px 0 24px;
    position: sticky;
    top: 80px;
    background: #fff;
    z-index: 5;
}
.prodpage__tabs a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 150ms;
}
.prodpage__tabs a:hover { border-color: var(--red); color: var(--red); }

.prodpage__section { margin: 32px 0; scroll-margin-top: 140px; }
.section-head--inline { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.section-head--inline .section-head__title { font-size: 26px; }

/* specs (zebra rows) */
.prodpage__specs {
    border: 1.5px solid var(--ink);
    background: #fff;
    margin: 0;
    padding: 0;
}
.prodpage__specs-row {
    display: grid;
    grid-template-columns: minmax(160px, 30%) 1fr;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
}
.prodpage__specs-row:last-child { border-bottom: none; }
.prodpage__specs-row:nth-child(odd) { background: var(--paper-2); }
.prodpage__specs-row dt {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mid);
}
.prodpage__specs-row dd {
    margin: 0;
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 500;
    font-size: 14px;
    color: var(--ink);
}

/* description prose */
.prodpage__copy {
    max-width: 70ch;
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 400;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2);
}
.prodpage__copy h2,
.prodpage__copy h3 {
    font-family: var(--display);
    font-variation-settings: "opsz" 72, "wght" 600;
    font-style: italic;
    color: var(--ink);
    margin: 28px 0 10px;
}
.prodpage__copy h2 { font-size: 24px; }
.prodpage__copy h3 { font-size: 19px; }
.prodpage__copy p { margin: 0 0 12px; }
.prodpage__copy a { color: var(--red); border-bottom: 1px solid var(--red); }

/* related rail uses existing .rail__grid / .prod components */

/* Hide the native WC variations form swatch picker — we use our own
   .prodpage__swatches above. Keep the add-to-cart wrap visible so the
   submit button still works after the URL is set by our swatch link. */
body.acties-brutalist .variations_form .variations { display: none; }
body.acties-brutalist .variations_form .reset_variations { display: none; }
body.acties-brutalist .variations_form .single_variation_wrap .woocommerce-variation-price,
body.acties-brutalist .variations_form .single_variation_wrap .woocommerce-variation-availability { display: none; }
body.acties-brutalist .variations_form .single_variation_wrap .stock { display: none; }

/* Hide the mu-plugin color-swatches widget on brutalist pages — we use
   .prodpage__swatches above and link each one to its variation URL. */
body.acties-brutalist .cs-swatches,
body.acties-brutalist .acties-below-gallery-color,
body.acties-brutalist .variations,
body.acties-brutalist .reset_variations,
body.acties-brutalist .single_variation_wrap .woocommerce-variation-add-to-cart .quantity { display: none !important; }

/* Generic archive layout (taxonomy-product_cat.php / archive-product.php) */
.archive-simple {
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 32px 96px;
}
.archive-simple__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--ink);
}
.archive-simple__count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    margin: 0;
}
.archive-simple__count b {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 700;
    font-size: 18px;
    color: var(--ink);
    margin-right: 4px;
}
.archive-simple__empty {
    padding: 64px 0;
    text-align: center;
    font-family: var(--display);
    font-size: 18px;
    color: var(--mid);
}
.archive-simple__empty b { color: var(--ink); display: block; margin-bottom: 18px; font-size: 22px; }
.prod__photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
}

/* =====================================================================
   cart + checkout (page-cart.php / page-checkout.php) — brutalist port
   of the WooCommerce Cart Block + Checkout Block. The blocks render
   their own DOM (.wc-block-cart-*, .wc-block-checkout-*); we restyle in
   place rather than replacing markup, so WC updates keep working.
   ===================================================================== */
.cartpage {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 32px 96px;
}

/* container resets — kill the storefront/legacy alignwide/full + box bg */
.cartpage .wp-block-woocommerce-cart,
.cartpage .wp-block-woocommerce-checkout {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
.cartpage .wp-block-woocommerce-cart.is-loading,
.cartpage .wp-block-woocommerce-checkout.is-loading {
    background: transparent;
}

/* two-column layout: items left, sidebar right (matches WC default) */
.cartpage .wc-block-cart__main,
.cartpage .wp-block-woocommerce-cart-items-block {
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 0;
    min-width: 0;
}
.cartpage .wc-block-cart__sidebar,
.cartpage .wp-block-woocommerce-cart-totals-block {
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 0;
    min-width: 0;
}

/* header row of the items table. The cart table has `border-collapse:
 * separate`, so a background on the <tr> doesn't paint behind transparent
 * <th> cells — the middle cell would show the cart's white bg through,
 * splitting the header into two black islands with a white gap. Apply
 * the ink fill to each <th> directly. */
.cartpage .wc-block-cart-items__header,
.cartpage .wc-block-cart-items__header > th {
    background: var(--ink) !important;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: none;
}
/* WC's own stylesheet hides the product-column header with
 * `visibility: hidden`, which also blocks our ink background — leaving a
 * white gap in the middle of the otherwise-black header strip. Force the
 * cell visible so the bar reads as one continuous black row. */
.cartpage .wc-block-cart-items__header-product {
    visibility: visible !important;
}
.cartpage .wc-block-cart-items__header span { color: var(--paper); }
/* While the Cart block is hydrating, its skeleton placeholder uses the
 * English strings "Product / Details / Total" in <thead>. They flash for a
 * moment before React replaces them with the translated labels. Hide the
 * header text whenever the table still contains skeleton elements so no
 * English term ever paints on screen. */
.cartpage .wc-block-cart-items:has(.wc-block-components-skeleton__element) .wc-block-cart-items__header span {
    visibility: hidden;
}

/* item rows */
.cartpage table.wc-block-cart-items,
.cartpage .wc-block-cart-items {
    border: none;
    margin: 0;
    background: #fff;
    font-family: var(--display);
}
.cartpage .wc-block-cart-items__row {
    border-bottom: 1px solid var(--rule);
    padding: 16px;
}
.cartpage .wc-block-cart-items__row:last-child { border-bottom: none; }
.cartpage .wc-block-cart-item__image img {
    border: 1px solid var(--rule);
    background: var(--paper-2);
    padding: 4px;
    max-width: 96px;
}
.cartpage .wc-block-cart-item__product-name,
.cartpage .wc-block-cart-item__product-name a {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms;
}
.cartpage .wc-block-cart-item__product-name a:hover { border-color: var(--red); color: var(--red); }
.cartpage .wc-block-cart-item__product-metadata,
.cartpage .wc-block-cart-item__product-variation {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--mid);
    text-transform: uppercase;
}
.cartpage .wc-block-cart-item__total,
.cartpage .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 16px;
    color: var(--ink);
}
.cartpage .wc-block-components-product-price__value { color: var(--ink); }

/* quantity stepper — make it look like a brutalist control */
.cartpage .wc-block-cart-item__quantity .wc-block-components-quantity-selector,
.cartpage .wc-block-components-quantity-selector {
    border: 1.5px solid var(--ink);
    border-radius: 0;
    background: #fff;
    height: 36px;
    overflow: hidden;
}
.cartpage .wc-block-components-quantity-selector__input {
    background: #fff;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
    border: none;
}
.cartpage .wc-block-components-quantity-selector__button {
    background: #fff;
    color: var(--ink);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    border-top: none;
    border-bottom: none;
    font-family: var(--mono);
    cursor: pointer;
}
.cartpage .wc-block-components-quantity-selector__button:hover {
    background: var(--ink);
    color: var(--paper);
}

/* "verwijder" link */
.cartpage .wc-block-cart-item__remove-link {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms, color 150ms;
}
.cartpage .wc-block-cart-item__remove-link:hover { color: var(--red); border-bottom-color: var(--red); }

/* sidebar / totals card — each totals-item is a flex row (label left, value
 * right). The block's own CSS doesn't set justify-content, so without this
 * override the label and value collapse together with no spacing. */
.cartpage .wc-block-components-totals-wrapper {
    border-color: var(--rule) !important;
    border-top: 1px solid var(--rule);
    padding: 0 16px !important;
    background: #fff;
}
.cartpage .wc-block-components-totals-wrapper:first-of-type { border-top: none; }
.cartpage .wc-block-components-totals-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0 !important;
    background: #fff;
    border: none;
}
.cartpage .wc-block-components-totals-item__label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    flex: 0 1 auto;
}
.cartpage .wc-block-components-totals-item__value {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 16px;
    color: var(--ink);
    flex: 0 0 auto;
    text-align: right;
}
.cartpage .wc-block-components-totals-item__description {
    flex: 1 1 100%;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--mid);
    margin: 4px 0 0;
}
.cartpage .wc-block-components-totals-item__description:empty { display: none; }
.cartpage .wc-block-components-totals-item__description p { margin: 0; }
.cartpage .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--rule);
    padding: 16px 0 !important;
}
.cartpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.cartpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 18px;
    color: var(--ink);
}
.cartpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--red); }

/* sidebar header strip ("Bestellings­overzicht" / "Order Summary") */
.cartpage .wp-block-woocommerce-cart-order-summary-heading-block,
.cartpage .wp-block-woocommerce-checkout-order-summary-heading-block {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 16px;
    margin: 0;
}
.cartpage .wp-block-woocommerce-cart-order-summary-heading-block * { color: var(--paper); }

/* coupon block */
.cartpage .wc-block-components-totals-coupon,
.cartpage .wc-block-components-panel { background: var(--paper-2); }
.cartpage .wc-block-components-panel__button {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

/* primary CTA buttons — "Doorgaan naar afrekenen", "Bestelling plaatsen" */
.cartpage .wc-block-cart__submit-button,
.cartpage .wc-block-components-checkout-place-order-button,
.cartpage button.wc-block-components-button.wc-block-cart__submit-button,
.cartpage .wp-block-woocommerce-proceed-to-checkout-block button,
.cartpage .wc-block-components-button.contained {
    background: var(--red) !important;
    color: var(--paper) !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 14px 22px !important;
    border: 1.5px solid var(--red) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 150ms, border-color 150ms;
    width: 100%;
    height: auto;
    line-height: 1;
}
.cartpage .wc-block-cart__submit-button:hover,
.cartpage .wc-block-components-checkout-place-order-button:hover,
.cartpage .wc-block-components-button.contained:hover {
    background: var(--red-deep) !important;
    border-color: var(--red-deep) !important;
}

/* form inputs (checkout) */
.cartpage .wc-block-components-text-input input,
.cartpage .wc-block-components-text-input textarea,
.cartpage .wc-block-components-select select,
.cartpage .wc-block-components-checkbox label,
.cartpage input[type="text"],
.cartpage input[type="email"],
.cartpage input[type="tel"],
.cartpage select {
    border: 1.5px solid var(--ink) !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-family: var(--display);
    color: var(--ink);
    box-shadow: none !important;
    padding: 12px 14px;
    font-size: 14px;
}
.cartpage .wc-block-components-text-input label,
.cartpage .wc-block-components-checkout-step__heading,
.cartpage .wc-block-components-checkout-step__title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}
.cartpage .wc-block-components-form .wc-block-components-text-input.is-active label,
.cartpage .wc-block-components-text-input.has-value label {
    color: var(--mid);
}

/* checkout step headers */
.cartpage .wc-block-components-checkout-step {
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 20px;
    margin: 0 0 20px;
}
.cartpage .wc-block-components-checkout-step__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 14px;
}

/* empty cart state — re-skin the empty.svg + headline + cta */
.cartpage .wc-block-cart__empty-cart__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 96, "wght" 700;
    font-style: italic;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1;
    color: var(--red);
    text-align: center;
    margin: 24px 0 14px;
}
.cartpage .with-empty-cart-icon { color: var(--ink); }
.cartpage .wc-block-cart-empty-cart {
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 48px 32px;
    text-align: center;
}
.cartpage .wc-block-cart-empty-cart .wp-block-button__link,
.cartpage .wc-block-cart-empty-cart .wc-block-components-button {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border: 1.5px solid var(--ink) !important;
    border-radius: 0 !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 12px 22px !important;
}

/* "Nieuw in de winkel" rail (WC related products under empty cart) — let
   the existing .rail components handle layout but trim the legacy red
   storefront header above it. */
.cartpage h2.wp-block-heading,
.cartpage .wp-block-woocommerce-empty-cart-block h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 72, "wght" 600;
    font-style: italic;
    font-size: 24px;
    color: var(--ink);
    text-align: left;
    margin: 48px 0 18px;
}

/* notices */
.cartpage .wc-block-components-notice-banner,
.cartpage .woocommerce-notices-wrapper .wc-block-components-notice-banner {
    border-radius: 0;
    border: 1.5px solid var(--ink);
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--display);
}
.cartpage .wc-block-components-notice-banner.is-error { border-color: var(--red); background: #fff; color: var(--red); }

/* Order summary in checkout sidebar */
.cartpage .wc-block-components-order-summary-item {
    border-bottom: 1px solid var(--rule);
    padding: 10px 0;
}
.cartpage .wc-block-components-order-summary-item__image {
    border: 1px solid var(--rule);
    background: var(--paper-2);
}

/* =====================================================================
   product-options widget (mu-plugins/product-options.php) — brutalist
   dropdowns matching the voordeelscooters.nl pattern: stacked label →
   native <select> with our brutalist border + sharp corners.
   ===================================================================== */
body.acties-brutalist .po-product-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 18px;
    padding: 16px;
    border: 1.5px solid var(--ink);
    background: #fff;
}
body.acties-brutalist .po-option { margin: 0; }
body.acties-brutalist .po-option-title {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    justify-content: space-between;   /* title left · asterisk right (user 2026-05-23) */
    align-items: baseline;
}
body.acties-brutalist .po-option-title .po-required {
    color: var(--red);
    margin-left: auto;                 /* pin to the right edge */
}

/* Native <select> — sharp corners, thick ink border, brutalist chevron.
 * Scoped to `select.po-select` (not `.po-select`) because the wrapping
 * `<div class="po-option po-select">` shares the class name — without
 * the tag scope the wrapper inherited the border + chevron, producing a
 * nested-box effect and two stacked chevrons. */
body.acties-brutalist select.po-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 500;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    /* Chevron — single black SVG triangle, right-aligned */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 L6 6.5 L11 1.5' stroke='%230E0E0D' stroke-width='1.5' stroke-linecap='square'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    box-shadow: none;
    transition: border-color 150ms, background-color 150ms;
}
body.acties-brutalist select.po-select:hover { border-color: var(--red); }
body.acties-brutalist select.po-select:focus {
    outline: none;
    border-color: var(--red);
    background-color: var(--paper-2);
}
body.acties-brutalist select.po-select option {
    font-family: var(--display);
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    padding: 8px;
}

/* Brutalist checkbox option (used for the dynamic "Opvoeren" toggle,
 * see product-options.js). Visually mirrors the .po-select row so the
 * Snelheid/Opvoeren/Windscherm column reads as one consistent stack. */
body.acties-brutalist .po-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--ink);
    background: #fff;
    cursor: pointer;
    transition: border-color 150ms, background-color 150ms;
}
body.acties-brutalist .po-checkbox:hover { border-color: var(--red); }
body.acties-brutalist .po-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--ink);
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
}
body.acties-brutalist .po-checkbox input[type="checkbox"]:checked {
    background: var(--ink);
}
body.acties-brutalist .po-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: -1px;
    width: 6px;
    height: 12px;
    border: solid var(--paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body.acties-brutalist .po-checkbox-text {
    flex: 1 1 auto;
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ink);
}
body.acties-brutalist .po-checkbox-price {
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 600;
    font-size: 14px;
    color: var(--red);
    flex: 0 0 auto;
}

/* When the brutalist single-product template is in play, the options widget
 * is injected by woocommerce_before_add_to_cart_button — sitting between the
 * stock pill and the CTA button. Add a hair of breathing room. */
body.acties-brutalist .prodpage__cta-form .po-product-options { margin: 0 0 14px; }

/* po-total-price (live total under options when surcharges are picked) */
body.acties-brutalist .po-total-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    margin: 0 0 12px;
}
body.acties-brutalist .po-total-amount {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 600;
    font-size: 22px;
    color: var(--red);
}
body.acties-brutalist .po-total-breakdown {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--ink-2, #6b6b66);
    padding: 8px 16px;
    border-top: 1px solid var(--rule);
}

/* Hide the legacy radio-button styling on brutalist pages when it leaks. */
body.acties-brutalist .po-option.po-radio .po-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.acties-brutalist .po-option.po-radio .po-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1.5px solid var(--ink);
    background: #fff;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
body.acties-brutalist .po-option.po-radio .po-btn:hover { background: var(--paper-2); }
body.acties-brutalist .po-option.po-radio .po-btn-input:checked + .po-btn {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
body.acties-brutalist .po-option.po-radio .po-btn-input { position: absolute; opacity: 0; pointer-events: none; }
body.acties-brutalist .po-price-surcharge {
    font-family: var(--display);
    font-variation-settings: "opsz" 16, "wght" 600;
    color: var(--red);
    margin-left: 6px;
}

/* Live total widget — 3-column horizontal layout (Direct | In3 | SprayPay)
 * matching actiescooters.nl. Direct cell is inverted (ink bg + red price);
 * the two payment-plan cells share the paper background. Stacks on mobile. */
body.acties-brutalist .po-total-price {
    display: block;
    border: 1.5px solid var(--ink);
    background: #fff;
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
}
body.acties-brutalist .po-total-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
}
@media (max-width: 540px) {
    body.acties-brutalist .po-total-grid { grid-template-columns: 1fr; }
}
body.acties-brutalist .po-total-cell {
    display: flex;
    flex-direction: row;                /* label left · value right (user 2026-05-23) */
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-right: 1px solid var(--rule);
}
body.acties-brutalist .po-total-cell:last-child { border-right: none; }
@media (max-width: 540px) {
    body.acties-brutalist .po-total-cell { border-right: none; border-bottom: 1px solid var(--rule); }
    body.acties-brutalist .po-total-cell:last-child { border-bottom: none; }
}
body.acties-brutalist .po-total-cell--direct {
    background: #fff;
    color: var(--ink);
}
body.acties-brutalist .po-total-cell--direct .po-total-label { color: var(--mid); }
body.acties-brutalist .po-total-cell--direct .po-total-amount {
    font-family: var(--display);
    font-variation-settings: "opsz" 48, "wght" 700;
    font-size: 22px;
    color: var(--red);
    line-height: 1;
}
body.acties-brutalist .po-total-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mid);
}
body.acties-brutalist .po-total-sub {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 14px;
    color: var(--ink);
}
body.acties-brutalist .po-total-breakdown {
    display: block;
    padding: 6px 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
}

/* Now that the live total covers Direct / In3 / SprayPay AND tracks option
 * surcharges in real time, hide the static price stack PHP renders above
 * (it duplicates the info and never moves). Use :has() to scope: only hide
 * when the options widget is actually present. */
body.acties-brutalist .prodpage__info:has(.po-product-options) .prodpage__pricing { display: none; }

/* prodpage__heading — title block hoisted above the gallery per user
 * request 2026-05-23. Sits between the breadcrumb and the two-column hero,
 * full-width, left-aligned with the same gutter. */
.prodpage__heading {
    margin: 0 0 18px;
    padding: 0;
}
.prodpage__heading .prodpage__brand {
    margin: 0 0 4px;
}
.prodpage__heading .prodpage__title {
    margin: 0;
    font-size: clamp(32px, 5vw, 56px);
}

/* Now that the title lives above the gallery, the right column starts with
 * the price stack — give it a tighter top margin. */
body.acties-brutalist .prodpage__info > .prodpage__pricing:first-child,
body.acties-brutalist .prodpage__info > .prodpage__cta:first-child { margin-top: 0; }

/* Kleur picker = the original .prodpage__swatches block (coloured squares
 * with active outline) — sits above the dropdowns, navigates to the
 * variation permalink. Reinstated 2026-05-23 per user request. */
body.acties-brutalist .prodpage__swatches {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1.5px solid var(--ink);
    background: #fff;
}
body.acties-brutalist .prodpage__swatches-label {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
}
body.acties-brutalist .prodpage__swatches-label b {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin-left: 6px;
}
body.acties-brutalist .prodpage__swatch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.acties-brutalist .prodpage__swatch {
    display: block;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--ink);
    padding: 3px;
    background: #fff;
    transition: transform 150ms, border-color 150ms;
}
body.acties-brutalist .prodpage__swatch.is-active { border-color: var(--red); border-width: 2px; padding: 2px; }
body.acties-brutalist .prodpage__swatch-dot {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--swatch, #ccc);
}

/* ─────────────────────────────────────────────────────────────────
   Snelheid = 2 coloured radio blocks (la-souris.nl pattern).
   Backed by type=radio in apply_scooter_options.php, rendered as
   .po-btn buttons; CSS keys off the input value to colour each. */
body.acties-brutalist .po-option.po-radio .po-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
body.acties-brutalist .po-option.po-radio .po-btn {
    justify-content: center;
    text-align: center;
    padding: 14px 12px;
    font-size: 12px;
    line-height: 1.15;
    border-width: 2px;
}
/* Coloured rules carry the .po-option.po-radio prefix to outrank the
 * generic "selected = inverted" rule earlier in this file. Without it
 * the selected button repainted to black ink + paper text, hiding the
 * snor/brom colour code. */
body.acties-brutalist .po-option.po-radio .po-btn-input[value*="25km/h"] + .po-btn,
body.acties-brutalist .po-option.po-radio .po-btn-input[value*="25km/h"]:checked + .po-btn {
    background: #1f6fd6;
    border-color: #1f6fd6;
    color: var(--paper);
}
body.acties-brutalist .po-option.po-radio .po-btn-input[value*="45km/h"] + .po-btn,
body.acties-brutalist .po-option.po-radio .po-btn-input[value*="45km/h"]:checked + .po-btn {
    background: #f4c81a;
    border-color: #f4c81a;
    color: var(--ink);
}
/* Selected state — keep the colour, just thicken to a black outline. */
body.acties-brutalist .po-option.po-radio .po-btn-input:checked + .po-btn {
    border-color: var(--ink) !important;
    border-width: 3px;
    box-shadow: 0 0 0 2px var(--paper) inset;
}

/* Force white (paper) background on every product-photo container so a
 * transparent PNG never paints on top of paper-2 or ink. Catches any
 * future variant photo that ships as a PNG with cut-out background. */
body.acties-brutalist .prod__photo,
body.acties-brutalist .prod__photo img,
body.acties-brutalist .prodpage__hero-img,
body.acties-brutalist .prodpage__hero-img img,
body.acties-brutalist .prodpage__thumb,
body.acties-brutalist .prodpage__thumb img,
body.acties-brutalist .prodpage__thumb button {
    background: #fff;
}

/* =====================================================================
   Cart reminder — "Nog iets vergeten?" (includes/cart-reminder.php)
   This component lives in main.css normally, but on /cart/ and /checkout/
   the brutalist enqueue path skips main.css entirely (see functions.php:38),
   so without these brutalist-scoped rules the tiles render as an unstyled
   vertical stack. 3-column tile grid; each tile is a flat white card with
   ink border and a left-aligned icon, label, count + arrow.
   ===================================================================== */
body.acties-brutalist .acties-cart-reminder {
    margin: 24px 0 8px;
    padding: 0 16px 16px;
}
body.acties-brutalist .acties-cart-reminder__title {
    font-family: var(--display);
    font-variation-settings: "opsz" 36, "wght" 700;
    font-size: 22px;
    margin: 0 0 14px;
    color: var(--ink);
    text-align: left;
}
body.acties-brutalist .acties-cart-reminder .acties-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 720px) {
    body.acties-brutalist .acties-cart-reminder .acties-categories__grid {
        grid-template-columns: 1fr;
    }
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card:hover {
    background: var(--ink);
    color: var(--paper);
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: inherit;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__icon-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__desc {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--mid);
    margin: 2px 0 0;
    line-height: 1.3;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card:hover .acties-cat-card__desc {
    color: var(--paper);
    opacity: 0.7;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__meta {
    grid-column: 2;
    grid-row: 3;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--mid);
    margin-top: 4px;
    letter-spacing: 0.04em;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card:hover .acties-cat-card__meta {
    color: var(--paper);
    opacity: 0.7;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__arrow {
    grid-column: 3;
    grid-row: 1 / 4;
    display: grid;
    place-items: center;
    color: inherit;
}
body.acties-brutalist .acties-cart-reminder .acties-cat-card__arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* =====================================================================
   Cart sidebar custom rows (mu-plugins/in3-price-display.php injects
   .cart-sidebar-custom into the cart totals block with rows for Prijs,
   Verzending, BTW, Bestelling totaal, in3, optionally lease). The JS
   then hides the stock WC totals so only these rows show.
   These rules live in main.css for the legacy theme, but the cart page
   runs brutalist mode and skips main.css — so without these the rows
   collapse into an unstyled inline stack of labels + values.
   ===================================================================== */
body.acties-brutalist .cart-sidebar-custom {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    background: #fff;
}
body.acties-brutalist .cart-sidebar-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    font-family: var(--display);
    font-size: 14px;
    border-bottom: 1px solid var(--rule);
}
body.acties-brutalist .cart-sidebar-row:last-child { border-bottom: none; }
body.acties-brutalist .cart-sidebar-row__label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    flex: 0 1 auto;
}
body.acties-brutalist .cart-sidebar-row__value {
    font-family: var(--display);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 15px;
    color: var(--ink);
    flex: 0 0 auto;
    text-align: right;
}
/* Bestelling totaal — emphasised */
body.acties-brutalist .cart-sidebar-row--total {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 14px 0;
    margin-top: 4px;
}
body.acties-brutalist .cart-sidebar-row--total .cart-sidebar-row__label {
    color: var(--ink);
    font-size: 12px;
}
body.acties-brutalist .cart-sidebar-row--total .cart-sidebar-row__value {
    color: var(--red);
    font-size: 20px;
    font-variation-settings: "opsz" 36, "wght" 700;
}
/* in3 row — red accent */
body.acties-brutalist .cart-sidebar-row--in3 .cart-sidebar-row__label,
body.acties-brutalist .cart-sidebar-row--in3 .cart-sidebar-row__value {
    color: var(--red);
}
/* lease row — ink accent (no purple in brutalist palette) */
body.acties-brutalist .cart-sidebar-row--lease .cart-sidebar-row__label,
body.acties-brutalist .cart-sidebar-row--lease .cart-sidebar-row__value {
    color: var(--ink);
}
/* shipping-pending row — quieter so it doesn't shout "free" */
body.acties-brutalist .cart-sidebar-row--shipping-pending .cart-sidebar-row__value {
    font-size: 12px;
    color: var(--mid);
    font-variation-settings: "opsz" 16, "wght" 500;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Sizing table (on /fietsen/, /product-category/fietsen/): the table has more
   columns than fit on mobile. Wrap it in a horizontal scroll container so the
   page itself doesn't overflow. */
.sizing__table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sizing__table {
    min-width: 100%;
    border-collapse: collapse;
}

/* werk section headline: prevent very large display text from pushing the grid
   column wider than its mobile container. */
@media (max-width: 880px) {
    .werk__copy h2 { overflow-wrap: anywhere; word-break: break-word; }
}

/* Mobile actions inside the red menubar: phone / cart / search icons next to
   the hamburger toggle. Hidden on desktop; the desktop layout uses the larger
   .topnav__cta + .topnav__cart + .topnav__search blocks instead. */
.topnav__mobile-actions { display: none; }
@media (max-width: 640px) {
    .topnav__menubar {
        display: flex;
        align-items: stretch;
    }
    .topnav__menubar .topnav__menu-toggle {
        flex: 1 1 auto;
        justify-content: flex-start;
        width: auto;
    }
    .topnav__mobile-actions {
        display: inline-flex;
        align-items: stretch;
        gap: 0;
        flex: 0 0 auto;
        padding-right: 4px;
    }
    .topnav__mobile-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--paper);
        cursor: pointer;
        position: relative;
        transition: background 150ms;
    }
    .topnav__mobile-btn:hover,
    .topnav__mobile-btn:focus { background: rgba(0,0,0,0.12); }
    .topnav__mobile-btn:focus { outline: 0; }
    .topnav__mobile-cart-count {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--ink);
        color: var(--paper);
        font-family: var(--mono);
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        font-weight: 600;
    }
    .topnav__mobile-cart-count.is-empty { display: none; }
    /* When the menu is open, the menubar becomes column layout so the dropdown
       can list below. Keep the actions row inline with the toggle on top. */
    .topnav__menubar { flex-wrap: wrap; }
    .topnav__menubar .topnav__menu {
        flex-basis: 100%;
        order: 3;
    }
}

/* Section header: the desktop layout (num | title | meta) overflows mobile when
   the title is wider than the middle 1fr. Stack on mobile so meta wraps below. */
@media (max-width: 640px) {
    .section-head {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 8px;
        column-gap: 14px;
        align-items: baseline;
    }
    .section-head__meta {
        grid-column: 1 / -1;
        text-align: left;
    }
}
