/*
Theme Name:   BePuur Child
Theme URI:    https://www.bepuur.nl
Description:  Child theme van Divi 5 voor BePuur Babydrogist. Bevat de huisstijl en utility classes.
Author:       Casper Molhoek (Polaris IT)
Author URI:   https://polaris-it.nl
Template:     Divi
Version:      1.0.0
Text Domain:  bepuur-child
*/


/* ============================================================
   BePuur.nl - Huisstijl & UI Stylesheet
   ------------------------------------------------------------
   Doel:
     Eén centrale stylesheet die alle kleuren als CSS-variabelen
     definieert. Pagina's en Divi-modules verwijzen alleen via
     utility classes (bp-bg-main, bp-btn-primary, bp-card, ...).
     Hierdoor is een merk-brede kleurwijziging één regel werk.
   ============================================================ */


/* ------------------------------------------------------------
   1. Kleurenpalet (CSS Custom Properties)
   ------------------------------------------------------------ */
:root {

  /* -- 60% BASIS -- */
  --bepuur-bg-main:      #F4EFEA;
  --bepuur-bg-main-rgb:  244, 239, 234;

  --bepuur-bg-card:      #DDD3C7;
  --bepuur-bg-card-rgb:  221, 211, 199;

  /* -- 30% IDENTITEIT -- */
  --bepuur-taupe:        #C2B2A2;
  --bepuur-taupe-rgb:    194, 178, 162;

  /* -- 10% TEKST & ACTIE -- */
  --bepuur-text:         #1E1B18;
  --bepuur-text-rgb:     30, 27, 24;

  --bepuur-accent:       #EAD9CE;
  --bepuur-accent-rgb:   234, 217, 206;

  --bepuur-text-soft:    rgba(30, 27, 24, 0.82);
  --bepuur-text-muted:   rgba(30, 27, 24, 0.68);
  --bepuur-border:       rgba(30, 27, 24, 0.22);
  --bepuur-border-strong:rgba(30, 27, 24, 0.55);
  --bepuur-focus-ring:   #1E1B18;
  --bepuur-shadow:       rgba(30, 27, 24, 0.12);
  --bepuur-shadow-strong:rgba(30, 27, 24, 0.20);

  --bepuur-radius:       14px;
  --bepuur-radius-sm:    10px;
  --bepuur-radius-pill:  999px;
  --bepuur-section-pad-y: clamp(2rem, 3.6vw, 3.5rem);
  --bepuur-section-pad-x: clamp(1rem, 4vw, 4rem);
  --bepuur-content-max:  1200px;
}


/* ------------------------------------------------------------
   2. Basis (body & links)
   ------------------------------------------------------------ */
body {
  background-color: var(--bepuur-bg-main);
  color:            var(--bepuur-text);
}

a {
  color:                 var(--bepuur-text);
  text-decoration:       underline;
  text-decoration-color: var(--bepuur-taupe);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--bepuur-text);
}


/* ------------------------------------------------------------
   3. Achtergrond utilities
   ------------------------------------------------------------ */
.bp-bg-main           { background-color: var(--bepuur-bg-main) !important; }
.bp-bg-card           { background-color: var(--bepuur-bg-card) !important; }
.bp-bg-taupe          { background-color: var(--bepuur-taupe) !important;  color: var(--bepuur-text); }
.bp-bg-accent         { background-color: var(--bepuur-accent) !important; color: var(--bepuur-text); }
.bp-bg-text           { background-color: var(--bepuur-text) !important;   color: var(--bepuur-bg-main); }


/* ------------------------------------------------------------
   4. Tekst utilities
   ------------------------------------------------------------ */
.bp-text              { color: var(--bepuur-text) !important; }
.bp-text-soft         { color: var(--bepuur-text-soft) !important; }
.bp-text-muted        { color: var(--bepuur-text-muted) !important; }
.bp-text-on-dark      { color: var(--bepuur-bg-main) !important; }

.bp-eyebrow {
  display:        inline-block;
  font-size:      0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--bepuur-text-soft);
  margin-bottom:  0.6rem;
}

.bp-heading {
  font-weight:    600;
  line-height:    1.2;
  letter-spacing: -0.015em;
  margin:         0 0 0.75rem;
  font-size:      clamp(1.4rem, 2.4vw, 1.9rem);
}

.bp-subheading {
  font-size:   1rem;
  line-height: 1.55;
  color:       var(--bepuur-text-soft);
  max-width:   620px;
}


/* ------------------------------------------------------------
   5. Knoppen
   ------------------------------------------------------------
   Toegankelijkheid (WCAG 2.1):
   - Tekst warm-zwart op Powder Blush -> 12:1 (AAA).
   - 2px warm-zwarte rand zodat knop visueel als knop herkenbaar is op licht oppervlak.
   - Hover inverteert volledig (donkere achtergrond, lichte tekst).
   - Focus heeft een aparte outline-ring voor toetsenbordgebruik.

   Specificiteits-strategie:
   - Divi voegt soms inline kleuren toe op .et_pb_button. We dwingen onze stijl
     af via een dubbele en getripleerde class-selector + !important, zodat onze
     CSS wint van Divi-defaults zonder dat we de inline kleur hoeven te zetten.
*/
.bp-btn-primary,
a.bp-btn-primary,
.bp-btn-primary.et_pb_button,
a.bp-btn-primary.et_pb_button,
.et_pb_section .bp-btn-primary.et_pb_button,
.et_pb_button_module_wrapper .bp-btn-primary.et_pb_button {
  background-color: var(--bepuur-accent) !important;
  color:            var(--bepuur-text) !important;
  border:           2px solid var(--bepuur-text) !important;
  padding:          0.55rem 1.4rem !important;
  border-radius:    var(--bepuur-radius-pill) !important;
  font-weight:      600 !important;
  font-size:        0.875rem !important;
  letter-spacing:   0.04em !important;
  line-height:      1.2 !important;
  transition:       background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  display:          inline-block;
  text-decoration:  none !important;
}

.bp-btn-primary:hover,
a.bp-btn-primary:hover,
.bp-btn-primary.et_pb_button:hover,
a.bp-btn-primary.et_pb_button:hover,
.bp-btn-primary:focus-visible,
.bp-btn-primary.et_pb_button:focus-visible,
.et_pb_section .bp-btn-primary.et_pb_button:hover {
  background-color: var(--bepuur-text) !important;
  color:            var(--bepuur-bg-main) !important;
  border-color:     var(--bepuur-text) !important;
  transform:        translateY(-1px);
  box-shadow:       0 6px 18px var(--bepuur-shadow-strong);
}

.bp-btn-secondary,
a.bp-btn-secondary,
.bp-btn-secondary.et_pb_button,
a.bp-btn-secondary.et_pb_button,
.et_pb_section .bp-btn-secondary.et_pb_button,
.et_pb_button_module_wrapper .bp-btn-secondary.et_pb_button {
  background-color: transparent !important;
  color:            var(--bepuur-text) !important;
  border:           2px solid var(--bepuur-text) !important;
  padding:          0.55rem 1.4rem !important;
  border-radius:    var(--bepuur-radius-pill) !important;
  font-weight:      600 !important;
  font-size:        0.875rem !important;
  letter-spacing:   0.04em !important;
  line-height:      1.2 !important;
  transition:       background-color 0.2s ease, color 0.2s ease;
  display:          inline-block;
  text-decoration:  none !important;
}

.bp-btn-secondary:hover,
a.bp-btn-secondary:hover,
.bp-btn-secondary.et_pb_button:hover,
a.bp-btn-secondary.et_pb_button:hover,
.bp-btn-secondary:focus-visible,
.bp-btn-secondary.et_pb_button:focus-visible,
.et_pb_section .bp-btn-secondary.et_pb_button:hover {
  background-color: var(--bepuur-text) !important;
  color:            var(--bepuur-bg-main) !important;
  border-color:     var(--bepuur-text) !important;
}

.et_pb_button.bp-btn-primary::after,
.et_pb_button.bp-btn-secondary::after {
  display: none !important;
}

/* Hero-knoppen naast elkaar op tablet+; full-width op telefoon (zie phone breakpoint). */
@media (min-width: 641px) {
  .bp-hero .et_pb_button_module_wrapper {
    display: inline-block !important;
    margin-right: 0.6rem;
    margin-bottom: 0.6rem;
  }
}

/* Site-brede zichtbare focusring voor toetsenbordgebruikers. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.bp-category-tile:focus-visible,
.et_pb_button:focus-visible {
  outline:        3px solid var(--bepuur-focus-ring);
  outline-offset: 3px;
  border-radius:  6px;
}


/* ------------------------------------------------------------
   6. Secties & containers
   ------------------------------------------------------------
   Padding wordt afgedwongen via class-utility's en wint van Divi
   custom_padding-defaults zodat de pagina overal compact blijft.
*/
.bp-section,
.et_pb_section.bp-section {
  padding-top:    var(--bepuur-section-pad-y) !important;
  padding-bottom: var(--bepuur-section-pad-y) !important;
}

.bp-section--tight,
.et_pb_section.bp-section--tight {
  padding-top:    calc(var(--bepuur-section-pad-y) * 0.5) !important;
  padding-bottom: calc(var(--bepuur-section-pad-y) * 0.5) !important;
}

.bp-section .et_pb_row,
.bp-section--tight .et_pb_row {
  padding-top: 0;
  padding-bottom: 0;
}

.bp-divider {
  border: 0;
  height: 1px;
  background-color: var(--bepuur-border);
  margin: 0;
}


/* ------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------ */
.bp-hero {
  position:     relative;
  background-color: var(--bepuur-bg-main);
  overflow:     hidden;
}

.bp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(var(--bepuur-accent-rgb), 0.55), transparent 60%),
    radial-gradient(700px 400px at 0% 90%, rgba(var(--bepuur-bg-card-rgb), 0.7), transparent 65%);
  pointer-events: none;
}

.bp-hero > * { position: relative; }

.bp-hero__title {
  font-size:      clamp(1.65rem, 3.4vw, 2.5rem);
  line-height:    1.15;
  font-weight:    600;
  letter-spacing: -0.015em;
  margin:         0 0 0.85rem;
}

.bp-hero__lead {
  font-size:   1rem;
  line-height: 1.55;
  color:       var(--bepuur-text-soft);
  max-width:   520px;
  margin:      0 0 1.25rem;
}


/* ------------------------------------------------------------
   8. Kaarten
   ------------------------------------------------------------ */
.bp-card {
  background-color: var(--bepuur-bg-card);
  color:            var(--bepuur-text);
  border:           1px solid var(--bepuur-border);
  border-radius:    var(--bepuur-radius);
  padding:          1.5rem;
  box-shadow:       0 2px 12px var(--bepuur-shadow);
  transition:       transform 0.2s ease, box-shadow 0.2s ease;
}

.bp-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px var(--bepuur-shadow-strong);
}

.bp-card--soft {
  background-color: var(--bepuur-bg-main);
}


/* ------------------------------------------------------------
   9. USP-strip
   ------------------------------------------------------------ */
.bp-usp {
  text-align: center;
  padding: 0.5rem 0.75rem;
}

.bp-usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--bepuur-radius-pill);
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  margin-bottom: 0.55rem;
  font-size: 1.15rem;
}

.bp-usp__title {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.bp-usp__text {
  color: var(--bepuur-text-soft);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0;
}


/* ------------------------------------------------------------
   10. Categorie-tegel
   ------------------------------------------------------------ */
.bp-category-tile {
  display: block;
  position: relative;
  border-radius: var(--bepuur-radius);
  overflow: hidden;
  background-color: var(--bepuur-bg-card);
  border: 1px solid var(--bepuur-border);
  text-decoration: none !important;
  color: var(--bepuur-text);
  aspect-ratio: 4 / 3;
  min-height: 180px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bp-category-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px var(--bepuur-shadow-strong);
}

.bp-category-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(
    to top,
    rgba(var(--bepuur-text-rgb), 0.88) 0%,
    rgba(var(--bepuur-text-rgb), 0.65) 55%,
    rgba(var(--bepuur-text-rgb), 0.0) 100%
  );
  color:          #FFFFFF;
  font-weight:    600;
  letter-spacing: 0.02em;
  text-shadow:    0 1px 2px rgba(0, 0, 0, 0.5);
}


/* ------------------------------------------------------------
   11. Productkaart
   ------------------------------------------------------------ */
.bp-product {
  background-color: var(--bepuur-bg-main);
  border: 1px solid var(--bepuur-border);
  border-radius: var(--bepuur-radius);
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bp-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--bepuur-shadow);
}

.bp-product__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--bepuur-radius-sm);
  background-color: var(--bepuur-bg-card);
  margin-bottom: 0.75rem;
}

.bp-product__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.2rem;
}

.bp-product__price {
  color: var(--bepuur-text-soft);
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
}


/* ------------------------------------------------------------
   12. Review / testimonial
   ------------------------------------------------------------ */
.bp-review {
  background-color: var(--bepuur-bg-main);
  border: 1px solid var(--bepuur-border);
  border-radius: var(--bepuur-radius);
  padding: 1.25rem 1.35rem;
  position: relative;
}

.bp-review::before {
  content: "\201C";
  position: absolute;
  top: 0.1rem;
  left: 0.85rem;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bepuur-taupe);
  font-family: Georgia, serif;
}

.bp-review__text {
  font-style: italic;
  color: var(--bepuur-text);
  margin: 0.4rem 0 0.7rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.bp-review__author {
  font-size: 0.85rem;
  color: var(--bepuur-text-soft);
  margin: 0;
}


/* ------------------------------------------------------------
   13. Nieuwsbrief / CTA-strip
   ------------------------------------------------------------ */
.bp-newsletter {
  background-color: var(--bepuur-bg-card);
  border-radius: var(--bepuur-radius);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}


/* ------------------------------------------------------------
   14. WooCommerce overrides (basis)
   ------------------------------------------------------------ */
.woocommerce ul.products li.product .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--bepuur-accent) !important;
  color:            var(--bepuur-text) !important;
  border:           1px solid var(--bepuur-taupe) !important;
  border-radius:    var(--bepuur-radius-pill) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--bepuur-text) !important;
}

.woocommerce span.onsale {
  background-color: var(--bepuur-taupe) !important;
  color:            var(--bepuur-text) !important;
  border-radius:    var(--bepuur-radius-pill) !important;
}


/* ------------------------------------------------------------
   15. Header (modern, slank, robuust)
   ------------------------------------------------------------
   Notitie over specificiteit:
     Divi voegt zelf veel <ul>/<a>-stijlen toe aan content in modules. Om
     ervoor te zorgen dat onze header altijd horizontaal en zonder bullets
     blijft, gebruiken we '.bp-header'-prefix + selectieve !important's
     op de layout-eigenschappen (display, list-style, margin, padding).

   Structuur:
     .bp-header                  sectie
       .bp-header-logo           klikbaar logo (Image-module)
       .bp-nav-wrap              Code-module met <nav>
         .bp-nav__desktop-wrap   menu + actieknoppen rechts (>=980px)
           .bp-nav__desktop      <ul> via [bepuur_menu]
           .bp-nav__actions      Aanmelden + Mandje
         .bp-nav__mobile         <details> hamburger (<980px)
           .bp-nav__mobile-content
   ------------------------------------------------------------ */
.bp-header {
  background-color: var(--bepuur-bg-main);
  border-bottom: 1px solid var(--bepuur-border);
  font-size: 15px;
}

.bp-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Slankere padding voor moderne, lage header.
   Row + columns geforceerd als flex met verticale centering. */
.bp-header .et_pb_row {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
}

.bp-header .et_pb_column {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

.bp-header .et_pb_module { margin-bottom: 0 !important; }

/* Logo zonder marges, vaste hoogte */
.bp-header .bp-header-logo,
.bp-header .bp-header-logo .et_pb_image_wrap {
  margin: 0 !important;
  padding: 0 !important;
}

.bp-header .bp-header-logo img {
  max-height: 60px !important;
  width: auto !important;
  height: auto;
  display: block;
}

@media (max-width: 1180px) {
  .bp-header .bp-header-logo img { max-height: 52px !important; }
}

/* Nav-wrap container */
.bp-header .bp-nav-wrap,
.bp-header .bp-nav-wrap .et_pb_code_inner {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.bp-header .bp-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}

/* Reset alle ul's binnen de nav */
.bp-header .bp-nav ul,
.bp-header .bp-nav__actions,
.bp-header .bp-nav__desktop,
.bp-header .bp-nav__mobile-content ul,
.bp-header .bp-nav__mobile-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-header .bp-nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* Desktop wrap (menu + acties) */
.bp-header .bp-nav__desktop-wrap {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 1.35rem;
  flex-wrap: wrap;
}

/* Horizontaal menu */
.bp-header .bp-nav__desktop {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.6rem;
  align-items: center;
}

.bp-header .bp-nav__desktop > li {
  display: inline-flex !important;
  align-items: center;
}

.bp-header .bp-nav__desktop a {
  color: var(--bepuur-text);
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  height: 40px;
  min-height: 40px;
  background: none !important;
}

.bp-header .bp-nav__desktop a:hover,
.bp-header .bp-nav__desktop a:focus-visible {
  border-bottom-color: var(--bepuur-text);
}

.bp-header .bp-nav__desktop .current-menu-item > a,
.bp-header .bp-nav__desktop .current_page_item > a {
  border-bottom-color: var(--bepuur-text);
  font-weight: 600;
}

/* Echte separator tussen paginamenu en account-acties */
.bp-header .bp-nav__separator {
  display: block;
  width: 1px;
  height: 28px;
  background-color: rgba(30, 27, 24, 0.26);
  flex: 0 0 auto;
}

/* Actieknoppen rechts (Aanmelden / Uitloggen / Mandje) */
.bp-header .bp-nav__actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.55rem;
  align-items: center;
  position: relative;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Op smallere desktop-formaten iets minder ruimte zodat alles past */
@media (max-width: 1180px) {
  .bp-header .bp-nav__desktop-wrap {
    gap: 1rem;
  }
}

/* Account-knop (Aanmelden / Uitloggen) - outline pill.
   min-height/box-sizing identiek aan cart-icon zodat ze exact gelijk uitlijnen. */
.bp-header .bp-account-link,
.bp-header .bp-nav__account a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  border: 1.5px solid var(--bepuur-text);
  height: 40px;
  min-height: 40px;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
  background: transparent;
  color: var(--bepuur-text);
}

.bp-header .bp-account-link:hover,
.bp-header .bp-account-link:focus-visible,
.bp-header .bp-nav__account a:hover,
.bp-header .bp-nav__account a:focus-visible {
  background-color: var(--bepuur-text);
  color: var(--bepuur-bg-main);
}

/* Cart-knop als icoon-button (cirkel met SVG + count-badge).
   Exacte 40x40 zodat hij perfect op de hoogte van de Aanmelden/Uitloggen pill zit. */
.bp-header .bp-cart-link--icon {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--bepuur-text);
  background-color: var(--bepuur-text);
  color: var(--bepuur-bg-main);
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex: 0 0 auto;
}

.bp-header .bp-cart-link--icon:hover,
.bp-header .bp-cart-link--icon:focus-visible {
  background-color: transparent;
  color: var(--bepuur-text);
}

.bp-header .bp-cart-link__icon {
  width: 20px;
  height: 20px;
  display: block;
}

.bp-header .bp-cart-link--icon .bp-cart-link__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--bepuur-bg-main);
}

/* Verberg lege actie-li's (cart wanneer niet ingelogd) */
.bp-header .bp-nav__cta:empty,
.bp-header .bp-nav__mobile-actions li:empty {
  display: none !important;
}

/* Cart-knop tekstvariant (mobiel menu) */
.bp-header .bp-cart-link--text {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}

.bp-header .bp-cart-link--text .bp-cart-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Screen-reader only utility */
.bp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobiele hamburger */
.bp-header .bp-nav__mobile {
  display: none !important;
  position: relative;
}

@media (max-width: 980px) {
  .bp-header .bp-header-logo img { max-height: 44px !important; }
  .bp-header .bp-nav__desktop-wrap { display: none !important; }
  .bp-header .bp-nav__mobile { display: block !important; }

  .bp-header .bp-nav__mobile summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 14px;
    border: 1.5px solid var(--bepuur-text);
    border-radius: 999px;
    color: var(--bepuur-text);
    font-weight: 600;
    font-size: 0.875rem;
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
    background-color: transparent;
  }

  .bp-header .bp-nav__mobile summary::-webkit-details-marker,
  .bp-header .bp-nav__mobile summary::marker {
    display: none !important;
    content: "" !important;
  }

  .bp-header .bp-nav__mobile[open] summary {
    background-color: var(--bepuur-text);
    color: var(--bepuur-bg-main);
  }

  .bp-header .bp-nav__mobile-content {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    background-color: var(--bepuur-bg-main);
    border: 1px solid var(--bepuur-border);
    border-radius: var(--bepuur-radius);
    box-shadow: 0 12px 32px var(--bepuur-shadow-strong);
    z-index: 1000;
    padding: 4px 0;
    overflow: hidden;
  }

  .bp-header .bp-nav__mobile-content ul {
    display: block !important;
  }

  .bp-header .bp-nav__mobile-content li {
    display: block !important;
  }

  .bp-header .bp-nav__mobile-content li a {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 12px 20px;
    color: var(--bepuur-text);
    text-decoration: none !important;
    border-bottom: 1px solid var(--bepuur-border);
    font-size: 0.95rem;
    background: none !important;
  }

  .bp-header .bp-nav__mobile-content li:last-child a {
    border-bottom: none;
  }

  .bp-header .bp-nav__mobile-content li a:hover,
  .bp-header .bp-nav__mobile-content li a:focus-visible {
    background-color: var(--bepuur-bg-card) !important;
  }

  .bp-header .bp-nav__mobile-actions {
    border-top: 2px solid var(--bepuur-border);
    margin-top: 4px !important;
    padding-top: 4px !important;
  }
}

/* ------------------------------------------------------------
   16. Footer (compact & donker, secundair in visuele hierarchie)
   ------------------------------------------------------------
   Structuur:
     .bp-footer.bp-footer--dark          hoofdsectie (warm-zwart)
       .bp-footer__column--brand         handle + tagline + socials
         .bp-footer__handle              "@BePuur" wordmark
         .bp-footer__tagline             korte ondertekst
         .bp-footer__social              socials als icon-buttons
       .bp-footer__column                shop & klantenservice
         .bp-footer__heading             kolomtitel
         .bp-footer__list                linklijst (--cols voor 2-koloms)
         .bp-footer__meta                kvk/btw, klein
     .bp-footer__bottom                  copyright + legal + payment

   Doelen:
     - donker (warm-zwart, dezelfde --bepuur-text als merkpalet)
     - compact: minimale padding, kleine fonts, footer trekt geen aandacht
     - geen openbaar e-mail/whatsapp; contact via /contact

   Anti-bullets: Divi's .et_pb_text dwingt list-style: disc af op alle ul/li
   binnen text-modules. We blokkeren dat hier site-breed voor de footer met
   hoge specificiteit + !important + pseudo-marker reset.
*/

.bp-footer {
  background-color: var(--bepuur-bg-main);
  color: var(--bepuur-text);
  font-size: 0.82rem;
  line-height: 1.4;
}

.bp-footer .et_pb_row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.bp-footer .et_pb_column {
  margin-bottom: 0.85rem !important;
}

.bp-footer .et_pb_module {
  margin-bottom: 0.5rem !important;
}

.bp-footer .et_pb_text > :last-child,
.bp-footer .et_pb_text_inner > :last-child {
  margin-bottom: 0;
}

/* Anti-bullets: dwingt alle lijsten in de footer naar plat formaat */
.bp-footer ul,
.bp-footer ol,
.bp-footer .et_pb_text ul,
.bp-footer .et_pb_text ol,
.bp-footer .et_pb_text_inner ul,
.bp-footer .et_pb_text_inner ol {
  list-style: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.bp-footer li,
.bp-footer .et_pb_text li,
.bp-footer .et_pb_text_inner li {
  list-style: none !important;
  background: none !important;
  background-image: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.bp-footer li::before,
.bp-footer li::marker,
.bp-footer .et_pb_text li::before,
.bp-footer .et_pb_text li::marker {
  content: none !important;
  display: none !important;
}

/* Wordmark / social handle */
.bp-footer__handle {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.35rem;
  text-decoration: none !important;
  color: inherit;
  line-height: 1.2;
}

.bp-footer__handle:hover,
.bp-footer__handle:focus-visible {
  opacity: 0.85;
}

/* Heading override met hoge specificiteit zodat Divi's .et_pb_text h3
   display-font niet wint. Bewust dun, klein, met letterspacing. */
.bp-footer .bp-footer__heading,
.bp-footer .et_pb_text h3.bp-footer__heading,
.bp-footer .et_pb_text_inner h3.bp-footer__heading,
.et_pb_section.bp-footer h3.bp-footer__heading {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin: 0 0 0.55rem !important;
  padding: 0 !important;
  color: inherit !important;
  opacity: 0.65;
}

.bp-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
  font-size: 0.82rem;
  transition: opacity 0.2s ease;
  opacity: 0.72;
}

.bp-footer__list a:hover,
.bp-footer__list a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Twee kolommen voor langere lijsten alleen op desktop, waar de Divi-kolom
   breed genoeg is. Op tablet/mobile staan Shop + Klantenservice al naast
   elkaar (50/50) waardoor 2-koloms erbinnen te krap zou worden. */
@media (min-width: 981px) {
  .bp-footer__list--cols {
    column-count: 2;
    column-gap: 1rem;
  }
  .bp-footer__list--cols li {
    break-inside: avoid;
  }
}

.bp-footer__tagline {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.7;
  max-width: 34ch;
}

.bp-footer__meta {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.5;
  line-height: 1.45;
}

/* Socials: icon-buttons (geen bullets, kleiner formaat) */
.bp-footer__social {
  display: flex !important;
  gap: 0.4rem;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
  list-style: none !important;
}

.bp-footer__social li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.bp-footer__social a {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  color: inherit;
  border: 1px solid currentColor;
  background-color: transparent;
  opacity: 0.72;
}

.bp-footer__social a svg {
  width: 14px;
  height: 14px;
  display: block;
}

.bp-footer__social a:hover,
.bp-footer__social a:focus-visible {
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  border-color: var(--bepuur-accent);
  opacity: 1;
}

/* --- Donkere variant ----------------------------------------------- */
.bp-footer--dark {
  background-color: var(--bepuur-text) !important;
  color: var(--bepuur-bg-main);
}

.bp-footer--dark,
.bp-footer--dark p,
.bp-footer--dark li,
.bp-footer--dark a,
.bp-footer--dark h1,
.bp-footer--dark h2,
.bp-footer--dark h3,
.bp-footer--dark h4 {
  color: var(--bepuur-bg-main);
}

/* Mobile/tablet layout: brand op vol-breed bovenaan, Shop + Klantenservice
   naast elkaar als 50/50. Maakt de footer ~halve hoogte t.o.v. stacking. */
@media (max-width: 980px) {
  .bp-footer .et_pb_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.5rem 0.9rem;
  }

  .bp-footer .et_pb_column {
    margin-bottom: 0 !important;
  }

  .bp-footer .et_pb_module {
    margin-bottom: 0.35rem !important;
  }

  .bp-footer .bp-footer__column--brand {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.35rem !important;
    text-align: center;
  }

  .bp-footer .bp-footer__column:not(.bp-footer__column--brand) {
    flex: 1 1 calc(50% - 0.45rem) !important;
    width: calc(50% - 0.45rem) !important;
    max-width: calc(50% - 0.45rem) !important;
    margin-bottom: 0 !important;
    text-align: left;
  }

  .bp-footer__handle {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .bp-footer__tagline {
    margin: 0 auto 0.5rem;
    max-width: 28ch;
  }

  .bp-footer__social {
    justify-content: center;
  }

  .bp-footer__meta {
    margin-top: 0.6rem;
    font-size: 0.68rem;
  }
}

/* Op echt smalle phones nog iets compacter (gap weg) */
@media (max-width: 480px) {
  .bp-footer .et_pb_row {
    gap: 0.35rem 0.7rem;
  }
  .bp-footer__list a {
    font-size: 0.78rem;
    min-height: 24px;
  }
}

/* --- Onderste strip (copyright + legal + payment) ------------------ */
.bp-footer__bottom {
  background-color: var(--bepuur-text);
  color: var(--bepuur-bg-main);
  border-top: 1px solid rgba(244, 239, 234, 0.12);
}

.bp-footer__bottom .et_pb_row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.bp-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--bepuur-bg-main);
}

.bp-footer__copy {
  opacity: 0.6;
}

.bp-footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.85rem;
}

.bp-footer__bottom-inner a {
  color: var(--bepuur-bg-main);
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.bp-footer__bottom-inner a:hover,
.bp-footer__bottom-inner a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Payment-iconen: geen bullets, kleine chips */
.bp-payment-icons {
  display: flex !important;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-payment-icons li {
  list-style: none !important;
  background: rgba(244, 239, 234, 0.08);
  color: var(--bepuur-bg-main);
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgba(244, 239, 234, 0.18);
  margin: 0 !important;
  background-image: none !important;
}

.bp-payment-icons li::before,
.bp-payment-icons li::marker {
  content: none !important;
  display: none !important;
}


/* ------------------------------------------------------------
   17. Responsive (mobile-first aanpassingen)
   ------------------------------------------------------------ */

/* Tablet en kleiner */
@media (max-width: 980px) {
  :root {
    --bepuur-section-pad-y: clamp(1.75rem, 5vw, 2.75rem);
  }

  .bp-hero__title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .bp-hero__lead  { font-size: 0.95rem; }
  .bp-heading     { font-size: clamp(1.25rem, 3.6vw, 1.6rem); }

  /* Brand-column wordt op mobile vol-breed gecentreerd (zie sectie 16);
     Shop + Klantenservice blijven left-aligned voor leesbaarheid. */
  .bp-footer__legal {
    justify-content: center;
  }

  .bp-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .bp-payment-icons {
    justify-content: center;
  }
}

/* Telefoon */
@media (max-width: 640px) {
  :root {
    --bepuur-section-pad-y: 1.75rem;
  }

  .bp-section,
  .et_pb_section.bp-section {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  .bp-section--tight,
  .et_pb_section.bp-section--tight {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .bp-hero__title { font-size: 1.5rem; }
  .bp-hero__lead  { font-size: 0.95rem; margin-bottom: 1rem; }

  .bp-card,
  .bp-product,
  .bp-review {
    padding: 1rem 1.1rem;
  }

  .bp-newsletter { padding: 1.25rem; }

  .bp-btn-primary,
  .bp-btn-secondary,
  .bp-btn-primary.et_pb_button,
  .bp-btn-secondary.et_pb_button,
  a.bp-btn-primary.et_pb_button,
  a.bp-btn-secondary.et_pb_button {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.75rem 1rem !important;
  }

  .bp-hero .et_pb_button_module_wrapper {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 0.6rem !important;
    width: 100%;
  }

  .bp-category-tile {
    aspect-ratio: 16 / 9;
    min-height: 140px;
  }

  .bp-usp__icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }

  /* Hero-tegel kleiner op telefoon zodat afbeelding geen helft van scherm pakt. */
  .bp-hero .et_pb_image,
  .bp-hero .et_pb_image .et_pb_image_wrap {
    max-height: 260px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Touch targets WCAG 2.5.5 */
@media (hover: none) and (pointer: coarse) {
  .bp-header a,
  .bp-footer__list a,
  .bp-footer__bottom-inner a {
    min-height: 44px;
  }

  .bp-footer__social a {
    width: 44px;
    height: 44px;
  }
}


/* ------------------------------------------------------------
   18. Over Ons - waarden, proces, team, statistieken
   ------------------------------------------------------------
   Subset utilities specifiek voor de Over Ons-pagina, maar
   bewust generiek opgezet zodat ze ook bruikbaar zijn op
   landingspagina's en categoriepagina's.
*/

/* Waarde-kaart (groter dan een USP-strip-item, voor "Waar staan wij voor"). */
.bp-value {
  background-color: var(--bepuur-bg-main);
  border:           1px solid var(--bepuur-border);
  border-radius:    var(--bepuur-radius);
  padding:          1.6rem 1.4rem;
  height:           100%;
  transition:       transform 0.2s ease, box-shadow 0.2s ease;
}

.bp-value:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 22px var(--bepuur-shadow);
}

.bp-value__icon {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            52px;
  height:           52px;
  border-radius:    var(--bepuur-radius-pill);
  background-color: var(--bepuur-accent);
  color:            var(--bepuur-text);
  font-size:        1.4rem;
  margin-bottom:    0.85rem;
}

.bp-value__title {
  font-size:   1.05rem;
  font-weight: 600;
  margin:      0 0 0.4rem;
  line-height: 1.3;
}

.bp-value__text {
  color:       var(--bepuur-text-soft);
  font-size:   0.92rem;
  line-height: 1.55;
  margin:      0;
}

/* Genummerde proces-stap. */
.bp-step {
  position:         relative;
  background-color: var(--bepuur-bg-main);
  border:           1px solid var(--bepuur-border);
  border-radius:    var(--bepuur-radius);
  padding:          1.4rem 1.4rem 1.4rem 4.4rem;
  height:           100%;
  transition:       transform 0.2s ease, box-shadow 0.2s ease;
}

.bp-step:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 22px var(--bepuur-shadow);
}

.bp-step__num {
  position:         absolute;
  top:              1.2rem;
  left:             1.2rem;
  width:            2.4rem;
  height:           2.4rem;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--bepuur-radius-pill);
  background-color: var(--bepuur-text);
  color:            var(--bepuur-bg-main);
  font-weight:      700;
  font-size:        0.95rem;
  letter-spacing:   0.02em;
  line-height:      1;
}

.bp-step__title {
  font-size:   1rem;
  font-weight: 600;
  margin:      0 0 0.35rem;
  line-height: 1.3;
}

.bp-step__text {
  color:       var(--bepuur-text-soft);
  font-size:   0.9rem;
  line-height: 1.5;
  margin:      0;
}

/* Statistiek / kerncijfer (centraal, groot). */
.bp-stat {
  text-align: center;
  padding:    0.5rem 0.25rem;
}

.bp-stat__num {
  font-size:      clamp(1.8rem, 3vw, 2.4rem);
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1;
  margin:         0 0 0.35rem;
  color:          var(--bepuur-text);
}

.bp-stat__label {
  font-size:      0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--bepuur-text-soft);
  margin:         0;
}

/* Team-kaart (foto rond, naam, rol, korte bio). */
.bp-team {
  background-color: var(--bepuur-bg-main);
  border:           1px solid var(--bepuur-border);
  border-radius:    var(--bepuur-radius);
  padding:          1.6rem 1.35rem 1.6rem;
  text-align:       center;
  height:           100%;
  transition:       transform 0.2s ease, box-shadow 0.2s ease;
}

.bp-team:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 22px var(--bepuur-shadow);
}

.bp-team__photo {
  width:            120px;
  height:           120px;
  border-radius:    var(--bepuur-radius-pill);
  object-fit:       cover;
  background-color: var(--bepuur-bg-card);
  margin:           0 auto 0.85rem;
  display:          block;
  border:           3px solid var(--bepuur-bg-card);
}

.bp-team__name {
  font-size:   1.05rem;
  font-weight: 600;
  margin:      0 0 0.15rem;
  line-height: 1.3;
}

.bp-team__role {
  font-size:      0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--bepuur-text-soft);
  margin:         0 0 0.6rem;
}

.bp-team__bio {
  color:       var(--bepuur-text-soft);
  font-size:   0.9rem;
  line-height: 1.55;
  margin:      0;
}

/* Ondertekening (handgeschreven gevoel) onder verhaal-tekst. */
.bp-signature {
  margin-top:  1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style:  italic;
  font-size:   1.05rem;
  color:       var(--bepuur-text);
}

/* Pagina-hero variant: zelfde layout als homepage-hero, iets compactere typografie. */
.bp-page-hero .bp-hero__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

/* CTA-banner: centrale call-to-action op donkere achtergrond.
   Buttons binnen deze banner krijgen automatisch een licht-op-donker stijl,
   zodat .bp-btn-primary / .bp-btn-secondary direct herbruikbaar blijven. */
.bp-cta-banner {
  background-color: var(--bepuur-text);
  color:            var(--bepuur-bg-main);
  border-radius:    var(--bepuur-radius);
  padding:          clamp(1.75rem, 4vw, 2.75rem);
  text-align:       center;
  position:         relative;
  overflow:         hidden;
}

.bp-cta-banner::before {
  content:  "";
  position: absolute;
  inset:    0;
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(var(--bepuur-accent-rgb), 0.12), transparent 60%),
    radial-gradient(500px 240px at 0% 100%, rgba(var(--bepuur-bg-card-rgb), 0.10), transparent 65%);
  pointer-events: none;
}

.bp-cta-banner > * { position: relative; }

.bp-cta-banner .bp-eyebrow {
  color: var(--bepuur-bg-main);
  opacity: 0.7;
}

.bp-cta-banner__title {
  color:          var(--bepuur-bg-main);
  font-size:      clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight:    600;
  letter-spacing: -0.015em;
  line-height:    1.2;
  margin:         0 0 0.6rem;
}

.bp-cta-banner p {
  color:     var(--bepuur-bg-main);
  opacity:   0.85;
  max-width: 620px;
  margin:    0 auto 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
}

.bp-cta-banner__actions {
  display:         flex;
  gap:             0.6rem;
  justify-content: center;
  flex-wrap:       wrap;
  margin:          0;
}

/* Knop-overrides binnen de donkere CTA-banner. */
.bp-cta-banner .bp-btn-primary,
.bp-cta-banner a.bp-btn-primary {
  background-color: var(--bepuur-accent) !important;
  color:            var(--bepuur-text) !important;
  border-color:     var(--bepuur-accent) !important;
}

.bp-cta-banner .bp-btn-primary:hover,
.bp-cta-banner a.bp-btn-primary:hover,
.bp-cta-banner .bp-btn-primary:focus-visible {
  background-color: var(--bepuur-bg-main) !important;
  color:            var(--bepuur-text) !important;
  border-color:     var(--bepuur-bg-main) !important;
}

.bp-cta-banner .bp-btn-secondary,
.bp-cta-banner a.bp-btn-secondary {
  background-color: transparent !important;
  color:            var(--bepuur-bg-main) !important;
  border-color:     var(--bepuur-bg-main) !important;
}

.bp-cta-banner .bp-btn-secondary:hover,
.bp-cta-banner a.bp-btn-secondary:hover,
.bp-cta-banner .bp-btn-secondary:focus-visible {
  background-color: var(--bepuur-bg-main) !important;
  color:            var(--bepuur-text) !important;
  border-color:     var(--bepuur-bg-main) !important;
}

/* Telefoon: stappen iets compacter, team-foto iets kleiner. */
@media (max-width: 640px) {
  .bp-step {
    padding: 1.2rem 1.15rem 1.2rem 3.8rem;
  }

  .bp-step__num {
    top:    1rem;
    left:   1rem;
    width:  2.1rem;
    height: 2.1rem;
    font-size: 0.85rem;
  }

  .bp-team__photo {
    width:  96px;
    height: 96px;
  }

  .bp-cta-banner__actions {
    flex-direction: column;
    align-items:    stretch;
  }
}


/* ------------------------------------------------------------
   19. Contact pagina
   ------------------------------------------------------------
   Structuur:
     .bp-contact-card               kanaal-kaart (WhatsApp/E-mail/FAQ)
       .bp-contact-card__icon       cirkel-icoon
       .bp-contact-card__title      kanaalnaam
       .bp-contact-card__meta       meta (openingstijden, responstijd)
       .bp-contact-card__text       beschrijving
       .bp-contact-card__link       CTA-link

     .bp-info-panel                 zij-paneel met praktische info
       .bp-info-panel__title        kop
       .bp-info-list                gestructureerde info-lijst
         .bp-info-list__icon
         .bp-info-list__label
         .bp-info-list__value

     .bp-contact-form               Divi-contactformulier in BePuur-stijl
     .bp-faq                        Divi-accordion (FAQ) in BePuur-stijl

   Anti-bullets: net als bij de footer dwingen Divi's .et_pb_text styles
   list-style: disc af op <ul>/<li>. We blokkeren dat voor info-lists met
   hoge specificiteit + !important + pseudo-marker reset.
   ------------------------------------------------------------ */

.bp-contact-card {
  background-color: var(--bepuur-bg-main);
  border: 1px solid var(--bepuur-border);
  border-radius: var(--bepuur-radius);
  padding: 1.5rem 1.35rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bp-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px var(--bepuur-shadow-strong);
  border-color: var(--bepuur-border-strong);
}

.bp-contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--bepuur-radius-pill);
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  margin: 0 0 0.85rem;
  flex: 0 0 auto;
}

.bp-contact-card__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.bp-contact-card__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  color: var(--bepuur-text);
}

.bp-contact-card__meta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bepuur-text-soft);
  margin: 0 0 0.65rem;
}

.bp-contact-card__text {
  color: var(--bepuur-text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1 1 auto;
}

.bp-contact-card__link,
.et_pb_text .bp-contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bepuur-text);
  text-decoration: none !important;
  border-bottom: 1.5px solid var(--bepuur-text);
  padding: 2px 0;
  transition: opacity 0.2s ease;
}

.bp-contact-card__link:hover,
.bp-contact-card__link:focus-visible {
  opacity: 0.7;
}


/* --- Praktische info paneel ---------------------------------------- */
.bp-info-panel {
  background-color: var(--bepuur-bg-card);
  border: 1px solid var(--bepuur-border);
  border-radius: var(--bepuur-radius);
  padding: 1.5rem 1.5rem;
}

.bp-info-panel__title,
.et_pb_text h3.bp-info-panel__title,
.et_pb_text_inner h3.bp-info-panel__title {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--bepuur-text-soft) !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}

.bp-info-list,
.et_pb_text .bp-info-list,
.et_pb_text_inner .bp-info-list {
  display: grid !important;
  gap: 0.9rem !important;
  list-style: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-info-list li,
.et_pb_text .bp-info-list li,
.et_pb_text_inner .bp-info-list li {
  display: grid !important;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 0.7rem !important;
  list-style: none !important;
  background: none !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-info-list li::before,
.bp-info-list li::marker,
.et_pb_text .bp-info-list li::before,
.et_pb_text .bp-info-list li::marker {
  content: none !important;
  display: none !important;
}

.bp-info-list__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bepuur-radius-pill);
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  flex: 0 0 auto;
  margin-top: 2px;
}

.bp-info-list__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.bp-info-list__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bepuur-text-soft);
  margin: 0 0 0.15rem;
  line-height: 1.3;
}

.bp-info-list__value {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--bepuur-text);
}

.bp-info-list__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--bepuur-border-strong);
}

.bp-info-list__value a:hover {
  border-bottom-color: var(--bepuur-text);
}


/* --- Contact Form 7 in BePuur-stijl (.bp-contact-form) -------------
   We targeten Contact Form 7 via een wrapper-class (.bp-contact-form)
   op de Divi Code-module die de CF7-shortcode bevat. CF7's eigen
   markup is voorspelbaar en gebruikt 'wpcf7-' prefixes; die geven we
   hier de BePuur-look (rounded inputs, primaire submit-knop, zachte
   focus-ring, brand-gekleurde response-output).
*/
.bp-contact-form .wpcf7,
.bp-contact-form .wpcf7-form {
  margin: 0;
}

.bp-contact-form .wpcf7-form p {
  margin: 0 0 0.9rem 0;
}

.bp-contact-form .wpcf7-form p:last-child {
  margin-bottom: 0;
}

.bp-contact-form .wpcf7-form label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bepuur-text-soft);
  margin: 0;
  line-height: 1.4;
}

.bp-contact-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.35rem;
}

.bp-contact-form .wpcf7-form input[type="text"],
.bp-contact-form .wpcf7-form input[type="email"],
.bp-contact-form .wpcf7-form input[type="tel"],
.bp-contact-form .wpcf7-form input[type="url"],
.bp-contact-form .wpcf7-form input[type="number"],
.bp-contact-form .wpcf7-form input[type="date"],
.bp-contact-form .wpcf7-form textarea,
.bp-contact-form .wpcf7-form select {
  background-color: var(--bepuur-bg-main);
  background-image: none;
  border: 1.5px solid var(--bepuur-border);
  border-radius: var(--bepuur-radius-sm);
  color: var(--bepuur-text);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bp-contact-form .wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

.bp-contact-form .wpcf7-form input::placeholder,
.bp-contact-form .wpcf7-form textarea::placeholder {
  color: var(--bepuur-text-muted);
  opacity: 1;
}

.bp-contact-form .wpcf7-form input:focus,
.bp-contact-form .wpcf7-form textarea:focus,
.bp-contact-form .wpcf7-form select:focus {
  border-color: var(--bepuur-text);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(30, 27, 24, 0.08);
}

/* "Verplicht"-aanduiding in labels (matcht <span class="bp-required">*</span>) */
.bp-contact-form .bp-required {
  color: var(--bepuur-text);
  margin-left: 0.15rem;
  letter-spacing: 0;
}

/* Submit-knop — hergebruikt de bp-btn-primary look maar op een echte <input>. */
.bp-contact-form .wpcf7-submit,
.bp-contact-form input.wpcf7-submit,
.bp-contact-form input.wpcf7-form-control.wpcf7-submit {
  background-color: var(--bepuur-accent);
  color: var(--bepuur-text);
  border: 2px solid var(--bepuur-text);
  border-radius: var(--bepuur-radius-pill);
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  font-family: inherit;
  text-transform: none;
  cursor: pointer;
  width: auto;
  display: inline-block;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bp-contact-form .wpcf7-submit:hover,
.bp-contact-form input.wpcf7-submit:hover,
.bp-contact-form .wpcf7-submit:focus-visible {
  background-color: var(--bepuur-text);
  color: var(--bepuur-bg-main);
  border-color: var(--bepuur-text);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--bepuur-shadow-strong);
}

.bp-contact-form .wpcf7-submit:disabled,
.bp-contact-form input.wpcf7-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.bp-contact-form .wpcf7-spinner {
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* Inline veld-validatie (CF7 plaatst <span class="wpcf7-not-valid-tip">) */
.bp-contact-form .wpcf7-not-valid-tip {
  color: #B33A3A;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  display: block;
}

.bp-contact-form .wpcf7-form input.wpcf7-not-valid,
.bp-contact-form .wpcf7-form textarea.wpcf7-not-valid,
.bp-contact-form .wpcf7-form select.wpcf7-not-valid {
  border-color: #B33A3A;
}

/* Algemene response onderaan: groen-cremig bij success, rood-zacht bij fout. */
.bp-contact-form .wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-left: 3px solid var(--bepuur-text);
  border-radius: var(--bepuur-radius-sm);
  background-color: var(--bepuur-bg-card);
  color: var(--bepuur-text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.bp-contact-form .wpcf7 form.sent .wpcf7-response-output {
  background-color: var(--bepuur-accent);
  border-left-color: var(--bepuur-text);
}

.bp-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.bp-contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.bp-contact-form .wpcf7 form.payment-required .wpcf7-response-output,
.bp-contact-form .wpcf7 form.failed .wpcf7-response-output,
.bp-contact-form .wpcf7 form.spam .wpcf7-response-output {
  background-color: #FBE9E9;
  border-left-color: #B33A3A;
  color: #6D1F1F;
}

/* Acknowledgment-tekstje (CF7 toont "Bedankt..."-zin in een <p>). */
.bp-contact-form .wpcf7-form.sent p {
  margin: 0 0 0.6rem;
}


/* --- FAQ accordion (.bp-faq) --------------------------------------- */
.bp-faq.et_pb_accordion,
.bp-faq .et_pb_accordion_inner {
  background-color: transparent !important;
}

.bp-faq .et_pb_accordion_item,
.bp-faq .et_pb_toggle {
  background-color: var(--bepuur-bg-main) !important;
  border: 1px solid var(--bepuur-border) !important;
  border-radius: var(--bepuur-radius) !important;
  margin: 0 0 0.65rem !important;
  padding: 0 !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bp-faq .et_pb_accordion_item:hover,
.bp-faq .et_pb_toggle:hover {
  border-color: var(--bepuur-border-strong) !important;
}

.bp-faq .et_pb_accordion_item.et_pb_toggle_open,
.bp-faq .et_pb_toggle.et_pb_toggle_open {
  background-color: var(--bepuur-bg-card) !important;
  border-color: var(--bepuur-text) !important;
  box-shadow: 0 6px 18px var(--bepuur-shadow);
}

.bp-faq .et_pb_toggle_title {
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  color: var(--bepuur-text) !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  padding: 1rem 3rem 1rem 1.25rem !important;
  margin: 0 !important;
  position: relative;
  cursor: pointer;
}

.bp-faq .et_pb_toggle_content {
  padding: 0 1.25rem 1.15rem !important;
  margin: 0 !important;
  color: var(--bepuur-text-soft) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

.bp-faq .et_pb_toggle_content p {
  margin: 0 0 0.6rem;
}

.bp-faq .et_pb_toggle_content p:last-child {
  margin-bottom: 0;
}

.bp-faq .et_pb_toggle_content a {
  color: var(--bepuur-text);
  text-decoration-color: var(--bepuur-taupe);
}

/* Pijl-icoon: hergebruik Divi's ::before maar herstijl en herpositioneer
   met onze brand-kleur. Dit werkt cross-version omdat we niet vertrouwen
   op de exacte icon-glyph, alleen op zijn aanwezigheid en positie. */
.bp-faq .et_pb_toggle .et_pb_toggle_title::before {
  color: var(--bepuur-text) !important;
  right: 18px !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%);
  transition: transform 0.2s ease, color 0.2s ease;
  font-size: 20px !important;
}

.bp-faq .et_pb_toggle_open .et_pb_toggle_title::before {
  transform: translateY(-50%) rotate(180deg);
}


/* --- Responsive contact-pagina ------------------------------------- */
@media (max-width: 980px) {
  .bp-contact-card {
    padding: 1.35rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .bp-contact-card {
    padding: 1.15rem 1.1rem;
  }

  .bp-info-panel {
    padding: 1.25rem;
  }

  .bp-faq .et_pb_toggle_title {
    font-size: 0.95rem !important;
    padding: 0.85rem 2.5rem 0.85rem 1rem !important;
  }

  .bp-faq .et_pb_toggle_content {
    padding: 0 1rem 0.95rem !important;
    font-size: 0.9rem !important;
  }

  .bp-faq .et_pb_toggle .et_pb_toggle_title::before {
    right: 14px !important;
  }

  .bp-contact-form .wpcf7-form p {
    margin-bottom: 0.75rem;
  }

  .bp-contact-form .wpcf7-submit,
  .bp-contact-form input.wpcf7-submit {
    width: 100%;
    text-align: center;
  }
}


/* ============================================================
   KLEUR-REFERENTIE
   ------------------------------------------------------------
   Rol             Naam              HEX        RGB
   -------------   ---------------   --------   ------------------
   Basis 60%       Alabaster Cream   #F4EFEA    244, 239, 234
   Basis 60%       Soft Linen        #DDD3C7    221, 211, 199
   Identiteit 30%  Basistaupe        #C2B2A2    194, 178, 162
   Tekst 10%       Warm-zwart        #1E1B18    30,  27,  24
   Actie 10%       Powder Blush      #EAD9CE    234, 217, 206
   ============================================================ */