/* SHOP BASIS — voor een nieuwe klant hoef je alleen dit blok aan te passen.
   Kleuren en fonts volgen standaard het thema. Spacing 16px is de basisafstand. */
:root {
  /* Kleuren */
  --shop-primary: var(--color-content-primary, #365cff); /* Links, accenten en focus */
  --shop-action: var(--color-content-conversie, var(--shop-primary)); /* Bestel- en verzendknoppen */
  --shop-action-text: var(--color-content-heading, #212121); /* Bij een donkere actiekleur: #fff */
  --shop-heading: var(--color-content-heading, #212121);
  --shop-text: var(--color-content-text, #616161);
  --shop-muted: #777;
  --shop-background: #fff;
  --shop-panel: #fafafa;
  --shop-border: #e0e0e0;
  --shop-success: #388e3c;
  --shop-error: #b81c23;

  /* Vorm en formaat */
  --shop-radius: 8px; /* Kaarten, velden en knoppen */
  --shop-spacing: 16px; /* Lager = compacter, hoger = ruimer */
  --shop-field-height: 44px;
  --shop-font-size: 1rem;
  --shop-max-width: 1312px;
}

/* Afgeleid van de basis hierboven; deze waarden hoef je niet apart aan te passen. */
:root {
  --shop-space-xs: calc(var(--shop-spacing) * .25);
  --shop-space-s: calc(var(--shop-spacing) * .5);
  --shop-space-m: calc(var(--shop-spacing) * .75);
  --shop-space-l: calc(var(--shop-spacing) * 1.5);
  --shop-space-xl: calc(var(--shop-spacing) * 2);
  --shop-space-xxl: calc(var(--shop-spacing) * 3);
  --shop-space-xxxl: calc(var(--shop-spacing) * 4);
  --shop-font-small: calc(var(--shop-font-size) * .875);
  --shop-font-caption: calc(var(--shop-font-size) * .75);
}

:is(.woocommerce-account, .woocommerce-cart, .woocommerce-checkout) #page-content > .l-section > .l-section-h {
  max-width: var(--shop-max-width);
}