/* =====================================================================
   HobbyDeals — storefront
   Mobile first. Alleen de winkel laadt deze stylesheet (layout.html); het
   beheer heeft admin-basis.css en admin.css. Het nieuwe ontwerp (opdracht
   #131) staat in de secties van de kop, de voet, de pillen, het
   productoverzicht en de productpagina; .btn, .form, .table, .panel en
   .flash blijven voor de pagina's die het niet raakt (account, checkout).
   ===================================================================== */

/* --- Tokens ---------------------------------------------------------- */
:root {
    /* kleur */
    --bg: #f6f9fc;
    /* De donkere kop, hero en voet (opdracht #107): een printbed in het donker. */
    --night: #061b31;
    --night-soft: #0c2542;
    --on-night: #fff;
    --on-night-muted: #c9d6e6;
    --on-night-accent: #b9afff;
    --night-line: rgba(255, 255, 255, .22);
    --surface: #fff;
    --surface-soft: #eef4fb;
    --text: #061b31;
    --muted: #5b6b82;
    --label: #273951;
    --border: #e5edf5;
    --border-strong: #d3e0ee;
    --purple: #533afd;
    --purple-hover: #4434d4;
    --purple-soft: rgba(83, 58, 253, .08);
    --green: #15be53;
    --green-text: #0d7a35;
    --dark: #1c1e54;
    --ruby: #ea2261;
    /* Voor tekst: #ea2261 haalt op wit 4,29:1 en zakt door AA heen, deze 4,7:1. */
    --ruby-text: #d5164f;
    /* Een gekozen filter of schakelaar (opdracht #131): de tekst haalt op de tint 8:1. */
    --purple-tint: #efedff;
    --purple-deep: #3a26c9;
    /* Nabestelling: amber als tekst, 7:1 op wit. */
    --amber-text: #7a4f00;
    --magenta: #f96bee;

    /* ruimte */
    --s-1: .375rem;
    --s-2: .625rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2.25rem;
    --s-6: 3.25rem;
    --gutter: clamp(1rem, 4vw, 3.5rem);
    --measure: 1280px;
    --section-gap: clamp(2rem, 5vw, 3.75rem);

    /* vorm */
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 18px;
    /* Het nieuwe ontwerp (opdracht #131): kaarten en vlakken ronder dan panelen. */
    --r-card: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* diepte */
    --shadow: rgba(50, 50, 93, .25) 0 30px 45px -30px, rgba(0, 0, 0, .1) 0 18px 36px -18px;
    --soft-shadow: rgba(23, 23, 23, .07) 0 12px 28px;
    --ring: 0 0 0 3px rgba(83, 58, 253, .22);
    /* Zachte schaduwen van het nieuwe ontwerp (opdracht #131): een kaart, een kaart onder de muis, een venster. */
    --shadow-card: 0 1px 2px rgba(6, 27, 49, .05), 0 6px 18px rgba(6, 27, 49, .05);
    --shadow-card-hover: 0 2px 4px rgba(6, 27, 49, .06), 0 18px 40px rgba(6, 27, 49, .10);
    --shadow-pop: 0 2px 6px rgba(6, 27, 49, .08), 0 16px 36px rgba(6, 27, 49, .16);

    /* typografie — vloeiend, dus geen sprongen op breekpunten */
    --step--1: clamp(.82rem, .79rem + .12vw, .89rem);
    --step-0: clamp(1rem, .97rem + .14vw, 1.06rem);
    --step-1: clamp(1.1rem, 1.04rem + .3vw, 1.28rem);
    --step-2: clamp(1.3rem, 1.18rem + .6vw, 1.65rem);
    --step-3: clamp(1.55rem, 1.32rem + 1.1vw, 2.25rem);
    --step-4: clamp(1.85rem, 1.45rem + 2vw, 3rem);
    --step-5: clamp(2.15rem, 1.5rem + 3.2vw, 3.9rem);

    /* De hoogte van de kop: één regel, ook op een telefoon (de navigatie klapt daar in onder Menu). De kop plakt niet
       (opdracht #131), dus een anker of een plakkend blok houdt alleen --sticky-gap vrij. */
    --header-h: 64px;
    --sticky-gap: var(--s-3);
}

/* --- Basis ----------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100svh;
    font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--step-0);
    font-weight: 300;
    font-feature-settings: 'ss01';
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-tap-highlight-color: rgba(83, 58, 253, .15);
}

img,
svg,
canvas { max-width: 100%; }

/* Componentregels als .stl-preview{display:grid} winnen van het UA-stylesheet;
   zonder dit blijft een element met [hidden] gewoon zichtbaar. */
[hidden] { display: none !important; }

img { height: auto; }

a {
    color: inherit;
    text-decoration: none;
}

/* Een link in lopende tekst was tot nu toe niet van gewone tekst te
   onderscheiden: color:inherit zonder onderstreping laat niets zien. Knoppen,
   chips en navigatie dragen een eigen klasse en blijven zoals ze waren. */
:where(p, li, dd, summary) > a:not([class]) {
    color: var(--purple);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
:where(p, li, dd, summary) > a:not([class]):hover { color: var(--purple-hover); text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
    margin: 0 0 var(--s-3);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

h1 { font-size: var(--step-4); letter-spacing: -.035em; }
h2 { font-size: var(--step-3); letter-spacing: -.03em; }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

/* Een anker komt niet tegen de rand van het scherm aan. */
:target { scroll-margin-top: var(--sticky-gap); }

/* --- Layoutprimitieven ------------------------------------------------ */
.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Eén verticaal ritme: elke sectie zet ruimte onder zich, alleen de eerste
   ook erboven. Zo stapelen paddings van opeenvolgende secties niet op. */
main > section { padding-block: var(--section-gap); }
main > section ~ section { padding-block-start: 0; }

.eyebrow {
    margin: 0 0 var(--s-2);
    color: var(--purple);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lead {
    max-width: 62ch;
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--muted);
}

.muted { color: var(--muted); }
.legalese { font-size: var(--step--1); }
.numeric { text-align: right; font-feature-settings: 'tnum'; }

/* --- Toegankelijkheid -------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 60;
    padding: 12px 18px;
    background: var(--purple);
    color: #fff;
    border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary, label.checkbox):focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover,
    .product-card:hover,
    .tile-grid > li:hover > * { transform: none; }
}

/* --- Koptekst en navigatie -------------------------------------------- */
/* Donker op elke winkelpagina (opdracht #107), in de vorm van het nieuwe ontwerp (opdracht #131): de navigatie als
   pillen, met het deel van de winkel van de pagina gemarkeerd, en de mand als witte knop met teller. Vanaf 1024 px staan
   de pillen open; smaller klappen ze in onder de menuknop, met een <details>: geen JavaScript, en wat ingeklapt is, kan
   nog steeds open. De kop plakt niet: op het overzicht plakt de filterbalk en op de productpagina de koopkaart, en
   twee plakkende balken boven elkaar laten op een telefoon te weinig over. */
.top {
    position: relative;
    z-index: 20;
    background: var(--night);
    color: var(--on-night);
}

.top-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    max-width: var(--measure);
    min-height: var(--header-h);
    margin-inline: auto;
    padding: 10px var(--gutter);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-inline: auto;
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--on-night);
    white-space: nowrap;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--purple);
    color: #fff;
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
    font-size: .8rem;
}

.top :where(a, summary):focus-visible { outline-color: var(--on-night-accent); }

.nav { display: flex; gap: 4px; }
.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    color: var(--on-night-muted);
    font-weight: 500;
    white-space: nowrap;
}
.nav a:hover { background: rgba(255, 255, 255, .08); color: var(--on-night); }
.nav a[aria-current] { background: rgba(255, 255, 255, .12); color: var(--on-night); font-weight: 600; }

.nav--wide { display: none; }

/* De menuknop: een rond vlak met drie streepjes; open of dicht zegt de <details> zelf aan een schermlezer, en de naam
   staat verborgen in de knop. */
.nav-menu > summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--on-night);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::before {
    content: '';
    width: 18px;
    height: 12px;
    background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) bottom left / 62% 2px no-repeat;
}
.nav-menu > summary:hover,
.nav-menu[open] > summary { background: rgba(255, 255, 255, .2); }
.nav-menu > .nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100svh - var(--header-h));
    padding: var(--s-2) var(--gutter) var(--s-3);
    border-top: 1px solid var(--night-line);
    background: var(--night);
    box-shadow: 0 16px 24px rgba(6, 27, 49, .35);
    overflow-y: auto;
}
/* De categorieën onder Producten, alleen in het ingeklapte menu. */
.nav-sub {
    display: grid;
    margin: 0 0 4px;
    padding: 0 0 0 var(--s-3);
    list-style: none;
}
.nav-sub a { font-weight: 400; }

.nav-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--night);
    font-weight: 700;
    white-space: nowrap;
}
.nav-cart:hover { background: var(--surface-soft); }
.nav-cart[aria-current] { box-shadow: inset 0 0 0 2px var(--purple); }
.nav-cart .icon { width: 1.2em; height: 1.2em; }

.cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    margin-right: -8px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    background: var(--purple);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

/* Smalle telefoons: de mand is een rond vlak met het pictogram en de teller als stip erop, zodat menu, merk en mand op
   één regel passen. Het label blijft er voor schermlezers. */
@media (max-width: 479px) {
    .cart-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .nav-cart { position: relative; justify-content: center; width: 44px; padding: 0; border-radius: 50%; }
    .cart-count {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 20px;
        height: 20px;
        margin: 0;
        padding: 0 5px;
        font-size: .7rem;
    }
}

@media (min-width: 1024px) {
    .brand { margin-inline: 0; }
    .nav--wide { display: flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
    .nav-menu { display: none; }
    .nav-cart { margin-left: auto; }
}

/* --- Kruimelpad -------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--s-3);
    color: var(--muted);
    font-size: var(--step--1);
}
.breadcrumb a:hover { color: var(--purple); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--label); }

/* --- Knoppen ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid var(--purple);
    border-radius: var(--r-sm);
    background: var(--purple);
    color: #fff;
    font: inherit;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(83, 58, 253, .22);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--purple-hover); transform: translateY(-1px); }
.btn.ghost {
    background: #fff;
    color: var(--purple);
    border-color: #c3c3fb;
    box-shadow: none;
}
.btn.ghost:hover { background: var(--purple-soft); }
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-lg { min-height: 54px; width: 100%; font-size: var(--step-1); }

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.link-button:hover { color: var(--ruby-text); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

/* --- Pillen, chips, badges ---------------------------------------------- */
.stock-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: #fff;
    padding: 6px 12px;
    color: var(--label);
    font-size: var(--step--1);
    font-weight: 400;
}


.stock-pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-color: rgba(21, 190, 83, .35);
    background: rgba(21, 190, 83, .12);
    color: var(--green-text);
    font-size: .8rem;
}
.stock-pill.is-out {
    border-color: rgba(234, 34, 97, .28);
    background: rgba(234, 34, 97, .1);
    color: #b8174b;
}

/* Korting hoort zichtbaar te zijn in het overzicht, niet pas bij de prijs. */
.sale-badge,
.sale-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-pill);
    background: var(--ruby-text);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 600;
    font-feature-settings: 'tnum';
    letter-spacing: .01em;
}
.sale-badge {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 1;
    padding: 4px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.sale-tag {
    padding: 2px 9px;
    vertical-align: middle;
}

/* --- Panelen en kaarten -------------------------------------------------- */
.panel,
.card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--soft-shadow);
}
.elevated { box-shadow: var(--shadow); }

/* --- Sectiekoppen --------------------------------------------------------- */
/* Let op: de breedte begrenzen op de kinderen, niet op de sectie zelf — die is
   ook het .wrap-element en zou dan als smalle kolom gecentreerd worden. */
.section-intro > :where(h1, h2, p) { max-width: 62ch; }
.section-intro h2 { margin-bottom: var(--s-2); }

/* --- Productraster --------------------------------------------------------- */
.product-grid {
    display: grid;
    /* Telefoons: twee naast elkaar, zodat je meer aanbod ziet zonder te scrollen. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    align-items: stretch;
}

@media (min-width: 560px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
        gap: var(--s-4);
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.product-card > a { display: block; position: relative; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #edf4ff, #fff 42%, #f6e9ff);
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art.has-image { background: none; }
.art-placeholder {
    font-family: 'Source Code Pro', monospace;
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 4.2rem);
    letter-spacing: -.08em;
    color: rgba(83, 58, 253, .13);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--s-2) var(--s-2) var(--s-3);
}

/* Twee kaarten naast elkaar: tekst op een vaste hoogte houdt prijs en knop op één lijn. */
@media (max-width: 559px) {
    .card-body .muted { min-height: 3em; }
}

@media (min-width: 560px) {
    .card-body { padding: var(--s-3); gap: 6px; }
}
.card-body .muted {
    font-size: var(--step--1);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.variant-hint {
    margin: 0;
    color: var(--purple);
    font-size: var(--step--1);
    font-weight: 500;
}

.product-card h3 {
    margin: 2px 0 0;
    font-size: var(--step-1);
    font-weight: 400;
}

.price {
    margin: 4px 0 0;
    font-size: var(--step-2);
    font-weight: 600;
    font-feature-settings: 'tnum';
    color: var(--text);
}
.old {
    margin-left: 6px;
    color: var(--muted);
    font-size: var(--step-0);
    font-weight: 300;
    text-decoration: line-through;
}
.price-note { font-size: var(--step--1); font-weight: 300; }

.card-actions { margin-top: auto; padding: 0 var(--s-2) var(--s-2); }
.card-actions .btn {
    padding-inline: 10px;
    font-size: var(--step--1);
    white-space: nowrap;
}
@media (min-width: 560px) {
    .card-actions { padding: 0 var(--s-3) var(--s-3); }
    .card-actions .btn { padding-inline: 20px; font-size: inherit; }
}
.card-actions form,
.card-actions .btn { width: 100%; }

/* --- Pillen (opdracht #131) ------------------------------------------------- */
/* De knop en de link van het nieuwe ontwerp: helemaal rond, zonder rand, 44 px hoog. .btn blijft voor de pagina's die
   het nieuwe ontwerp niet raakt (account, checkout). */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.pill:hover { background: var(--surface-soft); }
.pill[aria-current] { background: var(--night); color: #fff; }
.pill--soft { background: var(--surface-soft); }
.pill--soft:hover { background: var(--border); }
.pill--primary { background: var(--purple); color: #fff; font-weight: 700; }
.pill--primary:hover { background: var(--purple-hover); }
.pill--primary:disabled { background: #6c7889; cursor: not-allowed; }
.pill--light { background: #fff; color: var(--night); font-weight: 700; }
.pill--lg { min-height: 52px; padding: 0 26px; font-size: 1.06rem; }
.pill .icon { width: 18px; height: 18px; }

/* --- Productoverzicht (opdracht #131) ----------------------------------------- */
/* De kop met het zoekveld, de categorieën als pillen, de plakkende filterbalk en de tegels: twee kolommen tot 900 px,
   drie tot 1280 px, daarboven vier. */
.list-page { padding-bottom: var(--s-4); }
.list-page .breadcrumb { margin-bottom: var(--s-3); }
.list-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    margin-bottom: var(--s-4);
}
.list-intro__text { max-width: 620px; min-width: 0; }
.list-intro h1 {
    margin: 0 0 10px;
    font-size: clamp(2.5rem, 1.75rem + 2.4vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}
.list-intro .lead { margin: 0; }

.list-search { position: relative; flex: 1 1 100%; min-width: 0; margin: 0; }
.list-search input {
    width: 100%;
    height: 52px;
    padding: 0 116px 0 50px;
    border: 0;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-card);
    font: inherit;
    /* 16px of groter: kleiner laat iOS Safari inzoomen bij focus. */
    font-size: max(16px, var(--step-0));
}
.list-search input::-webkit-search-cancel-button { cursor: pointer; }
.list-search__icon {
    position: absolute;
    top: 16px;
    left: 19px;
    width: 20px;
    height: 20px;
    color: var(--muted);
    pointer-events: none;
}
.list-search .pill { position: absolute; top: 4px; right: 4px; }
@media (min-width: 900px) {
    .list-search { flex: 0 1 440px; }
}

.category-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.filter-bar {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 12px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px);
}
.filter-bar__choices,
.filter-bar__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.filter-bar__rule { width: 1px; height: 24px; margin: 0 4px; background: var(--border-strong); }
.filter-bar .list-count {
    margin: 0 4px 0 0;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: 0;
}
.filter-sort { padding: 0 14px; }
.filter-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--purple);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Eén pil per soort kenmerk; het paneel hangt onder de balk (die plakt, en is dus het ankerpunt). */
.filter-pill > summary { list-style: none; }
.filter-pill > summary::-webkit-details-marker { display: none; }
.filter-pill[data-chosen] > summary { background: var(--purple-tint); color: var(--purple-deep); }
.filter-pill__chevron { width: 14px; height: 14px; transition: rotate .18s ease; }
.filter-pill[open] .filter-pill__chevron { rotate: 180deg; }
.filter-pill__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--purple);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}
.filter-pill__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    z-index: 6;
    display: grid;
    gap: 2px;
    width: min(360px, calc(100% - 24px));
    max-height: 60vh;
    max-height: 60svh;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    border: 0;
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-pop);
}
.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: var(--r);
    color: var(--text);
    cursor: pointer;
}
.filter-option:hover { background: var(--surface-soft); }
.filter-option input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--purple); }

/* Op voorraad en Op naam: een selectievakje in de vorm van een pil. Het vakje zelf is onzichtbaar maar ligt over de
   hele pil, dus het toetsenbord en een schermlezer werken ermee zoals altijd. */
.filter-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    background: var(--surface-soft);
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.filter-toggle:hover { background: var(--border); }
.filter-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filter-toggle__check { display: none; width: 14px; height: 14px; }
.filter-toggle:has(input:checked) { background: var(--purple-tint); color: var(--purple-deep); font-weight: 700; }
.filter-toggle:has(input:checked) .filter-toggle__check { display: block; }
.filter-toggle:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }

/* Smaller dan 900 px plakt de balk niet (hij is daar twee regels hoog en zou te veel van het scherm afdekken): de keuzes
   zijn één rij die zijwaarts schuift, met het aantal en de volgorde eronder. Het paneel van een pil hangt aan de balk,
   niet aan de schuivende rij, en wordt dus niet afgesneden. */
@media (max-width: 899px) {
    .filter-bar {
        position: relative;
        top: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
    }
    .filter-bar__choices {
        flex-wrap: nowrap;
        width: calc(100% + 2 * var(--gutter));
        margin-inline: calc(-1 * var(--gutter));
        padding: 6px var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .filter-bar__choices::-webkit-scrollbar { display: none; }
    .filter-bar__choices > * { flex: 0 0 auto; }
    .filter-bar .pill--soft,
    .filter-toggle { background: #fff; }
    .filter-bar__end { width: 100%; }
    .filter-bar__end .list-count { margin-right: auto; }
    .filter-pill__panel { left: 0; width: 100%; }
}

.list-empty { margin: var(--s-4) 0; color: var(--label); }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 900px) {
    .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (min-width: 1280px) {
    .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* De "+" ligt in dezelfde cel als de tegel, over de foto (catalog/products.html): een vlak zo groot als de foto (de
   binnenruimte van de tegel eraf, dezelfde verhouding), met de knop rechtsonder. Alleen de knop vangt klikken. */
.tile-grid > li { display: grid; min-width: 0; }
.tile-grid > li > * { grid-area: 1 / 1; }
.tile-quick {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    align-self: start;
    aspect-ratio: 4 / 5;
    margin: 6px;
    padding: 0 6px 6px 0;
    pointer-events: none;
    transition: transform .2s ease;
}
.tile-quick__button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--purple);
    color: #fff;
    box-shadow: 0 6px 16px rgba(83, 58, 253, .35);
    cursor: pointer;
    pointer-events: auto;
}
.tile-quick__button:hover { background: var(--purple-hover); }
.tile-quick__button svg { width: 20px; height: 20px; }
/* Onder de muis gaan tegel en "+" samen omhoog. */
.tile-grid > li:hover > .tile,
.tile-grid > li:hover > .tile-quick { transform: translateY(-3px); }

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-card);
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover { box-shadow: var(--shadow-card-hover); }
.tile:has(.tile__name a:focus-visible) { outline: 3px solid var(--purple); outline-offset: 3px; }
.tile__media { position: relative; padding: 6px 6px 0; }
.tile__photo .art { aspect-ratio: 4 / 5; border-radius: 15px; }
.tile__labels {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    pointer-events: none;
}
.tile-label {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--label);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
}
.tile-label .availability--backorder { color: var(--amber-text); }
.tile-label .availability--sold_out { color: var(--ruby-text); }
.tile-label--personal { background: var(--night); color: #fff; }
/* De korting: dezelfde sticker als op de kaart (.sale-badge), hier in de rij labels. */
.tile__labels .sale-badge { position: static; padding: 3px 9px; box-shadow: none; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.tile .favorite-form { top: 10px; right: 10px; }
.tile__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; padding: 10px 12px 14px; }
.tile__head { display: flex; flex-direction: column; gap: 2px; }
.tile__name { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.tile__name a { color: var(--text); }
/* De naam is de link van de hele tegel; het hartje en de "+" liggen erboven. */
.tile__name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tile__name a:focus-visible { outline: none; }
.tile__head .price { margin: 0; font-size: 1rem; font-weight: 700; }
.tile__head .old { margin-left: 4px; font-size: .85rem; }
.tile__line {
    display: none;
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}
.tile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: auto 0 0;
    padding-top: 6px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.3;
}
.tile__dots { display: inline-flex; gap: 4px; }
.tile__dots .swatch-dot { width: 14px; height: 14px; }
.tile__variants { margin-left: 4px; }
@media (min-width: 600px) {
    .tile__media { padding: 10px 10px 0; }
    .tile__photo .art { border-radius: 16px; }
    .tile__labels { top: 20px; left: 20px; right: 64px; }
    .tile-label,
    .tile__labels .sale-badge { padding: 4px 10px; font-size: .75rem; }
    .tile .favorite-form { top: 18px; right: 18px; }
    .tile-quick { margin: 10px; padding: 0 10px 10px 0; }
    .tile-quick__button { width: 48px; height: 48px; }
    .tile__body { gap: 6px; padding: 14px 18px 18px; }
    .tile__head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
    .tile__name,
    .tile__head .price { font-size: 1.06rem; }
    .tile__head .price { white-space: nowrap; }
    .tile__line {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    .tile__dots { gap: 5px; }
    .tile__dots .swatch-dot { width: 16px; height: 16px; }
    .tile__meta { font-size: .82rem; }
}

/* "Niet gevonden? Stel het zelf samen." onder het overzicht, alleen met een samenstelbaar product. */
.configure-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem) clamp(1.25rem, .5rem + 3vw, 3rem);
    border-radius: var(--r-xl);
    background: var(--night);
    color: var(--on-night);
}
.configure-cta__text { max-width: 560px; }
.configure-cta h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
.configure-cta p { margin: 0; color: var(--on-night-muted); font-size: var(--step-1); }
.configure-cta :where(a):focus-visible { outline-color: var(--on-night-accent); }

/* --- Koopformulier, voordelen en specificaties (ook account, checkout, mand) --------- */
.buy-form { margin-top: var(--s-4); gap: var(--s-2); }
.buy-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.buy-row input { width: 96px; flex: 0 0 96px; }
.buy-row .btn { flex: 1 1 200px; }

.usp-list,
.summary-items {
    display: grid;
    gap: 9px;
    margin: var(--s-4) 0 0;
    padding: 0;
    list-style: none;
}
.usp-list li {
    position: relative;
    padding-left: 26px;
    color: var(--label);
    font-size: var(--step--1);
    line-height: 1.5;
}
.usp-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .35em;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(-45deg);
}
.usp-list a { color: var(--purple); text-decoration: underline; }

.spec-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px var(--s-4);
    margin: var(--s-4) 0 0;
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: var(--step--1);
}
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; color: var(--label); }

/* --- De regel over de beschikbaarheid (opdracht #131) ---------------------------------- */
/* Een stip in de kleur van de stand en de tekst (partials.html, "stock-status"). Een nieuwe stand krijgt hier een kleur. */
.stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: #e5f6ea;
    color: var(--green-text);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
}
.stock__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
.stock--backorder,
.stock--made_to_order { background: #fdf1dc; color: var(--amber-text); }
.stock--sold_out,
.stock--missing { background: #fde7ee; color: #b3133f; }
/* Op een tegel: een label op de foto. */
.tile__labels .stock { padding: 3px 9px; background: rgba(255, 255, 255, .94); font-size: .72rem; }
.tile__labels .stock__dot { width: 6px; height: 6px; flex-basis: 6px; }

/* --- Productpagina (opdracht #131) ------------------------------------------------------ */
/* Vanaf 900 px twee kolommen: de galerij met de miniaturen ernaast, en de koopkaart die meeplakt. Smaller onder elkaar,
   de miniaturen onder de foto en een zwevende koopbalk. */
.product-page .breadcrumb { margin-bottom: var(--s-4); }
.product-detail-grid { display: grid; gap: var(--s-4); align-items: start; }
.product-detail-grid > * { min-width: 0; }
.product-media { position: relative; }
.product-media__label { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 12px; font-size: .8rem; }
.product-media .gallery-stage > .art { aspect-ratio: 1 / 1; border-radius: var(--r-xl); }

.gallery { display: grid; gap: 12px; }
.gallery-main {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, #edf4ff, #fff 42%, #f6e9ff);
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.gallery-main::-webkit-scrollbar { display: none; }
.gallery-main img {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    scroll-snap-align: center;
    display: block;
}
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-thumbs a {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px var(--border-strong);
}
.gallery-thumbs a:hover,
.gallery-thumbs a[aria-current] { box-shadow: 0 0 0 2px var(--purple); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Eén kolom die nooit breder wordt dan het scherm, ook niet door een lange knoptekst. */
.product-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.product-head .eyebrow {
    margin-bottom: 8px;
    font-family: 'Source Code Pro', monospace;
    font-weight: 600;
    letter-spacing: .08em;
}
.product-head h1 {
    margin: 0 0 8px;
    font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
}
.product-head .lead { margin: 0; font-size: var(--step-1); }
.product-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.product-price .price { margin: 0; font-size: clamp(1.75rem, 1.5rem + .8vw, 2rem); font-weight: 700; letter-spacing: -.01em; }
.product-price .price-note { font-size: .95rem; font-weight: 400; }

.buy-card {
    display: grid;
    gap: 22px;
    padding: 18px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(6, 27, 49, .05), 0 10px 30px rgba(6, 27, 49, .06);
}
.buy-card .buy-form { margin: 0; gap: 22px; }

/* De keuze van de uitvoering: links (catalog/choices.go); het script maakt er knoppen met aria-pressed van. */
.choice { display: grid; gap: 10px; min-width: 0; }
.choice__legend { margin: 0; color: var(--text); font-size: .95rem; font-weight: 700; }
.choice__chosen { color: var(--muted); font-weight: 400; }
.choice__values { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px var(--border-strong);
}
.choice-dot__swatch { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(6, 27, 49, .15); }
.choice-dot:hover { box-shadow: 0 0 0 1px var(--purple); }
.choice-dot:is([aria-current], [aria-pressed="true"]) { box-shadow: 0 0 0 2px var(--purple); }
/* Past alles op één regel, dan is het één balk; anders vallen de segmenten over meerdere regels (flex-wrap), elk op zijn
   eigen inhoudsbreedte, zonder afgekapte of overlappende tekst. De hoek blijft een halve segmenthoogte + opvulling. */
.choice--segmented { --segment-height: 44px; --segment-pad: 4px; }
.choice--segmented .choice__values { flex-wrap: wrap; gap: 4px; padding: var(--segment-pad); border-radius: calc(var(--segment-height) / 2 + var(--segment-pad)); background: var(--surface-soft); }
.choice-segment {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: var(--segment-height);
    padding: 0 12px;
    border-radius: var(--r-pill);
    color: var(--text);
    font-weight: 700;
    text-align: center;
}
.choice-segment__label { overflow-wrap: anywhere; }
.choice-segment:hover { background: rgba(255, 255, 255, .6); }
.choice-segment:is([aria-current], [aria-pressed="true"]) { background: #fff; box-shadow: 0 1px 3px rgba(6, 27, 49, .15); }
/* Uitverkocht: doorgestreept; niet in deze combinatie: gedimd (de stip met een schuine streep). Beide blijven te kiezen. */
.choice-segment.is-sold-out { color: #6c7889; text-decoration: line-through; }
.choice-segment.is-missing { color: #6c7889; font-weight: 600; }
.choice-dot.is-sold-out .choice-dot__swatch,
.choice-dot.is-missing .choice-dot__swatch { opacity: .45; }
.choice-dot.is-sold-out::after,
.choice-dot.is-missing::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 46px;
    border-radius: 1px;
    background: #6c7889;
    transform: rotate(45deg);
}

/* De personalisatie (opdracht #130) in de koopkaart: de kleur van de tekst als stippen, met de naam voor een
   schermlezer. */
.buy-card .personalization { gap: 12px; padding-top: 20px; }
.buy-card .personalization__field label { color: var(--text); font-weight: 700; }
.buy-card .personalization__field input {
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: var(--bg);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    font-size: 1.15rem;
    font-weight: 600;
}
.buy-card .personalization__field input:focus { box-shadow: inset 0 0 0 2px var(--purple); }
.buy-card .personalization__colors legend { color: var(--text); font-size: .95rem; font-weight: 700; }
.buy-card .personalization__swatches { gap: 8px; }
.form.buy-form .personalization__color {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px var(--border-strong);
}
.form.buy-form .personalization__color:has(input:checked) { box-shadow: 0 0 0 2px var(--purple); color: inherit; }
.form.buy-form .personalization__color:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
.form.buy-form .personalization__color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.form.buy-form .personalization__color .swatch-dot { width: 100%; height: 100%; margin: 0; }
.form.buy-form .personalization__color span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.buy-card .personalization__notice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--label);
    font-size: .875rem;
}

/* Een grid-item groeit standaard mee met zijn inhoud: zonder dit maakt de scroll-strook van de foto's de kolom breder. */
.gallery-stage { min-width: 0; }

/* De ingevulde tekst onder het tekstveld (personalisatie-voorbeeld.js): alleen met script, verborgen voor een schermlezer. */
.name-readout { display: grid; gap: 4px; margin: 0; }
.name-readout[hidden] { display: none; }
.name-readout__line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.name-readout__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(6, 27, 49, .25); }
.name-readout__text.is-placeholder { color: var(--muted); font-weight: 400; }
.name-readout__caption { color: var(--label); font-size: .8rem; }
.personalization__count { justify-self: end; margin-top: -1.9em; color: var(--muted); font-size: .82rem; font-weight: 600; }
.personalization__count.is-over { color: #b3133f; }
.personalization__chosen { color: var(--muted); font-weight: 400; }

/* Het aantal als pil met − en +, en de knop met de prijs. */
.buy-card .buy-row { flex-wrap: nowrap; gap: 10px; }
.quantity-pill {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 56px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--surface-soft);
}
.buy-card .quantity-pill input {
    width: 3.5em;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.quantity-pill:has(.quantity-pill__step:not([hidden])) input { width: 2.2em; }
/* De focus van het getalveld: de ring van .form staat hierboven uit, dus hier een eigen ring. */
.buy-card .quantity-pill input:focus { box-shadow: 0 0 0 2px var(--purple); border-radius: var(--r-sm); }
.quantity-pill input::-webkit-inner-spin-button,
.quantity-pill:has(.quantity-pill__step:not([hidden])) input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-pill__step {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.quantity-pill__step:hover { background: rgba(255, 255, 255, .7); }
.buy-row__submit { flex: 1 1 auto; min-width: 0; min-height: 56px; white-space: normal; box-shadow: 0 10px 24px rgba(83, 58, 253, .35); }
.buy-row__submit:disabled { box-shadow: none; }

.favorite-detail { margin: 0; }
.favorite-detail .pill[aria-pressed="true"] { color: var(--ruby-text); }

/* Drie tegels onder de koopkaart: verzending, betalen, werkplaats. */
.usp-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.usp-tiles li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--label);
    font-size: .82rem;
    line-height: 1.4;
}
.usp-tiles strong { color: var(--text); font-weight: 700; }
.usp-tiles a { color: var(--purple); text-decoration: underline; }
.usp-tiles__icon { width: 22px; height: 22px; color: var(--purple); }

/* Omschrijving, specificaties en levering: kaarten met een <details>; smal een harmonica. */
.product-details { display: grid; gap: 14px; margin-top: var(--s-5); }
.detail-card { padding: 4px 18px 18px; border-radius: 22px; background: #fff; }
.detail-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    cursor: pointer;
    list-style: none;
}
.detail-card > summary::-webkit-details-marker { display: none; }
.detail-card > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.detail-card[open] > summary::after { transform: rotate(-135deg); }
.detail-card h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.detail-card p { margin: 0; color: var(--label); font-size: 1.02rem; line-height: 1.65; white-space: pre-line; }
.detail-card .spec-list { grid-template-columns: minmax(110px, auto) 1fr; gap: 12px 16px; margin: 0; padding: 0; border: 0; font-size: 1rem; }
.detail-card .spec-list dd { color: var(--text); font-weight: 600; }
.detail-card .usp-list { margin: 0; }

@media (min-width: 600px) {
    .buy-card { padding: 22px; }
    .usp-tiles li { padding: 14px; font-size: .875rem; }
}

@media (min-width: 900px) {
    .product-detail-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); }
    .product-info { position: sticky; top: var(--sticky-gap); }
    /* De miniaturen links naast de foto. */
    .gallery { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
    .gallery-main { grid-column: 2; grid-row: 1; }
    .gallery-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; flex-wrap: nowrap; align-content: start; gap: 12px; }
    .gallery-thumbs a { width: 76px; height: 76px; }
    .product-media__label { top: 20px; left: 110px; }
    .product-media:not(:has(.gallery)) .product-media__label { left: 20px; }
    .product-details { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 24px; margin-top: 72px; }
    .detail-card { padding: 16px 32px 32px; border-radius: 24px; }
    .detail-card h2 { font-size: 1.6rem; }
    /* Breed is de harmonica een gewone kaart: de kop klapt niets in. */
    .detail-card > summary { pointer-events: none; }
    .detail-card > summary::after { display: none; }
}

@media (min-width: 1280px) {
    .product-detail-grid { gap: 56px; }
}

/* De zwevende koopbalk onder 900 px: de knop blijft bereikbaar tijdens het scrollen. */
.buy-bar {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 22px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-pop);
    backdrop-filter: blur(10px);
}
.buy-bar-info { display: grid; flex: 1 1 auto; min-width: 0; }
.buy-bar-info [data-choice-bar-summary] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: .8rem;
}
.buy-bar-info strong { font-size: 1.15rem; font-weight: 700; font-feature-settings: 'tnum'; }
.buy-bar-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.buy-bar .pill { flex: 0 0 auto; }

/* Ruimte onder de pagina zodat de balk niets afdekt. */
.buy-bar-spacer { height: 96px; }

@media (min-width: 900px) {
    .buy-bar,
    .buy-bar-spacer { display: none; }
}

/* --- Formulieren ------------------------------------------------------------------ */
.form { display: grid; gap: var(--s-3); }
.panel.form { padding: var(--s-4); }
.form label {
    display: grid;
    gap: 6px;
    color: var(--label);
    font-weight: 400;
}
.form input,
.form textarea,
.form select {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--text);
    /* 16px of groter: kleiner laat iOS Safari inzoomen bij focus. */
    font: inherit;
    font-size: max(16px, var(--step-0));
}
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus,
.form textarea:focus,
.form select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: var(--ring);
}
.form small { font-size: var(--step--1); font-weight: 300; }

.form-heading {
    margin: var(--s-2) 0 0;
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: -.01em;
}

/* Straat/huisnummer en postcode/plaats horen naast elkaar te passen, ook in een
   paneel met binnenruimte op een telefoon van 360 px. */
.field-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.field-grow { flex: 2 1 150px; min-width: 0; }
.field-small { flex: 1 1 105px; min-width: 0; }
@media (min-width: 560px) {
    .field-row { gap: var(--s-3); }
    .field-small { flex: 0 1 160px; }
}

.form label.checkbox,
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    cursor: pointer;
}
.checkbox input {
    width: 22px;
    height: 22px;
    min-height: 0;
    flex: 0 0 22px;
    margin-top: 2px;
    accent-color: var(--purple);
}
.checkbox a { color: var(--purple); text-decoration: underline; }


/* --- Tabellen ---------------------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.table th,
.table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.table th { color: var(--label); background: #f8fbff; font-weight: 500; }

/* --- Meldingen --------------------------------------------------------------------- */
.flash {
    padding: 13px 16px;
    border: 1px solid rgba(21, 190, 83, .3);
    border-radius: var(--r-sm);
    background: rgba(21, 190, 83, .12);
}
/* De statusmelding staat boven <main>; .flash-bar levert de gutter, .flash de doos. */
.flash-bar {
    max-width: var(--measure);
    margin-inline: auto;
    padding: var(--s-3) var(--gutter) 0;
}
.danger { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }
.flash ul { margin: 6px 0 0; padding-left: 20px; }
.flash.danger a { color: #fff; text-decoration: underline; }

.notice-draft {
    padding: 13px 16px;
    margin: 0 0 var(--s-4);
    border: 1px solid rgba(234, 34, 97, .3);
    border-radius: var(--r-sm);
    background: rgba(234, 34, 97, .08);
    color: #b8174b;
}

/* --- Winkelmandje en checkout -------------------------------------------------------- */
.cart-layout,
.checkout-layout {
    display: grid;
    gap: var(--s-4);
    align-items: start;
}

/* De mand: het overzicht naast de regels vanaf 900 px (opdracht #131). */
@media (min-width: 900px) {
    .cart-layout { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: var(--s-4); }
    .cart-layout > .cart-summary { position: sticky; top: var(--sticky-gap); }
}

@media (min-width: 960px) {
    .checkout-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .85fr); gap: var(--s-5); }
    .checkout-layout > .cart-summary { position: sticky; top: var(--sticky-gap); }
    /* Op de checkout staat het overzicht vooraan in de DOM, zodat je op een
       telefoon eerst ziet wat je betaalt. Hier zet de grid hem weer rechts. */
    .checkout-layout > .checkout-main { grid-column: 1; grid-row: 1; }
    .checkout-layout > .cart-summary { grid-column: 2; grid-row: 1; }
}

.checkout-trust { margin-top: var(--s-3); }

.cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    margin-top: var(--s-3);
}
/* Ingeklapt: wie geen code heeft, hoort er ook niet over na te denken. */
.panel.discount-form { margin-top: var(--s-4); padding: var(--s-2) var(--s-3); }
.discount-form summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--label);
    cursor: pointer;
    list-style: none;
}
.discount-form summary::-webkit-details-marker { display: none; }
.discount-form summary::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .18s ease;
}
.discount-form[open] summary::before { transform: rotate(45deg); }
.discount-form summary:hover { color: var(--purple); }
.discount-form summary:hover::before { border-color: var(--purple); }
.discount-form .form { padding-bottom: var(--s-2); }
.discount-form .buy-row input { width: auto; flex: 1 1 120px; }
.discount-form .buy-row .btn { flex: 0 0 auto; }

.cart-summary { padding: var(--s-4); }
.cart-summary h2 { font-size: var(--step-2); margin-bottom: var(--s-3); }
.cart-summary p {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    margin: 8px 0;
    color: var(--label);
}
.cart-summary .free-shipping-hint,
.cart-summary .legalese { display: block; text-align: left; }
.free-shipping-hint {
    padding: 9px 12px 11px;
    border-radius: var(--r-sm);
    background: var(--purple-soft);
    color: var(--purple) !important;
    font-size: var(--step--1);
}
.free-shipping-hint strong { font-weight: 600; font-feature-settings: 'tnum'; }
.free-shipping-hint.is-reached {
    background: rgba(21, 190, 83, .12);
    color: var(--green-text) !important;
}

.cart-total {
    margin-top: var(--s-3) !important;
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: var(--step-2);
    font-weight: 600;
    color: var(--text);
}
.cart-checkout { width: 100%; margin-top: var(--s-3); }

.summary-items {
    margin: 0 0 var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
}
.summary-items li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    color: var(--label);
    font-size: var(--step--1);
}

/* --- Lege staat ----------------------------------------------------------------------- */
/* Een leeg mandje is geen mededeling maar een uitnodiging: het wijst door. */
.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--s-2);
    max-width: 46ch;
    margin-top: var(--s-4);
}
.empty-state .lead { margin: 0; color: var(--text); }
.empty-state .muted { margin: 0; }
.empty-state .actions { margin-top: var(--s-3); }
.empty-mark {
    width: 44px;
    height: 44px;
    margin-bottom: var(--s-1);
    color: var(--border-strong);
}

/* --- Bedankpagina ----------------------------------------------------------------------- */
.thanks { max-width: 820px; }
.order-recap { padding: var(--s-4); margin: var(--s-4) 0; }
.order-recap h2 { font-size: var(--step-2); }
.order-recap .table { margin-top: var(--s-3); }
.total-row td { font-weight: 600; border-top: 1px solid var(--border); }

/* --- Paginering ------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--label);
}
.page:hover { border-color: #c3c3fb; background: var(--purple-soft); color: var(--purple); }
.page.is-current { border-color: var(--purple); background: var(--purple); color: #fff; font-weight: 500; }
.page.is-disabled { opacity: .45; }
.page.is-gap { border: 0; background: none; min-width: 0; padding: 0 4px; }

/* --- Voettekst -------------------------------------------------------------------------- */
/* Licht, met een lijn erboven (opdracht #131; eerder donker, #107). Elke link staat er altijd: ook de herroepingsknop en
   de wettelijke garantie (art. 11a en 22a), de taalkeuze en de winkelgegevens. */
.footer {
    margin-top: var(--section-gap);
    border-top: 1px solid var(--border);
    color: var(--muted);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--s-4) var(--s-5);
    padding-block: var(--s-5);
}
.footer-shop strong { display: block; margin-bottom: var(--s-2); color: var(--text); font-size: var(--step-1); font-weight: 700; }
.footer-links { display: grid; gap: 0; align-content: start; }
.footer-links h2 {
    margin: 0 0 var(--s-1);
    color: var(--label);
    font-family: 'Source Code Pro', monospace;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.footer-links a,
.footer-links [aria-current] {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--label);
    font-weight: 400;
}
.footer-links a:hover { color: var(--purple); text-decoration: underline; }
.footer-language [aria-current] { color: var(--text); font-weight: 700; }

/* --- 3D-voorbeeld bij de offerte (STL-viewer) --------------------------------------------- */
.stl-preview {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: #fff;
}
.stl-preview canvas {
    /* De viewer zet zelf width/height op het canvas; alleen de breedte sturen. */
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
    background: linear-gradient(145deg, #10183f, #1c1e54 58%, #31258d);
    cursor: grab;
    touch-action: none;
}
.stl-preview canvas:active { cursor: grabbing; }
.stl-stats { display: grid; gap: 4px; color: var(--muted); font-size: var(--step--1); }
.stl-stats strong { font-size: var(--step-2); font-weight: 600; color: var(--text); }
.stl-stats small { color: var(--muted); }
.hint { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }

/* --- Pictogrammen ---------------------------------------------------------------------- */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* --- Klantaccount --------------------------------------------------------------------------- */
.auth-page { max-width: 520px; }
.auth-page .panel { padding: var(--s-4); margin-top: var(--s-4); }

/* De kopband verankert de pagina en draagt de navigatie. Het laagmotief is
   hetzelfde als in de hero: dit is dezelfde winkel, geen los beheerpaneel. */
.account-band {
    position: relative;
    overflow: hidden;
    padding-block: var(--s-5) 0;
    margin-bottom: var(--s-5);
    background: linear-gradient(180deg, rgba(83, 58, 253, .06), transparent 70%);
    border-bottom: 1px solid var(--border);
}
.account-band::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    /* Dezelfde laaglijnen als een geprint object, maar net zichtbaar. */
    background: repeating-linear-gradient(to bottom, rgba(83, 58, 253, .05) 0 1px, transparent 1px 7px);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 60%);
    mask-image: linear-gradient(to bottom, #000, transparent 60%);
    pointer-events: none;
}
.account-band > .wrap { position: relative; }
.account-band h1 { font-size: var(--step-4); margin-bottom: var(--s-2); }
.account-band .lead { margin-bottom: 0; }

/* Tabbalk in de band: leest als navigatie, niet als filters. */
.account-tabs-wrap { margin-top: var(--s-4); }
.account-tabs {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    overflow-x: auto;
    scrollbar-width: none;
}
.account-tabs::-webkit-scrollbar { display: none; }
.account-tabs a,
.account-tabs .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
}
.account-tabs a:hover { color: var(--purple); }
.account-tabs a.is-active { color: var(--text); font-weight: 500; border-bottom-color: var(--purple); }
.account-tabs form { margin-left: auto; }
.account-tabs .link-button { font-size: var(--step-0); }

/* Tellers: klikbaar, dus ze mogen ook zo voelen. */
.stat-row { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--s-5); }
.stat-row .stat {
    padding: var(--s-3) var(--s-4);
    display: grid;
    gap: 2px;
    transition: border-color .18s ease, transform .18s ease;
}
.stat-row a.stat:hover { border-color: #c3c3fb; transform: translateY(-1px); }
.stat-row .stat.is-waiting { border-color: #c3c3fb; background: var(--purple-soft); }
.stat-row .stat strong { font-size: var(--step-3); font-weight: 600; font-feature-settings: 'tnum'; line-height: 1.1; }
.stat-row .stat span { color: var(--muted); font-size: var(--step--1); }

.account-heading { font-size: var(--step-2); margin: 0 0 var(--s-3); }
.account-more { margin: var(--s-4) 0 var(--s-6); }

/* Bijzaak weegt minder: een hairline in plaats van nog een zwevend paneel. */
.account-cards {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}
.account-cards > div { border: 0; background: none; box-shadow: none; padding: 0; }
.account-cards h2 { font-size: var(--step-1); margin-bottom: var(--s-2); }

/* Koprègel boven een lijst: de teller links, filters of een uitweg rechts. Zo
   leest het als één mededeling in plaats van als een tweede navigatiebalk. */
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.list-count { margin: 0; color: var(--muted); font-size: var(--step--1); }
/* Alleen een losse verwijzing gaat naar rechts; filters blijven bij de teller
   staan, want die twee horen als één mededeling gelezen te worden. */
@media (min-width: 560px) { .list-head > a { margin-left: auto; } }

/* Een doorverwijzing hoort eruit te zien als iets waar je op kunt klikken. */
.link-arrow { color: var(--purple); font-weight: 500; }
.link-arrow span { display: inline-block; transition: transform .18s ease; }
.link-arrow:hover span { transform: translateX(3px); }

.account-back { margin: 0 0 var(--s-3); font-size: var(--step--1); }
.account-back a { color: var(--muted); text-decoration: none; }
.account-back a:hover { color: var(--purple); }

/* Wat je met een bestelling kunt doen hoort bij elkaar op één rij; los onder
   elkaar leek elke knop een aparte afdeling. */
.order-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.order-actions-note { margin-top: var(--s-2); }

@media (max-width: 559px) {
    /* Drie tellers naast elkaar: twee plus een losse eronder oogt als een fout. */
    .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
    .stat-row .stat { padding: var(--s-2) var(--s-3); }
    .stat-row .stat strong { font-size: var(--step-2); }
    .stat-row .stat span { font-size: .78rem; line-height: 1.25; }

    /* De tabbalk past niet op een telefoon; een randje verloop laat zien dat
       er nog iets naast staat in plaats van dat het woord afgekapt is. */
    .account-tabs-wrap { position: relative; }
    .account-tabs-wrap::after {
        content: '';
        position: absolute;
        inset: 0 0 1px auto;
        width: 32px;
        background: linear-gradient(90deg, transparent, var(--bg));
        pointer-events: none;
    }
}

/* --- Bestellingen in een lijst --------------------------------------------------------------- */
.order-list { display: grid; gap: var(--s-3); }
.order-row { padding: var(--s-3); display: grid; gap: var(--s-3); }
.order-row-main { display: flex; gap: var(--s-3); align-items: center; min-width: 0; }
.order-row-body { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.order-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.order-row-head strong { font-size: var(--step-1); font-weight: 600; }
.order-row-body .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* De lopende bestelling is waarvoor je kwam: die mag zwaarder wegen. */
.open-order { padding: var(--s-4); display: grid; gap: var(--s-4); box-shadow: var(--shadow); }
.open-order .order-row-main { flex-wrap: wrap; }
.open-order .order-row-actions { margin-left: auto; }
.open-order .order-row-head strong { font-size: var(--step-2); }
.open-order-status { padding-top: var(--s-4); border-top: 1px solid var(--border); }
.open-order .order-thumbs > * { width: 70px; height: 70px; flex-basis: 70px; }

.order-thumbs { display: flex; flex: 0 0 auto; align-items: center; }
.order-thumbs > * {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, #edf4ff, #fff 42%, #f6e9ff);
    object-fit: cover;
}
/* Overlappend, als een stapeltje: losse blokjes vragen te veel breedte. */
.order-thumbs > * + * { margin-left: -18px; }
.order-thumb-empty,
.order-thumb-more {
    display: grid;
    place-items: center;
    font-family: 'Source Code Pro', monospace;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
}
.order-thumb-more { background: var(--surface-soft); }

@media (min-width: 760px) {
    .order-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .order-row-actions { justify-content: flex-end; }
}

/* --- Bestelde artikelen ---------------------------------------------------------------------- */
.ordered-items { display: grid; gap: var(--s-2); }
.ordered-item { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); flex-wrap: wrap; }
.ordered-thumb { flex: 0 0 64px; }
.ordered-thumb img,
.ordered-thumb .order-thumb-empty {
    width: 64px;
    height: 64px;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    object-fit: cover;
    background: linear-gradient(135deg, #edf4ff, #fff 42%, #f6e9ff);
}
.ordered-thumb .order-thumb-empty { display: grid; }
.ordered-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; }
.ordered-body a { text-decoration: none; }
.ordered-body a:hover strong { color: var(--purple); }
.ordered-total { font-weight: 600; font-feature-settings: 'tnum'; white-space: nowrap; }

/* --- Tijdlijn -------------------------------------------------------------------------------- */
/* Een bestelling bouwt zich op in stappen, zoals een print in lagen. Het
   afgelegde deel krijgt daarom het huisstijlverloop en niet één vlakke kleur. */
.timeline {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.timeline li {
    position: relative;
    padding-left: 30px;
    color: var(--muted);
    line-height: 1.4;
}
.timeline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: #fff;
}
.timeline li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 19px;
    bottom: -10px;
    width: 2px;
    background: var(--border-strong);
}
.timeline li.is-done { color: var(--label); }
.timeline li.is-done::before { border-color: var(--purple); background: var(--purple); }
.timeline li.is-done::after { background: linear-gradient(180deg, var(--purple), var(--magenta)); }
.timeline li.is-current { color: var(--text); font-weight: 500; }
.timeline li.is-current::before { border-color: var(--purple); box-shadow: var(--ring); }
.timeline li span { display: block; }
.timeline li small { font-size: var(--step--1); }

@media (min-width: 700px) {
    .timeline { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-3); }
    .timeline li { padding: 26px 0 0; }
    .timeline li:not(:last-child)::after {
        left: 20px;
        right: -12px;
        top: 9px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
    .timeline li.is-done::after { background: linear-gradient(90deg, var(--purple), var(--magenta)); }
}

/* --- Statusbadges ------------------------------------------------------------------------- */
/* Dezelfde tonen als het CRM. Ze stonden alleen in admin.css, waardoor elke
   status in het klantaccount als platte tekst verscheen. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge.info { background: rgba(83, 58, 253, .1); color: var(--purple); }
.badge.success { background: rgba(21, 190, 83, .12); color: var(--green-text); }
.badge.warn { background: rgba(245, 158, 11, .14); color: #92600a; }
.badge.danger { background: rgba(234, 34, 97, .1); color: #b8174b; }
.badge.muted { background: rgba(100, 116, 141, .12); color: var(--muted); }

/* --- Favoriet ---------------------------------------------------------------------------- */
/* Buiten de productlink: anders klik je de link aan in plaats van de knop. */
.favorite-form { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2; margin: 0; }
.favorite-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--muted);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.favorite-button svg { width: 20px; height: 20px; }
.favorite-button:hover { color: var(--ruby-text); border-color: #f3b7c9; transform: scale(1.06); }
.favorite-button.is-on { color: var(--ruby-text); border-color: #f3b7c9; }
.product-card { position: relative; }

/* --- Mijn vragen ------------------------------------------------------------------------- */
.message-list { display: grid; gap: var(--s-3); }
.message-thread { padding: var(--s-4); display: grid; gap: var(--s-3); }
.message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.message-bubble { padding: var(--s-3); border-radius: var(--r); }
.message-bubble p:last-child { margin-bottom: 0; }
.message-who { font-size: var(--step--1); font-weight: 600; color: var(--label); margin-bottom: 4px; }
/* Jouw vraag links en licht, ons antwoord ingesprongen en gekleurd: zo zie je in
   één oogopslag wie wat zei. */
.message-bubble.is-mine { background: var(--surface-soft); }
.message-bubble.is-shop { background: var(--purple-soft); margin-left: var(--s-4); }