/* ═══════════════════════════════════════════════════════════
   SARA REZAI — DIVI-LAAG
   Deze laag zit bovenop sara-base.css en sara-skin.css.

   base + skin komen uit de preview en gaan uit van een eigen
   HTML-structuur. Divi bouwt anders op (section > row > column
   > module), dus alles wat op Divi's structuur moet aangrijpen
   staat hier — niet in de andere twee bestanden.
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll-animaties ────────────────────────────────────────
   Divi's eigen animatievelden zijn onbetrouwbaar zodra content
   via WP-CLI wordt geschreven (van 25 modules kreeg er bij een
   eerdere klantsite één de juiste classes, en die bleef
   permanent onzichtbaar). Daarom een eigen systeem, aangehaakt
   via module_class en aangezet door sara-main.js.
   ─────────────────────────────────────────────────────────── */

.sr-reveal,
.sr-reveal-img {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.sr-reveal     { transform: translateY(26px); }
.sr-reveal-img { transform: scale(1.03); }

.sr-reveal.sr-is-in,
.sr-reveal-img.sr-is-in { opacity: 1; transform: none; }

.sr-reveal-d1 { transition-delay: .10s; }
.sr-reveal-d2 { transition-delay: .20s; }
.sr-reveal-d3 { transition-delay: .30s; }
.sr-reveal-d4 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .sr-reveal, .sr-reveal-img {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ── Typografie op Divi-tekstmodules ─────────────────────────
   De modules krijgen onze classes mee; Divi's eigen p/h-regels
   zijn specifieker, vandaar dat we hier op het kind mikken.
   ─────────────────────────────────────────────────────────── */

.sr-eyebrow p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .75rem;
  font-weight: 500;
  line-height: 1.6;
}

.sr-hero__title h1,
.sr-section-title h2 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.08;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-title);
  padding-bottom: 0;
}
.sr-hero__title h1   { font-size: var(--size-hero); }
.sr-section-title h2 { font-size: var(--size-section-title); }

.sr-section-lead p {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 56ch;
}
.sr-section-lead p + p { margin-top: 1rem; }
.sr-section-lead strong { color: var(--text); font-weight: 500; }

/* USP-blok — bewust een Tekstmodule en geen Blurb: Blurb's eigen
   typografievelden gaven bij een eerdere klantsite het verkeerde
   lettertype op titels. */
.sr-usp__icon  { font-size: 1.5rem; color: var(--accent); line-height: 1; margin: 0 0 .9rem; }
.sr-usp__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 .5rem; color: var(--text); }
.sr-usp__text  { font-size: .9375rem; color: var(--text-muted); margin: 0; }

/* Quote op de bordeaux sectie */
.sr-quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--on-dark);
  margin: 0 auto;
  max-width: 22ch;
}
.sr-quote__attr {
  margin-top: 1.75rem;
  font-size: .75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* ── Knoppen ─────────────────────────────────────────────────
   Divi's .et_pb_button heeft eigen kleuren én een pseudo-element
   met een pijltje. We sturen dat hier aan in plaats van via
   Divi's kleurvelden, omdat die bij opbouw buiten de bouwer om
   kunnen terugvallen op het standaardblauw.
   ─────────────────────────────────────────────────────────── */

.et_pb_button.sr-btn--primary,
.et_pb_button.sr-btn--primary:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid var(--btn-primary-bg);
  border-radius: var(--btn-radius);
  padding: .9rem 2.1rem !important;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: background-color .3s ease, border-color .3s ease;
}
.et_pb_button.sr-btn--primary:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}
/* Divi zet standaard een pijltje achter de knop bij hover */
.et_pb_button.sr-btn--primary::after { display: none !important; }

.et_pb_button.sr-btn--licht,
.et_pb_button.sr-btn--licht:hover {
  background-color: var(--on-dark);
  color: var(--bg-dark);
  border: 1px solid var(--on-dark);
}
.et_pb_button.sr-btn--licht::after { display: none !important; }

/* ── WooCommerce ─────────────────────────────────────────────
   Divi kleurt prijzen en knoppen standaard in zijn eigen blauw.
   ─────────────────────────────────────────────────────────── */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.et_pb_shop .price,
.et_pb_wc_price .price {
  color: var(--accent) !important;
  font-family: var(--font-body);
  font-weight: 500;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del { color: var(--text-muted) !important; opacity: 1; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--font-body) !important;
  font-size: .75rem !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: .9rem 1.8rem !important;
  font-weight: 500 !important;
  transition: background-color .3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}
.woocommerce a.button::after,
.woocommerce button.button::after { display: none !important; }

/* Productnamen en het rooster */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.et_pb_shop h2.woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.1875rem !important;
  color: var(--text) !important;
  font-weight: 500;
  padding-bottom: .35rem !important;
}
.woocommerce ul.products li.product { text-align: center; }
.woocommerce ul.products li.product img { border-radius: var(--card-radius); }

/* Uitverkoop-label in de merkkleur in plaats van Woo-oranje */
.woocommerce span.onsale,
.et_pb_shop span.onsale {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--badge-radius);
  font-family: var(--font-body);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 0; min-width: 0;
  padding: .4rem .7rem;
  line-height: 1;
}

/* Kleurstippen van de tintkiezer */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
  box-shadow: 0 0 0 1px var(--border-strong);
  border-radius: 50%;
  width: 34px; height: 34px;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── Beelden ─────────────────────────────────────────────── */
.sr-grid-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--card-radius); }
.sr-hero__beeld, .sr-hero__beeld .et_pb_image_wrap, .sr-hero__beeld img { height: 100%; width: 100%; }
.sr-hero__beeld img { object-fit: cover; }

/* Divi's sectie- en rijruimte iets strakker op mobiel */
@media (max-width: 980px) {
  .sr-hero-rij .et_pb_column { padding-left: 7% !important; padding-right: 7% !important; }
}

/* ── Hero: kolommen even hoog ────────────────────────────────
   Divi's make_equal="on" werkt niet bij content die buiten de
   bouwer om is geschreven — de rij krijgt wel de klasse, maar
   het JavaScript dat de hoogtes gelijktrekt draait niet.
   Daarom met flex, dat heeft geen JavaScript nodig.
   ─────────────────────────────────────────────────────────── */
.sr-hero-rij { display: flex !important; flex-wrap: wrap; align-items: stretch; }
.sr-hero-rij > .et_pb_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0 !important;
}
.sr-hero-rij > .et_pb_column .et_pb_module:last-child { margin-bottom: 0; }
.sr-hero-rij .sr-hero__beeld { flex: 1; display: flex; }
.sr-hero-rij .sr-hero__beeld .et_pb_image_wrap { flex: 1; display: flex; }

@media (max-width: 980px) {
  .sr-hero-rij { display: block !important; }
  .sr-hero-rij .sr-hero__beeld img { max-height: 60vh; object-fit: cover; }
}

/* ── Alles zichtbaar in de Divi-bouwer ───────────────────────
   De reveal-animaties hierboven zetten elementen op opacity 0
   tot sara-main.js ze zichtbaar maakt bij scrollen. In de
   Visual Builder draait dat script niet — daar bleef alles dus
   permanent onzichtbaar en zag je lege blokken waar tekst hoort.
   Divi zet et-fb (visual builder) of et-bfb (backend builder)
   op de body; daar schakelen we de animatie uit.
   Bezoekers houden de animaties gewoon.
   ─────────────────────────────────────────────────────────── */
body.et-fb  .sr-reveal, body.et-fb  .sr-reveal-img,
body.et-bfb .sr-reveal, body.et-bfb .sr-reveal-img {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Footer (Theme Builder) ─────────────────────────────────── */
.sr-footer .sr-foot p,
.sr-footer .sr-foot li { color: var(--footer-muted); font-size: .875rem; line-height: 1.7; }
.sr-footer .sr-foot a  { color: var(--footer-muted); transition: color .25s ease; }
.sr-footer .sr-foot a:hover { color: var(--footer-fg); }

.sr-foot__merk {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--logo-tracking);
  text-transform: uppercase;
  color: var(--footer-fg) !important;
  margin: .75rem 0 .6rem;
}
.sr-foot__tag  { max-width: 34ch; }
.sr-foot__logo { margin-bottom: 0 !important; }
.sr-foot__logo img { width: 34px; height: auto; }

.sr-foot__kop {
  font-size: .75rem !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--footer-fg) !important;
  margin-bottom: 1.1rem !important;
}
.sr-foot__lijst { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sr-foot__lijst li { margin-bottom: .55rem; }

.sr-foot__onder { border-top: 1px solid var(--footer-border); }
.sr-foot__klein {
  font-size: .75rem !important;
  color: var(--footer-muted) !important;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding-top: 1.25rem;
}
.sr-foot__klein a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .sr-foot__klein { display: block; } }

/* ── Header (Theme Builder) ─────────────────────────────────── */

/* Meldingsbalk */
.sr-utilbar-tekst p {
  font-size: .75rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text) !important;
  margin: 0;
}

/* Balk zelf */
.sr-headbar .et_pb_row { padding-top: 0; padding-bottom: 0; }
.sr-headrij  { display: flex !important; align-items: center; justify-content: center; }
.sr-headrij .et_pb_column { margin-bottom: 0 !important; display: flex; align-items: center; }
.sr-head__logo { margin-bottom: 0 !important; }
.sr-head__logo img { height: 67px; width: auto; margin: 0 auto; }
.sr-head__logo .et_pb_image_wrap { display: block; text-align: center; }

/* Menurij */
.sr-menurij { border-top: 1px solid rgba(26,26,26,.10); }
.sr-head__menu { margin-bottom: 0 !important; }
.sr-head__menu .et_pb_menu__wrap { justify-content: center; }
.sr-head__menu .et_pb_menu__menu > nav > ul > li > a {
  color: var(--on-dark) !important;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: var(--tracking-nav);
  padding-bottom: .9rem !important;
  padding-top: .9rem !important;
}
.sr-head__menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a { opacity: 1; border-bottom: 1px solid var(--on-dark); }
.sr-head__menu .et_pb_menu__menu > nav > ul > li > a:hover { opacity: .75; }
.sr-head__menu .et_pb_menu__icon,
.sr-head__menu .et_pb_menu__cart-button { color: var(--on-dark) !important; }
.sr-head__menu .et_pb_menu__wrap .mobile_menu_bar:before { color: var(--on-dark) !important; }

/* Mobiel: zoekbalk verbergen, logo iets kleiner */
@media (max-width: 980px) {
  .sr-headrij { flex-wrap: nowrap; }
  .sr-head__logo img { height: 51px; width: auto; }
  .sr-head__menu .et_mobile_menu { background: var(--bg-dark) !important; }
  .sr-head__menu .et_mobile_menu a { color: var(--on-dark) !important; }
}

/* ── Aanbiedingslabel ────────────────────────────────────────
   De badge staat niet altijd binnen een .woocommerce-voorouder
   (in de Divi Shop-module bijvoorbeeld niet), dus zonder die eis.
   ─────────────────────────────────────────────────────────── */
span.onsale, .et_pb_shop span.onsale, .woocommerce span.onsale {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--badge-radius) !important;
  font-family: var(--font-body) !important;
  font-size: .5625rem !important;
  letter-spacing: .12em; text-transform: uppercase;
  min-height: 0 !important; min-width: 0 !important;
  padding: .45rem .75rem !important; line-height: 1 !important;
  top: .9rem !important; left: .9rem !important; right: auto !important;
}

/* ── Productkaarten op de webshoppagina ──────────────────── */
.sr-kaart { border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.sr-kaart__beeld { margin-bottom: 0 !important; }
.sr-kaart__beeld img { width: 100%; background: var(--card-media-bg); }
.sr-kaart__body { padding: 1.5rem 1.5rem .5rem; margin-bottom: 0 !important; }

.sr-kaart__tint {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: .75rem !important; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted) !important; margin-bottom: .5rem !important;
}
/* De tint wordt getoond als een macro-opname van het poeder zelf, niet als
   een vlakke kleur: je ziet dan ook de structuur. De vlakke kleur blijft
   eronder staan als terugval zolang de foto nog niet binnen is.
   Bestanden: Sara-054 (Rose) en Sara-080-2 (Saffron), de textuuropnames. */
.sr-stip {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--border-strong);
  background-size: cover;
  background-position: center;
  vertical-align: middle;
}
.sr-stip--rose {
  background-color: var(--rose);
  background-image: url('/wp-content/uploads/2026/08/2026-08-09-Sara-054-150x150.jpg');
}
.sr-stip--saffron {
  background-color: var(--saffron);
  background-image: url('/wp-content/uploads/2026/08/2026-08-09-Sara-080-2-150x150.jpg');
}

/* Dezelfde poederfoto's in de tintkiezer op de productpagina. Die swatches
   komen van de plugin woo-variation-swatches en staan daar als kleurvlak. */
.woo-variation-swatches .variable-item.color-variable-item[data-value="rose"] .variable-item-span,
.woo-variation-swatches .variable-item[data-value="rose"] .variable-item-span {
  background-image: url('/wp-content/uploads/2026/08/2026-08-09-Sara-054-300x300.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
.woo-variation-swatches .variable-item.color-variable-item[data-value="saffron"] .variable-item-span,
.woo-variation-swatches .variable-item[data-value="saffron"] .variable-item-span {
  background-image: url('/wp-content/uploads/2026/08/2026-08-09-Sara-080-2-300x300.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
.woo-variation-swatches .variable-item {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  overflow: hidden;
}
.woo-variation-swatches .variable-item .variable-item-span {
  border-radius: 50% !important;
  width: 100% !important; height: 100% !important;
}
.woo-variation-swatches .variable-item.selected,
.woo-variation-swatches .variable-item[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text) !important;
}

.sr-kaart__naam {
  font-family: var(--font-display); font-size: 1.375rem !important;
  color: var(--text) !important; margin-bottom: .5rem !important; padding-bottom: 0 !important;
}
.sr-kaart__naam a { color: var(--text) !important; }
.sr-kaart__oms    { font-size: .9375rem !important; color: var(--text-muted) !important; margin-bottom: .75rem !important; }
.sr-kaart__prijs  { color: var(--accent) !important; font-size: 1.0625rem !important; font-weight: 500; margin-bottom: .35rem !important; }
.sr-kaart__inhoud { color: var(--text-muted) !important; font-size: .8125rem; font-weight: 400; }
.sr-kaart__voorraad {
  font-size: .75rem !important; color: var(--text-muted) !important;
  display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: 0 !important;
}
.sr-kaart__voorraad::before { content:""; width:6px; height:6px; border-radius:50%; background:#4C9A6A; }
.sr-kaart__voorraad.sr-is-laag::before { background: var(--accent); }
.sr-kaart__knop { padding: 0 1.5rem; }
.sr-kaart__knop .et_pb_button { display: block; text-align: center; }

.sr-duo__prijs { font-size: 1.375rem !important; color: var(--accent) !important; font-weight: 500; }
.sr-duo__prijs del { color: var(--text-muted) !important; font-weight: 400; margin-right: .4rem; }

/* ── Over Sara ───────────────────────────────────────────── */
/* Divi's Image-module heeft een .et_pb_image_wrap eromheen die de
   natuurlijke breedte van de afbeelding aanhoudt. Alleen width:100% op
   de img zelf helpt dus niet — de wrap moet ook mee. */
.sr-banner__beeld { margin-bottom: 0 !important; width: 100%; }
.sr-banner__beeld .et_pb_image_wrap { width: 100%; display: block; }
.sr-banner__beeld img { width: 100%; height: auto; max-height: 46vh; object-fit: cover; display: block; }
.sr-waarde__num { font-family: var(--font-display); font-size: 2rem !important; color: var(--accent) !important; margin-bottom: .6rem !important; line-height: 1; }

/* ── Gecentreerde koppen ─────────────────────────────────── */
.sr-midden, .sr-midden p, .sr-midden h1, .sr-midden h2 { text-align: center; }
.sr-midden .sr-section-lead p, .sr-midden p { margin-left: auto; margin-right: auto; }

/* ── Contactformulier ────────────────────────────────────── */
.sr-formulier .et_pb_contact_field input,
.sr-formulier .et_pb_contact_field textarea {
  background: var(--bg) !important; border: 1px solid var(--border-strong) !important;
  border-radius: var(--btn-radius) !important; font-family: var(--font-body) !important;
  font-size: .9375rem !important; color: var(--text) !important; padding: .85rem 1rem !important;
}
.sr-formulier .et_pb_contact_field input:focus,
.sr-formulier .et_pb_contact_field textarea:focus { border-color: var(--accent) !important; }
.sr-formulier .et_pb_button {
  background-color: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-bg) !important; border-radius: var(--btn-radius) !important;
  font-size: .75rem !important; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: .9rem 2.1rem !important;
}
.sr-formulier .et_pb_button::after { display: none !important; }

.sr-contactgegevens .sr-cont__label {
  font-size: .75rem !important;   /* 11px was op een telefoon te klein */ letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted) !important; margin-bottom: .2rem !important;
}
.sr-contactgegevens .sr-cont__waarde { font-size: 1.0625rem !important; color: var(--text) !important; margin-bottom: 1.5rem !important; }

/* ── Accordeon ───────────────────────────────────────────── */
.sr-accordeon .et_pb_toggle { border: none !important; border-bottom: 1px solid var(--border) !important; padding: 0 !important; }
.sr-accordeon .et_pb_toggle_title {
  font-family: var(--font-body) !important; font-size: .875rem !important;
  color: var(--text) !important; padding: 1.15rem 2rem 1.15rem 0 !important;
}
.sr-accordeon .et_pb_toggle_content { font-size: .9375rem; color: var(--text-muted); padding-bottom: 1.4rem !important; }
.sr-accordeon .et_pb_toggle_content strong { color: var(--text); }

/* ── Productbeelden in het grid even hoog ────────────────────
   De packshots hebben verschillende verhoudingen (1500x1500 los,
   1200x1100 duo). In een rij naast elkaar wordt dat rommelig.
   ─────────────────────────────────────────────────────────── */
.woocommerce ul.products li.product a img,
.et_pb_shop ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--card-media-bg);
  padding: 6%;
  width: 100%;
  margin-bottom: 1rem !important;
}

/* ── Banner homepage: volledig tonen ─────────────────────────
   De bannerfoto toont twee personen naast elkaar. Met een
   max-height eroverheen snijd je hun hoofden eraf, dus die geldt
   hier niet — de foto houdt zijn eigen verhouding.
   ─────────────────────────────────────────────────────────── */
.sr-sec-hero .sr-banner__beeld img { max-height: none; height: auto; }

/* ── Productkaarten: gelijke beeldverhouding en volle knop ─── */
.sr-kaart__beeld img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--card-media-bg);
  padding: 5%;
}
.sr-kaart { display: flex; flex-direction: column; }
.sr-kaart .sr-kaart__body { flex: 1; }
/* Divi zet module_class op het knop-element zelf, niet op een wrapper —
   daarom beide selectors. */
.sr-kaart__knop.et_pb_button,
.sr-kaart__knop .et_pb_button,
.et_pb_button_module_wrapper.sr-kaart__knop .et_pb_button {
  display: block !important;
  width: 100%;
  text-align: center;
}
.et_pb_button_module_wrapper.sr-kaart__knop { padding: 0 1.5rem; }
.sr-kaart__knop { padding: 0 1.5rem; }

/* Knop gecentreerd onder de intro op de homepage */
.sr-knop-midden { text-align: center; }

/* ═══════════════════════════════════════════════════════════
   RONDE 3 — banner, raster, uitlijning en mobiel
   ═══════════════════════════════════════════════════════════ */

/* ── Banner met de tekst erin ──────────────────────────────── */
.sr-banner {
  background-size: cover !important;
  background-position: center 28% !important;
  min-height: clamp(300px, 42vh, 440px);
  display: flex !important;
  align-items: center;
}
.sr-banner__titel h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  /* Op de banner ligt een donkere foto: hier blijft wit nodig,
     ook al is de rest van de site zwart op wit. */
  color: #FFFFFF;
  text-shadow: 0 1px 18px rgba(40,16,16,.45);
  padding-bottom: 0;
}
.sr-banner__lead p {
  color: #FFFFFF;
  font-size: 1.0625rem;
  max-width: 46ch;
  margin: 0 auto;
  text-shadow: 0 1px 14px rgba(40,16,16,.5);
}
.sr-op-donker p { color: var(--text-muted) !important; }

/* Gecentreerde tekst en knoppen — Divi lijnt standaard links uit */
.sr-midden, .sr-midden p, .sr-midden h1, .sr-midden h2 { text-align: center; }
.sr-midden .sr-section-lead p, .sr-section-lead.sr-midden p { margin-left: auto; margin-right: auto; }
.sr-knop-midden { text-align: center !important; }
.sr-knop-midden .et_pb_button { display: inline-block; }

/* ── Collectiekaarten even hoog ────────────────────────────── */
/* Divi's make_equal werkt niet buiten de bouwer om; flex wel. */
.sr-kaart-rij, .sr-kaart-rij .et_pb_column { display: flex; }
.sr-kaart-rij { flex-wrap: wrap; align-items: stretch; }
.sr-kaart {
  display: flex !important;
  flex-direction: column;
  margin-bottom: 0 !important;
}
.sr-kaart .sr-kaart__body { flex: 1 1 auto; }
.sr-kaart .sr-kaart__beeld { margin-bottom: 1.1rem !important; }
.sr-kaart__oms { min-height: 3.2em; }

/* ── Sfeerraster zoals in de preview ───────────────────────── */
/* Eén Divi-kolom met zes beelden; hier wordt het een raster met
   een staand en een liggend beeld. Divi-kolommen kunnen dat niet:
   die maken alles even breed. */
.sr-mood.et_pb_column {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: clamp(.6rem, 1.4vw, 1rem);
  width: 100% !important;
}
/* Divi's Image-module houdt de natuurlijke beeldbreedte aan; in een raster
   moet hij juist de cel vullen. Vandaar width op de module én de wrap. */
.sr-mood .sr-mood__item {
  margin-bottom: 0 !important;
  height: 100%;
  width: 100% !important;
  max-width: none !important;
  display: block;
}
.sr-mood .sr-mood__item .et_pb_image_wrap,
.sr-mood .sr-mood__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--card-radius);
}
.sr-mood .sr-mood__item-1 { grid-row: span 2; }   /* staand */
.sr-mood .sr-mood__item-2 { grid-column: span 2; } /* liggend */

@media (max-width: 980px) {
  /* Op twee kolommen laten de spans een gat vallen: zes beelden passen
     dan niet meer rond. Daarom hier gelijke cellen, drie nette rijen. */
  .sr-mood.et_pb_column { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .sr-mood .sr-mood__item-1 { grid-row: span 1; }
  .sr-mood .sr-mood__item-2 { grid-column: span 1; }
}
@media (max-width: 560px) {
  .sr-mood.et_pb_column { grid-auto-rows: 148px; }
}

/* ── Banner op mobiel: tekst moet leesbaar blijven ──────────
   De foto toont twee gezichten; de titel valt daar precies
   overheen. Een iets zwaardere donkere laag lost dat op zonder
   de foto plat te maken. */
@media (max-width: 980px) {
  .sr-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(40,16,16,.30) 0%, rgba(40,16,16,.62) 100%);
    pointer-events: none;
  }
  .sr-banner { position: relative; }
  .sr-banner .et_pb_row { position: relative; z-index: 2; }
  .sr-banner__lead p { font-size: .9375rem; }
}

/* ── Footer: leesbaarder, en ruimte voor sociale kanalen ───── */
.sr-foot__lijst a, .sr-foot__sociaal a { color: var(--text-muted) !important; }
.sr-foot__lijst a:hover, .sr-foot__sociaal a:hover { color: #fff !important; }
.sr-foot__tag { color: var(--text-muted) !important; }
.sr-foot__klein, .sr-foot__klein span { color: var(--text-muted) !important; }

.sr-foot__kop--volg { margin-top: 1.6rem !important; }
.sr-foot__sociaal,
.sr-footer .sr-foot__sociaal {
  list-style: none !important;
  margin: 0; padding: 0;
  display: flex; gap: 1.1rem;
}
/* Divi's eigen ul-regels zetten een bolletje terug */
.sr-footer .sr-foot__sociaal li,
.sr-footer .sr-foot__lijst li { list-style: none !important; padding-left: 0 !important; }
.sr-footer .sr-foot__sociaal li::before,
.sr-footer .sr-foot__lijst li::before { content: none !important; }
.sr-foot__sociaal a {
  font-size: .875rem;
  border-bottom: 1px solid rgba(26,26,26,.30);
  padding-bottom: 2px;
}

/* ── Mobiel: uitlijning en ruimte ──────────────────────────── */
@media (max-width: 980px) {
  /* Divi laat kolommen op mobiel 100% worden maar houdt de marge;
     dat geeft ongelijke witruimte tussen secties. */
  .et_pb_row .et_pb_column { margin-bottom: 1.75rem; }
  .et_pb_row .et_pb_column:last-child { margin-bottom: 0; }

  /* Koppen en losse tekst gecentreerd, net als op desktop */
  .sr-usp, .sr-usp p, .sr-usp h3,
  .sr-eyebrow p, .sr-section-title h2 { text-align: center; }
  .sr-section-lead p { text-align: center; margin-left: auto; margin-right: auto; }

  /* Knoppen over de volle breedte: prettiger om te raken */
  .sr-knop-midden .et_pb_button,
  .sr-kaart__knop.et_pb_button { display: block; width: 100%; }

  .sr-banner { min-height: 60vh; background-position: center 22% !important; }
  .sr-banner__lead p { font-size: 1rem; }

  /* Footer netjes onder elkaar met lucht ertussen */
  .sr-footer .et_pb_column { margin-bottom: 2.2rem; text-align: left; }
  .sr-footer .et_pb_column:last-child { margin-bottom: .5rem; }
  .sr-foot__lijst li { margin-bottom: .55rem; }
  .sr-foot__sociaal { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .sr-banner__titel h1 { font-size: 1.75rem; }
  .sr-kaart__oms { min-height: 0; }
  .sr-quote__text { font-size: 1.375rem; }
}

/* ═══════════════════════════════════════════════════════════
   MOBIEL MENU EN BANNER
   ═══════════════════════════════════════════════════════════ */

/* ── Uitklapmenu ─────────────────────────────────────────────
   De Menu-module staat op een doorzichtige achtergrond zodat de
   bordeaux balk eronder doorkomt. Datzelfde maakte het uitklap-
   menu doorzichtig: witte links zweefden over de foto eronder.
   Het menu krijgt daarom zijn eigen achtergrond.
   ─────────────────────────────────────────────────────────── */
/* Vangnet. De echte oplossing zit in de module zelf: die staat op
   bordeaux in plaats van transparant, want uit een doorzichtige
   achtergrond genereert Divi een !important-regel die ook het
   uitklapmenu doorzichtig maakt. */
.et-l--header .et_pb_menu .et_mobile_menu,
.sr-head__menu .et_mobile_menu,
.et_pb_menu .et_mobile_menu {
  background-color: var(--bg) !important;
  border-top: 1px solid rgba(26,26,26,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: .5rem 0;
}
.et-l--header .et_pb_menu .et_mobile_menu li a,
.sr-head__menu .et_mobile_menu li a,
.et_pb_menu .et_mobile_menu li a {
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: .04em;
  padding: .95rem 1.4rem;
  border-bottom: 1px solid rgba(26,26,26,.10);
}
.sr-head__menu .et_mobile_menu li:last-child a,
.et_pb_menu .et_mobile_menu li:last-child a { border-bottom: none; }
.sr-head__menu .et_mobile_menu li a:hover,
.et_pb_menu .et_mobile_menu li a:hover {
  background-color: var(--bg-alt);
  opacity: 1;
}
/* Het hamburger-icoon en het winkelmandje in de balk */
.et_pb_menu .mobile_menu_bar::before,
.et_pb_menu .et_pb_menu__icon { color: var(--text) !important; }

/* ── Banner op mobiel ────────────────────────────────────────
   De bannerfoto is liggend (16:9). In een staand kader snijdt
   `cover` er zoveel vanaf dat de compositie wegvalt. Lager kader
   plus een uitsnede die de gezichten vasthoudt.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sr-banner {
    min-height: 0;
    padding-top: 16% !important;
    padding-bottom: 16% !important;
    background-position: 50% 30% !important;
  }
}
@media (max-width: 640px) {
  .sr-banner {
    padding-top: 22% !important;
    padding-bottom: 22% !important;
    background-position: 50% 26% !important;
  }
  .sr-banner__titel h1 { font-size: 1.65rem; line-height: 1.14; }
  .sr-banner__lead p  { font-size: .9rem; }
  .sr-banner .et_pb_row { width: 88% !important; }
}


/* ── Banner: ander gedrag per schermbreedte ─────────────────
   Desktop: foto als achtergrond met de tekst eroverheen.
   Mobiel: foto als eigen beeld bovenaan in zijn eigen verhouding,
   tekst eronder op bordeaux. Zo blijft de compositie heel.
   ─────────────────────────────────────────────────────────── */
.sr-banner__mob { margin-bottom: 1.5rem !important; width: 100%; }
.sr-banner__mob .et_pb_image_wrap, .sr-banner__mob img { width: 100%; display: block; }

@media (max-width: 980px) {
  /* Divi genereert 'div.et_pb_section.et_pb_section_0 { background-image: ... !important }'.
     Die selector telt een element plus twee classes; om daar zeker overheen te komen
     staat sr-banner hier twee keer. Lelijk, maar voorspelbaar. */
  div.et_pb_section.sr-banner.sr-banner {
    background-image: none !important;
    background-color: var(--bg) !important;
    min-height: 0;
    padding-top: 0 !important;
    padding-bottom: 8% !important;
  }
  .sr-banner::before { display: none; }          /* donkere laag niet meer nodig */
  .sr-banner .et_pb_row { width: 100% !important; max-width: 100% !important; }
  .sr-banner__titel, .sr-banner__lead, .sr-banner .sr-eyebrow,
  .sr-banner .et_pb_button_module_wrapper { padding-left: 6%; padding-right: 6%; }
  .sr-banner__titel h1, .sr-banner__lead p { text-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════
   TOEGANKELIJKHEID OP MOBIEL
   Uit de audit kwamen drie systematische problemen: te kleine
   tekst (11px), te kleine raakdoelen en te laag contrast.
   Deze regels lossen ze bij de bron op.
   ═══════════════════════════════════════════════════════════ */

/* ── Leesbare tekstgrootte ─────────────────────────────────
   De bovenkopjes stonden op 0.6875rem (11px). Onder 12px wordt
   tekst op een telefoon lastig leesbaar. */
@media (max-width: 980px) {
  .sr-eyebrow p,
  .sr-utilbar-tekst p,
  .sr-kaart__tint,
  .sr-kaart__inhoud,
  .sr-foot__kop,
  .sr-quote__attr { font-size: .75rem !important; }

  .sr-foot__lijst a,
  .sr-foot__sociaal a,
  .sr-foot__klein,
  .sr-kaart__voorraad,
  .sr-usp__text { font-size: .875rem !important; }
}

/* ── Raakdoelen ────────────────────────────────────────────
   Een link van 349 bij 23 pixels is met een vinger lastig te
   raken. De richtlijn is 44px; we halen dat met padding, zodat
   de tekst zelf niet groter hoeft. */
@media (max-width: 980px) {
  .sr-foot__lijst a,
  .sr-foot__sociaal a {
    display: inline-block;
    padding: .55rem 0;
    min-height: 44px;
    line-height: 1.9;
  }
  .sr-foot__lijst li { margin-bottom: 0; }

  .sr-kaart__naam a {
    display: block;
    padding: .35rem 0;
    min-height: 40px;
  }

  /* Menu-items in het uitklapmenu */
  .et-l--header .et_pb_menu .et_mobile_menu li a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Winkelmandje en hamburger */
  .et_pb_menu__icon,
  .et_pb_menu .mobile_menu_bar {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Knoppen comfortabel hoog */
  .et_pb_button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .sr-kaart__knop.et_pb_button { width: 100%; }
}

/* ── Contrast ──────────────────────────────────────────────
   De footerlinks stonden op 62% dekking (5,29:1). Op 88% is dat
   9,41:1 en blijft het rustig ogen. */
.sr-foot__lijst a,
.sr-foot__sociaal a { color: var(--text-muted) !important; }
.sr-foot__tag       { color: var(--text-muted) !important; }
.sr-foot__klein,
.sr-foot__klein span { color: var(--text-muted) !important; }

/* ── Laatste punten uit de audit ────────────────────────────
   WooCommerce's eigen elementen op de productpagina en de
   labels op de contactpagina bleven onder de norm.
   ─────────────────────────────────────────────────────────── */

/* Het aanbiedingslabel stond op 9px met 2,39:1 contrast */
.woocommerce span.onsale,
.et_pb_shop span.onsale {
  font-size: .75rem !important;
  padding: .45rem .8rem;
  background-color: var(--btn-primary-bg) !important;  /* bordeaux: 8,9:1 op wit */
  color: #FFFFFF !important;
}

/* Kruimelpad op de productpagina */
.woocommerce .woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb {
  font-size: .8125rem !important;
  color: var(--text-muted) !important;
}
@media (max-width: 980px) {
  .woocommerce .woocommerce-breadcrumb a {
    display: inline-block;
    padding: .5rem 0;
    min-height: 40px;
    line-height: 1.9;
  }
}


/* De naamsvermelding onderaan */
.sr-foot__klein a { color: var(--text) !important; }

/* Divi's Woo-stylesheet gebruikt '.woocommerce-page span.onsale' — een class
   meer dan de onze, dus die won met een oranje achtergrond op 2,39:1. */
.woocommerce-page span.onsale,
.woocommerce-page .woocommerce span.onsale,
body.woocommerce-page span.onsale {
  background-color: var(--btn-primary-bg) !important;
  color: #FFFFFF !important;
  font-size: .75rem !important;
  padding: .45rem .8rem !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  border-radius: var(--badge-radius) !important;
}

/* Categorielink onder de productgegevens */
@media (max-width: 980px) {
  .woocommerce .product_meta a,
  .woocommerce .posted_in a {
    display: inline-block;
    padding: .5rem 0;
    min-height: 40px;
    line-height: 1.9;
  }
}

/* Het label staat ook in Divi's Shop-module met weer een andere selector */
span.onsale, .et_pb_module span.onsale { font-size: .75rem !important; }

/* ═══════════════════════════════════════════════════════════
   SHIQI COSMETICS — wit met zwarte letters
   Alle bordeauxrode vlakken zijn wit geworden; bordeaux blijft
   alleen in het logo. Knoppen zijn zwart, want bordeaux op wit
   zou als knop te weinig opvallen.
   ═══════════════════════════════════════════════════════════ */

/* Prijzen zwart in plaats van in de accentkleur */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.et_pb_shop .price,
.et_pb_wc_price .price,
.sr-kaart__prijs,
.sr-duo__prijs { color: var(--text) !important; }
.sr-kaart__prijs del,
.woocommerce div.product p.price del { color: var(--text-muted) !important; }

/* Het beige vlak rondom de productfoto's weg */
.sr-kaart__beeld img,
.woocommerce ul.products li.product a img,
.et_pb_shop ul.products li.product a img {
  background: transparent !important;
  padding: 0 !important;
}
.sr-kaart { border: 1px solid var(--border); }

/* Witte footer heeft een lijn nodig om zich van de pagina te scheiden */
.sr-footer { border-top: 1px solid var(--border); }
.sr-foot__lijst a,
.sr-foot__sociaal a,
.sr-foot__tag,
.sr-foot__klein,
.sr-foot__klein span { color: var(--text-muted) !important; }
.sr-foot__lijst a:hover,
.sr-foot__sociaal a:hover { color: var(--text) !important; }
.sr-foot__kop, .sr-foot__merk { color: var(--text) !important; }
.sr-foot__sociaal a { border-bottom-color: var(--border-strong); }

/* Quote-sectie: was bordeaux met witte tekst, nu wit met zwarte */
.sr-quote__text { color: var(--text) !important; }
.sr-quote__attr { color: var(--text-muted) !important; }

/* Knoppen die op een donkere ondergrond stonden, staan nu op wit */
.et_pb_button.sr-btn--licht,
.et_pb_button.sr-btn--licht:hover {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid var(--btn-primary-bg);
}

/* Meldingsbalk is nu het enige donkere vlak */
.sr-utilbar-tekst p { color: #FFFFFF !important; }

/* Uitklapmenu volgt de witte balk */
.et-l--header .et_pb_menu .et_mobile_menu,
.sr-head__menu .et_mobile_menu,
.et_pb_menu .et_mobile_menu {
  background-color: #FFFFFF !important;
  border-top: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.et-l--header .et_pb_menu .et_mobile_menu li a,
.sr-head__menu .et_mobile_menu li a,
.et_pb_menu .et_mobile_menu li a {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}
.et-l--header .et_pb_menu .et_mobile_menu li a:hover,
.et_pb_menu .et_mobile_menu li a:hover { background-color: var(--bg-alt); }
.et_pb_menu .mobile_menu_bar::before,
.et_pb_menu .et_pb_menu__icon { color: var(--text) !important; }

/* ── Header: logo links, naam midden, menu rechts ──────────── */
/* Volle schermbreedte. Divi legt een rij standaard op max 1080px en
   centreert hem; op een breed scherm stond het logo daardoor een heel eind
   van de linkerrand. De eigen class twee keer, anders wint Divi's eigen
   `.et_pb_row_N { max-width: ... }`. */
.sr-headrij.sr-headrij {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 2.5% !important;
  padding-right: 2.5% !important;
}
.sr-headrij { display: flex !important; align-items: center; flex-wrap: nowrap; }
.sr-headrij > .et_pb_column { margin-bottom: 0 !important; display: flex; align-items: center; }
/* Op de pc verdeelt Divi de kolommen netjes 25/50/25 en staat de merknaam
   precies in het midden. Op telefoon en tablet zet Divi de kolombreedte op
   100%, waarna de flexbox ze laat krimpen naar hun inhoud: 64 / 185 / 122.
   Het midden schoof daardoor 29px naar links. Met gelijke buitenkolommen
   (flex: 1) klopt het op elke schermbreedte. (Gemeten 25-08-2026.) */
.sr-headrij > .et_pb_column:nth-child(1),
.sr-headrij > .et_pb_column:nth-child(3) { flex: 1 1 0 !important; width: auto !important; }
.sr-headrij > .et_pb_column:nth-child(2) { flex: 0 1 auto !important; width: auto !important; }
.sr-headrij > .et_pb_column:nth-child(1) { justify-content: flex-start; }
.sr-headrij > .et_pb_column:nth-child(2) { justify-content: center; }
.sr-headrij > .et_pb_column:nth-child(3) { justify-content: flex-end; }

.sr-head__logo { margin-bottom: 0 !important; }
.sr-head__logo img { height: 67px; width: auto; display: block; }

.sr-head__naam { margin-bottom: 0 !important; }
.sr-head__naam p { margin: 0; }
.sr-head__naam a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.sr-head__menu { margin-bottom: 0 !important; width: auto; }
.sr-head__menu .et_pb_menu__wrap { justify-content: flex-end; }
.sr-head__menu .et_pb_menu__menu > nav > ul > li > a {
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .06em;
  padding-bottom: 0;
}
.sr-head__menu .et_pb_menu__icon { color: var(--text) !important; }
.sr-headbar { border-bottom: 1px solid var(--border); }

@media (max-width: 980px) {
  /* Op mobiel: logo links, naam midden, hamburger rechts */
  .sr-headrij > .et_pb_column { width: auto !important; }
  .sr-headrij > .et_pb_column:nth-child(2) { flex: 1; }
  .sr-head__naam a { font-size: 1.125rem; letter-spacing: .10em; }
  .sr-head__logo img { height: 51px; width: auto; }
}
@media (max-width: 460px) {
  .sr-head__naam a { font-size: .95rem; letter-spacing: .06em; }
  .sr-head__logo img { height: 45px; width: auto; }
}


/* ── Banner op mobiel: geen foto, dus donkere letters ───────
   Op desktop ligt er een foto onder de tekst en is wit juist
   nodig; op telefoon en tablet staat die foto uit. */
@media (max-width: 980px) {
  /* sr-banner staat twee keer in de selector: Divi maakt uit de
     module-instellingen regels als `.et_pb_text_0 p { color:#FDFAF6 !important }`
     en die staat later in de bron. Alleen met meer specificiteit winnen we. */
  .sr-banner.sr-banner .sr-banner__titel h1 { color: var(--text) !important; text-shadow: none !important; }
  .sr-banner.sr-banner .sr-banner__lead p,
  .sr-banner.sr-banner .sr-eyebrow,
  .sr-banner.sr-banner .sr-eyebrow p,
  .sr-banner.sr-banner .sr-op-donker p,
  .sr-banner.sr-banner .et_pb_text p,
  .sr-banner.sr-banner .et_pb_text h1,
  .sr-banner.sr-banner .et_pb_text h2 { color: var(--text-muted) !important; text-shadow: none !important; }
  .sr-banner.sr-banner .sr-banner__titel h1 { color: var(--text) !important; }
  .sr-banner .et_pb_button.sr-btn--licht {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border-color: var(--btn-primary-bg);
  }
}


/* ═══════════════════════════════════════════════════════════
   COLLECTIE OP TELEFOON — twee tinten naast elkaar
   De duo is een ander soort product en krijgt daarom een eigen
   regel eronder, op halve breedte en gecentreerd. Divi stapelt
   kolommen standaard alle drie onder elkaar; dat wordt hier
   overschreven met flexbox op de rij zelf.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .sr-kaart-rij.sr-kaart-rij {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    /* Bewust geen `gap`: bij een item dat alleen op zijn regel staat
       reserveert de flexbox toch ruimte voor de tussenruimte, waardoor de
       duo 6px uit het midden kwam te staan. Met marges klopt het wel. */
  }
  .sr-kaart-rij.sr-kaart-rij > .et_pb_column {
    width: calc(50% - 6px) !important;
    margin: 0 !important;
    float: none !important;
  }
  .sr-kaart-rij.sr-kaart-rij > .et_pb_column:nth-child(1) { margin-right: 12px !important; }
  /* De duo krijgt een eigen regel. `justify-content: center` op de rij
     centreert de hele regel inclusief de gap, waardoor de kaart 6px naar
     links stond. Met auto-marges centreert de kaart zichzelf. */
  .sr-kaart-rij.sr-kaart-rij > .et_pb_column:nth-child(3) {
    width: calc(50% - 6px) !important;
    margin: 12px auto 0 !important;
  }
  /* de kaarten worden smaller, dus de binnenkant meeschalen */
  .sr-kaart-rij .sr-kaart__body { padding-left: .5rem; padding-right: .5rem; }
  .sr-kaart-rij .sr-kaart__naam { font-size: 1rem; line-height: 1.2; }
  .sr-kaart-rij .sr-kaart__prijs { font-size: .9rem; }
  .sr-kaart-rij .sr-kaart__inhoud { display: block; font-size: .75rem; }
  .sr-kaart-rij .sr-kaart__tint { font-size: .68rem; letter-spacing: .1em; }
  .sr-kaart-rij .et_pb_button { font-size: .8rem !important; padding: .7rem .5rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   SOCIALE KANALEN — logo met de accountnaam ernaast
   Inline SVG, dus geen extern bestand dat kan ontbreken. Het
   icoon erft de tekstkleur via currentColor en kleurt dus
   vanzelf mee met de rest van de voettekst.
   ═══════════════════════════════════════════════════════════ */
.sr-foot__sociaal, .sr-soc {
  list-style: none !important;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .55rem;
}
.sr-foot__sociaal li, .sr-soc li { margin: 0 !important; padding-left: 0 !important; }
.sr-foot__sociaal li::before, .sr-soc li::before { content: none !important; }
.sr-foot__sociaal a, .sr-soc a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-bottom: none !important;
  /* min-height in plaats van een mediaquery: een raakdoel moet op elk
     scherm minstens 32px hoog zijn, ook op een tablet van 768px. */
  min-height: 34px;
  padding: .25rem 0;
  font-size: .875rem;
  line-height: 1.2;
  white-space: nowrap;
}
.sr-soc__ico { flex: 0 0 auto; display: block; }
.sr-soc__naam { border-bottom: 1px solid rgba(26,26,26,.28); padding-bottom: 1px; }
.sr-foot__sociaal a:hover .sr-soc__naam,
.sr-soc a:hover .sr-soc__naam { border-bottom-color: currentColor; }

/* op de contactpagina staan ze onder een eigen kopje */
.sr-soc--contact { margin-top: .35rem; }


/* ═══════════════════════════════════════════════════════════
   PRODUCTPAGINA — knop, beschrijving en galerij
   ═══════════════════════════════════════════════════════════ */

/* De winkelwagenknop stond op Divi's grijs. Zwart, net als elders. */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce input.button.alt {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 1.05rem 2.2rem !important;
  line-height: 1;
  transition: background-color .2s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}
/* Zolang er geen tint gekozen is staat de knop uit. Op .35 leek hij kapot;
   .55 leest als "nog niet actief" zonder alarmerend te ogen. */
.woocommerce div.product form.cart .button[disabled],
.woocommerce div.product form.cart .button.disabled {
  opacity: .55 !important;
  cursor: not-allowed;
}
/* Zeg er ook bij waaróm hij uitstaat */
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed::after {
  content: none;
}
.woocommerce div.product .variations_form .sr-tinthint {
  display: block;
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: .5rem;
}

/* Aantalveld ernaast even hoog en in dezelfde vormtaal */
.woocommerce div.product form.cart div.quantity input.qty {
  height: 100%;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* ── Beschrijving: geen grijs tabbladkader meer ──────────────
   Het tabblad is één blok tekst; een kader met een grijze kop
   eromheen leest als een formulier. Nu een open sectie met een
   dunne lijn erboven, zoals de rest van de site. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none !important;                 /* er is nog maar één tabblad */
}
.woocommerce div.product .woocommerce-tabs {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 2.5rem 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--border) !important;
  max-width: 720px;
}
.woocommerce div.product .woocommerce-tabs {
  padding-top: 1rem;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  display: none;                            /* dubbele kop "Beschrijving" */
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text);
  margin: 2rem 0 .75rem;
}
.woocommerce div.product .woocommerce-tabs .panel p {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: .9rem;
}
/* de ingrediëntenlijst mag kleiner — punt 4.6 */
.woocommerce div.product .woocommerce-tabs .panel .sr-inci,
.woocommerce div.product .woocommerce-tabs .panel p.sr-inci {
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── Galerij: miniaturen onder de hoofdfoto ────────────────── */
.woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image,
.woocommerce div.product .flex-control-thumbs li img {
  border: 1px solid transparent;
  transition: border-color .2s ease;
}
.woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image:hover,
.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active {
  border-color: var(--text);
}

/* ── Gerelateerde producten in dezelfde kaartvorm ──────────── */
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 1.75rem;
}
.woocommerce .related ul.products li.product,
.woocommerce ul.products li.product {
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  padding-top: .75rem !important;
}
.woocommerce ul.products li.product .price {
  color: var(--text) !important;
  font-size: .95rem !important;
}


/* ═══════════════════════════════════════════════════════════
   TEKSTPAGINA'S — verzenden & retour, privacyverklaring
   Lange lopende tekst; smalle kolom en veel witruimte zodat het
   leesbaar blijft. Regelbreedte rond de 70 tekens.
   ═══════════════════════════════════════════════════════════ */
.sr-tekst__titel h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: .5rem;
}
.sr-tekst__intro p {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 46ch;
}
.sr-tekst__body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  margin: 2.75rem 0 .75rem;
}
.sr-tekst__body h2:first-child { margin-top: 0; }
.sr-tekst__body h3 {
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);
  margin: 1.85rem 0 .6rem;
}
.sr-tekst__body p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1.1rem;
  max-width: 68ch;
}
.sr-tekst__body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sr-tekst__body table {
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  width: 100%;
  max-width: 420px;
}
.sr-tekst__body table td {
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .95rem;
}
.sr-tekst__body table td:last-child { text-align: right; color: var(--text); }

@media (max-width: 767px) {
  .sr-tekst__body table { max-width: 100%; }
  .sr-tekst__body h2 { margin-top: 2.25rem; }
}


/* ═══════════════════════════════════════════════════════════
   KORTINGSPOP-UP EN HET MEMBERS-BLOK
   ═══════════════════════════════════════════════════════════ */
.sr-pop[hidden] { display: none !important; }
.sr-pop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.sr-pop__scherm {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 15, .55);
  animation: sr-pop-in .25s ease both;
}
.sr-pop__doos {
  position: relative;
  background: var(--bg);
  max-width: 440px;
  width: 100%;
  padding: 2.75rem 2.25rem 2rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  animation: sr-pop-omhoog .32s cubic-bezier(.2, .7, .3, 1) both;
  max-height: 92vh;
  overflow-y: auto;
}
@keyframes sr-pop-in    { from { opacity: 0 } to { opacity: 1 } }
@keyframes sr-pop-omhoog { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.sr-pop__kruis {
  position: absolute;
  top: .35rem; right: .55rem;
  width: 44px; height: 44px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.sr-pop__kruis:hover { color: var(--text); }

.sr-pop__label {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .85rem;
}
.sr-pop__kop {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 .9rem;
}
.sr-pop__tekst {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
}
.sr-pop__form { display: flex; flex-direction: column; gap: .6rem; }
.sr-pop__verborgen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sr-pop__form input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: .85rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}
.sr-pop__form input[type="email"]:focus {
  outline: none;
  border-color: var(--text);
}
.sr-pop__knop {
  min-height: 48px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid var(--btn-primary-bg);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}
.sr-pop__knop:hover:not(:disabled) { background: var(--btn-primary-hover); }
.sr-pop__knop:disabled { opacity: .6; cursor: default; }

.sr-pop__melding { font-size: .875rem; margin: .9rem 0 0; min-height: 1.2em; }
.sr-pop__melding--goed { color: var(--text); }
.sr-pop__melding--fout { color: var(--accent); }

.sr-pop__klein {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 1.1rem 0 0;
}
.sr-pop__klein a { color: var(--text-muted); text-decoration: underline; }

@media (max-width: 480px) {
  .sr-pop__doos { padding: 2.25rem 1.4rem 1.6rem; }
  .sr-pop__kop { font-size: 1.4rem; }
}

/* ── Het blok op de pagina zelf (home en webshop) ──────────── */
.sr-members .sr-members__kop h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: .75rem;
}
.sr-members .sr-members__tekst p {
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}


/* Verzendbalk compacter (punt 3.2) */
.sr-verzendbalk .sr-usp__title {
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .3rem;
}
.sr-verzendbalk .sr-usp__text {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.sr-verzendbalk .sr-usp__text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.sr-verzendbalk .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 767px) {
  .sr-verzendbalk .et_pb_column { margin-bottom: 1.1rem !important; }
  .sr-verzendbalk .et_pb_column:last-child { margin-bottom: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════
   DE SHOOT op de pagina Over Sara (punt 5.1)
   ═══════════════════════════════════════════════════════════ */
.sr-shoot__beeld { margin-bottom: 0 !important; }
.sr-shoot__beeld .et_pb_image_wrap { display: block; width: 100%; }
.sr-shoot__beeld img { width: 100%; height: auto; display: block; }

.sr-shoot__portretten { margin-top: 2.5rem !important; }
.sr-shoot__portretten .et_pb_column { margin-bottom: 0 !important; }
.sr-shoot__bijschrift {
  font-family: var(--font-body) !important;
  font-size: .75rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  text-align: center;
  margin: .85rem 0 0 !important;
}
.sr-shoot__grid { margin-top: 1.75rem !important; }
.sr-shoot__grid .et_pb_column { margin-bottom: 0 !important; }

@media (max-width: 980px) {
  .sr-shoot__grid .et_pb_column {
    width: calc(50% - 6px) !important;
    margin: 0 12px 12px 0 !important;
    float: left;
  }
  .sr-shoot__grid .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
  .sr-shoot__grid::after { content: ""; display: table; clear: both; }
}
@media (max-width: 767px) {
  /* portretten blijven naast elkaar: juist de vergelijking is het punt */
  .sr-shoot__portretten { display: flex !important; gap: 10px; }
  .sr-shoot__portretten > .et_pb_column {
    width: calc(50% - 5px) !important;
    margin: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   UITKLAPBARE INGREDIENTENLIJST (punt 2.10)
   ═══════════════════════════════════════════════════════════ */
.sr-uitklap__blok { border-top: 1px solid var(--border); margin: 1.5rem 0 1.75rem; }
.sr-uitklap__knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 1rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.sr-uitklap__knop:hover .sr-uitklap__tekst { opacity: .65; }

/* Het plusje: twee streepjes, waarvan er één wegdraait bij openen. */
.sr-uitklap__teken {
  position: relative;
  width: 14px; height: 14px;
  flex: 0 0 auto;
  margin-left: 1rem;
}
.sr-uitklap__teken::before,
.sr-uitklap__teken::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform .22s ease, opacity .22s ease;
}
.sr-uitklap__teken::before { top: 50%; left: 0; width: 14px; height: 1px; transform: translateY(-50%); }
.sr-uitklap__teken::after  { left: 50%; top: 0; width: 1px; height: 14px; transform: translateX(-50%); }
.sr-uitklap__knop[aria-expanded="true"] .sr-uitklap__teken::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.sr-uitklap__inhoud { padding: 1.25rem 0 .25rem; }
.sr-uitklap__inhoud[hidden] { display: none; }
.sr-uitklap__voorbehoud {
  font-style: italic;
  font-size: .8125rem !important;
  color: var(--text-muted) !important;
  margin-bottom: .75rem !important;
}
.sr-uitklap__inhoud .sr-inci {
  font-size: .8125rem !important;
  line-height: 1.75 !important;
  color: var(--text-muted) !important;
}
.sr-uitklap__slot {
  font-size: .8125rem !important;
  color: var(--text-muted) !important;
  margin-top: .75rem !important;
}


/* Galerijpijlen op de productpagina: de plugin levert grijze blokjes,
   dat past niet bij de rest. Nu wit met een dunne rand en zwarte pijl. */
.woo-variation-gallery-wrapper .wvg-gallery-image-slider .slick-arrow,
.woo-variation-gallery-wrapper .slick-prev,
.woo-variation-gallery-wrapper .slick-next {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  width: 36px !important;
  height: 44px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.woo-variation-gallery-wrapper .slick-prev:hover,
.woo-variation-gallery-wrapper .slick-next:hover {
  background: var(--bg) !important;
  border-color: var(--text) !important;
}
.woo-variation-gallery-wrapper .slick-prev::before,
.woo-variation-gallery-wrapper .slick-next::before {
  color: var(--text) !important;
  opacity: 1 !important;
  font-size: 15px !important;
}


/* Bedrijfsgegevens in de footer: verplicht voor een webshop, maar het hoeft
   niet op te vallen. Kleiner en rustiger dan de rest van de kolom. */
.sr-foot__zakelijk li {
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--footer-muted);
  margin-bottom: .35rem !important;
}
.sr-foot__zakelijk { margin-bottom: 1.25rem !important; }


/* ═══════════════════════════════════════════════════════════
   BANNERSLIDER (punt 2.1)
   Divi's slidermodule in de vormtaal van de site: geen ronde
   knoppen, geen schaduw, dezelfde letters als de rest.
   ═══════════════════════════════════════════════════════════ */
.sr-bannerslider { margin-bottom: 0 !important; }
.sr-slider .et_pb_slide { padding: 0 !important; position: relative; }

/* Verloop achter de tekst. De overlay op de module zelf maakt de hele foto
   even donker; dat is te weinig waar de tekst over een licht gezicht valt en
   te veel in de hoeken. Een verloop van het midden naar buiten houdt de tekst
   overal leesbaar en laat de randen van de foto met rust. */
.sr-slider .et_pb_slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(24,14,12,.62) 0%, rgba(24,14,12,.42) 38%, rgba(24,14,12,.12) 68%, rgba(24,14,12,0) 100%);
  z-index: 1;
}
.sr-slider .et_pb_slide .et_pb_container { position: relative; z-index: 2; }
/* Tekst links uitgelijnd in plaats van gecentreerd: het blok staat aan de
   linkerkant van de banner, met een vaste breedte zodat de regels niet over
   de hele foto uitlopen. */
.sr-slider .et_pb_slide_description {
  padding: 9% 8% !important;
  text-align: left !important;
  max-width: 640px;
  margin: 0 auto 0 0;
}
.sr-slider .et_pb_slide_title,
.sr-slider .et_pb_slide_title a {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 4.2vw, 3.1rem) !important;
  font-weight: 300 !important;
  line-height: 1.12 !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 24px rgba(0,0,0,.28);
  padding-bottom: .6rem !important;
}
.sr-slider .et_pb_slide_content,
.sr-slider .et_pb_slide_content p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 16px rgba(0,0,0,.26);
  max-width: 46ch;
  margin: 0 0 1.4rem !important;
}
.sr-slider .et_pb_slide_description .et_pb_button_wrapper { text-align: left !important; }
.sr-slider .et_pb_more_button.et_pb_button {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: .8125rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 1.05rem 2.2rem !important;
  margin-top: 0 !important;
}
.sr-slider .et_pb_more_button.et_pb_button:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}
.sr-slider .et_pb_more_button.et_pb_button::after { display: none !important; }

/* Pijlen en bolletjes */
.sr-slider .et-pb-arrow-prev, .sr-slider .et-pb-arrow-next {
  color: #FFFFFF !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
/* De bolletjes blijven visueel 8px, maar het gebied waar je op kunt tikken
   wordt 34px. Anders is het op een telefoon vrijwel niet te raken. Het
   zichtbare bolletje is een ::before; de link zelf is doorzichtig.
   Het cijfer in de link is een label voor schermlezers en wordt netjes
   weggezet in plaats van onzichtbaar gekleurd, want een onzichtbaar
   gekleurde tekst telt als contrastfout. */
.sr-slider .et-pb-controllers a {
  position: relative;
  background-color: transparent !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 0;
  margin: 0 !important;
  overflow: hidden;
  text-indent: -9999px;
  display: inline-block;
}
.sr-slider .et-pb-controllers a::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.45);
  transition: background-color .2s ease;
}
.sr-slider .et-pb-controllers .et-pb-active-control::before {
  background-color: #FFFFFF !important;
}
.sr-slider .et-pb-controllers { bottom: 6px; }

/* Op telefoon en tablet staat de foto uit; dan moet de tekst donker
   worden, anders is wit op wit. Twee keer sr-slider voor de zekerheid:
   Divi genereert uit de module-instellingen zelf een regel met
   vergelijkbare specificiteit. */
/* De bannerfoto staat sinds 27-08-2026 ook op tablet en telefoon aan.
   Een liggende opname in een staand kader snijdt veel weg, dus daar staat
   het brandpunt hoger: bij deze foto's zitten de gezichten in de bovenste
   helft. De tekst blijft wit met het verloop eronder, net als op de pc. */
@media (max-width: 980px) {
  .sr-slider.sr-slider .et_pb_slide {
    background-position: center 28% !important;
    background-size: cover !important;
    min-height: 62vh;
  }
  .sr-slider .et_pb_slide_description {
    padding: 16% 7% 18% !important;
    max-width: 100%;
  }
  /* Op een smal scherm is de foto drukker in beeld, dus het verloop iets
     steviger dan op de pc, anders valt de kop weg tegen een gezicht. */
  .sr-slider .et_pb_slide::after {
    background: linear-gradient(to bottom,
      rgba(24,14,12,.30) 0%,
      rgba(24,14,12,.52) 45%,
      rgba(24,14,12,.62) 100%) !important;
  }
}

@media (max-width: 600px) {
  .sr-slider.sr-slider .et_pb_slide { min-height: 68vh; }
  .sr-slider .et_pb_slide_title, .sr-slider .et_pb_slide_title a { font-size: 1.9rem !important; }
  .sr-slider .et_pb_slide_content, .sr-slider .et_pb_slide_content p { font-size: .9375rem !important; }
}


/* Meldingsbalk erboven: tekst blijft gecentreerd, maar de balk zelf loopt
   over de volle breedte mee met de header. */
.sr-utilbar .et_pb_row { width: 100% !important; max-width: 100% !important; }

/* Op smallere schermen een iets ruimere marge, anders plakt het logo
   tegen de rand van het scherm. */
@media (max-width: 980px) {
  .sr-headrij.sr-headrij { padding-left: 5% !important; padding-right: 5% !important; }
}


/* ═══════════════════════════════════════════════════════════
   BREEDTE OP GROTE SCHERMEN

   De header loopt door tot de schermrand. Bleef de inhoud dan op
   1380px staan, dan viel er op een scherm van 2560px bijna 600px
   wit aan weerszijden en oogde de site smal.

   Niet alles mag even hard meegroeien. Bij 2000px werden de
   productkaarten 660px breed terwijl de foto's daarin even groot
   bleven: veel lucht, log resultaat. Beeldsecties mogen daarom
   verder oprekken dan kaarten en tekst.

   Onder 1500px verandert er niets; daar klopte het al.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1500px) {
  .et-l--post .et_pb_row,
  .et-l--body .et_pb_row { max-width: 1600px !important; }

  /* Sfeergrid en shoot zijn puur beeld en verdragen meer breedte. */
  .sr-sfeer .et_pb_row,
  .sr-shoot .et_pb_row,
  .sr-shoot__grid.sr-shoot__grid,
  .sr-shoot__portretten.sr-shoot__portretten { max-width: 1800px !important; }

  /* Lopende tekst blijft op leesbare regellengte, ongeacht de rij. */
  .sr-section-lead p,
  .sr-tekst__body p,
  .sr-members__tekst p { max-width: 68ch; margin-left: auto; margin-right: auto; }
}


/* Het logo is 152 bij 249 pixels, dus hoog en smal. Sturen op breedte laat de
   balk ongemerkt meegroeien: 64px breed werd 105px hoog en daarmee een balk van
   126px. Daarom op hoogte sturen en de ruimte eromheen krap houden, zodat het
   logo groot oogt zonder dat de balk log wordt. */
.sr-headrij.sr-headrij {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.sr-head__logo { line-height: 0; }


/* ═══════════════════════════════════════════════════════════
   TINTBESCHRIJVINGEN EN KWALITEITSBLOK
   ═══════════════════════════════════════════════════════════ */

/* De tintnamen zijn kopjes binnen een tekstblok, niet zomaar vetgedrukt:
   ze scheiden twee beschrijvingen die anders in elkaar overlopen. */
.sr-section-lead .sr-tint__naam {
  font-family: var(--font-body) !important;
  font-size: .75rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text) !important;
  margin: 1.5rem 0 .4rem !important;
}
.sr-section-lead .sr-tint__naam:first-child { margin-top: 0 !important; }
.sr-section-lead .sr-tint__slot {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-style: italic;
  color: var(--text) !important;
  margin-top: 1.5rem !important;
}

.sr-kwaliteit__kop h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: .9rem;
}
.sr-kwaliteit__tekst p {
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════
   GECENTREERDE TEKST OOK ECHT IN HET MIDDEN

   `sara-base.css` zet `max-width: 56ch` op de hele module
   `.sr-section-lead`. In de preview stond die altijd in een
   linkerkolom, dus daar viel het niet op. In de Divi-opbouw
   staat zo'n module vaak in een kolom over de volle breedte,
   met een gecentreerde kop erboven: de tekst was dan wel
   gecentreerd, maar binnen een blok van 595px dat zelf links
   stond. Dat las als scheve uitlijning. (Gemeten 25-08-2026 op
   de webshoppagina bij 2533px.)

   Staat `sr-midden` op de module, dan hoort het blok de volle
   kolombreedte te krijgen en de tekst zichzelf te centreren.
   ═══════════════════════════════════════════════════════════ */
.sr-midden.sr-section-lead,
.sr-midden .sr-section-lead,
.sr-section-lead.sr-midden {
  max-width: none !important;
  text-align: center;
}
.sr-midden.sr-section-lead p,
.sr-section-lead.sr-midden p {
  max-width: 56ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* zelfde verhaal voor de sectiekop en het bovenkopje */
.sr-midden.sr-section-title,
.sr-midden.sr-eyebrow { max-width: none !important; }


/* ═══════════════════════════════════════════════════════════
   SOCIALBLOK — TikTok en Instagram
   Geen insluitcode van de platforms zelf: die laadt externe
   scripts en zet cookies bij elke bezoeker. Dit blok is eigen
   HTML en laadt dus niets van buiten.
   ═══════════════════════════════════════════════════════════ */
.sr-socialblok { text-align: center; }

.sr-socialblok__tekst {
  color: var(--text-muted) !important;
  line-height: 1.75;
  max-width: 46ch;
  margin: 0 auto 1.75rem !important;
}

/* Video's, zodra ze er zijn: vier staande vlakken naast elkaar */
.sr-socialblok__rij {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 2rem;
}
.sr-socialblok__video {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--bg-alt);
}
.sr-socialblok__video img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.sr-socialblok__video:hover img { transform: scale(1.04); }
.sr-socialblok__speel {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
}
.sr-socialblok__speel::after {
  content: "";
  position: absolute;
  left: 17px; top: 13px;
  border-left: 13px solid var(--text);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

/* De twee knoppen */
.sr-socialblok__knoppen {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sr-socialblok__knop {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid var(--border-strong);
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sr-socialblok__knop:hover {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg) !important;
}
.sr-socialblok__knop svg { flex: 0 0 auto; }

@media (max-width: 767px) {
  .sr-socialblok__rij { grid-template-columns: repeat(2, 1fr); }
  .sr-socialblok__knoppen { flex-direction: column; align-items: stretch; }
  .sr-socialblok__knop { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   COOKIEMELDING
   Onderaan het scherm, niet als scherm-vullend blok: de melding
   hoort de site niet te gijzelen. Weigeren staat links en even
   duidelijk als accepteren, want een weigerknop die wegvalt telt
   niet als vrije keuze.
   ═══════════════════════════════════════════════════════════ */
.sr-cookie[hidden] { display: none !important; }
.sr-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99998;
  padding: 1rem;
  animation: sr-cookie-op .35s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sr-cookie-op { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.sr-cookie__doos {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sr-cookie__tekst {
  flex: 1 1 320px;
  margin: 0 !important;
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.sr-cookie__tekst a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.sr-cookie__knoppen { display: flex; gap: .6rem; flex: 0 0 auto; }
.sr-cookie__knop {
  min-height: 46px;
  padding: 0 1.4rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.sr-cookie__knop--nee {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.sr-cookie__knop--nee:hover { border-color: var(--text); }
.sr-cookie__knop--ja {
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.sr-cookie__knop--ja:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }

@media (max-width: 767px) {
  .sr-cookie { padding: .6rem; }
  .sr-cookie__doos { padding: 1.1rem 1.1rem 1.25rem; gap: 1rem; }
  .sr-cookie__knoppen { width: 100%; }
  .sr-cookie__knop {
    flex: 1 1 0;
    min-width: 0;              /* anders duwt de tekst de knop breder dan zijn vak */
    padding: 0 .7rem;
    white-space: normal;       /* "Alleen noodzakelijk" mag afbreken op een smal scherm */
    line-height: 1.25;
    letter-spacing: .08em;
  }
}

/* Op de smalste telefoons onder elkaar: naast elkaar wordt het knijpen,
   en een keuzeknop hoort niet half buiten beeld te vallen. */
@media (max-width: 400px) {
  .sr-cookie__knoppen { flex-direction: column; }
  .sr-cookie__knop { width: 100%; padding: .8rem 1rem; }
}


/* Het logo is de weg terug naar de home, dus de link eromheen moet te raken
   zijn. Door het logo 20% te verkleinen werd die link 27 bij 23 pixels; dat
   is te klein voor een vinger. Het beeld blijft even groot, alleen het
   aanraakgebied wordt opgerekt. (Gemeten 27-08-2026 op 390px.) */
.sr-head__logo a,
.sr-head__logo .et_pb_image_wrap {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.sr-head__logo a { text-decoration: none; }


/* ═══════════════════════════════════════════════════════════
   WINKELWAGEN EN MELDINGEN
   ═══════════════════════════════════════════════════════════ */

/* ── Teller bij het wagentje ───────────────────────────────── */
.sr-wagen { position: relative; }
.sr-wagen-teller {
  position: absolute;
  top: -7px; right: -10px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: .625rem;
  line-height: 17px;
  text-align: center;
  font-weight: 500;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1.2);
  pointer-events: none;
}
/* Alleen tonen als er ook echt iets in zit. */
.sr-wagen--vol .sr-wagen-teller { opacity: 1; transform: scale(1); }

/* ── Lege winkelwagen: het verdrietige gezicht weg ──────────
   WooCommerce zet daar een grote SVG-smiley neer. Die past niet
   bij de rest en voegt niets toe aan de boodschap. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__image,
.wp-block-woocommerce-empty-cart-block > .wp-block-image:first-child,
.wc-block-cart__empty-cart__image,
.is-empty-cart svg.wc-block-cart__empty-cart__image,
.wp-block-woocommerce-empty-cart-block figure:first-of-type {
  display: none !important;
}
.wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--text);
}

/* ── Meldingen in de huisstijl ──────────────────────────────
   WooCommerce toonde die als harde donkere balken met witte
   letters. Nu een licht vlak met een streep in de accentkleur
   ernaast: rustiger, en de tekst leest prettiger. */
/* Let op de `body` ervoor. Divi maakt uit zijn accentkleur een eigen regel
   `.woocommerce-message,.woocommerce-error,.woocommerce-info{background:#1A1A1A!important}`
   in et-cache. Die heeft dezelfde specificiteit als een losse klasse en laadt
   ná dit bestand, dus zonder `body` wint Divi de achtergrond terwijl wij de
   tekstkleur winnen: zwarte letters op een zwart vlak. (Gemeten 31-08-2026.) */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .wc-block-components-notice-banner {
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 1.1rem 1.4rem !important;
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.6;
  box-shadow: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}
body .woocommerce-message *,
body .woocommerce-info *,
body .woocommerce-error *,
body .wc-block-components-notice-banner * {
  color: var(--text) !important;
}
body .woocommerce-message a:not(.button),
body .woocommerce-info a:not(.button),
body .woocommerce-error a:not(.button),
body .wc-block-components-notice-banner a:not(.button) {
  color: var(--text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* De knop "Bekijk winkelwagen" stond als witte tekst rechts in het zwarte vlak.
   Nu een rustige omlijnde knop, direct achter de melding. */
body .woocommerce-message a.button,
body .woocommerce-info a.button {
  margin-left: auto;
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0 !important;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
body .woocommerce-message a.button:hover,
body .woocommerce-info a.button:hover {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
}
body .woocommerce-message a.button::after,
body .woocommerce-info a.button::after { display: none !important; }

@media (max-width: 600px) {
  body .woocommerce-message a.button,
  body .woocommerce-info a.button { margin-left: 0; width: 100%; text-align: center; }
}
/* Het icoontje links in het blok van WooCommerce past niet in dit ontwerp. */
.wc-block-components-notice-banner > svg { display: none !important; }
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before { display: none !important; }

/* Een foutmelding mag wel opvallen, maar niet schreeuwen. */
body .woocommerce-error,
body .wc-block-components-notice-banner.is-error {
  background: #FBF3F3 !important;
  border-left-color: var(--accent) !important;
}

/* ── Akkoordvinkje bij het afrekenen ────────────────────────── */
.woocommerce-terms-and-conditions-wrapper,
.wc-block-checkout__terms {
  margin: 1.25rem 0;
  font-size: .9375rem;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.wc-block-checkout__terms label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.wc-block-checkout__terms input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--text);
  cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper a,
.wc-block-checkout__terms a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }


/* Zwevende meldingen ("snackbars") van WooCommerce Blocks. Die verschijnen
   links in beeld en vielen daar over de kop "Betalingsopties" heen. Nu
   onderaan gecentreerd, waar ze niets overlappen en toch opvallen. */
.wc-block-components-notice-snackbar-list,
.wc-block-components-snackbar-list {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  top: auto !important;
  transform: translateX(-50%);
  z-index: 99997;
  width: min(560px, calc(100vw - 32px));
  padding: 0 !important;
}
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner,
.wc-block-components-snackbar-list .wc-block-components-notice-banner {
  margin: 0 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.16) !important;
}

@media (max-width: 767px) {
  .wc-block-components-notice-snackbar-list,
  .wc-block-components-snackbar-list { bottom: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   POSTNL-BEZORGOPTIES OP DE AFREKENPAGINA

   De plugin komt met PostNL-oranje tabbladen, een lichtblauwe selectie
   en opsommingstekens voor elke bezorgtijd. Hieronder in de merkkleuren,
   met dezelfde randen en witruimte als de rest van het afrekenen.
   ═══════════════════════════════════════════════════════════════════ */

.postnl_checkout_container {
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
}

/* Geen opsommingstekens: het zijn keuzelijsten, geen tekst. */
.postnl_checkout_container ul,
.postnl_checkout_container ol,
.postnl_checkout_container li,
.postnl_list,
.postnl_sub_list {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.postnl_checkout_container li::marker { content: none !important; }

/* ── Tabbladen ─────────────────────────────────────────────── */

.postnl_checkout_tab_list {
  display: flex !important;
  gap: .375rem;
  margin: 0 0 -1px !important;
  padding: 0 !important;
}

.postnl_checkout_tab {
  background: var(--bg-alt) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0;
  padding: .7rem 1.1rem !important;
  font-size: .8125rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.postnl_checkout_tab_list li.active .postnl_checkout_tab,
.postnl_checkout_tab.active {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  border-color: var(--accent) !important;
}

.postnl_checkout_tab:hover { color: var(--text) !important; }
.postnl_checkout_tab_list li.active .postnl_checkout_tab:hover { color: var(--accent-on) !important; }

/* ── De lijst met dagen en punten ───────────────────────────── */

.postnl_checkout_content_container {
  border: 1px solid var(--border);
  border-radius: 0 4px 4px 4px;
  overflow: hidden;
}

.postnl_checkout_container .list_title {
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  padding: .7rem 1rem !important;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.postnl_checkout_container .postnl_list > li:first-child .list_title { border-top: none; }

.postnl_checkout_container .postnl_sub_list li {
  padding: .1rem 1rem !important;
  border-top: 1px solid var(--border);
}
.postnl_checkout_container .postnl_sub_list li:first-child { border-top: none; }

/* De gekozen optie: crème met een bordeaux streep, geen systeemblauw. */
.postnl_checkout_container .postnl_sub_list li:has(input:checked) {
  background: var(--bg-alt) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

.postnl_checkout_container input[type="radio"] { accent-color: var(--accent); }

.postnl_checkout_container label {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 0;
  cursor: pointer;
  font-size: .875rem;
  color: var(--text);
  width: 100%;
}

/* Aanduidingen als "Ochtend" en "Avond" rechts uitlijnen. */
.postnl_checkout_container .postnl_sub_list li label > span:last-child:not(:only-child) {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .8125rem;
  letter-spacing: .04em;
}

/* Afstand tot een afhaalpunt. */
.postnl_checkout_container .list_title span:last-child:not(:only-child) {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Vingervriendelijk op een telefoon. */
@media (max-width: 767px) {
  .postnl_checkout_container label { padding: .75rem 0; min-height: 44px; }
  .postnl_checkout_tab { padding: .65rem .8rem !important; font-size: .75rem; }
}

/* ── De gekozen bezorging op de bedankpagina ────────────────── */

.sr-bezorgkeuze {
  margin: 2rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
}
.sr-bezorgkeuze h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 .4rem;
  color: var(--text);
}
.sr-bezorgkeuze p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text); }

/* Het huisnummer staat dankzij PostNL al in de straat. WooCommerce herhaalt
   het eronder als los veldje ("Huisnummer 31"). In de bestelmail is dat met
   een filter opgelost; op de bevestigingspagina biedt WooCommerce daar geen
   haakje voor, vandaar hier. Let op: komt er ooit een tweede extra
   afrekenveld bij, dan verdwijnt dat hier ook. */
.woocommerce-order .wc-block-components-additional-fields-list,
.wc-block-order-confirmation-billing-address .wc-block-components-additional-fields-list,
.wc-block-order-confirmation-shipping-address .wc-block-components-additional-fields-list {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   LEESBAARHEID NA DE OVERSTAP NAAR CORMORANT (01-09-2026)

   De lopende tekst stond in Jost en is nu Cormorant Garamond. Beide op
   dezelfde pixelmaat zetten werkt niet: gemeten op deze site is de
   x-hoogte van Jost 46 en die van Cormorant 39 (bij 100px). Cormorant
   oogt daardoor zo'n 18% kleiner en een stuk dunner, precies in de maten
   waar het het meest telt: 13 en 14 pixels in het menu en de footer.

   `font-size-adjust` lost dat bij de bron op. De browser schaalt de letter
   zo dat de x-hoogte uitkomt op de opgegeven verhouding, hier 0,46: die van
   Jost. De opgeschreven maten in de stylesheets blijven dus staan en houden
   hun onderlinge verhouding; alleen de optische grootte klopt weer.

   De koppen zetten hem weer uit. Die stonden altijd al in Cormorant en zijn
   op dat lettertype ontworpen; meeschalen zou ze 18% groter maken dan bedoeld.
   ═══════════════════════════════════════════════════════════════════ */

body {
  font-size-adjust: ex-height 0.46;
}

h1, h2, h3, h4, h5, h6,
.sr-kaart__naam,
.sr-logo,
.et_pb_slide_title,
.sr-hero__titel,
[class*="__kop"] h1, [class*="__kop"] h2, [class*="__kop"] h3,
[class*="__titel"] {
  font-size-adjust: none;
}

/* Cormorant is niet alleen kleiner maar ook lichter dan Jost. Op de kleine
   maten valt de tekst anders weg tegen de achtergrond. */
body,
p, li, dd, dt, td, th,
label, input, textarea, select {
  font-weight: 400;
}

/* Kleine caps met veel letterspatiëring: in een serif lopen die sneller vol,
   dus iets meer lucht ertussen. */
.sr-utilbar,
.sr-label,
[class*="__label"],
.sr-kaart__inhoud {
  letter-spacing: 0.16em;
}

/* Losse lettertypes die in de pagina-inhoud zijn blijven staan.

   In de home-inhoud staan een paar spans met een eigen `font-family` in het
   style-attribuut: tweemaal Jost (de prijs en "17 gram", met Divi's eigen
   stack erachter) en eenmaal Abhaya Libre, een lettertype dat verder nergens
   in het ontwerp voorkomt en dat Divi daarom apart moest inladen. Die komen
   uit bewerkingen in de editor.

   Een style-attribuut wint van elke gewone regel, dus dit kan alleen met
   !important. Weghalen bij de bron is netter; dat kan zodra duidelijk is dat
   niemand die opmaak bewust heeft aangebracht. */
.et_pb_text_inner span[style*="font-family"],
.sr-kaart__naam span[style*="font-family"],
h1 span[style*="font-family"],
h2 span[style*="font-family"],
h3 span[style*="font-family"] {
  font-family: var(--font-body) !important;
}

/* Cijfers op gelijke hoogte, vooral bij bedragen.

   Cormorant zet standaard oudstijl-cijfers: de 3, 4, 5, 7 en 9 hangen onder
   de regel en de 0, 1 en 2 zijn lager dan de rest. Mooi in lopende tekst,
   maar in een prijs leest "€ 4,95" daardoor trager, en in een tabel met
   bedragen lopen de kolommen optisch niet gelijk. Jost had dit niet, dus dit
   speelde pas na de overstap.

   `lining-nums` zet ze op één hoogte, `tabular-nums` geeft ze allemaal
   dezelfde breedte zodat bedragen onder elkaar uitlijnen. */
.woocommerce-Price-amount,
.amount,
.price,
.sr-prijs,
[class*="__prijs"],
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount,
td, th,
input[type="number"], input[type="tel"],
.sr-kaart__naam span[style*="font-family"] {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* In de bestelling en op de bevestiging staan de bedragen in kolommen. */
.woocommerce-table,
.woocommerce-orders-table,
.wc-block-components-order-summary,
.sr-bezorgkeuze {
  font-variant-numeric: lining-nums tabular-nums;
}

/* Ook in kleine caps met een bedrag erin, zoals de balk bovenaan
   ("GRATIS VERZENDING VANAF € 50"): daar viel de 5 onder de regel terwijl
   de letters ernaast allemaal kapitalen zijn. */
.sr-utilbar,
.sr-utilbar *,
.sr-label,
[class*="__label"] {
  font-variant-numeric: lining-nums;
}