/* Designtokens — gesampled uit design/referentie/icetubs-*.png */
/* =====================================================================
   Wallcoustic — designtokens, gesampled van icetubs.nl (home + PDP)
   Licht = standaard op kale :root. Donker via prefers-color-scheme
   (met :root:not([data-theme="light"])) én expliciet [data-theme="dark"].
   ===================================================================== */
:root{
  color-scheme: light dark;

  /* ---- Vlakken ---- */
  --wc-paper:             #f4f1ec;  /* crème paginaachtergrond */
  --wc-paper-raised:      #faf8f4;
  --wc-band:              #ede7dd;  /* beige band / kaart op crème */
  --wc-band-deep:         #e4dbcd;
  --wc-surface:           #f4f1ec;  /* kaart op beige band */
  --wc-surface-alt:       #ede7dd;  /* kaart op crème pagina */
  --wc-surface-dark:      #2e2c2a;  /* warme donkere kaart/footer/pill */
  --wc-surface-dark-2:    #3a3734;
  --wc-surface-neutral:   #262626;  /* neutrale donkere voordelenband */

  /* ---- Tekst ---- */
  --wc-ink:               #242220;
  --wc-ink-lead:          #625f5a;
  --wc-ink-muted:         #6f6c69;
  --wc-ink-soft:          #8b857e;
  --wc-ink-invert:        #fefbf6;
  --wc-ink-invert-body:   #f4f1ec;
  --wc-ink-invert-muted:  #c5c5c5;
  --wc-ink-invert-soft:   #84817d;
  --wc-ink-invert-legal:  #74716e;
  --wc-ink-on-neutral:    #ffffff;
  --wc-ink-on-neutral-muted: #818181;

  /* ---- Accent ---- */
  --wc-accent:            #c85e40;
  --wc-accent-hover:      #b1502f;
  --wc-accent-active:     #9d4426;
  --wc-accent-ink:        #fffaf6;
  --wc-accent-quiet:      #f2e2da;
  --wc-badge:             #dd3e3c;
  --wc-badge-ink:         #fffaf6;

  /* ---- Lijnen, velden, focus ---- */
  --wc-line:              rgba(36,34,32,.20);   /* 1px hairline */
  --wc-line-soft:         rgba(36,34,32,.12);
  --wc-line-strong:       rgba(36,34,32,.80);   /* rand outline-knop */
  --wc-line-invert:       rgba(254,251,246,.80);
  --wc-line-invert-soft:  rgba(254,251,246,.18);
  --wc-field-bg:          #ede7dd;
  --wc-field-ink:         #242220;
  --wc-field-placeholder: #a49b94;
  --wc-focus:             #a4482a;

  /* ---- Effecten ---- */
  --wc-shadow-card:       none;                 /* kaarten hebben geen schaduw */
  --wc-shadow-pop:        0 10px 30px rgba(36,34,32,.12);
  --wc-scrim:             linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,0) 58%);

  /* ---- Typografie ---- */
  --wc-font: "Figtree","DM Sans","Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --wc-fw-regular: 400;
  --wc-fw-medium:  500;
  --wc-fs-display: clamp(2.25rem, 1.10rem + 3.60vw, 3.875rem); /* 36 → 62 */
  --wc-fs-h1:      clamp(2.00rem, 1.30rem + 2.20vw, 3.000rem); /* 32 → 48 */
  --wc-fs-h2:      clamp(1.75rem, 1.20rem + 1.75vw, 2.500rem); /* 28 → 40 */
  --wc-fs-h3:      clamp(1.375rem,1.05rem + 1.05vw,1.875rem);  /* 22 → 30 */
  --wc-fs-h4:      1.5625rem;  /* 25 */
  --wc-fs-card:    1.25rem;    /* 20 */
  --wc-fs-lead:    1.125rem;   /* 18 */
  --wc-fs-body:    1.0625rem;  /* 17 */
  --wc-fs-sm:      0.9375rem;  /* 15 */
  --wc-fs-xs:      0.8125rem;  /* 13 */
  --wc-fs-2xs:     0.75rem;    /* 12 */
  --wc-lh-display: 1.02;
  --wc-lh-heading: 1.06;
  --wc-lh-tight:   1.20;
  --wc-lh-body:    1.35;
  --wc-lh-loose:   1.50;
  --wc-ls-display: -0.02em;
  --wc-ls-heading: -0.015em;
  --wc-ls-body:    0em;
  --wc-ls-label:   0.01em;

  /* ---- Radius ---- */
  --wc-r-xs:   8px;
  --wc-r-sm:  12px;
  --wc-r-md:  16px;
  --wc-r-lg:  20px;
  --wc-r-xl:  24px;
  --wc-r-pill: 999px;

  /* ---- Ruimte ---- */
  --wc-sp-1:  4px;  --wc-sp-2:  8px;  --wc-sp-3: 12px; --wc-sp-4: 16px;
  --wc-sp-5: 20px;  --wc-sp-6: 24px;  --wc-sp-8: 32px; --wc-sp-10:40px;
  --wc-sp-12:48px;  --wc-sp-16:64px;  --wc-sp-20:80px; --wc-sp-24:96px;
  --wc-section-y:   clamp(56px, 7vw, 96px);
  --wc-container:       1250px;
  --wc-container-narrow:1040px;
  --wc-gutter:      clamp(20px, 5vw, 40px);
  --wc-grid-gap:    24px;
  --wc-card-pad:    24px;

  /* ---- Componentmaten ---- */
  --wc-topbar-h:  30px;
  --wc-header-h:  66px;
  --wc-btn-h:     52px;
  --wc-btn-h-sm:  44px;
  --wc-btn-h-lg:  56px;
  --wc-btn-px:    28px;
  --wc-btn-px-sm: 24px;
  --wc-input-h:   48px;
  --wc-chip-h:    28px;
  --wc-chip-px:   14px;
  --wc-icon-btn:  48px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wc-paper:             #1a1918;
    --wc-paper-raised:      #221f1e;
    --wc-band:              #232120;
    --wc-band-deep:         #2b2827;
    --wc-surface:           #262423;
    --wc-surface-alt:       #2e2c2a;
    --wc-surface-dark:      #131211;
    --wc-surface-dark-2:    #3a3734;
    --wc-surface-neutral:   #0f0f0f;

    --wc-ink:               #f4f1ec;
    --wc-ink-lead:          #cfc9c1;
    --wc-ink-muted:         #b3ada5;
    --wc-ink-soft:          #8b857d;
    --wc-ink-invert:        #fefbf6;
    --wc-ink-invert-body:   #f4f1ec;
    --wc-ink-invert-muted:  #b3ada5;
    --wc-ink-invert-soft:   #837e77;
    --wc-ink-invert-legal:  #767069;
    --wc-ink-on-neutral:    #ffffff;
    --wc-ink-on-neutral-muted: #9a9a9a;

    --wc-accent:            #d76e4d;
    --wc-accent-hover:      #e2825f;
    --wc-accent-active:     #c25e3f;
    --wc-accent-ink:        #1a1211;
    --wc-accent-quiet:      #3a2620;
    --wc-badge:             #e5514e;
    --wc-badge-ink:         #1a1211;

    --wc-line:              rgba(244,241,236,.16);
    --wc-line-soft:         rgba(244,241,236,.10);
    --wc-line-strong:       rgba(244,241,236,.72);
    --wc-line-invert:       rgba(244,241,236,.72);
    --wc-line-invert-soft:  rgba(244,241,236,.14);
    --wc-field-bg:          #2b2827;
    --wc-field-ink:         #f4f1ec;
    --wc-field-placeholder: #8b857d;
    --wc-focus:             #e08a6b;

    --wc-shadow-card:       none;
    --wc-shadow-pop:        0 10px 30px rgba(0,0,0,.55);
    --wc-scrim:             linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 58%);
  }
}

:root[data-theme="dark"]{
  --wc-paper:             #1a1918;
  --wc-paper-raised:      #221f1e;
  --wc-band:              #232120;
  --wc-band-deep:         #2b2827;
  --wc-surface:           #262423;
  --wc-surface-alt:       #2e2c2a;
  --wc-surface-dark:      #131211;
  --wc-surface-dark-2:    #3a3734;
  --wc-surface-neutral:   #0f0f0f;

  --wc-ink:               #f4f1ec;
  --wc-ink-lead:          #cfc9c1;
  --wc-ink-muted:         #b3ada5;
  --wc-ink-soft:          #8b857d;
  --wc-ink-invert:        #fefbf6;
  --wc-ink-invert-body:   #f4f1ec;
  --wc-ink-invert-muted:  #b3ada5;
  --wc-ink-invert-soft:   #837e77;
  --wc-ink-invert-legal:  #767069;
  --wc-ink-on-neutral:    #ffffff;
  --wc-ink-on-neutral-muted: #9a9a9a;

  --wc-accent:            #d76e4d;
  --wc-accent-hover:      #e2825f;
  --wc-accent-active:     #c25e3f;
  --wc-accent-ink:        #1a1211;
  --wc-accent-quiet:      #3a2620;
  --wc-badge:             #e5514e;
  --wc-badge-ink:         #1a1211;

  --wc-line:              rgba(244,241,236,.16);
  --wc-line-soft:         rgba(244,241,236,.10);
  --wc-line-strong:       rgba(244,241,236,.72);
  --wc-line-invert:       rgba(244,241,236,.72);
  --wc-line-invert-soft:  rgba(244,241,236,.14);
  --wc-field-bg:          #2b2827;
  --wc-field-ink:         #f4f1ec;
  --wc-field-placeholder: #8b857d;
  --wc-focus:             #e08a6b;

  --wc-shadow-card:       none;
  --wc-shadow-pop:        0 10px 30px rgba(0,0,0,.55);
  --wc-scrim:             linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 58%);
}

/* ---------------------------------------------------------------
   Gebruiksvoorbeelden (niet-normatief, maar 1-op-1 uit de analyse)
   --------------------------------------------------------------- */
body{ background: var(--wc-paper); color: var(--wc-ink);
      font: var(--wc-fw-regular) var(--wc-fs-body)/var(--wc-lh-body) var(--wc-font); }
.wc-section{ padding-block: var(--wc-section-y); }
.wc-section--band{ background: var(--wc-band); }
.wc-section--dark{ background: var(--wc-surface-neutral); color: var(--wc-ink-on-neutral); }
.wc-container{ max-width: var(--wc-container); margin-inline: auto; padding-inline: var(--wc-gutter); }
.wc-container--narrow{ max-width: var(--wc-container-narrow); }

h1,.wc-display{ font-size: var(--wc-fs-display); line-height: var(--wc-lh-display);
                letter-spacing: var(--wc-ls-display); font-weight: var(--wc-fw-medium); }
h2{ font-size: var(--wc-fs-h2); line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading); font-weight: var(--wc-fw-medium); }
p{ color: var(--wc-ink-muted); }

.wc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height: var(--wc-btn-h); padding-inline: var(--wc-btn-px);
  border-radius: var(--wc-r-pill); border:0; cursor:pointer;
  font: var(--wc-fw-medium) var(--wc-fs-body)/1 var(--wc-font); text-decoration:none; }
.wc-btn--primary{ background: var(--wc-accent); color: var(--wc-accent-ink); }
.wc-btn--primary:hover{ background: var(--wc-accent-hover); }
.wc-btn--outline{ background: transparent; color: var(--wc-ink);
                  box-shadow: inset 0 0 0 1px var(--wc-line-strong); }
.wc-btn--dark{ background: var(--wc-surface-dark); color: var(--wc-ink-invert-body);
               width:100%; height:48px; }
.wc-btn--on-dark{ background: transparent; color: var(--wc-ink-invert);
                  box-shadow: inset 0 0 0 1px var(--wc-line-invert); }
.wc-btn:focus-visible{ outline: 2px solid var(--wc-focus); outline-offset: 2px; }

.wc-card{ background: var(--wc-surface); border-radius: var(--wc-r-md);
          padding: var(--wc-card-pad); box-shadow: var(--wc-shadow-card); border:0; overflow:hidden; }
.wc-card__media{ margin: calc(var(--wc-card-pad) * -1) calc(var(--wc-card-pad) * -1) 28px;
                 position:relative; aspect-ratio: 3/2; }
.wc-card__media::after{ content:""; position:absolute; inset:0; background: var(--wc-scrim); }
.wc-card__divider{ height:1px; background: var(--wc-line); border:0; margin: 24px 0 20px; }


/* Gedeelde basis: knoppen, kaarten, chips, secties, container, sr-only */
/* =====================================================================
   public/css/blocks-base.css — GEDEELD BASISBLOK
   Zet dit boven alle sectie-CSS in blocks.css. Verwijder daarna uit de
   secties: .wc-blk-btn* (social + split), .wc-blk-hero__knop*,
   .wc-blk-types__btn, .wc-blk-types__help-btn, .wc-blk-voordelen-knop,
   .wc-blk-zakelijk-btn*, .wc-blk-blog-more, .wc-blk-ftr-submit,
   .wc-blk-trust-sr, .wc-blk-visueel-verborgen, .wc-blk-ftr-sr,
   .wc-blk-hero__kicker, .wc-blk-quote__rol, .wc-blk-blog-badge,
   .wc-blk-types__badge, .wc-blk-zakelijk-kicker, .wc-blk-social-hint,
   en elke eigen box-sizing-reset.
   Enqueue: wp_enqueue_style('wc-blocks', ..., array('wc-configurator'), $ver)
   zodat dit ALTIJD na configurator.css laadt.
   ===================================================================== */

/* --- 1. Reset. Eén keer, in plaats van 11 keer per sectie. ----------- */
[class*="wc-blk-"],
[class*="wc-blk-"] *,
[class*="wc-blk-"] *::before,
[class*="wc-blk-"] *::after {
    box-sizing: border-box;
}

/* --- 2. Sectieromp: achtergrond, ritme, container ------------------- */
.wc-blk-section {
    padding-block: var(--wc-section-y);
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-regular);
    line-height: var(--wc-lh-body);
    -webkit-font-smoothing: antialiased;
}

.wc-blk-section--band   { background: var(--wc-band); }
.wc-blk-section--geen   { background: transparent; }

/* Donkere band: één definitie, één inktfamilie (invert). De
   "on-neutral"-familie uit [wallcoustic_voordelen] vervalt hiermee. */
.wc-blk-section--donker {
    background: var(--wc-surface-neutral);
    color: var(--wc-ink-invert-body);
}

/* Full bleed. Eén techniek: margin-inline, nooit width:100vw (dat telt
   de scrollbar mee). Werkt alleen op een block-level kind van de
   pagina-container, niet in een flex- of grid-kolom. */
.wc-blk-bleed {
    margin-inline: calc(50% - 50vw);
}

.wc-blk-container {
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
}

.wc-blk-container--smal { max-width: var(--wc-container-narrow); }

/* --- 3. Sectiekop --------------------------------------------------- */
.wc-blk-head {
    max-width: 42rem;
    margin: 0 auto var(--wc-sp-12);
    text-align: center;
}

.wc-blk-head--links { margin-inline: 0; text-align: left; }

.wc-blk-kop {
    margin: 0;
    color: inherit;
    font-size: var(--wc-fs-h2);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
    text-wrap: balance;
}

/* <em> in een kop is overal een accent, nooit cursief. Op een lichte
   grond terracotta, op een donkere grond gedempt licht — terracotta
   haalt op bijna-zwart geen 4.5:1. */
.wc-blk-kop em { font-style: normal; color: var(--wc-accent); }
.wc-blk-section--donker .wc-blk-kop em,
.wc-blk-op-beeld .wc-blk-kop em { color: var(--wc-ink-invert-muted); }

.wc-blk-lead {
    margin: var(--wc-sp-4) auto 0;
    max-width: 52ch;
    color: var(--wc-ink-lead);
    font-size: var(--wc-fs-lead);
    line-height: var(--wc-lh-loose);
    text-wrap: pretty;
}

.wc-blk-head--links .wc-blk-lead { margin-inline: 0; }
.wc-blk-section--donker .wc-blk-lead { color: var(--wc-ink-invert-body); }

/* --- 4. Knop. DE ENIGE knopdefinitie. ------------------------------- */
/* Naamgeving: dubbel streepje voor modifiers, overeenkomstig
   WC_Configurator_Blocks::button(). Varianten: primair, leeg, ink,
   licht (= omlijnd op donkere grond). */
.wc-blk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wc-sp-2);
    min-height: var(--wc-btn-h);
    padding-inline: var(--wc-btn-px);
    border: 0;
    border-radius: var(--wc-r-pill);
    background: transparent;
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.wc-blk-btn--sm { min-height: var(--wc-btn-h-sm); padding-inline: var(--wc-btn-px-sm); font-size: var(--wc-fs-sm); }
.wc-blk-btn--vol { width: 100%; }

.wc-blk-btn--primair { background: var(--wc-accent); color: var(--wc-accent-ink); }
.wc-blk-btn--primair:hover,
.wc-blk-btn--primair:focus-visible { background: var(--wc-accent-hover); color: var(--wc-accent-ink); }
.wc-blk-btn--primair:active { background: var(--wc-accent-active); }

.wc-blk-btn--leeg { color: var(--wc-ink); box-shadow: inset 0 0 0 1px var(--wc-line-strong); }
.wc-blk-btn--leeg:hover,
.wc-blk-btn--leeg:focus-visible { background: var(--wc-ink); color: var(--wc-paper); }

.wc-blk-btn--ink { background: var(--wc-surface-dark); color: var(--wc-ink-invert-body); }
.wc-blk-btn--ink:hover,
.wc-blk-btn--ink:focus-visible { background: var(--wc-surface-dark-2); color: var(--wc-ink-invert); }

/* Omlijnd op een donkere band of foto. */
.wc-blk-btn--licht { color: var(--wc-ink-invert); box-shadow: inset 0 0 0 1px var(--wc-line-invert); }
.wc-blk-btn--licht:hover,
.wc-blk-btn--licht:focus-visible { background: var(--wc-ink-invert); color: var(--wc-surface-neutral); }

.wc-blk-btn[disabled],
.wc-blk-btn[aria-disabled="true"] { opacity: .6; cursor: default; }

.wc-blk-btn__arrow { display: inline-flex; flex: none; }
.wc-blk-btn__arrow svg { display: block; }

/* --- 5. Ronde icoonknop (carrousel-pijlen, socials) ----------------- */
.wc-blk-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wc-icon-btn);
    height: var(--wc-icon-btn);
    padding: 0;
    border: 0;
    border-radius: var(--wc-r-pill);
    background: var(--wc-paper);
    color: var(--wc-ink);
    box-shadow: inset 0 0 0 1px var(--wc-line);
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.wc-blk-iconbtn:hover:not(:disabled) { background: var(--wc-band); box-shadow: inset 0 0 0 1px var(--wc-line-strong); }
.wc-blk-iconbtn:disabled { opacity: .35; cursor: default; }
.wc-blk-iconbtn svg { display: block; }

/* --- 6. Chip / badge. Eén vorm, twee gronden. ---------------------- */
.wc-blk-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wc-sp-2);
    min-height: var(--wc-chip-h);
    padding-inline: var(--wc-chip-px);
    border-radius: var(--wc-r-xs);
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-xs);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    letter-spacing: var(--wc-ls-label);
    white-space: nowrap;
}

.wc-blk-chip--accent { background: var(--wc-badge); color: var(--wc-badge-ink); }
.wc-blk-chip--glas   { background: color-mix(in srgb, var(--wc-surface-dark) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* --- 7. Kaart ------------------------------------------------------- */
.wc-blk-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--wc-card-pad);
    border: 0;
    border-radius: var(--wc-r-md);
    background: var(--wc-surface);
    box-shadow: var(--wc-shadow-card);
    overflow: hidden;
}

.wc-blk-card--vlak { background: var(--wc-band); box-shadow: none; }

/* Fotovlak in een kaart, met scrim. Vervangt de drie eigen varianten. */
.wc-blk-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--wc-band-deep);
    text-decoration: none;
}

.wc-blk-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-blk-media--scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wc-scrim);
    pointer-events: none;
}

/* Verlopende scrim voor een tekstkolom over een foto (hero, zakelijk). */
.wc-blk-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--wc-scrim);
    background: linear-gradient(to top,
        color-mix(in srgb, var(--wc-surface-neutral) 84%, transparent) 0%,
        color-mix(in srgb, var(--wc-surface-neutral) 54%, transparent) 46%,
        transparent 88%);
}

@media (min-width: 768px) {
    .wc-blk-scrim--links {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--wc-surface-neutral) 84%, transparent) 0%,
            color-mix(in srgb, var(--wc-surface-neutral) 62%, transparent) 34%,
            transparent 72%),
            linear-gradient(to top,
            color-mix(in srgb, var(--wc-surface-neutral) 40%, transparent) 0%,
            transparent 42%);
    }
}

/* --- 8. Raster ------------------------------------------------------ */
.wc-blk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wc-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) { .wc-blk-grid--2, .wc-blk-grid--3, .wc-blk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
    .wc-blk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wc-blk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 9. Icoon ------------------------------------------------------- */
.wc-blk-icon { display: block; width: 100%; height: 100%; }

.wc-blk-icoonvlak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wc-sp-8);
    height: var(--wc-sp-8);
    color: inherit;
}

.wc-blk-icoonvlak--rond { border: 1px solid var(--wc-line); border-radius: var(--wc-r-pill); }
.wc-blk-section--donker .wc-blk-icoonvlak--rond { border-color: var(--wc-line-invert-soft); }

/* --- 10. Focus. Eén ring, twee gronden. ---------------------------- */
[class*="wc-blk-"] a:focus-visible,
[class*="wc-blk-"] button:focus-visible,
[class*="wc-blk-"] input:focus-visible,
[class*="wc-blk-"] [tabindex]:focus-visible {
    outline: 2px solid var(--wc-focus);
    outline-offset: 3px;
    border-radius: var(--wc-r-xs);
}

/* Op donkere banden en over foto's: terracotta haalt daar geen 3:1. */
.wc-blk-section--donker a:focus-visible,
.wc-blk-section--donker button:focus-visible,
.wc-blk-section--donker input:focus-visible,
.wc-blk-op-beeld a:focus-visible,
.wc-blk-op-beeld button:focus-visible {
    outline-color: var(--wc-ink-invert);
}

/* Nooit `outline: none` zonder vervanging. Voor stretched-link-kaarten
   die de ring anders wegklippen: de ring op de kaart in plaats van op
   het pseudo-element, zodat overflow:hidden hem niet afsnijdt. */
.wc-blk-stretch { position: relative; }
.wc-blk-stretch__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.wc-blk-stretch:has(.wc-blk-stretch__link:focus-visible) {
    outline: 2px solid var(--wc-focus);
    outline-offset: 3px;
}
.wc-blk-section--donker .wc-blk-stretch:has(.wc-blk-stretch__link:focus-visible),
.wc-blk-op-beeld.wc-blk-stretch:has(.wc-blk-stretch__link:focus-visible) { outline-color: var(--wc-ink-invert); }

/* --- 11. Alleen voor schermlezers ---------------------------------- */
.wc-blk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* --- 12. Horizontale rail (carrousels) ----------------------------- */
.wc-blk-rail {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wc-blk-rail::-webkit-scrollbar { display: none; }
.wc-blk-rail > * { scroll-snap-align: start; }

/* --- 13. Beheerdershint (wallcoustic_hint) ------------------------- */
.wc-blk-hint {
    max-width: var(--wc-container-narrow);
    margin: var(--wc-sp-6) auto;
    padding: var(--wc-sp-5) var(--wc-sp-6);
    border-radius: var(--wc-r-sm);
    background: var(--wc-accent-quiet);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-loose);
}

/* --- 14. Bewegingsvoorkeur. Eén keer, voor alle blokken. ----------- */
@media (prefers-reduced-motion: reduce) {
    [class*="wc-blk-"],
    [class*="wc-blk-"] *,
    [class*="wc-blk-"] *::before,
    [class*="wc-blk-"] *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .wc-blk-rail { scroll-snap-type: none; }
}



/* ==================== usp_bar */
/* =====================================================================
   USP-balk — [wallcoustic_usp_bar]
   Twee varianten uit het ontwerp:
   .wc-blk-uspbar-donker → de smalle charcoal topbalk (30px)
   .wc-blk-uspbar-band   → de beige strip onder de hero (67px)
   Mobiel: .wc-blk-uspbar-mob-scroll (swipen) of .wc-blk-uspbar-mob-twee.
   ===================================================================== */

.wc-blk-uspbar {
    --wc-blk-usp-cols: 4;
    width: 100%;
    font-family: var(--wc-font);
    font-weight: var(--wc-fw-regular);
    letter-spacing: var(--wc-ls-label);
    line-height: var(--wc-lh-tight);
}

.wc-blk-uspbar,
.wc-blk-uspbar *,
.wc-blk-uspbar *::before,
.wc-blk-uspbar *::after {
    box-sizing: border-box;
}

/* ---- Variant: donkere topbalk ---- */
.wc-blk-uspbar-donker {
    --wc-blk-usp-min: var(--wc-topbar-h);
    --wc-blk-usp-py: var(--wc-sp-1);
    --wc-blk-usp-icon: 15px;
    --wc-blk-usp-focus: var(--wc-line-invert);
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-xs);
}

/* ---- Variant: beige strip ---- */
.wc-blk-uspbar-band {
    --wc-blk-usp-min: 67px;
    --wc-blk-usp-py: var(--wc-sp-4);
    --wc-blk-usp-icon: 18px;
    --wc-blk-usp-focus: var(--wc-focus);
    background: var(--wc-band);
    color: var(--wc-ink-lead);
    font-size: var(--wc-fs-sm);
    border-top: 1px solid var(--wc-line-soft);
    border-bottom: 1px solid var(--wc-line-soft);
}

/* ---- De rij zelf: mobiel een scrollstrook ---- */
.wc-blk-uspbar-list {
    display: flex;
    align-items: center;
    gap: var(--wc-sp-5);
    max-width: var(--wc-container);
    min-height: var(--wc-blk-usp-min);
    margin: 0 auto;
    padding: var(--wc-blk-usp-py) var(--wc-gutter);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.wc-blk-uspbar-list::-webkit-scrollbar {
    display: none;
}

.wc-blk-uspbar-list:focus-visible {
    outline: 2px solid var(--wc-blk-usp-focus);
    outline-offset: -2px;
}

.wc-blk-uspbar-item {
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: center;
}

.wc-blk-uspbar-inner {
    display: inline-flex;
    align-items: center;
    gap: var(--wc-sp-2);
    color: inherit;
    text-decoration: none;
}

a.wc-blk-uspbar-inner {
    transition: opacity 0.2s ease;
}

a.wc-blk-uspbar-inner:hover {
    opacity: 0.82;
}

a.wc-blk-uspbar-inner:hover .wc-blk-uspbar-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.wc-blk-uspbar-inner:focus-visible {
    outline: 2px solid var(--wc-blk-usp-focus);
    outline-offset: 3px;
    border-radius: var(--wc-r-xs);
}

/* ---- Icoon ---- */
.wc-blk-uspbar-icon {
    display: block;
    flex: 0 0 auto;
    width: var(--wc-blk-usp-icon);
    height: var(--wc-blk-usp-icon);
}

.wc-blk-uspbar-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wc-blk-uspbar-donker .wc-blk-uspbar-icon {
    color: var(--wc-ink-invert-muted);
}

.wc-blk-uspbar-band .wc-blk-uspbar-icon {
    color: var(--wc-ink-muted);
}

/* ---- Tekst ---- */
.wc-blk-uspbar-text {
    white-space: nowrap;
}

.wc-blk-uspbar-text b,
.wc-blk-uspbar-text strong {
    font-weight: var(--wc-fw-medium);
}

/* ---- Mobiel: teruggebracht tot twee claims ---- */
@media (max-width: 767px) {
    .wc-blk-uspbar-mob-twee .wc-blk-uspbar-list {
        overflow-x: visible;
        scroll-snap-type: none;
        gap: var(--wc-sp-4);
        justify-content: space-between;
    }

    .wc-blk-uspbar-mob-twee .wc-blk-uspbar-item {
        flex: 0 1 auto;
    }

    /* Alles vanaf de derde claims valt weg; de balk blijft één regel hoog. */
    .wc-blk-uspbar-mob-twee .wc-blk-uspbar-item:nth-child(n + 3) {
        display: none;
    }

    .wc-blk-uspbar-mob-twee .wc-blk-uspbar-inner {
        align-items: flex-start;
    }

    .wc-blk-uspbar-mob-twee .wc-blk-uspbar-text {
        white-space: normal;
    }
}

/* ---- Vanaf tablet: gelijkmatig verdeelde kolommen ---- */
@media (min-width: 768px) {
    .wc-blk-uspbar-list {
        display: grid;
        grid-template-columns: repeat(var(--wc-blk-usp-cols), minmax(0, 1fr));
        gap: var(--wc-sp-4);
        overflow: visible;
        scroll-snap-type: none;
    }

    .wc-blk-uspbar-item {
        display: flex;
        justify-content: center;
    }

    /* De hogere beige strip mag over twee regels lopen, de topbalk nooit. */
    .wc-blk-uspbar-band .wc-blk-uspbar-inner {
        align-items: flex-start;
    }

    .wc-blk-uspbar-band .wc-blk-uspbar-icon {
        margin-top: 1px;
    }

    .wc-blk-uspbar-band .wc-blk-uspbar-text {
        white-space: normal;
        line-height: var(--wc-lh-body);
    }
}

/* ---- Bewegingsvoorkeur respecteren ---- */
@media (prefers-reduced-motion: reduce) {
    .wc-blk-uspbar-list {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }

    a.wc-blk-uspbar-inner {
        transition: none;
    }
}


/* ==================== hero */
/* =====================================================================
   Hero — [wallcoustic_hero]
   ---------------------------------------------------------------------
   Full-bleed foto met leesbaarheidslaag, display-kop links en twee pills.
   De foto zit als <img> in de HTML (LCP); de CSS doet alleen de uitsnede.
   Alle kleuren komen uit de tokens, dus licht en donker volgen vanzelf.
   ===================================================================== */

.wc-blk-hero{
    --wcb-hero-h: 88vh;          /* overschreven via style="" op de sectie */
    --wcb-hero-focus: 50% 50%;   /* object-position van de foto           */

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* Mobiel eerst: nooit lager dan 520px, verder wat de eigenaar instelt.
       min-height (geen height) zodat lange tekst het blok laat groeien
       in plaats van eruit te lopen. */
    min-height: max(520px, var(--wcb-hero-h));
    overflow: hidden;
    background: var(--wc-surface-neutral);
    color: var(--wc-ink-invert);
    font-family: var(--wc-font);
    -webkit-font-smoothing: antialiased;
}

.wc-blk-hero,
.wc-blk-hero *,
.wc-blk-hero *::before,
.wc-blk-hero *::after{
    box-sizing: border-box;
}

@media (min-width: 1024px){
    .wc-blk-hero{
        min-height: max(620px, var(--wcb-hero-h));
    }
}

/* Volle breedte binnen een Elementor- of Kadence-container.
   width:100vw vermijden we bewust: negatieve marges houden het element
   binnen de documentbreedte in plaats van erbuiten. */
.wc-blk-hero--vol{
    margin-inline: calc(50% - 50vw);
}

/* De 50vw-truc telt de verticale scrollbar mee. overflow-x:clip op <html>
   vangt die paar pixels af zonder een scrollcontainer te maken — anders dan
   overflow:hidden — zodat de vaste .wc-header (position:fixed) blijft werken. */
@supports (overflow: clip) and selector(:has(*)){
}

/* Ingekaderde variant: [wallcoustic_hero breed="0"] */
.wc-blk-hero:not(.wc-blk-hero--vol){
    border-radius: var(--wc-r-xl);
}

/* Zonder foto valt de hero terug op de donkere band; de tekst blijft leesbaar. */
.wc-blk-hero--geen-foto{
    min-height: max(420px, var(--wcb-hero-h));
    background: var(--wc-surface-neutral);
}

/* ----------------------------------------------------------------- Foto */

.wc-blk-hero__media{
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background: var(--wc-surface-neutral);
}

.wc-blk-hero__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--wcb-hero-focus);
}

/* Leesbaarheidslaag. Mobiel van onderaf (tekst staat onderin de kolom),
   vanaf tablet van links, precies zoals in het ontwerp.
   Eerste declaratie is de token-terugval voor browsers zonder color-mix(). */
.wc-blk-hero__scrim{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--wc-scrim);
    background:
        linear-gradient(to top,
            color-mix(in srgb, var(--wc-surface-neutral) 84%, transparent) 0%,
            color-mix(in srgb, var(--wc-surface-neutral) 54%, transparent) 46%,
            transparent 88%);
}

@media (min-width: 768px){
    .wc-blk-hero__scrim{
        background:
            linear-gradient(to right,
                color-mix(in srgb, var(--wc-surface-neutral) 80%, transparent) 0%,
                color-mix(in srgb, var(--wc-surface-neutral) 58%, transparent) 34%,
                transparent 70%),
            linear-gradient(to top,
                color-mix(in srgb, var(--wc-surface-neutral) 40%, transparent) 0%,
                transparent 42%);
    }
}

/* -------------------------------------------------------------- Inhoud */

.wc-blk-hero__inner{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
    padding-block: var(--wc-section-y);
}

.wc-blk-hero__col{
    max-width: 100%;
}

@media (min-width: 768px){
    .wc-blk-hero__col{
        max-width: 39rem;   /* ~4 regels display-kop, zoals in het ontwerp */
    }
}

/* Chip boven de kop. */
.wc-blk-hero__kicker{
    display: inline-flex;
    align-items: center;
    gap: var(--wc-sp-2);
    min-height: var(--wc-chip-h);
    margin: 0 0 var(--wc-sp-5);
    padding-inline: var(--wc-chip-px);
    border-radius: var(--wc-r-xs);
    background: var(--wc-surface-dark);
    background: color-mix(in srgb, var(--wc-surface-dark) 72%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-xs);
    line-height: 1.35;
    letter-spacing: var(--wc-ls-label);
}

.wc-blk-hero__titel{
    margin: 0;
    color: var(--wc-ink-invert);
    font-size: var(--wc-fs-display);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-display);
    letter-spacing: var(--wc-ls-display);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* <em> in de titel is een tonaal accent, geen cursief: op een foto blijft
   gedempt wit leesbaar waar terracotta dat niet gegarandeerd is. */
.wc-blk-hero__titel em{
    font-style: normal;
    color: var(--wc-ink-invert-muted);
}

.wc-blk-hero__tekst{
    max-width: 34rem;
    margin: var(--wc-sp-5) 0 0;
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-lead);
    line-height: var(--wc-lh-loose);
}

/* -------------------------------------------------------------- Knoppen */

.wc-blk-hero__acties{
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-sp-3);
    margin-top: var(--wc-sp-8);
}

@media (min-width: 768px){
    .wc-blk-hero__acties{
        margin-top: var(--wc-sp-10);
    }
}

.wc-blk-hero__knop{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wc-sp-2);
    flex: 1 1 100%;              /* mobiel: volle breedte, groot raakvlak */
    min-height: var(--wc-btn-h);
    padding: var(--wc-sp-3) var(--wc-btn-px);
    border: 0;
    border-radius: var(--wc-r-pill);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

@media (min-width: 480px){
    .wc-blk-hero__knop{
        flex: 0 0 auto;
    }
}

.wc-blk-hero__knop--primair{
    background: var(--wc-accent);
    color: var(--wc-accent-ink);
}

.wc-blk-hero__knop--primair:hover,
.wc-blk-hero__knop--primair:focus-visible{
    background: var(--wc-accent-hover);
    color: var(--wc-accent-ink);
}

.wc-blk-hero__knop--primair:active{
    background: var(--wc-accent-active);
}

.wc-blk-hero__knop--omlijnd{
    background: transparent;
    color: var(--wc-ink-invert);
    box-shadow: inset 0 0 0 1px var(--wc-line-invert);
}

.wc-blk-hero__knop--omlijnd:hover,
.wc-blk-hero__knop--omlijnd:focus-visible{
    background: color-mix(in srgb, var(--wc-ink-invert) 16%, transparent);
    color: var(--wc-ink-invert);
}

.wc-blk-hero__knop:focus-visible,
.wc-blk-hero a:focus-visible{
    outline: 2px solid var(--wc-focus);
    outline-offset: 3px;
}

.wc-blk-hero__pijl{
    display: inline-flex;
    flex: none;
}

.wc-blk-hero__notitie{
    margin: var(--wc-sp-5) 0 0;
    color: var(--wc-ink-invert-muted);
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-body);
}

/* -------------------------------------------------------------- Beweging */

@media (prefers-reduced-motion: no-preference){
    .wc-blk-hero__knop:hover .wc-blk-hero__pijl,
    .wc-blk-hero__knop:focus-visible .wc-blk-hero__pijl{
        transform: translateX(3px);
    }

    .wc-blk-hero__pijl{
        transition: transform .2s ease;
    }

    /* Korte, gestaffelde opkomst van de tekst. De foto animeert bewust niet:
       die is het LCP-element en moet meteen scherp in beeld staan. */
    .wc-blk-hero__col > *{
        animation: wc-blk-hero-in .55s cubic-bezier(.2,.7,.3,1) both;
    }
    .wc-blk-hero__col > *:nth-child(2){ animation-delay: .05s; }
    .wc-blk-hero__col > *:nth-child(3){ animation-delay: .10s; }
    .wc-blk-hero__col > *:nth-child(4){ animation-delay: .15s; }
    .wc-blk-hero__col > *:nth-child(5){ animation-delay: .20s; }
}

@keyframes wc-blk-hero-in{
    from{ opacity: 0; transform: translateY(12px); }
    to  { opacity: 1; transform: none; }
}


/* ==================== trust */
/* ============================================================================
   Trust-strip — [wallcoustic_trust]
   De beige band direct onder de hero: vier korte bewijsregels met lijnicoon.
   De band is de groeperende kleur, niet de crème paginakleur, zodat de strip
   de hero visueel afsluit. Werkt licht én donker via de tokens.
   ========================================================================== */

.wc-blk-trust {
    /* Lokale maten; de tokens blijven ongemoeid. */
    --wc-blk-trust-icon: 18px;
    --wc-blk-trust-cols: 4;

    background: var(--wc-band);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    -webkit-font-smoothing: antialiased;
}

.wc-blk-trust *,
.wc-blk-trust *::before,
.wc-blk-trust *::after {
    box-sizing: border-box;
}

.wc-blk-trust-inner {
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
    padding-block: var(--wc-sp-5);
}

/* De kop houdt de documentstructuur kloppend (hero-h1 → deze h2 → rest),
   maar is visueel geen onderdeel van de strip. */
.wc-blk-trust-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.wc-blk-trust-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wc-sp-3) var(--wc-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-trust-item {
    margin: 0;
    padding: 0;
    min-width: 0;
    list-style: none;
}

.wc-blk-trust-item::marker {
    content: "";
}

/* Zowel de link- als de span-variant gebruikt dezelfde rij. */
.wc-blk-trust-link {
    display: flex;
    align-items: center;
    gap: var(--wc-sp-3);
    min-width: 0;
    color: var(--wc-ink-lead);
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-body);
    font-weight: var(--wc-fw-regular);
    letter-spacing: var(--wc-ls-body);
    text-decoration: none;
    border-radius: var(--wc-r-xs);
}

a.wc-blk-trust-link {
    transition: color 0.2s ease;
}

a.wc-blk-trust-link:hover,
a.wc-blk-trust-link:focus-visible {
    color: var(--wc-ink);
}

a.wc-blk-trust-link:hover .wc-blk-trust-text {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.wc-blk-trust-link:focus-visible {
    outline: 2px solid var(--wc-focus);
    outline-offset: 3px;
}

/* Het icoon staat op inktkleur en krimpt nooit mee met een lange regel. */
.wc-blk-trust-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-ink);
}

.wc-blk-trust-icon svg {
    display: block;
    width: var(--wc-blk-trust-icon);
    height: var(--wc-blk-trust-icon);
}

.wc-blk-trust-text {
    min-width: 0;
    text-wrap: pretty;
}

.wc-blk-trust-text b,
.wc-blk-trust-text strong {
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
}

.wc-blk-trust-text em {
    font-style: italic;
}

/* Vanaf twee kolommen: 2x2 op tablet. */
@media (min-width: 560px) {
    .wc-blk-trust-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wc-sp-4) var(--wc-sp-8);
    }
}

/* Op desktop staat de rij edge-to-edge in evenveel kolommen als er items zijn. */
@media (min-width: 1000px) {
    .wc-blk-trust-inner {
        padding-block: var(--wc-sp-6);
    }

    .wc-blk-trust-list {
        grid-template-columns: repeat(var(--wc-blk-trust-cols), minmax(0, 1fr));
        gap: var(--wc-sp-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    a.wc-blk-trust-link {
        transition: none;
    }
}


/* ==================== producttypes */
/* =====================================================================
   [wallcoustic_producttypes] — producttype-kaarten
   Beige band met een gecentreerde kop en een raster van crème kaarten.
   Alleen tokens uit de Wallcoustic-designtokens; werkt licht én donker.
   ===================================================================== */

.wc-blk-types {
    background: var(--wc-band);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-body);
    padding-block: var(--wc-section-y);
}

.wc-blk-types *,
.wc-blk-types *::before,
.wc-blk-types *::after {
    box-sizing: border-box;
}

.wc-blk-types__inner {
    max-width: var(--wc-container-narrow);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
}

/* ------------------------------------------------------------ Sectiekop */

.wc-blk-types__head {
    max-width: 42rem;
    margin: 0 auto var(--wc-sp-12);
    text-align: center;
}

.wc-blk-types__title {
    margin: 0;
    color: var(--wc-ink);
    font-size: var(--wc-fs-h2);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
}

.wc-blk-types__lead {
    margin: var(--wc-sp-4) 0 0;
    color: var(--wc-ink-lead);
    font-size: var(--wc-fs-lead);
    line-height: var(--wc-lh-loose);
}

/* --------------------------------------------------------------- Raster */

.wc-blk-types__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wc-grid-gap);
}

@media (min-width: 760px) {
    .wc-blk-types__grid {
        grid-template-columns: repeat(var(--wc-blk-cols, 2), minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- Kaart */

.wc-blk-types__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--wc-card-pad);
    border: 0;
    border-radius: var(--wc-r-md);
    background: var(--wc-surface);
    box-shadow: var(--wc-shadow-card);
    overflow: hidden;
}

/* -------------------------------------------------------- Foto met scrim */

.wc-blk-types__media {
    position: relative;
    display: block;
    margin: calc(var(--wc-card-pad) * -1) calc(var(--wc-card-pad) * -1)
            calc(var(--wc-sp-6) + var(--wc-sp-1));
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--wc-band-deep);
    text-decoration: none;
}

.wc-blk-types__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wc-blk-types__card:hover .wc-blk-types__media img,
.wc-blk-types__card:focus-within .wc-blk-types__media img {
    transform: scale(1.04);
}

/* Geen foto ingesteld: het producttype-icoon op de beige grond. */
.wc-blk-types__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-ink-soft);
}

.wc-blk-types__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wc-scrim);
    pointer-events: none;
}

.wc-blk-types__badge {
    position: absolute;
    top: var(--wc-sp-3);
    left: var(--wc-sp-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: var(--wc-chip-h);
    padding-inline: var(--wc-chip-px);
    border-radius: var(--wc-r-xs);
    background: var(--wc-badge);
    color: var(--wc-badge-ink);
    font-size: var(--wc-fs-xs);
    font-weight: var(--wc-fw-medium);
    letter-spacing: var(--wc-ls-label);
    line-height: 1;
}

.wc-blk-types__caption {
    position: absolute;
    inset-inline: var(--wc-card-pad);
    bottom: var(--wc-card-pad);
    z-index: 1;
    display: block;
}

.wc-blk-types__name {
    margin: 0;
    color: var(--wc-ink-invert);
    font-size: var(--wc-fs-card);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    letter-spacing: var(--wc-ls-heading);
}

.wc-blk-types__from {
    display: block;
    margin-top: var(--wc-sp-1);
    color: var(--wc-ink-invert-muted);
    font-size: var(--wc-fs-sm);
    line-height: 1.2;
}

.wc-blk-types__price {
    display: block;
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-sm);
    font-weight: var(--wc-fw-medium);
    line-height: 1.3;
}

/* ------------------------------------------------------------ Kaartbody */

.wc-blk-types__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.wc-blk-types__desc {
    flex-grow: 1;
    margin: 0;
    color: var(--wc-ink-muted);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-loose);
}

.wc-blk-types__divider {
    height: 1px;
    margin: var(--wc-sp-6) 0 var(--wc-sp-5);
    border: 0;
    background: var(--wc-line);
}

.wc-blk-types__features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--wc-sp-3);
}

.wc-blk-types__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--wc-sp-3);
    color: var(--wc-ink-muted);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-body);
}

.wc-blk-types__feature-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: calc(var(--wc-fs-body) * var(--wc-lh-body));
    color: var(--wc-ink-lead);
}

.wc-blk-types__feature-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------- Donkere pill-knop */

.wc-blk-types__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--wc-input-h);
    margin-top: calc(var(--wc-sp-6) + var(--wc-sp-1));
    padding: var(--wc-sp-3) var(--wc-btn-px-sm);
    border-radius: var(--wc-r-pill);
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.wc-blk-types__btn:hover,
.wc-blk-types__btn:focus-visible {
    background: var(--wc-surface-dark-2);
    color: var(--wc-ink-invert-body);
}

/* ------------------------------------------------------------- Hulpbalk */

.wc-blk-types__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-sp-5);
    margin-top: var(--wc-grid-gap);
    padding: var(--wc-sp-6) var(--wc-sp-8);
    border-radius: var(--wc-r-md);
    background: var(--wc-surface);
}

.wc-blk-types__help-text {
    margin: 0;
    color: var(--wc-ink);
    font-size: var(--wc-fs-card);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    letter-spacing: var(--wc-ls-heading);
}

.wc-blk-types__help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--wc-btn-h);
    padding-inline: var(--wc-btn-px);
    border-radius: var(--wc-r-pill);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--wc-line-strong);
    color: var(--wc-ink);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-blk-types__help-btn:hover,
.wc-blk-types__help-btn:focus-visible {
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
}

/* ------------------------------------------------- Focus & bewegingsvrij */

.wc-blk-types a:focus-visible {
    outline: 2px solid var(--wc-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wc-blk-types *,
    .wc-blk-types *::before,
    .wc-blk-types *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .wc-blk-types__card:hover .wc-blk-types__media img,
    .wc-blk-types__card:focus-within .wc-blk-types__media img {
        transform: none;
    }
}

/* ------------------------------------------------------------- Mobiel */

@media (max-width: 600px) {
    .wc-blk-types__head {
        margin-bottom: var(--wc-sp-10);
    }

    .wc-blk-types__media {
        aspect-ratio: 4 / 3;
    }

    .wc-blk-types__help {
        padding: var(--wc-sp-6);
    }

    .wc-blk-types__help-btn {
        width: 100%;
    }
}


/* ==================== split */
/* ==========================================================================
   Split-sectie — [wallcoustic_split]
   Foto aan de ene kant, tekstkolom aan de andere, verticaal gecentreerd.
   Alle kleuren, maten en radii komen uit de designtokens (--wc-*).
   ========================================================================== */

.wc-blk-split {
    box-sizing: border-box;
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-body);
    padding-block: var(--wc-section-y);
}

.wc-blk-split *,
.wc-blk-split *::before,
.wc-blk-split *::after {
    box-sizing: border-box;
}

/* Achtergrondvarianten: crème is de standaard, beige markeert een groepering,
   "geen" laat de sectie eronder van de pagina zelf doorlopen. */
.wc-blk-split-paper {
    background: var(--wc-paper);
}

.wc-blk-split-band {
    background: var(--wc-band);
}

.wc-blk-split-geen {
    background: transparent;
}

/* --- Raster -------------------------------------------------------------- */

.wc-blk-split-inner {
    max-width: var(--wc-container-narrow);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--wc-sp-8);
}

@media (min-width: 860px) {
    .wc-blk-split-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(40px, 6vw, 88px);
    }

    /* Op mobiel staat de foto altijd boven de tekst; pas vanaf 860px wisselt
       de kant. Alleen de volgorde draait, de DOM blijft foto-dan-tekst. */
    .wc-blk-split.is-media-right .wc-blk-split-media {
        order: 2;
    }

    .wc-blk-split.is-media-right .wc-blk-split-body {
        order: 1;
    }
}

/* --- Foto ---------------------------------------------------------------- */

.wc-blk-split-media {
    min-width: 0;
}

.wc-blk-split-figure {
    margin: 0;
    border-radius: var(--wc-r-md);
    overflow: hidden;
    background: var(--wc-band-deep);
}

.wc-blk-split-figure img,
.wc-blk-split-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: var(--wc-blk-split-ratio, 4 / 3);
    object-fit: cover;
    border-radius: inherit;
}

/* --- Tekstkolom ---------------------------------------------------------- */

.wc-blk-split-body {
    min-width: 0;
}

.wc-blk-split-kicker {
    margin: 0 0 var(--wc-sp-3);
    font-size: var(--wc-fs-xs);
    line-height: 1.35;
    letter-spacing: var(--wc-ls-label);
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink-lead);
}

.wc-blk-split-title {
    margin: 0;
    max-width: 24ch;
    font-size: var(--wc-fs-h3);
    line-height: var(--wc-lh-tight);
    letter-spacing: var(--wc-ls-heading);
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
    text-wrap: balance;
}

/* <em> in de kop is een kleuraccent, geen cursief. */
.wc-blk-split-title em {
    font-style: normal;
    color: var(--wc-accent);
}

.wc-blk-split-text {
    margin: var(--wc-sp-4) 0 0;
    max-width: 46ch;
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-loose);
    color: var(--wc-ink-muted);
}

.wc-blk-split-text + .wc-blk-split-text {
    margin-top: var(--wc-sp-3);
}

.wc-blk-split-text a {
    color: var(--wc-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.wc-blk-split-text a:hover {
    color: var(--wc-accent);
}

/* --- Optionele opsomming ------------------------------------------------- */

.wc-blk-split-list {
    list-style: none;
    margin: var(--wc-sp-5) 0 0;
    padding: 0;
    max-width: 46ch;
    display: grid;
    gap: var(--wc-sp-3);
}

.wc-blk-split-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: var(--wc-sp-3);
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-body);
    color: var(--wc-ink-muted);
}

.wc-blk-split-item-icon {
    display: inline-flex;
    color: var(--wc-accent);
    margin-top: 2px;
}

.wc-blk-split-item-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* --- Knopzone ------------------------------------------------------------ */

.wc-blk-split-actions {
    margin-top: var(--wc-sp-8);
}

/* ==========================================================================
   GEDEELD — pill-knop. Staat identiek in de andere wc-blk-secties:
   neem dit blok maar één keer op in public/css/blocks.css.
   ========================================================================== */


/* --- Bewegingsvoorkeur --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .wc-blk-split,
    .wc-blk-split *,
    .wc-blk-btn {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* ==================== voordelen */
/* ================================================================
   [wallcoustic_voordelen] — voordelen op een donkere band
   ---------------------------------------------------------------
   Deze sectie blijft in élke themamodus donker. Dat komt niet uit
   een vaste kleur maar uit de "neutral"-tokens: --wc-surface-neutral
   is in licht én in donker een bijna-zwart vlak en
   --wc-ink-on-neutral / --wc-ink-on-neutral-muted zijn de
   bijbehorende lichte teksten. Geen enkele hexwaarde in dit blok.
   ================================================================ */

.wc-blk-voordelen {
    --wc-blk-voordelen-cols: 4;

    box-sizing: border-box;
    padding-block: var(--wc-section-y);
    background: var(--wc-surface-neutral);
    color: var(--wc-ink-on-neutral);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-regular);
    line-height: var(--wc-lh-body);
    letter-spacing: var(--wc-ls-body);
}

.wc-blk-voordelen *,
.wc-blk-voordelen *::before,
.wc-blk-voordelen *::after {
    box-sizing: border-box;
}

/* Volle breedte binnen een smalle container. Bewust géén width:100vw:
   dat telt de scrollbar mee en levert horizontale scroll op. */
.wc-blk-voordelen--bleed {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.wc-blk-voordelen-inner {
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
}

/* ---------------------------------------------------------- Kop */

.wc-blk-voordelen-kop {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.wc-blk-voordelen-titel {
    margin: 0;
    color: var(--wc-ink-on-neutral);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-h2);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
    text-wrap: balance;
}

.wc-blk-voordelen-titel em {
    font-style: italic;
}

.wc-blk-voordelen-intro {
    margin: var(--wc-sp-4) 0 0;
    color: var(--wc-ink-invert-muted);
    font-size: var(--wc-fs-lead);
    font-weight: var(--wc-fw-regular);
    line-height: var(--wc-lh-loose);
    text-wrap: pretty;
}

/* --------------------------------------------------------- Grid */

.wc-blk-voordelen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--wc-sp-8);
    row-gap: var(--wc-sp-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-voordelen-kop + .wc-blk-voordelen-grid {
    margin-top: var(--wc-sp-12);
}

/* ------------------------------------------------- Eén voordeel */

.wc-blk-voordeel {
    display: grid;
    grid-template-columns: var(--wc-sp-8) minmax(0, 1fr);
    column-gap: var(--wc-sp-4);
    row-gap: var(--wc-sp-2);
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-voordeel-icoon {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wc-sp-8);
    height: var(--wc-sp-8);
    /* Optisch centreren op de eerste regel van de titel, niet op het hele blok. */
    margin-top: calc((var(--wc-fs-card) * var(--wc-lh-tight) - var(--wc-sp-8)) / 2);
    border: 1px solid var(--wc-line-invert-soft);
    border-radius: var(--wc-r-pill);
    color: var(--wc-ink-on-neutral);
}

.wc-blk-voordeel-icoon svg {
    display: block;
    width: var(--wc-sp-4);
    height: var(--wc-sp-4);
}

.wc-blk-voordeel-titel {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--wc-ink-on-neutral);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-card);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    letter-spacing: var(--wc-ls-heading);
    text-wrap: balance;
}

.wc-blk-voordeel-tekst {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: var(--wc-ink-on-neutral-muted);
    font-size: var(--wc-fs-sm);
    font-weight: var(--wc-fw-regular);
    line-height: var(--wc-lh-loose);
    text-wrap: pretty;
}

/* ---------------------------------------------- Optionele knop */

.wc-blk-voordelen-cta {
    margin-top: var(--wc-sp-12);
    text-align: center;
}

.wc-blk-voordelen-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wc-sp-2);
    min-height: var(--wc-btn-h);
    padding-inline: var(--wc-btn-px);
    border: 0;
    border-radius: var(--wc-r-pill);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--wc-line-invert);
    color: var(--wc-ink-invert);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-blk-voordelen-knop:hover,
.wc-blk-voordelen-knop:focus-visible {
    background: var(--wc-ink-invert);
    color: var(--wc-surface-neutral);
}

.wc-blk-voordelen-knop:focus-visible {
    outline: 2px solid var(--wc-ink-invert);
    outline-offset: 3px;
}

.wc-blk-voordelen-knop-pijl {
    display: inline-flex;
}

.wc-blk-voordelen-knop-pijl svg {
    display: block;
}

/* ------------------------------------------------- Responsief */

@media (min-width: 640px) {
    .wc-blk-voordelen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .wc-blk-voordelen-grid {
        grid-template-columns: repeat(var(--wc-blk-voordelen-cols), minmax(0, 1fr));
        column-gap: var(--wc-sp-10);
        row-gap: var(--wc-sp-16);
    }
}

/* --------------------------------------- Bewegingsvoorkeuren */

@media (prefers-reduced-motion: reduce) {
    .wc-blk-voordelen *,
    .wc-blk-voordelen *::before,
    .wc-blk-voordelen *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==================== waarom */
/* =====================================================================
   [wallcoustic_waarom] — Waarom-grid
   Vier kolommen met rond lijnicoon, gescheiden door 1px hairlines.
   Mobiel twee kolommen, vanaf 960px drie of vier naast elkaar.
   ===================================================================== */
.wc-blk-waarom {
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    padding-block: var(--wc-section-y);
}

/* Het blok staat vaak buiten een isolatie-wrapper (Elementor), dus zelf resetten. */
.wc-blk-waarom *,
.wc-blk-waarom *::before,
.wc-blk-waarom *::after {
    box-sizing: border-box;
}

.wc-blk-waarom__inner {
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
}

/* --- Gecentreerde kop --- */
.wc-blk-waarom__head {
    max-width: 42rem;
    margin: 0 auto var(--wc-sp-10);
    text-align: center;
}

.wc-blk-waarom__titel {
    margin: 0;
    font-size: var(--wc-fs-h2);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
}

/* <em> in de titel is geen cursief maar het accentwoord. */
.wc-blk-waarom__titel em {
    font-style: normal;
    color: var(--wc-accent);
}

.wc-blk-waarom__intro {
    margin: var(--wc-sp-4) 0 0;
    font-size: var(--wc-fs-lead);
    line-height: var(--wc-lh-body);
    color: var(--wc-ink-lead);
}

/* --- Grid: mobiel twee kolommen --- */
.wc-blk-waarom__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-waarom__cel {
    position: relative;
    display: flex;
}

/* De verticale hairline links van elke kolom; de eerste kolom van een rij niet. */
.wc-blk-waarom__cel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 1px;
    background: var(--wc-line-soft);
}

.wc-blk-waarom__grid .wc-blk-waarom__cel:nth-child(2n + 1)::before {
    content: none;
}

/* --- De kolom zelf --- */
.wc-blk-waarom__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--wc-sp-6) var(--wc-sp-4);
    text-align: center;
    color: inherit;
    text-decoration: none;
    border-radius: var(--wc-r-md);
}

a.wc-blk-waarom__item {
    transition: background-color 0.2s ease;
}

a.wc-blk-waarom__item:hover {
    background: var(--wc-band);
}

a.wc-blk-waarom__item:hover .wc-blk-waarom__icon {
    border-color: var(--wc-accent);
    color: var(--wc-accent);
}

.wc-blk-waarom__item:focus-visible {
    outline: 2px solid var(--wc-focus);
    outline-offset: 2px;
}

/* --- Rond lijnicoon --- */
.wc-blk-waarom__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-r-pill);
    color: var(--wc-ink);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.wc-blk-waarom__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* --- Tekst --- */
.wc-blk-waarom__kop {
    margin: var(--wc-sp-5) 0 0;
    font-size: var(--wc-fs-card);
    line-height: var(--wc-lh-tight);
    letter-spacing: var(--wc-ls-heading);
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
}

.wc-blk-waarom__tekst {
    margin: var(--wc-sp-3) 0 0;
    max-width: 32ch;
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-loose);
    color: var(--wc-ink-muted);
}

/* --- Vanaf tablet iets meer lucht in de kolom --- */
@media (min-width: 720px) {
    .wc-blk-waarom__item {
        padding: var(--wc-sp-8) var(--wc-sp-6);
    }
}

/* --- Vanaf 960px drie of vier kolommen naast elkaar --- */
@media (min-width: 960px) {
    .wc-blk-waarom__head {
        margin-bottom: var(--wc-sp-12);
    }

    .wc-blk-waarom__grid[data-cols="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wc-blk-waarom__grid[data-cols="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Hairlines opnieuw zetten voor de nieuwe kolomindeling. */
    .wc-blk-waarom__grid[data-cols="3"] .wc-blk-waarom__cel:nth-child(2n + 1)::before {
        content: "";
    }

    .wc-blk-waarom__grid[data-cols="3"] .wc-blk-waarom__cel:nth-child(3n + 1)::before {
        content: none;
    }

    .wc-blk-waarom__grid[data-cols="4"] .wc-blk-waarom__cel:nth-child(2n + 1)::before {
        content: "";
    }

    .wc-blk-waarom__grid[data-cols="4"] .wc-blk-waarom__cel:nth-child(4n + 1)::before {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wc-blk-waarom a.wc-blk-waarom__item,
    .wc-blk-waarom .wc-blk-waarom__icon {
        transition: none;
    }
}


/* ==================== social_proof */
/* =====================================================================
   Social proof — [wallcoustic_social_proof]
   Gecentreerde kop + twee pills, daaronder een horizontaal scrollende
   rij reviewkaarten met ronde pijlknoppen rechtsboven.
   Alle kleuren komen uit de designtokens op :root, zodat licht én donker
   automatisch kloppen. Geen losse hex-waarden.
   ===================================================================== */

.wc-blk-social {
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    padding-block: var(--wc-section-y);
    overflow: hidden; /* voorkomt horizontale paginascroll door de rail */
}

.wc-blk-social *,
.wc-blk-social *::before,
.wc-blk-social *::after {
    box-sizing: border-box;
}

.wc-blk-social__inner {
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
}

/* ---------------------------------------------------------- Introblok */

.wc-blk-social__intro {
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
}

.wc-blk-social__kop {
    margin: 0;
    font-size: var(--wc-fs-h2);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
    text-wrap: balance;
}

.wc-blk-social__kop em {
    font-style: normal;
    color: var(--wc-accent);
}

.wc-blk-social__sub {
    margin: var(--wc-sp-4) auto 0;
    max-width: 52ch;
    font-size: var(--wc-fs-lead);
    line-height: var(--wc-lh-loose);
    color: var(--wc-ink-lead);
}

.wc-blk-social__acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wc-sp-3);
    margin-top: var(--wc-sp-8);
}

/* ------------------------------------------------------------- Knoppen */


.wc-blk-social a:focus-visible,
.wc-blk-social button:focus-visible,
.wc-blk-social__rail:focus-visible {
    outline: 2px solid var(--wc-focus);
    outline-offset: 2px;
}

/* --------------------------------------------------------- Pijlknoppen */

.wc-blk-social__navbar {
    display: flex;
    justify-content: flex-end;
    gap: var(--wc-sp-3);
    margin-top: var(--wc-sp-10);
}

.wc-blk-social__navbar[hidden] {
    display: none;
}

.wc-blk-social__nav {
    width: var(--wc-icon-btn);
    height: var(--wc-icon-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--wc-r-pill);
    background: var(--wc-paper);
    color: var(--wc-ink);
    box-shadow: inset 0 0 0 1px var(--wc-line);
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.wc-blk-social__nav:hover:not(:disabled) {
    background: var(--wc-band);
    box-shadow: inset 0 0 0 1px var(--wc-line-strong);
}

.wc-blk-social__nav:disabled {
    opacity: .35;
    cursor: default;
}

/* --------------------------------------------------------------- Rail */

.wc-blk-social__rail {
    margin-top: var(--wc-sp-6);
    /* Laat de kaarten tot de rand van de container doorlopen. */
    margin-inline: calc(var(--wc-gutter) * -1);
    padding-inline: var(--wc-gutter);
    padding-block: var(--wc-sp-1);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--wc-gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wc-blk-social__rail::-webkit-scrollbar {
    display: none;
}

.wc-blk-social__navbar + .wc-blk-social__rail {
    margin-top: var(--wc-sp-5);
}

.wc-blk-social__intro + .wc-blk-social__rail {
    margin-top: var(--wc-sp-12);
}

.wc-blk-social__track {
    display: flex;
    align-items: stretch;
    gap: var(--wc-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-social__item {
    flex: 0 0 auto;
    width: min(26rem, 86vw);
    scroll-snap-align: start;
    display: flex;
}

/* ---------------------------------------------------------- Reviewkaart */

.wc-blk-quote {
    display: grid;
    grid-template-columns: clamp(6rem, 30%, 9rem) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    background: var(--wc-surface-alt);
    border-radius: var(--wc-r-md);
    overflow: hidden;
}

.wc-blk-quote--zonderfoto {
    grid-template-columns: minmax(0, 1fr);
}

.wc-blk-quote__foto {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    background: var(--wc-band-deep);
}

.wc-blk-quote__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wc-sp-4);
    padding: var(--wc-card-pad);
    min-width: 0;
}

.wc-blk-quote__rol {
    display: inline-flex;
    align-items: center;
    min-height: var(--wc-chip-h);
    padding-inline: var(--wc-chip-px);
    border-radius: var(--wc-r-xs);
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-xs);
    line-height: 1.35;
    letter-spacing: var(--wc-ls-label);
}

.wc-blk-quote__citaat {
    margin: 0;
    flex: 1 1 auto;
}

.wc-blk-quote__citaat p {
    margin: 0;
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-loose);
    color: var(--wc-ink);
    hyphens: auto;
}

.wc-blk-quote__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wc-sp-2) var(--wc-sp-4);
    width: 100%;
    margin-top: auto;
    padding-top: var(--wc-sp-5);
    border-top: 1px solid var(--wc-line);
}

.wc-blk-quote__naam {
    font-style: normal;
    font-size: var(--wc-fs-card);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-tight);
    color: var(--wc-ink);
}

.wc-blk-quote__bron {
    font-size: var(--wc-fs-xs);
    color: var(--wc-ink-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wc-blk-quote__bron:hover,
.wc-blk-quote__bron:focus-visible {
    color: var(--wc-ink);
}

.wc-blk-visueel-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------- Beheerdersuitleg */

.wc-blk-social-hint {
    max-width: var(--wc-container-narrow);
    margin: var(--wc-sp-6) auto;
    padding: var(--wc-sp-5) var(--wc-sp-6);
    border-radius: var(--wc-r-sm);
    background: var(--wc-accent-quiet);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-loose);
}

/* -------------------------------------------------------------- Mobiel */

@media (max-width: 600px) {
    .wc-blk-social__item {
        width: min(22rem, 88vw);
    }

    .wc-blk-quote {
        grid-template-columns: clamp(5rem, 28%, 7rem) minmax(0, 1fr);
    }

    .wc-blk-quote__body {
        padding: var(--wc-sp-5);
        gap: var(--wc-sp-3);
    }

    .wc-blk-quote__voet {
        padding-top: var(--wc-sp-4);
    }

    .wc-blk-social__navbar {
        justify-content: center;
        margin-top: var(--wc-sp-8);
    }
}

/* --------------------------------------------- Beperkte beweging (a11y) */

@media (prefers-reduced-motion: reduce) {
    .wc-blk-social,
    .wc-blk-social * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* ==================== zakelijk */
/* =====================================================================
   [wallcoustic_zakelijk] — zakelijke band
   Full-bleed foto (of egaal donker vlak), tekst links over een donkere
   scrim. Alle kleuren komen uit de designtokens. De "invert"-familie is
   in beide themamodi licht en de scrim is puur zwart-transparant, dus de
   tekst blijft leesbaar ongeacht licht/donker.
   ===================================================================== */
.wc-blk-zakelijk{
    /* Blok-eigen tokens: alleen scrims en de terugvalvulling. */
    --wcb-zak-fill: var(--wc-surface-dark);
    --wcb-zak-focus: 50% 50%;
    --wcb-zak-scrim-y: linear-gradient(to bottom, color-mix(in srgb, var(--wc-surface-dark) 45%, transparent) 0%, color-mix(in srgb, var(--wc-surface-dark) 68%, transparent) 42%, color-mix(in srgb, var(--wc-surface-dark) 88%, transparent) 100%);
    --wcb-zak-scrim-x: linear-gradient(to right, color-mix(in srgb, var(--wc-surface-dark) 88%, transparent) 0%, color-mix(in srgb, var(--wc-surface-dark) 76%, transparent) 32%, color-mix(in srgb, var(--wc-surface-dark) 38%, transparent) 64%, color-mix(in srgb, var(--wc-surface-dark) 10%, transparent) 100%);

    position: relative;
    isolation: isolate;
    /* Full-bleed: de band breekt uit de Elementor-container. */
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    min-height: 30rem;
    background-color: var(--wcb-zak-fill);
    color: var(--wc-ink-invert);
    font-family: var(--wc-font);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-loose);
}

/* De band staat buiten .wc-configurator / .wc-page, dus eigen box-sizing. */
.wc-blk-zakelijk *,
.wc-blk-zakelijk *::before,
.wc-blk-zakelijk *::after{
    box-sizing: border-box;
}

/* Variant zonder full-bleed: netjes in de container, met sectieradius. */
.wc-blk-zakelijk--boxed{
    width: auto;
    max-width: var(--wc-container);
    margin-inline: auto;
    border-radius: var(--wc-r-xl);
}

/* ---------------------------------------------------------------- Beeld */
.wc-blk-zakelijk-media{
    position: absolute;
    inset: 0;
    z-index: 0;
}

.wc-blk-zakelijk-photo{
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--wcb-zak-focus);
}

.wc-blk-zakelijk-scrim{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: var(--wcb-zak-scrim-y);
}

/* --------------------------------------------------------------- Inhoud */
.wc-blk-zakelijk-inner{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
    padding-block: clamp(56px, 11vw, 104px);
}

.wc-blk-zakelijk-col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 36rem;
}

.wc-blk-zakelijk-kicker{
    display: inline-flex;
    align-items: center;
    min-height: var(--wc-chip-h);
    margin: 0 0 var(--wc-sp-5);
    padding-inline: var(--wc-chip-px);
    border-radius: var(--wc-r-pill);
    background: var(--wc-line-invert-soft);
    color: var(--wc-ink-invert);
    font-size: var(--wc-fs-xs);
    font-weight: var(--wc-fw-medium);
    letter-spacing: var(--wc-ls-label);
    line-height: var(--wc-lh-tight);
}

.wc-blk-zakelijk-title{
    margin: 0 0 var(--wc-sp-4);
    max-width: 13em;
    color: var(--wc-ink-invert);
    font-family: inherit;
    font-size: var(--wc-fs-h1);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-display);
    letter-spacing: var(--wc-ls-display);
    text-wrap: balance;
}

.wc-blk-zakelijk-title em{
    font-style: normal;
    color: var(--wc-ink-invert-muted);
}

.wc-blk-zakelijk-lead{
    margin: 0 0 var(--wc-sp-6);
    max-width: 32rem;
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-loose);
    text-wrap: pretty;
}

/* ------------------------------------------------------------- Punten */
.wc-blk-zakelijk-list{
    display: grid;
    gap: var(--wc-sp-3);
    margin: 0 0 var(--wc-sp-8);
    padding: 0;
    list-style: none;
}

.wc-blk-zakelijk-item{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--wc-sp-3);
    align-items: start;
    margin: 0;
}

.wc-blk-zakelijk-ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: var(--wc-r-pill);
    background: var(--wc-line-invert-soft);
    color: var(--wc-ink-invert);
}

.wc-blk-zakelijk-ico svg{
    display: block;
    width: 14px;
    height: 14px;
}

.wc-blk-zakelijk-item-text{
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-body);
    line-height: var(--wc-lh-loose);
}

/* ------------------------------------------------------------- Knoppen */
.wc-blk-zakelijk-actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-sp-3);
    margin-bottom: var(--wc-sp-5);
}

.wc-blk-zakelijk-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--wc-btn-h);
    padding-inline: var(--wc-btn-px);
    border: 0;
    border-radius: var(--wc-r-pill);
    font-family: inherit;
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wc-blk-zakelijk-btn--primair{
    background: var(--wc-accent);
    color: var(--wc-accent-ink);
}

.wc-blk-zakelijk-btn--primair:hover,
.wc-blk-zakelijk-btn--primair:focus-visible{
    background: var(--wc-accent-hover);
    color: var(--wc-accent-ink);
    transform: translateY(-1px);
}

.wc-blk-zakelijk-btn--primair:active{
    background: var(--wc-accent-active);
    transform: none;
}

.wc-blk-zakelijk-btn--leeg{
    background: transparent;
    color: var(--wc-ink-invert);
    box-shadow: inset 0 0 0 1px var(--wc-line-invert);
}

.wc-blk-zakelijk-btn--leeg:hover,
.wc-blk-zakelijk-btn--leeg:focus-visible{
    background: var(--wc-line-invert-soft);
    color: var(--wc-ink-invert);
}

/* De focusring staat op donker beeld: licht, niet het terracotta focustoken. */
.wc-blk-zakelijk-btn:focus-visible{
    outline: 2px solid var(--wc-ink-invert);
    outline-offset: 3px;
}

.wc-blk-zakelijk-btn-arrow{
    display: inline-flex;
    align-items: center;
}

.wc-blk-zakelijk-btn-arrow svg{
    display: block;
}

/* ------------------------------------------------------------ Microtekst */
.wc-blk-zakelijk-micro{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    color: var(--wc-ink-invert-muted);
    font-size: var(--wc-fs-xs);
    line-height: var(--wc-lh-body);
}

.wc-blk-zakelijk-micro span + span::before{
    content: "\00b7";
    margin-right: 12px;
}

/* ------------------------------------------------------------ Vanaf 768px */
@media (min-width: 768px){
    .wc-blk-zakelijk{
        display: flex;
        align-items: center;
        min-height: clamp(30rem, 46vw, 44rem);
    }

    /* Horizontale scrim: donker links waar de tekst staat, foto vrij rechts. */
    .wc-blk-zakelijk-scrim{
        background-image: var(--wcb-zak-scrim-x);
    }

    .wc-blk-zakelijk-inner{
        padding-block: clamp(80px, 8vw, 128px);
    }

    .wc-blk-zakelijk-col{
        max-width: 34rem;
    }
}

@media (min-width: 1200px){
    .wc-blk-zakelijk-col{
        max-width: 36rem;
    }

    .wc-blk-zakelijk-title{
        max-width: 11em;
    }
}

/* --------------------------------------------------- Bewegingsvoorkeur */
@media (prefers-reduced-motion: reduce){
    .wc-blk-zakelijk-btn{
        transition: none;
    }

    .wc-blk-zakelijk-btn--primair:hover,
    .wc-blk-zakelijk-btn--primair:focus-visible{
        transform: none;
    }
}


/* ==================== blog */
/* =====================================================================
   Blogteaser — [wallcoustic_blog]
   Gecentreerde kop met omlijnde pill, daaronder links één uitgelicht
   artikel (foto met chip en titel over de onderkant) en rechts een
   verticale lijst met kleinere items op een beige kaartvlak.
   Alles staat onder .wc-blk-blog, dus geen botsing met wc-hp-* of
   wc-block-*. Kleuren komen uitsluitend uit de designtokens.
   ===================================================================== */
.wc-blk-blog{
    background: var(--wc-paper);
    color: var(--wc-ink);
    font-family: var(--wc-font);
    font-weight: var(--wc-fw-regular);
    padding-block: var(--wc-section-y);
}
.wc-blk-blog *,
.wc-blk-blog *::before,
.wc-blk-blog *::after{
    box-sizing: border-box;
}

.wc-blk-blog-inner{
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
}

/* ----------------------------------------------------------- Sectiekop */
.wc-blk-blog-head{
    max-width: 42rem;
    margin: 0 auto var(--wc-sp-12);
    text-align: center;
}

.wc-blk-blog-title{
    margin: 0;
    font-size: var(--wc-fs-h2);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
    text-wrap: balance;
}

.wc-blk-blog-lead{
    margin: var(--wc-sp-4) 0 0;
    font-size: var(--wc-fs-lead);
    line-height: var(--wc-lh-loose);
    color: var(--wc-ink-lead);
}

/* Omlijnde pill "Meer artikelen". */
.wc-blk-blog-more{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--wc-sp-8);
    min-height: var(--wc-btn-h);
    padding: var(--wc-sp-2) var(--wc-btn-px);
    border: 0;
    border-radius: var(--wc-r-pill);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--wc-line-strong);
    color: var(--wc-ink);
    font-size: var(--wc-fs-body);
    font-weight: var(--wc-fw-medium);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.wc-blk-blog-more:hover{
    background: var(--wc-ink);
    color: var(--wc-paper);
}
.wc-blk-blog-more:focus-visible{
    outline: 2px solid var(--wc-focus);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- Raster */
.wc-blk-blog-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wc-grid-gap);
}

@media (min-width: 900px){
    .wc-blk-blog-grid{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }
    /* Eén enkel bericht: de grote kaart pakt de volle breedte. */
    .wc-blk-blog-grid-solo{
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------- Uitgelichte kaart */
.wc-blk-blog-feature{
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    aspect-ratio: 4 / 3;
    border-radius: var(--wc-r-md);
    overflow: hidden;
    background: var(--wc-band);
    isolation: isolate;
}
/* Zonder uitgelichte afbeelding een donker vlak, zodat de lichte titel leesbaar blijft. */
.wc-blk-blog-feature-noimg{
    background: var(--wc-surface-dark);
}

@media (min-width: 900px){
    .wc-blk-blog-feature{
        aspect-ratio: auto;
        height: 100%;
        min-height: 420px;
    }
    .wc-blk-blog-grid-solo .wc-blk-blog-feature{
        height: auto;
        aspect-ratio: 21 / 9;
        min-height: 360px;
    }
}

.wc-blk-blog-feature-img{
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* Scrim onder de titel, exact zoals in het ontwerp. */
.wc-blk-blog-feature::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--wc-scrim);
    pointer-events: none;
}

.wc-blk-blog-feature:hover .wc-blk-blog-feature-img{
    transform: scale(1.03);
}

.wc-blk-blog-feature-body{
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--wc-card-pad);
}

.wc-blk-blog-feature-title{
    margin: 0;
    font-size: var(--wc-fs-card);
    line-height: var(--wc-lh-tight);
    letter-spacing: -0.01em;
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink-invert);
    text-wrap: pretty;
}

/* --------------------------------------------------------- Lijstitems */
.wc-blk-blog-list{
    display: flex;
    flex-direction: column;
    gap: var(--wc-grid-gap);
}

.wc-blk-blog-item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wc-sp-4);
    padding: var(--wc-card-pad);
    border-radius: var(--wc-r-md);
    background: var(--wc-band);
    transition: background-color .2s ease;
}
.wc-blk-blog-item:hover{
    background: var(--wc-band-deep);
}

@media (min-width: 900px){
    /* Vult de kolom netjes uit tot dezelfde hoogte als de grote kaart. */
    .wc-blk-blog-item{
        flex: 1 1 auto;
        justify-content: center;
    }
}

.wc-blk-blog-item-title{
    margin: 0;
    font-size: var(--wc-fs-card);
    line-height: var(--wc-lh-tight);
    letter-spacing: -0.01em;
    font-weight: var(--wc-fw-medium);
    color: var(--wc-ink);
    text-wrap: pretty;
}

/* -------------------------------------------------------- Categoriechip */
.wc-blk-blog-badge{
    display: inline-flex;
    align-items: center;
    min-height: var(--wc-chip-h);
    padding: 0 var(--wc-chip-px);
    border-radius: var(--wc-r-xs);
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-xs);
    font-weight: var(--wc-fw-medium);
    line-height: 1.35;
    letter-spacing: var(--wc-ls-label);
}
.wc-blk-blog-badge-on-photo{
    position: absolute;
    top: var(--wc-sp-4);
    left: var(--wc-sp-4);
    z-index: 2;
}

/* --------------------------------------------------- Klikbare kaarten */
/* De titel is de link; het ::after-vlak maakt de hele kaart klikbaar,
   zonder dat de chip of de foto de linktekst vervuilt. */
.wc-blk-blog-link{
    color: inherit;
    text-decoration: none;
}
.wc-blk-blog-link:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.wc-blk-blog-link::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--wc-r-md);
}
.wc-blk-blog-link:focus-visible{
    outline: none;
}
.wc-blk-blog-link:focus-visible::after{
    outline: 2px solid var(--wc-focus);
    outline-offset: 3px;
}

/* ------------------------------------------------------------- Mobiel */
@media (max-width: 599px){
    .wc-blk-blog-head{
        margin-bottom: var(--wc-sp-8);
    }
    .wc-blk-blog-more{
        width: 100%;
    }
    .wc-blk-blog-feature{
        min-height: 280px;
        aspect-ratio: 3 / 2;
    }
}

/* --------------------------------------------------- Bewegingsvoorkeur */
@media (prefers-reduced-motion: reduce){
    .wc-blk-blog-more,
    .wc-blk-blog-item,
    .wc-blk-blog-feature-img{
        transition: none;
    }
    .wc-blk-blog-feature:hover .wc-blk-blog-feature-img{
        transform: none;
    }
}


/* ==================== nieuwsbrief_footer */
/* =====================================================================
   [wallcoustic_nieuwsbrief_footer] — donkere sitefooter met nieuwsbrief
   Alleen tokens uit de Wallcoustic-tokenspec; werkt licht én donker.
   ===================================================================== */

.wc-blk-ftr {
    width: 100%;
    background: var(--wc-surface-dark);
    color: var(--wc-ink-invert-body);
    font: var(--wc-fw-regular) var(--wc-fs-body)/var(--wc-lh-body) var(--wc-font);
}

.wc-blk-ftr *,
.wc-blk-ftr *::before,
.wc-blk-ftr *::after {
    box-sizing: border-box;
}

.wc-blk-ftr-inner {
    max-width: var(--wc-container);
    margin-inline: auto;
    padding-inline: var(--wc-gutter);
    padding-block: var(--wc-section-y);
}

/* Alleen zichtbaar voor schermlezers. */
.wc-blk-ftr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- Bovenblok */

.wc-blk-ftr-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wc-sp-12);
}

/* ------------------------------------------------------- Nieuwsbrief */

.wc-blk-ftr-signup {
    max-width: 34rem;
}

.wc-blk-ftr-title {
    margin: 0;
    color: var(--wc-ink-invert);
    font-size: var(--wc-fs-h2);
    font-weight: var(--wc-fw-medium);
    line-height: var(--wc-lh-heading);
    letter-spacing: var(--wc-ls-heading);
}

.wc-blk-ftr-title em {
    font-style: italic;
}

.wc-blk-ftr-lead {
    margin: var(--wc-sp-4) 0 0;
    color: var(--wc-ink-invert-muted);
    font-size: var(--wc-fs-sm);
    line-height: var(--wc-lh-loose);
}

.wc-blk-ftr-form {
    margin-top: var(--wc-sp-6);
}

.wc-blk-ftr-field {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: var(--wc-input-h);
    padding-inline: var(--wc-chip-px);
    border: 0;
    border-radius: var(--wc-r-sm);
    background: var(--wc-field-bg);
    color: var(--wc-field-ink);
    font: var(--wc-fw-regular) var(--wc-fs-sm)/1 var(--wc-font);
}

.wc-blk-ftr-field::placeholder {
    color: var(--wc-field-placeholder);
    opacity: 1;
}

.wc-blk-ftr-micro {
    max-width: 22rem;
    margin: var(--wc-sp-3) 0 0;
    color: var(--wc-ink-invert-soft);
    font-size: var(--wc-fs-2xs);
    line-height: 1.35;
}

.wc-blk-ftr-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--wc-sp-2);
    max-width: 22rem;
    margin-top: var(--wc-sp-3);
}

.wc-blk-ftr-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border-radius: 4px;
    accent-color: var(--wc-accent);
}

.wc-blk-ftr-consent-text {
    color: var(--wc-ink-invert-soft);
    font-size: var(--wc-fs-2xs);
    line-height: 1.35;
    cursor: pointer;
}

.wc-blk-ftr-consent-text a {
    color: var(--wc-ink-invert-body);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wc-blk-ftr-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--wc-btn-h-sm);
    margin-top: var(--wc-sp-5);
    padding-inline: var(--wc-btn-px-sm);
    border: 0;
    border-radius: var(--wc-r-pill);
    background: var(--wc-accent);
    color: var(--wc-accent-ink);
    font: var(--wc-fw-medium) var(--wc-fs-sm)/1 var(--wc-font);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wc-blk-ftr-submit:hover {
    background: var(--wc-accent-hover);
}

.wc-blk-ftr-submit:active {
    background: var(--wc-accent-active);
}

.wc-blk-ftr-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.wc-blk-ftr-msg {
    min-height: 1.2em;
    max-width: 22rem;
    margin: var(--wc-sp-3) 0 0;
    font-size: var(--wc-fs-2xs);
    line-height: 1.35;
}

.wc-blk-ftr-msg.is-ok {
    color: var(--wc-ink-invert-body);
}

.wc-blk-ftr-msg.is-err {
    color: var(--wc-accent);
}

/* ------------------------------------------------------- Linkkolommen */

.wc-blk-ftr-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wc-sp-8) var(--wc-sp-6);
}

.wc-blk-ftr-coltitle {
    margin: 0 0 var(--wc-sp-4);
    color: var(--wc-ink-invert-soft);
    font-size: var(--wc-fs-xs);
    font-weight: var(--wc-fw-regular);
    line-height: 1.35;
    letter-spacing: var(--wc-ls-label);
}

.wc-blk-ftr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-ftr-list li + li {
    margin-top: var(--wc-sp-3);
}

.wc-blk-ftr-link {
    color: var(--wc-ink-invert-body);
    font-size: var(--wc-fs-sm);
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.wc-blk-ftr-link:hover,
.wc-blk-ftr-link:focus-visible {
    color: var(--wc-ink-invert);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------- Keurmerken / betaal / verzend / social */

.wc-blk-ftr-marks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wc-sp-8) var(--wc-sp-10);
    margin-top: var(--wc-sp-16);
}

.wc-blk-ftr-marklabel {
    margin: 0 0 var(--wc-sp-3);
    color: var(--wc-ink-invert-soft);
    font-size: var(--wc-fs-xs);
    line-height: 1.35;
    letter-spacing: var(--wc-ls-label);
}

.wc-blk-ftr-marklist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-ftr-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 30px;
    padding: 4px 8px;
    border-radius: var(--wc-r-xs);
    background: var(--wc-paper);
}

.wc-blk-ftr-marklink {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
}

.wc-blk-ftr-markimg {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 22px;
    height: auto;
}

.wc-blk-ftr-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-ftr-sociallink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wc-icon-btn);
    height: var(--wc-icon-btn);
    border-radius: var(--wc-r-pill);
    background: var(--wc-ink-invert-body);
    color: var(--wc-surface-dark);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.wc-blk-ftr-sociallink:hover {
    background: var(--wc-ink-invert);
    transform: translateY(-2px);
}

.wc-blk-ftr-sociallink svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* ------------------------------------------------------- Onderbalk */

.wc-blk-ftr-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wc-sp-3) var(--wc-sp-6);
    margin-top: var(--wc-sp-16);
    padding-top: var(--wc-sp-6);
    border-top: 1px solid var(--wc-line-invert-soft);
}

.wc-blk-ftr-copy {
    margin: 0;
    color: var(--wc-ink-invert-legal);
    font-size: var(--wc-fs-2xs);
    line-height: 1.35;
}

.wc-blk-ftr-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wc-sp-2) var(--wc-sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-blk-ftr-legallink {
    color: var(--wc-ink-invert-legal);
    font-size: var(--wc-fs-2xs);
    line-height: 1.35;
    text-decoration: none;
}

.wc-blk-ftr-legallink:hover,
.wc-blk-ftr-legallink:focus-visible {
    color: var(--wc-ink-invert-body);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------- Focus */

.wc-blk-ftr a:focus-visible,
.wc-blk-ftr button:focus-visible,
.wc-blk-ftr input:focus-visible {
    outline: 2px solid var(--wc-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------- Breakpoints */

@media (min-width: 600px) {
    .wc-blk-ftr-marks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .wc-blk-ftr-top {
        grid-template-columns: minmax(280px, 340px) 1fr;
        gap: var(--wc-sp-16);
    }

    .wc-blk-ftr-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wc-blk-ftr-marks {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .wc-blk-ftr *,
    .wc-blk-ftr *::before,
    .wc-blk-ftr *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .wc-blk-ftr-sociallink:hover {
        transform: none;
    }
}