/*
 * Design tokens + basis-elementstijlen — verbeterplan/_ontwerprichting.md
 * (vervangt de eerdere VM-04/VM-11/VM-12-waarden: goud/#7A6040, Cormorant).
 *
 * Laadvolgorde (inc/enqueue-design-tokens.php, prioriteit 999): ná
 * inc/assets/fonts.css (@font-face Figtree, prioriteit 1), ná het
 * moederthema (reset.css/theme.css), ná WooCommerce en ná het oude child-
 * theme style.css. Pagina-specifieke stylesheets van het herontwerp
 * (winkelwagen-afrekenen, product/categorie, toegankelijkheid) laden op
 * prioriteit 1000, dus ná dit bestand.
 *
 * Cascade-afspraken:
 * - Dit bestand is de BASISLAAG: gewone element-/klasse-selectors met lage
 *   specificiteit en zonder !important. Pagina-stylesheets (allemaal met
 *   ≥ 2 klassen of klasse+element) winnen daardoor altijd, ongeacht volgorde.
 * - NIET scopen aan body.elementor-kit-11: die klasse verdwijnt zodra
 *   Elementor weggaat en gaf een cascade-conflict op /stel-uw-vraag/
 *   (zie contactform.css). Voor de pagina's die nog door de Elementor-builder
 *   worden gerenderd (daar laadt de kit-CSS post-11 nog, met goud op h1-h6 en
 *   a) staat elke generieke regel ook op `.elementor-page …`: zelfde
 *   specificiteit (0,1,1) als `.elementor-kit-11 h1`, maar later geladen, dus
 *   winnend. body.elementor-page staat uitsluitend op builder-pagina's en
 *   verdwijnt samen met Elementor — dan nemen de kale element-regels het over.
 * - !important UITSLUITEND waar het oude style.css dat zelf afdwingt (sectie
 *   "style.css-overrides" onderaan); per regel staat erbij waarom.
 * - Overal variabelen; geen losse hexcodes buiten :root.
 */

:root {
  /* ===== Kleur =====
     Standaard: palet "Origineel" (goud en zand van 123cosmetica.nl).
     Beheer in wp-admin: Weergave > Huisstijl-kleuren (inc/huisstijl-kleuren.php)
     zet deze variabelen inline opnieuw, met de keuze Zacht / Fris / Eigen.
     De namen komen uit ontwerp G en beschrijven een ROL, geen tint:
     --kleur-groen = primaire actiekleur, --kleur-amber = accent.
     Origineel = de live site 1-op-1. Let op: wit op goud #AF956E haalt 2,8:1
     (onder WCAG 4,5:1, zoals nu live); palet "Beter leesbaar" gebruikt #866B45 (5,0:1). */
  --kleur-groen: #AF956E;           /* primair: knoppen, actieve staat, iconen (roest) */
  --kleur-groen-donker: #9B7D53;    /* primair donker: hover, tekstlinks, USP-balk */
  --kleur-groen-licht: #F3EEE8;     /* primair licht: advies, actieve keuze, chips (salie-tint) */
  --kleur-amber: #C2B19A;           /* accent: badges, focus-ring (huid) */
  --kleur-amber-licht: #EAE4DE;     /* accent licht: promotegels */
  --kleur-kop: #AF956E;             /* koppen (goud, zoals de live site) */
  --kleur-badge: #AF956E;           /* labels: Bestseller, winkelwagen-aantal */
  --kleur-badge-tekst: #FFFFFF;
  --kleur-inkt: #2E2E2E;            /* tekst en koppen; footer (bosgroen) */
  --kleur-zacht: #6B5A50;           /* secundaire tekst */
  --kleur-vlak: #F6F1EB;            /* productfoto-tegels, kaarten, secties */
  --kleur-lijn: #DDD3C4;            /* randen, scheidingslijnen (decoratief) */
  --kleur-pagina: #FFFFFF;          /* pagina-achtergrond (linnen) */
  --kleur-veldrand: #958775;        /* zichtbare veldgrens van formulieren */
  --kleur-footer: #EAE4DE;          /* footer-achtergrond (zand, zoals de live site) */
  --kleur-footer-tekst: #2E2E2E;    /* tekst en koppen in de footer */
  --kleur-sale: #8B3A2B;
  --kleur-focus: var(--kleur-groen-donker); /* focusring: ≥ 3:1 op pagina en vlakken (Origineel 9,0:1) */            /* aanbieding en foutmeldingen */
  --kleur-wit: #FFFFFF;

  --radius: 10px;                   /* tegels, kaarten, panelen */
  --radius-klein: 8px;              /* velden, selects */
  --radius-rond: 999px;             /* knoppen, chips, badges */
  --schaduw-paneel: 0 18px 30px -18px rgba(20, 32, 27, .35);

  /* Tekstlinks */
  --kleur-link: var(--kleur-groen-donker);
  --kleur-link-hover: var(--kleur-inkt);

  /* ===== Compatibiliteits-aliassen: oude namen, nieuwe waarde =====
     Oudere templates (linnen/bosgroen/roest-richting en VM-04/VM-12) blijven
     werken en krijgen vanzelf het G-palet. Niet gebruiken in nieuwe code. */
  --kleur-linnen: var(--kleur-pagina);
  --kleur-linnen-zacht: var(--kleur-vlak);
  --kleur-bosgroen: var(--kleur-inkt);
  --kleur-bosgroen-zacht: var(--kleur-zacht);
  --kleur-salie: var(--kleur-groen);
  --kleur-salie-donker: var(--kleur-groen-donker);
  --kleur-roest: var(--kleur-groen);
  --kleur-roest-donker: var(--kleur-groen-donker);
  --kleur-huid: var(--kleur-amber-licht);
  --kleur-inkt-zacht: var(--kleur-zacht);
  --kleur-goud: var(--kleur-amber-licht);
  --kleur-goud-diep: var(--kleur-groen);
  --kleur-goud-donker: var(--kleur-groen-donker);
  --kleur-creme: var(--kleur-vlak);
  --kleur-zand: var(--kleur-vlak);
  --kleur-grijs-kruimelpad: var(--kleur-zacht);
  --kleur-zwart: var(--kleur-inkt);

  /* ===== Typografie =====
     De woff2-bestanden staan lokaal (inc/assets/fonts.css, geladen vóór dit
     bestand); de fallbacks hieronder zijn alleen voor het moment vóór de
     font-swap. */
  --font-koppen: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-tekst: 'Figtree', 'Segoe UI', system-ui, sans-serif;

  /* Schaal: vloeiend van 390px (mobiel) tot 1280px (desktop) via clamp();
     daarbuiten vast. Gewichten staan bij de elementregels (H1 600, H2/H3 500). */
  --maat-h1: clamp(2.25rem, 1.702rem + 2.247vw, 3.5rem);     /* 36px → 56px */
  --maat-h2: clamp(1.75rem, 1.476rem + 1.124vw, 2.375rem);   /* 28px → 38px */
  --maat-h3: clamp(1.375rem, 1.265rem + 0.449vw, 1.625rem);  /* 22px → 26px */
  --maat-h4: 1.25rem;           /* 20px */
  --maat-h5: 1.125rem;          /* 18px */
  --maat-h6: 1.0625rem;         /* 17px */
  --maat-tekst: 1rem;           /* 16px, vaste maat (Figtree loopt groot) */
  --regelhoogte-tekst: 1.6;
  --maat-klein: 0.875rem;       /* 14px */
  --maat-label: 0.875rem;       /* 14px; labels krijgen GEEN kapitalen en GEEN letterafstand */
  --letterspacing-label: normal; /* alias uit VM-11 (was 0.08em); bewust uitgezet */
}

/* ==========================================================================
   1. Basis: pagina, tekst, koppen, links
   ========================================================================== */

body {
  background-color: var(--kleur-linnen);
  color: var(--kleur-bosgroen);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  font-weight: 400;
  line-height: var(--regelhoogte-tekst);
}

::selection {
  background-color: var(--kleur-huid);
  color: var(--kleur-bosgroen);
}

/* Koppen: alles in Figtree (ontwerp G); h1-h2 800, h3-h6 700.
   Elke regel staat ook op `.elementor-page …` om de kit-CSS op resterende
   builder-pagina's te verslaan (zie kop van dit bestand). */
h1, h2, h3,
.elementor-page h1, .elementor-page h2, .elementor-page h3 {
  color: var(--kleur-kop);
  font-family: var(--font-koppen);
  letter-spacing: -0.015em;
  text-transform: none;
}

h4, h5, h6,
.elementor-page h4, .elementor-page h5, .elementor-page h6 {
  color: var(--kleur-bosgroen);
  font-family: var(--font-tekst);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

h1, .elementor-page h1 { font-size: var(--maat-h1); font-weight: 800; line-height: 1.12; }

/* Kaart-/tegeltitels zijn h2's op interface-niveau; die krijgen de
   display-schaal niet. :where() houdt de specificiteit op (0,0,1), zodat
   losse klasseregels in pagina-stylesheets blijven winnen. */
h2:where(:not(.cs-kaart__titel, .cs-card__title, .cs-search-card__title, .cs-nf-producten__titel, .woocommerce-loop-product__title, .cs-kaart__naam)),
.elementor-page h2:where(:not(.cs-kaart__titel, .cs-card__title, .cs-search-card__title, .cs-nf-producten__titel, .woocommerce-loop-product__title, .cs-kaart__naam)) {
  font-size: var(--maat-h2);
  font-weight: 800;
  line-height: 1.15;
}

h2:where(.cs-kaart__titel, .cs-card__title) {
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  font-weight: 700;
  line-height: 1.35;
}

h3, .elementor-page h3 { font-size: var(--maat-h3); font-weight: 700; line-height: 1.25; }
h4, .elementor-page h4 { font-size: var(--maat-h4); line-height: 1.3; }
h5, .elementor-page h5 { font-size: var(--maat-h5); line-height: 1.35; }
h6, .elementor-page h6 { font-size: var(--maat-h6); line-height: 1.4; }

/* Links: --kleur-link (roest-donker), hover/focus --kleur-link-hover
   (bosgroen). Dit overschrijft ook het roze/blauw (#c36 / #336) van
   hello-elementor/reset.css. Onderstreping alleen in lopende tekst (daar is
   kleur alleen niet genoeg om een link te herkennen); navigatie, kaarten en
   knoppen regelen dat zelf. */
a,
.elementor-page a {
  color: var(--kleur-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

a:hover, a:focus, a:active,
.elementor-page a:hover, .elementor-page a:focus, .elementor-page a:active {
  color: var(--kleur-link-hover);
}

.page-content a:not(.button),
.entry-content a:not(.button),
.woocommerce-Tabs-panel a:not(.button),
.woocommerce-product-details__short-description a:not(.button) {
  text-decoration: underline;
}

/* Lopende tekst in paginacontent: regellengte max 68ch (ontwerprichting). */
.page-content > p,
.page-content > ul,
.page-content > ol,
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: 68ch;
}

small {
  font-size: var(--maat-klein);
}

label {
  font-size: var(--maat-label);
  letter-spacing: var(--letterspacing-label);
  text-transform: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--kleur-lijn);
}

/* Tabellen: moederthema zet halftransparant grijs; palet-lijnkleur ervoor. */
table td,
table th,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--kleur-lijn);
}

/* ==========================================================================
   2. Formulierelementen en knoppen (generiek)
   Selectorlijsten zijn gelijk aan die van hello-elementor/reset.css, zodat
   deze regels die op specificiteit evenaren en op volgorde winnen.
   ========================================================================== */

input[type="date"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="text"], input[type="time"], input[type="url"],
select, textarea {
  background-color: var(--kleur-wit);
  color: var(--kleur-bosgroen);
  border: 1px solid var(--kleur-veldrand); /* 3,1:1: zichtbare veldgrens (lijnkleur is te licht als UI-grens) */
  border-radius: var(--radius-klein);
  font-family: inherit;
}

input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus,
select:focus, textarea:focus {
  border-color: var(--kleur-groen);
  outline: 3px solid var(--kleur-focus);
  outline-offset: 1px;
}

.select2-container--default .select2-selection--single {
  border-color: var(--kleur-veldrand);
  border-radius: var(--radius-klein);
}

::placeholder {
  color: var(--kleur-bosgroen-zacht);
  opacity: 1;
}

/* Keuzerondjes/checkboxen: roest i.p.v. browserstandaard blauw */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--kleur-roest);
}

/* Generieke knop: roest, 2px hoeken, geen schaduw, geen kapitalen.
   Overschrijft ook reset.css (#c36 bij hover/focus). */
[type="button"],
[type="submit"],
button {
  background-color: var(--kleur-roest);
  color: var(--kleur-wit);
  border: 1px solid var(--kleur-roest);
  border-radius: var(--radius-rond);
  box-shadow: none;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

[type="button"]:hover, [type="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus,
button:hover, button:focus {
  background-color: var(--kleur-roest-donker);
  border-color: var(--kleur-roest-donker);
  color: var(--kleur-wit);
}

/* Generieke .button-klasse (links/knoppen buiten een .woocommerce-wrapper):
   omlijnd roest, bij hover gevuld. Zelfde uiterlijk als de WooCommerce-
   standaardknop hieronder, zodat beide varianten één familie vormen. */
.button {
  background-color: var(--kleur-wit);
  color: var(--kleur-roest);
  border: 1px solid var(--kleur-roest);
  border-radius: var(--radius-rond);
  box-shadow: none;
  text-decoration: none;
}

.button:hover,
.button:focus {
  background-color: var(--kleur-roest);
  color: var(--kleur-wit);
  border-color: var(--kleur-roest);
}

/* ==========================================================================
   3. WooCommerce: standaardkleuren (groen/paars/grijs) → palet
   Selectors spiegelen woocommerce.css, zodat ze op volgorde winnen.
   ========================================================================== */

/* --- Knoppen. Hiërarchie: standaardknop = omlijnd roest (secundair),
   .alt/toevoegen/afrekenen = gevuld roest (primair). --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--kleur-wit);
  color: var(--kleur-roest);
  border: 1px solid var(--kleur-roest);
  border-radius: var(--radius-rond);
  box-shadow: none;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
  padding: 0.7em 1.2em;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus {
  background-color: var(--kleur-roest);
  color: var(--kleur-wit);
  border-color: var(--kleur-roest);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.single_add_to_cart_button {
  background-color: var(--kleur-roest);
  color: var(--kleur-wit);
  border-color: var(--kleur-roest);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:focus,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:focus,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:focus,
.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus {
  background-color: var(--kleur-roest-donker);
  color: var(--kleur-wit);
  border-color: var(--kleur-roest-donker);
}

/* Uitgeschakelde knoppen: zelfde kleur, halve dekking (WooCommerce zet hier
   standaard grijs resp. paars). */
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
  background-color: var(--kleur-wit);
  color: var(--kleur-roest);
  border-color: var(--kleur-roest);
  opacity: 0.5;
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled[disabled] {
  background-color: var(--kleur-roest);
  color: var(--kleur-wit);
  border-color: var(--kleur-roest);
  opacity: 0.5;
}

/* --- Prijzen: gewicht 600, doorgestreepte oude prijs in bosgroen-zacht.
   Kleine prijzen (kaarten, tabellen) in roest-donker (6,7:1); alleen de
   grote productprijs (WooCommerce: 1,25em ≈ 21px) mag roest (4,45:1 is
   voldoende voor grote tekst). --- */
.price,
.woocommerce ul.products li.product .price {
  color: var(--kleur-roest-donker);
  font-weight: 600;
  letter-spacing: normal;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--kleur-roest);
  font-weight: 600;
  letter-spacing: normal;
}

.price ins,
.woocommerce ul.products li.product .price ins {
  color: var(--kleur-roest-donker);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: var(--kleur-roest);
  font-weight: 600;
  text-decoration: none;
}

.price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce ul.products li.product .price del {
  color: var(--kleur-bosgroen-zacht);
  font-weight: 400;
  opacity: 1;
}

/* --- Productkaart-titel (h2 in de loop): interface-niveau, niet display --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--kleur-bosgroen);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  font-weight: 500;
  line-height: 1.35;
}

/* --- Omschrijving / tabbladen / kenmerken: lopende tekst --- */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel,
.woocommerce-product-attributes {
  color: var(--kleur-bosgroen);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  font-weight: 400;
  line-height: var(--regelhoogte-tekst);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--kleur-linnen-zacht);
  border-color: var(--kleur-lijn);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--kleur-bosgroen-zacht);
  font-weight: 500;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--kleur-linnen);
  border-bottom-color: var(--kleur-linnen);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--kleur-bosgroen);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: var(--kleur-lijn);
}

/* --- Kruimelpad: klein, secundaire kleur --- */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  color: var(--kleur-bosgroen-zacht);
  font-size: var(--maat-klein);
}

.woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
  color: var(--kleur-bosgroen-zacht);
}

.woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--kleur-link-hover);
}

/* --- Meldingen: linnen-zacht met salie-linkerrand i.p.v. groen/blauw/rood.
   Bij een fout kleurt alleen het icoon (::before) in de sale-kleur, zodat
   het type melding herkenbaar blijft. --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: var(--kleur-linnen-zacht);
  color: var(--kleur-bosgroen);
  border-top: 0;
  border-left: 3px solid var(--kleur-salie);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--kleur-salie);
}

.woocommerce-error::before {
  color: var(--kleur-sale);
}

/* --- Formuliervalidatie: rood/groen → sale/salie --- */
.woocommerce form .form-row .required {
  color: var(--kleur-sale);
}

.woocommerce form .form-row.woocommerce-invalid label {
  color: var(--kleur-sale);
}

.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--kleur-sale);
}

.woocommerce form .form-row.woocommerce-validated .select2-container,
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: var(--kleur-salie);
}

/* --- Paginering --- */
.woocommerce nav.woocommerce-pagination ul {
  border-color: var(--kleur-lijn);
}

.woocommerce nav.woocommerce-pagination ul li {
  border-right-color: var(--kleur-lijn);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--kleur-bosgroen);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--kleur-linnen-zacht);
  color: var(--kleur-link);
}

/* --- Winkelmededeling bovenaan (standaard paars) --- */
.woocommerce-store-notice,
p.demo_store {
  background-color: var(--kleur-bosgroen);
  color: var(--kleur-linnen);
}

.woocommerce-store-notice a,
p.demo_store a {
  color: var(--kleur-huid);
}

/* ==========================================================================
   4. style.css-overrides — hier is !important onvermijdelijk omdat het oude
   child-theme style.css (dat niet aangeraakt mag worden; andere agents werken
   er tegelijk mee) dezelfde eigenschappen met !important zet.
   ========================================================================== */

/* style.css: `.prijs-button-wrap .price { color:#af956e !important;
   font-size:16px !important; … }` (productkaart in het raster; 16px, dus
   roest-donker voor voldoende contrast) */
.prijs-button-wrap .price {
  color: var(--kleur-roest-donker) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}

.prijs-button-wrap .price ins {
  color: var(--kleur-roest-donker) !important;
  text-decoration: none !important;
}

.prijs-button-wrap .price del {
  color: var(--kleur-bosgroen-zacht) !important;
}

/* style.css: `.prijs-button-wrap .button { background-color:white !important;
   border:solid 1px #af956e !important; color:#fff }` + hover goud !important
   (omlijnde icoonknop 'in winkelwagen' op de productkaart). De oude knop was
   icoon-only (tekst wit op wit); de nieuwe kaarten hebben wél een tekstlabel
   (.cs-kaart__knop-tekst), dus de tekst krijgt hier roest (5,2:1 op wit) voor
   pagina's waar product-categorie.css niet laadt (bv. de homepage). */
.prijs-button-wrap .button {
  background-color: var(--kleur-wit) !important;
  border-color: var(--kleur-roest) !important;
  color: var(--kleur-roest);
  border-radius: var(--radius-rond);
}

.prijs-button-wrap .button svg path {
  fill: var(--kleur-roest);
}

.prijs-button-wrap .button:hover,
.prijs-button-wrap .button:focus {
  background-color: var(--kleur-roest) !important;
  color: var(--kleur-wit);
}

.prijs-button-wrap .button:hover svg path,
.prijs-button-wrap .button:focus svg path {
  fill: var(--kleur-wit);
}

/* style.css: `.icon-button { border:1px solid #2e2e2e; color:#2e2e2e;
   border-radius:4px }` (zonder !important; gelijke specificiteit, later geladen) */
.icon-button {
  border-color: var(--kleur-roest);
  color: var(--kleur-roest);
  border-radius: var(--radius-rond);
}

/* style.css: `.codex-product-new-label { background:#af956e !important;
   box-shadow:… !important; text-transform:uppercase !important; … }`
   NIEUW-badge in bosgroen, SALE-badge in de sale-kleur; geen schaduw, geen
   kapitalen (ontwerprichting: geen ALL-CAPS-labels). */
.codex-product-new-label {
  background: var(--kleur-bosgroen) !important;
  color: var(--kleur-wit) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.codex-product-sale-label {
  background: var(--kleur-sale) !important;
}

/* style.css: `a.checkout-button.button.alt.wc-forward { background:#AF956E
   !important; border-radius:30px !important; box-shadow:… !important;
   text-transform:uppercase !important; letter-spacing:1px !important }`
   en `button#place_order { background:#AF956E !important }`.
   Zelfde waarden als winkelwagen-afrekenen.css (prio 1000), zodat de twee
   bestanden elkaar niet tegenspreken. */
a.checkout-button.button.alt.wc-forward,
button#place_order {
  background: var(--kleur-roest) !important;
  background-color: var(--kleur-roest) !important;
  border-color: var(--kleur-roest) !important;
  color: var(--kleur-wit) !important;
  border-radius: var(--radius-rond) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

a.checkout-button.button.alt.wc-forward:hover,
a.checkout-button.button.alt.wc-forward:focus,
button#place_order:hover,
button#place_order:focus {
  background: var(--kleur-roest-donker) !important;
  background-color: var(--kleur-roest-donker) !important;
  border-color: var(--kleur-roest-donker) !important;
  color: var(--kleur-wit) !important;
  box-shadow: none !important;
}

/* style.css: `.elementor-lightbox, .dialog-type-lightbox, .pswp__bg
   { background:#af956e !important }` (achtergrond van de fotolightbox) */
.elementor-lightbox,
.dialog-type-lightbox,
.pswp__bg {
  background: var(--kleur-bosgroen) !important;
}

/* ==========================================================================
   5. Elementor-overgang — alleen actief op pagina's die nog door de builder
   worden gerenderd (body.elementor-page). De kit-CSS (post-11) definieert
   daar de Elementor-globals; door ze hier op dezelfde body opnieuw te zetten
   (specificiteit 0,1,1 > 0,1,0) volgen ook Elementor-widgets het palet.
   Verdwijnt vanzelf met Elementor.
   ========================================================================== */

body.elementor-page {
  --e-global-color-primary: var(--kleur-bosgroen);        /* was #5F432C (koppen) */
  --e-global-color-secondary: var(--kleur-bosgroen-zacht);/* was #877068 */
  --e-global-color-text: var(--kleur-bosgroen);           /* was #3F3E3E */
  --e-global-color-accent: var(--kleur-roest);            /* was #61CE70 (knoppen) */
  --e-global-color-f07453e: var(--kleur-huid);            /* was decoratief goud #AF956E */
  --e-global-typography-primary-font-family: 'Figtree';
  --e-global-typography-primary-font-weight: 600;
  --e-global-typography-secondary-font-family: 'Figtree';
  --e-global-typography-secondary-font-weight: 500;
  --e-global-typography-text-font-family: 'Figtree';
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: 'Figtree';
  --e-global-typography-accent-font-weight: 500;
}

/* Elementor-menu-cart-badge (als die widget nog ergens staat; de nieuwe
   header gebruikt .cs-cart-count uit header.css, al in roest). */
.elementor-menu-cart__toggle {
  --items-indicator-background-color: var(--kleur-roest);
}

.elementor-button-icon-qty[data-counter] {
  background-color: var(--kleur-roest);
}