/* =========================================================
   Koffieabonnement (agent C) — V3 minimalistisch. Vier smaaklijnen, flow naar het voorbeeld van WAY.
   Enkel paginalayout (sb-*); kleur, type, knoppen, chips, keuzes, velden en .k-dl komen uit brand.css.
   ====================================================== */

.sb { --sb-side: 380px; --sb-sticky: calc(var(--k-header-h, 72px) + var(--k-3, 24px)); }
:where(.sb) :where(p, ol, ul, dl, figure) { margin: 0; }
.sb input[type="radio"], .sb input[type="checkbox"] { min-height: 0; height: 18px; padding: 0; }
:where(.sb) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.sb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-4); margin-top: var(--k-4); }
.sb-optional { color: var(--k-muted); font-weight: 400; }
.sb-ref { color: var(--k-ink); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Productbeeld op roze: witte productfoto via multiply in het roze vlak opgelost (geen witte rand/schaduwstrook) */
.sb-visual { aspect-ratio: 1; }
.sb-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* ---------- Hero ---------- */
.sb-hero { padding-block: var(--k-5) var(--k-9); }
.sb-hero__grid { display: grid; gap: var(--k-6); }
.sb-hero__copy { display: grid; justify-items: start; align-content: center; }
.sb-hero__copy .k-h1 { margin-top: var(--k-2); }
.sb-hero__copy .k-lead { margin-top: var(--k-3); }
.sb-hero__copy .k-btn { margin-top: var(--k-4); }
@media (min-width: 900px) {
    .sb-hero { padding-block: var(--k-10) var(--k-12); }
    .sb-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--k-10); align-items: center; }
}

/* Drie beloftes onder de hero-tekst: rustige lijst, geen iconen */
.sb-promise { display: grid; gap: 4px; margin: var(--k-3) 0 0; padding: 0; list-style: none; color: var(--k-muted); }
.sb-promise li { position: relative; padding-left: 20px; }
.sb-promise li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 1.5px; background: var(--k-ink); }
.sb-promise strong { color: var(--k-ink); font-weight: 500; }

/* ---------- Stap 1 · Smaak ---------- */
/* Kleurvlak per lijn achter hetzelfde roze zakje. Enkel uit tokens afgeleid (color-mix), geen eigen kleuren. */
.sb-line--pink  { --sb-tone: var(--k-pink); }
.sb-line--cacao { --sb-tone: color-mix(in srgb, var(--k-pink), var(--k-ink) 22%); }
.sb-line--berry { --sb-tone: color-mix(in srgb, var(--k-pink), var(--k-accent) 32%); }
.sb-line--funk  { --sb-tone: var(--k-surface); }

.sb-lines { display: grid; gap: 12px; }
@media (min-width: 600px) { .sb-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sb-line {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: var(--k-2);
    padding: 12px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-r);
    background: var(--k-bg);
    cursor: pointer;
    transition: border-color var(--k-dur) var(--k-ease);
}
.sb-line:hover { border-color: var(--k-ink); }
.sb-line:has(input:checked) { border-color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-ink); }
.sb-line:has(input:focus-visible) { outline: 2px solid var(--k-accent); outline-offset: 2px; }
/* Radio blijft focusbaar en voorleesbaar, maar het hele kaartje is de keuze */
.sb .sb-line__input { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; margin: 0; accent-color: var(--k-ink); }

.sb-line__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: calc(var(--k-r) - 6px);
    background: var(--sb-tone, var(--k-pink));
    overflow: hidden;
}
.sb-line__media img { width: 64%; height: auto; }
.sb-line__body { display: grid; gap: 2px; min-width: 0; padding-right: 28px; }
.sb-line__name { font: 500 17px/24px var(--k-font); letter-spacing: -0.015em; color: var(--k-ink); }
.sb-line__tag { color: var(--k-muted); font-size: 14px; line-height: 20px; }
.sb-line__from { margin-top: 4px; color: var(--k-ink); font-size: 14px; line-height: 20px; }

@media (min-width: 600px) {
    .sb-line { grid-template-columns: 1fr; align-items: start; gap: 12px; padding: 12px 12px var(--k-2); }
    .sb-line__media { aspect-ratio: 4 / 3; }
    .sb-line__media img { width: auto; height: 78%; }
    .sb-line__body { padding: 0 4px; }
    .sb .sb-line__input { top: 22px; right: 22px; }
}

.sb-linedesc { margin-top: var(--k-3); }
.sb-linedesc__item { display: grid; gap: var(--k-1); max-width: 62ch; }
.sb-linedesc__item[hidden], .sb-linedesc__coffee[hidden] { display: none; }
.sb-linedesc__item p:first-child { color: var(--k-ink); }
.sb-linedesc__month { font-size: 15px; line-height: 24px; }
.sb-linedesc__coffee strong { font-weight: 500; }

/* ---------- Stap 2 · Zetmethode (één vlakke lijst chips) ---------- */
.sb-grind-hint { margin-top: 12px; }

/* ---------- Stap 3 · Hoeveelheid ---------- */
.sb-weight .k-choice__body { display: grid; gap: 2px; }
.sb-weight__price { font-weight: 500; color: var(--k-ink); }
.sb-weight__unit { color: var(--k-muted); font-weight: 400; font-size: 14px; }
.sb-block__foot { margin-top: 12px; }

/* ---------- Formulier ---------- */
.sb-config__head { display: grid; gap: var(--k-2); max-width: 640px; margin-bottom: var(--k-6); }
.sb-config__head .k-muted { max-width: 52ch; }

.sb-form { display: grid; gap: var(--k-6); align-items: start; }
@media (min-width: 1024px) {
    .sb-form { grid-template-columns: minmax(0, 1fr) var(--sb-side); gap: var(--k-10); }
}

.sb-block { padding-bottom: var(--k-5); margin-bottom: var(--k-5); border-bottom: 1px solid var(--k-line); }
.sb-blocks > .sb-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.sb-block__title {
    float: left;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 var(--k-3);
    padding: 0;
    color: var(--k-ink);
    font: 500 18px/28px var(--k-font);
    letter-spacing: -0.015em;
}
.sb-block__title + * { clear: both; }
.sb-block__num { color: var(--k-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.sb-choices { display: grid; gap: 12px; }
@media (min-width: 600px) {
    .sb-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Hoeveelheden: 2 tot 4 naast elkaar, naargelang de smaak er aanbiedt (verborgen keuzes tellen niet mee). */
    .sb-choices--weights { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.sb-choice[hidden] { display: none; }
.sb-choice .k-choice__meta { font-variant-numeric: tabular-nums; }

.sb-sublabel { margin: var(--k-3) 0 12px; }
.sb-block__title + .sb-sublabel { margin-top: 0; }
.sb-chip { position: relative; }

.sb-block .k-field-error { margin-top: 12px; }
.sb-block.is-error .k-choice:not(:has(input:checked)) { border-color: var(--k-accent); }
/* brand.css' basisregel voor inputs is specifieker dan .k-input[aria-invalid]; hier expliciet */
body.k-site .sb input.k-input[aria-invalid="true"], body.k-site .sb textarea.k-textarea[aria-invalid="true"] { border-color: var(--k-accent); }

.sb-reveal { margin-top: var(--k-3); }
.sb-reveal[hidden] { display: none; }
.sb-fields { display: grid; gap: var(--k-2) 20px; }
@media (min-width: 600px) {
    .sb-fields { grid-template-columns: 1fr 1fr; }
    .sb-span-2 { grid-column: span 2; }
}
.sb-field .k-field-error { margin-top: 0; }
.sb-note { margin-top: var(--k-3); }

.sb-check { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--k-3); font-weight: 400; cursor: pointer; }
.sb-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--k-ink); }

/* Foutmelding bovenaan */
.sb-alert {
    display: grid;
    gap: var(--k-1);
    margin-bottom: var(--k-5);
    padding: 20px 24px;
    border: 1px solid var(--k-line);
    border-left: 2px solid var(--k-accent);
    border-radius: var(--k-r-sm);
    font-size: 15px;
}
.sb-alert:focus { outline: none; }
.sb-alert__title { color: var(--k-accent); font-weight: 500; }
.sb-alert ul { padding-left: 18px; }
.sb-alert a { color: var(--k-ink); text-decoration-color: var(--k-line); }
.sb-alert a:hover { text-decoration-color: currentColor; }

/* Overzicht (rechts, sticky op desktop) */
.sb-summary__inner, .sb-panel {
    padding: var(--k-4) var(--k-3);
    border-radius: var(--k-r);
    background: var(--k-surface);
}
@media (min-width: 600px) { .sb-summary__inner, .sb-panel { padding: var(--k-4); } }
@media (min-width: 1024px) {
    .sb-summary { position: sticky; top: var(--sb-sticky); }
}
.sb-summary__title { margin: 0 0 var(--k-2); font: 500 18px/28px var(--k-font); letter-spacing: -0.015em; }
.sb-summary__inner > .sb-summary__title { margin-bottom: 4px; color: var(--k-muted); font-size: 14px; line-height: 20px; letter-spacing: 0; }
.sb-summary__line { font: 500 24px/32px var(--k-font); letter-spacing: -0.02em; }
.sb-summary__coffee { margin-bottom: var(--k-2); color: var(--k-muted); font-size: 14px; line-height: 22px; min-height: 22px; }
.sb-bill { margin: var(--k-2) 0 0; }
.sb-bill > div { display: flex; justify-content: space-between; gap: var(--k-2); padding-block: 4px; font-size: 15px; line-height: 24px; }
.sb-bill dt { color: var(--k-muted); }
.sb-bill dd { margin: 0; font-variant-numeric: tabular-nums; }
.sb-dl > div { grid-template-columns: auto minmax(0, 1fr); padding-block: 12px; }
.sb-dl dd { text-align: right; overflow-wrap: anywhere; }
.sb-dl .is-empty { color: var(--k-muted); }
.sb-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-2); margin-top: var(--k-2); padding-top: var(--k-2); border-top: 1px solid var(--k-line); }
.sb-summary__total span { color: var(--k-muted); font-size: 14px; }
.sb-summary__total strong { font: 500 28px/1.1 var(--k-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sb-summary__first { margin-top: 4px; color: var(--k-muted); font-size: 14px; line-height: 22px; text-align: right; }
.sb-summary .k-btn { margin-top: var(--k-3); }
.sb-summary__note { margin-top: 12px; color: var(--k-muted); font-size: 14px; line-height: 22px; text-align: center; }
.sb-panel .sb-summary__note { text-align: left; margin-top: var(--k-2); }

.sb-empty { display: grid; gap: var(--k-1); max-width: 520px; padding: var(--k-4); border-radius: var(--k-r); background: var(--k-surface); }

/* ---------- FAQ ---------- */
.sb-faq__grid { display: grid; gap: var(--k-4); }
@media (min-width: 900px) { .sb-faq__grid { grid-template-columns: 1fr 2fr; gap: var(--k-10); } }
.sb-faq__list { border-top: 1px solid var(--k-line); }
.sb-faq__item { border-bottom: 1px solid var(--k-line); }
.sb-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-3);
    padding-block: 20px;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    list-style: none;
    cursor: pointer;
}
.sb-faq__item summary::-webkit-details-marker { display: none; }
.sb-faq__item summary:hover { color: var(--k-accent); }
.sb-faq__icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.sb-faq__icon::before, .sb-faq__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--k-dur) var(--k-ease);
}
.sb-faq__icon::after { transform: rotate(90deg); }
.sb-faq__item[open] .sb-faq__icon::after { transform: rotate(0deg); }
.sb-faq__item p { max-width: 60ch; padding-bottom: 20px; color: var(--k-muted); }

/* ---------- Bedankt ---------- */
.sb-done__grid { display: grid; gap: var(--k-6); align-items: start; }
@media (min-width: 900px) { .sb-done__grid { grid-template-columns: minmax(0, 1fr) 440px; gap: var(--k-10); } }
.sb-done__copy .k-h1 { margin-top: var(--k-2); }
.sb-done__copy .k-lead { margin-top: var(--k-3); }
.sb-done__copy > .k-muted { margin-top: var(--k-2); max-width: 52ch; }

/* ---------- Beheer ---------- */
.sb-flash { margin-bottom: var(--k-4); padding: 14px 20px; border-radius: var(--k-r-sm); background: var(--k-surface); font-weight: 500; }
.sb-flash--danger { color: var(--k-accent); }
.sb-manage__head { display: grid; justify-items: start; gap: var(--k-2); margin-bottom: var(--k-6); }
.sb-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; }
.sb-status .k-muted { font-weight: 400; }
.sb-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-success); }
.sb-status--gepauzeerd .sb-status__dot, .sb-status--opgezegd .sb-status__dot { background: #C9BFBD; }

.sb-manage__grid { display: grid; gap: var(--k-6); align-items: start; }
@media (min-width: 1024px) { .sb-manage__grid { grid-template-columns: minmax(0, 1fr) var(--sb-side); gap: var(--k-10); } }
.sb-manage__sub { margin: 4px 0 var(--k-4); }
.sb-form--plain { display: block; }
.sb-form--plain .sb-block:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--k-4); }

.sb-panel__actions { display: grid; gap: 12px; margin-top: var(--k-3); }
.sb-cancel summary {
    display: block;
    min-height: 44px;
    padding-block: 11px;
    color: var(--k-muted);
    font-size: 14px;
    text-align: center;
    list-style: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--k-line);
    text-underline-offset: 4px;
}
.sb-cancel summary::-webkit-details-marker { display: none; }
.sb-cancel summary:hover { color: var(--k-ink); }
.sb-cancel[open] summary { color: var(--k-ink); }
.sb-cancel p { margin: 4px 0 12px; font-size: 14px; line-height: 22px; }
.sb-btn-danger { width: 100%; color: var(--k-accent); }
.sb-btn-danger:hover { border-color: var(--k-accent); }

.sb-history { margin-top: var(--k-5); }
.sb-history ul { padding: 0; list-style: none; border-top: 1px solid var(--k-line); }
.sb-history li { display: flex; justify-content: space-between; gap: var(--k-2); padding-block: 12px; border-bottom: 1px solid var(--k-line); font-size: 14px; line-height: 22px; }

/* ---------- Teaser (homepage) ---------- */
.sb-teaser__grid { display: grid; gap: var(--k-4); align-items: center; }
.sb-teaser__copy { display: grid; justify-items: start; }
.sb-teaser__copy .k-h2 { margin-top: var(--k-2); }
.sb-teaser__copy .k-lead { margin-top: var(--k-2); }
.sb-teaser__price { margin-top: var(--k-3); color: var(--k-muted); }
.sb-teaser__price strong { color: var(--k-ink); font-weight: 500; }
.sb-teaser__copy .k-btn { margin-top: var(--k-3); }
@media (min-width: 900px) { .sb-teaser__grid { grid-template-columns: 1fr 1fr; gap: var(--k-10); } }

/* Bevestigings- en beheerpagina: minder lucht boven de titel */
.sb-done, .sb-manage { padding-top: clamp(40px, 6vw, 80px); }