/**
 * Marie Ann It Is - reskin van de generieke sf-* library-blokken.
 *
 * De library-blokken zijn dark-tech (salesfision-ai default: #000/#111).
 * Deze site-eigen laag (NIET whitelisted, overleeft updates) trekt ze naar
 * de marieannitis-look: licht, elegant, natuurlijk. Tokens: primary #dc4c9b,
 * accent #FF7A7A, donker #2C2C2C, zachte tint #faf7f9.
 */

/* ── Gedeelde tinten ───────────────────────────────────────────────────── */
:root {
  --mai-rose: #faf7f9;
  --mai-ink: #2c2c2c;
}

/* ── sf-cta (aankondigingsbalk + Beauty Deal) ─────────────────────────── */
[data-sf-block="sf-cta"] {
  --sf-cta-bg: var(--mai-rose);
}

[data-sf-block="sf-cta"] .cta-section,
[data-sf-block="sf-cta"] section {
  background: var(--mai-rose);
}

/* !important: het blok zet de kleur met een specifiekere card-selector. */
[data-sf-block="sf-cta"] h1,
[data-sf-block="sf-cta"] h2,
[data-sf-block="sf-cta"] h3 {
  color: var(--mai-ink) !important;
  font-family: var(--sf-font-heading, inherit);
}

[data-sf-block="sf-cta"] p,
[data-sf-block="sf-cta"] li {
  color: rgba(44, 44, 44, 0.75);
}

[data-sf-block="sf-cta"] .cta-card {
  background: #fff;
  border: 1px solid rgba(220, 76, 155, 0.18);
  box-shadow: 0 4px 18px rgba(220, 76, 155, 0.08);
}

[data-sf-block="sf-cta"] .btn-primary {
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

[data-sf-block="sf-cta"] .btn-outline {
  border-color: var(--sf-color-primary, #dc4c9b);
  color: var(--sf-color-primary, #dc4c9b);
}

/* ── sf-blog-posts ─────────────────────────────────────────────────────── */
[data-sf-block="sf-blog-posts"] {
  --sf-blog-bg: #ffffff;
  --sf-blog-card-bg: #ffffff;         /* kaart-body was #161616 (zwart, dark-theme) */
  --sf-blog-border: rgba(0, 0, 0, 0.08);
  --sf-blog-accent: var(--sf-color-primary, #dc4c9b);   /* was rood #e63946 → merk-roze (o.a. "See more"-knop) */
}

/* Categorie-label roze in de stijl van de knoppen (radius ~5px, geen ronde pil). */
[data-sf-block="sf-blog-posts"] .blog-tag {
  background: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 0.28rem 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Nette, consistente kaart-spacing: vaste beeldhoogte + gelijkmatige tussenruimtes. */
[data-sf-block="sf-blog-posts"] .usecase-card-img { height: 210px; }
[data-sf-block="sf-blog-posts"] .usecase-card-img img { width: 100%; height: 100%; object-fit: cover; }
[data-sf-block="sf-blog-posts"] .usecase-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.3rem 1.4rem 1.5rem;
}
[data-sf-block="sf-blog-posts"] .usecase-card-body h3 {
  margin: 0;
  line-height: 1.35;
  font-size: 1.05rem;
}

[data-sf-block="sf-blog-posts"] section {
  background: #ffffff;
}

[data-sf-block="sf-blog-posts"] h2,
[data-sf-block="sf-blog-posts"] h3,
[data-sf-block="sf-blog-posts"] .blog-card h3 a {
  color: var(--mai-ink);
  font-family: var(--sf-font-heading, inherit);
}

[data-sf-block="sf-blog-posts"] p {
  color: rgba(44, 44, 44, 0.75);
}

[data-sf-block="sf-blog-posts"] .blog-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── sf-testimonials (reviews) ─────────────────────────────────────────── */
[data-sf-block="sf-testimonials"] {
  --sf-testimonials-bg: var(--mai-rose);
  --sf-accent: var(--sf-color-primary, #dc4c9b);
}

[data-sf-block="sf-testimonials"] section {
  background: var(--mai-rose);
}

[data-sf-block="sf-testimonials"] h2,
[data-sf-block="sf-testimonials"] h3,
[data-sf-block="sf-testimonials"] .testimonial-author {
  color: var(--mai-ink);
  font-family: var(--sf-font-heading, inherit);
}

[data-sf-block="sf-testimonials"] p,
[data-sf-block="sf-testimonials"] blockquote {
  color: rgba(44, 44, 44, 0.8);
}

[data-sf-block="sf-testimonials"] .testimonial-card,
[data-sf-block="sf-testimonials"] .t-card {
  background: #fff;
  border: 1px solid rgba(220, 76, 155, 0.14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ── sf-hero: lichtroze carousel zoals live (JS wisselt titel + achtergrond) ── */
[data-sf-block="sf-hero"] .page-hero {
  background: #fad4e4;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* tekst links, zoals live (model zit rechts in de bg) */
  justify-content: center;
  text-align: left;
  padding: 90px clamp(24px, 11vw, 170px);
  overflow: hidden;
}

/* Achtergrond-crossfade: twee lagen die soepel over elkaar faden i.p.v. een
 * harde swap (voorheen faadde de hele hero half weg → knipperde). */
[data-sf-block="sf-hero"] .page-hero { position: relative; }
[data-sf-block="sf-hero"] .mai-hero-bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.9s ease;
}
[data-sf-block="sf-hero"] .mai-hero-bg.is-active {
  opacity: 1;
  z-index: 1;
}

/* Content boven de achtergrondlagen. */
[data-sf-block="sf-hero"] .page-hero .section-badge,
[data-sf-block="sf-hero"] .page-hero h1,
[data-sf-block="sf-hero"] .page-hero p,
[data-sf-block="sf-hero"] .page-hero .page-hero__actions {
  position: relative;
  z-index: 2;
}

/* Titel faadt mee tijdens de wissel. */
[data-sf-block="sf-hero"] .page-hero h1 { transition: opacity 0.4s ease; }
[data-sf-block="sf-hero"] .page-hero h1.mai-fade { opacity: 0; }

/* Slider-stipjes onderaan het midden (zoals live). */
[data-sf-block="sf-hero"] .mai-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}
[data-sf-block="sf-hero"] .mai-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(220, 76, 155, 0.35);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
[data-sf-block="sf-hero"] .mai-hero-dot.is-active {
  background: var(--sf-color-primary, #dc4c9b);
  transform: scale(1.15);
}

[data-sf-block="sf-hero"] .page-hero h1 {
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-size: clamp(2.6rem, 5vw, 68px);
  font-weight: 600;
  color: #282828 !important;
  max-width: 20ch;
}

[data-sf-block="sf-hero"] .page-hero p {
  color: #575757 !important;
  max-width: 46ch;
  margin: 0 0 30px;     /* blok zet 'margin:0 auto' → dat centreert de p; links + ruimte vóór de knop */
}

[data-sf-block="sf-hero"] .page-hero .btn-primary {
  background: rgba(219, 116, 172, 0.83) !important;
  color: #fff !important;
  padding: 15px 36px;
  border-radius: 5px !important;
  border: none;
}

[data-sf-block="sf-hero"] .sf-hero,
[data-sf-block="sf-hero"] .service-page-hero {
  background: #fad4e4;
}

/* Service-hero (o.a. contactpagina): licht/roze i.p.v. dark-tech.
   Het blok legt een donkere .hero-overlay over de bg + witte/grijze tekst. */
[data-sf-block="sf-hero"] .service-page-hero {
  padding: 108px 24px 88px;
}

[data-sf-block="sf-hero"] .service-page-hero .hero-overlay {
  display: none;
}

[data-sf-block="sf-hero"] .service-page-hero h1 {
  color: #282828 !important;
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-weight: 600;
  letter-spacing: -0.5px;
}

[data-sf-block="sf-hero"] .service-page-hero p {
  color: #575757 !important;
}

[data-sf-block="sf-hero"] .service-page-hero .hero-cta {
  background: var(--sf-color-primary, #dc4c9b) !important;
  border-color: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 5px !important;
}

[data-sf-block="sf-hero"] h1 {
  font-family: var(--sf-font-heading, inherit);
}

/* Beauty Deal: zie de sectie "Beauty Deal" onderaan dit bestand. */

/* ── sf-product-grid: live look (Cormorant titels, zachtroze knoppen) ──── */
[data-sf-block="sf-product-grid"] .sf-pg-header h2,
[data-sf-block="sf-product-grid"] .sf-pg-card-title {
  color: var(--mai-ink);
  font-family: var(--sf-font-heading, Cormorant, serif);
}

[data-sf-block="sf-product-grid"] .sf-pg-heading-img {
  max-width: min(100%, 620px);
}

[data-sf-block="sf-product-grid"] .sf-pg-btn {
  background: #f5b8d5;
  color: #fff;
}

[data-sf-block="sf-product-grid"] .sf-pg-price {
  color: var(--mai-ink);
  font-weight: 700;
}

/* ── sf-service-teaser: licht i.p.v. dark-tech ─────────────────────────── */
[data-sf-block="sf-service-teaser"],
[data-sf-block="sf-service-teaser"] section,
[data-sf-block="sf-service-teaser"] .service-teaser {
  background: #ffffff;
}

[data-sf-block="sf-service-teaser"] h2,
[data-sf-block="sf-service-teaser"] h3 {
  color: var(--mai-ink) !important;
}

[data-sf-block="sf-service-teaser"] p,
[data-sf-block="sf-service-teaser"] li {
  color: rgba(44, 44, 44, 0.78);
}

[data-sf-block="sf-service-teaser"] .btn-primary,
[data-sf-block="sf-service-teaser"] a.btn-primary {
  background: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
}

/* ── Live Talks + SALE: knop-zichtbaarheid + strakkere layout ──────────────
 * Het blok is dark-tech: .see-more is wit-op-transparant (onzichtbaar op onze
 * lichte achtergrond) en .feature-row heeft gap:100px + padding:160px (groot
 * leeg gat, oogt niet gecentreerd). Site-side gecorrigeerd naar de live-look.
 */

/* SALE-knop ("Never before prices"): zichtbaar roze i.p.v. wit-op-wit. */
#sale-faya .feature-text .see-more {
  background: var(--sf-color-primary, #dc4c9b);
  border: 1px solid var(--sf-color-primary, #dc4c9b);
  color: #fff;
  border-radius: 4px;            /* designregel: 3–5px, geen pill */
}
#sale-faya .feature-text .see-more::after { content: none; }   /* live-knop heeft geen pijl */
#sale-faya .feature-text .see-more:hover {
  background: #c43d88;
  border-color: #c43d88;
  color: #fff;
  box-shadow: 0 6px 20px rgba(220, 76, 155, 0.22);
  transform: translateY(-2px);
}

/* Live Talks en de Over-intro hebben op live GEEN knop; het blok rendert altijd
 * een knop en valt bij een leeg veld terug op de default "See more" → /service/
 * (bestaat niet, 404 — ook op live). Verbergen; de link_url in de content-JSON
 * wijst naar de sectie zelf zodat er geen dode link in de HTML blijft staan. */
#live-talks .feature-text .see-more,
#about-marie-ann .feature-text .see-more { display: none; }

/* Live Talks + SALE: één identieke twee-koloms layout zodat beide secties even
 * breed ogen en op dezelfde buitenlijnen uitlijnen (zelfde container + marges,
 * space-between houdt de kolommen tegen dezelfde linker-/rechterrand). */
#live-talks .feature-row,
#sale-faya .feature-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 40px;
  gap: 56px;
  align-items: center;
  justify-content: space-between;
}
#live-talks .feature-img  { flex: 0 0 42% !important; overflow: visible; }
/* MockUp.png is vierkant met veel transparante rand → telefoon oogt klein.
 * Beeld wat opschalen (marges lopen onzichtbaar over) zodat de telefoon groter is. */
#live-talks .feature-img img { width: 128% !important; max-width: none !important; }
#live-talks .feature-text { flex: 0 0 48% !important; }
#sale-faya  .feature-text { flex: 0 0 42% !important; }
/* De SALE-PNG heeft het blaadje + witruimte rechts ingebakken: kolombreedte =
 * het grijze kader; de PNG loopt links-uitgelijnd rechts over zodat het blaadje
 * uitsteekt zonder mee te tellen. */
#sale-faya  .feature-img  { flex: 0 0 48% !important; overflow: visible; justify-content: flex-start; }
#sale-faya  .feature-img img { width: 124% !important; max-width: none !important; display: block; }

/* Live talks: kop als script-PNG (homepage + About; zelfde asset als live). */
#live-talks h2 {
  font-size: 0;
  line-height: 0;
}

#live-talks h2::before {
  content: url('/wp-content/uploads/2025/02/v3.png');
  display: inline-block;
  max-width: 320px;
}

/* About: de lege subheading valt terug op de block-default "Your tagline
   here." -> verbergen (Live Talks heeft geen quote-regel). */
.page-id-156 #live-talks .feature-sub {
  display: none;
}

/* Our Blog: kop als script-PNG */
[data-sf-block="sf-blog-posts"] .blog-header h2,
[data-sf-block="sf-blog-posts"] h2 {
  font-size: 0;
  line-height: 0;
}

[data-sf-block="sf-blog-posts"] h2::before {
  content: url('/wp-content/uploads/2025/02/v6.png');
  display: inline-block;
  max-width: 300px;
}

/* Traditie-sectie: groene TIPS-eyebrow zoals live */
#traditie .sf-st-badge {
  color: #8bc34a !important;
}

/* ── sf-faq: licht, zachte roze kaarten ────────────────────────────────── */
/* !important: het blok zet .faq-section op #0d0d0d (dark-tech default). */
[data-sf-block="sf-faq"] .faq-section,
[data-sf-block="sf-faq"] section {
  background: #ffffff !important;
}

[data-sf-block="sf-faq"] details,
[data-sf-block="sf-faq"] .faq-item {
  background: #fdf0f5 !important;
  border: none;
  border-radius: 8px;
}

[data-sf-block="sf-faq"] summary,
[data-sf-block="sf-faq"] h2,
[data-sf-block="sf-faq"] h3 {
  color: var(--mai-ink) !important;
}

[data-sf-block="sf-faq"] p,
[data-sf-block="sf-faq"] details div {
  color: rgba(44, 44, 44, 0.78) !important;
}

/* ── sf-testimonials: grote Cormorant-kop zoals live ───────────────────── */
[data-sf-block="sf-testimonials"] h2 {
  font-size: clamp(1.9rem, 3.2vw, 44px);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── sf-cases-grid (Personal Gallery): zachtroze bg + groene actieve filter ── */
[data-sf-block="sf-cases-grid"] section,
[data-sf-block="sf-cases-grid"] .cases-section {
  background: #fdeef1;
}

[data-sf-block="sf-cases-grid"] .filter-pill {
  background: #fff !important;
  color: #080808 !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 8px 20px !important;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 16px;
  box-shadow: 0 8px 16px rgba(156, 156, 156, 0.08);
}

[data-sf-block="sf-cases-grid"] .filter-pill.active {
  background: rgba(64, 181, 57, 0.49) !important;
  color: #fff !important;
}

/* overlay-tiles als schone fotokaarten (geen donkere hover-tekst nodig) */
[data-sf-block="sf-cases-grid"] .case-tile {
  border-radius: 8px;
}

/* ── sf-feature-grid (pijlers) ─────────────────────────────────────────── */
[data-sf-block="sf-feature-grid"] .features-section {
  background: #ffffff;
}

[data-sf-block="sf-feature-grid"] .feature-card {
  background: var(--mai-rose);
  border: 1px solid rgba(220, 76, 155, 0.14);
}

/* Icoontjes uniform: roze lijn-SVG's (stroke=currentColor uit sf_feature_icon). */
[data-sf-block="sf-feature-grid"] .feature-card .f-icon {
  color: var(--sf-color-primary, #dc4c9b);
  line-height: 0;
}

[data-sf-block="sf-feature-grid"] .feature-card .f-icon svg {
  width: 34px;
  height: 34px;
}

/* ── sf-values (About > "Onze business motivatie"): licht + roze lijn-iconen ─ */
/* Blok is dark-tech (#111/#161616 met witte tekst) → onleesbaar. Trek licht +
   dezelfde roze lijn-iconen als de contactpagina. */
[data-sf-block="sf-values"] .values-section {
  background: var(--mai-rose);
  padding: 80px 40px;
}

/* Kop + kaarten centreren i.p.v. tegen de linkerrand (zoals live). */
[data-sf-block="sf-values"] .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

[data-sf-block="sf-values"] .section-title {
  text-align: center;
  margin-bottom: 64px;
}

[data-sf-block="sf-values"] .section-title .section-badge {
  color: var(--sf-color-primary, #dc4c9b) !important;
}

[data-sf-block="sf-values"] .section-title h2 {
  color: var(--mai-ink);
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 12px;
}

[data-sf-block="sf-values"] .section-title p {
  color: rgba(44, 44, 44, 0.65);
  font-size: 16px;
}

[data-sf-block="sf-values"] .value-card {
  background: var(--mai-rose);
  border: 1px solid rgba(220, 76, 155, 0.14);
}

[data-sf-block="sf-values"] .value-card:hover {
  border-color: rgba(220, 76, 155, 0.3);
}

/* Icoon: roze lijn-SVG boven de titel (zelfde stijl als contact .f-icon). */
[data-sf-block="sf-values"] .value-card .val-icon {
  color: var(--sf-color-primary, #dc4c9b);
  line-height: 0;
  margin-bottom: 16px;
}

[data-sf-block="sf-values"] .value-card .val-icon svg {
  width: 34px;
  height: 34px;
}

[data-sf-block="sf-values"] .value-card h3 {
  color: var(--mai-ink);
}

[data-sf-block="sf-values"] .value-card p {
  color: rgba(44, 44, 44, 0.7);
}

[data-sf-block="sf-feature-grid"] .features-section h2,
[data-sf-block="sf-feature-grid"] .feature-card h3 {
  color: var(--mai-ink);
  font-family: var(--sf-font-heading, inherit);
}

[data-sf-block="sf-feature-grid"] .features-section > p,
[data-sf-block="sf-feature-grid"] .features-inner > p,
[data-sf-block="sf-feature-grid"] .feature-card p {
  color: rgba(44, 44, 44, 0.75);
}

/* ── sf-cases-grid (galerij) ───────────────────────────────────────────── */
/* Het blok kleurt de <span> in de kop met de accent (roze) → override naar zwart. */
[data-sf-block="sf-cases-grid"] h2,
[data-sf-block="sf-cases-grid"] h2 span {
  color: #1a1a1a !important;
  font-family: var(--sf-font-heading, inherit);
}

/* ── sf-faq / sf-values / sf-service-teaser: koppen in Cormorant ───────── */
[data-sf-block="sf-faq"] h2,
[data-sf-block="sf-faq"] h3,
[data-sf-block="sf-values"] h2,
[data-sf-block="sf-values"] h3,
[data-sf-block="sf-service-teaser"] h2,
[data-sf-block="sf-service-teaser"] h3,
[data-sf-block="sf-contact-details"] h2,
[data-sf-block="sf-map"] h2 {
  font-family: var(--sf-font-heading, inherit);
}

/* ── sf-contact-details + sf-map: licht i.p.v. donker ──────────────────── */
[data-sf-block="sf-contact-details"],
[data-sf-block="sf-contact-details"] section,
[data-sf-block="sf-contact-details"] .contact-section,
[data-sf-block="sf-map"],
[data-sf-block="sf-map"] section,
[data-sf-block="sf-map"] .map-section {
  background: #ffffff;
}

/* Openingstijden: uren als zachtroze tabel (stapel) zoals live i.p.v. de
   donkere 3-koloms grid met onzichtbare tekst. */
[data-sf-block="sf-map"] .map-inner h2 {
  color: var(--mai-ink) !important;
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-weight: 600;
}

[data-sf-block="sf-map"] .hours-grid {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 32px auto 0;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
}

[data-sf-block="sf-map"] .hours-item {
  background: #ecb8d3;
  padding: 15px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

[data-sf-block="sf-map"] .hours-item h4,
[data-sf-block="sf-map"] .hours-item p {
  color: #fff !important;
  margin: 0 !important;
  font-size: 15px;
}

[data-sf-block="sf-contact-details"] h1,
[data-sf-block="sf-contact-details"] h2,
[data-sf-block="sf-contact-details"] h3,
[data-sf-block="sf-contact-details"] h4,
[data-sf-block="sf-map"] h2,
[data-sf-block="sf-map"] h3 {
  color: var(--mai-ink) !important;
}

[data-sf-block="sf-contact-details"] p,
[data-sf-block="sf-contact-details"] li,
[data-sf-block="sf-contact-details"] a,
[data-sf-block="sf-contact-details"] label,
[data-sf-block="sf-contact-details"] td,
[data-sf-block="sf-contact-details"] th,
[data-sf-block="sf-map"] p,
[data-sf-block="sf-map"] td,
[data-sf-block="sf-map"] th {
  color: rgba(44, 44, 44, 0.8);
}

/* Formuliertitel in serif zoals live. */
[data-sf-block="sf-contact-details"] .contact-form h3 {
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--mai-ink);
}

/* Formulier-kaart: één schone witte kaart (geen dubbele rand). */
[data-sf-block="sf-contact-details"] .contact-form,
[data-sf-block="sf-contact-details"] .contact-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(220, 76, 155, 0.06);
  padding: 40px 36px;
}

/* Het <form> zelf krijgt géén eigen rand/achtergrond (was het lelijke kader). */
[data-sf-block="sf-contact-details"] .contact-form form {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Live gebruikt alleen placeholders, geen bovenlabels. */
[data-sf-block="sf-contact-details"] .form-group label {
  display: none;
}

/* Velden als strakke onderlijn i.p.v. box. */
[data-sf-block="sf-contact-details"] .form-group input,
[data-sf-block="sf-contact-details"] .form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 0;
  padding: 10px 2px;
  color: var(--mai-ink);
}

[data-sf-block="sf-contact-details"] .form-group input::placeholder,
[data-sf-block="sf-contact-details"] .form-group textarea::placeholder {
  color: rgba(44, 44, 44, 0.5);
}

[data-sf-block="sf-contact-details"] .form-group input:focus,
[data-sf-block="sf-contact-details"] .form-group textarea:focus {
  border-bottom-color: var(--sf-color-primary, #dc4c9b);
}

/* Math-captcha weg: de Forms+ (js) submit gebruikt het honeypot-spamfilter. */
[data-sf-block="sf-contact-details"] .captcha-row {
  display: none;
}

/* Live-formulier heeft geen bedrijfsveld; blok kent geen toggle ervoor. */
[data-sf-block="sf-contact-details"] div:has(> input[name="sf_company"]),
[data-sf-block="sf-contact-details"] div:has(> input[name="company"]) {
  display: none;
}

/* Verzendknop: roze, auto-breedte, rechts uitgelijnd zoals live. */
[data-sf-block="sf-contact-details"] .btn-submit,
[data-sf-block="sf-contact-details"] button[type="submit"],
[data-sf-block="sf-contact-details"] input[type="submit"],
[data-sf-block="sf-contact-details"] .btn-primary {
  width: auto;
  align-self: flex-end;
  background: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 14px 44px !important;
}

/* ── Section-badges: géén pil, ingetogen eyebrow-label zoals live ──────── */
/* !important: elk blok stylet zijn eigen pil (bg/border/padding/radius). */
.section-badge,
[data-sf-block] .section-badge,
[data-sf-block] .sf-st-badge,
[data-sf-block] .service-hero-badge {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--sf-color-primary, #dc4c9b) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ══ Site-chrome: actiebalk + header + footer (zie includes/site-chrome.php) ══ */

.mai-bulletin {
  background: #d33b19;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
}

.mai-bulletin p {
  margin: 0;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

/* style.css verbergt body > header/footer met !important bij sf-hide-chrome;
   de eigen chrome moet juist wél renderen. */
body.sf-hide-chrome > header.mai-header,
body.sf-hide-chrome > footer.mai-footer {
  display: block !important;
}

.mai-header {
  background: #fad4e4;
  /*
   * Eigen stacking-context boven de pagina-inhoud. Zonder dit tekent de
   * zoom-knop van de WooCommerce-productgallery (z-index: 99) over de
   * uitklapmenu's heen (flyouts 60, mobiel paneel 70).
   */
  position: relative;
  z-index: 200;
}

.mai-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.mai-logo img {
  height: 95px;
  width: auto;
  display: block;
}

.mai-nav {
  margin-left: auto;
}

.mai-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mai-menu a {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: #2c2c2c;
  text-decoration: none;
}

.mai-menu a:hover {
  color: var(--sf-color-primary, #dc4c9b);
}

/* dropdown-pijltje op items met submenu (alleen niveau 1) */
.mai-menu > .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.mai-menu li {
  position: relative;
}

.mai-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 60;
  min-width: 240px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: none;
}

.mai-menu .sub-menu .sub-menu {
  top: -8px;
  left: 100%;
  max-height: 70vh;
  overflow-y: auto;
}

.mai-menu li:hover > .sub-menu {
  display: block;
}

.mai-menu .sub-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 15px;
  white-space: nowrap;
}

.mai-menu .sub-menu a:hover {
  background: #fdeef4;
}

.mai-cart {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #2c2c2c;
  text-decoration: none;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 15px;
  font-weight: 500;
}

.mai-burger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.mai-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #2c2c2c;
  margin: 5px 0;
}

@media (max-width: 900px) {
  .mai-logo img { height: 60px; }
  .mai-burger { display: block; margin-left: auto; }
  .mai-nav { display: none; margin-left: 0; }
  .mai-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    z-index: 70;
    padding: 12px 0;
  }
  .mai-menu { display: block; }
  .mai-menu > li > a { display: block; padding: 11px 24px; }
  /* mobiel: geen hover-flyouts; submenu's inline en ingekort */
  .mai-menu .sub-menu,
  .mai-menu li:hover > .sub-menu {
    display: block;
    position: static;
    box-shadow: none;
    padding: 0 0 0 16px;
    max-height: none;
    overflow: visible;
  }
  .mai-menu .sub-menu .sub-menu { display: none; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.mai-footer {
  background: linear-gradient(#fef2f4 88%, rgba(250, 212, 228, 0.75) 100%);
  font-family: var(--sf-font-body, Figtree, sans-serif);
}

.mai-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 70px 24px 0;
}

.mai-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.mai-footer-logo {
  height: 90px;
  width: auto;
}

.mai-newsletter h4 {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px;
}

.mai-newsletter form {
  display: flex;
  gap: 12px;
}

.mai-newsletter input {
  width: 320px;
  max-width: 60vw;
  padding: 13px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
}

.mai-newsletter button {
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.mai-newsletter button:hover {
  background: #c43d88;
}

.mai-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
}

.mai-footer-cols h4 {
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-size: 23px;
  font-weight: 500;
  color: #333;
  margin: 0 0 14px;
}

.mai-footer-cols p,
.mai-footer-cols li,
.mai-footer-cols a {
  font-size: 14px;
  line-height: 2;
  color: #71697e;
  text-decoration: none;
}

.mai-footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mai-footer-cols a:hover {
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-social {
  display: flex;
  gap: 10px;
}

.mai-social a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fad4e4;
  border-radius: 3px;
  color: #71697e;
}

.mai-social a:hover {
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 56px;
  padding: 20px 0;
}

.mai-footer-bottom p {
  margin: 0;
  font-size: 15px;
  color: #333;
}

.mai-footer-bottom a {
  color: #ff7a7a;
  text-decoration: none;
}

@media (max-width: 900px) {
  .mai-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ── Knoppen: match de live Divi-stijl (klein afgerond, geen pil) ──────── */
[data-sf-block] .btn-primary,
[data-sf-block] .btn-outline,
[data-sf-block] .sf-pg-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  border-radius: 5px !important;
}

/* ══ Tips-sectie: beeld links + kop/tekst/accordeon in de rechterkolom ═══════
 * Zoals de referentie. Traditie (sf-service-teaser) = beeld links + tekst rechts;
 * het losse FAQ-blok eronder wordt in dezelfde rechterkolom onder de tekst
 * getrokken. Groene icoontjes links + groene chevron rechts + eerste item open.
 * Gescoped op de home (er is maar één FAQ-blok op de voorpagina). */
#traditie .feature-row {
  max-width: 1180px;
  padding: 84px 90px;
  justify-content: space-between;
  gap: 40px;
  align-items: stretch;             /* tekstkolom even hoog als de foto - zie hieronder */
}
#traditie .feature-img  {
  flex: 0 1 500px !important;
  min-height: 0 !important;      /* blok forceert 520px + overflow:hidden → sneed de foto af */
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
  align-self: flex-start;        /* container mag niet meerekken met de rij, anders
                                    lijn je uit op lucht onder de foto i.p.v. de foto */
}
#traditie .feature-img img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: initial !important;   /* volledige foto, natuurlijke verhouding - geen crop */
}
/* Kolom als flex, zodat het accordeon met `margin-top:auto` naar de onderkant
 * zakt en dus gelijk eindigt met de foto ernaast - ook als de kop straks over
 * meer regels loopt of er een item bij komt. */
#traditie .feature-text {
  flex: 0 1 430px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* badge houdt zijn eigen breedte, geen volle balk */
}
/* ...maar kop en tekst wel over de volle kolombreedte, anders krimpen ze als
 * flex-item naar hun inhoud en breekt de kop op een andere plek af. */
#traditie .feature-text > h2,
#traditie .feature-text > p { width: 100%; }

/* Het accordeon wordt via JS in #traditie .feature-text (rechterkolom) gezet,
 * dus het vult daar gewoon de kolom - geen overlap-marge nodig. */
.home [data-sf-block="sf-faq"] { margin-top: 0; }
#traditie .feature-text > [data-sf-block="sf-faq"] {
  width: 100%;
  margin-top: auto;               /* duwt de labels naar de onderkant van de kolom */
}

.home [data-sf-block="sf-faq"] .faq-section { background: transparent !important; overflow: visible; }
.home [data-sf-block="sf-faq"] .section-inner {
  max-width: none;
  margin: 0;
  padding: 0;                     /* sluit aan onder de tekst */
}
/* Kop en labels staan er, de begeleidende alinea niet meer. Het blok rendert
 * beide <p>'s altijd; een leeg veld valt bovendien terug op de placeholder uit
 * block.json, vandaar de spatie in home.json plus deze regel. */
#traditie .feature-text > p { display: none; }   /* lege subkop + weggehaalde alinea */
.home [data-sf-block="sf-faq"] .section-title { display: none; }   /* lege titel weg */
.home [data-sf-block="sf-faq"] .faq-list { max-width: none; margin: 0; }

/* Onder 900px zet het blok .feature-row op flex-direction:column. De hoofdas is
 * dan verticaal, dus de flex-basis hierboven (500px voor het beeld, 430px voor
 * de tekst) telt daar als HOOGTE in plaats van breedte. Bij het beeld leverde
 * dat een container van 500px onder een foto van 209px op: ~291px wit tussen de
 * foto en de kop. Op telefoonformaat bepaalt de inhoud de hoogte. */
@media (max-width: 900px) {
  #traditie .feature-img,
  #traditie .feature-text { flex: 0 1 auto !important; }
}

/* Rij-layout: [icoon] titel .......... [chevron] */
.home [data-sf-block="sf-faq"] details.faq-item summary {
  justify-content: flex-start;
  gap: 14px;
}
/* Iconen komen UIT HET THEMA, niet uit uploads: op live staan ze in de
 * mediabibliotheek, maar geen enkele .dev-omgeving heeft ze (3x 404), dus een
 * /wp-content/uploads/-pad geeft overal een leeg vakje. Live: max-width 40px. */
.home [data-sf-block="sf-faq"] details.faq-item summary::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.home [data-sf-block="sf-faq"] details.faq-item:nth-of-type(1) summary::before {
  background-image: url(../img/Icons-06.png);   /* vijzel/kruiden */
}
.home [data-sf-block="sf-faq"] details.faq-item:nth-of-type(2) summary::before {
  background-image: url(../img/Icons-04.png);   /* druppel */
}
.home [data-sf-block="sf-faq"] details.faq-item:nth-of-type(3) summary::before {
  background-image: url(../img/Icons-08.png);   /* vinkje */
}

/* Kaart-achtergrond op de home wijkt af van de FAQ-pagina: live gebruikt hier
 * het warme bijna-wit #fff7f7 met radius 6, niet het roze #fdf0f5. */
.home [data-sf-block="sf-faq"] details.faq-item {
  background: #fff7f7 !important;
  border-radius: 6px;
}

/* Titel in Cormorant zoals live (.faq_question_title = 600 / 24 / 28); de
 * generieke Cormorant-regel pakt alleen h2/h3 en de summary heeft een span. */
.home [data-sf-block="sf-faq"] details.faq-item summary > span {
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #080808 !important;
}

/* "+"-chevron → groene ronde chevron (▾ dicht / ▴ open), geen +/×-rotatie.
 * Kleur en maat van live: de Divi-glyph is een cirkel in rgba(64,181,57,.49)
 * op 24px, niet ons volle #7cc36a op 28px. */
.home [data-sf-block="sf-faq"] .faq-chev {
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: rgba(64, 181, 57, 0.49) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0 !important;
  transform: none !important;
}
.home [data-sf-block="sf-faq"] .faq-chev::after {
  content: "\25BE";              /* ▾ */
  font-size: 13px;
  line-height: 1;
  color: #fff;
}
/* background hier óók zetten: de generieke [open]-regel verderop maakt de
 * chevron anders merk-roze zodra een kaart openstaat. */
.home [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev {
  background: rgba(64, 181, 57, 0.49) !important;
  border: none !important;
  transform: none !important;
}
.home [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev::after {
  content: "\25B4";             /* ▴ */
}

/* ══ Knop-standaard: alle knoppen consistent ════════════════════════════════
 * Er waren 3 verschillende roze-tinten (hero doorschijnend, product-grid licht
 * #f5b8d5, rest #dc4c9b) en wisselende radii. Alles nu gelijk: solide merk-roze,
 * witte tekst, radius 5px, nette hover. WooCommerce-knoppen (shop/product) borgen
 * we op dezelfde stijl. */
[data-sf-block] .btn-primary,
[data-sf-block] a.btn-primary,
[data-sf-block="sf-hero"] .page-hero .btn-primary,
[data-sf-block="sf-product-grid"] .sf-pg-btn,
#sale-faya .feature-text .see-more,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit {
  background: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-weight: 600;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
[data-sf-block] .btn-primary:hover,
[data-sf-block] a.btn-primary:hover,
[data-sf-block="sf-hero"] .page-hero .btn-primary:hover,
[data-sf-block="sf-product-grid"] .sf-pg-btn:hover,
#sale-faya .feature-text .see-more:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
  background: #c43d88 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(220, 76, 155, .25);
  transform: translateY(-1px);
}

/* Traditie: default "See more" → /service/ (404) verbergen (net als Live Talks). */
#traditie .feature-text .see-more { display: none !important; }

/* ══ Blogpagina (posts-index): kop + subscribers-band, zoals live ═══════════
 * Kaarten gebruiken de sf-blog-posts-markup, dus die erven de homepage-stijl.
 * Alleen de pagina-kop en de subscribers-band stylen we hier. */
.mai-blog-page { background: #fff; }
.mai-blog-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 8px;
  text-align: center;
}
.mai-blog-eyebrow {
  display: block;
  color: var(--sf-color-primary, #dc4c9b);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mai-blog-head h1 {
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 52px);
  color: var(--mai-ink);
  margin: 0 0 12px;
  line-height: 1.1;
}
.mai-blog-head p { color: rgba(44, 44, 44, .7); font-size: 17px; margin: 0; }
.mai-blog-list .usecases-section { padding: 32px 24px 72px; }
.mai-blog-empty { text-align: center; color: rgba(44, 44, 44, .7); padding: 40px 0; }

/* Subscribers-band (palm-achtergrond, zoals live). */
.mai-subscribe { background-size: cover; background-position: center; padding: 96px 24px; }
.mai-subscribe-inner { max-width: 720px; margin: 0 auto; text-align: center; color: #fff; }
.mai-sub-eyebrow {
  display: block; color: #fff; font-weight: 700; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px;
}
.mai-subscribe h2 {
  font-family: var(--sf-font-heading, Cormorant, serif);
  font-weight: 600; font-size: clamp(2rem, 4vw, 46px); color: #fff; margin: 0 0 12px;
}
.mai-subscribe p { color: rgba(255, 255, 255, .9); margin: 0 0 28px; }
.mai-sub-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mai-sub-form input {
  flex: 1 1 220px; max-width: 260px; padding: 14px 18px; border: none;
  border-radius: 5px; background: #fff; color: #2c2c2c; font-size: 15px;
}
.mai-sub-form .btn-primary {
  background: var(--sf-color-primary, #dc4c9b) !important; color: #fff !important;
  border: none !important; border-radius: 5px !important; padding: 14px 28px;
  font-weight: 600; cursor: pointer; transition: background .25s ease;
}
.mai-sub-form .btn-primary:hover { background: #c43d88 !important; }

/* Blogpagina is kort: haal de min-height van #content weg zodat de footer
 * direct onder de subscribers-band komt (geen wit gat). */
#content:has(.mai-blog-page) { min-height: 0; }

/* Blogkaarten: duidelijke hover zodat zichtbaar is dat ze klikbaar zijn
 * (geldt op de homepage én de blogpagina; zelfde .usecase-card-markup). */
[data-sf-block="sf-blog-posts"] .usecase-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-sf-block="sf-blog-posts"] .usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(220, 76, 155, .16);
  border-color: rgba(220, 76, 155, .35);
}
[data-sf-block="sf-blog-posts"] .usecase-card .usecase-card-img { overflow: hidden; }
[data-sf-block="sf-blog-posts"] .usecase-card .usecase-card-img img { transition: transform .4s ease; }
[data-sf-block="sf-blog-posts"] .usecase-card:hover .usecase-card-img img { transform: scale(1.05); }

/* Personal Gallery: breed, maar iets ingesnoerd (niet helemaal rand-tot-rand). */
[data-sf-block="sf-cases-grid"] .cases-grid {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  gap: 12px;
}

/* ══ Faya Watra Guide-pagina (About > Faya watra guide) ═════════════════════ */
.mai-guide-page { background: #fff; }
.mai-page-head { max-width: 1200px; margin: 0 auto; padding: 64px 24px 8px; text-align: center; }
.mai-page-eyebrow {
  display: block; color: var(--sf-color-primary, #dc4c9b); font-weight: 700;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px;
}
.mai-page-head h1 {
  font-family: var(--sf-font-heading, Cormorant, serif); font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 52px); color: var(--mai-ink); margin: 0 0 12px; line-height: 1.1;
}
.mai-page-head p { color: rgba(44, 44, 44, .7); font-size: 17px; margin: 0 auto; max-width: 620px; }

/* "Wist je dat?"-accordeon: gecentreerde kop + roze eyebrow + roze chevron. */
.mai-guide-faq .section-inner { max-width: 900px; }
.mai-guide-faq .section-title { text-align: center; }
.mai-guide-faq .section-title .section-badge {
  color: var(--sf-color-primary, #dc4c9b) !important;
  background: none !important; border: none !important; letter-spacing: 1.5px; text-transform: uppercase;
}
.mai-guide-page [data-sf-block="sf-faq"] .faq-chev {
  background: rgba(220, 76, 155, .12) !important;
  border-color: rgba(220, 76, 155, .35) !important;
  color: var(--sf-color-primary, #dc4c9b) !important;
}
.mai-guide-page [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev {
  background: var(--sf-color-primary, #dc4c9b) !important;
  border-color: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
}

/* korte pagina: footer netjes laten aansluiten (geen min-height-gat) */
#content:has(.mai-guide-page) { min-height: 0; }

/* Guide-pagina: kit-foto's vierkant, net als overal elders. (De in-foto namen
 * zijn uit de bronfoto's gehaald, dus de 4:5-uitzondering hoeft niet meer.) */
.mai-guide-page [data-sf-block="sf-product-grid"] .sf-pg-card-media { aspect-ratio: 1 / 1; }

/* FAQ-accordeon: chevron merk-roze i.p.v. de rode dark-theme-accent (geldt op
 * de FAQ-pagina en overal; de home-Tips houdt z'n groene chevron via de
 * specifiekere .home-regel). */
[data-sf-block="sf-faq"] .faq-chev {
  background: rgba(220, 76, 155, .12) !important;
  border-color: rgba(220, 76, 155, .35) !important;
  color: var(--sf-color-primary, #dc4c9b) !important;
}
[data-sf-block="sf-faq"] details.faq-item[open] .faq-chev {
  background: var(--sf-color-primary, #dc4c9b) !important;
  border-color: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
}

/* Forms+ nieuwsbrief-form compact + inline in footer en subscribers-band. */
.mai-newsletter .sf-form,
.mai-subscribe .sf-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 0; background: transparent; max-width: none;
}
.mai-newsletter .sf-form-field,
.mai-subscribe .sf-form-field { flex: 1 1 150px; margin: 0; min-width: 0; }
.mai-newsletter .sf-form-label,
.mai-subscribe .sf-form-label { display: none; }
.mai-newsletter .sf-form-input,
.mai-subscribe .sf-form-input { width: 100%; padding: 13px 16px; }
.mai-newsletter .sf-form-btn,
.mai-subscribe .sf-form-btn { flex: 0 0 auto; padding: 13px 26px; border: none; cursor: pointer; font-weight: 600; }
.mai-newsletter .sf-form-hp, .mai-subscribe .sf-form-hp { display: none; }
.mai-subscribe .sf-form-success, .mai-subscribe .sf-form-error { color: #fff; flex-basis: 100%; }
.mai-newsletter .sf-form-success, .mai-newsletter .sf-form-error { flex-basis: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Webshop: kortingsbadge, zoeken, filters en reviews (includes/site-shop.php)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Kortingsbadge met echt percentage ─────────────────────────────────── */

/* De selectors van WooCommerce zelf (`.woocommerce ul.products li.product
   .onsale`) zijn specifieker dan een losse `span.onsale`-regel én zetten
   `margin: -.5em -.5em 0 0`, waardoor de badge buiten de kaart uitstak. Daarom
   hier per context een even specifieke selector. */
.woocommerce ul.products li.product span.onsale.mai-onsale,
.woocommerce div.product span.onsale.mai-onsale,
.woocommerce span.onsale.mai-onsale {
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  min-height: 0;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 4px;
  top: 10px;
  right: 10px;
  left: auto;
  margin: 0;
}

/* ── Zoekveld in de header ─────────────────────────────────────────────── */

.mai-search {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

.mai-search input[type="search"] {
  width: 170px;
  border: 0;
  outline: none;
  padding: 9px 12px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  color: #2c2c2c;
  background: transparent;
  -webkit-appearance: none;
}

.mai-search input[type="search"]::placeholder { color: rgba(44, 44, 44, 0.5); }

.mai-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 0 12px;
  align-self: stretch;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

.mai-search button:hover { background: #c43d88; }

/* ── Filterbalk op shop / categorie / zoekresultaat ────────────────────── */

.mai-shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mai-filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mai-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  color: #2c2c2c;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.15s, color 0.15s;
}

.mai-pill:hover {
  border-color: var(--sf-color-primary, #dc4c9b);
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-pill.is-active {
  background: var(--sf-color-primary, #dc4c9b);
  border-color: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

.mai-pill-count {
  font-size: 12px;
  opacity: 0.6;
}

.mai-pill.is-active .mai-pill-count { opacity: 0.85; }

.mai-filter-price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
}

.mai-filter-label { color: rgba(44, 44, 44, 0.7); }
.mai-filter-dash { color: rgba(44, 44, 44, 0.45); }

.mai-filter-price input {
  width: 74px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

.mai-filter-price button {
  padding: 8px 16px;
  border: 0;
  border-radius: 5px;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mai-filter-price button:hover { background: #c43d88; }

.mai-filter-reset {
  color: rgba(44, 44, 44, 0.65);
  font-size: 13px;
  text-decoration: underline;
}

.mai-filter-reset:hover { color: var(--sf-color-primary, #dc4c9b); }

/* ── Sterren ───────────────────────────────────────────────────────────── */

.mai-stars {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
}

.mai-star {
  color: rgba(0, 0, 0, 0.18);
  font-size: 15px;
}

.mai-star.is-on { color: #f0a02c; }

/* ── Review-verwijzing onder de koopknop ───────────────────────────────── */

.mai-review-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  color: rgba(44, 44, 44, 0.75);
}

.mai-review-cue a {
  color: var(--sf-color-primary, #dc4c9b);
  text-decoration: underline;
}

.mai-review-cue-shop { flex: 0 0 auto; }

/* ── Winkelreviews (Google) op de productpagina ────────────────────────── */

.mai-shop-reviews {
  margin: 56px 0 0;
  padding: 44px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--sf-font-body, Figtree, sans-serif);
}

.mai-shop-reviews .mai-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-shop-reviews h2 {
  margin: 0 0 10px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  color: #2c2c2c;
}

.mai-shop-reviews-note {
  margin: 0 0 28px;
  max-width: 70ch;
  font-size: 14px;
  color: rgba(44, 44, 44, 0.65);
}

.mai-shop-reviews-note a {
  color: var(--sf-color-primary, #dc4c9b);
  text-decoration: underline;
}

/* Scroller: drie kaarten in beeld, de rest ernaast met scroll-snap. */
.mai-reviews-scroller { position: relative; }

.mai-shop-reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mai-shop-reviews-track::-webkit-scrollbar { display: none; }

.mai-shop-reviews-track > .mai-shop-review { scroll-snap-align: start; }

.mai-shop-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: #fef2f4;
  border-radius: 5px;
}

/* Tekst op zes regels; JS zet er alleen een "Lees meer" bij als er echt
   iets wegvalt. */
.mai-shop-review blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mai-shop-review.is-open blockquote {
  display: block;
  overflow: visible;
}

.mai-review-more {
  align-self: flex-start;
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-color-primary, #dc4c9b);
  cursor: pointer;
  text-decoration: underline;
}

.mai-review-more:hover { color: #c43d88; }

.mai-shop-review blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #2c2c2c;
}

.mai-shop-review footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 13px;
}

.mai-review-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.mai-review-author { font-weight: 600; color: #2c2c2c; }
.mai-review-date { color: rgba(44, 44, 44, 0.55); }

@media (max-width: 900px) {
  /* Zoekveld op een eigen regel onder logo + winkelwagen + burger. */
  .mai-header-inner { flex-wrap: wrap; gap: 12px 16px; }
  .mai-search { order: 9; flex: 1 1 100%; }
  .mai-search input[type="search"] { width: 100%; }
  .mai-nav.is-open { top: auto; }
  .mai-shop-filters { justify-content: flex-start; }
  /* Mobiel: één kaart per keer in beeld, vegen om door te scrollen. */
  .mai-shop-reviews-track { grid-auto-columns: 100%; gap: 14px; }
}

/* ── Productbeschrijving: kopjes, waarschuwing en uitklap-FAQ ──────────────
   Structuur komt uit tools/fix-product-descriptions.php. */

.woocommerce-Tabs-panel--description h3 {
  margin: 30px 0 10px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  color: #2c2c2c;
}

.woocommerce-Tabs-panel--description > p,
.woocommerce-Tabs-panel--description > ul,
.woocommerce-Tabs-panel--description > ol {
  margin: 0 0 14px;
  line-height: 1.7;
}

.woocommerce-Tabs-panel--description ul { padding-left: 20px; }
.woocommerce-Tabs-panel--description li { margin-bottom: 7px; line-height: 1.7; }

.woocommerce-Tabs-panel--description p.mai-note {
  padding: 14px 16px;
  border-left: 3px solid var(--sf-color-primary, #dc4c9b);
  background: #fef2f4;
  border-radius: 0 4px 4px 0;
}

.woocommerce-Tabs-panel--description p.mai-note strong { color: #2c2c2c; }

.mai-faq {
  margin: 4px 0 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.mai-faq details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.mai-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5;
  color: #2c2c2c;
  list-style: none;
}

.mai-faq summary::-webkit-details-marker { display: none; }

.mai-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--sf-color-primary, #dc4c9b);
  border-bottom: 2px solid var(--sf-color-primary, #dc4c9b);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.mai-faq details[open] summary::after { transform: rotate(-135deg); }
.mai-faq summary:hover { color: var(--sf-color-primary, #dc4c9b); }

.mai-faq details > p {
  margin: 0;
  padding: 0 2px 17px;
  line-height: 1.7;
  color: rgba(44, 44, 44, 0.85);
}

/* "Vanaf"-label voor variabele producten (includes/site-shop.php). */
.mai-price-from {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 0.82em;
  font-weight: 500;
  color: rgba(44, 44, 44, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════
   Mega menu (includes/site-mega-menu.php)
   Licht en elegant: wit paneel, Cormorant-kolomkoppen, roze accenten,
   radius 4-5px (geen pillen), zachte schaduw in de huisstijl.
   ══════════════════════════════════════════════════════════════════════════ */

.mai-menu > .mai-has-mega { position: static; }

.mai-menu > li.is-current > a { color: var(--sf-color-primary, #dc4c9b); }

/* Het paneel hangt onder de hele header i.p.v. onder het menu-item. */
.mai-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 65;
  padding: 0 24px 30px;
  background: #fff;
  border-top: 1px solid rgba(220, 76, 155, 0.16);
  box-shadow: 0 22px 44px rgba(44, 44, 44, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.mai-menu > li:hover > .mai-mega-panel,
.mai-menu > li:focus-within > .mai-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mai-mega-inner {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 34px;
}

/* Multi-column i.p.v. grid: kolommen met 1 item laten dan geen gat achter. */
.mai-mega-cols {
  column-count: 3;
  column-gap: 40px;
}

.mai-mega-col {
  break-inside: avoid;
  margin-bottom: 26px;
}

.mai-mega-col:last-child { margin-bottom: 0; }

/* ── Kolom: categorie + producten ──────────────────────────────────────── */

.mai-mega-col-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #2c2c2c;
  white-space: normal !important;
}

.mai-mega-col-title:hover {
  color: var(--sf-color-primary, #dc4c9b);
  border-bottom-color: rgba(220, 76, 155, 0.4);
}

/* Plat, geen pil: alleen een klein grijs getal. */
.mai-mega-count {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(44, 44, 44, 0.45);
}

.mai-mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mai-mega-links li { margin: 0; }

.mai-menu .mai-mega-links a {
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(44, 44, 44, 0.78);
  white-space: normal;
  background: none;
  transition: color 0.14s, padding-left 0.14s;
}

.mai-menu .mai-mega-links a:hover {
  color: var(--sf-color-primary, #dc4c9b);
  padding-left: 5px;
  background: none;
}

.mai-menu .mai-mega-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-menu .mai-mega-all span {
  transition: transform 0.16s ease;
}

.mai-menu .mai-mega-all:hover span { transform: translateX(3px); }

/* ── Uitgelicht aanbieding-product ─────────────────────────────────────── */

.mai-mega-aside {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mai-menu .mai-mega-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 5px;
  background: linear-gradient(#fef2f4, rgba(250, 212, 228, 0.5));
  color: #2c2c2c;
}

.mai-menu .mai-mega-feature:hover { color: #2c2c2c; }

.mai-mega-feature-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.mai-mega-feature-media img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mai-menu .mai-mega-feature:hover .mai-mega-feature-media img { transform: scale(1.04); }

.mai-mega-feature-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.mai-mega-feature-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Eyebrow: plat, geen achtergrond of rand. */
.mai-mega-feature-eyebrow {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-mega-feature-title {
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.mai-mega-feature-price {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  color: rgba(44, 44, 44, 0.8);
}

.mai-mega-feature-price del { opacity: 0.55; margin-right: 5px; }
.mai-mega-feature-price ins {
  text-decoration: none;
  font-weight: 600;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-menu .mai-mega-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-menu .mai-mega-aside-link span { transition: transform 0.16s ease; }
.mai-menu .mai-mega-aside-link:hover span { transform: translateX(3px); }

.mai-mega-aside-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13px;
  color: rgba(44, 44, 44, 0.7);
}

.mai-mega-aside-note svg { flex: 0 0 auto; color: var(--sf-color-primary, #dc4c9b); }

/* ── Tussenformaat: minder kolommen, uitgelicht blok eronder ───────────── */

@media (max-width: 1180px) {
  .mai-mega-inner { grid-template-columns: 1fr; gap: 26px; }
  .mai-menu .mai-mega-feature { flex-direction: row; align-items: center; }
  .mai-mega-feature-media { flex: 0 0 150px; }
  .mai-mega-feature-media img { height: 110px; }
}

/* ── Mobiel: paneel wordt een inline lijst in het uitklapmenu ──────────── */

@media (max-width: 900px) {
  .mai-menu > .mai-has-mega { position: relative; }

  .mai-mega-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 6px;
    border-top: 0;
    box-shadow: none;
    transition: none;
  }

  .mai-mega-inner {
    display: block;
    padding: 0;
  }

  .mai-mega-cols {
    column-count: 1;
  }

  .mai-mega-col { margin-bottom: 0; }

  .mai-mega-col { padding: 0; }

  .mai-mega-col-title {
    margin: 0;
    padding: 10px 24px 10px 38px;
    border-bottom: 0;
    font-size: 16px !important;
  }

  /* Productlijsten en het uitgelichte blok blijven op mobiel dicht: de
     categorie zelf is de bestemming, anders wordt het menu eindeloos. */
  .mai-mega-links,
  .mai-menu .mai-mega-all,
  .mai-mega-aside { display: none; }
}

/* ── Limited edition-markering (includes/site-shop.php) ────────────────────
   Ink i.p.v. roze: onderscheidt zich van de kortingsbadge en leest als
   exclusiviteit. Plat label met spatiëring, radius 4px, geen pil. */

.mai-limited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.mai-limited-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

/* Kaart: donkere chip linksboven op de foto. */
.woocommerce ul.products li.product .mai-limited--card {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(35, 35, 35, 0.92);
  color: #fff;
}

/* Productpagina: platte eyebrow boven de titel, met een hairline erboven. */
.mai-limited--single {
  margin: 0 0 9px;
  padding-top: 2px;
  color: #2c2c2c;
}

.mai-limited--single .mai-limited-dot {
  width: 18px;
  height: 1px;
  border-radius: 0;
  opacity: 1;
}

/* Producttitel op de productpagina: stond kleiner dan de prijs, waardoor het
   limited-edition-label zwaarder woog dan de naam zelf. */
.woocommerce div.product .product_title {
  margin: 0 0 10px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  color: #2c2c2c;
}

/* Limited edition-markering in het mega menu: klein, ink, plat. */
.mai-menu .mai-mega-links .mai-mega-limited {
  display: inline-block;
  margin-left: 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(44, 44, 44, 0.5);
  vertical-align: 1px;
}

.mai-menu .mai-mega-links a:hover .mai-mega-limited {
  color: var(--sf-color-primary, #dc4c9b);
}

/* ══════════════════════════════════════════════════════════════════════════
   Productsamenvatting: de kolom naast de foto (includes/site-shop.php)
   Zelfde inhoud en volgorde als eerst, maar met hiërarchie: USP's met
   vinkjes, "Beschrijving" als klein kopje, uitgelijnd koopblok.
   ══════════════════════════════════════════════════════════════════════════ */

.woocommerce div.product .summary {
  font-family: var(--sf-font-body, Figtree, sans-serif);
}

/* ── Verzendregel onder de prijs ───────────────────────────────────────── */

.mai-ship-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(44, 44, 44, 0.75);
}

.mai-ship-note svg { flex: 0 0 auto; color: var(--sf-color-primary, #dc4c9b); }

/* ── Korte beschrijving: USP-lijst + beschrijvende tekst ───────────────── */

.woocommerce-product-details__short-description {
  margin: 22px 0 0;
}

/* USP's: vinkje in plaats van drie vette regels op elkaar. */
.woocommerce-product-details__short-description ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0 0 4px;
}

.woocommerce-product-details__short-description li {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #2c2c2c;
}

/* Vinkje uit twee randen; geen icon-font nodig. */
.woocommerce-product-details__short-description li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--sf-color-primary, #dc4c9b);
  border-bottom: 2px solid var(--sf-color-primary, #dc4c9b);
  transform: rotate(-45deg);
}

/* "Beschrijving" als rustig kopje met hairline erboven. */
.woocommerce-product-details__short-description .mai-sd-title {
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(44, 44, 44, 0.5);
}

.woocommerce-product-details__short-description p {
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.68;
  color: rgba(44, 44, 44, 0.85);
}

.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Vet in de lopende tekst mag opvallen, maar niet schreeuwen. */
.woocommerce-product-details__short-description p b,
.woocommerce-product-details__short-description p strong {
  font-weight: 600;
  color: #2c2c2c;
}

/* ── Koopblok: variant, aantal, knop ───────────────────────────────────── */

.woocommerce div.product form.cart {
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* De standaardtabel duwt de labels naar het midden; alles links uitlijnen. */
.woocommerce div.product form.cart table.variations {
  width: 100%;
  margin: 0 0 18px;
  border: 0;
}

.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
  background: none;
}

.woocommerce div.product form.cart table.variations th.label label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2c2c2c;
}

.woocommerce div.product form.cart table.variations td.value { margin-bottom: 14px; }

.woocommerce div.product form.cart select,
.woocommerce div.product form.cart .variations select {
  width: 100%;
  min-width: 0;
  max-width: 340px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 15px;
  color: #2c2c2c;
}

.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.cart select:focus {
  outline: none;
  border-color: var(--sf-color-primary, #dc4c9b);
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 9px;
  font-size: 13px;
  color: rgba(44, 44, 44, 0.6);
  text-decoration: underline;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
  margin: 0 0 14px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--sf-color-primary, #dc4c9b);
}

.woocommerce div.product form.cart .woocommerce-variation-availability {
  font-size: 14px;
  color: rgba(44, 44, 44, 0.7);
}

.woocommerce div.product form.cart div.quantity { margin-right: 12px; }

.woocommerce div.product form.cart .quantity input.qty {
  width: 68px;
  height: 50px;
  padding: 0 6px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  color: #2c2c2c;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
  height: 50px;
  padding: 0 36px;
  border: 0;
  border-radius: 5px;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.16s ease;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background: #c43d88;
}

/* Nog geen variant gekozen: duidelijk inactief in plaats van vol roze.
   !important is hier nodig omdat de reskin-laag hierboven alle WooCommerce-
   knoppen met !important roze maakt. */
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .button.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce div.product form.cart .button.single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button.wc-variation-selection-needed:hover {
  background: #f3e6ed !important;
  color: rgba(44, 44, 44, 0.45) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}

/* ── Meta: artikelnummer en categorie ──────────────────────────────────── */

.mai-product-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 16px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13.5px;
}

.mai-product-meta dt { margin: 0; color: rgba(44, 44, 44, 0.55); }
.mai-product-meta dd { margin: 0; color: #2c2c2c; }
.mai-product-meta dd a { color: #2c2c2c; text-decoration: none; }
.mai-product-meta dd a:hover {
  color: var(--sf-color-primary, #dc4c9b);
  text-decoration: underline;
}

.mai-review-cue { margin-top: 14px; }

/* ── Ruimte en kop onder de reviews ────────────────────────────────────────
   De reviews-sectie sloot met 0px aan op "Related products" en die kop was
   onopgemaakt (12px serif, direct op het raster). Zelfde scheiding als boven
   de reviews: hairline + royale ruimte. */

.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells {
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product .up-sells.upsells > h2 {
  margin: 0 0 26px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  color: #2c2c2c;
}

/* Iets lucht onder het laatste blok van de productpagina. */
.woocommerce div.product .related.products { margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   Verticale ritmiek van de productpagina
   De secties sloten vrijwel zonder ruimte op elkaar aan (tabbladen 26px,
   FAQ-blok 4px onder zijn kop, reviews 0px boven de gerelateerde producten).
   Één schaal: 64px tussen hoofdsecties, 40px boven een kopje, 16px binnen tekst.
   ══════════════════════════════════════════════════════════════════════════ */

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

.woocommerce div.product .woocommerce-tabs {
  margin-top: 64px;
  padding-top: 0;
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 34px 0 0;
}

/* Woo zet hier een <h2> ("Description") die ongestyled bleef: 12px serif,
   direct op de tekst. */
.woocommerce div.product .woocommerce-tabs .panel > h2 {
  margin: 0 0 22px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  color: #2c2c2c;
}

/* ── Tekstblokken in de beschrijving ───────────────────────────────────── */

.woocommerce-Tabs-panel--description h3 {
  margin: 40px 0 14px;
}

.woocommerce-Tabs-panel--description > h3:first-child,
.woocommerce-Tabs-panel--description > h2 + h3 {
  margin-top: 0;
}

.woocommerce-Tabs-panel--description p {
  margin: 0 0 16px;
}

.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

/* De Tailwind-reset zet list-style op none; hier willen we wél bolletjes. */
.woocommerce-Tabs-panel--description ul { list-style: disc outside; }
.woocommerce-Tabs-panel--description ol { list-style: decimal outside; }

.woocommerce-Tabs-panel--description li {
  margin-bottom: 9px;
  line-height: 1.65;
}

.woocommerce-Tabs-panel--description li::marker { color: var(--sf-color-primary, #dc4c9b); }

/* Regels binnen één alinea (uit de oude editor komen die als <br>) krijgen
   lucht; anders plakken opsommingen en stappen tegen elkaar. */
.woocommerce-Tabs-panel--description br {
  display: block;
  content: "";
  margin-top: 9px;
}

.woocommerce-Tabs-panel--description p.mai-note {
  margin: 26px 0;
}

/* ── FAQ-accordeon ─────────────────────────────────────────────────────── */

.mai-faq {
  margin: 6px 0 34px;
}

.mai-faq summary {
  padding: 19px 4px;
}

.mai-faq details > p {
  padding: 0 4px 22px;
  max-width: 78ch;
}

/* Binnen de FAQ geen extra <br>-ruimte; die tekst is al opgemaakt. */
.mai-faq br { display: inline; margin-top: 0; }

/* ── Onderste secties ──────────────────────────────────────────────────── */

.mai-shop-reviews {
  margin-top: 64px;
  padding-top: 48px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Product-FAQ in de stijl van de FAQ-pagina
   Zelfde taal als het sf-faq-blok elders op de site: gecentreerde kolom,
   zachte roze kaarten (#fdf0f5, radius 8px) en een "+" in een roze rondje.
   ══════════════════════════════════════════════════════════════════════════ */

/* Kop gecentreerd boven het blok (class komt uit het opschoonscript). */
.woocommerce-Tabs-panel--description h3.mai-faq-title {
  max-width: 800px;
  margin: 52px auto 20px;
  text-align: center;
  font-size: clamp(24px, 2.4vw, 30px);
}

.mai-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto 44px;
  border-top: 0;
}

.mai-faq details {
  background: #fdf0f5;
  border: 0;
  border-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.2s ease;
}

.mai-faq details[open] { background: #fbe6ef; }

.mai-faq summary {
  gap: 16px;
  padding: 19px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #2c2c2c;
}

/* Chevron-lijnen van de vorige versie vervangen door een rond "+"-knopje. */
.mai-faq summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(220, 76, 155, 0.14);
  color: var(--sf-color-primary, #dc4c9b);
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  transform: none;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.mai-faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

.mai-faq summary:hover::after { background: rgba(220, 76, 155, 0.24); }

.mai-faq details > p {
  margin: 0;
  padding: 0 22px 21px;
  max-width: none;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(44, 44, 44, 0.78);
}

@media (max-width: 700px) {
  .mai-faq summary { padding: 16px 18px; font-size: 14.5px; }
  .mai-faq details > p { padding: 0 18px 18px; }
}


/* ── Navigatie onder de review-scroller ────────────────────────────────── */

.mai-reviews-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 18px;
}

.mai-reviews-count {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13px;
  color: rgba(44, 44, 44, 0.55);
}

.mai-reviews-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(220, 76, 155, 0.32);
  border-radius: 50%;
  background: #fff;
  color: var(--sf-color-primary, #dc4c9b);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.mai-reviews-nav:hover:not(:disabled) {
  background: var(--sf-color-primary, #dc4c9b);
  border-color: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

.mai-reviews-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Op mobiel is vegen de bediening; de teller blijft nuttig. */
@media (max-width: 700px) {
  .mai-reviews-controls { justify-content: space-between; }
}

/* ── FAQ als eigen sectie op de productpagina ──────────────────────────── */

.mai-product-faq {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mai-product-faq h2.mai-faq-title {
  max-width: 800px;
  margin: 0 auto 24px;
  text-align: center;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  color: #2c2c2c;
}

.mai-product-faq .mai-faq { margin-bottom: 0; }

/* ── TikTok-embeds links uitlijnen ─────────────────────────────────────────
   Het embed-script van TikTok centreert de blockquote/iframe met een inline
   marge; vandaar !important. */

.tiktok-embed,
.woocommerce-Tabs-panel--description .tiktok-embed,
.woocommerce-Tabs-panel--description iframe[src*="tiktok"] {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* De speler zelf wordt door TikTok binnen het iframe gecentreerd (cross-origin,
   dus niet te stylen). Door het frame terug te brengen naar de breedte van de
   speler staat de video wél links uitgelijnd. min-width van de embed is 325px. */
.woocommerce-Tabs-panel--description .tiktok-embed,
.woocommerce-Tabs-panel--description blockquote.tiktok-embed {
  width: 100% !important;
  max-width: 340px !important;
  min-width: 325px !important;
}

/* ── Mobiele overflow dichtzetten ──────────────────────────────────────────
   Twee blokken lieten de pagina horizontaal scrollen op telefoonformaat. */

/* sf-feature-grid zet `grid-template-columns:repeat(3,1fr)` als inline style,
   ook op 390px; daar passen drie kolommen niet (+118px op de about-pagina). */
@media (max-width: 900px) {
  [data-sf-block="sf-feature-grid"] .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  [data-sf-block="sf-feature-grid"] .features-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* De testimonial-carousel houdt zijn volgende slides buiten beeld; zonder clip
   scrolt de hele homepage 38px mee. */
@media (max-width: 900px) {
  [data-sf-block="sf-testimonials"] section,
  [data-sf-block="sf-testimonials"] .testimonials-section {
    overflow-x: clip;
  }
}

/* Beeld in een feature-row liep op telefoonformaat 34px buiten zijn container. */
@media (max-width: 900px) {
  [data-sf-block] .feature-row .feature-img,
  [data-sf-block] .feature-img img,
  [data-sf-block] .feature-row img {
    max-width: 100%;
    height: auto;
  }

  [data-sf-block] .feature-row { overflow-x: clip; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Beauty Deal (sf-cta, #beauty-deal) — eerste blok onder de hero
   Eerste indruk én de beste aanbieding van de winkel: royale band, staffels als
   losse kaarten met de cijfers in het roze, en een duidelijke CTA.
   ══════════════════════════════════════════════════════════════════════════ */

[data-sf-block="sf-cta"] #beauty-deal.cta-section {
  position: relative;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

/* Fijne lijn boven en onder houdt de band vast in de pagina. */
[data-sf-block="sf-cta"] #beauty-deal.cta-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(220, 76, 155, 0.14);
}

#beauty-deal .cta-card {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: 62px 32px 66px;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}

/* Eyebrow: plat, geen pil (huisstijlregel). */
#beauty-deal .section-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-color-primary, #dc4c9b) !important;
}

#beauty-deal h2 {
  margin: 0 0 10px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(36px, 5.2vw, 58px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #2c2c2c !important;
}

/* :not(.cta-sub) — anders pakt deze regel ook de slotregel onder de knop mee
   (en overschrijft die met margin: 0 auto). */
#beauty-deal .cta-card > p:not(.cta-sub) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--sf-font-body, Figtree, sans-serif);
}

#beauty-deal .cta-card > p:not(.cta-sub) br { display: none; }

#beauty-deal .mai-deal-sub {
  flex: 0 0 100%;
  margin-bottom: 20px;
  font-size: 17px;
  color: rgba(44, 44, 44, 0.68);
}

/* ── De staffels ───────────────────────────────────────────────────────── */

#beauty-deal .mai-deal {
  flex: 1 1 190px;
  max-width: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1px solid rgba(220, 76, 155, 0.16);
  border-radius: 5px;
  /* Zachtroze kaart, zoals de FAQ-kaarten: op een witte sectie heeft een witte
     kaart te weinig eigen vorm. */
  background: #fdf0f5;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: #2c2c2c;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#beauty-deal .mai-deal:hover {
  transform: translateY(-2px);
  border-color: rgba(220, 76, 155, 0.4);
  background: #fbe6ef;
}

/* Cijfers rustig houden: zelfde regelgrootte, alleen merkkleur. Wel in de
   body-letter, want Cormorant heeft old-style cijfers die op x-hoogte staan en
   daardoor juist kleiner en vager lijken. */
#beauty-deal .mai-deal-n {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 0.9em;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--sf-color-primary, #dc4c9b);
}

/* ── Knop en slotregel ─────────────────────────────────────────────────── */

#beauty-deal .cta-actions { margin-top: 34px; }

#beauty-deal .cta-actions .btn-primary {
  display: inline-block;
  padding: 16px 40px;
  font-size: 15.5px;
  box-shadow: 0 6px 20px rgba(220, 76, 155, 0.26);
}

#beauty-deal .cta-card > p.cta-sub {
  margin: 26px 0 0;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(44, 44, 44, 0.6);
}

@media (max-width: 860px) {
  #beauty-deal .cta-card { padding: 46px 20px 50px; }

  /* 2x2: min-width 0 + wrap binnen de kaart, anders duwt de langste staffel
     ("3e zak 50% korting") zichzelf op een eigen rij. */
  #beauty-deal .mai-deal {
    flex: 1 1 calc(50% - 7px);
    min-width: 0;
    max-width: none;
    flex-wrap: wrap;
    padding: 16px 10px;
    font-size: 16px;
    text-align: center;
  }


}

/* ── Reviews en gerelateerde producten gecentreerd ─────────────────────────
   Zelfde uitlijning als de FAQ-sectie, zodat de drie onderste secties van de
   productpagina één ritme hebben. */

.mai-shop-reviews { text-align: center; }

.mai-shop-reviews .mai-eyebrow,
.mai-shop-reviews h2 { text-align: center; }

.mai-shop-reviews-note {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* De kaarten zelf blijven links uitgelijnd - gecentreerde reviewtekst leest slecht. */
.mai-shop-review { text-align: left; }

.mai-reviews-controls { justify-content: center; }

.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells { text-align: center; }

.woocommerce div.product .related.products > h2,
.woocommerce div.product .up-sells.upsells > h2 { text-align: center; }

/* Productkaarten houden hun eigen linkse uitlijning. */
.woocommerce div.product .related.products ul.products li.product,
.woocommerce div.product .up-sells.upsells ul.products li.product { text-align: left; }


/* ── Gerelateerde producten: centreren bij een niet-volle rij ──────────────
   WooCommerce gebruikt hier nog het float-model (ul.products.columns-4 met
   percentagebreedtes en marges), waardoor 1 of 2 producten links blijven
   plakken onder een gecentreerde kop. Flexbox met justify-content lost dat op;
   floats en marges van Woo moeten daarvoor wel uit. */

.woocommerce div.product .related.products ul.products,
.woocommerce div.product .up-sells.upsells ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .related.products ul.products::before,
.woocommerce div.product .related.products ul.products::after,
.woocommerce div.product .up-sells.upsells ul.products::before,
.woocommerce div.product .up-sells.upsells ul.products::after {
  display: none;
}

.woocommerce div.product .related.products ul.products li.product,
.woocommerce div.product .up-sells.upsells ul.products li.product {
  float: none !important;
  clear: none !important;
  width: calc(25% - 15px) !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .woocommerce div.product .related.products ul.products,
  .woocommerce div.product .up-sells.upsells ul.products {
    gap: 16px;
  }

  .woocommerce div.product .related.products ul.products li.product,
  .woocommerce div.product .up-sells.upsells ul.products li.product {
    width: calc(50% - 8px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Productfoto's overal vierkant
   Vangnet naast de 1:1-crop in PHP: ook een foto die nog niet opnieuw
   gegenereerd is, wordt vierkant getoond in plaats van op eigen verhouding.
   ══════════════════════════════════════════════════════════════════════════ */

/* Productpagina: hoofdfoto en de overige gallery-foto's. */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img.wp-post-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Gallery-duimpjes onder de hoofdfoto. */
.woocommerce div.product .flex-control-thumbs img,
.woocommerce div.product .woocommerce-product-gallery--columns-4 .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Kaarten (shop, categorie, gerelateerd, up-sells) - deze zijn al 450x450,
   maar zo blijft het ook kloppen als er ooit een niet-gecropte maat langskomt. */
.woocommerce ul.products li.product img,
.woocommerce div.product .related.products ul.products li.product img,
[data-sf-block="sf-product-grid"] .sf-pg-card-media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* Winkelwagen en mega menu. */
.woocommerce table.shop_table td.product-thumbnail img,
.mai-mega-feature-media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════════════
   Faya Watra Guide (template-parts/mai-faya-watra-guide.php)
   Was: kop → 6 kaarten → 11 tips achter labels "Tip #1..#11". Nu een echte
   gids: uitleg, stappen, kits, veiligheid, weetjes in beeld en een CTA.
   ══════════════════════════════════════════════════════════════════════════ */

.mai-fwg-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.mai-guide-page .mai-fwg-intro,
.mai-guide-page .mai-fwg-steps,
.mai-guide-page .mai-fwg-letop,
.mai-guide-page .mai-fwg-tips,
.mai-guide-page .mai-fwg-cta {
  font-family: var(--sf-font-body, Figtree, sans-serif);
}

/* Koppen gecentreerd zoals de rest van de pagina; de tekst eronder blijft links. */
.mai-fwg-steps .mai-fwg-eyebrow,
.mai-fwg-steps h2,
.mai-fwg-tips .mai-fwg-eyebrow,
.mai-fwg-tips h2 { text-align: center; }

.mai-fwg-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-guide-page .mai-fwg-steps h2,
.mai-guide-page .mai-fwg-letop h2,
.mai-guide-page .mai-fwg-tips h2,
.mai-guide-page .mai-fwg-nodig h2,
.mai-guide-page .mai-fwg-cta h2 {
  margin: 0 0 26px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  color: #2c2c2c;
}

/* ── Intro ─────────────────────────────────────────────────────────────── */

.mai-fwg-intro { padding: 26px 0 4px; }

.mai-fwg-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(44, 44, 44, 0.82);
  text-align: center;
}

/* ── Stappen ───────────────────────────────────────────────────────────── */

.mai-fwg-steps { padding: 56px 0 10px; }

.mai-fwg-steplist {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.mai-fwg-steplist li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  background: #fff;
}

.mai-fwg-num {
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fdf0f5;
  color: var(--sf-color-primary, #dc4c9b);
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.mai-fwg-steptext,
.mai-fwg-tiptext {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(44, 44, 44, 0.85);
}

/* ── Kit-secties ───────────────────────────────────────────────────────── */

.mai-guide-page .sf-pg-header { text-align: center; }

.mai-fwg-kits-intro {
  max-width: 620px;
  margin: 8px auto 0;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 15px;
  color: rgba(44, 44, 44, 0.65);
}

/* ── Veiligheid ────────────────────────────────────────────────────────── */

.mai-fwg-letop { padding: 46px 0 10px; }

.mai-fwg-letop .mai-fwg-inner {
  padding: 34px 30px 30px;
  border-left: 3px solid var(--sf-color-primary, #dc4c9b);
  border-radius: 0 5px 5px 0;
  background: #fef2f4;
  max-width: 852px;
}

.mai-fwg-letoplist {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
}

.mai-fwg-letoplist li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #2c2c2c;
}

.mai-fwg-letoplist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--sf-color-primary, #dc4c9b);
}

.mai-fwg-disclaimer {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(44, 44, 44, 0.62);
}

/* ── Weetjes ───────────────────────────────────────────────────────────── */

.mai-fwg-tips { padding: 56px 0 10px; }

.mai-fwg-tiplist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 0;
  padding: 0;
}

.mai-fwg-tiplist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* ── Afsluitende CTA ───────────────────────────────────────────────────── */

.mai-fwg-cta { padding: 62px 0 74px; }

.mai-fwg-cta .mai-fwg-inner { text-align: center; }

.mai-fwg-cta p {
  margin: 0 0 24px;
  font-size: 16px;
  color: rgba(44, 44, 44, 0.7);
}

.mai-fwg-btn {
  display: inline-block;
  padding: 15px 36px;
  border-radius: 5px;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(220, 76, 155, 0.24);
}

.mai-fwg-btn:hover { background: #c43d88; color: #fff; }

@media (max-width: 760px) {
  .mai-fwg-tiplist { grid-template-columns: minmax(0, 1fr); }
  .mai-fwg-letop .mai-fwg-inner { padding: 26px 20px 24px; }
  .mai-fwg-steps, .mai-fwg-tips { padding-top: 42px; }
}

/* ── Faya Watra Guide: beeld en ritme ──────────────────────────────────────
   De pagina was vooral platte tekst. Hero met portret, traditie-uitleg naast
   beeld, benodigdheden als echte productkaarten, weetjes als kaarten en een
   fotoband voor de afsluiting. Alle beeld komt uit de mediabibliotheek. */

/* Hero: tekst links, portret rechts. */
.mai-fwg-hero {
  background: linear-gradient(180deg, #fef2f4 0%, #faf7f9 100%);
  border-bottom: 1px solid rgba(220, 76, 155, 0.12);
}

.mai-fwg-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 66px 24px 70px;
}

.mai-fwg-hero-text h1 {
  margin: 0 0 14px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  line-height: 1.03;
  color: #2c2c2c;
}

.mai-fwg-hero-text p {
  margin: 0;
  max-width: 46ch;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(44, 44, 44, 0.72);
}

.mai-fwg-hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.mai-fwg-link {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-color-primary, #dc4c9b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mai-fwg-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5px;
}

/* Traditie: beeld naast tekst. */
.mai-fwg-intro { padding: 66px 0 16px; }

.mai-fwg-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 46px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 1:1 houdt het blok in balans; de tekst ernaast is kort. */
.mai-fwg-split-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5px;
}

.mai-guide-page .mai-fwg-split-text h2 {
  margin: 0 0 14px;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  color: #2c2c2c;
}

.mai-fwg-split-text .mai-fwg-lead { text-align: left; font-size: 17px; }

/* Benodigdheden: drie echte productkaarten. */
.mai-fwg-nodig { padding: 72px 0 30px; }
.mai-fwg-nodig .mai-fwg-eyebrow,
.mai-guide-page .mai-fwg-nodig h2 { text-align: center; }

/* Ruimer: de kaarten stonden krap onder een forse Cormorant-kop. */
.mai-fwg-nodig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.mai-fwg-nodig-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.mai-fwg-nodig-card:hover {
  transform: translateY(-2px);
  border-color: rgba(220, 76, 155, 0.32);
  box-shadow: 0 8px 22px rgba(220, 76, 155, 0.1);
}

.mai-fwg-nodig-media {
  flex: 0 0 84px;
  border-radius: 4px;
  overflow: hidden;
  background: #fdf0f5;
}

.mai-fwg-nodig-media img { display: block; width: 84px; height: 84px; object-fit: cover; }

.mai-fwg-nodig-body { display: flex; flex-direction: column; gap: 5px; }

.mai-fwg-nodig-title {
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 19px;
  font-weight: 600;
  color: #2c2c2c;
}

.mai-fwg-nodig-note {
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 13.5px;
  color: rgba(44, 44, 44, 0.6);
}

/* Stappen op een zachte tint zodat het blok niet als kale tekst leest. */
.mai-fwg-steps {
  margin-top: 62px;
  padding: 58px 0 62px;
  background: #fef7fa;
}

.mai-fwg-steplist li { background: #fff; }

/* Weetjes als kaarten in plaats van een platte lijst. */
.mai-fwg-tiplist li {
  padding: 18px 20px;
  border-radius: 5px;
  background: #fdf0f5;
}

/* Fotoband boven de afsluiting. */
.mai-fwg-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 66px;
}

.mai-fwg-band-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mai-fwg-cta { padding: 58px 0 74px; }

@media (max-width: 860px) {
  .mai-fwg-hero-inner,
  .mai-fwg-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mai-fwg-hero-inner { padding: 44px 24px 48px; }
  .mai-fwg-hero-media { order: -1; }
  .mai-fwg-hero-media img,
  .mai-fwg-split-media img { aspect-ratio: 16 / 10; }
  .mai-fwg-nodig-grid { grid-template-columns: minmax(0, 1fr); }
  .mai-fwg-band { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .mai-fwg-band-item img { aspect-ratio: 1 / 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Winkelwagen als zijpaneel (includes/site-cart-drawer.php)
   Zelfde interactie als bij Super Stubborn (backdrop + paneel van rechts,
   scroll-lock), maar in de marieannitis-stijl: wit, roze accenten, Cormorant.
   ══════════════════════════════════════════════════════════════════════════ */

body.mai-locked { overflow: hidden; }

.mai-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(44, 44, 44, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.mai-drawer-backdrop.is-open { opacity: 1; }

.mai-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 310;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  height: 100dvh;
  background: #fff;
  border-left: 1px solid rgba(220, 76, 155, 0.16);
  box-shadow: -18px 0 48px rgba(44, 44, 44, 0.16);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: var(--sf-font-body, Figtree, sans-serif);
}

.mai-cart-drawer.is-open { transform: translateX(0); }
.mai-cart-drawer.is-busy { opacity: 0.6; pointer-events: none; }

/* ── Kop ───────────────────────────────────────────────────────────────── */

.mai-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(#fef2f4, #fff);
}

.mai-drawer-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 25px;
  font-weight: 500;
  color: #2c2c2c;
}

.mai-drawer-count {
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.mai-drawer-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #2c2c2c;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.mai-drawer-close:hover {
  background: var(--sf-color-primary, #dc4c9b);
  border-color: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

/* ── Body: de mini-cart ────────────────────────────────────────────────── */

.mai-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.mai-drawer-body ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* WooCommerce zet de afbeelding BINNEN de productlink. Een raster met een
   aparte beeldkolom laat die kolom dus leeg en duwt alle tekst 80px naar
   rechts - dat leest als gecentreerd. Daarom: beeld absoluut links, de rest
   gewoon blok-elementen links uitgelijnd. */
.mai-drawer-body ul.woocommerce-mini-cart li.mini_cart_item,
.mai-drawer-body ul.product_list_widget li.mini_cart_item {
  position: relative;
  display: block;
  min-height: 66px;
  padding: 16px 34px 16px 80px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  text-align: left;
}

.mai-drawer-body li.mini_cart_item img {
  position: absolute;
  left: 0;
  top: 16px;
  width: 66px !important;
  height: 66px;
  margin: 0 !important;
  float: none !important;
  border-radius: 4px;
  object-fit: cover;
  background: #fdf0f5;
}

.mai-drawer-body li.mini_cart_item > a:not(.remove_from_cart_button) {
  display: block;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: #2c2c2c;
  text-align: left;
  text-decoration: none;
}

.mai-drawer-body li.mini_cart_item > a:not(.remove_from_cart_button):hover {
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-drawer-body .quantity {
  display: block;
  margin-top: 4px;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 14px;
  text-align: left;
  color: rgba(44, 44, 44, 0.65);
}

.mai-drawer-body .quantity .amount { color: #2c2c2c; font-weight: 600; }

.mai-drawer-body .variation {
  margin: 3px 0 0;
  font-size: 13px;
  color: rgba(44, 44, 44, 0.6);
}

.mai-drawer-body .variation dt,
.mai-drawer-body .variation dd { display: inline; margin: 0; }

/* Verwijderkruisje: klein rondje rechtsboven in de rij. */
.mai-drawer-body a.remove_from_cart_button {
  position: absolute;
  right: 0;
  top: 16px;
  display: grid !important;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f5f5f5 !important;
  color: rgba(44, 44, 44, 0.6) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-decoration: none;
}

.mai-drawer-body a.remove_from_cart_button:hover {
  background: var(--sf-color-primary, #dc4c9b) !important;
  color: #fff !important;
}

/* Subtotaal + knoppen (staan onderaan de mini-cart). */
.mai-drawer-body .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
  color: rgba(44, 44, 44, 0.7);
}

.mai-drawer-body .woocommerce-mini-cart__total strong { font-weight: 500; }

.mai-drawer-body .woocommerce-mini-cart__total .amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-drawer-body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}

.mai-drawer-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.mai-drawer-btn-primary {
  background: var(--sf-color-primary, #dc4c9b);
  color: #fff;
}

.mai-drawer-btn-primary:hover { background: #c43d88; color: #fff; }

.mai-drawer-link {
  font-size: 14px;
  color: rgba(44, 44, 44, 0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mai-drawer-link:hover { color: var(--sf-color-primary, #dc4c9b); }

.mai-drawer-ship {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13.5px;
  color: rgba(44, 44, 44, 0.65);
}

.mai-drawer-ship svg { flex: 0 0 auto; color: var(--sf-color-primary, #dc4c9b); }

/* ── Voortgang naar gratis verzending ──────────────────────────────────────
   Vervangt in het winkelwagenpaneel de kale regel "Gratis verzending vanaf
   € 99". Die stond er ook bij een mand van € 95 en vertelde dan niet dat er nog
   maar € 4 bij hoefde. Dezelfde markup zet site-shop.php op /cart/ in het
   totalenblok; vandaar dat de opmaak hier los van .mai-drawer- staat. */

.mai-freeship {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mai-freeship-text {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(44, 44, 44, 0.75);
}

.mai-freeship-text svg { flex: 0 0 auto; color: var(--sf-color-primary, #dc4c9b); }

.mai-freeship-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(220, 76, 155, 0.14);
}

.mai-freeship-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sf-color-primary, #dc4c9b);
  transition: width 0.3s ease;
}

/* Drempel gehaald: groen, zodat het als bevestiging leest en niet als nóg een
   aanbieding. */
.mai-freeship.is-done .mai-freeship-text {
  font-weight: 600;
  color: #1c7a4e;
}

.mai-freeship.is-done .mai-freeship-text svg { color: #1c7a4e; }
.mai-freeship.is-done .mai-freeship-track { background: rgba(28, 122, 78, 0.14); }
.mai-freeship.is-done .mai-freeship-fill { background: #1c7a4e; }

/* Op /cart/ hangt het balkje tussen de totaalregels van het WooCommerce-blok.
   Die regels hebben zelf al een scheidingslijn en 16px ruimte, dus hier geen
   eigen rand. */
.mai-freeship--cart {
  margin: 0;
  padding: 16px 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mai-freeship-fill { transition: none; }
}

/* ── Lege mand ─────────────────────────────────────────────────────────── */

.mai-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 54px 8px 0;
  text-align: center;
}

.mai-drawer-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #fdf0f5;
  color: var(--sf-color-primary, #dc4c9b);
}

.mai-drawer-empty-title {
  margin: 0;
  font-family: var(--sf-font-heading, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  color: #2c2c2c;
}

.mai-drawer-empty-text {
  margin: 0 0 18px;
  max-width: 28ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(44, 44, 44, 0.65);
}

.mai-drawer-empty .mai-drawer-btn { width: auto; padding: 14px 28px; }

@media (max-width: 520px) {
  .mai-cart-drawer { width: 100vw; }
  .mai-drawer-head { padding: 18px 18px; }
  .mai-drawer-body { padding: 16px 18px 20px; }
}

/* ── "Powered by SALESFISION" onderin de footer ────────────────────────────
   De naam vet in het merkroze met een zachte glow (text-shadow in twee lagen),
   zodat het bij de site past en niet als een banner aanvoelt. */

.mai-powered {
  margin: 6px 0 0;
  font-family: var(--sf-font-body, Figtree, sans-serif);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(44, 44, 44, 0.5);
}

.mai-powered a {
  text-decoration: none;
  color: inherit;
}

.mai-powered-name {
  margin-left: 3px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--sf-color-primary, #dc4c9b);
  text-shadow:
    0 0 6px rgba(220, 76, 155, 0.45),
    0 0 18px rgba(220, 76, 155, 0.25);
  transition: text-shadow 0.25s ease, color 0.25s ease;
}

.mai-powered a:hover .mai-powered-name {
  color: #ff5fb0;
  text-shadow:
    0 0 8px rgba(220, 76, 155, 0.65),
    0 0 24px rgba(220, 76, 155, 0.4),
    0 0 42px rgba(220, 76, 155, 0.2);
}

/* Bij "minder beweging" de overgang eruit; de glow blijft. */
@media (prefers-reduced-motion: reduce) {
  .mai-powered-name { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIEL — overflow, afgesneden inhoud en layout
   Alles hieronder staat bewust in één blok en uitsluitend in media queries van
   900px of smaller: de desktop mag geen millimeter verschuiven. Elke regel is
   met een DOM-meting onderbouwd; de gemeten getallen staan in het commentaar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Footer: 2px zijwaartse scroll op elke pagina ──────────────────────────
   Op 360px was documentElement.scrollWidth 362 tegen een viewport van 360, op
   home, /shop/, /faq/ en de productpagina's. Oorzaak: .mai-footer-cols kreeg
   onder 900px "1fr 1fr", en 1fr heeft een min-content-bodem. Kolom 1 zakte niet
   onder 158px (de social-rij: 4 x 32px + 3 x 10px gap) en kolom 2 niet onder
   144,4px ("info@marieannitis.com" breekt nergens af). 158 + 36 gap + 144,4 =
   338,4 in een container van 312. minmax(0,1fr) haalt die bodem weg, maar dan
   moet de inhoud ook echt kunnen afbreken - vandaar overflow-wrap op de tekst.

   De eerste versie hing er ook flex-wrap op de iconenrij aan. Dat kostte op
   360px het vierde icoon: de kolom is daar 146px en vier iconen van 32px met
   10px gap hebben er 158 nodig, dus WhatsApp zakte naar een tweede regel.
   Gemeten: .mai-social 158x32 (iconen op L=24/66/108/150) werd 146x74,
   .mai-footer-cols 501,5 -> 543,5px en daardoor werd elke pagina 42px langer
   (/cart/ leeg @360: 3514 -> 3556px). Op 390 en 430 is de kolom 161 resp.
   181px breed, daar paste de rij al en veranderde er niets.
   De gap verkleinen zou de iconen onder de 8px tussenruimte duwen die de
   tikdoel-controle hanteert, dus in plaats daarvan krijgt de social-kolom de
   ruimte die er toch al is: hij is het vijfde en laatste blok en staat in een
   raster van twee kolommen dus alleen op zijn rij, met 146px ernaast leeg.
   Over beide kolommen gespannen is hij 312px breed en past de rij ruim.
   Visueel verandert er niets: de h4 "Social Link" is linksuitgelijnde tekst
   zonder lijn of vlak eronder, dus een bredere kolom is niet te zien. */
@media (max-width: 900px) {
  .mai-footer-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
  }

  .mai-footer-cols p,
  .mai-footer-cols li,
  .mai-footer-cols a {
    overflow-wrap: anywhere;
  }

  .mai-footer-cols > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Service-teaser-rijen: desktopmaten op een telefoonscherm ──────────────
   #traditie hield ook op 360px zijn 90px desktoppadding aan: 180 van de 360px
   was leeg, de tekstkolom was 180px breed en de kop van 52px brak daarin in zes
   regels (h2 scrollWidth 237 tegen clientWidth 180). De sectie werd zo 1098px
   hoog. Met 20px padding wordt die kolom 320px en past het langste woord (237px)
   er ruim in; de kop mag daarom groot blijven en schaalt alleen mee naar beneden
   op de smalste toestellen - op 900px staat hij weer op de 52px van de desktop.
   #sale-faya en #live-talks stonden op 88px 40px, wat vooral verticaal ruimte
   kostte; hun horizontale padding laat ik staan omdat de beelden daar bewust tot
   aan de rand lopen. */
@media (max-width: 900px) {
  #traditie .feature-row {
    padding: 56px 40px;
    gap: 32px;
  }

  #traditie .feature-text > h2 {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.12;
  }

  #live-talks .feature-row,
  #sale-faya .feature-row {
    padding: 56px 40px;
  }
}

/* De 20px zijpadding hierboven gold tot 900px en daarmee ook op tablet, waar
   ruimte genoeg is: #traditie kwam op 768px op 56px 20px met een tekstkolom van
   728px, terwijl zusterrijen #sale-faya en #live-talks daar op 40px staan en de
   sectie op 901px terugsprong naar 84px 90px met een kolom van 314,9px. Eén
   sectie die als enige tot 20px van de rand loopt en dan ineens weer niet, leest
   als een fout. Daarom loopt #traditie nu tot 600px mee met de 40px van zijn
   buren en wordt het pas op telefoonformaat 20px - daar is het nodig, want met
   90px bleef er @360 maar 180px tekstkolom over en brak de kop in zes regels. */
@media (max-width: 600px) {
  #traditie .feature-row {
    padding: 56px 20px;
  }
}

/* Zelfde valkuil als eerder bij #traditie, maar dan bij de twee andere rijen:
   onder 900px zet het blok .feature-row op flex-direction:column, waardoor de
   flex-basis van 48% / 42% niet als breedte maar als HOOGTE gaat gelden. Beide
   .feature-img-containers stonden daardoor op 280x520px, met daarin een foto van
   347x242 (#sale-faya) resp. 358x358 (#live-talks) - 278px en 162px dood wit
   onder het beeld. De !important moet winnen van de "flex: 0 0 48% !important"
   op regel 1050/1059, die voor de desktopkolommen nodig is. Daar bovenop zet het
   blok zelf min-height:520px op .feature-img; dat is een desktopmaat en houdt de
   lege doos anders alsnog in stand. */
@media (max-width: 900px) {
  #sale-faya .feature-img,
  #sale-faya .feature-text,
  #live-talks .feature-img,
  #live-talks .feature-text {
    flex: 0 1 auto !important;
  }

  #sale-faya .feature-img,
  #live-talks .feature-img {
    min-height: 0;
  }
}

/* ── SALE / Faya Watra: productbeeld liep het scherm uit ───────────────────
   De PNG staat op width:124% zodat het blaadje op desktop buiten de kolom
   uitsteekt. Op mobiel is de rij zelf het scherm, dus dat uitsteken wordt door
   .feature-row{overflow-x:clip} weggeknipt: gemeten 27px @360, 34px @390 en 44px
   @430 - 8 tot 10% van het beeld - terwijl er links padding leegstond.
   !important omdat de desktopregel width/max-width al met !important zet. */
@media (max-width: 900px) {
  #sale-faya .feature-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }
}

/* ── Sierkoppen als PNG: content:url() schaalt niet mee ────────────────────
   #live-talks h2::before en de blogkop gebruiken content:url(). max-width klemt
   dan wel de doos, maar Chrome tekent het plaatje op zijn intrinsieke breedte
   door: v3.png is 393px breed in een doos van 320px, v6.png 357px in een doos
   van 300px. Gemeten weggeknipt aan de rechterkant: 53px @360 en 38px @390 bij
   Live talks (13% van de kop), 27px @360 en 12px @390 bij de blogkop, die
   bovendien 28px uit het midden stond omdat alleen de doos gecentreerd werd.
   Als achtergrond met contain schaalt het beeld wel mee en staat het echt in
   het midden. De aspect-ratio's zijn de werkelijke bestandsmaten. */
@media (max-width: 900px) {
  #live-talks h2::before {
    content: "";
    display: block;
    width: min(100%, 393px);
    aspect-ratio: 393 / 182;
    background: url('/wp-content/uploads/2025/02/v3.png') no-repeat left center / contain;
  }

  [data-sf-block="sf-blog-posts"] h2::before {
    content: "";
    display: block;
    margin: 0 auto;
    width: min(100%, 357px);
    aspect-ratio: 357 / 195;
    background: url('/wp-content/uploads/2025/02/v6.png') no-repeat center / contain;
  }
}

/* ── Personal Gallery: 23 tegels op één kolom ──────────────────────────────
   Het blok zet .cases-grid onder 900px op één kolom; de site-CSS overschreef
   daarvan alleen de padding (48px, wat op 360px kolommen van 264px opleverde).
   Resultaat: een blok van 5267px @360 en 5785px @390 - ruim een kwart van de
   hele pagina, aan klikloze foto's, midden in het pad naar de footer.
   Twee kolommen halveert dat. !important omdat de blokregel dezelfde
   specificiteit heeft en na de site-CSS geladen wordt. */
@media (max-width: 900px) {
  [data-sf-block="sf-cases-grid"] .cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 20px !important;
    gap: 10px;
  }
}

/* ── Productraster: één kolom onder 480px ──────────────────────────────────
   De drie rasters op de home samen waren 7056px @390 = 33% van de pagina, met
   kaarten van 358px breed en 593px hoog: ongeveer een half scherm scrollen per
   artikel, en twee producten naast elkaar vergelijken kon nooit. Boven 480px
   verandert er niets, dus tablet en desktop blijven zoals ze waren. */
@media (max-width: 480px) {
  [data-sf-block="sf-product-grid"] .sf-pg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  /* De titel stond hier op 15px om regels te sparen, maar dat maakte het
     tikdoel juist kleiner: de titellink ging van 68x21 / 71x21 / 79x21 / 89x21
     naar 61x18 / 63x18 / 64x18 / 70x18 @360. Terug naar de blokmaat van
     1,05rem (16,8px); alleen het afbreken blijft, want "baarmoeder" past niet
     in de tekstkolom. */
  [data-sf-block="sf-product-grid"] .sf-pg-card-title {
    overflow-wrap: anywhere;
  }

  /* De kaart hield hier de desktoppadding van 16/20/20px aan, waardoor er in
     een kolom van 158px maar 118px tekst overbleef: circa 16 tekens per regel.
     Met 12px zijpadding wordt dat 134px en scheelt het elke teaser twee tot
     drie regels. */
  [data-sf-block="sf-product-grid"] .sf-pg-card-body {
    padding: 12px 12px 14px;
  }

  /* Er stond hier een -webkit-line-clamp van 3 regels op. Dat knipte in een
     kolom van 118px 60-70% van elke teaser weg: gemeten scrollHeight 199-243px
     in een clientHeight van 66px, tien afgesneden tekstblokken op de home en
     zes op /faya-watra-guide/, waar de nulmeting er nul had. Een productteaser
     die na anderhalve zin ophoudt zonder "lees meer" is geen samenvatting maar
     een fout, dus de clamp is eruit. Het afbreken blijft: zonder
     overflow-wrap duwde "baarmoeder" de alinea naar scrollWidth 138 in 118. */
  [data-sf-block="sf-product-grid"] .sf-pg-excerpt {
    overflow-wrap: anywhere;
  }

  /* De knop was 103x37 en dus geen geldig tikdoel; over de volle kaartbreedte
     is hij meteen ruim boven de 44px. */
  [data-sf-block="sf-product-grid"] .sf-pg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
}

/* ── Shop: winkelwagenknop stak buiten de kaart ────────────────────────────
   Op 360px is li.product 157,4px breed en de knop 151,2px met 16px rechtermarge
   erbij: de rechterkant werd 9,8px weggeknipt door de overflow:hidden op de
   kaart, bij de tien simple-producten. De knop over de volle kaartbreedte is
   meteen een groter tikdoel; min-height houdt hem op de WCAG-maat.
   De variabele producten ("Opties selecteren") gaan mee: hun 16px rechtermarge
   liet li.product 164px scrollen in 157px. Daar wordt niets zichtbaars
   afgesneden, maar het houdt de kaarten gelijk en de meting schoon. */
@media (max-width: 600px) {
  .woocommerce ul.products li.product a.button {
    display: block;
    width: auto;
    margin: 14px 12px 0;
    padding: 14px 10px;
    min-height: 44px;
    font-size: 14px;
  }
}

/* ── Shop: de filterbalk moet alle tien categorieen laten zien ─────────────
   De vorige poging maakte er één veegbare rij van om verticale ruimte te winnen
   (nav 217px hoog @360, eerste productkaart op y=710 van 844). Dat is
   teruggedraaid: de tien pillen zijn samen 1237px breed in een venster van
   328-398px, dus acht ervan stonden buiten beeld zonder scrollbar, verloop of
   pijl die dat verraadt. Erger nog op een gefilterde pagina: op
   /product-category/pumpum-products/ @390 stond de actieve pil op x=1094,7 bij
   scrollLeft=0 - 721px buiten beeld - dus je zag nergens meer welk filter aanstond.
   Zonder JS is er geen manier om die pil in beeld te scrollen, dus wrappen is
   hier de enige oplossing die de balk leesbaar houdt.
   De 44px tikmaat uit de vorige ronde blijft (de pillen waren met 7px padding
   maar 33px hoog). Om de hoogte die dat kost terug te verdienen gaat de
   horizontale padding van 14 naar 12px en de gap van 8 naar 6px: dat scheelt
   genoeg breedte om op 358px drie pillen per rij te houden in plaats van twee.
   De verticale padding vervalt omdat min-height de hoogte al bepaalt. */
@media (max-width: 767px) {
  .mai-filter-cats {
    gap: 6px;
  }

  .mai-pill {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
  }
}

/* ── Prijsfilter: 10px zijwaartse scroll op elke gefilterde categoriepagina ─
   Geen regressie van de vorige ronde maar een bug die daar gemist is, omdat hij
   alleen zichtbaar is als er iets te wissen valt: de "Wis filters"-link staat
   niet op /shop/ maar wel op /product-category/*. Met die link erbij wordt
   form.mai-filter-price een niet-brekende rij van 354,4px in een container van
   328 en meldt documentElement.scrollWidth 370 tegen een viewport van 360.
   De link werd bovendien tot 33,1px platgedrukt, dus "Wis filters" was
   onleesbaar. Laten afbreken lost beide op; de twee prijsvelden blijven naast
   elkaar staan omdat ze samen met de gap maar 156px zijn. */
@media (max-width: 767px) {
  .mai-filter-price {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* ── Productpagina: de attributentabel kantelde de pagina 257px weg ────────
   Na het openen van het tabblad "Aanvullende informatie" op /product/boma-olie/
   sprong document.scrollWidth van 362 naar 617 bij een viewport van 360. In de
   cel staat niet-uitgevoerde shortcode-tekst met twee automatisch gelinkte
   TikTok-URL's van 545px en 548px breed, die de tabel op 601px duwden.
   table-layout:fixed dwingt de tabel binnen de 328px die er is; het afbreken
   moet er los bij, anders puilt de lange URL gewoon uit de cel.
   Let op: dit dekt het symptoom af. De shortcode-tekst (en "Gewicht 100 kg"
   voor een flesje olie) hoort uit de WooCommerce-productdata zelf weg. */
@media (max-width: 900px) {
  .woocommerce-Tabs-panel--additional_information table.shop_attributes {
    table-layout: fixed;
    width: 100%;
  }

  .woocommerce-Tabs-panel--additional_information table.shop_attributes th,
  .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ── Productpagina: de korte beschrijving blijft staan waar hij staat ──────
   Hier stond een fix voor de 907px tussen de foto en de koopknop op
   /product/kraspoentje/ @360: de korte beschrijving (gemeten 473,2px hoog)
   staat in de DOM tussen de prijs en het koopformulier, en die werd met
   order: 1 naar onder het koopblok geschoven. Dat is teruggedraaid, samen met
   het display:flex dat er alleen stond om die order te laten werken.

   Reden: order verplaatst alleen het beeld, niet de voorleesvolgorde. Gemeten
   op /product/boma-olie/ @390 liep de volgorde uiteen - visueel titel, prijs,
   voorraad, koopknop, meta, en pas als laatste de beschrijving, terwijl een
   schermlezer of tab-route de beschrijving nog steeds vóór het formulier
   kreeg. Dezelfde afwijking op /product/kraspoentje/ @360. Wie kijkt en wie
   luistert krijgen dan een andere pagina, en dat weegt zwaarder dan de
   scrollafstand. Op desktop staat de beschrijving trouwens óók tussen de prijs
   en het formulier, dus zonder order volgt mobiel gewoon de desktop.

   De scrollafstand blijft dus bestaan: koopknop op /product/kraspoentje/ @360
   weer op y=1504,4 in plaats van y=1009,2. Dat is met CSS alleen niet eerlijk
   op te lossen - de beschrijving moet in de DOM zelf later komen, en dat is
   een kwestie van de prioriteit van
   woocommerce_template_single_excerpt op de woocommerce_single_product_summary
   -hook. Dat hoort in de template, niet in dit bestand. Afkappen met
   line-clamp is geen alternatief: het gaat om een opsomming plus drie alinea's
   productinformatie. */

/* ── Productpagina: 15px fantoombreedte onder de variantkeuze ──────────────
   De select#weights is precies zo breed als de contentkolom (328px op 360) en
   krijgt uit WooCommerce-core nog 15px rechtermarge voor de "Wissen"-link.
   Daardoor meldden td.value, tr, tbody, table.variations, form en div.summary
   allemaal scrollWidth 343 tegen clientWidth 328. Er wordt vandaag niets
   zichtbaar afgesneden, maar het maakt elke overflow-meting op deze pagina
   onbetrouwbaar. Op mobiel valt de "Wissen"-link toch onder de select. */
@media (max-width: 900px) {
  .woocommerce div.product form.cart select,
  .woocommerce div.product form.cart .variations td.value select {
    margin-right: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Kaarten in kaarten: 40% van het scherm was marge ──────────────────────
   Op /contact/ @360 had .features-section 40px zijpadding en de .feature-card
   daarbinnen nog eens 32px: 72px per kant, waardoor de kaarttekst op 214px
   uitkwam (circa 31 tekens per regel). Bij .value-card op /over-.../ was het
   40 + 36 = 76px per kant en 206px tekst. Met 20px buiten en 20px binnen komt
   de tekst op 280px en blijft de marge nog comfortabel. Bij sf-values zit de
   buitenste padding niet op .section-inner maar op .values-section (regel 487);
   die moet dus mee, anders blijft de kaart op 260px staan in een grid-kolom van
   240 - de minmax(260px,1fr) van het blok liet de kaart daar zelfs 20px buiten
   zijn eigen grid steken. */
@media (max-width: 600px) {
  [data-sf-block="sf-feature-grid"] .features-section {
    padding: 56px 20px;
  }

  [data-sf-block="sf-feature-grid"] .feature-card {
    padding: 24px 20px;
  }

  [data-sf-block="sf-values"] .values-section {
    padding: 56px 20px;
  }

  [data-sf-block="sf-values"] .value-card {
    padding: 24px 20px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIEL — beeld en typografie
   Alles hieronder staat bewust in @media (max-width: ...) van 900px of kleiner.
   De desktop mag niet verschuiven, dus geen enkele regel buiten een query.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Winkelwagen-zijpaneel bedekte het hele telefoonscherm ─────────────────
   Op 390 was het paneel gemeten 390x844 op L=0: exact de volle viewport, dus
   0px backdrop over. De gebruikelijke uitweg — naast het paneel tikken — bestond
   op telefoon domweg niet. Escape is wel gebonden (site-cart-drawer.php 202)
   maar heeft een telefoon niet, en swipe-to-close is er niet. De enige uitweg
   was de sluitknop van 36x36.
   Oorzaak: width: 100vw in de bestaande @media (max-width: 520px) hierboven;
   die query staat eerder in dit bestand, dus deze latere regel met dezelfde
   specificiteit wint zonder !important. Met 52px overblijvende backdrop houdt
   het paneel op 390 nog 338px inhoud — ruim genoeg voor de regelkaartjes — en
   is er links een tikbare strook om weg te tikken.
   De min(420px, ...) voorkomt een sprong bij de breekpuntgrens: zonder die cap
   was het paneel op precies 520px 468px breed en op 521px ineens 420px.
   Buiten 520px blijft min(420px, 92vw) staan: gemeten 420px op 1280 en 1440. */
@media (max-width: 520px) {
  .mai-cart-drawer {
    width: min(420px, calc(100vw - 52px));
  }
}

/* De sluitknop was met 36x36 het enige alternatief voor de (nu wel aanwezige)
   backdrop en bleef daarmee onder de 44x44 uit WCAG 2.5.5. Op telefoon dus
   opgerekt naar 44x44; het icoon zelf blijft even groot omdat de knop een
   grid met place-items:center is. */
@media (max-width: 900px) {
  .mai-drawer-close {
    width: 44px;
    height: 44px;
  }
}

/* ── Telefoon-mockup in #live-talks raakte beide schermranden ──────────────
   De desktopregel op regel 358 schaalt MockUp.png naar 128% om de ingebakken
   transparante rand te compenseren. Op telefoon staat de rij in één kolom, dus
   die 128% rekent over de volle breedte: gemeten @390 img 396.8px breed op
   L=-3.39 / R=393.41 (3,4px per kant weg) en @430 448px op L=-9 / R=439 (9px
   per kant). De .feature-row meldde daardoor scrollWidth 393 tegen clientWidth
   390, resp. 439 tegen 430. Alles eromheen heeft 20-40px marge, dus rand-tot-rand
   ziet er als een fout uit.
   Die 128% terugzetten naar 100% was het verkeerde middel. MockUp.png heeft een
   dikke transparante rand ingebakken: het ondoorzichtige deel is maar 54,2% van
   de bestandsbreedte, en juist daarom staat er 128% op. Met 100% kromp de
   zichtbare telefoon mee: @360 van ~194px naar ~152px, @390 van ~215px naar
   ~168px - 22% kleiner, terwijl er niets mis was met het formaat.
   De 3,4px per kant die uitstaken zijn geen beeld maar lege rand, dus die mogen
   gewoon weg. Dat gebeurt al: .feature-row heeft onder 900px overflow-x:clip
   (zie de regel bij "Beeld in een feature-row"). Gemeten na het weghalen van de
   100%: documentElement.scrollWidth 360 / 390 / 430 = viewport, dus de pagina
   scrolt nergens meer opzij en de telefoon staat weer op 358,4 / 396,8 / 448px.
   De clip hieronder herhaalt bewust wat de generieke regel bij "Beeld in een
   feature-row" al doet: die hangt aan [data-sf-block] .feature-row, en dat deze
   sectie daaronder valt is een aanname die je hier niet wilt maken. */
@media (max-width: 900px) {
  #live-talks .feature-row {
    overflow-x: clip;
  }
}

/* ── Sectiekoppen stonden nog op de desktopmaat van 36px/54px ──────────────
   Op /contact/ was de kop "Ons team van experts staat klaar..." @360 gemeten op
   320x270px: 32% van de 844px schermhoogte aan één tussenkop, voordat er iets
   van inhoud in beeld kwam. Op 1280 is diezelfde kop 108px hoog (13%) — de kop
   is dus 1:1 van desktop overgenomen zonder mobiele stap.
   Let op de selectors: sf-feature-grid heeft géén .section-title (dat leverde 0
   matches op), de kop zit daar in .features-title. En de 36px komt bij
   sf-feature-grid uit blocks/sf-feature-grid/style.css:8 met specificiteit
   (0,2,1); door .features-section mee te nemen komt deze regel op (0,3,1) en
   wint hij ongeacht de laadvolgorde van de stylesheets — geen !important nodig. */
@media (max-width: 600px) {
  [data-sf-block="sf-feature-grid"] .features-section .features-title h2,
  [data-sf-block="sf-values"] .values-section .section-title h2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIEL — formuliervelden en het afrekenpad
   Alles hieronder staat bewust in @media (max-width: ...) van 900px of kleiner.
   Rode draad: elk veld dat je met een vinger aanraakt moet minstens 16px tekst
   hebben, anders zoomt iOS Safari bij focus in de pagina in en zoomt daarna
   niet terug. Dat is geen schoonheidsfoutje maar het punt waarop een bezoeker
   halverwege het bestellen op een uitvergrote, opzij geschoven pagina staat.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Productpagina: aantalveld en variantkiezer zoomden de pagina in ───────
   Gemeten @360 op /product/kraspoentje/: select#weights 328x58 op 15px en
   input.qty 68x50 op 15px; op /product/boma-olie/ hetzelfde aantalveld. Dat
   zijn precies de twee velden die je moet aanraken om te bestellen, en allebei
   zitten ze onder de 16px-grens van iOS. De maten van de velden zelf blijven
   ongemoeid (de select heeft vaste padding, het aantalveld een vaste 68x50),
   dus dit kost geen ruimte. */
@media (max-width: 900px) {
  .woocommerce div.product form.cart .quantity input.qty,
  .woocommerce div.product form.cart select,
  .woocommerce div.product form.cart .variations select {
    font-size: 16px;
  }
}

/* ── Productpagina: koopknop en aantalveld raakten elkaar en de knop was smal
   WooCommerce zet div.quantity en de koopknop allebei op float:left. Op 360px
   is de kolom 328px en zijn ze samen 68 + 12 marge + 271,3 = 351,3px, dus de
   knop viel naar de volgende regel. Gemeten: quantity 68x50 op T=1454,4 en de
   knop 271,3x50 op T=1504,4 - twee regels met 0px lucht ertussen, en rechts
   van de knop bleef 56,7px leeg. De belangrijkste knop van de winkel zag er zo
   uit als een afgeknepen blok dat tegen het aantalveld aan plakt.
   Met een flexrij vult de knop de rest van de regel op en komt er 10px tussen.
   De :has() is nodig omdat de twee elementen bij een eenvoudig product direct
   in form.cart staan (boma-olie) en bij een variabel product in
   .woocommerce-variation-add-to-cart (kraspoentje). Zonder :has() zou form.cart
   bij een variabel product óók flex worden en dan gaat de variantentabel
   ernaast staan. Browsers zonder :has() houden gewoon de floats van nu. */
@media (max-width: 900px) {
  .woocommerce div.product form.cart:has(> div.quantity),
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  /* WooCommerce hangt een clearfix aan het formulier
     (form.cart::before/::after met content:" " en display:table). In een
     flexrij tellen die als volwaardige flexitems van 0px breed, en dus als
     twee extra gaten van 10px: gemeten stond het aantalveld op L=26 in plaats
     van L=16 en werd de knop 318 in plaats van 328px. Zonder floats is de
     clearfix nergens meer voor nodig. */
  .woocommerce div.product form.cart:has(> div.quantity)::before,
  .woocommerce div.product form.cart:has(> div.quantity)::after {
    content: none;
  }

  .woocommerce div.product form.cart div.quantity {
    float: none;
    margin: 0;
    flex: 0 0 auto;
  }

  .woocommerce div.product form.cart .button.single_add_to_cart_button {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
}

/* ── Zoekveld in de kop: 14px, op elke pagina van de site ─────────────────
   Gemeten 268x39 op 14px @360/390/430. Het zoekveld staat onder 900px op een
   eigen regel over de volle breedte (zie de header-query hierboven), dus het
   is op telefoon juist prominent - en het is meteen het eerste veld waar
   iemand op tikt. Op 16px wordt het veld 268x46 en de kop 137 -> 140px hoog;
   die 3px is de prijs voor een pagina die niet meer inzoomt.
   De zoekknop ernaast was 42x39 en blijft daarmee net onder de 44px; met
   min-width erbij wordt hij 44x46. Deze regels staan later in het bestand dan
   de basisregel op regel ~1433 en hebben dezelfde specificiteit, dus ze winnen
   zonder !important. */
@media (max-width: 900px) {
  .mai-search input[type="search"] {
    font-size: 16px;
    padding: 11px 12px;
  }

  .mai-search button {
    min-width: 44px;
  }
}

/* ── Nieuwsbriefvelden in de voettekst en op de contactpagina ─────────────
   input#sf-name en input#sf-email staan op 14px (gemeten 151x47 @360) op
   werkelijk elke pagina, want het inschrijfblok zit in de voettekst. Wie zich
   inschrijft krijgt dus een ingezoomde pagina terug.
   De bron is .sf-form input.sf-form-input in de formulieren-plugin
   (includes/salesfision-forms-plugin/assets/frontend.css:120) met dezelfde
   specificiteit; die stylesheet staat los van dit bestand, dus de selector
   krijgt hier .mai-newsletter / .mai-subscribe ervoor om zeker te winnen
   ongeacht de laadvolgorde. */
@media (max-width: 900px) {
  .mai-newsletter .sf-form input.sf-form-input,
  .mai-newsletter .sf-form select.sf-form-input,
  .mai-newsletter .sf-form textarea.sf-form-input,
  .mai-subscribe .sf-form input.sf-form-input,
  .mai-subscribe .sf-form select.sf-form-input,
  .mai-subscribe .sf-form textarea.sf-form-input {
    font-size: 16px;
  }
}

/* ── Contactformulier: zeven velden op 14px op precies het pad waar mensen
   afhaken ────────────────────────────────────────────────────────────────
   Gemeten op /contact/ @360: #fullname, #phone en #email 206x42 en
   #message 206x120, allemaal op 14px. Bij elk van die vier zoomt iOS in bij
   focus. De blokregel (blocks/sf-contact-details/style.css:41) heeft dezelfde
   specificiteit als deze; de reskin-laag wint daar al van (de gemeten padding
   is 10px 2px uit dit bestand en niet de 14px 16px uit het blok), dus een
   gelijk opgebouwde selector is genoeg. De velden groeien van 42 naar 46px
   hoog, wat ze meteen ook als tikdoel op maat brengt. */
@media (max-width: 900px) {
  [data-sf-block="sf-contact-details"] .form-group input,
  [data-sf-block="sf-contact-details"] .form-group textarea {
    font-size: 16px;
  }
}

/* ── Contactkaart: een kwart van het scherm was zijpadding ────────────────
   De kaart houdt op telefoon de desktoppadding van 40px 36px aan. Op 360px is
   .contact-form 280px breed, dus 72 van die 280px (26%) is padding en blijft
   er 206px invoerbreedte over - terwijl links en rechts van de kaart ook nog
   eens 40px leeg is. Met 28px 20px wordt het veld 238px.
   Let op: de bronregel (regel ~654) noemt ook .contact-card, maar die selector
   matcht op deze site 0 elementen; alleen .contact-form bestaat echt. */
@media (max-width: 600px) {
  [data-sf-block="sf-contact-details"] .contact-form {
    padding: 28px 20px;
  }
}

/* ── Prijsfilter op /shop/ en de categoriepagina's ────────────────────────
   Gemeten @360: input#mai-min-price en #mai-max-price 74x37 op 14px en de
   knop "Toepassen" 99,3x37. Drie tikdoelen van 37px hoog naast elkaar, plus
   bij de twee invoervelden dezelfde inzoomval van iOS.
   Alleen de tekst vergroten is hier niet genoeg en zelfs gevaarlijk: het
   formulier is een flexrij, dus zonder afbreken groeit het van 313,3 naar
   365,3px in een container van 328 en maak je zelf nieuwe zijwaartse scroll.
   Dat afbreken staat al in de query bij "Prijsfilter: 10px zijwaartse scroll"
   hierboven en geldt tot 767px; daar is het ook alleen nodig. Deze regels
   lopen bewust wél door tot 900px, want de inzoomval van iOS hangt niet aan
   de schermbreedte: een iPad in portret is 768px breed en zoomt bij focus
   net zo hard in. Gemeten op 767 zonder afbreken past het formulier daar nog
   ruim in één rij (374,9x48 in de filterbalk), dus dat kost geen overflow.
   De velden gaan van 74 naar 100px zodat een prijs van vier cijfers er op
   16px nog in past. */
@media (max-width: 900px) {
  .mai-filter-price input {
    width: 100px;
    padding: 11px 10px;
    font-size: 16px;
  }

  .mai-filter-price button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 16px;
  }
}

/* ── Sorteerkeuze op /shop/: een keuzelijst van 21px hoog ─────────────────
   select.orderby is 278x21 gemeten @360. De tekst staat wel op 16px, dus
   inzoomen doet hij niet, maar 21px is met een vinger niet te raken - en het
   is de enige manier om op prijs te sorteren. Het is een kale browser-select
   zonder eigen regel in dit bestand, vandaar dat hier ook de padding moet. */
@media (max-width: 900px) {
  .woocommerce .woocommerce-ordering select.orderby {
    min-height: 44px;
    padding: 0 10px;
    max-width: 100%;
  }
}

/* ── Afrekenen: de vinkjes vlak voor het betalen ──────────────────────────
   Op /checkout/ (gemeten met een gevulde mand; met een lege mand stuurt
   WooCommerce je met een 302 naar /cart/ en meet je de verkeerde pagina)
   staan drie vinkregels: "account aanmaken", "verzendadres = factuuradres" en
   het akkoord op de algemene voorwaarden. Het vinkje zelf is 20x20, maar het
   hele label is klikbaar - alleen is dat label 307,9x20, 267,7x20 en
   248,2x20. Breed genoeg dus, maar 20px hoog: dat is met een duim mikken op
   het laatste scherm voor de betaling. Het label is al inline-flex, dus een
   ondergrens van 44px met de inhoud verticaal gecentreerd verandert niets aan
   het uiterlijk en maakt het raakvlak drie keer zo hoog. */
@media (max-width: 900px) {
  .wc-block-components-checkbox label {
    min-height: 44px;
    align-items: center;
  }
}

/* ── Afrekenen: het besteloverzicht had de kleinste tekst van de site ─────
   Hetzelfde overzicht staat op /cart/ en op /checkout/, met een eigen
   blokklasse per pagina; beide krijgen hieronder dezelfde behandeling.
   Zeven soorten tekst onder de 12px, precies op het punt waar iemand
   controleert wat hij gaat betalen: de productomschrijving, het aantalbolletje,
   "Bespaar € 49,95", de bedragen en de btw-regel staan allemaal op 11,375px, en
   "Gratis verzending" op 9,95px.
   Die maten komen niet uit gewone regels maar uit twee WordPress-presetvariabelen:
   WooCommerce schrijft overal font-size: var(--wp--preset--font-size--x-small)
   en var(--wp--preset--font-size--small), en die staan op deze site op 11,375
   resp. 13px. Een gewone font-size-regel ernaast verliest: de bronregels staan
   in de blocks-stylesheet, die ná dit bestand laadt, dus bij gelijke
   specificiteit wint die altijd. De variabelen zelf overschrijven werkt wel en
   is bovendien preciezer, want het blijft binnen het overzichtblok: de presets
   op :root veranderen niet, dus de rest van de site merkt er niets van.
   x-small op 13px haalt de vijf 11,375-gevallen boven de ondergrens voor
   lopende tekst; small op 15px tilt het blok zelf mee, zodat de em-maten die
   daaraan hangen (de "Bespaar"-badge is 0,875em) ook meestijgen.
   "Gratis verzending" hangt nog een em-niveau dieper en blijft daarmee onder de
   12px, dus die krijgt een eigen ondergrens. De bronregel daarvoor is
   .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via
   (0,2,0), dus er moet een derde klasse voor om zonder !important te winnen. */
@media (max-width: 900px) {
  .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
  .wc-block-cart .wp-block-woocommerce-cart-order-summary-block,
  .wc-block-cart .wp-block-woocommerce-cart-line-items-block {
    --wp--preset--font-size--x-small: 13px;
    --wp--preset--font-size--small: 15px;
  }

  .wc-block-checkout .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via,
  .wc-block-cart .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via {
    font-size: 13px;
  }
}

/* ── Afrekenen: de knop waar alles om draait was 39px hoog ────────────────
   "Plaats bestelling" meet 328x39 @360 - de laatste handeling van het hele
   koopproces, onder de 44x44 van WCAG 2.5.5. Breedte is er genoeg (hij staat
   al op 100%), alleen de hoogte ontbreekt.
   Die 39px is 3em van de 13px waarop de knop staat, uit
   body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link)
   in de blocks-stylesheet. Dat is specificiteit (0,3,1) en die stylesheet laadt
   ná dit bestand, dus een eenvoudige regel op de knop deed niets - gemeten bleef
   hij 328x39. Vier klassen komt daarboven, zonder !important. */
@media (max-width: 900px) {
  .wc-block-checkout .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button {
    min-height: 44px;
  }
}

/* ── Afrekenen: twee schakelaars van 18 en 21px hoog ──────────────────────
   Nog twee dingen die je op het afrekenscherm moet kunnen raken en die te plat
   zijn: "+ appartement, suite enz. toevoegen" is 328x18,2 en de balk
   "Waardebonnen toevoegen" 294x21 (gemeten @360). Allebei lopen ze over de
   volle breedte, dus alleen de hoogte ontbreekt. Wie op een telefoon een
   huisnummertoevoeging of een kortingscode kwijt wil, moet nu op een strook van
   twee regels tekst mikken.
   Bij de eerste staat de bestaande margin-top van 12px in de weg als je er
   padding op zet, dus die gaat naar 4px: de regel komt dan optisch op dezelfde
   plek te staan en het raakvlak groeit naar boven en beneden. */
@media (max-width: 900px) {
  .wc-block-components-address-form__address_2-toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
  }

  .wc-block-components-panel__button {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Afrekenen: de link naar de algemene voorwaarden ──────────────────────
   137,8x15 gemeten @360, midden in een lopende alinea van twee regels vlak
   boven "Plaats bestelling". Het is de enige link op dat scherm die je hoort
   te kunnen openen voordat je betaalt.
   Groter maken kan hier niet met min-height: het is een inline link in een
   alinea, en display:block zou de zin in drieen breken. Padding op een inline
   element vergroot wel het raakvlak maar niet de regelhoogte, dus de alinea
   blijft even hoog staan: gemeten blijft .wc-block-checkout__terms 328x36,4 en
   groeit alleen de link naar 137,8x41. Boven en onder de link staat geen ander
   tikdoel, dus die uitloop botst nergens mee. */
@media (max-width: 900px) {
  .wc-block-checkout__terms a {
    padding: 13px 0;
  }
}

/* ── Winkelwagen: het aantal bijstellen was een tikdoel van 21,6px ────────
   Gemeten op /cart/ @360 met een gevulde mand: het aantalveld is 45x21,6 op
   13px en de knoppen − en + zijn 30x21,6. Het veld zoomt dus bij focus in, en
   de twee knoppen die je op een telefoon in de praktijk gebruikt zijn nog geen
   half tikdoel hoog. Dit is de laatste stap vóór afrekenen.
   Alleen de hoogte is hier op te lossen zonder de rij te verbouwen: de
   aantalkiezer deelt een kolom van 159px met de verwijderknop, dus er is geen
   ruimte om de knoppen ook 44px breed te maken (44+44+44 plus de
   verwijderknop past niet). 30x44 is wat er wel in past. */
@media (max-width: 900px) {
  .wc-block-components-quantity-selector {
    min-height: 44px;
  }

  .wc-block-components-quantity-selector__button {
    min-height: 44px;
  }

  /* De maat van het aantalveld komt niet uit een gewone regel maar uit
     font-size: var(--wp--preset--font-size--small) in
     .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input
     (0,2,1) uit de blocks-stylesheet, die ná dit bestand laadt. Een regel met
     dezelfde opbouw verloor dan ook: gemeten bleef het veld op 13px staan.
     Met .wc-block-cart ervoor komt hij op (0,3,1) en wint hij wel. */
  .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    min-height: 44px;
    font-size: 16px;
  }
}

/* ── Winkelwagen: de artikelrij werd 14px breder dan zijn kolom ────────────
   De twee regels hierboven (16px tekst tegen iOS-zoom, 44px hoog als tikdoel)
   maakten de aantalkiezer breder: gemeten @360 met een gevulde mand groeide
   table.wc-block-cart-items van 329,8 naar 341,6px in een .wc-block-cart__main
   van 328px. De prijskolom viel daardoor rechts buiten de kaart - de pagina
   zelf scrolt niet (scrollWidth blijft 360), dus het bedrag werd stilletjes
   afgeknipt.
   De rij is een grid van 80px + 132px + 27px + 102,6px. De aantalkiezer heeft
   een vaste breedte van 107px; het invoerveld erin staat op flex: 1 1 auto en
   krimpt dus vanzelf mee als de kiezer smaller wordt. Daarom pakken we de
   kiezer en niet het veld - een regel op het veld zelf deed niets, gemeten
   bleef het op 45px staan. De min- en plusknop blijven 30px breed en 44px
   hoog; een tweecijferig aantal past ruim in wat er overblijft. */
@media (max-width: 420px) {
  .wc-block-cart .wc-block-components-quantity-selector {
    width: 92px;
  }

  /* Zonder deze regel houdt het veld 40px aan (eigen padding) en past de som
     30 + 40 + 30 niet in de 92px van de kiezer: de plusknop stak dan 9px buiten
     het kader en kwam tot 3px van het verwijderkruisje, waarvan het raakvlak
     4px naar links doorloopt. Die twee zouden elkaar dus overlappen - een
     misser bij "één erbij" wist het artikel. Met 32px klopt de som precies. */
  .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    width: 32px;
    flex: 0 0 32px;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIEL — tikdoelen
   Alles hieronder staat bewust in @media (max-width: ...) van 900px of kleiner.
   Wat op desktop met een muispunt van één pixel prima werkt, is met een duim
   van ~9mm te klein; de norm is 44x44 CSS-px met 8px ertussen (WCAG 2.5.5 /
   Apple HIG). Waar het uiterlijk niet mag veranderen groeit alleen het
   raakvlak, niet het zichtbare vlak.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Winkelwagen: het verwijderkruisje was 24x24 ───────────────────────────
   Gemeten @360 en @390: button.wc-block-cart-item__remove-link 24x24, zonder
   klikbare voorouder, en 12px naast de +-knop van de aantalkiezer. Dat is nog
   niet de helft van 44x44, terwijl het de enige onomkeerbare handeling in de
   rij is.
   De knop echt 44x44 maken kan hier niet. De rij is een grid en de
   productkolom groeit dan mee: gemeten met min-width/min-height 44px werd de
   rij 341,6 → 361,6px breed en kreeg /cart/ 18px zijwaartse scroll
   (scrollWidth 378 bij een viewport van 360). Daarom groeit alleen het
   raakvlak, met een ::after-overlay die buiten de layout valt.
   De maten zijn op de omgeving gepast: de +-knop van de aantalkiezer eindigt
   op 202 en de totaalkolom begint op 255, dus een vlak van 211 tot 255 is
   precies 44px breed en houdt 9px vrij van de +-knop — een misser wist dus
   geen artikel als je er één bij wilde. Verticaal past het binnen de 46px
   hoge aantalrij. */
@media (max-width: 900px) {
  .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    position: relative;
  }

  .wc-block-cart-item__quantity .wc-block-cart-item__remove-link::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -16px;
    bottom: -10px;
    left: -4px;
  }
}

/* ── Afrekenen: "Plaats bestelling" stond op de kleinste tekst van de pagina ─
   De hoogte is hierboven al op 44px gezet, maar de knop staat nog op 13px —
   kleiner dan de labels eromheen (15px) en de invoervelden (16px). Op de
   laatste handeling van het hele koopproces leest dat als bijzaak in plaats
   van als de hoofdknop.
   De 13px komt uit body:not(.woocommerce-block-theme-has-button-styles)
   .wc-block-components-button:not(.is-link) in de blocks-stylesheet (0,3,1),
   die ná dit bestand laadt; vier klassen komen daarboven, zonder !important.
   De padding staat in em (0,75em/1,75em) en schaalt dus mee. */
@media (max-width: 900px) {
  .wc-block-checkout .wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button {
    font-size: 16px;
  }
}

/* ── Shop: paginering 36x36 met 4,8px ertussen ─────────────────────────────
   Gemeten @360: elke a.page-numbers 36x36, li met margin 0 2,4px, dus 4,8px
   tussen twee doelen. Vier doelen naast elkaar (1, 2, 3, →) die allemaal een
   andere pagina openen — mis je er één, dan sta je op de verkeerde pagina.
   De 36px is line-height: 2.25em met padding 0 uit frontend.css (0,2,3);
   .page-numbers erbij maakt er (0,3,3) van en dat wint. De li-marge is niet
   optioneel: met alleen min-width/line-height blijft de tussenruimte 4,8px.
   Vier doelen van 44 plus drie tussenruimtes van 8 is 200px en past ruim in
   de 328px die er @360 is. */
@media (max-width: 900px) {
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
    min-width: 44px;
    line-height: 44px;
  }

  .woocommerce nav.woocommerce-pagination ul.page-numbers li {
    margin: 0 4px;
  }
}

/* ── Productpagina: het beoordelingsformulier was met geen duim te bedienen ─
   Gemeten @360 met het tabblad Beoordelingen open: input#author en input#email
   allebei 247x24, inline achter hun label geplakt. Beide producten staan op
   "Beoordelingen (0)", dus dit formulier is de enige weg naar een eerste
   review — en 24px hoog is nog niet eens de helft van 44.
   Label op een eigen regel en het veld eronder over de volle breedte lost
   twee dingen tegelijk op: het raakvlak wordt 328x44 en de velden staan
   niet meer half buiten de kolom.
   De verzendknop stond op 134x40 en gaat mee naar 44. */
@media (max-width: 900px) {
  #tab-reviews .comment-form-author label,
  #tab-reviews .comment-form-email label {
    display: block;
    margin-bottom: 6px;
  }

  #tab-reviews .comment-form-author input,
  #tab-reviews .comment-form-email input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
  }

  #tab-reviews .form-submit input#submit {
    min-height: 44px;
  }
}

/* ── Productpagina: vijf sterren van 24x24 met 4px ertussen ────────────────
   Gemeten @360: p.stars a is vijf keer 24x24 met 3,9-4px ertussen, en elke
   ster is zelf het klikbare element. De hartafstand is daarmee 28px — smaller
   dan een duimafdruk, dus je geeft structureel een ster te veel of te weinig.
   De ankers staan in een <span role="group">, niet direct in p.stars, dus de
   flexrij hoort op die span. De ster zelf is een ::before van 24x24 die op
   top:0/left:0 staat; die wordt gecentreerd zodat het glyph even groot blijft
   en alleen het raakvlak groeit. Hartafstand na afloop 48px.
   Vijf doelen van 44 met 4px ertussen is 236px en past in de 328px @360. */
@media (max-width: 900px) {
  #tab-reviews p.stars > span {
    display: flex;
    gap: 4px;
  }

  #tab-reviews p.stars a {
    width: 44px;
    height: 44px;
  }

  #tab-reviews p.stars a::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ── Productpagina: tabbladen van 40px met 0px ertussen ────────────────────
   Gemeten @360: de drie li's staan al onder elkaar en raken elkaar (T=1787,9
   / 1829,9 / 1871,9 bij een hoogte van 42), en de a erin is 40px hoog. Twee
   doelen die elkaar raken zonder tussenruimte, en de a vult zijn li niet.
   De horizontale padding verhuist van de li naar de a, zodat het hele
   tabblad raakbaar wordt in plaats van alleen de tekst. De 8px marge is niet
   optioneel: zonder die marge raken de raakvlakken elkaar nog steeds.
   De hoekafrondingen van WooCommerce (li::before/::after) hangen aan
   bottom:-1px en schuiven dus vanzelf mee.
   .woocommerce div.product ervoor is nodig omdat woocommerce.css de li op
   (0,4,3) zet; zonder die twee bleef de li gemeten op padding 0 1em staan. */
@media (max-width: 900px) {
  /* De ul wordt een kolom in plaats van de li's op display:block te zetten.
     Dat laatste stond hier eerst en pakte niet: de li's bleven gemeten op
     inline-block, waardoor ze op 390px naast elkaar bleven staan en de
     margin: 0 -5px van WooCommerce ze 4px over elkaar heen trok ("Aanvullende
     informatie" lag over "Beschrijving"). Als flexitem worden ze hoe dan ook
     gestapeld, ongeacht welke display-waarde wint. */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs {
    display: flex;
    flex-direction: column;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li {
    margin-left: 0;      /* WooCommerce zet hier -5px; dat veroorzaakte de overlap */
    margin-right: 0;
    margin-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
    display: block;
    padding: 12px 16px;
  }
}

/* ── Productpagina: "Lees meer" onder een review was 19px hoog ─────────────
   Gemeten @360: vier knoppen van 60,7x19,5 (13px tekst, padding 0). De
   reviewtekst is op zes regels afgekapt, dus dit is de enige manier om de
   rest te lezen. De handler in includes/site-shop.php luistert alleen op
   .mai-review-more, dus er zit geen groter klikvlak omheen.
   De negatieve marges vangen de nieuwe padding weer op, zodat de kaart niet
   hoger wordt: -14 boven en -10 onder tegenover 2x12px padding. */
@media (max-width: 900px) {
  .mai-review-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
    margin: -14px 0 -10px;
  }
}

/* ── Productpagina: pijltjes onder de reviews 38x38, en geen peek ──────────
   Gemeten @360: beide mai-reviews-nav-knoppen exact 38x38, dus 6px onder de
   norm. En de track toont één kaart van 100% breed (scrollWidth 3064 bij
   clientWidth 328), waardoor niets verraadt dat er nog acht reviews achter
   staan. Met 88% steekt de volgende kaart 25px in beeld; dat is de hint.
   De 100%-regel is uit ronde 1 en staat hierboven met dezelfde
   specificiteit, deze staat later in het bestand en wint daarmee. */
@media (max-width: 900px) {
  .mai-reviews-nav {
    width: 44px;
    height: 44px;
  }

  .mai-shop-reviews-track {
    grid-auto-columns: 88%;
  }
}

/* ── Home: de hero-stipjes waren 10x10 ─────────────────────────────────────
   Gemeten @390: button.mai-hero-dot 10x10 (actief 11,5x11,5), padding 0,
   zonder omhullend klikvlak — effectief 12x12. Van slide wisselen is met een
   duim dus gokwerk.
   De stip moet klein blijven, dus groeit alleen het raakvlak met een
   ::after-overlay van 44x44. Dat vraagt wel meer tussenruimte: met de
   bestaande gap van 10px zouden twee overlays elkaar 34px overlappen en
   raakte je altijd dezelfde stip. Bij gap 42px was de gemeten tussenruimte
   7,2px in plaats van 8: de actieve stip staat op transform scale(1.15) en
   steekt daarmee 0,75px per kant buiten zijn layoutdoos. Op 44px gemeten
   9,2px. */
@media (max-width: 900px) {
  [data-sf-block="sf-hero"] .mai-hero-dots {
    gap: 44px;
  }

  [data-sf-block="sf-hero"] .mai-hero-dot {
    position: relative;
  }

  [data-sf-block="sf-hero"] .mai-hero-dot::after {
    content: "";
    position: absolute;
    inset: -17px;
  }
}

/* ── Kop: burger en winkelwagen op elke pagina te klein ────────────────────
   Gemeten: button.mai-burger 36x38 en a.mai-cart 77,2x22,5, geen van beide
   met een groter omhullend klikvlak. Dat zijn de twee bedieningen die op
   iedere pagina bovenaan staan.
   De dozen echt vergroten kan niet: gemeten groeit de kop dan van 137 naar
   198px, en dat duwt op elke pagina de inhoud omlaag. Dus alleen het
   raakvlak, met ::after-overlays die buiten de layout vallen.
   De ruimte is nagemeten op de krapste stand (@390, waar burger en
   winkelwagen op dezelfde regel staan): de winkelwagen eindigt op 312,4 en
   de burger-overlay begint op 326, dus 13,6px ertussen. De burger-overlay
   eindigt op 370 bij een viewport van 390. */
@media (max-width: 900px) {
  .mai-burger {
    position: relative;
  }

  .mai-burger::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -4px;
    bottom: -3px;
    left: -4px;
  }

  .mai-cart {
    position: relative;
  }

  .mai-cart::after {
    content: "";
    position: absolute;
    top: -11px;
    right: 0;
    bottom: -11px;
    left: 0;
  }
}

/* ── Voettekst: zes navigatielinks van 17px op elke pagina ─────────────────
   Gemeten @360: "Contact" 51,3x17, "FAQ" 28x17, "Boma Olie" 64x17 — allemaal
   display:inline met padding 0 en 28px hart-op-hart. Elf pixel tussen twee
   links is met een duim niet te scheiden, en dit staat onder élke pagina.
   Als blok wordt de hele kolombreedte raakbaar in plaats van alleen de
   letters; de 8px marge op de li houdt de doelen uit elkaar.
   De social-iconen waren 32x32. Die passen nu wel op 44: de social-kolom is
   in deze ronde al over de volle 312px gezet, en 4x44 + 3x10 = 206px. */
@media (max-width: 900px) {
  .mai-footer-cols li a {
    display: block;
    padding: 11px 0;
    line-height: 22px;
  }

  .mai-footer-cols li {
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .mai-social a {
    width: 44px;
    height: 44px;
  }
}

/* ── Winkelwagen-zijpaneel: kruisje 26x26 en "Naar winkelwagen" 21px hoog ──
   Gemeten @390 met .is-open: a.remove_from_cart_button 26x26 en
   a.mai-drawer-link 114,3x21. De sluitknop is in ronde 1 al op 44x44 gezet;
   dit zijn de twee die overbleven.
   Bij het kruisje kan het uiterlijk niet mee groeien - een grijze cirkel van
   44px zou de rij overheersen - dus groeit alleen het raakvlak. Daarvoor is
   ruimte nodig: de titellink van het artikel liep tot 8px van het kruisje
   (tot 676 bij een kruisje op 684). Met 18px marge rechts eindigt de titel op
   658 en past er een overlay van 666 tot 710, precies 44px met 8px
   tussenruimte. Marge in plaats van meer padding op de li, want die padding
   staat op !important (regel 3566) en zou dan zelf !important nodig hebben.
   De link eronder zit in een flexkolom met gap 10px, dus de padding duwt
   niets omhoog: de knop "Afrekenen" houdt zijn 10px afstand. */
@media (max-width: 900px) {
  .mai-drawer-body li.mini_cart_item > a:not(.remove_from_cart_button) {
    margin-right: 18px;
  }

  .mai-drawer-body a.remove_from_cart_button::after {
    content: "";
    position: absolute;
    top: -9px;
    right: 0;
    bottom: -9px;
    left: -18px;
  }

  .mai-drawer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 8px;
  }
}

/* ── Faya Watra-gids: de tekstlink naast de knop was 22,5px hoog ───────────
   Gemeten @390: a.mai-fwg-link 89,7x22,5 met padding 0, naast een knop van
   153,1x52,5. De twee horen bij elkaar als hoofd- en nevenkeuze, maar de een
   is meer dan twee keer zo hoog raakbaar als de ander.
   De rij is een flexrij met align-items:center, dus een hoger raakvlak blijft
   op dezelfde optische lijn staan: de link groeit van 636-658,5 naar
   625,8-669,8, nog steeds gecentreerd op de knop van 621-673,5. */
@media (max-width: 900px) {
  .mai-fwg-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 6px;
  }
}

/* ── Voettekst: het telefoonnummer stond als losse regel in een alinea ─────
   Gemeten @360: a[href^=tel:] 88,7x17, display:inline met padding 0, tussen
   twee regels gewone tekst in de kolom "Reach us". Bellen is voor deze winkel
   een echte actie, en 17px hoog raak je met een duim niet.
   Boven en onder staat gewone tekst, geen ander tikdoel, dus het hogere
   raakvlak botst nergens mee; de alinea wordt 16px hoger. */
@media (max-width: 900px) {
  .mai-footer-cols p a[href^="tel:"],
  .mai-footer-cols p a[href^="mailto:"] {
    display: inline-block;
    padding: 11px 0;
    line-height: 22px;
  }
}

/* ── Shop: de filterpillen stonden 6px uit elkaar ──────────────────────────
   De pillen zijn eerder in deze ronde al 44px hoog gemaakt, maar de gap ging
   daarbij van 8 naar 6px om drie pillen per regel te houden. Gemeten meldt
   [OVERLAP] daardoor negen keer "krap (6px)".
   Terug naar 8px kan alleen als de pillen 2px smaller worden: rij twee
   (Benodigdheden + Bidet + Cosmetics) is 315,2px aan pillen, en met 2x8 gap
   is dat 331,2 in een container van 328 - Cosmetics zou naar een vierde
   regel springen en het filterblok 50px hoger maken. Met 11px padding in
   plaats van 12 is die rij 309,2 + 16 = 325,2 en past hij wel. */
@media (max-width: 767px) {
  .mai-filter-cats {
    gap: 8px;
  }

  .mai-pill {
    padding: 0 11px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIEL — leesbaarheid en tekststructuur
   Alles hieronder staat bewust in @media (max-width: ...) van 900px of
   kleiner. Op een telefoon is een lange lap tekst zonder ankerpunten iets
   heel anders dan op een breed scherm: je ziet er per keer maar een derde
   van, dus wie iets zoekt moet blind doorscrollen.

   Let op bij .prose: die klasse staat in page.php en single.php om
   the_content() heen en zit dus ook om de winkelwagen- en afrekenblokken.
   Zonder afscherming ging het mis: gemeten op /cart/ met een lege mand kreeg
   ul.wc-block-grid__products opsommingstekens en 22px inspringing (de vier
   productkaarten schoven van L=8 naar L=30 mét een bolletje ernaast) en werd
   "Your cart is currently empty!" 19px met 32px lucht - de pagina groeide van
   3602 naar 3669px. Daarom staat overal body:not(.woocommerce-page) voor: de
   winkelpagina's dragen die klasse, /algemene-voorwaarden/ en de berichten
   niet.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Algemene voorwaarden: elf koppen die er niet als kop uitzien ──────────
   Gemeten @360: .prose is 328x10272 en de pagina 11820px = 14,0 schermen. In
   die hele lap staat geen enkele h1..h4 (0 treffers). De elf artikelkoppen
   zijn gewone alinea's met alleen een <strong> erin: font 16px, line-height
   24px, margin 0px - exact dezelfde maten als de 87 gewone alinea's eromheen.
   Veertien schermen doorlopende tekst zonder één ankerpunt betekent dat je
   "Artikel 4 - HERROEPINGSRECHT" (T=3634) alleen vindt door alles te lezen.
   De selector is met opzet op body.page gezet, want hij is NIET overal veilig:
   op /algemene-voorwaarden/ matcht hij precies de elf koppen, en op de enige
   andere pagina met .prose (/sample-page/) nul. Op de blogberichten matcht hij
   wél mis: op /faya-watra-herstel-na-bevalling/ zijn 5 van de 6 treffers echte
   koppen, maar de zesde is een volledig vetgedrukte inleidende alinea van 144px
   hoog. Die op 19px met 32px lucht erboven zetten zou van zes regels lopende
   tekst een kop maken die er niet is. Berichten dragen body.single-post en
   vallen dus buiten deze regel; hun echte h4-koppen krijgen hieronder een
   eigen behandeling.
   32px erboven is ruim: tussen twee alinea's staat nu 0px, dus alles boven de
   regelhoogte van 24px leest al als een breuk. */
@media (max-width: 900px) {
  body.page:not(.woocommerce-page) .prose p:has(> strong:only-child) {
    font-size: 19px;
    line-height: 1.3;
    margin: 32px 0 8px;
  }
}

/* ── Blogberichten: de h4-koppen stonden op body-maat zonder lucht ─────────
   Zelfde probleem, andere pagina's. Gemeten @390 op
   /hoe-werkt-boma-olie-voordelen-gezondheid/: vijf h4's ("Wat is Boma Olie?",
   "De Unieke Eigenschappen...", enz.) op font 16px / line-height 24px /
   margin 0px, dus niet te onderscheiden van de alinea's ertussen. Er is geen
   enkele regel in het thema die .prose-koppen aankleedt (Tailwind Typography
   wordt niet geladen), vandaar de body-maat.
   h1 staat er bewust bij: op /belang-van-ph-waarde-gezondheid/ heeft de editor
   de vijf tussenkoppen als <h1> in de inhoud gezet, ook op 16px. De echte
   paginatitel loopt geen risico - die staat in page.php en single.php als
   zusterelement vóór div.prose en valt dus buiten deze selector (gemeten:
   blijft text-3xl).
   Let op de lege koppen: Elementor heeft er per echte kop één of twee
   <h4><b></b></h4> van 0px voor gezet. Die hebben geen rand en geen padding,
   dus hun boven- en ondermarge klappen door elkaar heen en tellen samen met
   die van de echte kop maar één keer mee - gemeten blijft de afstand 32px in
   plaats van 64 of 96. */
@media (max-width: 900px) {
  body:not(.woocommerce-page) .prose h1,
  body:not(.woocommerce-page) .prose h2,
  body:not(.woocommerce-page) .prose h3,
  body:not(.woocommerce-page) .prose h4 {
    font-size: 19px;
    line-height: 1.3;
    margin: 32px 0 8px;
  }
}

/* ── Opsommingen zonder opsommingsteken ───────────────────────────────────
   Gemeten @360 op /algemene-voorwaarden/: drie ol.wp-block-list met samen 16
   li's, list-style-type: none en padding-left: 0px, dus elke li begint op
   exact dezelfde L=16 als de alinea's eromheen. Op
   /hoe-werkt-boma-olie-voordelen-gezondheid/ @390 idem: twee ul's met 6 li's
   op L=16, en op /belang-van-ph-waarde-gezondheid/ nog vier ul's en op
   /faya-watra-herstel-na-bevalling/ twee. Een opsomming is daardoor niet van
   lopende tekst te onderscheiden - op een telefoon, waar een li van 144px
   hoog al vier regels beslaat, zie je helemaal niet meer waar het ene punt
   ophoudt en het volgende begint.
   De ol's krijgen bewust géén nummer of letter: de tekst begint zelf al met
   "a) ", "b) ", "c) ". Een marker erbij zou "1. a) de identiteit..." opleveren.
   Ze krijgen alleen inspringing, zodat ze als blok van de alinea's afwijken.
   De ul's krijgen wel een bolletje, want daar staat niets in de tekst.
   De inspringing kost geen breedte-probleem: padding aan de binnenkant maakt
   de li's smaller, niet de lijst breder. */
@media (max-width: 900px) {
  body:not(.woocommerce-page) .prose ul {
    list-style: disc outside;
    padding-left: 22px;
  }

  body:not(.woocommerce-page) .prose ol {
    list-style: none;
    padding-left: 18px;
  }

  body:not(.woocommerce-page) .prose li {
    margin-bottom: 8px;
  }
}

/* ── Winkelwagen: de vaste knop bedekte permanent de onderkant ─────────────
   WooCommerce plakt "Doorgaan naar afrekenen" onderaan het scherm:
   div.wc-block-cart__submit-container--sticky, gemeten 360x80 op position:
   fixed met z-index 9999 en bottom: 0. De body had padding-bottom: 0px, dus
   die 80px komt bovenop de pagina te liggen in plaats van erachter.
   Gemeten @360 met een gevulde mand, na scrollen naar de bodem (scrollY=1643
   = maximaal): de copyrightregel staat op T=756,1 en de link "Powered by
   SALESFISION" op T=803,1 - allebei onder de knop. elementFromPoint op het
   midden van die link gaf de knop terug, niet de link. De onderste 80px van
   de winkelwagenpagina waren dus onbereikbaar, ook door te scrollen.
   96px lucht is 80px voor de knop plus 16px ruimte eronder.
   Drie afbakeningen, alle drie gemeten en niet gegokt:
   - 782px, niet 900: de --sticky-klasse staat op élke breedte in de DOM (ook
     op 1280, gemeten), maar position: fixed komt uit @media(max-width:782px)
     in cart.css. Op 783px meet dezelfde div position: static. Boven 782 zou
     de ruimte dus leeg blijven.
   - min-height 501px: cart.css zet de knop op display: none onder
     @media screen and (max-height:500px). Op een liggende telefoon is er
     niets om ruimte voor te maken.
   - :has(): met een lege mand bestaat de knop niet (0 treffers gemeten),
     en dan zou 96px onderaan een gat zijn.
   De ruimte gaat op de footer en niet op de body, omdat footer.mai-footer een
   linear-gradient als achtergrond heeft en body en html allebei doorzichtig
   zijn; padding op de body zou onder het verloop een witte strook geven. */
@media (max-width: 782px) and (min-height: 501px) {
  body.woocommerce-cart:has(.wc-block-cart__submit-container--sticky) .mai-footer {
    padding-bottom: 96px;
  }
}

/* ── Shop-archief: kaarten van ongelijke hoogte ────────────────────────────
   WooCommerce zet de kaarten nog in het float-model (ul.products.columns-4,
   li.product met percentagebreedte + margin-right). Floats rekken niet mee met
   hun buren, dus de hoogte van elke kaart volgde puur zijn eigen inhoud: een
   titel over twee regels maakte de kaart 25px hoger dan die ernaast
   (@1280 gemeten: 454px naast 429px, @900: 395px naast 345px).

   Grid lost dat op omdat items in een rij standaard stretchen. De maatvoering
   van Woo is daarbij exact overgenomen zodat er visueel niets verschuift:
   4 kolommen met 3,8% ertussen geeft 22,15% per kaart (was 22,05%), en de
   rij-afstand van 3rem is de 2.992em margin-bottom die Woo op li.product zet.
   Onder 768px schakelt Woo naar 2 kolommen van 48% met 4% ertussen.

   De kaart wordt zelf een flexkolom zodat de knop met margin-top:auto onderaan
   blijft plakken; zonder dat zou de extra hoogte als een gat ónder de knop
   vallen in plaats van boven, en stonden de knoppen in een rij weer op
   verschillende hoogtes.

   Alleen archieven en zoekresultaten: gerelateerde producten en up-sells staan
   op de productpagina (body zonder .archive/.search-results) en hebben hun eigen
   flex-regels hierboven, die al gelijke hoogtes geven. */

.archive.woocommerce ul.products,
.search-results.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3.8%;
  row-gap: 3rem;
  margin: 0;
  padding: 0;
}

/* De clearfix-pseudo's van Woo zouden anders als lege grid-items meetellen. */
.archive.woocommerce ul.products::before,
.archive.woocommerce ul.products::after,
.search-results.woocommerce ul.products::before,
.search-results.woocommerce ul.products::after {
  display: none;
}

.archive.woocommerce ul.products li.product,
.search-results.woocommerce ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* De extra hoogte gaat naar de fotolink (foto + titel + prijs), zodat de knop
   eronder blijft plakken. Niet margin-top:auto op de knop zelf: dat vervangt de
   1em die Woo bóven de knop zet, en dan raakt de knop in de hoogste kaart van
   een rij de prijs (gemeten: 454px werd 439px). */
.archive.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.search-results.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  flex: 1 1 auto;
}

/* Een flexkolom rekt zijn kinderen standaard over de volle breedte; dat zou de
   knop van 136px naar 243px trekken. De hoogte-fix hoort de knop niet te
   verbouwen, dus die houdt zijn eigen breedte.
   Vanaf 601px, want tot en met 600px is die stretch juist wat de volle-
   breedte-knop van de mobiele pass hierboven overeind houdt: die zet width:auto
   en leunt op de kaartbreedte. Met flex-start werd hij daar 90px i.p.v. 148px. */
@media (min-width: 601px) {
  .archive.woocommerce ul.products li.product > a.button,
  .search-results.woocommerce ul.products li.product > a.button {
    align-self: flex-start;
  }
}

@media (max-width: 768px) {
  .archive.woocommerce ul.products,
  .search-results.woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4%;
  }
}