/*
 * TCP Theme — components.css (generieke design-systeem-componenten, v1.71.0)
 *
 * Sinds v1.18.0 (R2) staan hier ook de drie patronen uit de ontwerppagina's:
 * de kop (.tcp-kop, overlay/split/kaal), het strookritme (.tcp-strook) en de
 * donkere verhaalband (.tcp-verhaal). Gedeeld, want de zes sjablonen erven
 * ze allemaal.
 *
 * ⚠ `.tcp-verhaal*` heeft sinds v1.26.0 (taak 74-0) GEEN PHP-uitgever meer in
 * dit theme: `TCP_Theme_Pagina::verhaal()` is verwijderd. De klassen blijven
 * hier staan omdat het PLAKBLOK ze zelf schrijft — [GEMETEN]
 * `contentblokken/pillar-honing.html` v5 r84-103, en op staging rendert
 * /honing/ die band. Weghalen zou de donkere band van de contentroute slopen.
 *
 * DS §5-componenten als herbruikbare klassen — F4/F5/F6 hangen hieraan:
 * productkaart (§5.2), kaart-grid + contentkaart (§5.3), USP-bar (§5.4),
 * donkere CTA-band (§5.5), kennisbank-teaser borderless (§5.6; de
 * featured-variant volgt in F4), pill (§5.7) en de knoppen (§5.14 —
 * per 1.8.0 verhuisd uit chrome.css; de schil consumeert ze via de
 * dependency tcp-theme-components → tcp-theme-chrome). Plus de generieke
 * lay-out-primitieven (sectie, split, stack, media-frame, sectiekop,
 * eyebrow, koppen, tekstlink) waarop de R2-templates bouwen.
 *
 * Tokens: uitsluitend var(--tcp-*) uit de Framework-emissie (config
 * v1_13_x) — GEEN hardcoded hex. Bewuste niet-token-literals (config
 * v1_13_0-kop): focus-ring rgba(242,167,27,.35) (§8.1), de §2-overlays
 * (rgba-gradients, in home.css), breakpoints, en componentmaten buiten de
 * §3-schaal. Hover- en focus-states zijn systeemtoevoegingen (§8.1/§8.2);
 * prefers-reduced-motion schakelt alle transities uit (§8.4).
 *
 * Enqueued site-breed via handle 'tcp-theme-components' (vóór chrome).
 */

/* -----------------------------------------------------------------------
 * Basistypografie en paginavlak (§3 / §2) — v1.8.3, taak #67b
 *
 * Tweede, onafhankelijke oorzaak van het Poppins-/systeemfont-defect:
 * geen enkele TCP-stylesheet zette font-family op body of op de lopende
 * tekst, waardoor Astra's systeemstack won (15 van 171 tekstelementen in
 * Work Sans). Deze basislaag zet de §3-stack: Work Sans voor lopende
 * tekst, Cormorant Garamond voor koppen — uit var(--tcp-*), geen
 * hardcoded namen.
 *
 * BEWUST GESCOPED OP .tcp-redesign: een globale body-regel zou de
 * niet-gemigreerde templates (pillar, subpillar, honingsoort-CPT,
 * kennisbank-artikel) van systeemstack naar Work Sans omzetten en
 * daarmee de F1-pariteit breken die mrW. op 2026-07-27 heeft afgetekend
 * (runbook §4b regel a). De componentklassen (.tcp-bodytekst, .tcp-h2,
 * …) zetten hun font-family zelf en werken dus overal.
 *
 * Het paginavlak (canvas) hoort per DS §2 op body. Gemeten 2026-07-28:
 * zonder deze regel valt body na het scopen van het kit-blok terug op
 * browser-wit in plaats van #FBF6EC (zichtbaar in de overscroll-zone en
 * onder de footer).
 * -------------------------------------------------------------------- */

body.tcp-redesign {
    background: var(--tcp-colors-canvas);
    font-family: var(--tcp-font-body);
    font-size: var(--tcp-size-body, 16px);
    font-weight: var(--tcp-weight-body, 400);
    line-height: var(--tcp-lh-body, 1.75);
    color: var(--tcp-colors-text-body);
}

/*
 * Kopbasis — v1.8.4: :where() i.p.v. de kale klasse-selector.
 *
 * De 1.8.3-versie stond op specificiteit 0,1,2 en versloeg daarmee ELKE
 * sectie-eigen kopklasse (0,1,0), inclusief de on-dark-koppen: koppen in
 * de donkere secties rendeerden ink-op-surface-dark en waren onzichtbaar
 * (mrW., staging 2026-07-29). Vóór 1.8.3 zette de kit-shim alle koppen op
 * grijs #7A7A7A, wat op donker toevallig leesbaar was — het scopen van de
 * shim legde deze regel bloot; de sectie-CSS zelf is nooit fout geweest.
 *
 * :where() draagt specificiteit 0, dus deze basis staat op 0,0,1: elke
 * componentklasse wint hem en de sectiekleuren gelden weer. Bewust GEEN
 * zwaardere selector en geen forced override op de sectie-CSS — dat zou
 * het symptoom hier oplossen en het probleem doorschuiven naar elk
 * template in F4-F6.
 *
 * De kopschaal (§3) hoort hier ook: zonder font-size/line-height vielen
 * kale h1-h4 uit de framework-blocks terug op de browserdefault in plaats
 * van op de clamp()-schaal. h4 pakt de eerstvolgende maat onder h3
 * (card-title, 22px/1.25).
 *
 * ⛔ v1.70.11 (Design #86) — `html` ERVOOR, en dat is het hele punt: (0,0,2).
 * Astra zet in zijn INLINE blok `h2 { font-weight: 600; line-height: 1.3em }`
 * en onder 545px `h2 { font-size: 25px }`, alle op (0,0,1). Op (0,0,1) won
 * deze basis alleen doordat het theme later in de pagina staat. Op live
 * voegt LiteSpeed de stylesheets samen tot één bestand dat VOOR dat inline
 * blok staat, en `critical.css` staat er als eerste inline blok ook voor:
 * daar won Astra — een door de browser verdikte 500, regelhoogte 1,3 en op
 * 375 25px (gemeten door Framework op live, 2026-10-06 14:28).
 * Met één element erbij wint de basis van Astra in elke volgorde, en blijft
 * zij ONDER elke klasse (0,1,0), zodat de reden van 1.8.4 hierboven overeind
 * blijft. ⚠ NIET de `:where()` weghalen: `body.tcp-redesign h2` is (0,1,1)
 * en verslaat dan weer elke sectie-eigen kopklasse — nagebootst op staging
 * 1.70.10: 16 van de 34 koppen op de homepage veranderen, de hero-H1 wordt
 * donker op donker. `tools/test-86.php` groep G eist beide grenzen.
 */
html :where(body.tcp-redesign) h1,
html :where(body.tcp-redesign) h2,
html :where(body.tcp-redesign) h3,
html :where(body.tcp-redesign) h4 {
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    color: var(--tcp-colors-text);
}

html :where(body.tcp-redesign) h1 {
    font-size: var(--tcp-size-display, clamp(34px, 5vw, 60px));
    line-height: var(--tcp-lh-display, 1.05);
}

html :where(body.tcp-redesign) h2 {
    font-size: var(--tcp-size-h2, clamp(27px, 3.2vw, 32px));
    line-height: var(--tcp-lh-h2, 1.15);
}

/* v1.71.0 (TCP Theme #321): de productnaam in de productkaart is een <div>
 * en geen <h2> meer (functions.php). Wat de h2-basis hierboven hem gaf,
 * krijgt hij hier op de klasse, op hetzelfde gewicht (0,0,2): onder elke
 * klasseregel, dus Astra's en onze kaartregels blijven winnen waar ze dat
 * deden. Zonder deze regel werd de naam op de homepage Work Sans 400 in de
 * linkkleur (voorproef op staging 1.70.13). */
html body:where(.tcp-redesign) :where(.woocommerce-loop-product__title) {
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    color: var(--tcp-colors-text);
    font-size: var(--tcp-size-h2, clamp(27px, 3.2vw, 32px));
    line-height: var(--tcp-lh-h2, 1.15);
}

html :where(body.tcp-redesign) h3 {
    font-size: var(--tcp-size-h3, 26px);
    line-height: var(--tcp-lh-h3, 1.2);
}

html :where(body.tcp-redesign) h4 {
    font-size: var(--tcp-size-card-title, 22px);
    line-height: var(--tcp-lh-card-title, 1.25);
}

/* -----------------------------------------------------------------------
 * Sectie-primitief (§5.15: sectie-container en full-bleed)
 *
 * De sectie draagt de achtergrond en loopt van rand tot rand (width 100%,
 * nooit een vaste width); de .tcp-container erbinnen centreert de inhoud
 * op max-width 1440 met section-x-padding — hetzelfde patroon als de
 * schil. Achtergronden horen op de sectie, nooit op de container.
 * -------------------------------------------------------------------- */

.tcp-sec {
    width: 100%;
    padding-block: var(--tcp-spacing-section-y, 72px);
    background: var(--tcp-colors-canvas);
}

.tcp-sec--surface { background: var(--tcp-colors-surface); }
.tcp-sec--canvas  { background: var(--tcp-colors-canvas); }
.tcp-sec--warm    { background: var(--tcp-colors-surface-warm); }

.tcp-sec--dark {
    background: var(--tcp-colors-surface-dark);
    color: var(--tcp-colors-on-dark-body);
}

.tcp-sec--lijnen {
    border-top: 1px solid var(--tcp-colors-border);
    border-bottom: 1px solid var(--tcp-colors-border);
}

.tcp-sec--lijn-boven {
    border-top: 1px solid var(--tcp-colors-border);
}

/* -----------------------------------------------------------------------
 * Lay-out-primitieven: split, stack, sectiekop, grid (§5.3), media-frame
 *
 * TWEE SPLIT-GAPS, TWEE TOKENS (v1.19.0). T/m v1.18.0 stond overal dezelfde
 * tokennaam met twee verschillende fallbacks (64 en 56). Dat las als
 * slordigheid maar was het niet: de ontwerppagina's kennen écht twee maten.
 * Gemeten over alle zes de sjablonen:
 *
 *   1.1fr 1fr / 1.05fr 1fr  (de split-kop)      → gap 64 op ÁLLE pagina's
 *   1fr 1fr                 (tekstsplit, verhaal) → gap 56 op Pillar Honing,
 *                              Honingsoort en Honingsnoep; 64 op Pillar
 *                              Bijenproducten en Verzorging
 *
 * Met één tokennaam is dat niet uit te drukken. Erger: het Framework emit
 * `--tcp-spacing-split-gap: 64px` (design-token, zichtbaar in de staging-head),
 * dus béide fallbacks waren dode code en álle vier de plekken renderden 64 —
 * ook de twee die 56 bedoelden. Vandaar twee namen:
 *
 *   --tcp-spacing-split-gap      64 — split-kop en de generieke .tcp-split;
 *                                     wordt vandaag door de config geëmit.
 *   --tcp-spacing-split-gap-sm   56 — verhaalband en de redactionele
 *                                     kolomgap; nog niet geëmit, dus de
 *                                     fallback geldt en de gap landt op 56.
 *
 * De `-sm`-suffix volgt de bestaande conventie (grid-gap/grid-gap-sm,
 * section-y/section-y-sm, card-pad/card-pad-sm). Zodra de config
 * `spacing.split_gap_sm` opneemt, neemt het token het over — het theme
 * declareert zelf geen tokens.
 * -------------------------------------------------------------------- */

.tcp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tcp-spacing-split-gap, 64px);
    align-items: start;
}

.tcp-split--center { align-items: center; }

/*
 * GO 4c punt 2 — de kolomafstand van de uitlegstrook.
 *
 * `.tcp-split` leest `--tcp-spacing-split-gap` (64, geëmit door de config).
 * Het ontwerp zet de vier uitlegblokken op 56 — gemeten: `1fr 1fr` met
 * gap 56 op `Pillar - Honing.dc.html`. Dat is precies het onderscheid
 * waarvoor `--tcp-spacing-split-gap-sm` sinds v1.19.0 bestaat: 64 voor de
 * split-kop, 56 voor de `1fr 1fr`-splits.
 *
 * Alleen op de uitlegstrook. De donkere band staat al op `-sm` en blijft
 * ongemoeid; de generieke `.tcp-split` elders houdt 64.
 */
.tcp-strook--blok-uitleg .tcp-split {
    column-gap: var(--tcp-spacing-split-gap-sm, 56px);
}

.tcp-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tcp-spacing-stack-lg, 18px);
}

.tcp-stack--klein { gap: var(--tcp-spacing-stack-sm, 8px); }

.tcp-sectiekop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 32px;
}

.tcp-grid {
    display: grid;
    gap: var(--tcp-spacing-grid-gap, 24px);
}

.tcp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tcp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tcp-spacing-grid-gap-sm, 20px);
}

.tcp-media {
    position: relative;
    overflow: hidden;
    background: var(--tcp-colors-border); /* placeholder-vlak (token) */
}

.tcp-media--radius    { border-radius: var(--tcp-radius-sm); }
.tcp-media--radius-md { border-radius: var(--tcp-radius-md); }

.tcp-media__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------------------
 * Typografische componenten: eyebrow, koppen, bodytekst, quote, tekstlink
 * -------------------------------------------------------------------- */

.tcp-eyebrow {
    font-family: var(--tcp-font-body);
    font-size: var(--tcp-size-eyebrow, 13px);
    font-weight: var(--tcp-weight-semibold, 600);
    letter-spacing: var(--tcp-ls-eyebrow, .2em);
    text-transform: uppercase;
    color: var(--tcp-colors-accent-dark);
}

.tcp-eyebrow--accent { color: var(--tcp-colors-accent-light); }

.tcp-eyebrow--sm {
    font-size: var(--tcp-size-eyebrow-sm, 12px);
    letter-spacing: var(--tcp-ls-eyebrow-sm, .12em);
}

.tcp-h2,
.tcp-h2-lg {
    margin: 0;
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    color: var(--tcp-colors-text);
}

.tcp-h2 {
    font-size: var(--tcp-size-h2);
    line-height: var(--tcp-lh-h2, 1.15);
}

.tcp-h2-lg {
    font-size: var(--tcp-size-h2-lg);
    line-height: var(--tcp-lh-h2-lg, 1.1);
}

.tcp-op-dark { color: var(--tcp-colors-on-dark); }

.tcp-bodytekst {
    font-size: var(--tcp-size-body, 16px);
    line-height: var(--tcp-lh-body, 1.75);
    color: var(--tcp-colors-text-body);
}

.tcp-bodytekst p { margin: 0; }
p.tcp-bodytekst  { margin: 0; }

.tcp-bodytekst--on-dark { color: var(--tcp-colors-on-dark-muted); }

.tcp-quote {
    margin: 0;
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    font-size: var(--tcp-size-quote, 26px);
    line-height: var(--tcp-lh-quote, 1.4);
    font-style: italic;
    color: var(--tcp-colors-accent-dark);
}

.tcp-link {
    font-size: var(--tcp-size-small, 14px);
    font-weight: var(--tcp-weight-semibold, 600);
    color: var(--tcp-colors-accent-dark);
    text-decoration: none;
    transition: color .15s;
}

.tcp-link:hover { color: var(--tcp-colors-link-hover); }

.tcp-link--accent { color: var(--tcp-colors-accent-light); }
.tcp-link--accent:hover { color: var(--tcp-colors-on-dark); }

.tcp-link--upper {
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Sectie-intro (v1.11.0) — introregel onder een sectiekop. Generiek:
   F4-F6 hergebruiken hem. Max-width houdt de regellengte leesbaar (§4
   measure-lg). */
.tcp-sec__intro {
    margin: -16px 0 32px;
    max-width: var(--tcp-spacing-measure-lg, 720px);
    font-size: var(--tcp-size-lead, 17px);
    line-height: var(--tcp-lh-lead, 1.7);
    color: var(--tcp-colors-text-body);
}

.tcp-sec__intro--on-dark { color: var(--tcp-colors-on-dark-muted); }

/* -----------------------------------------------------------------------
 * §5.2 Productkaart
 * -------------------------------------------------------------------- */

.tcp-productcard {
    background: var(--tcp-colors-surface);
    border: 1px solid var(--tcp-colors-border);
    border-radius: var(--tcp-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s; /* §8.2: hover-state toegevoegd */
}

.tcp-productcard:hover { border-color: var(--tcp-colors-accent); }

.tcp-productcard__media {
    height: 200px;
}

.tcp-productcard__body {
    padding: var(--tcp-spacing-card-pad-sm, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--tcp-spacing-stack-sm, 8px);
}

.tcp-productcard__titel {
    font-size: var(--tcp-size-small, 14px);
    font-weight: var(--tcp-weight-semibold, 600);
    color: var(--tcp-colors-text);
}

.tcp-productcard__meta {
    font-size: var(--tcp-size-xs, 13px);
    color: var(--tcp-colors-text-body); /* §8.5: <16px → text-body */
}

.tcp-productcard__prijsregel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.tcp-productcard__prijs {
    font-size: var(--tcp-size-small, 14px);
    font-weight: var(--tcp-weight-semibold, 600);
    color: var(--tcp-colors-text);
}

/* -----------------------------------------------------------------------
 * §5.3 Contentkaart (kaart-grid-kaart)
 * -------------------------------------------------------------------- */

.tcp-contentcard {
    background: var(--tcp-colors-surface);
    border: 1px solid var(--tcp-colors-border);
    border-radius: var(--tcp-radius-lg);
    padding: var(--tcp-spacing-card-pad, 26px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: var(--tcp-colors-text);
    transition: border-color .15s; /* §8.2 */
}

.tcp-contentcard:hover { border-color: var(--tcp-colors-accent); }

.tcp-contentcard__titel {
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-semibold, 600);
    font-size: var(--tcp-size-card-title, 22px);
    line-height: var(--tcp-lh-card-title, 1.25);
    color: var(--tcp-colors-text);
}

.tcp-contentcard__tekst {
    font-size: var(--tcp-size-small, 14px);
    line-height: var(--tcp-lh-small, 1.6);
    color: var(--tcp-colors-text-body); /* §8.5 */
}

.tcp-contentcard--dark {
    background: var(--tcp-colors-text);
    border-color: var(--tcp-colors-text);
}

.tcp-contentcard--dark .tcp-contentcard__titel { color: var(--tcp-colors-accent-light); }
.tcp-contentcard--dark .tcp-contentcard__tekst { color: var(--tcp-colors-on-dark-muted); }
.tcp-contentcard--dark:hover { border-color: var(--tcp-colors-accent); }

/* -----------------------------------------------------------------------
 * §5.4 USP-/trust-bar
 * -------------------------------------------------------------------- */

.tcp-usp {
    width: 100%; /* §5.15 full-bleed */
    background: var(--tcp-colors-canvas);
    border-top: 1px solid var(--tcp-colors-border);
    border-bottom: 1px solid var(--tcp-colors-border);
    padding-block: 44px;
}

.tcp-usp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.tcp-usp__tegel {
    padding-inline: 34px;
    border-right: 1px solid var(--tcp-colors-border);
    display: flex;
    flex-direction: column;
    gap: var(--tcp-spacing-stack-sm, 8px);
}

.tcp-usp__tegel:first-child { padding-inline-start: 0; }
.tcp-usp__tegel:last-child  { border-right: 0; padding-inline-end: 0; }

.tcp-usp__kop {
    font-size: var(--tcp-size-eyebrow, 13px);
    font-weight: var(--tcp-weight-semibold, 600);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tcp-colors-accent-dark);
}

.tcp-usp__tekst {
    margin: 0;
    font-size: var(--tcp-size-small, 14px);
    line-height: var(--tcp-lh-small, 1.6);
    color: var(--tcp-colors-text-body);
}

/* -----------------------------------------------------------------------
 * §5.5 Donkere CTA-band
 * -------------------------------------------------------------------- */

.tcp-band {
    width: 100%; /* §5.15 full-bleed */
    background: var(--tcp-colors-surface-dark);
    padding-block: var(--tcp-spacing-section-y, 72px);
}

.tcp-band--center .tcp-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tcp-spacing-stack-lg, 18px);
    text-align: center;
}

.tcp-band__kop {
    margin: 0;
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    font-size: var(--tcp-size-h2-lg);
    line-height: var(--tcp-lh-h2-lg, 1.1);
    color: var(--tcp-colors-on-dark);
    max-width: 640px;
}

.tcp-band__tekst {
    margin: 0;
    font-size: var(--tcp-size-body, 16px);
    line-height: var(--tcp-lh-body, 1.75);
    color: var(--tcp-colors-on-dark-muted);
    max-width: 520px;
}

/* -----------------------------------------------------------------------
 * §5.6 Kennisbank-teaser (borderless; featured-variant volgt in F4)
 * -------------------------------------------------------------------- */

.tcp-teaser {
    display: flex;
    flex-direction: column;
    gap: var(--tcp-spacing-stack-md, 12px);
}

.tcp-teaser__media { height: 180px; }

.tcp-teaser__titel {
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-semibold, 600);
    font-size: var(--tcp-size-card-title, 22px);
    line-height: var(--tcp-lh-card-title, 1.25);
    color: var(--tcp-colors-text);
}

.tcp-teaser__tekst {
    font-size: var(--tcp-size-small, 14px);
    line-height: var(--tcp-lh-small, 1.6);
    color: var(--tcp-colors-text-body); /* §8.5 */
}

/* -----------------------------------------------------------------------
 * §5.7 Pill / tag
 * -------------------------------------------------------------------- */

.tcp-pillrij {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tcp-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tcp-colors-border);
    background: var(--tcp-colors-canvas);
    color: var(--tcp-colors-text);
    font-size: var(--tcp-size-small, 14px);
    font-weight: 500;
    padding: 8px 15px;
    border-radius: var(--tcp-radius-pill);
    text-decoration: none;
    transition: border-color .15s, color .15s; /* §8.2 */
}

/* De hover zet zelf zijn tekstkleur (1.70.5, T22): een pil is een `<a>`, en
   zonder eigen kleur erft hij Astra's `a:hover` (`link-hover` sinds T9). */
.tcp-pill:hover {
    border-color: var(--tcp-colors-accent);
    color: var(--tcp-colors-text);
}

.tcp-pill--sm { padding: 6px 12px; font-size: var(--tcp-size-xs, 13px); }
.tcp-pill--lg { padding: 10px 18px; }

.tcp-pill.is-active {
    background: var(--tcp-colors-text);
    color: var(--tcp-colors-accent-light);
    font-weight: var(--tcp-weight-semibold, 600);
    border-color: var(--tcp-colors-text);
}

.tcp-pill.is-active:hover {
    color: var(--tcp-colors-accent-light);
}

/* -----------------------------------------------------------------------
 * DE COMPACTE KOPBAND VAN DE WINKELPAGINA'S (1.70.5, Design #86 T23)
 *
 * De compacte variant van de kopband van /shop/ (`.tcp-shop-intro`, shop.css):
 * zelfde ondergrond, eyebrow "Online shop", de `h1`, en de categoriebeschrijving
 * als die bestaat. Geen zoekveld, filter of tegels. Staat op de categorie- en
 * tagarchieven en op de pagina's buiten de redesign-stijl (winkelwagen,
 * afrekenen, mijn account, tracking, verlanglijst); welke, bepaalt
 * `tcp_theme_shopkop_gegevens()` in functions.php.
 *
 * HIER en niet in shop.css: die sheet laadt alleen op de winkelviews, en de
 * helft van deze pagina's is dat niet. Dit bestand laadt overal.
 *
 * MAAT [BRON: BeeffetOps/design/CONTEXT.md §A2.1 en §A3]: de `h1` is de klem
 * `clamp(34px, 5vw, 56px)` — 56 is de systeemwaarde voor een nieuw
 * templatetype; verticaal 40px (compact).
 * KLEUR — DE BAND IS LICHT SINDS 1.70.8 [BRON: besluit Design 2026-10-05 15:38
 * en 15:57, afbakening mrW. 15:52; contrasten door Design berekend]: vlak
 * `surface`, eyebrow `accent-dark` 8,63 · `h1` `text` 17,01 · beschrijving
 * `text-body` 11,01 · een link in de beschrijving `accent-dark`, hover
 * `link-hover`, onderstreept. T/m 1.70.7 was hij donker (`surface-dark` met
 * `accent-light` / `on-dark` / `on-dark-body`).
 * ⚠ /shop/ ZELF BLIJFT DONKER: `.tcp-shop-intro` (shop.css) is een ander blok
 * en is niet aangeraakt. Er zijn dus bewust twee koppenvormen (besluit mrW.).
 * ⚠ GEEN ELEMENT IN DE BAND ERFT NOG EEN ROL VOOR OP DONKER: de wortel draagt
 * `text-body`. Komt er een element bij, geef het een rol voor op licht.
 * RAND: de band sluit aan op het kruimelpad, dat op hetzelfde vlak staat. Het
 * geheel heeft ÉÉN rand, onderaan de band; de rand van het kruimelpad vervalt
 * waar de band er direct op volgt (`:has(+ .tcp-shopkop)`; 0,3,0 tegen de
 * regel in chrome.css op 0,1,0).
 * FOCUS: de band staat NIET meer in de lijst donkere vlakken verderop; een
 * link in de band krijgt de gewone ring (`accent`, T11).
 * De band staat BUITEN `.site-content` (hook `astra_content_before`), dus de
 * kit-regels van style.css raken de kop niet.
 * -------------------------------------------------------------------- */

.tcp-shopkop {
    padding-block: 40px;
    background: var(--tcp-colors-surface);
    color: var(--tcp-colors-text-body);
    border-bottom: 1px solid var(--tcp-colors-border);
}

.tcp-breadcrumb:has(+ .tcp-shopkop) {
    border-bottom: 0;
}

.tcp-shopkop__binnen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tcp-shopkop__eyebrow {
    font-family: var(--tcp-font-body);
    font-weight: 600;
    font-size: var(--tcp-size-eyebrow-sm, 12px);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tcp-colors-accent-dark);
}

.tcp-shopkop .tcp-shopkop__titel {
    margin: 0;
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--tcp-colors-text);
}

.tcp-shopkop__tekst {
    /* 30rem sinds 1.70.9, was 60ch [BRON: besluit Design 2026-10-05 21:20; §A2:
       lopende tekst maximaal ongeveer 65 tekens per regel]. `ch` rekent met de
       breedte van het cijfer 0 en gaf in Work Sans een blok van 597px met 79
       tekens op een regel [BRON: dossier #86, Framework 21:15]; 30rem is 480px. */
    max-width: 30rem;
    font-family: var(--tcp-font-body);
    font-size: var(--tcp-size-body, 16px);
    line-height: var(--tcp-lh-lead, 1.7);
    color: var(--tcp-colors-text-body);
}

.tcp-shopkop__tekst p { margin: 0; }
.tcp-shopkop__tekst p + p { margin-top: 12px; }

.tcp-shopkop__tekst a {
    color: var(--tcp-colors-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tcp-shopkop__tekst a:hover {
    color: var(--tcp-colors-link-hover);
}

/* -----------------------------------------------------------------------
 * §5.14 Knoppen — 7 varianten (per 1.8.0 verhuisd uit chrome.css)
 * -------------------------------------------------------------------- */

/* ⛔⛔ DE KLEURREGELS VAN DE KNOPPEN (1.68.0, kleurronde Design #86).
   Tot 1.67.1 wisselden de knoppen tussen "accent als TEKST op een donker
   vlak" en "donkere tekst op een ACCENTvlak". Met terracotta haalde dat net
   geen AA (3,92); met olijf valt het weg (2,43). Drie regels, overal gelijk:
     1. tekst OP een accentvlak        → `on-accent`              (7,00)
     2. accent als tekst op DONKER     → `accent-light`           (8,77)
     3. hover van een accentvlak-knop  → `accent-hover` + `on-accent` (11,99)
   ⛔ SINDS 1.69.0 IS ELKE PRIMAIRE KNOP IN RUST EEN ACCENTVLAK (§5.4 van de
   kleurronde; besluit Design 2026-10-03 13:47). In 1.68.0 hielden `primary`,
   `xl` en `header` een donker vlak met `accent-light` en werden zij bij hover
   olijf — precies andersom dan `accent` en de koopknoppen. Twee knopvormen
   voor dezelfde rol is geen huisstijl; dat was een keuze van die bouw en zij
   is afgewezen. Regel 2 geldt nog voor wat GEEN knopvlak is (eyebrows, links,
   de actieve pil) en voor de hover van de secundaire knop.
   ⚠ `on-accent` en `accent-hover` dragen een hex-terugval: zij komen pas met
   config `v1_13_36` (tak 2). `accent-light` wordt al geëmit en draagt er geen. */
.tcp-btn-primary,
.tcp-btn-accent,
.tcp-btn-xl,
.tcp-btn-header,
.tcp-btn-secondary,
.tcp-btn-secondary-dark,
.tcp-btn-micro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--tcp-radius-pill);
    font-family: var(--tcp-font-body);
    font-weight: var(--tcp-weight-semibold, 600);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    box-sizing: border-box;
}

.tcp-btn-primary { /* P1 */
    background: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
    font-size: var(--tcp-size-body-sm);
    padding: 14px 28px;
}

.tcp-btn-primary:hover {
    background: var(--tcp-colors-accent-hover, #2C3618);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

.tcp-btn-accent { /* P2 */
    background: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
    font-size: var(--tcp-size-body-sm);
    padding: 14px 28px;
}

.tcp-btn-accent:hover {
    background: var(--tcp-colors-accent-hover, #2C3618);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

.tcp-btn-xl { /* P3 */
    background: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
    font-size: var(--tcp-size-body);
    padding: 15px;
    width: 100%;
}

.tcp-btn-xl:hover {
    background: var(--tcp-colors-accent-hover, #2C3618);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

.tcp-btn-header { /* P4 */
    background: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
    font-size: var(--tcp-size-small);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 26px;
}

.tcp-btn-header:hover {
    background: var(--tcp-colors-accent-hover, #2C3618);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

.tcp-btn-secondary { /* S1 */
    background: none;
    border: 1px solid var(--tcp-colors-text);
    color: var(--tcp-colors-text);
    font-size: var(--tcp-size-body-sm);
    padding: 14px 28px;
}

.tcp-btn-secondary:hover {
    background: var(--tcp-colors-text);
    color: var(--tcp-colors-accent-light);
}

.tcp-btn-secondary-dark { /* S2 */
    background: none;
    border: 1px solid var(--tcp-colors-on-dark-muted);
    color: var(--tcp-colors-on-dark);
    font-size: var(--tcp-size-body-sm);
    padding: 14px 28px;
}

.tcp-btn-secondary-dark:hover {
    background: var(--tcp-colors-on-dark);
    color: var(--tcp-colors-text);
}

.tcp-btn-micro { /* M1 */
    background: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
    font-size: var(--tcp-size-xs);
    padding: 7px 13px;
    min-height: 0;
}

.tcp-btn-micro:hover {
    background: var(--tcp-colors-accent-hover, #2C3618);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

/* -----------------------------------------------------------------------
 * Focus-states (§8.1) + reduced motion (§8.4)
 * -------------------------------------------------------------------- */

/* ÉÉN FOCUSVORM VOOR DE HELE SITE (1.70.0, Design #86 T11/T12).
 *
 * De vorm is die van het Framework: `outline: 2px solid` met
 * `outline-offset: 2px`. De gloed in oud goud
 * (`box-shadow: 0 0 0 3px rgba(242,167,27,.35)`) is vervallen in components.css,
 * chrome.css, kennisbank.css en home.css.
 *
 * DE KLEUR komt uit één eigenschap, `--tcp-focus`, en die erft:
 *   - op licht  `accent`        (6,47 op canvas — BRON: GO Design 2026-10-03 20:01)
 *   - op donker `accent-light`  (6,96 op surface-dark — zelfde bron)
 * Een donker vlak zet de eigenschap op zichzelf; alles erbinnen erft hem. De
 * ring ligt BUITEN het element, dus de kleur volgt het vlak eromheen en niet
 * het element zelf: een donkere kaart op een lichte sectie krijgt `accent`.
 *
 * ⚠ IN DE LIJST STAAN ALLEEN VLAKKEN DIE ZELF GEEN RING DRAGEN. Een donkere kaart
 * die zelf de `<a>` is (`.tcp-contentcard--dark`, `.home-signature__feat`) tekent
 * haar ring op het vlak EROMHEEN en moet dus de kleur van dat vlak erven;
 * gemeten met de kaart in de lijst: `accent-light` op canvas = 1,79. Hetzelfde
 * geldt sinds 1.70.2 voor het donkere staartblok van het entry-grid: de ring
 * ligt daar om de KAART (zie hieronder), dus op het vlak eromheen.
 *
 * ⚠ Komt er een donker vlak bij, dan hoort het in de lijst hieronder. Vergeten
 * geeft `accent` op donker (2,43 — BRON: theme-DECISIONS T9), dus bijna
 * onzichtbaar. `tools/test-86.php` (groep F) houdt de lijst naast de vlakken
 * die vandaag een donkere achtergrond dragen.
 *
 * DE BASISREGEL dekt elk focusbaar element dat geen eigen regel heeft (T12: een
 * link zonder klasse), SITEBREED — ook buiten de redesign-stijl, want
 * /mijn-account/ en /winkelwagen/ dragen `tcp-redesign` niet en hadden daar
 * `outline: 0` zonder vervanging [GEMETEN 2026-10-03 op staging: Astra's
 * `.button:focus` en `button:focus`, main.min.css 4.13.12]. De regel staat op
 * 0,2,1: boven Astra's `a:focus-visible` (0,1,1), `.button:focus` (0,2,0) en
 * `button:focus` (0,1,1), en onder elke componentregel die de ring bewust
 * verplaatst.
 */
:root {
    --tcp-focus: var(--tcp-colors-accent);
}

.tcp-sec--dark,
.tcp-band,
.tcp-verhaal,
.tcp-kop--overlay,
.tcp-topbar,
.tcp-mega__promo,
.tcp-shop-intro,
.tcp-shop-paneel,
.tcp-shop-verzamel,
.home-hero,
.home-smaken,
.home-glogg__kaart,
.tcpf-block--cta-band {
    --tcp-focus: var(--tcp-colors-accent-light);
}

body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--tcp-focus, var(--tcp-colors-accent));
    outline-offset: 2px;
}

/* ⚠ INVOERVELDEN vragen een zwaardere regel. Astra zet de ring daar op drie
   plaatsen uit [GEMETEN 2026-10-03 op staging, Astra 4.13.12]:
     `input[type="text"]:focus`                              0,2,1  none
     `.woocommerce-js input[type="text"]:focus`              0,3,1  unset
     `.woocommerce-js form .form-row input.input-text`       0,3,2  0
   Met alleen de basisregel hadden de vijf zoekvelden in het filterpaneel van
   /shop/honing/ en de velden op /mijn-account/ geen ring. De herhaalde
   pseudo-klasse is geldige CSS en tilt deze regel naar 0,3,3 zonder
   `!important` en zonder een view-klasse die op de volgende pagina ontbreekt. */
html body :is(input, select, textarea):focus-visible:focus-visible:focus-visible {
    outline: 2px solid var(--tcp-focus, var(--tcp-colors-accent));
    outline-offset: 2px;
}

/* ⚠ WOOCOMMERCE-VELDEN EN DE PLUS/MIN-KNOPPEN (1.70.4, Design #86 T18). Op het
   gevulde mandje hadden vier elementen geen ring [BRON: K023, Code-sessie TCP
   Framework 2026-10-04 10:04, echte Tab]. Welke regels de basis- en veldregel
   hierboven verslaan [GEMETEN in reference/astra 4.13.12]:
     `.woocommerce-js .quantity .minus, … .plus { outline: 0 }`              0,3,0
        (class-astra-woocommerce.php r2793-2802, inline; GEEN focusregel —
        de knop heeft nooit een outline, dus ook niet bij focus)
     `.woocommerce-js .quantity input[type=number]:focus { outline: 0 }`    0,4,1
     `.woocommerce-cart table.cart td.actions .coupon .input-text
        { outline: 0 }`                                                     0,4,2
        (beide woocommerce-grid.min.css)
   Eén sitebrede regel, niet per pagina: hij volgt het ELEMENT (elk
   WooCommerce-tekstveld, het aantalveld, de plus/min-knop), dus hij geldt ook op
   afrekenen en op de productpagina. 0,6,2 — de herhaalde pseudo-klasse tilt hem
   boven 0,4,2 zonder `!important`.
   ⚠ Bewust NIET breder (`a`, `button`): een zwaardere algemene regel zou de
   plaatsen overstemmen waar de ring met opzet verplaatst is (zoekbalk, de kaart,
   de oorsprongkaart). */
body.woocommerce-js :is(input.input-text, input.qty, .quantity a.minus, .quantity a.plus, .woocommerce-info a, .woocommerce-message a, .woocommerce-error a):focus-visible:focus-visible:focus-visible {
    outline: 2px solid var(--tcp-focus, var(--tcp-colors-accent));
    outline-offset: 2px;
}

/* ⚠ DE LINKS IN EEN WOOCOMMERCE-MELDING (1.70.6, T25) staan sinds deze bouw in
   de regel hierboven. Op /afrekenen/ droeg "Klik hier om je code in te vullen"
   (`a.showcoupon` in `.woocommerce-info`) een stippelrand van 1px [BRON: K025,
   Framework 2026-10-04 11:23, echte Tab]. Oorzaak [GEMETEN in reference/astra
   4.13.12, class-astra-dynamic-css.php r963]: Astra's toegankelijkheidslijst
   bevat `.woocommerce .woocommerce-info a:focus-visible` (0,3,1) en zet daar
   `outline-style` en `outline-width: thin`; dat wint van de basisregel (0,2,1).

   DE LANDKEUZE (Select2) krijgt de ring op de HOUDER en niet op het veld zelf.
   Astra zet `outline-style: none` op
   `body #content .woocommerce form .form-row .select2-container--default
    .select2-selection--single:focus` — met een ID in de selector (1,5,2); dat is
   zonder eigen ID of `!important` niet te overstemmen. De houder
   (`.select2-container`) krijgt van Select2 de klasse `--focus` zolang het veld
   focus heeft, en geen regel van Astra of WooCommerce raakt zijn outline. */
body.woocommerce-js .select2-container.select2-container--focus {
    outline: 2px solid var(--tcp-focus, var(--tcp-colors-accent));
    outline-offset: 2px;
}

/* HET KEUZEVELD MET EEN ZWEVEND LABEL (1.70.6, Design #86 T26). Op /afrekenen/
   stond de gekozen waarde van "Factuurtype" half afgesneden [GEMETEN door
   Code-sessie TCP Framework 2026-10-04 11:47 op staging, 1366 en 375]: het is
   een gewone `select` van 40px hoog (`select { height: 40px }`, Astra inline)
   met de binnenruimte van het zwevende label (`padding: 1.45em 0.8em 0.35em`,
   Astra-addon, `.form-row.ast-animate-input select`). Voor tekst van 16px blijft
   9,2px over.
   De hoogte volgt nu de inhoud, met de regelhoogte van het landveld ernaast
   (Select2: 1,35) — dat veld heeft dezelfde binnenruimte en is daardoor 52px.
   De binnenruimte zelf blijft: zij maakt plaats voor het label.
   Sitebreed op het element: elk keuzeveld in een rij met een zwevend label. */
body.woocommerce-js .form-row.ast-animate-input select {
    height: auto;
    min-height: 40px;
    line-height: 1.35;
}

/* ⚠ DE RING VAN EEN LINK DIE ZIJN KAART VULT LIGT OM DE KAART (1.70.2, Design #86
   T15). De link ligt op 0/0/0/0 in een ouder met `overflow: hidden`: een ring op
   +2px valt buiten de knip. In 1.70.0/1.70.1 lag hij daarom naar binnen (-2px);
   met een echte Tab bleek hij op een productfoto NIET TE ZIEN [BRON: K021,
   Code-sessie TCP Framework 2026-10-03 20:42]. Nu draagt de KAART de ring, in de
   gewone vorm (+2px), en de link zelf geen — dat is `outline: none` MET
   vervanging.
   `:has()` op precies die ene link en niet `:focus-within`: de andere links in
   de kaart (titel, knop) houden hun eigen ring, en met `:focus-within` zouden
   er dan twee staan.
   De kaart tekent de ring op het vlak EROMHEEN, dus de kleur is die van dat
   vlak (`--tcp-focus` van de kaart zelf, geërfd van haar sectie).
   Twee kaarten: de kaartlink van het entry-grid (0,3,0 — boven
   `.tcp-pagina a:focus-visible` op 0,2,1; `>` houdt de oorsprongkaarten erbuiten,
   daar ligt de ring op `::after`, home.css), en de fotolink van de productkaart
   (volgt de KAART en niet de view, T7; de twee view-scopes in kennisbank.css
   dragen dezelfde `outline: none` op hun eigen, zwaardere selector). */
:where(body.tcp-redesign) .tcpf-entry-grid__card:has(> .tcpf-entry-grid__card-link:focus-visible),
li.product:has(.astra-shop-thumbnail-wrap > a:focus-visible) {
    outline: 2px solid var(--tcp-focus, var(--tcp-colors-accent));
    outline-offset: 2px;
}

:where(body.tcp-redesign) .tcpf-entry-grid__card > .tcpf-entry-grid__card-link:focus-visible,
li.product .astra-shop-thumbnail-wrap > a:focus-visible {
    outline: none;
}

.tcp-btn-primary:focus-visible,
.tcp-btn-accent:focus-visible,
.tcp-btn-xl:focus-visible,
.tcp-btn-header:focus-visible,
.tcp-btn-secondary:focus-visible,
.tcp-btn-secondary-dark:focus-visible,
.tcp-btn-micro:focus-visible,
.tcp-pill:focus-visible,
.tcp-link:focus-visible,
.tcp-contentcard:focus-visible,
.tcp-productcard:focus-visible,
.tcp-teaser:focus-visible {
    outline: 2px solid var(--tcp-focus, var(--tcp-colors-accent));
    outline-offset: 2px;
    border-radius: var(--tcp-radius-sm);
}

.tcp-btn-primary:focus-visible,
.tcp-btn-accent:focus-visible,
.tcp-btn-xl:focus-visible,
.tcp-btn-header:focus-visible,
.tcp-btn-secondary:focus-visible,
.tcp-btn-secondary-dark:focus-visible,
.tcp-btn-micro:focus-visible,
.tcp-pill:focus-visible {
    border-radius: var(--tcp-radius-pill);
}

/* HET VERPLICHT-STERRETJE (1.70.0, Design #86 T13). Astra's
 * `woocommerce-grid.min.css` zet `.woocommerce-js form .form-row .required` op
 * `red` (0,3,1) — #FF0000 op wit = 4,00 [GEMETEN 2026-10-03 op staging
 * /mijn-account/, Astra 4.13.12]. De rol `icon-alert` (#B3261E) haalt 6,54
 * [BRON: GO Design 20:01]. `body` tilt de regel naar 0,3,2. Hier en niet in een
 * view-sheet: het sterretje staat op elk WooCommerce-formulier, ook buiten de
 * redesign-stijl, en dit bestand laadt sitebreed. */
body.woocommerce-js form .form-row .required {
    color: var(--tcp-colors-icon-alert);
}

/* DE BANNERKOP VAN ASTRA (1.70.4, Design #86 T19). Buiten de gate levert Astra
 * de paginakop: `h1.entry-title` in `section.ast-single-entry-banner`, BUITEN
 * `.site-content` — de kit-regels in style.css raken hem dus niet. Zijn kleur
 * kwam van Astra's inline regel
 * `.ast-single-entry-banner[data-post-type="page"] .entry-title
 *    { color: var(--ast-global-color-1) }` (0,3,0),
 * en plaats 1 van het palet draagt sinds 1.69.1 (T9) `link_hover` #2C3618
 * [GEMETEN 2026-10-04 op staging /mijn-account/, 1.70.3]. Een kop is geen link:
 * nu `text`. ⚠ T9 blijft zoals hij is; alleen deze kop wijkt van het palet af
 * [BRON: Design 2026-10-04 10:12]. `[data-post-type]` zonder waarde: de regel
 * geldt voor elk berichttype dat de banner draagt. 0,3,1. */
body .ast-single-entry-banner[data-post-type] .entry-title {
    color: var(--tcp-colors-text);
}

/* DE BTW-REGEL IN HET MANDJE (1.70.2, Design #86 T17). Astra zet
 * `.woocommerce-cart .cart-collaterals .cart_totals table small` op `#777`
 * (0,3,2) [GEMETEN in reference/astra 4.13.12, woocommerce.min.css]; op wit is
 * dat 4,48 [BRON: K021, Framework 20:42]. De rol `text-muted` haalt 7,54
 * [BRON: GO Design 20:43, berekend]. Deze regel staat op 0,4,3. */
body.woocommerce-js .cart-collaterals .cart_totals table small.includes_tax {
    color: var(--tcp-colors-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .tcp-sec *,
    .tcp-band *,
    .tcp-btn-primary, .tcp-btn-accent, .tcp-btn-xl, .tcp-btn-header,
    .tcp-btn-secondary, .tcp-btn-secondary-dark, .tcp-btn-micro,
    .tcp-pill, .tcp-link, .tcp-contentcard, .tcp-productcard {
        transition: none !important;
    }
}

/* -----------------------------------------------------------------------
 * Responsive (§6) — generieke component-regels
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .tcp-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tcp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tcp-split   { gap: 40px; }
}

@media (max-width: 860px) {
    .tcp-split { grid-template-columns: 1fr; }
    .tcp-sectiekop { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 768px) {
    .tcp-sec { padding-block: 48px; }
    .tcp-grid--4, .tcp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .tcp-usp__grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
    .tcp-usp__tegel { border-right: 0; border-bottom: 1px solid var(--tcp-colors-border); padding: 0 0 20px; }
    .tcp-usp__tegel:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 544px) {
    .tcp-sec { padding-block: 44px; }
    .tcp-grid--4, .tcp-grid--3 { grid-template-columns: 1fr; }
    .tcp-usp__grid { grid-template-columns: 1fr; }
    .tcp-usp__tegel { border-bottom: 1px solid var(--tcp-colors-border); }
    .tcp-usp__tegel:nth-last-child(-n+2) { border-bottom: 1px solid var(--tcp-colors-border); padding-bottom: 20px; }
    .tcp-usp__tegel:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* -----------------------------------------------------------------------
 * R2-PATRONEN (v1.18.0) — gebouwd vanaf de ontwerppagina's in
 * `design/Beeffet.nl homepage redesign-dev/`, niet vanaf een samenvatting.
 * Bron per component staat erbij, met de gemeten waarde uit het ontwerp.
 *
 * Deze drie componenten zijn GEDEELD: de pillar past ze in 1.18.0 toe, de
 * overige sjablonen erven ze in hun eigen levering. Ze staan daarom hier en
 * niet in een sjabloon-eigen sheet.
 *
 * Waarden uit het ontwerp die geen token hebben, staan als literal met de
 * bron erbij. Alles wat wél een token heeft, gebruikt het token — het
 * ontwerp is in dezelfde palet- en typografieschaal getekend.
 * -------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * PATROON 1 — de kop (`Pillar - Honing.dc.html` r27-39, overlay-vorm;
 * `Subpillar - Polyflorahoning.dc.html` r?? en `Verzorging.dc.html`,
 * split-vorm).
 *
 * Ontwerp overlay: vlak 420px hoog, beeld eronder, verloop
 * 90deg rgba(20,14,8,.92) → .55 op 60% → .2, tekst links met
 * padding 0 72px, kolom max 640px, gap 20px, H1 60px/1.04 in on-dark.
 * Ontwerp split: grid 1.1fr/1fr, gap 64, align center, padding 64px 56px 40px.
 * -------------------------------------------------------------------- */

/*
 * GEEN eigen `padding-block` meer (v1.26.1, RM#8-bevinding 81a).
 *
 * T/m v1.26.0 stond hier `padding-block: 0` en zette `--overlay` er zijn eigen
 * 72px overheen, met een losse 44px in de ≤544-query. Daardoor sloeg de kop de
 * TABLETSTAP over: `.tcp-sec` gaat op ≤768 naar 48px, maar de kop hield daar 72
 * — precies wat het commentaar bij `--overlay` beloofde níét te doen.
 *
 * Die stap alsnog in de bestaande ≤768-query zetten werkt niet: die query staat
 * op regel 746, vóór de kopregels, en op gelijke specificiteit (0,1,0) wint de
 * latere regel. Vandaar de andere kant op — de twee eigen declaraties weg, zodat
 * `.tcp-sec` het ritme levert dat hij al voor de hele pagina voert: 72 / 48 / 44.
 * Eén bron voor de verticale maat, geen tweede reeks literals.
 *
 * `--split`, `--kaal` en `--midden` zijn ongemoeid: die zetten hun eigen
 * `section-y` en winnen op bronvolgorde. Alleen `--overlay` verandert, en dat is
 * de vorm waar de bevinding over gaat.
 */
.tcp-kop {
    position: relative;
    background: var(--tcp-colors-canvas);
}

.tcp-kop__binnen {
    position: relative;
    z-index: 1;
}

.tcp-kop__tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tcp-spacing-stack-lg, 18px);
    max-width: 640px; /* ontwerp: max-width 640px op de tekstkolom */
}

.tcp-kop__titel {
    margin: 0;
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    font-size: var(--tcp-size-display, clamp(34px, 5vw, 60px));
    line-height: var(--tcp-lh-display, 1.05);
    color: var(--tcp-colors-text);
}

.tcp-kop__lead {
    margin: 0;
    font-size: var(--tcp-size-lead, 17px);
    line-height: var(--tcp-lh-lead, 1.7);
    color: var(--tcp-colors-text-body);
    max-width: 560px; /* ontwerp: lead 560px */
}

.tcp-kop__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* ontwerp: gap 16px tussen de knoppen */
    margin-top: 2px;
}

/* --- overlay-vorm: beeld als vlak, tekst eroverheen --- */

/*
 * Het beeldvlak ligt absoluut achter de tekst; de HOOGTE komt van de tekst,
 * met 420px als ondergrens (ontwerpmaat). Zou het vlak in de flow staan, dan
 * bepaalt de intrinsieke beeldverhouding de bandhoogte — gemeten: een band
 * van ruim 800px in plaats van 420.
 */
/*
 * VERTICALE RUIMTE — BEWUSTE AFWIJKING VAN HET ONTWERP (v1.26.0, taak #79).
 *
 * Het ontwerp tekent deze kop op `padding: 0 72px` met een vlak van 420px:
 * de tekst staat verticaal gecentreerd in een band met een vaste hoogte, en
 * de horizontale 72 is dus de énige padding. mrW. wil de kop ruimer, met de
 * donkere CTA-band als referentie (§5.5 = `padding: section-y section-x`).
 * Vandaar verticale ruimte uit de `section-y`-familie.
 *
 * DIT IS GEEN ONTWERPHERSTEL. Wie later naast de ontwerppagina meet, vindt
 * hier een verschil; het staat er met opzet.
 *
 * De maat zelf staat sinds v1.26.1 niet meer hier maar op `.tcp-sec` — 72 /
 * 48 (≤768) / 44 (≤544), hetzelfde ritme als elke andere sectie. Zie het blok
 * bij `.tcp-kop`.
 *
 * `min-height` blijft 420: box-sizing is border-box, dus de band groeit
 * alleen zodra de tekst + padding daaroverheen gaat. Op `/honing/` doet ze
 * dat (tekstkolom 387px + 144 = 531). Alleen `--overlay` — `--split` en
 * `--kaal` dragen hun eigen `section-y` en blijven ongemoeid.
 */
.tcp-kop--overlay {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px; /* ontwerp: hoogte 420px */
    overflow: hidden;
}

.tcp-kop--overlay .tcp-kop__binnen { width: 100%; }

.tcp-kop__vlak {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tcp-kop__vlak .tcp-kop__beeld {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tcp-kop__verloop {
    position: absolute;
    inset: 0;
    /* ontwerp: linear-gradient(90deg, rgba(20,14,8,.92), .55 op 60%, .2) */
    background: linear-gradient(90deg, rgba(20, 14, 8, .92) 0%, rgba(20, 14, 8, .55) 60%, rgba(20, 14, 8, .2) 100%);
}

.tcp-kop--overlay .tcp-kop__titel { color: var(--tcp-colors-on-dark); }
.tcp-kop--overlay .tcp-kop__lead  { color: var(--tcp-colors-on-dark-body); }
.tcp-kop--overlay .tcp-eyebrow    { color: var(--tcp-colors-accent-light); }

/* --- split-vorm: beeld naast de tekst (subpillar, verzorging) --- */

/* -----------------------------------------------------------------------
 * B4 / taak #83 (v1.27.0) — de verticale ruimte per KOPVORM, afgelezen van
 * de ontwerppagina's in plaats van uit één systeemwaarde.
 *
 * Wat de bundel voorschrijft [GEMETEN in tcp/reference/design/]:
 *
 *   overlay  `padding: 0 72px` + vlak 420px   Pillar - Honing r27-39,
 *                                             Pillar - Bijenproducten r27-39
 *   split    `padding: 64px 56px 40px`        Verzorging r27, Subpillar -
 *                                             Polyflorahoning r27, Honing op
 *                                             oorsprong r27, Honingdelicatessen,
 *                                             Honingsnoep - Hakhoning
 *   midden   `padding: 64px 56px 40px`        Kennisbank r27 — identiek aan split
 *   kaal     —                                GEEN ontwerpbron: dit is onze
 *                                             degradatievorm, geen ontwerpbesluit
 *
 * Drie gevolgen, en alle drie staan hieronder:
 *
 * 1. De ontwerpwaarde is ASYMMETRISCH (64 boven, 40 onder). Dat kan het
 *    sectieritme niet leveren — `.tcp-sec` heeft één `padding-block`-waarde.
 *    Vandaar dat split en midden hun eigen declaratie HOUDEN. Zou je ze
 *    schrappen, dan wordt de onderrand 72 waar het ontwerp 40 tekent: 32px te
 *    veel op elke split- en middenpagina.
 * 2. `--kaal` verliest zijn declaratie juist wél en erft 72/48/44 van
 *    `.tcp-sec`. Er is geen ontwerpbron, het is met 24 van de 26 gate-pagina's
 *    veruit de meest gebruikte vorm, en het sectieritme is dan de eerlijke
 *    default. Zelfde route als 81a.
 * 3. De horizontale 56 uit het ontwerp staat hier NIET: die levert
 *    `.tcp-container` al. Overnemen zou hem verdubbelen.
 *
 * TABLET EN MOBIEL HEBBEN GEEN ONTWERPBRON. Van de 35 ontwerpbestanden dragen
 * er 4 een `@media`-regel en de paginamockups geen enkele; de LEESMIJ r22 zegt
 * dat de mobiele laag in de Header zit. Voor split en midden is het
 * sectieritme daar dus de enige verdedigbare bron: 48 (≤768) en 44 (≤544),
 * symmetrisch, precies zoals `.tcp-sec`.
 *
 * BRONVOLGORDE — dit is dezelfde constructie als 74f, en daarom staan alle
 * regels hieronder op 0,2,0 (`.tcp-kop.tcp-kop--split`) in plaats van op
 * 0,1,0. Ze winnen van `.tcp-sec` op SPECIFICITEIT, niet op positie: verplaats
 * dit blok naar boven en de uitkomst verandert niet. De twee mediaqueries
 * overlappen elkaar bovendien niet (545-768 en ≤544), dus ook onderling is er
 * geen volgorde-afhankelijkheid.
 * -------------------------------------------------------------------- */

.tcp-kop.tcp-kop--split,
.tcp-kop.tcp-kop--midden {
    padding-block: 64px 40px; /* ontwerp: 64 boven, 40 onder */
}

@media (min-width: 545px) and (max-width: 768px) {
    .tcp-kop.tcp-kop--split,
    .tcp-kop.tcp-kop--midden { padding-block: 48px; } /* = .tcp-sec op deze band */
}

@media (max-width: 544px) {
    .tcp-kop.tcp-kop--split,
    .tcp-kop.tcp-kop--midden { padding-block: 44px; } /* = .tcp-sec op deze band */
}

.tcp-kop--split .tcp-kop__binnen {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* ontwerp */
    gap: var(--tcp-spacing-split-gap, 64px);
    align-items: center;
}

.tcp-kop--split .tcp-kop__media { height: 460px; }
.tcp-kop--split .tcp-kop__tekst { max-width: none; }

/* --- kale vorm: geen beeld ingevuld ---
   Degradatie-eis: de kop blijft staan, het vlak verdwijnt en de layout is
   één kolom. Geen verloop over niets, geen lege tweede kolom. */

/* `--kaal` draagt sinds v1.27.0 GEEN eigen verticale maat meer: hij erft
   72/48/44 van `.tcp-sec`. Zie het blok bij `.tcp-kop--split` hierboven —
   geen ontwerpbron, dus het sectieritme is de eerlijke default, en de
   bronvolgorde-afhankelijkheid verdwijnt in plaats van te verhuizen. */

/* --- middenvorm: gecentreerd, zonder beeld (v1.20.0) ---
   Ontwerp `Kennisbank.dc.html`: `padding:64px 56px 40px; align-items:center;
   text-align:center`, H1 met max-width 820px en een lead van 640px, allebei
   gecentreerd. Deze vorm heeft per ontwerp géén beeld — de kop is de tekst.
   Gebruikt door het kennisbank-overzicht; elk ander sjabloon kan hem kiezen
   met het veld `kop_vorm`. */

.tcp-kop--midden {
    /* verticale maat: zie het B4-blok hierboven (64/40 + sectieritme) */
    text-align: center;
}

.tcp-kop--midden .tcp-kop__tekst {
    align-items: center;
    max-width: none;
}

.tcp-kop--midden .tcp-kop__titel { max-width: 820px; }
.tcp-kop--midden .tcp-kop__lead  { max-width: 640px; }
.tcp-kop--midden .tcp-kop__ctas  { justify-content: center; flex-wrap: wrap; }

/* -----------------------------------------------------------------------
 * PATROON 2 — bandritme. De sectieklasse heet `.tcp-strook`: `.tcp-band`
 * bestond al als de donkere CTA-band uit §5.5, en die zette prompt elke
 * strook op surface-dark (gemeten vóór de hernoeming).
 *
 * `.tcp-sec--canvas` / `--surface` / `--dark` bestonden al; hier alleen de
 * onderlijn die het ontwerp op de lichte band zet, plus de binnenmaat.
 * -------------------------------------------------------------------- */

.tcp-sec--lijn-onder {
    border-bottom: 1px solid var(--tcp-colors-border);
}

.tcp-strook__binnen {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* -----------------------------------------------------------------------
 * DE SECTIELAAG — twee kolommen binnen één strook (v1.32.0, taak #132).
 *
 * Ontwerp (`Honingsoort - Acaciahoning.dc.html`): sectie 3 op r53 en sectie 6
 * op r117 zijn allebei `grid 1fr 1fr`; de kolom-binnengap staat op r54 (26px)
 * en r117 (16px). Deze ronde levert ÉÉN waarde voor beide — grid-gap 56 uit
 * `--tcp-spacing-split-gap-sm` (bestond al) en kolom-gap 26 — omdat het
 * verschil tussen 64/56 en 26/16 pas te beoordelen is tegen een gerenderde
 * pagina en niet tegen een spec. Dat is open punt B van het dossier, af te
 * stellen bij de doorloop.
 *
 * De gridvorm staat BINNEN `--kolommen-2` en overschrijft daar de flex-kolom
 * hierboven (0,2,0 tegen 0,1,0). Een strook zonder sectielaag raakt hij niet.
 *
 * `align-items: start` want de twee kolommen zijn ongelijk lang: het ontwerp
 * laat ze allebei bovenaan beginnen en niet uitrekken tot de langste.
 * -------------------------------------------------------------------- */

.tcp-strook--kolommen-2 .tcp-strook__binnen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tcp-spacing-split-gap-sm, 56px);
    align-items: start;
}

.tcp-strook--kolommen-2 .tcp-strook__kolom {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

/* Eén gevulde kolom: die loopt over de volle breedte. De THEME emit de lege
   kolom-div niet (zie strook()), dus zonder deze regel zou de overgebleven
   kolom op de helft blijven staan met een gat ernaast. */
.tcp-strook--kolommen-2.tcp-strook--eenkolom .tcp-strook__binnen {
    grid-template-columns: 1fr;
}

/*
 * I1 — GEEN TWEEDE KOLOMSPLITSING BINNEN EEN HALVE KOLOM.
 *
 * `.tcp-strook--tekst .tcpf-block--beschrijving { columns: 2 }` verderop in dit
 * bestand is de CSS-tweekolommer die BESTOND BIJ GEBREK AAN een sectielaag: één
 * rijk tekstveld dat zich in twee tekstkolommen opdeelt. De sectie `profiel`
 * bevat `beschrijving` en krijgt daardoor óók `--tekst`; zonder deze regel
 * splitst die tekst zich binnen een halve kolom nogmaals in tweeën.
 *
 * Nu er een echte sectielaag is, wint die: binnen `--kolommen-2` telt de
 * kolomindeling van de sectie en niet die van het blok. 0,3,0 tegen 0,2,0, en
 * in dezelfde mediaquery — het wint op specificiteit, niet op positie.
 */
@media (min-width: 1025px) {
    .tcp-strook--kolommen-2.tcp-strook--tekst .tcpf-block--beschrijving {
        columns: 1;
    }
}

/*
 * I2 — EEN COLLECTIEGRID IN EEN HALVE KOLOM STAAT ONDER ELKAAR.
 *
 * De driekolomsregel verderop (`--blok-entry-grid`, `--blok-cpt-listing`,
 * `--blok-wc-producten-grid`) geldt voor een grid over de VOLLE strookbreedte.
 * In de rechterkolom van `afsluiting` tekent het ontwerp vier kaarten ONDER
 * ELKAAR (r127-131: `flex column, gap 12`), niet drie naast elkaar.
 *
 * De klassen `--kolommen-2` en `--blok-entry-grid` staan op HETZELFDE element
 * (de `<section>`), vandaar de aaneengeschreven selector: 0,4,0 tegen de 0,3,0
 * van de regel die hij overschrijft. Het productgrid in de sectie `shop` staat
 * op één kolom en houdt dus zijn drie.
 */
@media (min-width: 769px) {
    .tcp-pagina-main--r2 .tcp-strook--kolommen-2.tcp-strook--blok-entry-grid .tcpf-entry-grid__grid,
    .tcp-pagina-main--r2 .tcp-strook--kolommen-2.tcp-strook--blok-cpt-listing .tcpf-entry-grid__grid {
        grid-template-columns: 1fr;
    }

    .tcp-pagina-main--r2 .tcp-strook--kolommen-2.tcp-strook--blok-wc-producten-grid ul.products {
        grid-template-columns: 1fr;
    }
}

/* Onder 769px stapelt de sectie naar één kolom — dezelfde grens die de rest van
   de R2-vorm aanhoudt (§6, menu-omslag 1024, content-stapeling 860, kaartgrids
   769). De kolom-div's blijven staan en komen onder elkaar. */
@media (max-width: 768px) {
    .tcp-strook--kolommen-2 .tcp-strook__binnen {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------
 * DE RUIMTE TUSSEN EEN KOP EN ZIJN TEKST (v1.33.0, taak #135)
 *
 * mrW., 2026-08-17: "De ruimte tussen de koppen en de tekst is te klein."
 * Nagemeten op /honing/acaciahoning/ bij 1440 (Theme 1.32.0 + FW 2.33.1):
 *
 *   prozakoppen in `beschrijving` (5x)   0px   ontwerp 12  r55/61/68/76
 *   "Alle producten"                     0px   ontwerp 24  r105
 *   "Vergelijkbare honingsoorten"        0px   ontwerp 16  r118/125
 *   "Veelgestelde vragen"               16px   ontwerp 16  ✅ al goed
 *   keukenbandkop                        8px   ontwerp  8  ✅ al goed
 *
 * DE OORZAAK IS ONS EIGEN RESET, niet Astra en niet het Framework. GEMETEN met
 * een regel-voor-regel scan van document.styleSheets: de winnende declaraties
 * zijn `.tcp-pagina__content h2 { margin: 0 }` en `.tcp-pagina__content p
 * { margin: 0 }` in kennisbank.css (0,1,1). Het ontwerp haalt die ruimte niet
 * uit marges maar uit een flex-wrapper mét gap om kop en alinea heen
 * (`Honingsoort - Acaciahoning.dc.html` r54-57: kolom gap 26, daarin groepen
 * gap 12). Onze `beschrijving` levert één plat blok veld-HTML — h2,p,p,h2,p,p —
 * dus die groepswrapper bestaat hier niet en de marge is de enige weg.
 *
 * WAAROM DIT IN HET THEME KAN. `.tcpf-block__heading` is Framework-CSS, maar
 * components.css laadt ERNA — GEMETEN 2026-08-17: index 41 tegen 21 in
 * document.styleSheets (48 sheets). ⚠ RESIDU, bewust aanvaard en niet nu
 * gerepareerd: de uitkomst hangt daarmee aan een laadvolgorde, net als bij #134.
 * De regels hieronder staan hoger in specificiteit dan wat ze overschrijven, dus
 * binnen dit bestand is de positie niet de reden dat ze winnen; tussen de twee
 * BESTANDEN is de volgorde het wél.
 * -------------------------------------------------------------------- */

/*
 * 1. PROZAKOPPEN IN VELDTEKST — 12px.
 *
 * Twee plekken waar redactionele HTML uit één veld komt en dus eigen h2/h3 kan
 * dragen: `beschrijving` (het hele blok) en `.tcpf-sectie-blok__tekst` (de
 * tekst-div van sectie-blok, één per alinea-veld).
 *
 * De marge staat op het VOLGENDE element en niet op de kop: dan vuurt hij
 * alleen wanneer er echt iets volgt, en houdt een kop aan het eind van het veld
 * geen marge onder zich. Aangrenzende marges klappen samen tot de grootste, dus
 * max(kop 0, tekst 12) = 12.
 *
 * `--tcp-spacing-stack-md` is de BESTAANDE token voor precies dit ritme: 12px,
 * geëmit door de config (gemeten), en het Framework gebruikt hem zelf al op
 * `.tcpf-block--sectie-blok { gap: var(--tcp-spacing-stack-md,12px) }`.
 *
 * ⚠ `ul`/`ol` staan er BEWUST bij, waar de GO alleen "alinea" noemt: op deze
 * pagina staat al een `ul` binnen `beschrijving` (na een alinea, r11 van het
 * blok). Zodra de redactie een kop direct vóór een lijst zet, zou het gat daar
 * 0 blijven — precies het defect dat hier wordt opgelost. Vandaag 0 verschil:
 * alle vijf de koppen worden door een `p` gevolgd (gemeten).
 */
.tcp-strook .tcpf-block--beschrijving :is(h2, h3) + :is(p, ul, ol),
.tcp-strook .tcpf-sectie-blok__tekst :is(h2, h3) + :is(p, ul, ol) {
    margin-top: var(--tcp-spacing-stack-md, 12px);
}

/*
 * 1b. DE LADDER AFMAKEN (v1.34.0). 1.33.0 zette alleen het gat ONDER een kop op
 * 12, waardoor een kop 12px onder zich kreeg en 0px erboven en dus bij de
 * vóórgaande alinea ging horen. Drie stappen, en de eerste twee zijn de reden
 * dat de derde nodig is:
 *
 *   12  GEBONDEN    kop → zijn eigen alinea      ONTWERPWAARDE, r55/61/68/76
 *   16  LOS         alinea → alinea              ⚠ AANNAME, zie hieronder
 *   26  GESCHEIDEN  alinea → de volgende kop     ONTWERPWAARDE, r54 en r74
 *
 * DE 26 IS GEMETEN, NIET GEKOZEN. Het ontwerp bouwt de tekstkolom als een
 * flex-kolom met `gap:26px` (r54, en r74 voor de rechterkolom) waarin élke groep
 * zélf een flex-kolom met `gap:12px` is (r55/61/68/76). 26 is dus de
 * GROEPSAFSTAND; vertaald naar platte proza uit één veld is dat precies de
 * ruimte boven een kop.
 *
 * ⚠ DE 16 IS EEN AANNAME EN GEEN ONTWERPWAARDE (besluit 54, Strateeg TCP). Het
 * ontwerp geeft er geen: daar staat nooit meer dan één alinea per groep. 16 is
 * gekozen zodat de ladder in drie stappen loopt en een kop steviger aan zijn
 * eigen alinea vastzit dan alinea's onderling. Wordt bij de doorloop beoordeeld
 * en kan dan wijzigen.
 *
 * GEEN OPTELLING met de regel hierboven: die zet `margin-top` op het element ná
 * een kop, deze op de kop ná een alinea. Twee verschillende elementen, en een
 * alinea heeft precies één voorganger — dus per overgang matcht er altijd maar
 * één van de drie regels. Aangrenzende marges klappen samen tot de grootste, dus
 * ook een bestaande `margin-bottom` telt niet op maar wordt overstemd.
 *
 * EEN KOP ALS EERSTE ELEMENT KRIJGT NIETS. Dat is geen extra regel maar een
 * eigenschap van `+`: zonder voorafgaande alinea matcht de selector niet. Zo
 * komt er geen ruimte tussen de blokwrapper en zijn eigen eerste kop, die bij de
 * sectiepadding zou optellen.
 *
 * `ul`/`ol` staan aan beide zijden mee, om dezelfde reden als bij 1.33.0: een
 * lijst is hier tekst, en zonder die vermelding valt het gat rond een lijst stil
 * terug op 0.
 */
.tcp-strook .tcpf-block--beschrijving :is(p, ul, ol) + :is(h2, h3),
.tcp-strook .tcpf-sectie-blok__tekst :is(p, ul, ol) + :is(h2, h3) {
    margin-top: 26px;
}

/*
 * Tekst → tekst: 16px, en UITSLUITEND in `beschrijving`.
 *
 * ⚠ NIET `p + p` MAAR ALLE TEKSTOVERGANGEN. De GO noemt "alinea → alinea", en op
 * de gemeten pagina staat daarnaast een alinea die door een LIJST wordt gevolgd
 * (`p → ul`). Met alleen `p + p` bleef dat gat GEMETEN op 0 — dezelfde soort
 * gaten waar deze taak over gaat, op dezelfde pagina. Met `:is(p,ul,ol)` aan
 * beide zijden dekken de drie regels samen élk aangrenzend paar:
 *
 *   kop  → tekst   12   (regel 1)
 *   tekst → tekst  16   (deze regel)
 *   tekst → kop    26   (regel 1b)
 *
 * Ze zijn onderling UITSLUITEND: een element heeft precies één voorganger, dus
 * per overgang matcht er altijd maar één van de drie. Geen optelling, geen
 * afhankelijkheid van de bronvolgorde, en geen overgang die op 0 blijft staan.
 *
 * `.tcpf-sectie-blok__tekst` blijft er bewust buiten: het Framework bepaalt het
 * alinearitme daar zelf op `.tcpf-sectie-blok__tekst p { margin: 0 0 .75em }`
 * (= 12px) met `p:last-child { margin-bottom: 0 }` [GEMETEN, tcpf-blocks.css
 * r263-264]. Dat is een Framework-eigen waarde; die op een aanname van ons
 * overschrijven hoort niet in deze taak, en de acceptatie meet hem niet.
 * `beschrijving` heeft geen enkele alinearegel in het Framework (0 treffers),
 * dus daar is dit de eerste en enige.
 */
.tcp-strook .tcpf-block--beschrijving :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 16px;
}

/*
 * 2. BLOKKOPPEN — 24px op volle breedte, 16px in een halve kolom.
 *
 * DE MAAT HANGT AAN DE SECTIEBREEDTE EN NIET AAN DE BLOCKNAAM. Afgelezen over
 * beide ontwerppagina's, en het is in beide dezelfde regel:
 *
 *   volle breedte   gap 24   `Pillar - Honing` r41 (categorierij)
 *                            `Honingsoort - Acaciahoning` r105 ("Alle producten")
 *   halve kolom     gap 16   `Honingsoort - Acaciahoning` r118 (faq)
 *                            en r125 ("Vergelijkbare honingsoorten")
 *
 * Dus niet "24 boven een productrij en 16 elders": hetzelfde block krijgt 24 op
 * volle breedte en 16 in een tweekolomssectie. `entry-grid` bewijst het —
 * 24 als categorierij op de pillar, 16 in de `afsluiting` van honingsoort.
 * `--kolommen-2` uit taak #132 is precies de haak die dat onderscheid draagt.
 *
 * ⚠ DE VAL: NIET OPTELLEN BIJ EEN BESTAANDE FLEX-GAP. `Veelgestelde vragen`
 * haalt zijn 16px niet uit een marge maar uit een gap: kennisbank.css r445-452
 * zet `.tcp-pagina__content .tcpf-block--faq { display:flex; flex-direction:
 * column; gap:16px }` — ons eigen §5.13-FAQ-component. Een marge van 16 op die
 * kop erbovenop maakt er 32 van.
 *
 * Daarom loopt de maat via een custom property op de BLOKWRAPPER in plaats van
 * via een selector-uitzondering. Eén regel zet de marge, en wie een andere maat
 * nodig heeft zet alleen de waarde. Geen specificiteitsstrijd (de waarde staat
 * op een ánder element dan de marge) en geen afhankelijkheid van de
 * bronvolgorde. Een nieuw blok dat zijn ritme al uit een flex-gap haalt, krijgt
 * hier één regel met 0 — de marge-regel zelf blijft ongemoeid.
 *
 * `>` IS ESSENTIEEL, GEEN NETHEID. Draagt een blok naast zijn kop ook een
 * sectielink ("Alle artikelen →"), dan zet het Framework die twee samen in een
 * `__kop`-rij en is de kop géén direct kind meer. Die blokken hebben hun ritme
 * al uit een eigen flex-kolom (taak #79: kop → rij 24px) en zouden met een
 * nakomeling-selector op 48 uitkomen. GEMETEN op /honing/: van de 11 koppen
 * verandert er precies één, en dat is de enige die een direct kind is.
 *
 * Waarom de wrapper de gap NIET overneemt (de vorm die het ontwerp gebruikt):
 * GEMETEN dat dat op twee plekken stil misgaat. `wc-producten-grid` heeft drie
 * kinderen — kop, een LEGE `div.woocommerce-notices-wrapper` van 0px hoog, en
 * `ul.products` — dus een flex-gap zou tweemaal tellen: 24 + 24. En de
 * faq-wrapper heeft naast kop en `.tcpf-faq` een derde kind, het
 * FAQPage-`<script>` van 0px; zijn gap op 0 zetten zou daar 16px onder het blok
 * weghalen. Een marge op de kop raakt geen van beide.
 */
.tcp-strook .tcpf-block > .tcpf-block__heading {
    margin-bottom: var(--tcp-strook-kopruimte, 24px);
}

/* In een tweekolomssectie (#132) staat de kop in een halve kolom: 16px. */
.tcp-strook--kolommen-2 .tcpf-block {
    --tcp-strook-kopruimte: 16px;
}

/* FAQ: de wrapper levert de 16px al als flex-gap — zie de val hierboven.
   Dubbel geklasseerd (0,3,0) zodat hij van de regel hierboven (0,2,0) wint op
   SPECIFICITEIT en niet op positie: de faq van honingsoort staat zélf in een
   `--kolommen-2`-sectie, dus die twee regels matchen hetzelfde element. */
.tcp-strook .tcpf-block.tcpf-block--faq {
    --tcp-strook-kopruimte: 0px;
}

/*
 * 3. `tcpf-keukenband__kop` BLIJFT ONAANGEROERD — 8px is de ontwerpwaarde
 * (r91) en die komt uit `.tcpf-keukenband__intro { gap: 8px }` in het
 * Framework. De selectors hierboven raken hem niet: die kop draagt
 * `tcpf-keukenband__kop` en géén `tcpf-block__heading` (gemeten).
 */

/*
 * De categorierij: VIER kolommen, niet vijf (v1.19.0).
 *
 * Het Framework emit voor elk kaart-grid één gedeelde regel met
 * `repeat(auto-fill, minmax(var(--tcp-spacing-grid-card-min,220px), 1fr))`
 * (class-tcpf-block-base.php::grid_css_rules, via wp_add_inline_style op de
 * tcpf-blocks-handle). Op de R2-container rekent dat uit naar VIJF kolommen:
 * 1440 − 2×56 = 1328px binnenmaat, kaartminimum 220 en block-gap 24, dus
 * floor((1328+24)/(220+24)) = 5. De ontwerppagina tekent hier
 * `grid-template-columns:repeat(4,1fr)` — acht tegels in twee rijen van vier.
 *
 * Waarom hier en niet in de config: de kolomsleutel van entry-grid verviel in
 * Framework v2.4.0, en `spacing.grid_card_min` optrekken zou álle kaart-grids
 * op de site raken (homepage, oorsprongkaarten, productgrids). Dit is dus
 * theme-CSS, en strak gescoped: alleen de entry-grid-strook binnen de R2-vorm.
 *
 * Specificiteit 0,3,0 tegen de 0,2,0 van de Framework-regel, dus de bronvolgorde
 * van de twee stylesheets doet er niet toe. De regel staat bewust binnen
 * `min-width:769px`: daaronder gelden de tiers van het Framework zelf (3 kolommen
 * ≤768, 2 ≤544) en die moeten blijven winnen.
 */
@media (min-width: 769px) {
    /* Basis voor de R2-KAARTGRIDS: DRIE kolommen. Zo tekenen de landkaarten op
       `Honing op oorsprong.dc.html` (repeat(3,1fr), gap 24) en de soortkaarten op
       `Subpillar - Polyflorahoning.dc.html`.

       ⚠ HET PRODUCTGRID STOND HIER T/M v1.34.0 BIJ, EN IS ERUIT (v1.35.0, #141).
       Niet omdat de ontwerpwaarde is veranderd maar omdat mrW. hem heeft
       overruled: het productgrid gaat site-breed naar VIJF kolommen, beoordeeld
       op de gerenderde pagina (besluit 61). Framework 2.35.0 zet de loop-prop op
       5 en die werkt overal — beide `<ul>`'s dragen `columns-5`.

       DAT HET WEGHALEN IETS DOET, IS HET PUNT. De aanvankelijke lezing was dat
       deze selector inert was omdat WooCommerce' `.columns-N` (0,4,1) altijd van
       onze (0,3,1) wint. Dat geldt alleen wáár die regel matcht, en zij vereist
       de body-klasse `woocommerce`. GEMETEN 2026-08-17 op Theme 1.34.0 +
       FW 2.35.0, container 1328px op beide pagina's:

         /honing/acaciahoning/        body: woocommerce + woocommerce-js
                                      → 5 × 246,398   (WooCommerce wint)
         /honing/oorsprong/moldavie/  body: alleen woocommerce-js
                                      → 3 × 426,664   (ONZE regel won hier)

       Op de veertien landpagina's was dit dus de énige regel die rendeerde. Na
       het weghalen valt het grid daar terug op de auto-fill van het Framework
       (`repeat(auto-fill, minmax(220px,1fr))`, gap 24) en levert
       floor((1328+24)/(220+24)) = 5 kolommen van 246,398 — gemeten, gelijk aan
       de honingsoortpagina.

       `entry-grid` en `cpt-listing` HOUDEN drie: dat zijn kaartgrids en geen
       productgrids, en voor hen is drie nog steeds de ontwerpwaarde. */
    .tcp-pagina-main--r2 .tcp-strook--blok-entry-grid .tcpf-entry-grid__grid,
    .tcp-pagina-main--r2 .tcp-strook--blok-cpt-listing .tcpf-entry-grid__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Uitzondering: de categoriekaarten. `Pillar - Honing.dc.html` tekent daar
       acht tegels in repeat(4,1fr) — twee rijen van vier.

       TWEE INGANGEN, BEWUST (v1.25.0, GO 4c punt 4):

       1. `.tcp-strook--categorierij` — de strookklasse die het PLAKBLOK zelf
          schrijft. Dit is de route die blijft werken als de config wordt
          afgeslankt. `tcp_theme_pagina_is_pillar()` loopt namelijk de
          blocklijst af op zoek naar een `pillar-nav`; verhuist die naar het
          plakblok — precies wat er nu gebeurt — dan geeft die functie false,
          verdwijnt `tcp-pagina-main--pillar`, en zou de categorierij STIL van
          vier naar drie kolommen zakken. Geen foutmelding, alleen een pagina
          die er anders uitziet. Met deze selector is die afhankelijkheid weg
          in plaats van verplaatst.
       2. `.tcp-pagina-main--pillar` — de CONFIGROUTE. Een pillar zónder
          plakblok schrijft geen strookklasse, en die pagina's moeten
          onveranderd blijven zolang ze op de config draaien. Deze regel mag
          weg zodra de laatste pillar een plakblok heeft.

       Specificiteit 0,3,0, gelijk aan de drie-kolomsregel hierboven, en hij
       staat erná — dus hij wint. */
    .tcp-strook--categorierij .tcpf-block--entry-grid .tcpf-entry-grid__grid,
    .tcp-pagina-main--pillar .tcp-strook--blok-entry-grid .tcpf-entry-grid__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* B3 (v1.27.0) — de KAARTGAP van diezelfde categorierij: 16 in plaats van
       de 24 die `--tcp-spacing-block-gap` levert.

       `Pillar - Honing.dc.html` r43 tekent `repeat(4,1fr); gap:16px`. Dat is de
       ENIGE 16 in de sleutelpagina's: dezelfde ontwerppagina zet de
       kennisbankrij op 24 (r137), en de kop → kaartenrij eveneens op 24 (r132).
       Het token `block_gap` voedt alle drie, dus het token blijft 24 en de 16
       komt hier — op precies de rij waar het ontwerp hem tekent.

       Dezelfde twee ingangen als de vierkolomsregel hierboven, om dezelfde
       reden; zie het blok daar. En binnen dezelfde ≥769-query, want onder die
       breedte tekent de bundel niets: daar blijft het systeemritme van 24
       gelden. Dat is ook waarom deze regel de mobiele paginahoogte niet raakt. */
    .tcp-strook--categorierij .tcpf-block--entry-grid .tcpf-entry-grid__grid,
    .tcp-pagina-main--pillar .tcp-strook--blok-entry-grid .tcpf-entry-grid__grid {
        gap: 16px; /* ontwerp: Pillar - Honing r43 */
    }

    /* "Uit de kennisbank" — DRIE kolommen (v1.21.0).
       Het ontwerp tekent hier `repeat(3,1fr)` met drie artikelkaarten; gemeten
       op staging stonden er vijf kolommen met veertien kaarten. Vijf kwam niet
       uit een regel maar uit de auto-fill van het Framework: de teaserstrook
       heet `--blok-uit-de-kennisbank` en viel dus buiten de drie-kolomsregel
       hierboven, die op blocknaam scopet.
       Per blok gescoped en NIET globaal: de categorierij hierboven is óók een
       entry-grid en moet op vier blijven. Beide selectors staan op dezelfde
       specificiteit (0,3,0) en raken elkaar niet — ze noemen een andere strook.
       Het aantal kaarten is config (`posts_per_page => 3`, v1_13_11); dit gaat
       alleen over de kolomtelling. */
    .tcp-pagina-main--r2 .tcp-strook--blok-uit-de-kennisbank .tcpf-entry-grid__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* De AFSLUITINGSSECTIE: VIER kolommen, zodat de drie soortkaarten en het
       staartblok één rij vormen (v1.40.0, taak #178 deel B).

       De sectie is met config v1_13_26 van twee kolommen naar één gegaan; het
       entry-grid loopt daar dus over de volle strookbreedte. Op drie kolommen
       zou het staartblok "Alle 57 honingsoorten" alleen naar een tweede rij
       zakken. Vier houdt ze bij elkaar.

       ⚠ WA7 — BEWUSTE AFWIJKING VAN HET ONTWERP, OP TWEE PUNTEN, op instructie
       van mrW. (2026-08-21). `Honingsoort - Acaciahoning.dc.html` tekent sectie 8
       op r117 als `grid-template-columns: 1fr 1fr, gap 56` — twee gelijke
       kolommen — en op r127-131 de kaarten als `flex column, gap 12`, dus ONDER
       ELKAAR. Beide zijn hier losgelaten: de sectie wordt één volle band en de
       kaarten komen naast elkaar. Reden: de FAQ is vier regels en de
       kaartenkolom drie beelden lang, waardoor links een halve pagina leeg bleef
       staan, en de kaarten waren op 636px "veel te breed". NIET terugcorrigeren
       naar het ontwerp zonder een nieuw besluit van mrW.

       `repeat(4, 1fr)` is geen nieuwe vorm: de categoriekaarten hierboven
       gebruiken hem al. De selector is AANEENGESCHREVEN op de `<section>` —
       `--sectie-afsluiting` en `--blok-entry-grid` staan op hetzelfde element —
       zodat hij op SPECIFICITEIT wint van de driekolomsregel (0,4,0 tegen
       0,3,0) en niet op positie; dezelfde constructie als regel I2 hierboven. */
    .tcp-pagina-main--r2 .tcp-strook--sectie-afsluiting.tcp-strook--blok-entry-grid .tcpf-entry-grid__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Het staartblok vult zijn kolom (v1.40.0, #178 B2).

       `--tail` draagt geen `card-media` en had t/m 1.39.0 GEEN ENKELE regel in
       dit theme (0 treffers). Naast drie kaarten mét een beeldvlak van 200px
       werd het daardoor een lage stomp: gemeten 61,5px tegen 261,5px.

       Het grid-item rekt al mee — grid-items staan default op `stretch` — maar
       de `<a>` erbinnen is hoogte-auto en bleef dus bovenin hangen. Deze twee
       regels geven de link de volle hoogte en centreren de titel in de
       overgebleven ruimte. GEEN nieuwe kleuren, randen of radii: achtergrond,
       rand en radius komen ongewijzigd van `.tcpf-entry-grid__card`
       (kennisbank.css r684-690), en de padding van `__card-body` (r709-712).

       Gescoped op de afsluitingssectie, niet op `--tail` in het algemeen: dit is
       de enige plek waar het staartblok vandaag naast hogere kaarten staat, en
       een bredere regel zou een toekomstig grid stil van vorm veranderen. */
    .tcp-strook--sectie-afsluiting .tcpf-entry-grid__card--tail .tcpf-entry-grid__card-link {
        height: 100%;
    }

    .tcp-strook--sectie-afsluiting .tcpf-entry-grid__card--tail .tcpf-entry-grid__card-body {
        flex: 1;
        justify-content: center;
    }
}

/* Het staartblok in de ontwerpkleuren (v1.41.0, #180 C).

   DIT HEFT EEN GAT OP, HET IS GEEN ONTWERPAFWIJKING — geen WA7-notitie dus.
   Ontwerp `Honingsoort - Acaciahoning.dc.html` r131 tekent het staartblok als
   een DONKERE kaart; het is het enige element in de rij dat van de andere drie
   afwijkt, en dat verschil was nooit gebouwd:

       achtergrond   #241708    gebouwd t/m 1.40.0: #FFFDF7
       rand          #241708    gebouwd t/m 1.40.0: #EADFC8
       titel         #F2A71B    gebouwd t/m 1.40.0: #241708
       subregel      #C9B896    bestond nog niet

   VIER WAARDEN, VIER BESTAANDE TOKENS — geen rauwe hex:
       #241708 = --tcp-colors-text            de inkt. Dit theme schildert er al
                 dertien vlakken mee; `secondary` draagt dezelfde waarde maar is
                 in de config gedocumenteerd voor één specifieke knop-hover.
       #F2A71B = --tcp-colors-accent          het §2-accent. Het theme gebruikt
                 consequent `accent` (64 vindplaatsen) en nergens de gelijke
                 sleutel `primary` (0 vindplaatsen).
       #C9B896 = --tcp-colors-on-dark-muted   "secundair op donker" — exact de
                 rol die de subregel hier vervult.

   BUITEN de >=769-query hierboven, anders dan de vormregels van #178. Dit is
   geen layout maar identiteit: het staartblok is op ELKE breedte dezelfde
   donkere CTA-kaart, en hem alleen op desktop donker maken zou van één element
   twee verschijningsvormen maken. De vormregels blijven wél in de query, want
   die repareren een stomp die alleen naast hoge kaarten bestaat.

   CONTRAST (§9), gemeten in rust: titel 8,59:1 en subregel 8,98:1 op de inkt —
   beide ruim boven 4,5:1.

   ⚠ OP HOVER DIMT DE TITEL, gemeten en NIET opgelost: hij gaat naar
   `accent-dark` #B97812 = 4,79:1 op de inkt. Dat haalt §9 (AA vanaf 4,5:1) en
   is dus geen defect, maar op een DONKERE kaart leest donkerder-worden als
   dempen in plaats van als activeren. De hoverregel in kennisbank.css
   r723-725 staat op 0,5,0 — even hoog als de titelregel hieronder, want de
   titelklasse telt aan beide kanten mee — en kennisbank.css laadt ná dit
   bestand, dus die wint op BRONVOLGORDE. Wie dit wil omdraaien heeft één
   regel op 0,6,0 nodig; dat is een ontwerpbesluit en stond niet in de GO.
   De RAND gaat op hover wél naar accent (#F2A71B, 8,59:1 op inkt) — een
   leesbare affordance, en daarom zo gelaten.

   SPECIFICITEIT 0,4,0 (titel en subregel 0,5,0) tegen de 0,3,0 van de
   kaartregels in kennisbank.css r684-690: winnen op specificiteit, niet op
   bronvolgorde. `.tcp-pagina` en `.tcp-strook--sectie-afsluiting` staan op
   HETZELFDE <section>-element, vandaar aaneengeschreven.

   Radius en kaartvorm blijven ongemoeid — die komen van
   `.tcpf-entry-grid__card` en klopten al (gemeten 12px). */
.tcp-pagina.tcp-strook--sectie-afsluiting .tcpf-block--entry-grid .tcpf-entry-grid__card--tail {
    background: var(--tcp-colors-text);
    border-color: var(--tcp-colors-text);
}

.tcp-pagina.tcp-strook--sectie-afsluiting .tcpf-block--entry-grid .tcpf-entry-grid__card--tail .tcpf-entry-grid__card-title {
    color: var(--tcp-colors-accent-light);
}

/* De subregel bestaat pas ná #180 A (Framework) en B (config): `tail_card_html()`
   r1697-1721 emit vandaag alléén een titel. Deze regel is tot dan INERT — er is
   geen element om te raken — en zet de kleur klaar zodat de subregel meteen goed
   landt zonder een tweede themaronde. */
.tcp-pagina.tcp-strook--sectie-afsluiting .tcpf-block--entry-grid .tcpf-entry-grid__card--tail .tcpf-entry-grid__card-text {
    color: var(--tcp-colors-on-dark-muted);
}


/* De FAQ blijft leesbaar op volle breedte (v1.40.0, #178 B3).

   Nu de afsluitingssectie één kolom is, zou het antwoord meelopen tot de volle
   strookbreedte — gemeten 1440px binnenwerk tegen 636px in de tweekolomsvorm.
   Een regel van die lengte leest slecht, dus krijgt het ANTWOORD een leesmaat.

   Alleen het antwoord. De vraagregel blijft vol breed: dat is een korte regel
   met de chevron rechts, en die leest juist goed over de hele breedte.
   `details`/`summary`, het FAQPage-`<script>` en de kopruimte-regel hierboven
   blijven ongemoeid.

   Buiten de ≥769-query, want op smalle schermen is 72ch breder dan de viewport
   en is de regel vanzelf inert. */
.tcp-strook--sectie-afsluiting .tcpf-faq__antwoord {
    max-width: 72ch;
}

/*
 * De soortenpillen op de lichte band (v1.21.0).
 *
 * Het Framework geeft elke pil `background: var(--tcp-colors-surface)`
 * (tcpf-blocks.css r125). Op een canvas-strook valt dat op; op de pill-rij van
 * de pillar niet, want díé strook staat zélf op surface — pil en band kregen
 * daardoor exact dezelfde kleur (#FFFDF7 op #FFFDF7, gemeten op staging) en de
 * pil was alleen aan zijn randje te zien.
 *
 * Het ontwerp keert de twee om: `background:#FBF6EC` (canvas) op een band van
 * `#FFFDF7`. Dat is precies deze regel — geen nieuwe kleur, de twee bestaande
 * tokens omgedraaid. Gescoped op de surface-strook, zodat een pill-rij op een
 * canvas-strook zijn surface-pil houdt.
 */
.tcp-sec--surface .tcpf-block--pillar-nav .tcpf-pillar-nav__link {
    background: var(--tcp-colors-canvas);
}

/*
 * De hover-state van het Framework zet de pil op accent met surface-tekst
 * (#F2A71B met #FFFDF7 = 1,9:1). Onleesbaar, en §9-regel 1 verbiedt het. De
 * ink-kleur op accent haalt 8,59:1 — dezelfde combinatie als de accentknop.
 */
.tcp-sec--surface .tcpf-block--pillar-nav .tcpf-pillar-nav__link:hover,
.tcp-sec--surface .tcpf-block--pillar-nav .tcpf-pillar-nav__link:focus-visible {
    background: var(--tcp-colors-accent);
    border-color: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

/*
 * PATROON 4 — redactionele sectie naast de productrij.
 *
 * Ontwerp (`Pillar - Honing.dc.html` r102-119): grid 1fr/1fr, gap 56, met
 * per kolom twee kop-alinea-link-eenheden. Onze bron is één rijk tekstveld,
 * dus geen twee kolommen in de markup maar een tekstkolommen-opmaak met
 * expliciete breekregels: een kop breekt nooit los van zijn alinea, en een
 * alinea of link breekt niet middenin. Zo ontstaat dezelfde 2×2-indeling
 * zonder dat de redactie iets over kolommen hoeft te weten.
 */
@media (min-width: 1025px) {
    .tcp-strook--tekst .tcpf-block--beschrijving {
        columns: 2;
        column-gap: var(--tcp-spacing-split-gap-sm, 56px);
    }

    .tcp-strook--tekst .tcpf-block--beschrijving > * {
        break-inside: avoid;
    }

    .tcp-strook--tekst .tcpf-block--beschrijving h2,
    .tcp-strook--tekst .tcpf-block--beschrijving h3 {
        break-after: avoid;
    }

    .tcp-strook--tekst .tcpf-block--beschrijving > *:first-child {
        margin-top: 0;
    }
}

/* -----------------------------------------------------------------------
 * PATROON 3 — de donkere verhaalband.
 *
 * Ontwerp (`Pillar - Honing.dc.html` r121-130): background #1E1710
 * (= token surface-dark), padding 72px 56px, grid 1fr/1fr, gap 56,
 * align center; eyebrow in accent, H2 38px/1.1 in on-dark, tekst 15px/1.75
 * in on-dark-muted, knop accent met ink-tekst, beeld 400px hoog.
 * -------------------------------------------------------------------- */

.tcp-verhaal__binnen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tcp-spacing-split-gap-sm, 56px);
    align-items: center;
}

/* Beeld links i.p.v. rechts (v1.20.0). `Honing op oorsprong.dc.html` zet het
   beeld in de eerste kolom en de tekst in de tweede; `Pillar - Honing.dc.html`
   precies andersom. Alleen de leesvolgorde in het grid draait — de DOM-volgorde
   blijft tekst-eerst, zodat een schermlezer en een smal scherm de kop vóór het
   beeld krijgen. Onder 860px stapelt de band toch, dus daar doet dit niets. */
@media (min-width: 861px) {
    .tcp-verhaal--beeld-links .tcp-verhaal__tekst  { order: 2; }
    .tcp-verhaal--beeld-links .tcp-verhaal__media  { order: 1; }
}

.tcp-verhaal__tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px; /* ontwerp */
}

.tcp-verhaal__kop {
    margin: 0;
    font-family: var(--tcp-font-heading);
    font-weight: var(--tcp-weight-heading, 500);
    font-size: var(--tcp-size-h2-lg, clamp(30px, 4vw, 40px));
    line-height: var(--tcp-lh-h2-lg, 1.1);
    color: var(--tcp-colors-on-dark);
}

.tcp-verhaal__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: var(--tcp-size-body-sm, 15px);
    line-height: var(--tcp-lh-body-sm, 1.7);
    color: var(--tcp-colors-on-dark-muted);
}

.tcp-verhaal__body p { margin: 0; }

.tcp-verhaal__body a {
    color: var(--tcp-colors-accent-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tcp-verhaal .tcp-eyebrow { color: var(--tcp-colors-accent-light); }

.tcp-verhaal__cta { margin-top: 6px; } /* ontwerp */

.tcp-verhaal__media { height: 400px; } /* ontwerp */

/* Degradatie: geen beeld → één kolom, met de leeskolom GECENTREERD.
 *
 * ⚠ #243 — HET COMMENTAAR HIERONDER ZEI 'over de volle breedte' EN DE CODE DEED
 * IETS ANDERS. De kolom werd wél volle breedte (1328px op 1583 viewport), maar
 * de tekst hield `max-width: 820px` en stond links — dus **508px bleef leeg aan
 * de rechterkant**, in een DONKERE band, waar het het meest opvalt van de hele
 * pagina [GEMETEN door Beeffet-SEO, /imkerij/, 28-08]. Zij verwierp haar eigen
 * eerste lezing ('tweekoloms met een leeg beeldvak') en dat was terecht: er is
 * maar één kolom.
 *
 * DE 820px BLIJFT — dat is de leesmaat en die is het punt niet. Alleen de
 * PLAATSING was fout: `margin-inline: auto` maakt de resterende ruimte
 * symmetrisch, 254px aan beide kanten in plaats van 0 en 508.
 *
 * ⚠⚠ WAT HET ONTWERP HIER WERKELIJK ZEGT, en het is niet wat de opdracht
 * aanneemt. `Honing op oorsprong.dc.html` r93 tekent deze band **tweekoloms MÉT
 * beeld** (`grid-template-columns:1fr 1fr; gap:64px`, `image-slot
 * id="oorsprong-story"`), en `Over Beeffet.dc.html` doet hetzelfde. **Er bestaat
 * in de ontwerpbron géén kale prozaband.** De enige donkere band zónder beeld is
 * die van `Groothandel.dc.html`: volle breedte, geen leesmaat — maar die draagt
 * een kop met een driekolomsraster, geen proza.
 * **De 508px leegte is dus een ONTBREKEND BEELD, niet een ontwerpvorm.**
 *
 * Deze regel is daarom bewust ZELFOPHEFFEND: hij hangt aan `--kaal`, en zodra er
 * een beeld in de band komt draagt het blok die klasse niet meer en is de regel
 * vanzelf weg. Hij repareert de huidige stand zonder een toekomstige te blokkeren.
 *
 * SCOPE: `--kaal` raakt precies de zeven pagina's die de variant dragen
 * (imkerij, inkoop, beeffet-en-de-bijen, groothandel, wederverkoper-reseller,
 * over-beeffet, honing/oorsprong — acht plakblokken, want inkoop draagt er twee).
 * ⚠ De waarschuwing 'let op bloemenhoning en de homepage' beschrijft een toestand
 * die er niet meer is: GEMETEN 29-08 dragen die twee `tcp-verhaal` **0×**.
 */
.tcp-verhaal--kaal .tcp-verhaal__binnen { grid-template-columns: 1fr; }
.tcp-verhaal--kaal .tcp-verhaal__tekst  { max-width: 820px; margin-inline: auto; }

/* -----------------------------------------------------------------------
 * R2 — responsive (§6). Content stapelt op 860, zoals de rest van het
 * systeem; het ontwerp stapelt volgens de LEESMIJ onder 860 ook.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .tcp-kop--overlay { min-height: 380px; }
}

@media (max-width: 860px) {
    .tcp-kop--split .tcp-kop__binnen,
    .tcp-verhaal__binnen {
        grid-template-columns: 1fr;
    }

    .tcp-kop--split .tcp-kop__media { height: 300px; }
    .tcp-verhaal__media { height: 300px; }
    .tcp-kop--overlay { min-height: 340px; }

    .tcp-strook__binnen { gap: 28px; }
}

@media (max-width: 544px) {
    .tcp-kop__ctas { gap: 12px; }
    .tcp-kop__ctas > * { flex: 1 1 100%; }

    /* Hier stond t/m v1.26.0 `.tcp-kop--overlay { padding-block: 44px }` —
       vervallen in v1.26.1: de kop leest zijn verticale maat nu van
       `.tcp-sec`, die op deze breedte al 44px voert. Zie het blok bij
       `.tcp-kop`. */
}

/* =====================================================================
   DE PRODUCTKAART IN ELKE PRODUCTLOOP (1.67.0, Design #86 punt 3 en 4)
   ---------------------------------------------------------------------
   Deze twee regels staan HIER en niet in `shop.css` of `kennisbank.css`:
   zij moeten de KAART volgen en niet de view. `shop.css` laadt alleen op
   de winkelviews, en de productkaart staat ook op de soortpagina's, de
   landpagina's en de homepage. Dit bestand laadt overal.
   ===================================================================== */

/* ⛔ PUNT 3 — een LEEG wishlist-blok neemt geen ruimte in.
   Het blok is het eerste kind van de kaart, rendert leeg (hoogte 0) en
   krijgt van de plugin `margin: 7px auto` (0,1,0). De afbeelding begon
   daardoor op 15px en raakte de kaartradius niet.
   ⚠ `li.product` en NIET een Astra-klasse: GEMETEN door Design op
   /honing/acaciahoning/ heet de kaart daar `li.ast-article-single … product`
   en op de winkelviews `li.ast-article-post … product`. `product` dragen
   ze allebei; een Astra-variant erbij maakt de regel te smal — dat was het
   gat in 1.66.0.
   ⚠ `:empty` blijft de voorwaarde: krijgt het blok inhoud, dan geldt de
   marge van de plugin weer vanzelf. */
li.product > .yith-add-to-wishlist-button-block:empty {
    margin-block: 0;
}

/* ⛔ PUNT 4 — het voorraadlabel: een rustige chip in de HOEK van de foto.
   Astra zet `.ast-shop-product-out-of-stock` als wit vlak van 177×47 over
   de onderste helft van de foto, met de linkkleur #FF6210 in kapitalen
   (3,00 op wit — onder AA bij 16px). GEMETEN op live /shop/honing/.
   ⚠⚠ DIT IS DE TERUGVALVORM uit de GO en niet de voorkeursvorm ("in het
   tekstblok"). GEMETEN: Astra print het label BINNEN de fotolink
   (`a.woocommerce-LoopProduct-link` in `.astra-shop-thumbnail-wrap`), via
   `woocommerce_shop_loop_item_title` prio 8. Met CSS is het daar niet uit
   te halen; verplaatsen vraagt Astra's hook te vervangen. De GO schrijft
   voor dat geval deze vorm voor: dezelfde chip, linksonder op de foto,
   geometrisch gelijk aan `.tcp-kaart__chip-los`. Hij dekt een hoek in
   plaats van de halve foto.
   ⚠ SPECIFICITEIT: Astra's regel is `.woocommerce-js ul.products li.product
   .ast-shop-product-out-of-stock` (0,4,2). De klasse `.outofstock` op de
   kaart tilt deze naar 0,5,2 — winst op specificiteit, niet op laadvolgorde.
   ⚠ KLEUR sinds 1.68.0 (kleurronde): het eigen paar `badge-muted-bg` /
   `badge-muted-fg` (5,93). In 1.67.x stond hier `hover-bg` met `text-body`,
   een hoverkleur als badgevlak. Met hex-terugval, want het paar komt pas met
   config `v1_13_36` (tak 2). */
/* ⛔ DE HOVERTOESTAND HOORT ERBIJ (1.67.1, T13 van K013 — gevonden door RM).
   Astra heeft naast de rustregel `… li.product .woocommerce-loop-product__link:hover
   .ast-shop-product-out-of-stock { background-color: #fff }` op 0,6,2. Die won
   in 1.67.0 van onze rustregel (0,5,2): GEMETEN op staging werd de chip bij
   hover op de foto `rgb(255,255,255)`. De twee hoverselectors hieronder staan
   op 0,7,2 en dragen dezelfde declaraties, dus de chip verandert bij hover
   helemaal niet. */
.woocommerce-js ul.products li.product.outofstock .ast-shop-product-out-of-stock,
.woocommerce-page ul.products li.product.outofstock .ast-shop-product-out-of-stock,
.woocommerce-js ul.products li.product.outofstock .woocommerce-loop-product__link:hover .ast-shop-product-out-of-stock,
.woocommerce-page ul.products li.product.outofstock .woocommerce-loop-product__link:hover .ast-shop-product-out-of-stock {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 14px;
    left: 16px;
    width: auto;
    padding: 5px 12px;
    border-radius: var(--tcp-radius-pill, 999px);
    background: var(--tcp-colors-badge-muted-bg, #E7E4DC);
    color: var(--tcp-colors-badge-muted-fg, #57544F);
    font-family: var(--tcp-font-body);
    font-size: var(--tcp-size-eyebrow-sm, 12px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
}

/* ⛔ PRIJS in elke productloop: de tekstkleur, niet Astra's groen (1.69.0,
   kleurronde ronde 2, T4). Astra's `woocommerce-grid.min.css` zet
   `.woocommerce-js ul.products li.product .price` op #77A464 — 2,51 op
   `surface`, GEMETEN door Framework op de productrij van de homepage. De
   kaartregels in `kennisbank.css` dekken dat alleen binnen `.tcp-pagina`;
   de homepage laadt dat blad niet. Deze regel volgt de KAART.
   ⚠ `.product.product`: de dubbele klasse tilt de regel naar 0,4,2, boven
   Astra's 0,3,2 — winst op specificiteit, niet op laadvolgorde. */
.woocommerce-js ul.products li.product.product .price,
.woocommerce-page ul.products li.product.product .price {
    color: var(--tcp-colors-text);
}

/* ⛔ TELLER van het mini-winkelmandje (YITH Added to Cart Popup): accentvlak
   met `on-accent` (T6). De plugin zet wit op zijn eigen rood
   (`--yith-wacp-mini-cart-counter`), 4,27. `body` ervoor tilt de regel boven
   de plugin (`#yith-wacp-mini-cart .yith-wacp-mini-cart-count`, 1,1,0). */
body #yith-wacp-mini-cart .yith-wacp-mini-cart-count {
    background: var(--tcp-colors-accent);
    color: var(--tcp-colors-on-accent, #F9F8F4);
}

/*
 * HET KRUISJE IN DE WINKELWAGEN (1.70.7, Design #86). Astra's vaste stylesheet
 * zet op `.woocommerce-js a.remove` (0,2,1) een uitgeschreven systeemlettertype
 * [GEMETEN 2026-10-05, woocommerce-grid.min.css van Astra 4.13.12]. Dat is de
 * enige plek in Astra's en WooCommerce' vaste stylesheets waar het zo staat;
 * Astra's lettertype-optie bereikt hem niet. Hier de letter van lopende tekst.
 */
body.woocommerce-js a.remove {
    font-family: var(--tcp-font-body);
}

/*
 * "VERZENDEN NAAR EEN ANDER ADRES?" OP /afrekenen/ (1.70.8, Design #86).
 * WooCommerce zet dit aankruisvakje met zijn tekst in een `label` BINNEN een
 * `h3#ship-to-different-address` (templates/checkout/form-shipping.php r24-27).
 * Het label erfde de koppenletter van het `h3` en kreeg Astra's `label`-maat:
 * Cormorant Garamond 14px/500 in de labelkleur [BRON: dossier #86, Framework
 * 2026-10-05 13:14].
 * Het is een aankruisoptie, geen kop [BESLUIT Design 2026-10-05 15:38]: het
 * krijgt de vorm van het label "Een account aanmaken?" ernaast. Dat label staat
 * in een `.form-row` en krijgt daar van Astra's WooCommerce-stylesheet
 * `.woocommerce-js form .form-row label { font-size: .9rem; font-weight: 700;
 * line-height: 2 }` [GEMETEN 2026-10-05 op staging, met de markup van
 * WooCommerce in de pagina gezet]; het `h3` is geen `.form-row`, dus die regel
 * raakt dit label niet. Hier dezelfde drie waarden, de letter van lopende
 * tekst, en de kleur `text`. Het `h3` zelf blijft een `h3`.
 * ⚠ Wijzigt Astra die regel, dan lopen de twee labels uiteen.
 */
body #ship-to-different-address label {
    font-family: var(--tcp-font-body);
    font-size: .9rem;
    font-weight: 700;
    line-height: 2;
    color: var(--tcp-colors-text);
}