/**
 * EX Efficiency Program — Frontend styles
 *
 * Aligned with CWA design system:
 *   - Roboto Condensed (heading) / Montserrat (body)
 *   - 3px border-radius
 *   - Green accent #66B86C
 *   - Subtle border 1px solid rgba(0,0,0,0.08)
 *   - Easing cubic-bezier(0.22, 0.61, 0.36, 1)
 *
 * Mobile-first: 2-col grid <= 768px, 4-col >= 768px.
 *
 * ── RADIUS-SCHAAL (v1.14.0) ────────────────────────────────────────────
 * Drie waarden, geen vierde:
 *   --exeff-radius-chip  2px   chips en badges (klein, tekst-dragend label)
 *   --exeff-radius       3px   default: kaarten, tegels, inputs, knoppen
 *   50%                        alleen waar de cirkelvorm zélf betekenis
 *                              draagt (vinkje, icoon-medaillon)
 * `--exeff-radius-lg` (8px) is in v1.14.0 geschrapt. Die waarde werd
 * overal al door de CWA-laag onderaan dit bestand naar 3px overschreven,
 * behalve op `.exeff-week-tile.is-selected` — daar won hij op specificiteit
 * (0,2,0 vs 0,1,0, beide !important), waardoor de geselecteerde tegel als
 * enige 8px rond stond naast 3px-buren. Dat was geen ontwerp maar drift.
 *
 * ── ACCENTKLEUR (v1.14.0) ──────────────────────────────────────────────
 * #66B86C is 2,43:1 op wit en zakt daarmee onder élke AA-drempel. Het
 * blijft vlak- en randkleur (daar geldt geen tekstcontrast), maar draagt
 * nooit meer tekst of iconen. Tekst en iconen gebruiken
 * --exeff-accent-deep (#1F6B32, 6,55:1 op wit).
 */

:root {
    --exeff-accent: #66B86C;
    --exeff-accent-dark: #4FA456;
    /* Tekst- en icoondragende variant. Stond tot v1.14.0 alleen gescoped op
       .exeff-picker/.exeff-price-breakdown; staat nu in :root omdat ook
       .exeff-ccf-summary en .exeff-lead-time hem nodig hebben. */
    --exeff-accent-deep: #1F6B32;
    --exeff-border: rgba(0, 0, 0, 0.08);
    --exeff-bg-tile: #FFFFFF;
    --exeff-bg-tile-disabled: #F5F5F5;
    --exeff-text: #1A1A1A;
    --exeff-text-muted: #6B7280;
    --exeff-radius: 3px;
    --exeff-radius-chip: 2px;
    --exeff-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --exeff-font-heading: "Roboto Condensed", system-ui, sans-serif;
    --exeff-font-body: "Montserrat", system-ui, sans-serif;

    /* ── Motion-budget (v1.14.0) ────────────────────────────────────────
       Eén schaal voor de hele picker. Alles compositor-only (transform /
       opacity); geen layout- of paint-properties in transitions. */
    --exeff-dur-press: 120ms;   /* tegel-press, hover-lift               */
    --exeff-dur-swap:  180ms;   /* maandtab-wissel, flash-terugval       */
    --exeff-dur-shimmer: 1200ms;/* skeleton-loop                          */
}

/* ── Picker container — premium card aligned with CCF early-payment promo ── */
.exeff-picker {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--exeff-radius, 3px);
    color: var(--exeff-text);
    font-family: var(--exeff-font-body);
    margin: 1.5em 0;
    padding: 1.5em;
}

/* Card header (badge + title) */
.exeff-picker__header {
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 0.75em;
    margin: -1.5em -1.5em 1em;
    padding: 0.75em 1.5em;
}
.exeff-picker__badge {
    background: var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius-chip, 2px);
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.25em 0.5em;
    text-transform: uppercase;
}
.exeff-picker__title {
    font-family: var(--exeff-font-heading);
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: uppercase;
}

.exeff-picker__subtitle {
    color: var(--exeff-text-muted);
    margin: 0 0 20px 0;
    font-size: 14px;
}

/* Gift-unlock header — savings teaser shown before week selection */
.exeff-gift-unlock {
    align-items: center;
    background: linear-gradient(135deg, #f0f9f1 0%, #e6f5e7 100%);
    border: 2px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    display: flex;
    gap: 0.75em;
    margin-bottom: 1em;
    padding: 1em;
}
.exeff-gift-unlock__icon { font-size: 1.75em; line-height: 1; }
.exeff-gift-unlock__text { display: flex; flex-direction: column; gap: 0.25em; }
.exeff-gift-unlock__text strong {
    color: #2d5e34;
    font-family: var(--exeff-font-heading), 'Roboto Condensed', sans-serif;
    font-size: 1.05em;
}
/* v1.14.0 — was --exeff-accent (2,43:1 op de #f0f9f1-tint: onleesbaar). */
.exeff-gift-unlock__savings { color: var(--exeff-accent-deep, #1F6B32); font-weight: 600; }

/* Selected tile pulse animation */
@keyframes exeff-selected-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(102, 184, 108, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(102, 184, 108, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 184, 108, 0); }
}
.exeff-week-tile.is-selected { animation: exeff-selected-pulse 0.6s ease-out; }

/* Cart-totals flash on selection.
   v1.14.0 — was 1000ms. Dat is 5,5× het motion-budget voor een UI-transitie
   en liet de rij merkbaar "nahangen" na een weekselectie. Terug naar de
   swap-duur. background-color is bewust géén compositor-property: dit is een
   kleurflits op een tabelrij, geen beweging — transform/opacity kunnen hem
   niet vervangen. Eén property, expliciet benoemd, dus geen `all`. */
.exeff-flash-update {
    background-color: #f0f9f1 !important;
    transition: background-color var(--exeff-dur-swap, 180ms) ease-out;
}

/* Collapse the 56/44 step-1 grid to single column when the 5% banner is
   gone (default sinds 1.3.1). Voorkomt 44%-leeg-naast-shipping. */
.ccf-step1-bottom-grid:not(:has(> .ccf-promo-banner)) {
    grid-template-columns: 1fr !important;
}

/* ── Month tabs ────────────────────────────────────────────────── */
.exeff-picker__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--exeff-border);
}

/* ── Week grid ─────────────────────────────────────────────────── */
.exeff-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 768px) {
    .exeff-picker__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.exeff-week-tile {
    /* TODO: tile states (available, unavailable, almost_full, full, selected) */
    padding: 12px;
    border: 1px solid var(--exeff-border);
    border-radius: var(--exeff-radius);
    background: var(--exeff-bg-tile);
    cursor: pointer;
    /* v1.14.0 — was `transition: all`. Die vorm laat de browser élke
       veranderende property animeren, inclusief layout-properties die de
       twee latere .exeff-week-tile-lagen zetten (padding, border-width).
       Expliciete lijst, compositor-only. */
    transition: transform var(--exeff-dur-press, 120ms) var(--exeff-easing),
                opacity var(--exeff-dur-press, 120ms) var(--exeff-easing);
}

/* ── Mismatch banner ───────────────────────────────────────────── */
.exeff-mismatch-banner {
    /* TODO */
}

/* ── CCF summary ───────────────────────────────────────────────── */
.exeff-ccf-summary {
    /* TODO */
}

/* =========================================================
   EX Efficiency — Week picker states & layout (Fase 2)
   ========================================================= */

/* Month tabs — defensive specificity tegen Elementor/theme button reset.
   We escalate to button.exeff-month-tab + !important because Elementor
   injects site-wide button styling at higher specificity that otherwise
   paints these tabs with a primary-accent (often pink) fill. */
.exeff-picker .exeff-month-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375em !important;
    list-style: none !important;
    margin: 0 0 1.25em !important;
    padding: 0 !important;
}

.exeff-picker .exeff-month-tabs li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

button.exeff-month-tab,
.exeff-picker button.exeff-month-tab {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1.5px solid #d4d4d4 !important;
    border-radius: var(--exeff-radius, 3px) !important;
    box-shadow: none !important;
    color: #555 !important;
    cursor: pointer !important;
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif !important;
    font-size: 0.875em !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0.45em 1.1em !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
    width: auto !important;
}

button.exeff-month-tab:hover:not(.is-active),
.exeff-picker button.exeff-month-tab:hover:not(.is-active) {
    background: transparent !important;
    background-color: transparent !important;
    /* Rand mag de merkgroen houden (randen kennen geen tekstdrempel);
       het label niet — v1.14.0. */
    border-color: var(--exeff-accent, #66B86C) !important;
    color: var(--exeff-accent-deep, #1F6B32) !important;
}

button.exeff-month-tab.is-active,
.exeff-picker button.exeff-month-tab.is-active {
    background: var(--exeff-accent, #66B86C) !important;
    background-color: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    border-color: var(--exeff-accent, #66B86C) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

button.exeff-month-tab:focus-visible,
.exeff-picker button.exeff-month-tab:focus-visible {
    outline: 2px solid var(--exeff-accent, #66B86C) !important;
    outline-offset: 2px !important;
}

/* Week grid (Fase 2: separate per-month grids) */
.exeff-week-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr; /* v1.14.3: gelijke rijhoogte bij meerdere rijen */
    gap: 0.75em;
}

/* v1.14.3 — was `repeat(4, 1fr)`: op 768 (~137px) én 1024 (~182px) brak
   "Week 43 · 19 okt → 25 okt" in twee regels; pas vanaf ~230px past hij op
   één (1466 = 245px, gemeten). auto-fill kiest nu zelf: 2 kolommen op 768,
   3 op 1024, 4 op 1466. */
@media (min-width: 768px) {
    .exeff-week-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

.exeff-week-grid.is-hidden {
    display: none;
}

/* v1.13.1 — ARIA-fix (role="radiogroup" om de tiles, was role="option" los
   in de tabpanel). `display:contents` haalt de wrapper uit de visuele
   grid/flex-layout zodat de tiles opnieuw directe grid/flex-items zijn van
   .exeff-week-grid, zonder de rol uit de accessibility-tree te halen —
   ondersteund in alle huidige evergreen browsers. */
.exeff-week-radiogroup {
    display: contents;
}

/* Week tile — base */
.exeff-week-tile {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--exeff-radius, 3px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: 0.875em;
    position: relative;
    transition: transform var(--exeff-dur-press, 120ms) var(--exeff-easing),
                border-color var(--exeff-dur-press, 120ms) var(--exeff-easing),
                box-shadow var(--exeff-dur-press, 120ms) var(--exeff-easing),
                opacity var(--exeff-dur-press, 120ms) var(--exeff-easing);
    user-select: none;
}

/* v1.14.0 — hover-lift alleen op apparaten met een echte hover-pointer.
   Op touch blijft een :hover-regel na een tap "plakken" tot de gebruiker
   ergens anders tikt; de tegel bleef dan opgetild staan naast zijn buren. */
@media (hover: hover) and (pointer: fine) {
    .exeff-week-tile:hover:not(.is-disabled):not(.is-selected) {
        border-color: var(--exeff-accent, #66B86C);
        box-shadow: 0 4px 12px rgba(102, 184, 108, 0.15);
        transform: translateY(-1px);
    }
}

/* Press-feedback: de tegel bevestigt de klik zelf, nog vóór de REST-call
   op /select antwoordt. Zonder dit voelt de wachttijd als "er gebeurt
   niets". Compositor-only, dus geen frame-kosten. */
.exeff-week-tile:active:not(.is-disabled) {
    transform: scale(0.97);
    transition-duration: var(--exeff-dur-press, 120ms);
}

/* v1.14.3 — :focus-visible i.p.v. :focus: geen ring bij tap/klik (de tegel
   heeft zijn eigen selected-state), wél bij toetsenbordnavigatie. */
.exeff-week-tile:focus-visible {
    outline: 2px solid var(--exeff-accent, #66B86C);
    outline-offset: 2px;
}

/* Selected — v1.6.0: groene FILLED achtergrond + wit vinkje. Kritieke
   UX-fix uit Katrien UAT: klant dacht dat de "AANBEVOLEN" tile (groene
   rand, witte fill) al geselecteerd was en clickte niet. Selected moet
   visueel onmiskenbaar zwaarder zijn dan suggested. */
.exeff-week-tile.is-selected {
    background: var(--exeff-accent, #66B86C) !important;
    border: 2px solid #2f8f3d !important;
    box-shadow: 0 2px 10px rgba(47, 143, 61, 0.35) !important;
    color: #fff !important;
    transform: scale(1.02);
}

/* Alle child-tekst krijgt witte kleur op de groene fill */
.exeff-week-tile.is-selected .exeff-tile-label,
.exeff-week-tile.is-selected .exeff-tile-date,
.exeff-week-tile.is-selected .exeff-tile-savings-primary,
.exeff-week-tile.is-selected .exeff-tile-savings-breakdown,
.exeff-week-tile.is-selected .exeff-tile-savings,
.exeff-week-tile.is-selected .exeff-tile-free-ship,
.exeff-week-tile.is-selected .exeff-tile-state {
    color: #fff !important;
}
.exeff-week-tile.is-selected .woocommerce-Price-amount,
.exeff-week-tile.is-selected bdi {
    color: inherit !important;
}

/* EX-badge contrasteert op groen via subtiele transparante fill */
.exeff-week-tile.is-selected .exeff-tile-badge {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}

/* "AANBEVOLEN" pill verdwijnt zodra de tile geselecteerd is —
   het vinkje is nu het primaire signaal. */
.exeff-week-tile.is-selected .exeff-tile-suggested {
    display: none !important;
}

.exeff-week-tile.is-selected::after {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    color: #2f8f3d;
    content: '✓';
    display: flex;
    font-size: 0.95em;
    font-weight: 900;
    height: 1.5em;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: 0.55em;
    text-align: center;
    top: 0.55em;
    width: 1.5em;
}

/* Disabled — quietly retracted */
.exeff-week-tile.is-disabled {
    background: #fafafa;
    border-color: #ebebeb;
    box-shadow: none;
    color: #6f6f6f; /* v1.14.4: was #bbb (2,0:1 zodra de opacity weg is); 4,81:1 op #fafafa */
    cursor: not-allowed;
    /* v1.14.4 — was 0.45: vermenigvuldigde élke kleur in de tegel en maakte de
       1.14.3-contrastfix op .exeff-tile-state ongedaan (effectief 1,8:1; datum
       1,23:1). Eén dempingsmechanisme: kleur. Achtergrond #fafafa + rand #ebebeb
       dragen de "quietly retracted"-look. Gevonden door de onafhankelijke
       post-deploy-audit (webshop-2b, 17/09). */
    opacity: 1;
    pointer-events: none;
    transform: none;
}
.exeff-week-tile.is-disabled .exeff-tile-label,
.exeff-week-tile.is-disabled .exeff-tile-date { color: #6f6f6f; } /* v1.14.4: was #ccc; 4,81:1 op #fafafa — Levi: ook inactief ≥ 4,5:1 */
.exeff-week-tile.is-disabled .exeff-tile-state { color: #6f6f6f; font-size: 0.86em; } /* v1.14.4: 4,81:1 op #fafafa */ /* v1.14.3: was #ccc/0.7em (9,8px, 1,6:1) — dít is de reden waarom een week niet kan */

.exeff-week-tile.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Tile content — premium hierarchy: date → euro savings → meta → state */
.exeff-tile-label,
.exeff-tile-date {
    color: #444;
    display: block;
    font-size: 0.825em;
    font-weight: 500;
    margin-bottom: 0.4em;
}

.exeff-tile-savings-primary {
    color: #2d5e34;
    display: block;
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.35em;
}
.exeff-tile-savings-primary .woocommerce-Price-amount,
.exeff-tile-savings-primary bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Sub-line under the primary savings: "€X korting + €Y transport". Shows
   why the headline number is bigger than the discount alone — so the
   transport waiver is visible at the moment of the value-prop. */
.exeff-tile-savings-breakdown {
    color: #888;
    display: block;
    font-size: 0.7em;
    font-style: italic;
    line-height: 1.25;
    margin-top: -0.15em;
    margin-bottom: 0.35em;
}
.exeff-tile-savings-breakdown .woocommerce-Price-amount,
.exeff-tile-savings-breakdown bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.exeff-tile-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.exeff-tile-badge {
    background: #e8f5e9;
    border-radius: var(--exeff-radius-chip, 2px);
    color: #2d5e34;
    font-size: 0.75em;
    font-weight: 700;
    padding: 0.1em 0.45em;
    width: fit-content;
}

.exeff-tile-free-ship {
    color: var(--exeff-accent-deep, #1F6B32);
    font-size: 0.75em;
    font-weight: 600;
}

.exeff-tile-urgency {
    color: #e67e22;
    font-size: 0.8em;
    font-weight: 600;
}

/* Legacy alias — kept so older cached HTML still styles correctly */
.exeff-tile-savings {
    color: #2d5e34;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.2;
}
.exeff-tile-savings .woocommerce-Price-amount,
.exeff-tile-savings bdi {
    color: inherit;
    font-weight: inherit;
}

/* AJAX shell: skeleton tiles shown while hydrating from /availability */
.exeff-picker--loading { min-height: 220px; }
.exeff-picker__skeleton {
    display: grid;
    gap: 0.75em;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1em;
}
@media (min-width: 768px) {
    .exeff-picker__skeleton { grid-template-columns: repeat(4, 1fr); }
}
/* v1.14.0 — shimmer draait nu op transform i.p.v. background-position.
   background-position is een paint-property: elke frame herschilderde de
   volledige 200%-brede gradient van vier skeleton-tegels tegelijk, op de
   main thread, precies terwijl /availability aan het laden is en die thread
   het al druk heeft. De translateX-variant loopt op de compositor.
   Ook `ease-in-out` → `linear`: een oneindige loop met versnelling/
   vertraging leest als haperen, niet als beweging. */
.exeff-skeleton-tile {
    background: #f5f5f5;
    border-radius: var(--exeff-radius, 3px);
    height: 78px;
    overflow: hidden;
    position: relative;
}
.exeff-skeleton-tile::after {
    animation: exeff-skeleton-shimmer var(--exeff-dur-shimmer, 1200ms) linear infinite;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    content: '';
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
}
@keyframes exeff-skeleton-shimmer {
    to { transform: translateX(100%); }
}
.exeff-picker__loading-text {
    color: #888;
    font-size: 0.85em;
    margin: 0.75em 0 0;
    text-align: center;
}

.exeff-tile-state {
    color: #767676; /* v1.14.3: was #aaa (2,3:1); #767676 = 4,54:1 op wit */
    display: block;
    font-size: 0.86em; /* v1.14.3: was 0.75em → 10,5px; nu 12px */
    margin-top: 0.25em;
}

/* -----------------------------------------------------------------------
 * v1.10.1 — Tile headline + deposit-notice + legacy element kill-switch
 * Katrien UAT 2026-05-12 — geen euro-bedragen meer op tiles, BIB-waarborg
 * krijgt informatieve infobox op tab 4 Betaling.
 * ---------------------------------------------------------------------*/

.exeff-tile-headline {
    color: #2d5e34;
    display: block;
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0.45em 0 0.3em;
}
.exeff-week-tile.is-selected .exeff-tile-headline {
    color: #fff !important;
}

/* BIB-waarborg infobox op Tab Betaling — informatief (geen WC-fee, geen
 * automatische charge). Geel/oranje accent zodat hij als info-strook
 * leest, niet als kortings-banner. */
.exeff-deposit-notice {
    background: #fff8e6;
    border-left: 4px solid #f0c040;
    border-radius: var(--exeff-radius, 3px);
    font-size: 0.95em;
    line-height: 1.5;
    margin: 1em 0 0;
    padding: 0.9em 1.1em;
}
.exeff-deposit-notice p {
    color: #5c4a0d;
    margin: 0;
}
.exeff-deposit-notice strong {
    color: #8a6914;
    display: inline-block;
    margin-right: 0.2em;
}

/* Defensieve kill-switch: oude tile-elementen die mogelijk via WP Rocket
 * cache of een vergeten render-path nog in de DOM landen. !important
 * blokkeert ze zichtbaar zodat klanten geen stale euro-bedragen meer zien.
 * Verwijder in v1.11.0 wanneer geverifieerd is dat alle render-paths
 * (PHP-template + picker.js + EXEFF_DATA legacy consumers) zijn opgeruimd. */
.exeff-tile-savings-primary,
.exeff-tile-savings-breakdown,
.exeff-tile-badge {
    display: none !important;
}

.exeff-state-full .exeff-tile-state,
.exeff-state-unavailable .exeff-tile-state {
    color: #c0392b;
}

.exeff-state-almost_full .exeff-tile-state {
    color: #e67e22;
}

/* === Suggested week — pre-highlight (1.4.0, kopij verstevigd 1.6.0) ===
   Eerste available week krijgt subtiele groene rand + "Aanbevolen" badge.
   In v1.6.0 explicit GEEN fill (was #fafffe — bijna-wit, maar Katrien UAT
   wees uit dat klant het toch als "geselecteerd" interpreteerde door de
   ::before halo). Nu pure white background + groene rand — onmiskenbaar
   anders dan de selected state (groene fill + wit vinkje). */
.exeff-week-tile.is-suggested {
    background: #fff;
    border-color: var(--exeff-accent, #66B86C);
    position: relative;
}
.exeff-week-tile.is-suggested::before {
    display: none;
}
.exeff-tile-suggested {
    background: var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius-chip, 2px);
    color: #fff;
    display: block;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.4em;
    padding: 0.15em 0.5em;
    text-transform: uppercase;
    width: fit-content;
}
.exeff-week-tile.is-suggested.is-selected::before { display: none; }
.exeff-week-tile.is-suggested.is-selected .exeff-tile-suggested { display: none !important; }

/* === Mobile swipe carousel (1.4.0) ====================================
   Op kleine schermen worden de week-tiles een horizontale snap-scroll
   strip. Native CSS, geen JS-library. Maand-tabs ook horizontaal scrollbaar. */
/* v1.14.3 — 767.98px i.p.v. 768px: op exact 768 matchten dit blok én
   `(min-width: 768px)` tegelijk (iPad-portret kreeg de telefoonstrip). */
@media (max-width: 767.98px) {
    .exeff-week-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75em;
        overflow-x: auto;
        padding-bottom: 0.75em;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .exeff-week-grid::-webkit-scrollbar { display: none; }

    /* v1.14.3 — het `display: flex !important` hierboven won sinds v1.4.0 van
       `.exeff-week-grid.is-hidden { display: none }` (regel zonder !important,
       zelfde specificiteit): op ≤768px stonden ÁLLE maandpanelen open, elk als
       eigen snap-strip, ongeacht de actieve maandtab. */
    .exeff-week-grid.is-hidden {
        display: none !important;
    }

    .exeff-week-tile {
        /* v1.14.3 — 82% van de strip i.p.v. 72vw: op 390px was 72vw (281px)
           groter dan de strip zelf (282px), dus nul peek van de volgende tegel
           en geen enkele aanwijzing dat er meer weken zijn (scrollbar staat
           bewust uit). Nu blijft ~18% van de volgende tegel zichtbaar. */
        flex: 0 0 clamp(200px, 82%, 280px);
        max-width: 280px;
        min-width: 200px;
        scroll-snap-align: start;
    }
    .exeff-week-tile.is-suggested { flex: 0 0 clamp(200px, 88%, 280px); }
    /* Een uitverkochte/gesloten week hoeft de strip niet te vullen: smaller,
       zodat de eerstvolgende beschikbare (vaak de gekozen) week direct
       zichtbaar is i.p.v. 2 letters ervan (critique 17/09). */
    .exeff-week-tile.is-disabled { flex: 0 0 clamp(150px, 56%, 200px); }

    .exeff-month-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 0.25em;
        scrollbar-width: none;
    }
    .exeff-month-tabs::-webkit-scrollbar { display: none; }
}

/* Trust microcopy onder picker */
.exeff-picker__trust {
    border-top: 1px solid #f0f0f0;
    color: #999;
    font-size: 0.8em;
    font-style: italic;
    margin: 1em 0 0;
    padding-top: 0.75em;
    text-align: center;
}

/* Sticky post-selection confirmation */
.exeff-selection-summary {
    background: #f0f9f1;
    border: 2px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    margin-top: 1em;
    padding: 0.875em 1em;
}
.exeff-selection-summary__inner {
    align-items: center;
    display: flex;
    gap: 0.75em;
}
.exeff-selection-summary__check {
    background: var(--exeff-accent, #66B86C);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    font-size: 0.875em;
    font-weight: 700;
    height: 28px;
    line-height: 28px;
    text-align: center;
    width: 28px;
}
.exeff-selection-summary__details {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15em;
}
.exeff-selection-summary__week {
    color: #2d5e34;
    font-size: 0.95em;
}
.exeff-selection-summary__savings {
    color: var(--exeff-accent-deep, #1F6B32);
    font-size: 0.85em;
}
.exeff-selection-summary__breakdown {
    color: #6b7280;
    font-size: 0.75em;
    font-style: italic;
}
.exeff-selection-summary__breakdown[hidden] { display: none; }

/* === Transport-hint row in cart/checkout totals (sinds 1.1.0) ===
   Vervangt de oude small-italic regel — nu een prominent groen call-out
   met truck-icoon zodat klant het transport-voordeel niet mist. */
.exeff-transport-hint-row td {
    border: none !important;
    padding: 0 !important;
}
.exeff-transport-hint__inner {
    align-items: center;
    background: #f0f9f1;
    border-left: 3px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    color: #2d5e34;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85em;
    gap: 0.5em;
    margin: 0.5em 0;
    padding: 0.6em 0.875em;
}
.exeff-transport-hint__icon { font-size: 1.1em; line-height: 1; }
.exeff-transport-hint__text { flex: 1 1 auto; min-width: 0; }
.exeff-transport-hint__text strong {
    color: #1a4520;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* CTA button — theme/WooCommerce hebben hoge-specificity button rules
   (Astra `.ast-...`, `.woocommerce button.button`, etc.) die anders de
   default brand-pink achtergrond pushen. Daarom: scope-selector via parent
   + native-button reset + !important op de kritieke visuele properties. */
.exeff-transport-hint .exeff-transport-hint__cta,
button.exeff-transport-hint__cta {
    -webkit-appearance: none;
    appearance: none;
    background: var(--exeff-accent, #66B86C) !important;
    background-color: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--exeff-radius, 3px) !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin: 0 0 0 auto;
    min-height: 0;
    padding: 0.45em 0.9em;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    transition: background-color 0.15s ease;
}
.exeff-transport-hint .exeff-transport-hint__cta:hover,
.exeff-transport-hint .exeff-transport-hint__cta:focus,
button.exeff-transport-hint__cta:hover,
button.exeff-transport-hint__cta:focus {
    background: #4f9b55 !important;
    background-color: #4f9b55 !important;
    color: #fff !important;
    outline: none;
}
.exeff-transport-hint .exeff-transport-hint__cta:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--exeff-accent, #66B86C) !important;
}

/* === v1.7.6 — Premium nag modal voor klant zonder week-keuze =====================
   Toont een EX-gebrande dialog wanneer de klant van stap 3 → 4 wil zonder
   leverweek. Soft-block: opt-out via "Doorgaan zonder korting". Same
   specificity-defense als .exeff-transport-hint__cta (theme-buttons hebben
   default brand-pink en hoge specificity).
   ============================================================================== */
.exeff-modal-backdrop {
    background: rgba(15, 30, 17, 0.55);
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.2s ease;
    z-index: 99998;
}
.exeff-modal-backdrop.is-open {
    display: block;
    opacity: 1;
}
.exeff-modal {
    background: #fff;
    border-radius: var(--exeff-radius, 3px);
    box-shadow:
        0 20px 60px -10px rgba(15, 30, 17, 0.45),
        0 8px 20px -4px rgba(15, 30, 17, 0.25);
    display: none;
    left: 50%;
    max-height: calc(100vh - 32px);
    opacity: 0;
    overflow: auto;
    overscroll-behavior: contain; /* v1.14.3: scroll in de modal lekt niet naar de pagina */
    position: fixed;
    top: 50%;
    transform: translate(-50%, -45%);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    width: min(480px, calc(100vw - 32px));
    z-index: 99999;
}
.exeff-modal.is-open {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%);
}
.exeff-modal__close,
button.exeff-modal__close {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1;
    padding: 6px 10px !important;
    position: absolute;
    right: 8px;
    text-shadow: none;
    top: 8px;
    z-index: 1;
}
.exeff-modal__close:hover { opacity: 0.8; }
.exeff-modal__header {
    align-items: center;
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, #4f9b55 100%);
    border-radius: var(--exeff-radius, 3px) var(--exeff-radius, 3px) 0 0;
    color: #fff;
    display: flex;
    gap: 0.75em;
    padding: 1.5em 1.75em 1.25em;
}
.exeff-modal__badge {
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--exeff-radius-chip, 2px);
    color: #fff;
    flex-shrink: 0;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.3em 0.65em;
    text-transform: uppercase;
}
.exeff-modal__title {
    color: #fff;
    /* v1.14.3 — zelfde stem als .exeff-picker__title (Roboto Condensed,
       uppercase); was Montserrat sentence-case, de enige kop die afweek. */
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin: 0;
    text-transform: uppercase;
}
.exeff-modal__body {
    color: #2d5e34;
    font-size: 1em;
    line-height: 1.55;
    padding: 1.5em 1.75em 0.5em;
}
.exeff-modal__lead {
    color: #1a4520;
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 0 0.85em;
}
.exeff-modal__highlight {
    background: #f0f9f1;
    border-left: 3px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    color: #1a4520;
    font-size: 0.95em;
    margin: 0 0 1.25em;
    padding: 0.75em 1em;
}
.exeff-modal__highlight strong {
    color: #2d5e34;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.exeff-modal__question {
    color: #4a5d4d;
    font-size: 0.95em;
    margin: 0;
}
.exeff-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em 1.75em 1.5em;
}
.exeff-modal .exeff-modal__cta-primary,
button.exeff-modal__cta-primary {
    -webkit-appearance: none;
    appearance: none;
    background: var(--exeff-accent, #66B86C) !important;
    background-color: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--exeff-radius, 3px) !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    padding: 0.85em 1.25em !important;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.exeff-modal .exeff-modal__cta-primary:hover,
.exeff-modal .exeff-modal__cta-primary:focus,
button.exeff-modal__cta-primary:hover {
    background: #4f9b55 !important;
    background-color: #4f9b55 !important;
    color: #fff !important;
    outline: none;
}
.exeff-modal .exeff-modal__cta-primary:active {
    transform: scale(0.985);
}
.exeff-modal .exeff-modal__cta-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(102, 184, 108, 0.35) !important;
}
.exeff-modal .exeff-modal__cta-secondary,
button.exeff-modal__cta-secondary {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 500;
    padding: 0.5em 0.75em !important;
    text-decoration: underline;
    text-shadow: none;
    transition: color 0.15s ease;
}
.exeff-modal .exeff-modal__cta-secondary:hover,
button.exeff-modal__cta-secondary:hover {
    color: #2d5e34 !important;
}
@media (max-width: 480px) {
    .exeff-modal {
        width: calc(100vw - 16px);
    }
    .exeff-modal__header {
        padding: 1.25em 1.25em 1em;
    }
    .exeff-modal__body,
    .exeff-modal__actions {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
}

/* === Hide duplicate WC shipping row from review-table on step 1 ===
   CCF rendert de shipping methods in .ccf-shipping-options. WC core
   review-table rendert dezelfde <ul id="shipping_method"> in een
   "Verzending" rij. Twee elementen met dezelfde DOM id is invalid HTML
   en geeft de klant dubbel keuze. We verbergen de WC-rij CSS-only
   binnen de step-1 scope; alle andere views (cart, bedankt, mini-cart)
   blijven onaangeroerd. */
#step-1 .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
#step-1 .woocommerce-checkout-review-order-table tr.shipping {
    display: none !important;
}
/* v1.10.5 — Katrien feedback 2026-05-12: WC fee-rows met de verbose
   "EX Efficiency (TARGETS -15% = 10% + 5%, week 30)" label horen niet
   op tab 1 (bestellingsoverzicht). De EX-korting wordt al volledig
   getoond in de breakdown op tab 4 "Wat u betaalt"; tab 1 dient enkel
   om de gekozen producten te overzien. */
#step-1 .woocommerce-checkout-review-order-table tr.fee {
    display: none !important;
}
/* De transport-hint TR moet wel zichtbaar blijven, ook al staat hij
   tussen de (nu verborgen) shipping-rows in. */
#step-1 .woocommerce-checkout-review-order-table tr.exeff-transport-hint-row {
    display: table-row !important;
}

/* === Step 4 prijsoverzicht (sinds 1.2.0) ==================================
   Toont de drie commerciële lagen: subtotaal → EX-korting → transport-waiver →
   actueel totaal → 5% snel-betalen. Verstevigt B2B-vertrouwen door eindbedrag
   transparant op te delen vóór de klant op "Plaats bestelling" klikt. */
.exeff-price-breakdown {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: var(--exeff-radius, 3px);
    /* v1.14.3 — eigen basis in rem. Het blok zit in `#step-4 .ccf-summary-body`
       (0.82rem = 13,1px) en alles hieronder stapelt em-op-em: titel 11,2px,
       cash-rij 9,7px, icoon 7,3px, mail-notice 10,8px. Met 0.9rem (14,4px)
       landt elke tekstregel op ≥ 12px. */
    font-size: 0.9rem;
    margin: 1em 0;
    padding: 1em 1.25em;
}
.exeff-price-breakdown__title {
    color: #2d5e34;
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.75em;
    text-transform: uppercase;
}
.exeff-price-breakdown__table {
    border-collapse: collapse;
    font-size: 0.92em;
    width: 100%;
}
.exeff-price-breakdown__table td {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.4em 0;
}
/* v1.14.3 — `:not([colspan])`: de cash-rij is een td[colspan=2] en dus óók
   :last-child; met nowrap dwong die ene zin de tabel naar ~700px en vielen
   op ≤480px de bedragen zelf buiten beeld. */
.exeff-price-breakdown__table td:last-child:not([colspan]) {
    text-align: right;
    white-space: nowrap;
}
.exeff-price-breakdown__table td[colspan] {
    text-align: left;
    white-space: normal;
}
.exeff-price-breakdown__row--discount td {
    color: var(--exeff-accent-deep, #1F6B32);
    font-weight: 600;
}
.exeff-price-breakdown__row--total td {
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    padding: 0.55em 0;
}
.exeff-price-breakdown__row--cash td {
    color: var(--exeff-accent-deep, #1F6B32);
    font-style: italic;
}
/* v1.10.2 — Katrien UAT 2026-05-12: bold/italic geswapt in cash row.
   De prijsindicatie-mail (strong) is de bron-van-waarheid en moet visueel
   springen; het 5%-binnen-3-werkdagen blok (em) is informatief en mag
   cursief blijven. Strong override't de cursive op de TD-laag. */
.exeff-price-breakdown__row--cash td strong {
    font-style: normal;
    font-weight: 700;
}
.exeff-price-breakdown__row--cash td em {
    font-weight: 400;
}

/* Totaal te betalen (indicatief) — sinds 1.6.0 prominent BOLD met groene
   accent-border. Voorheen grijs italic small (te onopvallend volgens UAT). */
.exeff-price-breakdown__row--incl-btw td {
    border-top: 2px solid var(--exeff-accent, #66B86C);
    color: #1a4520;
    font-size: 1em;
    padding-top: 0.6em;
}
.exeff-price-breakdown__row--incl-btw strong {
    font-weight: 700;
}
.exeff-price-breakdown__row--incl-btw .woocommerce-Price-amount,
.exeff-price-breakdown__row--incl-btw bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* v1.6.0 — Info-highlights boven de breakdown-tabel. Toont de twee
   commerciële voordelen (10% EX + 5% snelle betaling) als prominente
   rijen zodat klant niet de hele tabel hoeft te lezen om de waarde-prop
   te zien. */
.exeff-price-breakdown__highlights {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin-bottom: 0.85em;
}
.exeff-price-breakdown__highlight {
    align-items: center;
    display: flex;
    font-size: 0.95em;
    gap: 0.5em;
    margin: 0;
}
.exeff-price-breakdown__highlight--ex strong {
    color: #1a4520;
}
.exeff-price-breakdown__highlight--cash {
    color: #2d5e34;
}
.exeff-price-breakdown__highlight--cash strong {
    color: inherit;
}

/* Prominent totaal-getal — primair visueel anker op tab 4 */
.exeff-price-breakdown__row--total td {
    font-size: 1.05em;
}
.exeff-price-breakdown__total-amount {
    color: #1a4520;
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.exeff-price-breakdown__total-amount .woocommerce-Price-amount,
.exeff-price-breakdown__total-amount bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* EX-badge voor de korting-rij — visuele koppeling met de groene CTA */
.exeff-price-breakdown__badge {
    background: var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius-chip, 2px);
    color: #fff;
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-right: 0.4em;
    padding: 0.1em 0.4em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Wanneer EX actief is: groen accent rond het hele blok */
.exeff-price-breakdown--ex-active {
    background: linear-gradient(180deg, #f7fcf8 0%, #fafafa 100%);
    border-color: #cfe7d2;
    box-shadow: 0 1px 0 rgba(102, 184, 108, 0.08);
}

/* Preview state (1.4.0) — bij browsen door maand-tabs vóór selectie.
   Visueel subtieler om "nog niet bevestigd" aan te geven. */
.exeff-price-breakdown--preview {
    background: repeating-linear-gradient(
        135deg,
        #fafafa 0,
        #fafafa 12px,
        #f5f5f5 12px,
        #f5f5f5 14px
    );
    border-style: dashed;
}
.exeff-price-breakdown--preview .exeff-price-breakdown__total-amount {
    color: #888;
    font-style: italic;
}

.exeff-price-breakdown__cash-icon {
    margin-right: 0.3em;
}
.exeff-price-breakdown__note {
    color: #888;
    font-size: 0.75em;
    font-style: italic;
    margin: 0.6em 0 0;
}
.exeff-free {
    color: var(--exeff-accent-deep, #1F6B32);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
/* Wijzigen-button — defensive specificity tegen Elementor/theme button reset
   (zelfde root-cause als de roze maand-tabs in 1.1.0). */
button.exeff-selection-summary__change,
.exeff-selection-summary button.exeff-selection-summary__change {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--exeff-accent, #66B86C) !important;
    border-radius: var(--exeff-radius, 3px) !important;
    box-shadow: none !important;
    /* Groene tekst op wit — moet de 4,5:1-drempel halen, dus deep. v1.14.0 */
    color: var(--exeff-accent-deep, #1F6B32) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    font-family: var(--exeff-font-body, 'Montserrat'), sans-serif !important;
    font-size: 0.8em !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0.35em 0.85em !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    width: auto !important;
}
button.exeff-selection-summary__change:hover,
.exeff-selection-summary button.exeff-selection-summary__change:hover {
    background: var(--exeff-accent, #66B86C) !important;
    background-color: var(--exeff-accent, #66B86C) !important;
    color: #fff !important;
}
button.exeff-selection-summary__change:focus-visible,
.exeff-selection-summary button.exeff-selection-summary__change:focus-visible {
    outline: 2px solid var(--exeff-accent, #66B86C) !important;
    outline-offset: 2px !important;
}

/* Tab switch fade-in (UX-6).
   v1.14.0 — 200ms/ease-out → 180ms op de premium-easing, gelijk met de
   rest van het swap-budget. De tegels binnen het paneel komen gestaggerd
   binnen: 30ms per tegel, hard gecapt op 6 zodat een maand met tien weken
   niet 300ms lang zit na te druppelen. Tegels 7+ delen de laatste
   vertraging. Alleen opacity + translateY: compositor-only. */
@keyframes exeff-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Het paneel zelf animeert bewust NIET meer (was: dezelfde fade op
   .exeff-week-grid.is-entering). Paneel én tegels animeren vermenigvuldigt
   de twee opacity-curves: de tegels kwamen daardoor trager op dan hun eigen
   180ms en de wissel oogde wazig. De tegels dragen de wissel nu alleen. */
.exeff-week-grid.is-entering .exeff-week-tile {
    animation: exeff-fade-in var(--exeff-dur-swap, 180ms) var(--exeff-easing-premium, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.exeff-week-grid.is-entering .exeff-week-tile:nth-child(1) { animation-delay: 0ms; }
.exeff-week-grid.is-entering .exeff-week-tile:nth-child(2) { animation-delay: 30ms; }
.exeff-week-grid.is-entering .exeff-week-tile:nth-child(3) { animation-delay: 60ms; }
.exeff-week-grid.is-entering .exeff-week-tile:nth-child(4) { animation-delay: 90ms; }
.exeff-week-grid.is-entering .exeff-week-tile:nth-child(5) { animation-delay: 120ms; }
/* Cap: alles vanaf de zesde tegel deelt 150ms. */
.exeff-week-grid.is-entering .exeff-week-tile:nth-child(n+6) { animation-delay: 150ms; }

/* Mismatch banner (Fase 2 implementation) */
.exeff-mismatch-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--exeff-radius, 3px);
    margin: 1em 0;
    padding: 1em;
}

.exeff-mismatch-banner__title {
    display: block;
    margin-bottom: 0.25em;
}

.exeff-mismatch-text,
.exeff-mismatch-banner__body {
    margin: 0;
}

/* Inline notices */
.exeff-inline-notice {
    border-radius: var(--exeff-radius, 3px);
    margin-bottom: 0.75em;
    padding: 0.75em;
}

.exeff-notice-error {
    background: #fdf0f0;
    border: 1px solid #e74c3c;
    color: #c0392b;
}

/* CCF Step 1 — EX Summary block (Fase 3) */
.exeff-ccf-summary {
    background: #f0f9f1;
    border: 2px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    font-size: 0.9em;
    padding: 1em;
}
.exeff-ccf-summary__header { align-items: center; display: flex; gap: 0.5em; margin-bottom: 0.75em; }
.exeff-ccf-summary__logo { background: var(--exeff-accent, #66B86C); border-radius: var(--exeff-radius-chip, 2px); color: #fff; font-size: 0.75em; font-weight: 700; padding: 0.1em 0.4em; }
.exeff-ccf-summary__title { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; }
.exeff-ccf-summary__list { list-style: none; margin: 0 0 0.5em; padding: 0; }
.exeff-ccf-summary__list li { align-items: baseline; display: flex; gap: 0.5em; margin-bottom: 0.25em; }
.exeff-ccf-summary__key { color: #666; flex-shrink: 0; min-width: 80px; }
.exeff-ccf-summary__value--week { font-weight: 600; }
/* v1.14.0 — deze twee stonden op #66B86C op de #f0f9f1-tint: 2,29:1.
   Beide dragen een bedrag; dat is de slechtst denkbare plek voor een
   kleur onder de drempel. */
.exeff-ccf-summary__value--discount { color: var(--exeff-accent-deep, #1F6B32); font-weight: 700; }
.exeff-ccf-summary__value--free-ship { color: var(--exeff-accent-deep, #1F6B32); }
.exeff-ccf-summary__change-hint { font-size: 0.85em; margin: 0.5em 0 0; }
/* v1.14.3 — "← Week wijzigen" was 100×14px op 11,5px: tap-target ≥ 24px en
   tekst ≥ 12px (WCAG 2.5.8 / leesbaarheid op telefoon). */
.exeff-ccf-summary__change-hint a {
    align-items: center;
    color: #555;
    display: inline-flex;
    font-size: max(1em, 12px);
    min-height: 24px;
    text-decoration: underline;
}

/* ==========================================================================
   v1.10.4 — Premium UI/UX polish (Katrien feedback 2026-05-12)
   --------------------------------------------------------------------------
   Three areas:
     A) Two-block instruction callouts (Doelen-scope) — 10% basis + jul/aug
     B) Premium polish for .exeff-picker (depth, typography, tile micro-feel)
     C) Premium polish for .exeff-price-breakdown (hierarchy, badge, totals)
   Loaded after the older rule blocks above so later declarations win the
   cascade where both target the same selector. We never bump !important
   beyond what the older Elementor/theme defense already requires.
   ========================================================================== */

/* ── Premium tokens (scoped extras, fall back to existing :root vars) ────── */
.exeff-picker,
.exeff-price-breakdown {
    /* --exeff-accent-deep is in v1.14.0 naar :root verhuisd: ook
       .exeff-ccf-summary en .exeff-lead-time gebruiken hem, en die vallen
       buiten deze scope. --exeff-radius-lg (8px) is geschrapt — zie de
       radius-schaal in de bestandskop. */
    --exeff-accent-soft: #e6f5e7;
    --exeff-accent-ink:  #1a4520;
    --exeff-warm-amber:  #d97706;
    --exeff-warm-bg:     #fff8eb;
    --exeff-warm-ink:    #7a3f04;
    --exeff-shadow-sm: 0 1px 2px rgba(15, 30, 17, 0.05);
    --exeff-shadow-md: 0 6px 20px -8px rgba(15, 30, 17, 0.18),
                       0 2px 4px rgba(15, 30, 17, 0.05);
    --exeff-shadow-lg: 0 18px 40px -16px rgba(15, 30, 17, 0.30),
                       0 4px 10px -4px rgba(15, 30, 17, 0.10);
    --exeff-easing-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ──────────────────────────────────────────────────────────────────────────
   A0) Premium intro notice (v1.10.10) — scope-agnostische enterprise-toon
   --------------------------------------------------------------------------
   Vervangt de scope-specifieke .exeff-picker__instruction paragraphs en de
   TARGETS twee-blok callouts. Doel: kaderen + vertrouwen geven, niet
   promoten. De tiles communiceren de scope-specifieke voorwaarden zelf.
   ────────────────────────────────────────────────────────────────────────── */
.exeff-picker__notice {
    align-items: flex-start;
    background: linear-gradient(180deg, #f7fbf8 0%, #f0f7f2 100%);
    border: 1px solid #dbe9de;
    border-radius: var(--exeff-radius, 3px);
    color: #355244;
    display: flex;
    gap: 0.875em;
    margin: 0 0 1.5em;
    padding: 0.95em 1.15em;
}

.exeff-picker__notice-icon {
    align-items: center;
    background: var(--exeff-accent-soft, #e7f4ea);
    border-radius: 50%;
    color: var(--exeff-accent-deep, #1f6b32);
    display: inline-flex;
    flex-shrink: 0;
    height: 2em;
    justify-content: center;
    width: 2em;
}

.exeff-picker__notice-icon svg {
    display: block;
}

.exeff-picker__notice-content {
    flex: 1 1 auto;
    min-width: 0;
}

.exeff-picker__notice-content p {
    color: #355244;
    font-size: 0.94em;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
}

.exeff-picker__notice-content p + p {
    margin-top: 0.4em;
}

@media (max-width: 480px) {
    .exeff-picker__notice {
        gap: 0.7em;
        padding: 0.85em 0.95em;
    }
    .exeff-picker__notice-content p {
        font-size: 0.9em;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   A) Two-block instruction callouts (Doelen-scope, jul/aug-bonus aware)
   ────────────────────────────────────────────────────────────────────────── */
.exeff-instruction-blocks {
    display: grid;
    gap: 0.75em;
    grid-template-columns: 1fr;
    margin: 0 0 1em;
}
@media (min-width: 720px) {
    .exeff-instruction-blocks {
        grid-template-columns: 1fr 1fr;
        gap: 0.875em;
    }
}

.exeff-instruction-block {
    align-items: flex-start;
    border-radius: var(--exeff-radius, 3px);
    box-shadow: var(--exeff-shadow-sm);
    display: flex;
    gap: 0.75em;
    padding: 0.95em 1.1em;
    position: relative;
    transition: box-shadow var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                transform var(--exeff-dur-press, 120ms) var(--exeff-easing-premium);
}
@media (hover: hover) and (pointer: fine) {
    .exeff-instruction-block:hover {
        box-shadow: var(--exeff-shadow-md);
        transform: translateY(-1px);
    }
}

.exeff-instruction-block__icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.05em;
    height: 1.85em;
    justify-content: center;
    line-height: 1;
    width: 1.85em;
}

.exeff-instruction-block__copy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.25em;
    min-width: 0;
}

.exeff-instruction-block__head {
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.exeff-instruction-block__sub {
    color: #4a5d4d;
    font-size: 0.85em;
    line-height: 1.45;
}

.exeff-instruction-block__badge {
    background: #fff;
    border: 1px solid currentColor;
    border-radius: var(--exeff-radius-chip, 2px);
    font-size: 0.65em;
    font-weight: 800;
    left: 0.95em;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.32em 0.65em;
    position: absolute;
    text-transform: uppercase;
    top: -0.7em;
}

/* 10%-basis: groene accent zoals de rest van het picker-systeem */
.exeff-instruction-block--basis {
    background: linear-gradient(180deg, #f4fbf5 0%, #ecf7ee 100%);
    border: 1px solid #c4e2c9;
    color: var(--exeff-accent-ink, #1a4520);
}
.exeff-instruction-block--basis .exeff-instruction-block__icon {
    background: var(--exeff-accent, #66B86C);
    color: #fff;
    font-weight: 800;
}
.exeff-instruction-block--basis .exeff-instruction-block__head {
    color: var(--exeff-accent-deep, #1f6b32);
}

/* 5%-seizoen: warm-amber (zomer-accent) zodat het visueel onderscheidt van
   het altijd-actieve 10%-blok en de jul/aug-conditie meteen leest. */
.exeff-instruction-block--seasonal {
    background: linear-gradient(180deg, #fffaf0 0%, #fff3dc 100%);
    border: 1px solid #f5d6a0;
    color: var(--exeff-warm-ink, #7a3f04);
}
.exeff-instruction-block--seasonal .exeff-instruction-block__icon {
    background: var(--exeff-warm-amber, #d97706);
    color: #fff;
    font-size: 1em;
}
.exeff-instruction-block--seasonal .exeff-instruction-block__head {
    color: var(--exeff-warm-ink, #7a3f04);
}
.exeff-instruction-block--seasonal .exeff-instruction-block__badge {
    background: var(--exeff-warm-amber, #d97706);
    border-color: var(--exeff-warm-amber, #d97706);
    color: #fff;
}

/* Click-instructie variant — compactere paragraph onder de twee blokken. */
.exeff-picker__instruction--click {
    background: #fafafa;
    border-left: 3px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    color: #2d5e34;
    font-size: 0.92em;
    line-height: 1.5;
    margin: 0 0 1em;
    padding: 0.7em 0.95em;
}
.exeff-picker__instruction--click strong {
    font-weight: 600;
}

/* Bij voorinformatie-mode: dim het seizoens-blok zachtjes als de actieve
   maand-tab géén jul/aug is — geeft duidelijke "deze bonus is nu niet van
   toepassing" feedback zonder de info weg te halen. Activeert via JS:
   <body class="exeff-active-month-may"> / -jun / -jul / -aug etc. */
body.exeff-active-month-05 .exeff-instruction-block--seasonal,
body.exeff-active-month-06 .exeff-instruction-block--seasonal,
body.exeff-active-month-09 .exeff-instruction-block--seasonal,
body.exeff-active-month-10 .exeff-instruction-block--seasonal {
    opacity: 0.7;
}
body.exeff-active-month-07 .exeff-instruction-block--seasonal,
body.exeff-active-month-08 .exeff-instruction-block--seasonal {
    box-shadow: var(--exeff-shadow-md);
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────────
   B) Premium polish — .exeff-picker
   ────────────────────────────────────────────────────────────────────────── */
.exeff-picker {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
    border-color: #e3e6e3;
    box-shadow: var(--exeff-shadow-md);
    border-radius: var(--exeff-radius, 3px);
    padding: 1.75em 1.75em 1.5em;
}

/* Header — subtiele groene accent-band + ruimere ademruimte */
.exeff-picker__header {
    background: linear-gradient(180deg, #f4fbf5 0%, #ffffff 100%);
    border-bottom: 1px solid #e3ede4;
    border-radius: var(--exeff-radius, 3px) var(--exeff-radius, 3px) 0 0;
    margin: -1.75em -1.75em 1.1em;
    padding: 1em 1.75em 0.85em;
}
.exeff-picker__badge {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%);
    box-shadow: 0 2px 4px rgba(31, 107, 50, 0.25);
    font-size: 0.7em;
    padding: 0.35em 0.65em;
}
.exeff-picker__title {
    color: var(--exeff-accent-ink, #1a4520);
    font-size: 1.15em;
    letter-spacing: 0.04em;
}

/* Gift-unlock — depth + subtiele inner-glow zodat het als premium CTA leest */
.exeff-gift-unlock {
    background: linear-gradient(135deg, #f0f9f1 0%, #e6f5e7 50%, #dff0e1 100%);
    border-width: 1px;
    border-color: #b8d8bd;
    border-radius: var(--exeff-radius, 3px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
                0 4px 12px -4px rgba(102, 184, 108, 0.25);
    padding: 1.05em 1.15em;
    position: relative;
    overflow: hidden;
}
.exeff-gift-unlock::before {
    background: radial-gradient(circle at 100% 0%, rgba(102, 184, 108, 0.18) 0%, transparent 60%);
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}
.exeff-gift-unlock__icon {
    font-size: 1.65em;
    filter: drop-shadow(0 1px 2px rgba(31, 107, 50, 0.25));
    z-index: 1;
}
.exeff-gift-unlock__text { z-index: 1; }
.exeff-gift-unlock__text strong {
    color: var(--exeff-accent-deep, #1f6b32);
    font-size: 1.08em;
    letter-spacing: 0.01em;
}

/* Month tabs — premium variant van de bestaande pill-stijl
   (we behouden alle Elementor-defense !important rules; deze laag
   verfijnt alleen kleur/shadow/transition zonder ze te ondermijnen). */
button.exeff-month-tab,
.exeff-picker button.exeff-month-tab {
    border-color: #d8ddd8 !important;
    color: #4b5b4d !important;
    font-weight: 600 !important;
    padding: 0.55em 1.25em !important;
    /* v1.14.0 — was `transition: all !important`, en won zo de cascade van
       de expliciete lijst hierboven (regel ~180). Zelfde vervanging: elke
       property die daadwerkelijk verandert, met de premium-easing. */
    transition: background-color var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                border-color var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                color var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                box-shadow var(--exeff-dur-press, 120ms) var(--exeff-easing-premium) !important;
}
@media (hover: hover) and (pointer: fine) {
    button.exeff-month-tab:hover:not(.is-active),
    .exeff-picker button.exeff-month-tab:hover:not(.is-active) {
        background: #f4fbf5 !important;
        background-color: #f4fbf5 !important;
        transform: translateY(-1px);
    }
}
button.exeff-month-tab.is-active,
.exeff-picker button.exeff-month-tab.is-active {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%) !important;
    background-color: var(--exeff-accent-deep, #1f6b32) !important;
    box-shadow: 0 4px 10px -2px rgba(31, 107, 50, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    font-weight: 700 !important;
}

/* Week tiles — depth + premium hover/active feedback */
.exeff-week-tile {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfc 100%);
    border-radius: var(--exeff-radius, 3px);
    border-width: 1px;
    box-shadow: var(--exeff-shadow-sm);
    padding: 1em 0.95em;
    /* v1.14.0 — deze regel wint de cascade over de eerdere transition (zelfde
       selector, later in het bestand). Duur teruggebracht van 220/250ms naar
       het 120ms-budget zodat hover en press consistent voelen. */
    transition: transform var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                border-color var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                box-shadow var(--exeff-dur-press, 120ms) var(--exeff-easing-premium),
                opacity 0.18s ease,
                background 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
    /* v1.14.0 — -2px → -1px (spec) + achter een echte-hover-guard, anders
       blijft de tegel op touch "opgetild" staan na een tap. */
    .exeff-week-tile:hover:not(.is-disabled):not(.is-selected) {
        border-color: var(--exeff-accent, #66B86C);
        box-shadow: var(--exeff-shadow-md);
        transform: translateY(-1px);
    }
}
/* Press wint van hover-lift: zelfde specificiteit (0,4,0), later in de
   cascade. Zonder dit bleef de tegel tijdens een klik omhoog "zweven"
   i.p.v. de scale(0.97)-press-feedback te tonen. */
.exeff-week-tile:active:not(.is-disabled):not(.is-selected) {
    transform: scale(0.97);
    transition-duration: var(--exeff-dur-press, 120ms);
}
.exeff-week-tile.is-selected {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%) !important;
    border-color: #1a5928 !important;
    border-radius: var(--exeff-radius, 3px) !important;
    box-shadow: 0 12px 26px -10px rgba(31, 107, 50, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.exeff-week-tile.is-selected::after {
    box-shadow: 0 2px 6px rgba(15, 30, 17, 0.20);
}

/* Tile typography — refined hierarchy en line-heights */
.exeff-tile-date,
.exeff-tile-label {
    color: #3d4a3f;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.exeff-tile-headline {
    font-size: 1.32em;
    letter-spacing: -0.015em;
    margin: 0.5em 0 0.4em;
}
.exeff-tile-free-ship {
    color: var(--exeff-accent-deep, #1f6b32);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.015em;
}

/* "AANBEVOLEN" pill — premium look op pure-white tile */
.exeff-tile-suggested {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%);
    box-shadow: 0 2px 4px rgba(31, 107, 50, 0.30);
    font-size: 0.66em;
    letter-spacing: 0.08em;
    padding: 0.22em 0.6em;
}

/* Selection summary — premium pill met depth */
.exeff-selection-summary {
    background: linear-gradient(180deg, #f4fbf5 0%, #ecf7ee 100%);
    border-radius: var(--exeff-radius, 3px);
    border-width: 1px;
    border-color: var(--exeff-accent, #66B86C);
    box-shadow: var(--exeff-shadow-md);
    padding: 1em 1.15em;
}
.exeff-selection-summary__check {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%);
    box-shadow: 0 2px 6px rgba(31, 107, 50, 0.30);
    font-size: 1em;
}
.exeff-selection-summary__week {
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.02em;
    font-weight: 700;
}

/* Picker trust microcopy — iets sterker zichtbaar */
.exeff-picker__trust {
    border-top-color: #e3ede4;
    color: #66716a; /* v1.14.3: was #7a857c (3,84:1); 5,08:1 */
    font-size: 0.82em;
    margin-top: 1.25em;
    padding-top: 0.95em;
}

/* ──────────────────────────────────────────────────────────────────────────
   C) Premium polish — .exeff-price-breakdown
   ────────────────────────────────────────────────────────────────────────── */
.exeff-price-breakdown {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfa 100%);
    border-color: #e3e6e3;
    border-radius: var(--exeff-radius, 3px);
    box-shadow: var(--exeff-shadow-md);
    padding: 1.25em 1.4em;
}
.exeff-price-breakdown__title {
    border-bottom: 1px solid #e3ede4;
    color: var(--exeff-accent-deep, #1f6b32);
    font-size: 0.85em;
    letter-spacing: 0.08em;
    margin: 0 0 0.85em;
    padding-bottom: 0.55em;
}
.exeff-price-breakdown__table {
    font-size: 0.95em;
}
.exeff-price-breakdown__table td {
    border-bottom: 1px solid #eef1ee;
    padding: 0.65em 0;
    vertical-align: middle;
}
.exeff-price-breakdown__table tr:last-child td,
.exeff-price-breakdown__row--total td {
    border-bottom: none;
}

/* EX-badge in label cell — premium pill ipv flat rectangle */
.exeff-price-breakdown__badge {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%);
    border-radius: var(--exeff-radius-chip, 2px);
    box-shadow: 0 1px 3px rgba(31, 107, 50, 0.25);
    font-size: 0.65em;
    margin-right: 0.55em;
    padding: 0.2em 0.55em;
}

/* Discount rows — typografische hiërarchie + zachte achtergrond-tint
   zodat de twee EX-korting regels visueel als één groep lezen. */
.exeff-price-breakdown__row--discount td {
    color: var(--exeff-accent-deep, #1f6b32);
    font-size: 0.97em;
    font-weight: 600;
    padding: 0.7em 0;
}
.exeff-price-breakdown__row--discount strong {
    color: var(--exeff-accent-ink, #1a4520);
    font-weight: 700;
    letter-spacing: 0.005em;
}
.exeff-price-breakdown__row--discount td:last-child {
    font-family: var(--exeff-font-heading, 'Roboto Condensed'), sans-serif;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Seizoens-rij krijgt subtiele warm-amber linker-accent zodat klant in één
   oogopslag het verschil ziet met de basis-EX rij. Conform de instruction-
   block kleurlogic boven. */
.exeff-price-breakdown__row--weekslot td:first-child {
    position: relative;
}
.exeff-price-breakdown__row--weekslot td:first-child::before {
    background: var(--exeff-warm-amber, #d97706);
    border-radius: 0 var(--exeff-radius-chip, 2px) var(--exeff-radius-chip, 2px) 0;
    content: '';
    height: 60%;
    left: -1.4em;
    position: absolute;
    top: 20%;
    width: 3px;
}
.exeff-price-breakdown__row--weekslot .exeff-price-breakdown__badge {
    background: linear-gradient(135deg, var(--exeff-warm-amber, #d97706) 0%, #b35900 100%);
    box-shadow: 0 1px 3px rgba(122, 63, 4, 0.25);
}

/* Transport-rij — neutraal maar duidelijk */
#exeff-breakdown-shipping-row td {
    color: #4a5d4d;
    font-weight: 500;
}
.exeff-free {
    background: linear-gradient(135deg, var(--exeff-accent, #66B86C) 0%, var(--exeff-accent-deep, #1f6b32) 100%);
    border-radius: var(--exeff-radius-chip, 2px);
    color: #fff !important;
    display: inline-block;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.22em 0.7em;
}

/* Totaal-rij — primair visueel anker met groene accent-band boven */
.exeff-price-breakdown__row--total td {
    background: linear-gradient(180deg, transparent 0%, #f4fbf5 100%);
    border-top: 2px solid var(--exeff-accent, #66B86C);
    border-bottom: none;
    font-size: 1.1em;
    padding: 0.85em 0 0.75em;
}
.exeff-price-breakdown__row--total td:first-child {
    padding-left: 0.5em;
}
.exeff-price-breakdown__row--total td:last-child {
    padding-right: 0.5em;
}
.exeff-price-breakdown__total-amount {
    color: var(--exeff-accent-deep, #1f6b32);
    font-size: 1.25em;
    font-weight: 800;
    letter-spacing: 0.005em;
}

/* Cash-row — informatief italic met zachte amber-strip ipv flat green.
   v1.10.7 — Katrien feedback 2026-05-12: tekst kleiner zodat de cash-row
   secundair leest tov de discount-rijen en het Te-betalen anker. */
.exeff-price-breakdown__row--cash td {
    background: #fffaf0;
    /* Inert zolang de tabel border-collapse:collapse is; meegenomen zodat
       hij niet als vierde waarde blijft rondslingeren. */
    border-radius: var(--exeff-radius, 3px);
    color: var(--exeff-warm-ink, #7a3f04);
    font-size: 0.88em; /* v1.14.3: was 0.78em → 9,7px */
    font-style: normal;
    line-height: 1.45;
    margin-top: 0.5em;
    padding: 0.6em 0.8em !important;
}
.exeff-price-breakdown__row--cash td strong {
    color: var(--exeff-warm-ink, #7a3f04);
}
.exeff-price-breakdown__row--cash td em {
    color: #8a5a14;
    font-style: italic;
}
.exeff-price-breakdown__cash-icon {
    background: var(--exeff-warm-amber, #d97706);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em; /* v1.14.3: was 0.75em → 7,3px glyph */
    font-style: normal;
    height: 1.5em;
    margin-right: 0.5em;
    width: 1.5em;
}

/* Active EX state — diepere groene achtergrond-wash + accent-shadow */
.exeff-price-breakdown--ex-active {
    background: linear-gradient(180deg, #f7fcf8 0%, #ecf7ee 100%);
    border-color: #b8d8bd;
    box-shadow: 0 8px 24px -10px rgba(31, 107, 50, 0.18),
                inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Mail notice onderaan — premium ondersteunende microcopy */
.exeff-price-breakdown__mail-notice {
    border-top: 1px dashed #e3ede4;
    color: #6b7572;
    font-size: 0.85em; /* v1.14.3: was 0.82em → 10,8px */
    font-style: italic;
    line-height: 1.5;
    margin: 0.85em 0 0;
    padding-top: 0.7em;
    text-align: center;
}

/* Preview-state pinstripe — minder druk dan repeating gradient, met
   subtieler dashed border zodat het past in de premium look. */
.exeff-price-breakdown--preview {
    background: linear-gradient(180deg, #fafbfa 0%, #f5f7f5 100%);
    border-style: dashed;
    border-color: #c8cfc8;
}
.exeff-price-breakdown--preview .exeff-price-breakdown__total-amount {
    color: #6b7572;
}

/* Mobile (< 720px) — compactere padding, behoudt premium accenten */
@media (max-width: 719px) {
    .exeff-picker {
        padding: 1.25em 1em 1em;
    }
    .exeff-picker__header {
        margin: -1.25em -1em 0.85em;
        padding: 0.85em 1em 0.7em;
    }
    .exeff-price-breakdown {
        padding: 1em 1.1em;
    }
    .exeff-instruction-block {
        padding: 0.85em 0.95em;
    }
    .exeff-instruction-block__badge {
        font-size: 0.6em;
        padding: 0.28em 0.55em;
    }
}

/* Reduced-motion respect — kill premium translate/transform animations */
@media (prefers-reduced-motion: reduce) {
    .exeff-instruction-block,
    .exeff-week-tile,
    button.exeff-month-tab,
    .exeff-modal,
    .exeff-modal-backdrop,
    .exeff-modal .exeff-modal__cta-primary,
    button.exeff-modal__cta-primary,
    .exeff-selection-summary button.exeff-selection-summary__change,
    button.exeff-selection-summary__change,
    .exeff-transport-hint .exeff-transport-hint__cta,
    button.exeff-transport-hint__cta,
    .exeff-flash-update {
        transition: none !important;
    }
    .exeff-instruction-block:hover,
    .exeff-week-tile:hover:not(.is-disabled):not(.is-selected),
    .exeff-week-tile:active:not(.is-disabled):not(.is-selected),
    button.exeff-month-tab:hover:not(.is-active),
    .exeff-modal .exeff-modal__cta-primary:active {
        transform: none !important;
    }
    /* v1.14.0 — uitgebreid naar alle nieuwe v1.14.0-selectors: maandtab-
       stagger, tegel-stagger, shimmer, tab-fade. Opacity-fades blijven
       (ze zijn geen beweging), animatie zelf gaat uit, shimmer wordt
       statisch. */
    .exeff-week-grid.is-entering .exeff-week-tile,
    .exeff-week-tile.is-selected,
    .exeff-skeleton-tile::after {
        animation: none !important;
    }
    .exeff-week-grid.is-entering .exeff-week-tile {
        opacity: 1 !important;
        transform: none !important;
    }
    .exeff-skeleton-tile::after {
        transform: none !important;
    }
}

/* ==========================================================================
   v1.10.26 — CWA STYLING ALIGNMENT (full premium coverage)
   --------------------------------------------------------------------------
   CWA (Custom Webshop Archive) = master design-systeem voor de webshop.
   Deze override-laag trekt de EX-eff "Premium polish" (sectie A0/A/B/C
   hierboven) bij naar CWA-conforme waarden zonder Katrien-UAT-conversie-
   signalen te verzwakken:
     - border-radius: 3px overal (was 8px / 20px / 999px)
     - flat fills (geen lineair/diagonale gradients op cards/banners/buttons)
     - hairline rgba(0,0,0,0.08) borders waar polish solid coloured was
     - rust-state: geen shadow; hover-shadow neutraal getint zoals CWA cards
     - één-groene accent (#66b86c) ipv groen→deep-green gradient

   BEHOUDEN (Katrien UAT 2026-05-12/13 — conversie-kritiek):
     - .exeff-week-tile.is-selected: gevulde groene fill + wit ✓ + scale +
       pulse (UAT-fix tegen "outlined leest als gekozen")
     - .exeff-tile-suggested "AANBEVOLEN" pill als signal-element
     - Pulse-animatie bij selectie + skeleton shimmer (functioneel feedback)
     - Kill-switch op stale euro-bedragen op tiles (regel 527-531)
     - Disabled / loading / is-suggested / is-selected state-machine
     - Modal premium-lift shadow (modals mogen lift hebben in CWA)
     - Deposit-notice (amber, informatief) + mismatch-banner (amber, warning)
     - Inline error notices (rood)
     - Semantische warm-amber kleur voor seizoens-bonus rij (jul/aug)
   ========================================================================== */

/* ── Radii: alle premium 8px → 3px (CWA standard) ── */
.exeff-picker,
.exeff-picker__notice,
.exeff-gift-unlock,
.exeff-week-tile,
.exeff-selection-summary,
.exeff-instruction-block,
.exeff-price-breakdown {
    border-radius: var(--exeff-radius, 3px) !important;
}
.exeff-picker__header {
    border-radius: var(--exeff-radius, 3px) var(--exeff-radius, 3px) 0 0 !important;
}

/* Pill-radii (999px / 20px) → 3px rechthoek (CWA tabs/badges patroon) */
button.exeff-month-tab,
.exeff-picker button.exeff-month-tab,
.exeff-instruction-block__badge,
.exeff-price-breakdown__badge,
.exeff-free {
    border-radius: var(--exeff-radius, 3px) !important;
}

/* ── .exeff-picker: flat wit, geen rust-shadow ── */
.exeff-picker {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.exeff-picker__header {
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.exeff-picker__badge {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.exeff-picker__title {
    color: var(--exeff-text, #232323) !important;
}

/* ── Intro notice: flat groen tint + 3px linker-bar (CWA pattern) ── */
.exeff-picker__notice {
    background: rgba(102, 184, 108, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: 3px solid var(--exeff-accent, #66B86C) !important;
}
.exeff-picker__notice-icon {
    background: rgba(102, 184, 108, 0.12) !important;
    /* v1.14.0 — icoon staat op een bijna-witte tint; #66B86C haalt daar
       geen 3:1 (grafisch object, WCAG 1.4.11), laat staan 4.5:1. */
    color: var(--exeff-accent-deep, #1F6B32) !important;
}

/* ── Gift-unlock: flat groene tint + groene linker-bar, géén radial highlight ── */
.exeff-gift-unlock {
    background: rgba(102, 184, 108, 0.06) !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: 3px solid var(--exeff-accent, #66B86C) !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.exeff-gift-unlock::before {
    display: none !important;
}
.exeff-gift-unlock__icon {
    filter: none !important;
}
.exeff-gift-unlock__text strong {
    color: var(--exeff-text, #232323) !important;
}

/* ── Instruction blocks: flat tints + 3px linker-bar (semantische amber blijft) ── */
.exeff-instruction-block {
    box-shadow: none !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.exeff-instruction-block:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.exeff-instruction-block--basis {
    background: rgba(102, 184, 108, 0.06) !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-left: 3px solid var(--exeff-accent, #66B86C) !important;
}
.exeff-instruction-block--seasonal {
    background: rgba(200, 150, 46, 0.06) !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-left: 3px solid var(--exeff-warm-amber, #d97706) !important;
}
.exeff-instruction-block__badge {
    background: var(--exeff-accent, #66B86C) !important;
    border: none !important;
    color: #fff !important;
    letter-spacing: 0.06em !important;
}
.exeff-instruction-block--seasonal .exeff-instruction-block__badge {
    background: var(--exeff-warm-amber, #d97706) !important;
    border: none !important;
    color: #fff !important;
}

/* ── Month-tabs: pill 20px → 3px rechthoek, flat groen actief ── */
button.exeff-month-tab,
.exeff-picker button.exeff-month-tab {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    color: var(--exeff-text, #232323) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
}
button.exeff-month-tab:hover:not(.is-active),
.exeff-picker button.exeff-month-tab:hover:not(.is-active) {
    background: rgba(102, 184, 108, 0.08) !important;
    background-image: none !important;
    border-color: var(--exeff-accent, #66B86C) !important;
    /* v1.14.0 — was --exeff-accent; deze regel is de laatste in het bestand
       op deze selector en wint dus de cascade over de eerdere deep-fix. */
    color: var(--exeff-accent-deep, #1F6B32) !important;
    transform: none !important;
}
button.exeff-month-tab.is-active,
.exeff-picker button.exeff-month-tab.is-active {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    border-color: var(--exeff-accent, #66B86C) !important;
    box-shadow: 0 2px 8px rgba(102, 184, 108, 0.25) !important;
    color: #fff !important;
}

/* ── Week-tile rust: flat wit, hairline, géén rust-shadow ── */
.exeff-week-tile {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
/* v1.14.0 — dit is de laatste regel in het bestand die deze selector
   raakt, dus hij wint de cascade over de A2-hover hierboven (regel ~1712)
   ondanks dat die specifieker gedocumenteerd is. -2px → -1px (spec) +
   achter dezelfde echte-hover-guard. */
@media (hover: hover) and (pointer: fine) {
    .exeff-week-tile:hover:not(.is-disabled):not(.is-selected) {
        background: #fff !important;
        border-color: var(--exeff-accent, #66B86C) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        transform: translateY(-1px);
    }
}

/* KATRIEN UAT — selected MOET onmiskenbaar zwaarder zijn dan suggested.
   Behoud gevulde fill + wit ✓ + scale + pulse; alleen gradient en
   gewicht-zware groene drop-shadow worden CWA-conform (flat + subtiele
   groen-glow zoals CWA CTA-hover). */
.exeff-week-tile.is-selected {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    border: 2px solid #2f8f3d !important;
    box-shadow: 0 2px 8px rgba(102, 184, 108, 0.25) !important;
    color: #fff !important;
}

/* Suggested pill: flat groen (geen gradient, geen drop-shadow) */
.exeff-tile-suggested {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ── Selection summary: flat groene tint card ── */
.exeff-selection-summary {
    background: rgba(102, 184, 108, 0.06) !important;
    background-image: none !important;
    border: 1px solid var(--exeff-accent, #66B86C) !important;
    box-shadow: none !important;
}
.exeff-selection-summary__check {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ── Price-breakdown: flat wit, hairline, géén rust-shadow ── */
.exeff-price-breakdown {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
.exeff-price-breakdown--ex-active {
    background: rgba(102, 184, 108, 0.04) !important;
    background-image: none !important;
    border-color: rgba(102, 184, 108, 0.25) !important;
    box-shadow: none !important;
}
.exeff-price-breakdown--preview {
    background: repeating-linear-gradient(
        135deg,
        #fafafa 0,
        #fafafa 12px,
        #f5f5f5 12px,
        #f5f5f5 14px
    ) !important;
    border-style: dashed !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: none !important;
}
.exeff-price-breakdown__badge {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.exeff-price-breakdown__row--weekslot .exeff-price-breakdown__badge {
    background: var(--exeff-warm-amber, #d97706) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.exeff-price-breakdown__row--total td {
    background: transparent !important;
    background-image: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.exeff-free {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 2px 7px !important;
}

/* ── Modal: corners 8px → 3px, header flat groen (geen gradient) ── */
.exeff-modal {
    border-radius: var(--exeff-radius, 3px) !important;
    /* Modal keeps lift-shadow — CWA permits elevated overlays */
}
.exeff-modal__header {
    background: var(--exeff-accent, #66B86C) !important;
    background-image: none !important;
    border-radius: var(--exeff-radius, 3px) var(--exeff-radius, 3px) 0 0 !important;
}
.exeff-modal__badge {
    border-radius: var(--exeff-radius, 3px) !important;
}
.exeff-modal .exeff-modal__cta-primary,
button.exeff-modal__cta-primary {
    box-shadow: none !important;
}

/* ==========================================================================
   v1.12.0 — Lead-time notice
   --------------------------------------------------------------------------
   Vervangt de .exeff-gift-unlock kortingsteaser. Andere rol, dus bewust een
   andere toon: de gift-unlock was groen/promotioneel, dit is een neutrale
   informatiestrook die vertelt vanaf wanneer geleverd kan worden. Zit boven
   de .exeff-picker__notice zodat de klant eerst de harde randvoorwaarde leest
   en daarna pas de uitleg over bundelen.

   Radius staat expliciet op --exeff-radius: dit blok is nieuw en valt buiten
   de CWA-radius-lijst verderop in dit bestand.
   ========================================================================== */
.exeff-lead-time {
    align-items: flex-start;
    background: #f6f7f8;
    border: 1px solid var(--exeff-border, rgba(0, 0, 0, 0.08));
    border-left: 3px solid var(--exeff-accent, #66B86C);
    border-radius: var(--exeff-radius, 3px);
    color: var(--exeff-text, #1a1a1a);
    display: flex;
    gap: 0.7em;
    margin: 0 0 1.15em;
    padding: 0.75em 0.95em;
}

.exeff-lead-time__icon {
    align-items: center;
    color: var(--exeff-accent-dark, #4fa456);
    display: inline-flex;
    flex-shrink: 0;
    /* Optisch uitlijnen met de eerste tekstregel i.p.v. met de box. */
    margin-top: 0.1em;
}

.exeff-lead-time__icon svg {
    display: block;
}

.exeff-lead-time__text {
    font-size: 0.92em;
    font-weight: 500;
    line-height: 1.5;
    /* Lange scope-copy mag afbreken op smalle schermen zonder de flexbox
       te laten overflowen (min-width:auto is de default op flex-items). */
    min-width: 0;
}

@media (max-width: 480px) {
    .exeff-lead-time {
        gap: 0.6em;
        padding: 0.7em 0.8em;
    }
    .exeff-lead-time__text {
        font-size: 0.88em;
    }
}

/* Reduced motion / high contrast: de strook heeft geen animatie, maar de
   linker accentrand moet in forced-colors zichtbaar blijven. */
@media (forced-colors: active) {
    .exeff-lead-time {
        border-left-color: Highlight;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   v1.14.3 — Web Interface Guidelines-pass (review 17/09)
   ────────────────────────────────────────────────────────────────────────── */
/* Geen 300ms double-tap-vertraging en geen zoom bij dubbel tikken op knoppen. */
.exeff-week-tile,
.exeff-month-tab,
.exeff-modal__close,
.exeff-modal__cta-primary,
.exeff-modal__cta-secondary,
.exeff-selection-summary__change,
.exeff-transport-hint__cta {
    touch-action: manipulation;
}
/* Bedragen in kolommen: gelijke cijferbreedte, zodat de kolom recht staat. */
.exeff-price-breakdown__table td:last-child:not([colspan]),
.exeff-price-breakdown__total-amount,
.exeff-tile-price {
    font-variant-numeric: tabular-nums;
}
/* Koppen zonder weduwen (390: "Nog geen leverweek / gekozen"). */
.exeff-picker__title,
.exeff-modal__title {
    text-wrap: balance;
}
.exeff-modal__lead,
.exeff-modal__question {
    text-wrap: pretty;
}
/* Thema-tabelstijl (kolomlijnen, grijze labelkolom) hoort niet in het
   prijsoverzicht: alleen de eigen horizontale scheidingslijnen blijven. */
.exeff-price-breakdown__table,
.exeff-price-breakdown__table tr,
.exeff-price-breakdown__table td {
    background: transparent;
    border-left: 0;
    border-right: 0;
}
/* Leesbreedte: 149–168 tekens per regel op desktop. */
.exeff-picker__trust,
.exeff-price-breakdown__mail-notice {
    margin-left: auto;
    margin-right: auto;
    max-width: 62ch;
}