/* =====================================================================
   Hobbydeals — de onderdelen van de Go-winkel bovenop shop.css
   shop.css begon als de stylesheet van de Laravel-winkel en heeft sinds
   opdracht #131 het nieuwe ontwerp (kop, voet, overzicht, productpagina).
   Hier staat wat per opdracht bijkwam (account, samensteller, startpagina,
   winkelmand, paneel, personalisatie) en wat Laravel met een
   style-attribuut deed: de CSP van de Go-app (default-src 'self') staat
   geen inline stijl toe, dus dat zijn hier classes.
   ===================================================================== */

/* --- Lijsten die in Laravel losse elementen waren ---------------------- */
/* Een rij kaarten of pillen is hier een lijst (een schermlezer telt de
   items); de opmaak blijft die van shop.css. */
ul.product-grid,
.pagination ul,
.address-list,
.line-options {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Paginering --------------------------------------------------------- */
.pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination li[aria-hidden] {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--muted);
}
/* De pijlen van Laravel; de tekst na de schuine streep is wat een
   schermlezer voorleest: niets. */
.page[rel=prev]::before { content: "← " / ""; white-space: pre; }
.page[rel=next]::after { content: " →" / ""; white-space: pre; }
.pagination-wrap { margin-top: var(--s-4); }

/* --- Pagina's die in Laravel een style-attribuut hadden ------------------ */
/* Juridische en informatiepagina's: één smalle kolom. */
.prose { max-width: 820px; }
.prose h2 { margin-top: var(--s-5); font-size: var(--step-2); }
/* Fout- en onderhoudspagina's: gecentreerd. */
main > .status-page {
    max-width: 640px;
    padding-block: 80px;
    text-align: center;
}
.status-page .lead { margin-inline: auto; }
.status-page .actions { justify-content: center; }
/* Een formulier met alleen een knop, midden in een zin. */
.inline-form { display: inline; }

/* --- Formulieren ---------------------------------------------------------- */
/* Groepen velden: in Laravel een kop, hier een fieldset met een legend. */
.form fieldset {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.form legend { padding: 0; margin-bottom: var(--s-3); }
.field-error {
    margin: -6px 0 0;
    color: var(--ruby-text);
    font-size: var(--step--1);
    font-weight: 400;
}
.form [aria-invalid=true] { border-color: var(--ruby-text); }

/* --- Kleurstaal ------------------------------------------------------------- */
/* In Laravel een span met de kleur als style-attribuut; hier een SVG met
   fill, met hetzelfde randje binnenin. */
svg.swatch-dot {
    flex: 0 0 18px;
    margin-right: 6px;
    vertical-align: -3px;
    background: none;
}

/* --- Winkelmand --------------------------------------------------------------- */
.cart-line-name { margin: 0; font-size: var(--step-1); font-weight: 400; }
.line-options { color: var(--label); font-size: var(--step--1); }
.discount-form > p,
.discount-form > form:not(.form) { margin: 0 0 var(--s-2); }

/* --- Checkout ---------------------------------------------------------------- */
.checkout-main { display: grid; gap: var(--s-4); min-width: 0; }

/* De kennisgeving over de wettelijke garantie (guarantee.go): ongewijzigd en
   op volle breedte van het paneel. */
.guarantee-notice { margin: 0; }
.guarantee-notice img {
    display: block;
    width: 100%;
    max-width: 720px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.guarantee-notice figcaption { margin-top: var(--s-2); }
.guarantee-notice a { color: var(--purple); text-decoration: underline; overflow-wrap: anywhere; }

/* --- Klantaccount --------------------------------------------------------------- */
.address-list {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.address-card { display: grid; gap: var(--s-2); padding: var(--s-4); align-content: start; }
.address-card address { font-style: normal; color: var(--label); }
.address-card p { margin: 0; }
.panel.order-panel { padding: var(--s-4); }
.panel.order-panel + .panel.order-panel { margin-top: var(--s-3); }
.order-items-heading { margin-top: var(--s-5); }
.cart-summary address { font-style: normal; }
.cart-summary .summary-block { display: block; margin-top: var(--s-4); }


/* --- Prijs van een kostprijsklant (opdracht #90) ------------------------------ */
/* Een klein label naast de prijs: "Jouw prijs (kostprijs)". Alleen een ingelogde
   kostprijsklant ziet het; de rest van de winkel ziet de gewone prijs. */
.price-own {
    display: inline-block;
    margin-left: 6px;
    border: 1px solid rgba(124, 58, 237, .35);
    border-radius: var(--r-pill);
    padding: 1px 8px;
    color: var(--purple);
    font-size: var(--step--1);
    font-weight: 400;
    vertical-align: middle;
    white-space: nowrap;
}
/* Onder de regel in de mand: alleen zo breed als de tekst, ook in een grid of flex. */
.price-own--block { justify-self: start; align-self: flex-start; margin: 2px 0 0; }

/* --- Mijn account: het menu en het overzicht (opdracht #91) ---------------------- */
/* Op een telefoon (< 760px) één kolom: de kop, het menu als knoppen die over regels lopen (geen
   horizontaal scrollen), de inhoud en onderaan uitloggen. Breder staat het menu als kaart links,
   met uitloggen er direct onder in dezelfde kaart: de rasterregels zetten het uitlogformulier
   onder het menu, terwijl het in de HTML na de inhoud staat (de volgorde voor toetsenbord en
   schermlezer). Het actieve punt heeft aria-current. Elke knop is minstens 44px hoog. */
.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "menu" "main" "logout";
    gap: var(--s-4);
    padding-block: var(--s-4) var(--s-6);
}
.account-head { grid-area: head; }
.account-head .eyebrow { margin-bottom: var(--s-1); }
.account-head h1 { margin: 0; font-size: var(--step-4); font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.account-menu { grid-area: menu; display: flex; flex-wrap: wrap; gap: 8px; }
.account-menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--label);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
}
.account-menu a:hover { border-color: var(--purple); color: var(--purple); }
.account-menu a[aria-current] { border-color: var(--purple); background: var(--purple); color: #fff; }
.account-menu__amount { color: var(--muted); font-weight: 400; }
.account-menu a[aria-current] .account-menu__amount { color: #fff; }
.account-main { grid-area: main; display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.account-main > * { margin-block: 0; }
.account-main .lead { margin: 0; }
.account-logout { grid-area: logout; margin: 0; }
.account-logout button {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--label);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.account-logout button:hover { border-color: var(--purple); color: var(--purple); }
.account-form-panel { max-width: 640px; }

@media (min-width: 760px) {
    .account-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "menu head" "menu main" "logout main";
        column-gap: 28px;
        row-gap: 0;
        padding-block: var(--s-5) var(--s-6);
    }
    .account-head { margin-bottom: var(--s-4); }
    .account-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        align-self: start;
        padding: 10px 10px 6px;
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        background: #fff;
    }
    .account-menu a {
        justify-content: space-between;
        padding: 10px 14px;
        border: 0;
        border-radius: 9px;
        font-size: var(--step-0);
        font-weight: 400;
    }
    .account-menu a:hover { background: var(--surface-soft); color: var(--text); }
    .account-menu a[aria-current] { background: #eeeaff; color: #4434d4; font-weight: 600; }
    .account-menu a[aria-current] .account-menu__amount { color: #4434d4; }
    .account-logout {
        align-self: start;
        padding: 0 10px 10px;
        border: 1px solid var(--border);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        background: #fff;
    }
    .account-logout button {
        padding: 10px 14px;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: none;
        color: var(--muted);
        font-weight: 400;
        text-align: left;
    }
}

/* De kaarten van het overzicht. */
.account-card { display: grid; gap: var(--s-3); padding: 20px 22px; border-radius: 16px; min-width: 0; }
.account-card h2 { margin: 0; font-size: var(--step-1); font-weight: 600; }
.account-card > p { margin: 0; }
.account-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 12px; }
.account-card__head a,
.account-card__link a { color: var(--purple); font-weight: 600; }
.account-card__label { color: var(--label); }
.account-card__amount { font-size: var(--step-3); font-weight: 600; font-feature-settings: 'tnum'; }
.account-card__link { margin-top: auto; }
.account-cards-row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.account-status { font-weight: 600; }
.account-status.is-ok { color: var(--green-text); }
.account-status.is-open { color: #92600a; }

/* De voortgang van de lopende bestelling: op een telefoon een lijst met stippen, breder vier
   balkjes naast elkaar. Een stap die nog niet klaar is, is grijs; de stap van nu heeft een ring. */
.account-progress { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.account-progress li { display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; align-items: center; }
.account-progress li::before {
    content: "";
    grid-row: 1 / span 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-strong);
}
.account-progress li.is-done::before { background: var(--purple); }
.account-progress li.is-current::before { box-shadow: 0 0 0 4px #eeeaff; }
.account-progress strong { font-weight: 400; }
.account-progress li.is-current strong { font-weight: 600; }
.account-progress span { grid-column: 2; color: var(--muted); font-size: var(--step--1); }
@media (min-width: 760px) {
    .account-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .account-progress li { grid-template-columns: 1fr; align-content: start; row-gap: 8px; }
    .account-progress li::before { grid-row: auto; width: auto; height: 6px; border-radius: var(--r-pill); }
    .account-progress li.is-current::before { box-shadow: none; }
    .account-progress strong { font-weight: 600; }
    .account-progress span { grid-column: 1; }
}
.account-pickup { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.account-pickup p { flex: 1 1 240px; margin: 0; }

/* Eerdere bestellingen: nummer en details links, status en bedrag rechts; op een smal scherm
   eronder. */
.account-recent { margin: 0; padding: 0; list-style: none; }
.account-recent li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--surface-soft);
}
.account-recent li:last-child { border-bottom: 0; }
.account-recent a { font-weight: 600; }
.account-recent .muted { font-size: var(--step--1); }
.account-recent__end { display: flex; align-items: center; gap: 14px; }

/* --- Contactformulier en Mijn vragen (opdracht #95) -------------------------- */
/* De honeypot staat met CSS buiten beeld, niet met hidden: daar kijken bots naar (internal/contact). */
.contact-form { margin-top: var(--s-5); }
.contact-form__website { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form textarea { min-height: 44px; width: 100%; }
.contact-form input { min-height: 44px; }
/* Bericht en antwoord zijn platte tekst: de regeleinden van de schrijver blijven staan. */
.message-text { white-space: pre-line; overflow-wrap: anywhere; }

/* --- Winkeldetails uit Laravel (opdracht #94) ---------------------------------- */
/* De balk naar gratis verzending in de mand: een <progress>, want Laravel zette de breedte met een
   style-attribuut. */
.free-shipping-bar {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 8px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-soft);
    overflow: hidden;
    appearance: none;
}
/* Effen, zoals het ontwerp. Elke browser heeft eigen namen; Firefox kleurt de baan op het element zelf. */
.free-shipping-bar::-webkit-progress-bar { background: var(--surface-soft); }
.free-shipping-bar::-webkit-progress-value { background: var(--purple); }
.free-shipping-bar::-moz-progress-bar { background: var(--purple); }

/* --- Favorieten (opdracht #96) ------------------------------------------------- */
/* Het hartje op de kaart op het formaat van #91 (44 px); shop.css heeft 38 px. */
.favorite-button { width: 44px; height: 44px; }
/* Laravel zette deze marge met een style-attribuut op het formulier van de productpagina. */
.favorite-detail { margin-top: var(--s-3); }

/* --- Samensteller (opdracht #104) ---------------------------------------------- */
.configurator-lead { margin: 0; color: var(--label); font-size: var(--step--1); }
.configurator-photo-note { margin-top: var(--s-2); font-size: var(--step--1); }
/* Met een werkend voorbeeld wijken de foto en de zin; zonder script of als het laden mislukt, blijven ze staan. */
.product-media.is-preview .gallery, .product-media.is-preview .art, .product-media.is-preview .configurator-photo-note { display: none; }
.configurator-preview { display: grid; gap: var(--s-2); min-width: 0; }
.configurator-preview[hidden] { display: none; }
.configurator-preview__image canvas { display: block; width: 100%; height: auto; }
.configurator-preview__caption { margin: 0; font-size: var(--step--1); }
.configurator-preview__views { display: flex; flex-wrap: wrap; gap: var(--s-1); }
/* Het live voorbeeld van de tekst op het 3D-model (issue #152), boven de galerij: verborgen tot er een beeld of melding
   is (personalisatie-voorbeeld.js); de galerij blijft eronder staan. */
.text-preview { display: grid; gap: var(--s-2); min-width: 0; margin-bottom: var(--s-3); }
.text-preview[hidden], .text-preview__canvas[hidden] { display: none; }
.text-preview__canvas { display: block; width: 100%; height: auto; }
.text-preview__message { margin: 0; font-size: var(--step--1); }
/* Op de telefoon blijft een werkend voorbeeld vast bovenaan, hoogstens ongeveer een derde van het scherm, zodat de klant
   ziet wat hij kiest. Alleen met de class has-preview: zonder script, zonder voorbeeld of als het laden mislukt, is er
   gewoon de foto. Een rij in een grid kan niet buiten zijn eigen rij plakken, dus de grid wordt hier een gewoon blok. */
@media (max-width: 899px) {
    .product-detail-grid.has-preview { display: block; }
    .product-detail-grid.has-preview > .product-media {
        position: sticky;
        top: 4px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        height: 35vh;
        height: 35svh;
        margin-bottom: var(--s-4);
        padding: 6px;
        background: #fff;
    }
    .has-preview .configurator-preview { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 0; }
    .has-preview .configurator-preview[hidden] { display: none; }
    .has-preview .configurator-preview__image { display: flex; flex: 1; justify-content: center; min-height: 0; }
    .has-preview .configurator-preview__image canvas { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
    .has-preview .configurator-preview__caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .has-preview .configurator-preview__views { flex-wrap: nowrap; }
    /* De vaste balk is van het voorbeeld van de samensteller. Het tekstvoorbeeld komt op zo'n pagina niet
       (catalog.textPreviewPath), en mocht het er ooit staan, dan duwt het die balk niet uit zijn hoogte. */
    .has-preview .text-preview { display: none; }
    .has-preview .configurator-preview__views .configurator-button { flex: 1 1 0; justify-content: center; min-width: 0; padding: 4px 2px; }
    /* Wie met het toetsenbord door de keuzes gaat, komt niet onder het beeld of de koopbalk terecht. */
    .configurator .configurator-button { scroll-margin-top: 36vh; scroll-margin-bottom: 84px; }
}
.configurator { gap: var(--s-4); }
.configurator-part { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--border); }
.configurator-part legend { padding: 0; font-size: var(--step-1); font-weight: 500; }
.configurator-number { color: var(--muted); }
.configurator-slot { display: grid; gap: var(--s-1); min-width: 0; }
.configurator-slot select { width: 100%; max-width: 100%; }
.configurator-slot .hint { margin: 0; color: var(--muted); font-size: var(--step--1); }
.configurator-fixed { margin: 0; color: var(--label); font-size: var(--step--1); }
/* Met het script: knoppen in plaats van de keuzelijst. De lijst blijft het veld dat meegaat. */
.configurator-slot.is-enhanced select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.configurator-slot__missing { margin: 6px 0 0; color: #b8174b; font-weight: 600; }
.configurator-slot__missing[hidden] { display: none; }
.configurator-group { display: grid; gap: var(--s-1); }
.configurator-group__label { color: var(--muted); font-size: var(--step--1); }
.configurator-buttons { display: flex; flex-wrap: wrap; gap: var(--s-1); }
/* De keuze "Standaard uitvoering" / "Zelf kleuren samenstellen" (keuze 11 in configurator.go). In "Standaard" (is-standard,
   configurator.js) zijn de kiezers van elk vak ingeklapt en staat zijn standaard er; de keuzelijst blijft in het formulier
   en gaat mee. Vaste vakken (configurator-fixed) blijven gewoon staan. */
.configurator-mode { display: grid; gap: var(--s-1); }
.configurator-mode__label { margin: 0; color: var(--label); font-size: var(--step--1); font-weight: 600; }
.configurator-slot__standard { display: none; }
.configurator-slot.is-standard .configurator-slot__standard { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; color: var(--label); font-size: var(--step--1); }
.configurator-slot.is-standard > label,
.configurator-slot.is-standard > select,
.configurator-slot.is-standard > .configurator-group,
.configurator-slot.is-standard > .hint { display: none; }
.configurator-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--label);
    font: inherit;
    font-size: var(--step--1);
    cursor: pointer;
}
.configurator-button[aria-pressed=true] { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); color: var(--purple); }
.configurator-button small { color: var(--muted); }
.configurator-summary h2 { margin: 0 0 var(--s-2); font-size: var(--step-1); font-weight: 500; }
.configurator-summary--side { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.configurator-summary--inline { display: none; }
.configurator-lines { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.configurator-lines li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: var(--label); }
.configurator-lines .configurator-line__name { color: var(--muted); }
.configurator-price { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-3); margin: 0; font-size: var(--step--1); }
.configurator-price[hidden] { display: none; }
.configurator-price dd { margin: 0; text-align: right; }
.configurator-price__total { font-size: var(--step-0); font-weight: 500; }
[data-config-total]:not(:empty)::before { content: " · "; }
.cart-composition { display: grid; gap: 2px; margin: 2px 0; padding: 0; list-style: none; color: var(--label); font-size: var(--step--1); font-weight: 400; }
@media (max-width: 899px) {
    .configurator-summary--side { display: none; }
    .configurator-summary--inline { display: block; }
    .configurator-summary--inline[hidden] { display: none; }
}

/* --- Meldingen (opdracht #107) ---------------------------------------------------- */
/* Witte tekst op #ef4444 haalt 3,8:1; dit haalt ruim 4,5:1 op elke winkelpagina. */
.flash.danger { background: #fbe9ef !important; color: #8f0e33 !important; border-color: #f3c3d2 !important; }
.flash.danger a { color: #8f0e33; }

/* --- Startpagina (opdracht #107) --------------------------------------------------- */
/* Het raster is een printbed; de kleuren en maten komen uit het goedgekeurde ontwerp. Geen style-attribuut:
   de CSP staat dat niet toe. Kleuren van vlakken staan als fill op een SVG (home.html). */
main > .hero { padding: 0; }
main > .home-trust { padding: 0; }
.hero { background: var(--night); color: var(--on-night); }
.hero .eyebrow { color: var(--on-night-accent); font-family: 'Source Code Pro', monospace; font-weight: 600; letter-spacing: .06em; }
.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(24px, 5vw, 64px) clamp(48px, 7vw, 96px);
}
.hero-grid--text { grid-template-columns: minmax(0, 52rem); }
.hero-copy { min-width: 0; }
.hero h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.hero-intro { max-width: 34em; margin: 28px 0 0; color: var(--on-night-muted); font-size: clamp(1.125rem, 1.6vw, 1.3rem); font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn-hero { min-height: 52px; padding-inline: 26px; border-radius: var(--r); box-shadow: none; font-weight: 600; }
.btn-hero--line { border-color: var(--night-line); background: transparent; color: var(--on-night); }
.btn-hero--line:hover { background: rgba(255, 255, 255, .1); }
.hero :where(a, button):focus-visible { outline-color: var(--on-night-accent); }

.hero-stage {
    min-width: 0;
    padding: clamp(16px, 2.4vw, 28px);
    border: 1px solid var(--night-line);
    border-radius: 22px;
    background-color: var(--night-soft);
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 36px 36px;
}
/* Een foto kan elke kleur hebben, ook zwart: die staat op een licht printbed. */
.hero-stage--photo {
    border-color: var(--border);
    background-color: #fff;
    background-image: linear-gradient(var(--surface-soft) 1px, transparent 1px), linear-gradient(90deg, var(--surface-soft) 1px, transparent 1px);
}
.hero-stage--photo .hero-stage__head { color: #3a26c9; }
.hero-stage--photo .hero-stage__head a:focus-visible { outline-color: var(--purple); }
.hero-stage__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    color: var(--on-night-accent);
    font-family: 'Source Code Pro', monospace;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hero-stage__head a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .2em; }
.hero-stage__head span { display: inline-flex; align-items: center; min-height: 44px; }
.hero-stage__image {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1;
    margin: -12px auto -16px;
    filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .34));
}
.hero-stage__image img,
.hero-stage__image canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-stage__caption { margin: var(--s-2) 0 0; color: var(--on-night-muted); font-size: var(--step--1); }
.hero-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hero-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 12px;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: var(--r);
    background: var(--night-soft);
    color: var(--on-night);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.hero-zone[aria-pressed=true] { border-color: #fff; }
.hero-dot { display: block; flex: none; width: 18px; height: 18px; }
.hero-dot circle { stroke: rgba(127, 127, 127, .55); stroke-width: 1; }
.hero-colors { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.hero-color {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    cursor: pointer;
}
.hero-color .hero-dot { width: 100%; height: 100%; }
.hero-color[aria-pressed=true] { border-color: #fff; }
.hero-line { margin: 12px 0 0; color: var(--on-night-muted); font-weight: 400; }

.home-trust { background: #fff; border-bottom: 1px solid var(--border); }
.home-trust__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 12px 32px;
    margin-block: 0;
    padding-block: 22px;
    list-style: none;
    font-weight: 600;
}
.home-trust__list li,
.cart-trust li { display: flex; align-items: center; gap: 10px; }
.home-trust__list .icon,
.cart-trust .icon { color: var(--purple); }
.home-trust__list .icon { width: 22px; height: 22px; }

main > .home-block { padding-block: clamp(48px, 7vw, 96px) 0; }
.home-block h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.home-block .eyebrow { font-family: 'Source Code Pro', monospace; font-weight: 600; letter-spacing: .06em; }
.home-block h3 { font-weight: 600; }
.home-block__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: var(--s-5); }
.home-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--purple); font-weight: 600; }
.home-link:hover { color: var(--purple-hover); text-decoration: underline; }

/* De kaarten: één kolom op een telefoon; één product ligt op zijn kant, twee staan even breed, en vanaf drie
   vult het raster de breedte zonder dat de laatste kaart uitrekt. */
ul.home-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
ul.home-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
ul.home-grid--one { grid-template-columns: minmax(0, 1fr); }
.home-grid .product-card { border-radius: var(--r-lg); box-shadow: none; }
.home-grid .art { background: var(--surface-soft); }
.home-grid .art img { position: absolute; inset: 0; padding: 8px; object-fit: contain; }
.home-grid .card-body { gap: 8px; padding: 20px 20px var(--s-2); }
.home-grid .product-card h3 { margin: 0; font-size: 1.375rem; font-weight: 600; }
.home-grid .price { margin: 0; font-size: 1.3125rem; font-weight: 700; }
.home-grid .card-actions { padding: 0 20px 20px; }
.home-grid .card-actions .btn { min-height: 48px; border-radius: var(--r); box-shadow: none; font-weight: 600; }
.home-grid .card-actions .btn.ghost:disabled { border-color: var(--border-strong); background: #eef2f7; color: var(--muted); opacity: 1; }
/* De focusrand van de kaartlink: de kaart snijdt een gewone rand af, en de foto (position: relative) ligt eroverheen. Daarom een
   laag boven de foto, binnen de kaart. */
.home-grid .product-card > a:focus-visible { outline: none; }
.home-grid .product-card > a:focus-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 3px solid var(--purple);
    border-radius: var(--r-lg);
    pointer-events: none;
}
@media (min-width: 760px) {
    .home-grid--one .product-card > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
    .home-grid--one .card-body { padding-bottom: 88px; }
    .home-grid--one .card-actions { position: absolute; right: 0; bottom: 0; width: 50%; }
}
/* De status: alleen uitverkocht en voorraad hadden een eigen kleur. */
.home-grid .stock-pill--backorder { border-color: var(--border-strong); background: var(--surface-soft); color: var(--label); }
.home-grid .stock-pill--made_to_order { border-color: rgba(83, 58, 253, .25); background: rgba(83, 58, 253, .1); color: #3a26c9; }

.home-how { padding: clamp(28px, 5vw, 64px); border-radius: 24px; background: var(--night); color: var(--on-night); }
.home-how .eyebrow { color: var(--on-night-accent); }
.home-how h2 { max-width: 18em; }
.home-how :where(a):focus-visible { outline-color: var(--on-night-accent); }
.home-how__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 32px;
    margin: 36px 0;
    padding: 0;
    list-style: none;
}
.home-how__number { color: var(--on-night-accent); font-family: 'Source Code Pro', monospace; font-weight: 600; }
.home-how h3 { margin: 8px 0; font-size: 1.375rem; }
.home-how p { margin: 0; color: var(--on-night-muted); font-weight: 400; }

.home-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; }
.home-parts__image {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 22px;
    background-color: #fff;
    background-image: linear-gradient(var(--surface-soft) 1px, transparent 1px), linear-gradient(90deg, var(--surface-soft) 1px, transparent 1px);
    background-size: 36px 36px;
}
.home-parts__image img { display: block; width: 100%; }
.home-parts .muted { max-width: 32em; margin: 20px 0 var(--s-2); font-weight: 400; }

.home-expect { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: var(--s-4); }
.home-expect__card { padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; }
.home-expect__card h3 { margin: 0 0 8px; font-size: 1.375rem; }
.home-expect__card p { margin: 0; font-weight: 400; }

/* --- Winkelmand (opdracht #107, in het ontwerp van #131) ------------------------------- */
/* De regels als kaarten met een foto, de personalisatie zichtbaar en het aantal als pil; het overzicht ernaast vanaf
   900 px (shop.css: .cart-layout), plakkend, met de regel over gratis verzending en de zin over artikelen op naam. */
.cart-page h1 { margin-bottom: var(--s-4); font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.cart-page > .flash { margin-bottom: var(--s-3); }
.cart-main { display: grid; gap: 14px; min-width: 0; }
.cart-lines { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cart-lines > li { scroll-margin-top: var(--sticky-gap); }
.cart-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 18px;
    padding: 14px;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-card);
}
.cart-line.has-problem { box-shadow: var(--shadow-card), inset 0 0 0 2px #e58aa4; }
.cart-line__media {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface-soft);
}
.cart-line__media img,
.cart-line__media canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-line__media .art-placeholder { font-size: 1.6rem; }
.cart-line__body { display: grid; flex: 999 1 200px; gap: 6px; min-width: 0; font-weight: 400; }
.cart-line__name { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.cart-line__name a { color: var(--text); }
.cart-line__name a:hover { color: var(--purple); text-decoration: underline; }
.cart-line__note { margin: 0; color: var(--muted); font-size: var(--step--1); }
.cart-line .field-error { margin: 0; }
.cart-line__edit { display: inline-flex; align-items: center; min-height: 44px; color: var(--purple); font-weight: 600; }
.cart-line__edit:hover { color: var(--purple-hover); text-decoration: underline; }
.cart-variant { margin: 0; color: var(--muted); font-size: .95rem; }
/* Een witte stip op een witte kaart: met een randje. */
.cart-line svg.swatch-dot { border-radius: 50%; outline: 1px solid rgba(6, 27, 49, .22); outline-offset: -1px; }
/* De personalisatie van de regel: label, tekst, kleur en "Op naam" in een vlakje. */
.cart-line__personal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    justify-self: start;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--surface-soft);
}
.cart-line__personal .line-personalization { font-size: .95rem; }
.cart-line__personal .tile-label { padding: 3px 9px; font-size: .72rem; }
.cart-line__hint { margin: 0; color: var(--muted); font-size: .875rem; }
.cart-line .cart-composition { gap: 3px; margin: 0; }
.cart-line .cart-composition .is-unavailable { color: #8f0e33; }
.cart-line .cart-composition .is-unavailable .cart-composition__text { text-decoration: line-through; }
.cart-line .cart-composition strong { font-weight: 600; white-space: nowrap; }
.cart-line .cart-composition svg.swatch-dot { width: 11px; height: 11px; flex-basis: 11px; margin-right: 8px; vertical-align: -1px; }
.cart-line__side { display: flex; flex: 1 1 200px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cart-line__total { margin: 0; font-size: 1.15rem; font-weight: 700; font-feature-settings: 'tnum'; }
/* Smal: het aantal met het bedrag ernaast, daaronder de hint en de knoppen. Breder staan ze rechts onder elkaar. */
@media (max-width: 599px) {
    .cart-line__side .cart-stepper { order: 1; }
    .cart-line__total { order: 2; margin-left: auto; }
    .cart-line__side .cart-line__hint { order: 3; flex-basis: 100%; }
    .cart-line__buttons { order: 4; }
}
@media (min-width: 600px) {
    .cart-line__media { width: 120px; height: 120px; }
    .cart-line__side { flex-direction: column; align-items: flex-end; justify-content: flex-start; flex: 0 1 auto; }
    .cart-line__total { font-size: 1.2rem; }
    .cart-line__hint { max-width: 26ch; text-align: right; }
}
/* Het aantal als pil: min, het getal en plus. */
.cart-stepper { display: inline-flex; align-items: center; height: 44px; padding: 0 2px; border-radius: var(--r-pill); background: var(--surface-soft); }
.cart-stepper button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cart-stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, .7); }
.cart-stepper button:disabled { color: var(--muted); cursor: not-allowed; opacity: .55; }
/* Het veld voor een groot aantal: gewoon een getal tussen de knoppen, zonder de pijltjes van de browser. */
.cart-stepper input {
    width: 2.6rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: max(16px, var(--step-0));
    font-weight: 700;
    text-align: center;
    font-feature-settings: 'tnum';
    appearance: textfield;
}
.cart-stepper input::-webkit-outer-spin-button,
.cart-stepper input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.cart-line__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s-3); }
.cart-line__remove { min-height: 44px; padding: 0 4px; color: var(--purple); font-weight: 600; }
.cart-line__remove:hover { color: var(--purple-hover); }
.cart-page .cart-actions { margin-top: 0; }

.cart-page .cart-summary {
    display: grid;
    gap: 10px;
    padding: 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(6, 27, 49, .05), 0 10px 30px rgba(6, 27, 49, .06);
}
.cart-page .cart-summary h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; }
.cart-page .cart-summary p { margin: 0; }
.cart-page .cart-free { margin: 0; }
.cart-page .cart-free .free-shipping-hint { margin: 0; padding: 0; background: none; font-size: .875rem; font-weight: 600; }
.cart-page .cart-free .free-shipping-bar { display: block; width: 100%; height: 6px; margin-top: 8px; }
.cart-page .cart-total { flex-wrap: wrap; align-items: baseline; margin-top: 4px !important; padding-top: 12px; font-size: var(--step-0); }
.cart-page .cart-total span:last-child { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; font-feature-settings: 'tnum'; }
.cart-summary > .legalese { font-weight: 400; }
.cart-summary > .cart-summary__lead,
.cart-summary > .cart-summary__personal {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--label);
    font-size: .875rem;
    font-weight: 400;
}
.cart-summary__personal .icon { width: 18px; height: 18px; margin-top: 1px; }
.cart-summary > .cart-summary__blocked { display: block; color: #8f0e33; font-size: var(--step--1); font-weight: 400; }
.cart-checkout { width: 100%; min-height: 56px; margin-top: 4px; box-shadow: 0 10px 24px rgba(83, 58, 253, .35); font-size: 1.1rem; }
.cart-checkout:disabled { background: #eef2f7; color: var(--muted); box-shadow: none; }
.cart-page .discount-form { margin-top: 4px; padding-top: var(--s-1); border-top: 1px solid var(--border); }
.cart-page .discount-form > p { display: block; margin: 0 0 var(--s-1); }
.cart-page .cart-discount-code { color: var(--label); }
.cart-trust { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--label); font-size: var(--step--1); font-weight: 400; }
.cart-trust .icon { width: 18px; height: 18px; }

.cart-empty { display: grid; justify-items: center; gap: var(--s-1); padding: clamp(36px, 6vw, 72px) var(--s-4); border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); text-align: center; }
.cart-empty p { margin: 0; font-weight: 400; }
.cart-empty__title { font-size: 1.625rem; font-weight: 700 !important; letter-spacing: -.01em; }
.cart-empty .empty-mark { width: 56px; height: 56px; color: var(--purple); }
.cart-empty .actions { justify-content: center; }

/* --- Kleine preview van het artikel (opdracht #124) --------------------------------------------------------------------
   Het paneel "Toegevoegd aan je winkelmand" bovenaan de productpagina, de mini-winkelmand in de kop en de foto's in het
   overzicht bij afrekenen. Elke knop en link is minstens 44 px hoog; de teksten halen 4,5:1 op wit (--label, --muted,
   --green-text). */
.line-thumb {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-soft);
}
.line-thumb img,
.line-thumb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.line-thumb .art-placeholder { font-size: 1rem; }

.added-wrap { margin-top: var(--s-4); }
.added-panel {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border-color: #9fd9b4;
    scroll-margin-top: var(--sticky-gap);
}
/* Het paneel krijgt de focus van het script, maar is zelf niet te bedienen: een zachte rand in plaats van de focusring. */
.added-panel:focus { outline: none; box-shadow: 0 0 0 3px rgba(21, 190, 83, .25); }
.added-panel__title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-text); font-size: var(--step-1); }
.added-panel__title .icon { width: 1.2em; height: 1.2em; flex: none; }
.added-panel__line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }
.added-panel__line .line-thumb { width: 96px; height: 96px; border-radius: 12px; }
.added-panel__body { flex: 999 1 220px; min-width: 0; }
.added-panel__body p { margin: 0 0 4px; }
.added-panel__name { color: var(--text); font-weight: 600; }
.added-panel__choices { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 4px; padding: 0; list-style: none; color: var(--label); font-size: var(--step--1); }
.added-panel__choices li,
p.added-panel__choices { display: inline-flex; align-items: center; gap: 6px; }
.added-panel__quantity { color: var(--label); font-size: var(--step--1); }
.added-panel__price { display: grid; justify-items: end; gap: 2px; flex: 1 0 auto; margin: 0; text-align: right; font-size: var(--step--1); }
.added-panel__amount { color: var(--text); font-size: var(--step-1); font-weight: 700; font-feature-settings: 'tnum'; }
.added-panel__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.added-panel__actions .btn { min-height: 46px; }
@media (max-width: 480px) {
    .added-panel { padding: var(--s-3); }
    .added-panel__line .line-thumb { width: 72px; height: 72px; }
    .added-panel__price { justify-items: start; text-align: left; }
    .added-panel__actions .btn { flex: 1 1 100%; }
}

/* Het venster hangt onder de knop: de balk is het ankerpunt. Het menu op een smal scherm verandert daar niet door, want daar
   is de balk even breed als de kop. */
.top-bar { position: relative; }
.mini-cart {
    position: absolute;
    top: calc(100% - 4px);
    right: var(--gutter);
    z-index: 30;
    display: grid;
    gap: var(--s-2);
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100svh - var(--header-h) - 16px);
    padding: var(--s-3);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow);
}
.mini-cart[hidden] { display: none; }
.mini-cart:focus { outline: none; }
.mini-cart:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.mini-cart :where(a, button):focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.mini-cart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.mini-cart__title { margin: 0; font-size: var(--step-0); font-weight: 600; }
.mini-cart__count { color: var(--muted); font-weight: 400; }
.mini-cart__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--label);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.mini-cart__close:hover { background: var(--surface-soft); }
.mini-cart__lines { display: grid; margin: 0; padding: 0; list-style: none; }
.mini-cart__line { display: flex; align-items: center; gap: var(--s-2); padding: 8px 0; border-bottom: 1px solid var(--border); }
.mini-cart__text { display: grid; flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--step--1); }
.mini-cart__name { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--text); font-weight: 600; }
.mini-cart__quantity,
.mini-cart__choices { color: var(--muted); }
.mini-cart__swatches { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.mini-cart__swatches svg.swatch-dot { flex: none; width: 14px; height: 14px; margin: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(6, 27, 49, .22); }
.mini-cart__amount { flex: none; margin: 0; color: var(--text); font-size: var(--step--1); font-weight: 600; font-feature-settings: 'tnum'; }
.mini-cart__more { margin: 0; color: var(--label); font-size: var(--step--1); }
.mini-cart__subtotal { display: flex; justify-content: space-between; gap: var(--s-2); margin: 0; color: var(--text); font-weight: 600; }
.mini-cart__empty { margin: 0; color: var(--label); }
.mini-cart__to-cart { width: 100%; }
@media (max-width: 480px) {
    .mini-cart { right: 16px; left: 16px; width: auto; }
}

.summary-items li.summary-line { align-items: center; }
.summary-line .line-thumb { width: 44px; height: 44px; border-radius: 8px; }
.summary-line__text { flex: 1 1 auto; min-width: 0; }

/* --- Personalisatie (opdracht #130) ---------------------------------- */
/* Het blok in het formulier: tekstveld, kleuren en de zin over de bedenktijd. */
.personalization { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--border); }
.personalization__legend { padding: 0; font-size: var(--step-1); font-weight: 500; }
.personalization__field { display: grid; gap: var(--s-1); min-width: 0; }
.personalization__field input { width: 100%; max-width: 100%; }
.personalization__field .hint { margin: 0; color: var(--muted); font-size: var(--step--1); }
.personalization__colors { min-width: 0; margin: 0; padding: 0; border: 0; }
.personalization__colors legend { padding: 0 0 var(--s-1); color: var(--label); font-size: var(--step--1); }
.personalization__swatches { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.personalization__color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--label);
    font-size: var(--step--1);
    cursor: pointer;
}
.personalization__color:has(input:checked) { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); color: var(--purple); }
/* Gaat voor .form label en .form input uit shop.css: een rondje, de staal en de naam op één regel. */
.form .personalization__color { display: inline-flex; gap: 6px; }
.form .personalization__color input {
    width: 18px;
    height: 18px;
    min-height: 0;
    flex: 0 0 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--purple);
}
.personalization__notice { margin: 0; color: var(--label); font-size: var(--step--1); }
/* De personalisatie als eigen stap in de koopkaart (issue #163), de laatste vóór het aantal en de knop: een vlak met rand,
   met de legend "Persoonlijke tekst" als zichtbare kop. De rand van de stap vervangt de lijn boven het blok. */
.buy-step { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
.buy-step .personalization { padding-top: 0; border-top: 0; }
/* De personalisatie bij een regel. */
.line-personalization { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--label); font-size: var(--step--1); overflow-wrap: anywhere; }
.line-personalization__label { color: var(--muted); }
.line-personalization__text { font-weight: 600; }
.line-personalization__color { display: inline-flex; align-items: center; gap: 4px; }
.checkout-personalized { margin: 0; color: var(--label); font-size: var(--step--1); }