/**
 * 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: platte sectie, geen kaart; ✅-lijst per regel ─────────── */
#beauty-deal .cta-card,
[data-sf-block="sf-cta"] #beauty-deal {
  background: #fff;
  border: none;
  box-shadow: none;
}

#beauty-deal p {
  white-space: pre-line;
}

/* ── 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 heeft op live GEEN knop; het blok rendert een default "See more"
 * → /service/ (bestaat niet, 404). Verbergen. */
#live-talks .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;
}

.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-header { position: relative; }
  .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: flex-start;
}
#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;
}
#traditie .feature-img img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: initial !important;   /* volledige foto, natuurlijke verhouding - geen crop */
}
#traditie .feature-text { flex: 0 1 430px !important; }

/* Het accordeon wordt via JS in #traditie .feature-text (rechterkolom) gezet,
 * dus het vult daar gewoon de kolom - geen overlap-marge nodig. */
/* Accordeon vlak onder de tekst, ZONDER overlap: geen negatieve marge (die
 * trok de kaarten over de laatste tekstregels); de kleine afstand komt van de
 * paragraaf-marge hieronder. */
.home [data-sf-block="sf-faq"] { margin-top: 0; }
#traditie .feature-text p { margin-bottom: 18px; }
.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 */
}
#traditie .feature-text .feature-sub { display: none; }   /* lege subkop weg */
.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; }

/* Rij-layout: [icoon] titel .......... [chevron] */
.home [data-sf-block="sf-faq"] details.faq-item summary {
  justify-content: flex-start;
  gap: 14px;
}
.home [data-sf-block="sf-faq"] details.faq-item summary::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  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(/wp-content/uploads/2025/02/Icons-06.png);   /* vijzel/kruiden */
}
.home [data-sf-block="sf-faq"] details.faq-item:nth-of-type(2) summary::before {
  background-image: url(/wp-content/uploads/2025/02/Icons-04.png);   /* druppel */
}
.home [data-sf-block="sf-faq"] details.faq-item:nth-of-type(3) summary::before {
  background-image: url(/wp-content/uploads/2025/02/Icons-08.png);   /* vinkje */
}

/* "+"-chevron → groene ronde chevron (▾ dicht / ▴ open), geen +/×-rotatie. */
.home [data-sf-block="sf-faq"] .faq-chev {
  margin-left: auto;
  background: #7cc36a !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: 15px;
  line-height: 1;
  color: #fff;
}
.home [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev {
  background: #7cc36a !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; }

/* Beauty Deal: lege knop (button_text = spatie, geen URL) verbergen. */
#beauty-deal .btn-primary { 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 volledig (portret 4:5) tonen zodat de in-foto naam
 * niet meer wordt afgekapt door de vierkante crop. */
.mai-guide-page [data-sf-block="sf-product-grid"] .sf-pg-card-media { aspect-ratio: 4 / 5; }

/* 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%; }