@charset "UTF-8";
/* WooCommerce Plus — tokensheet
   ===========================================================================
   Eén plek voor alle --wcp-*-variabelen die de plugin-CSS uitleest, met de
   neutrale standaard van de demo-store (woocommerce-plus.nl). Het thema-contract
   (docs/thema-contract.md §3) zegt: het thema zet de tokens op :root, de plugin
   leest ze. Zonder deze sheet bestond dat contract alleen als afspraak: elke
   var() droeg zijn eigen inline fallback en die fallbacks liepen uiteen
   (--wcp-color-primary had er drie). Vanaf nu staat de standaard hier, één keer,
   en zijn de inline fallbacks weg.

   Waarom :where(:root) en niet :root
   :where() heeft specificiteit 0. Een thema zet zijn tokens op :root
   (specificiteit 0,1,0) en wint daardoor altijd van deze sheet, in welke
   volgorde de stylesheets ook in de HTML staan. Met een gewone :root zou het
   thema alleen winnen als zijn stylesheet later laadt, en dat hangt nu van een
   enqueue-prioriteit en een handle-truc in includes/assets.php af; in de
   blokkeneditor (eigen handles, blocks.php) gaat die volgorde al niet op.
   Zo is de sheet wat hij hoort te zijn: de bodem van de cascade.

   Spelregels:
   - Alleen :root, geen component-selectors. Een definitie op .wcp-offcanvas of
     .wcp-product-tabs zit dichter op het element dan de :root van een thema en
     wint dan van het token dat een shop zet — precies wat het contract belooft
     dat níét gebeurt. Daarom zijn --wcp-offcanvas-width en de --wcp-tabs-*
     hierheen verhuisd (uit wcp-ui.css en single-product-tabs.css).
   - Componenttokens verwijzen naar basistokens (--wcp-footer-bg leest
     --wcp-color-light): een thema dat alleen de basis zet, krijgt de rest mee.
   - wcp-ui hangt van deze sheet af (includes/assets.php), zodat de z-index-
     ladder er staat vóór de eerste regel die hem leest; de cascade-belofte
     komt van :where(), niet van die volgorde.
   - Interne rekenvariabelen (--wcp-usps-line, --wcp-usps-slide) horen hier
     niet: die zet de component of wcp-ui.js op het element zelf.
   - Een component mag een token op het element verlagen of verhogen (Lijmkam
     zet --wcp-collapse-clamp op 3rem voor de korte omschrijving); alleen de
     plugin doet dat niet.
   ======================================================================== */

:where(:root) {
	/* ── Kleur ──────────────────────────────────────────────────────────────
	   Basispalet. Primary is het paars van de demo-store; hover is dezelfde
	   toon een stap donkerder. Danger en success zijn de gedempte varianten die
	   ook hard in de plugin-CSS voorkomen (formulierfouten, voorraadstatus). */
	--wcp-color-primary:        #873eff;
	--wcp-color-primary-hover:  #6f2be6;
	--wcp-color-secondary:      #ff6a00;
	--wcp-color-dark:           #374151;
	--wcp-color-text:           #374151;
	--wcp-color-muted:          #6c757d;
	--wcp-color-light:          #f5f4f0;
	--wcp-color-border:         #e5e7eb;
	--wcp-color-danger:         #9b1c1c;
	--wcp-color-success:        #1e7e34;
	--wcp-color-success-soft:   #e6f4ea;
	/* Linkhover in add-ons (combi-deal) volgt de primaire hover. */
	--wcp-color-link-hover:     var(--wcp-color-primary-hover);

	/* ── Vlakken ────────────────────────────────────────────────────────────
	   --wcp-surface is de oudere naam uit wcp-ui.css voor hetzelfde vlak als
	   --wcp-color-surface; alias, zodat beide lezers dezelfde kleur zien. */
	--wcp-color-surface:        #fff;
	--wcp-surface:              var(--wcp-color-surface);
	--wcp-color-surface-alt:    #f5f4f0;
	--wcp-cart-aside-bg:        var(--wcp-color-light);
	--wcp-checkout-aside-bg:    var(--wcp-color-light);
	--wcp-search-bg:            var(--wcp-color-light);
	/* Wordt als kléur gelezen (wcp-search.css: `1px solid var(--wcp-search-border)`),
	   niet als border-shorthand. */
	--wcp-search-border:        transparent;
	--wcp-badge-label-bg:       var(--wcp-color-primary);
	--wcp-badge-label-accent-bg: #e5641e;
	--wcp-backdrop-bg:          rgba(0, 0, 0, 0.5);
	--wcp-tooltip-bg:           #111;
	--wcp-tooltip-fg:           #fff;
	/* Kleur waarnaar een ingeklapte read-more wegvloeit: een kleurstop ín een
	   gradient (single-product-tabs.css), dus een kleur en geen gradient. Normaal
	   gelijk aan het vlak. */
	--wcp-collapse-fade:        #fff;
	--wcp-returns-muted-color:  #999;

	/* ── Typografie ─────────────────────────────────────────────────────────
	   Alleen de maten en gewichten die de plugin echt uitleest; de rest erft
	   van het thema. regular en normal zijn twee namen voor hetzelfde gewicht. */
	--wcp-font-size-sm:         0.875rem;
	--wcp-font-size-lg:         1.25rem;
	--wcp-h6:                   1rem;
	--wcp-font-weight-normal:   400;
	--wcp-font-weight-regular:  var(--wcp-font-weight-normal);
	--wcp-font-weight-medium:   500;
	--wcp-font-weight-semibold: 600;
	--wcp-font-weight-bold:     700;

	/* ── Vorm en afstand ────────────────────────────────────────────────────
	   --wcp-border wordt in de plugin als kléur gelezen (single-product-tabs.css,
	   `solid var(--wcp-border)`), niet als border-shorthand zoals het Starter-
	   thema hem zet. Tot die regel op --wcp-color-border staat, blijft de
	   standaard hier een kleur, anders valt de rand van de specificatietabel weg. */
	--wcp-border-width:         1px;
	--wcp-border:               var(--wcp-color-border);
	--wcp-radius:               0.375rem;
	--wcp-radius-sm:            0.25rem;
	--wcp-gutter:               2rem;
	--wcp-block-gap:            2.5rem;
	/* Maximale breedte van de inhoud; add-ons (sticky-add-to-cart) lezen hem om
	   binnen de .container van het thema te blijven. Een thema zet hier zijn
	   eigen containerbreedte. */
	--wcp-container:            1140px;
	--wcp-offcanvas-width:      22rem;
	--wcp-search-max-width:     36rem;
	--wcp-logo-height:          2.75rem;
	/* Hoogte waarop een read-more-paneel (.wcp-collapse) op mobiel ingeklapt
	   staat; zonder waarde is er geen clamp en dus geen read-more. */
	--wcp-collapse-clamp:       12rem;

	/* ── Lagen ──────────────────────────────────────────────────────────────
	   Eén ladder boven de vaste header. Zwevende hulpelementen (chatknop,
	   terug-naar-boven) staan boven de pagina maar onder de backdrop, anders
	   hangen ze over een geopende dialoog of offcanvas. Een thema leidt deze af
	   van zijn eigen header-z-index. */
	--wcp-z-header:             1010;
	--wcp-z-dropdown:           1030;
	--wcp-z-floating:           1035;
	--wcp-z-backdrop:           1040;
	--wcp-z-overlay:            1050;
	--wcp-z-tooltip:            1060;

	/* ── Componenten: header en footer ──────────────────────────────────────
	   Optioneel voor een thema dat wcp_header()/wcp_footer() gebruikt. Alles
	   verwijst naar het basispalet; alleen zetten wat afwijkt. */
	--wcp-topbar-bg:            var(--wcp-color-light);
	--wcp-topbar-color:         var(--wcp-color-text);
	--wcp-menubar-bg:           var(--wcp-color-primary);
	--wcp-menubar-color:        #fff;
	--wcp-footer-bg:            var(--wcp-color-light);
	--wcp-footer-color:         var(--wcp-color-text);
	--wcp-footer-title-color:   var(--wcp-color-dark);
	--wcp-announcement-bg:      var(--wcp-color-dark);
	--wcp-announcement-color:   #fff;
	--wcp-whatsapp-bg:          #25d366;

	/* ── Componenten: productpagina-tabs ────────────────────────────────────
	   Stonden op .wcp-product-tabs zelf en overschreven daardoor de :root van
	   het thema (Lijmkam zet ze al, maar kreeg ze nooit). De waarden zijn de
	   oude Bootstrap-maten: gy-5, col-lg-4, sticky-top. --wcp-tabs-border is
	   de enige border-shorthand onder de tokens. */
	--wcp-tabs-gap:             2rem;
	--wcp-tabs-aside-width:     20rem;
	--wcp-tabs-sticky-top:      1rem;
	--wcp-tabs-border:          1px solid currentColor;
	--wcp-tabs-toggle-padding:  0.5rem 0;
}