/* =========================================================
   KOFFIETS — V3 "minimalistisch" (rustig, premium). Enkel de publieke site (body.k-site);
   het beheer (/admin) laadt dit bestand niet. Geladen NA site.css: de FLOW-basis
   (.btn, inputs, .sk*, .toast, ...) neemt binnen body.k-site deze look over.

   TOKENS (niets anders gebruiken)
     kleur    --k-bg #fff · --k-surface (warm off-white vlak) · --k-pink (enkel vlak achter productbeeld)
              --k-accent (primaire knop, actieve link, focus — spaarzaam) · --k-ink · --k-muted · --k-line
              --k-accent-hover · --k-success (enkel het "live"-bolletje)
     font     --k-font ("Inter Tight" 400/500/600, de enige familie)
     ruimte   --k-1..--k-15 (8px-raster: 8,16,24,32,40,48,56,64,72,80,96,120) · --k-section-y · --k-container · --k-gutter
     vorm     --k-r (16, beelden) · --k-r-sm (10, velden) · --k-r-pill (999, knoppen/chips) · --k-shadow-pop (enkel paneel/modal)
     motion   --k-ease · --k-dur (200ms, enkel subtiele fade)

   PRIMITIEVEN
     layout   .k-container  .k-section (+ --surface, --tight; twee witte secties na elkaar delen hun ruimte)  .k-stack (verticale flow, gap via --k-stack-gap)
              .k-divider (1px lijn)
     tekst    .k-h1 .k-h2 .k-h3  .k-lead  .k-eyebrow (klein, muted)  .k-small  .k-muted  .k-link (onderlijnde tekstlink)
     knoppen  .k-btn  .k-btn--primary (accent vol)  .k-btn--secondary (1px lijn op wit)  .k-btn--text (tekst + pijl)
              .k-btn--sm  .k-btn--full   (.k-btn zonder modifier = primary) · .is-busy = laadstaat
     chips    .k-chip (+ .is-active of aria-pressed="true"/aria-current/:checked-label)  .k-chips (rij)
     media    .k-card-media (beeldvlak op --k-surface; + --pink; img gecentreerd, aspect 4/5 standaard; --square/--wide)
              .k-card (kaart zonder rand/schaduw: .k-card-media + tekst eronder; __title __meta __price)
     data     .k-dl (definitielijst: <dl class="k-dl"><div><dt/><dd/></div></dl>)  .k-price
     form     .k-field  .k-label  .k-hint  .k-input  .k-select  .k-textarea  .k-field-error
              .k-choice (radio-/checkbox-kaart: <label class="k-choice"><input type=radio> <span class="k-choice__body">
                         <span class="k-choice__title"/> <span class="k-choice__meta"/></span></label>)
     status   .k-dot (klein groen bolletje, live)  .k-fade (subtiele fade-in, 200ms; geen bij reduced motion)

   Oude decoratieve helpers (.k-marquee .k-sticker .k-stamp .k-ride .k-swirl .k-wave-* .k-blob .k-squiggle .k-serif
   .k-display .k-tag) bestaan enkel nog als neutrale/lege fallback: niet meer gebruiken.
   ====================================================== */

:root {
    --k-bg: #FFFFFF;
    --k-surface: #FAF7F5;
    --k-pink: #F6D3D5;
    --k-accent: #B83265;
    --k-accent-hover: #9E2955;
    --k-ink: #171213;
    --k-muted: #6F6667;
    --k-line: #ECE6E4;
    --k-success: #2F9E5B;

    --k-font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

    --k-1: 8px;
    --k-2: 16px;
    --k-3: 24px;
    --k-4: 32px;
    --k-5: 40px;
    --k-6: 48px;
    --k-7: 56px;
    --k-8: 64px;
    --k-9: 72px;
    --k-10: 80px;
    --k-12: 96px;
    --k-15: 120px;
    --k-section-y: 72px;
    --k-container: 1200px;
    --k-gutter: 24px;
    --k-header-h: 72px;

    --k-r: 16px;
    --k-r-sm: 10px;
    --k-r-pill: 999px;
    --k-shadow-pop: 0 20px 60px rgba(23, 18, 19, .12);

    --k-ease: cubic-bezier(.2, .8, .2, 1);
    --k-dur: 200ms;

    /* Achterwaartse compatibiliteit (oude namen → nieuwe tokens). Niet gebruiken in nieuwe code. */
    --k-white: var(--k-bg);
    --k-paper: var(--k-bg);
    --k-cream: var(--k-surface);
    --k-pink-soft: var(--k-surface);
    --k-pink-2: var(--k-pink);
    --k-pink-deep: var(--k-pink);
    --k-line-pink: var(--k-line);
    --k-hot: var(--k-accent);
    --k-hot-2: var(--k-accent-hover);
    --k-ink-2: var(--k-ink);
    --k-font-body: var(--k-font);
    --k-font-display: var(--k-font);
    --k-font-serif: var(--k-font);
    --k-shadow-1: none;
    --k-shadow-2: none;
    --k-shadow-3: var(--k-shadow-pop);
    --k-bounce: var(--k-ease);
    --k-swirl: none;
    --k-swirl-pink: none;
    --k-swirl-soft: none;
    --k-fs-mega: clamp(40px, 5.6vw, 72px);
    --k-fs-xl: clamp(40px, 5.6vw, 72px);
    --k-fs-l: clamp(32px, 3.4vw, 40px);
    --k-fs-m: clamp(28px, 3vw, 36px);
    --k-fs-s: 22px;
    --k-wave-h: 0px;
}
@media (min-width: 900px) {
    :root { --k-section-y: 120px; }
}

/* =========================================================
   FLOW-basis → V3 (alleen publieke site)
   ====================================================== */
body.k-site {
    --font: var(--k-font);
    --accent: var(--k-accent);
    --accent-ink: #fff;
    --accent-hover: var(--k-accent-hover);
    --accent-press: var(--k-accent-hover);
    --accent-soft: var(--k-surface);
    --accent-soft-2: var(--k-pink);
    --accent-text: var(--k-accent);
    --bg: var(--k-bg);
    --bg-subtle: var(--k-surface);
    --surface: var(--k-bg);
    --text: var(--k-ink);
    --text-2: var(--k-ink);
    --text-3: var(--k-muted);
    --border: var(--k-line);
    --border-strong: #D9D0CE;
    --ring: 0 0 0 2px var(--k-bg), 0 0 0 4px var(--k-accent);
    --r-control: var(--k-r-sm);
    --r-card: var(--k-r);
    --r-media: var(--k-r);
    --e-1: none;
    --e-2: none;
    --e-3: var(--k-shadow-pop);
    --e-4: var(--k-shadow-pop);
    --scrim: rgba(23, 18, 19, .32);
    --container: var(--k-container);
    --gutter: var(--k-gutter);
    --header-h: var(--k-header-h);
    --fs-h1: clamp(40px, 5.6vw, 72px);
    --fs-h2: clamp(32px, 3.4vw, 40px);
    --track-display: -0.03em;
    --track-heading: -0.03em;
    --skeleton-base: #F3EEEC;
    --skeleton-media: #F1EBE8;
    --skeleton-icon: #DDD3D0;
    font-family: var(--k-font);
    font-size: 16px;
    line-height: 26px;
    font-feature-settings: normal;
    background: var(--k-bg);
    color: var(--k-ink);
    /* Mobiel: echte schermhoogte (adresbalk), notch/landscape-randen, nooit zijwaarts scrollen (clip laat sticky werken). */
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow-x: clip;
}
body.k-site a, body.k-site button, body.k-site label, body.k-site summary, body.k-site [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Naar een fout veld scrollen: onder de sticky header blijven */
body.k-site :is(input, select, textarea, fieldset, [data-co-slots], .k-field, .sb-block, .sb-alert, .co-alert) { scroll-margin-top: calc(var(--k-header-h) + 16px); }
body.k-site ::selection { background: var(--k-pink); color: var(--k-ink); }
body.k-site :focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; box-shadow: none; }
body.k-site a { text-underline-offset: 4px; }
body.k-site h1, body.k-site h2, body.k-site h3, body.k-site h4 { font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
body.k-site h3 { letter-spacing: -0.02em; }

body.k-site .btn {
    --btn-sh: none;
    min-height: 48px;
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
body.k-site .btn:hover { --btn-bd: var(--k-ink); --btn-sh: none; }
body.k-site .btn:active { transform: none; }
body.k-site .btn--primary, body.k-site .btn.add { --btn-bg: var(--k-accent); --btn-fg: #fff; --btn-bd: transparent; --btn-sh: none; }
body.k-site .btn--primary:hover, body.k-site .btn.add:hover { --btn-bg: var(--k-accent-hover); --btn-bd: transparent; }

/* Basis voor ruwe formuliervelden: in :where() (specificiteit 0) zodat .k-input, foutstaat en pagina-CSS altijd winnen. */
:where(body.k-site) :where(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), textarea, select) {
    background-color: var(--k-bg);
    border: 1px solid var(--k-line);
    box-shadow: none;
}
:where(body.k-site) :where(input, textarea, select):hover { border-color: #D9D0CE; }
:where(body.k-site) :where(input, textarea, select):focus { border-color: var(--k-ink); box-shadow: none; outline: none; }
:where(body.k-site) :where(input, textarea, select):focus-visible { outline: none; }
:where(body.k-site) :where(input, textarea, select)[aria-invalid="true"] { border-color: var(--k-accent); }
body.k-site input::placeholder, body.k-site textarea::placeholder { color: #9C9293; }
/* site.css (FLOW-basis) geeft alle inputs min-height/padding: niet voor radio's en checkboxes. */
body.k-site input[type="radio"], body.k-site input[type="checkbox"] { min-height: 0; padding: 0; width: auto; }
body.k-site input[type="radio"], body.k-site input[type="checkbox"] { accent-color: var(--k-accent); }
body.k-site label { font-weight: 500; }
body.k-site .tag, body.k-site .chip { background: var(--k-surface); color: var(--k-ink); box-shadow: none; }
body.k-site .toast { box-shadow: var(--k-shadow-pop); }

/* Afbeeldingen met width/height-attributen schalen proportioneel (specificiteit 0, pagina-CSS wint). */
:where(body.k-site img[height]) { height: auto; }

/* =========================================================
   Layout
   ====================================================== */
.k-container {
    width: 100%;
    max-width: calc(var(--k-container) + 2 * var(--k-gutter));
    margin-inline: auto;
    padding-inline: var(--k-gutter);
}
.k-section { padding-block: var(--k-section-y); }
.k-section--surface { background: var(--k-surface); }
.k-section--tight { padding-block: calc(var(--k-section-y) / 2); }
/* Twee witte secties na elkaar: geen dubbele ruimte (ook met een <link>/<script> van een partial ertussen). */
.k-section:not(.k-section--surface) + .k-section:not(.k-section--surface),
.k-section:not(.k-section--surface) + :is(link, script) + .k-section:not(.k-section--surface),
.k-section:not(.k-section--surface) + :is(link, script) + :is(link, script) + .k-section:not(.k-section--surface) { padding-top: 0; }
.k-stack { display: flex; flex-direction: column; gap: var(--k-stack-gap, var(--k-3)); }
.k-stack > * { margin: 0; }
.k-divider { height: 1px; margin: 0; border: 0; background: var(--k-line); }

/* =========================================================
   Typografie
   ====================================================== */
.k-h1, .k-h2, .k-h3 { margin: 0; color: var(--k-ink); font-family: var(--k-font); text-wrap: balance; }
.k-h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; }
.k-h2 { font-size: clamp(32px, 3.4vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; }
.k-h3 { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; }
.k-lead { margin: 0; max-width: 46ch; color: var(--k-muted); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; text-wrap: pretty; }
.k-eyebrow {
    display: block;
    margin: 0;
    color: var(--k-muted);
    font: 500 14px/20px var(--k-font);
    letter-spacing: 0;
}
.k-small { font-size: 14px; line-height: 22px; }
.k-muted { color: var(--k-muted); }
.k-link {
    color: var(--k-ink);
    text-decoration: underline;
    text-decoration-color: var(--k-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--k-dur) var(--k-ease);
}
.k-link:hover { text-decoration-color: currentColor; }

/* =========================================================
   Knoppen
   ====================================================== */
.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: var(--k-r-pill);
    background: var(--k-accent);
    color: #fff;
    font: 500 16px/1 var(--k-font);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.k-btn:hover { background: var(--k-accent-hover); }
.k-btn:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; box-shadow: none; }
.k-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--k-dur) var(--k-ease); }
.k-btn:hover svg:last-child:not(:first-child) { transform: translateX(2px); }
.k-btn--primary { background: var(--k-accent); color: #fff; }
.k-btn--secondary,
.k-btn--ghost,
.k-btn--white { background: var(--k-bg); color: var(--k-ink); border-color: var(--k-line); }
.k-btn--secondary:hover,
.k-btn--ghost:hover,
.k-btn--white:hover { background: var(--k-bg); border-color: var(--k-ink); }
.k-btn--pink { background: var(--k-pink); color: var(--k-ink); }
.k-btn--pink:hover { background: var(--k-pink); border-color: var(--k-ink); }
.k-btn--text {
    min-height: 44px;
    padding: 0;
    background: none;
    color: var(--k-ink);
    border: 0;
    border-radius: 0;
}
.k-btn--text:hover { background: none; color: var(--k-accent); }
.k-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.k-btn--lg { min-height: 48px; }
.k-btn--full { width: 100%; }
.k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.k-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.k-btn.is-busy > * { visibility: hidden; }
.k-btn.is-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: k-spin 700ms linear infinite;
}
.k-btn--secondary.is-busy::after, .k-btn--ghost.is-busy::after, .k-btn--white.is-busy::after, .k-btn--pink.is-busy::after, .k-btn--text.is-busy::after {
    border-color: var(--k-line);
    border-top-color: var(--k-ink);
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Chips
   ====================================================== */
.k-chips { display: flex; flex-wrap: wrap; gap: var(--k-1); margin: 0; padding: 0; list-style: none; }
.k-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-pill);
    background: var(--k-bg);
    color: var(--k-ink);
    font: 500 14px/1 var(--k-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.k-chip:hover { border-color: var(--k-ink); }
.k-chip.is-active,
.k-chip[aria-pressed="true"],
.k-chip[aria-current="page"],
.k-chip[aria-current="true"],
.k-chip:has(input:checked) { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.k-chip:has(input:focus-visible) { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.k-chip input { position: absolute; opacity: 0; pointer-events: none; }
.k-chip[disabled], .k-chip:has(input:disabled) { opacity: .4; cursor: not-allowed; }
/* Aanraakscherm: chips en kleine knoppen minstens 44px hoog */
@media (pointer: coarse), (max-width: 960px) {
    .k-chip { min-height: 44px; }
    .k-btn--sm { min-height: 44px; }
}

/* =========================================================
   Media + kaart (zonder rand/schaduw)
   ====================================================== */
.k-card-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--k-r);
    background: var(--k-surface);
}
.k-card-media--pink { background: var(--k-pink); }
.k-card-media--square { aspect-ratio: 1; }
.k-card-media--wide { aspect-ratio: 4 / 3; }
.k-card-media > img {
    width: 62%;
    height: 78%;
    object-fit: contain;
    transition: transform 400ms var(--k-ease);
}
.k-card-media--cover > img { width: 100%; height: 100%; object-fit: cover; }
.k-card { position: relative; display: flex; flex-direction: column; gap: var(--k-2); color: var(--k-ink); text-decoration: none; }
a.k-card:hover .k-card-media > img, .k-card:has(a:hover) .k-card-media > img { transform: scale(1.02); }
.k-card__body { display: grid; gap: 2px; }
.k-card__title { margin: 0; font: 500 17px/24px var(--k-font); letter-spacing: -0.015em; }
.k-card__meta { margin: 0; color: var(--k-muted); font-size: 14px; line-height: 22px; }
.k-card__price, .k-price { font: 500 16px/24px var(--k-font); font-variant-numeric: tabular-nums; color: var(--k-ink); }
.k-price small { color: var(--k-muted); font-size: 14px; font-weight: 400; }

/* =========================================================
   Definitielijst
   ====================================================== */
.k-dl { margin: 0; border-top: 1px solid var(--k-line); }
.k-dl > div {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr;
    gap: var(--k-2);
    padding-block: 14px;
    border-bottom: 1px solid var(--k-line);
}
.k-dl dt { color: var(--k-muted); font-size: 14px; line-height: 22px; }
.k-dl dd { margin: 0; font-size: 14px; line-height: 22px; }

/* =========================================================
   Formulieren
   ====================================================== */
.k-field { display: grid; gap: var(--k-1); }
.k-label { display: block; color: var(--k-ink); font: 500 14px/20px var(--k-font); }
.k-hint { margin: 0; color: var(--k-muted); font-size: 14px; line-height: 20px; }
body.k-site .k-input,
body.k-site .k-select,
body.k-site .k-textarea,
.k-input, .k-select, .k-textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-sm);
    background-color: var(--k-bg);
    color: var(--k-ink);
    font: 400 16px/22px var(--k-font);
    box-shadow: none;
    transition: border-color var(--k-dur) var(--k-ease);
    -webkit-appearance: none;
    appearance: none;
}
body.k-site .k-textarea, .k-textarea { min-height: 128px; resize: vertical; }
body.k-site .k-select, .k-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171213' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}
body.k-site .k-input:hover, body.k-site .k-select:hover, body.k-site .k-textarea:hover { border-color: #D9D0CE; }
body.k-site .k-input:focus, body.k-site .k-select:focus, body.k-site .k-textarea:focus { border-color: var(--k-ink); outline: none; }
body.k-site .k-input[aria-invalid="true"], body.k-site .k-select[aria-invalid="true"], body.k-site .k-textarea[aria-invalid="true"] { border-color: var(--k-accent); }
.k-input::-webkit-datetime-edit { font-family: var(--k-font); }
.k-field-error { margin: 0; color: var(--k-accent); font-size: 14px; line-height: 20px; }
.k-field-error:empty { display: none; }

/* Keuzekaart (radio/checkbox) */
.k-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    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);
}
.k-choice:hover { border-color: #D9D0CE; }
.k-choice:has(input:checked) { border-color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-ink); }
.k-choice:has(input:focus-visible) { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.k-choice:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.k-choice > input { flex-shrink: 0; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--k-ink); }
.k-choice__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.k-choice__title { font: 500 16px/24px var(--k-font); color: var(--k-ink); }
.k-choice__meta { color: var(--k-muted); font-size: 14px; line-height: 20px; font-weight: 400; }

/* =========================================================
   Status + beweging
   ====================================================== */
.k-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--k-success); }
.k-dot--off { background: #C9BFBD; }
.k-fade { animation: k-fade var(--k-dur) var(--k-ease) both; }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .k-fade, .k-btn svg, .k-card-media > img { animation: none !important; transition: none !important; }
}

/* =========================================================
   Oude decoratie — neutraal of leeg (niet meer gebruiken)
   ====================================================== */
.k-marquee, .k-sticker, .k-stamp, .k-ride, .k-bike { display: none !important; }
.k-swirl, .k-swirl--deep { background: none; }
.k-swirl::before { content: none; }
.k-wave-top, .k-wave-bottom { -webkit-mask: none; mask: none; margin-top: 0; margin-bottom: 0; }
.k-blob, .k-blob--2 { -webkit-mask: none; mask: none; }
.k-squiggle { text-decoration: none; }
.k-serif { font: inherit; color: inherit; }
.k-display { margin: 0; font-family: var(--k-font); font-weight: 500; font-size: clamp(32px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; color: var(--k-ink); }
.k-display--mega, .k-display--xl { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.k-display--m { font-size: clamp(28px, 3vw, 36px); }
.k-display--s { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.k-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--k-muted); font: 500 14px/20px var(--k-font); white-space: nowrap; }
.k-tag--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k-success); }
.k-section--white, .k-section--blush, .k-section--pink, .k-section--ink, .k-section--paper { background: none; }
.k-section--cream { background: var(--k-surface); }

/* Productfoto van het zakje: de lichte schaduwrand van de uitsnede smelt zo weg in het roze/off-white vlak. */
body.k-site img[src*="zak-roze"] { mix-blend-mode: multiply; }