@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
  @import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');

  body {
  font-family: 'Open Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  }

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: #595959;
  }

  h1, h2, h3, h4, h5, h6 {
  color: #595959 !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: var(--t-900) !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: var(--t-900) !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: var(--t-900) !important;
  color: #fff !important;
  }

  .btn:hover,
  .wpcf7-submit:hover,
  .woocommerce span.onsale:hover,
  .woocommerce a.button:hover,
  .woocommerce .button:hover,
  [type="submit"]:hover,
  .nf-form-content input[type=submit]:hover
  {
  background: var(--t-900) !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: var(--t-900) !important;
  color: #fff !important;
  }

  div.social-media ul li a i {
  color: #fff !important;
  }

  div.social-media ul li a:hover {
  background: var(--t-900) !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: var(--t-900) !important;
  }

  div.phone a.phone, div.email a.email {
  background: var(--t-900) !important;
  color: #fff !important;
  }

  div.phone a.phone, div.email a.email i {
  color: #fff !important;
  }

  div.phone a.phone:hover, div.email a.email:hover {
  background: var(--t-900) !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: var(--t-900);
  border-color: var(--t-900);
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: var(--t-900) !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: var(--t-900) !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  .modal__container,
  .footer-cta-box,
  .rimg,
  [type="submit"] {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  }

  .img-responsive {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  }



  header div.header {
  background-color: rgba(255, 255, 255, 1) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(255, 255, 255) !important;
  }

  @media only screen and (max-width : 992px) {
  header nav.navbar-default {
  background: none !important;
  }
  }

  header > div.wrapper {
  display: block;
  position: relative;
  }

  header div.header::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  }

  header > div.wrapper::after {
  background: url('https://lavantage.nbsals1.nl/wp-content/uploads/sites/346/2019/10/Achtergrond-afbeelding-bijgesneden.jpg');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }




  @media only screen and (min-width : 992px) {
  body.home header > div.wrapper {
  min-height: 350px;
      min-height: 485px;
    }
  body.home header > div.wrapper.above {
  min-height: 500px;
      min-height: 635px;
    }
  }

  @media only screen and (min-width : 992px) {
  body header > div.wrapper {
  min-height: 225px;
      min-height: 285px;
    }
  body header > div.wrapper.above {
  min-height: 375px;
      min-height: 435px;
    }
  body header > div.wrapper.above::after,
  body header > div.wrapper.above.shadow::before,
  body header > div.wrapper.above_shadow::before {
      top: 210px;
    }
  body header > div.wrapper.sticky_menu .header__content {
      margin-top: 210px;
    }
  }

  @media only screen and (min-width : 992px) {
  header > div.wrapper {
  min-height: 310px;
  }
  header > div.wrapper.above {
  min-height: 460px;
  }

  header div.header div.holder {
  height: 210px;
  }
  }





  nav.navbar-default, div.navbar-collapse {
  background-color: #fcfcfc; !important;
  }

  @media only screen and (min-width : 992px) {
  
  div.navbar-collapse {
  background: none !important;
  }

  header nav.navbar-default {
  background-color: rgba(252, 252, 252, 1) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(252, 252, 252, 1) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: var(--t-900) !important;
  }
  }


  @media only screen and (min-width : 992px) {
  section.featured div.wrapper {
  margin-top: -100px;
  }
  header>div.wrapper .header__content {
  transform: translate3d(0, -40px, 0);
  }
  }





  header div.header {
  text-align: left;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid var(--t-900);
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse ul.navbar-nav li a, header nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a {
  color: var(--t-900) !important;
  }
  }


  header div.header div.contact i {
  color: var(--t-900);
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse {
  text-align: right;
  }
  }

  section.featured div.item p,
  section.news div.item p {
  color: #595959 !important;
  }

  section.featured div.item,
  section.news div.item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }

  section.partners {
  background: var(--t-900) !important;
  }

  section.partners img {
  border-radius: 0 !important;
  }

  footer,
  .footer-cta.center:after,
  .author {
  background: var(--t-900) !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid var(--t-900);
  }

  footer div.socket,
  .footer-sticky {
  background: var(--t-900) !important;
  }


  .img-circle {
  border-radius: 0 !important;
  }

  section.treatments div.button-wrap {
  background: #9c7694;
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: #595959 !important;
  }

  section.prices table tr td a {
  color: #595959 !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: #595959 !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: var(--t-900);
  }

  html {
font-size: 16px !important;
}

:root {
  /* Merkkleur — Taupe */
  --t-50:#F8F5F4; --t-100:#EFE8E7; --t-200:#DED1D1; --t-300:#C6B3B4; --t-400:#A89195;
  --t-500:#8F797C; --t-600:#75605F; --t-700:#5C4C4F; --t-800:#43383A; --t-900:#2C2426;

  /* Neutraal — Warm zand */
  --s-50:#FBF9F6; --s-100:#F4EFE8; --s-200:#E8DFD3; --s-300:#D7CABA; --s-400:#BDAB97;
  --s-500:#A38F78; --s-600:#87735C; --s-700:#6A5A47; --s-800:#4C4133; --s-900:#322B22;

  /* Salie — optioneel accent */
  --sage-light:#EAEDE8; --sage-mid:#8B9384; --sage-deep:#4F5749;

  /* Rollen */
  --color-page:       var(--s-50);   /* paginabachtergrond */
  --color-surface:    #FBF9F6;       /* kaarten / panelen  */
  --color-text:       #2B2622;       /* hoofdtekst         */
  --color-text-muted: #6B5F58;       /* gedempte tekst     */
  --color-brand:      var(--t-500);  /* merkkleur          */
  --color-btn:        var(--t-700);  /* knop primair       */
  --color-btn-hover:  var(--t-800);
  --color-border:     var(--s-200);

  /* Typografie */
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Mulish', system-ui, sans-serif;

  /* Hoekafronding */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
}

/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 1 — Basis: typografie, koppen, links + knoppen
   Plaatsen in: Instellingen › Geavanceerd › Ontwikkelaars › CSS styling
   ---------------------------------------------------------------------
   De :root design-tokens zijn al toegevoegd (zie style guide). Deze code
   gebruikt o.a.: --font-head, --font-body, --color-text, --color-text-muted,
   --color-page, --color-btn, --color-btn-hover, --color-border,
   --t-50..--t-900, --s-50..--s-200, --sage-mid, --sage-deep, --radius-md.
   Knoppen en linkkleuren staan bewust op !important: anders winnen de
   kleur-instellingen uit Thema-instellingen › Vormgeving.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------
   1. Basis / body
--------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.75;
  color: var(--color-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------
   2. Koppen
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--color-text) !important;
  font-weight: 500;
  line-height: 1.14;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.375rem, 1.6rem + 3.4vw, 3.375rem);  /* 38 → 54px */
  font-weight: 600;
  letter-spacing: 0.005em;
}
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); } /* 28 → 36px */
h3 { font-size: 1.3125rem; font-weight: 600; }           /* 21px */
h4 { font-size: 1.125rem;  font-weight: 600; }           /* 18px */
h5 { font-size: 1rem;      font-weight: 600; }
h6 { font-size: 0.85rem;   font-weight: 600; letter-spacing: 0.04em; }

/* Cursief accentwoord in een kop, bv. <em> of <span class="accent"> */
h1 em, h2 em, h3 em,
h1 .accent, h2 .accent, h3 .accent {
  font-style: italic;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   3. Tekst
--------------------------------------------------------------------- */
p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }
em { font-style: italic; }
small { font-size: 0.85rem; color: var(--color-text-muted); }

.text-muted { color: var(--color-text-muted); }

/* "Eyebrow" labeltje boven koppen (uppercase, gespatieerd) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 0.75rem;
}

/* ---------------------------------------------------------------------
   4. Links  (kleur op !important — zie kop van dit bestand)
   Knoppen winnen hiervan omdat hun selector specifieker is.
--------------------------------------------------------------------- */
a {
  color: var(--color-btn) !important;       /* taupe 700 */
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.18s ease, opacity 0.18s ease;
}
a:hover {
  color: var(--color-btn-hover) !important; /* taupe 800 */
  text-decoration: underline;
}

/* Links op DONKERE vlakken (footer, taupe banden) licht houden.
   >>> Controleer de echte class-namen op de site en pas hier aan. <<< */
.footer a,
.site-footer a,
.footer-cta-box a {
  color: var(--color-page) !important;      /* warm wit */
}
.footer a:hover,
.site-footer a:hover,
.footer-cta-box a:hover {
  color: var(--s-200) !important;
}

/* Navigatielinks: geen onderstreping bij hover, rustig houden.
   >>> Pas selector aan op de echte nav-class indien nodig. <<< */
.main-navigation a,
.primary-navigation a,
nav a {
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   5. Lijsten
--------------------------------------------------------------------- */
ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin: 0 0 0.4rem; }
li:last-child { margin-bottom: 0; }

.list-unstyled { list-style: none; padding-left: 0; }

/* ---------------------------------------------------------------------
   6. Citaat / blockquote
--------------------------------------------------------------------- */
blockquote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--t-700);
  border-left: 2px solid var(--sage-mid);
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
}

/* ---------------------------------------------------------------------
   7. Divider
--------------------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* ---------------------------------------------------------------------
   8. Tekstselectie
--------------------------------------------------------------------- */
::selection { background: var(--t-200); color: var(--t-900); }

/* =====================================================================
   9. KNOPPEN  —  <a class="btn btn-primary"> / <a class="btn btn-secondary">
   Vorm op .btn (layout), kleur op de modifier-class met !important
   zodat ze de Vormgeving-kleuren overschrijven. Ninja Forms submit-
   knoppen worden als primair meegestyled.
   ===================================================================== */
.btn,
a.btn,
input[type="submit"],
input[type="button"],
.nf-form-content input[type="button"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.08s ease;
}

/* Primair (standaard ook voor losse button/submit zonder modifier) */
.btn-primary,
a.btn-primary,
input[type="submit"],
input[type="button"],
.nf-form-content input[type="button"] {
  background-color: var(--color-btn) !important;       /* taupe 700 */
  color: var(--color-page) !important;                 /* warm wit  */
  border-color: var(--color-btn) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.nf-form-content input[type="button"]:hover {
  background-color: var(--color-btn-hover) !important; /* taupe 800 */
  color: var(--color-page) !important;
  border-color: var(--color-btn-hover) !important;
}

/* Secundair / omlijnd */
.btn-secondary,
a.btn-secondary {
  background-color: transparent !important;
  color: var(--color-btn) !important;
  border-color: var(--t-400) !important;
}
.btn-secondary:hover,
a.btn-secondary:hover {
  background-color: var(--t-50) !important;
  color: var(--color-btn-hover) !important;
  border-color: var(--t-500) !important;
}

/* Knoppen op een donker taupe vlak (bv. in de merken-band): omgekeerd */
.is-dark .btn-secondary,
.is-dark a.btn-secondary {
  color: var(--color-page) !important;
  border-color: rgba(251, 249, 246, 0.6) !important;
}

.btn:active,
button:active { transform: scale(0.98); }

/* ---------------------------------------------------------------------
   10. Toegankelijkheid — zichtbare focus
--------------------------------------------------------------------- */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: 2px solid var(--t-500);
  outline-offset: 2px;
}


/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 2 — Componenten: bogen, sectie-ritme, behandelkaarten,
            merken-band, CTA, reviews
   Plaatsen ONDER deel 1 in: Instellingen › Geavanceerd › Ontwikkelaars
   ---------------------------------------------------------------------
   Werkwijze homepage-blokken:
   - Zet de achtergrondkleur van een blok via de blok-optie "Achtergrondkleur"
     met onze hex-waarden (bv. #FBF9F6 papier, #8F797C taupe, #EFE8E7 licht).
   - Geef secties die we apart willen stylen een "Uniek ID" uit deze lijst:
       #s-hero  #s-intro  #s-stats  #s-behandelingen  #s-merken
       #s-overons  #s-video  #s-reviews  #s-producten  #s-contact
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Sectie-ritme — ruime, rustige witruimte (Refactoring UI)
   Werkt op de blokken met bovenstaande Unieke ID's.
--------------------------------------------------------------------- */
#s-hero, #s-intro, #s-stats, #s-behandelingen, #s-merken,
#s-overons, #s-video, #s-reviews, #s-producten, #s-contact {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

/* Gecentreerde sectiekop (eyebrow + titel) */
.section-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.section-head .eyebrow { display: block; }

/* ---------------------------------------------------------------------
   2. Boog-vorm (signatuur) + afbeeldingen
   Voeg de class toe aan een afbeelding via "Geavanceerd › CSS-klasse(n)"
   in de blok-editor, of plaats een <img class="arch-top"> in een Tekst-blok.
--------------------------------------------------------------------- */
img { border-radius: var(--radius-md); }      /* zachte standaardronding   */

.arch-top {                                   /* hoge boog (hero, portret) */
  border-radius: 130px 130px var(--radius-lg) var(--radius-lg) !important;
  object-fit: cover;
  width: 100%;
}
.arch-soft {                                  /* zachtere boog (kaarten)   */
  border-radius: 60px 60px var(--radius-md) var(--radius-md) !important;
  object-fit: cover;
  width: 100%;
}

/* Gelaagd kleurvlak achter een boog-beeld voor diepte.
   Gebruik: wrap het beeld in <div class="arch-stack"> ... </div> */
.arch-stack { position: relative; }
.arch-stack::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: -14px;
  width: 80%;
  height: 88%;
  background: var(--sage-light);
  border-radius: 130px 130px var(--radius-lg) var(--radius-lg);
  z-index: 0;
}
.arch-stack > img { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   3. Behandelkaarten  (Behandelingen-blok)
   >>> Verifieer de classes; thema-documentatie noemt treatments-grid,
       treatment-card en treatment-image. <<<
--------------------------------------------------------------------- */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.treatment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.treatment-card:hover {
  transform: translateY(-4px);
  border-color: var(--t-300);
  box-shadow: 0 14px 30px -18px rgba(67, 56, 58, 0.45);
}

.treatment-image,
.treatment-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.treatment-card .treatment-body,
.treatment-card > div:last-child { padding: 1.1rem 1.25rem 1.25rem; }

.treatment-card h2,
.treatment-card h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.treatment-card p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0 0 0.75rem; }

/* "Bekijk" / lees-meer link met pijl */
.treatment-card a:not(.btn) {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--t-600) !important;
}

/* ---------------------------------------------------------------------
   4. Merken-band  (#s-merken)
   Donker taupe vlak met klikbare logo's op wit.
   Bouw als rij afbeeldingen/links; >>> pas selector aan op je opbouw. <<<
--------------------------------------------------------------------- */
#s-merken .eyebrow,
#s-merken h2 { color: var(--color-page); text-align: center; }
#s-merken h2 { margin-bottom: 1.5rem; }

.merken-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.merken-grid a,
.merken-grid .merk-logo {
  flex: 1 1 110px;
  max-width: 180px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: var(--color-page);
  border-radius: var(--radius-md);
  transition: transform 0.18s ease;
}
.merken-grid a:hover { transform: translateY(-3px); }
.merken-grid img { max-height: 34px; width: auto; border-radius: 0; }

/* ---------------------------------------------------------------------
   5. Call-to-action  (cta-section / footer-cta-box / #s-producten)
--------------------------------------------------------------------- */
.cta-section,
.footer-cta-box,
#s-producten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cta-section h2,
#s-producten h2 { margin: 0; }

/* ---------------------------------------------------------------------
   6. Reviews  (#s-reviews — Reviews-blok)
   >>> Inner-markup verifiëren; hieronder een nette, defensieve opmaak. <<<
--------------------------------------------------------------------- */
#s-reviews .review,
#s-reviews .review-item {
  background: var(--s-50);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}
#s-reviews .review p { font-size: 0.85rem; color: var(--color-text-muted); }
#s-reviews .review-author,
#s-reviews cite {
  font-size: 0.78rem;
  font-weight: 600;
  font-style: normal;
  color: var(--t-700);
}

/* ---------------------------------------------------------------------
   7. Stats-strip  (#s-stats) — optionele cijferband (30+ jaar enz.)
   Bouw met een Tekst-blok; geef het donkere achtergrondkleur (#43383A).
--------------------------------------------------------------------- */
#s-stats { color: var(--color-page); }
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1.25rem;
  text-align: center;
}
.stats-strip .stat-number {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-page);
  line-height: 1;
}
.stats-strip .stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-200);
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------
   8. Twee-koloms sectie (intro / over ons): beeld + tekst naast elkaar
   Wrap in <div class="split">; klapt onder elkaar op mobiel.
--------------------------------------------------------------------- */
.split {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  flex-wrap: wrap;
}
.split > * { flex: 1 1 260px; }

/* ---------------------------------------------------------------------
   9. Mobiel — extra ademruimte / kleinere bogen
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  .arch-top { border-radius: 90px 90px var(--radius-md) var(--radius-md) !important; }
  .arch-stack::before { display: none; }
  #s-producten, .cta-section { text-align: center; justify-content: center; }
}


/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 4 — Footer
   Plaatsen ONDER deel 2 in: Instellingen › Geavanceerd › Ontwikkelaars
   Target de echte thema-markup: <footer>, .column, .opening_hours, .socket
   Kleuren/achtergronden op !important: het thema legt z'n eigen footer-
   kleuren met hogere prioriteit op, dus die moeten we overschrijven.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Footer-basis — donker taupe met lichte tekst
--------------------------------------------------------------------- */
footer {
  background: var(--t-800) !important;
  color: #C9BDB8 !important;
  padding: clamp(2.5rem, 5vw, 4rem) 0 0 !important;
}
footer .container { max-width: 1280px; }
footer .column { margin-bottom: 1.75rem; }

/* Koppen */
footer h4 {
  font-family: var(--font-head) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--color-page) !important;
  margin: 0 0 0.85rem !important;
}

/* Tekst */
footer p {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: #C9BDB8 !important;
  margin: 0 0 0.9rem;
}
footer p:last-child { margin-bottom: 0; }

/* Links (overschrijven de algemene taupe linkkleur uit deel 1) */
footer a,
footer a:link,
footer a:visited {
  color: var(--s-200) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}
footer a:hover { color: var(--color-page) !important; text-decoration: underline !important; }

/* Afbeeldingen netjes binnen hun kolom houden */
footer img { max-width: 100% !important; height: auto !important; }

/* ---------------------------------------------------------------------
   2. Openingstijden-tabel
--------------------------------------------------------------------- */
footer .opening_hours {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
footer .opening_hours td {
  padding: 0.3rem 0 !important;
  font-size: 0.88rem !important;
  border-bottom: 1px solid rgba(251, 249, 246, 0.08) !important;
  background: transparent !important;
}
footer .opening_hours tr:last-child td { border-bottom: 0 !important; }
footer .opening_hours td:first-child { color: #B6A8A4 !important; }
footer .opening_hours td:last-child  { text-align: right !important; color: var(--color-page) !important; }

/* ---------------------------------------------------------------------
   3. Social / Facebook-embed binnen de kolom houden
--------------------------------------------------------------------- */
footer .fb-page,
footer .fb_iframe_widget,
footer .fb_iframe_widget span,
footer .fb_iframe_widget iframe {
  max-width: 100% !important;
}
footer .column img {
  border-radius: var(--radius-sm) !important;
  max-width: 200px !important;
}


footer .socket,
.socket {
  background: var(--t-900) !important;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  padding: 1.1rem 0 !important;
  font-size: 0.78rem !important;
  color: #9D908B !important;
  border-top: 1px solid rgba(251, 249, 246, 0.1) !important;
}
footer .socket .container { max-width: 1280px; }
footer .socket span,
footer .socket .left,
footer .socket .right { color: #9D908B !important; }
footer .socket a,
footer .socket a:link,
footer .socket a:visited { color: #B6A8A4 !important; }
footer .socket a:hover { color: var(--color-page) !important; }

footer .socket .right { text-align: right; }
footer .socket .right img {
  height: 16px !important;
  width: auto !important;
  vertical-align: middle;
  margin-left: 0.35rem;
  opacity: 0.85;
  border-radius: 0 !important;
}

footer div.column > h4 {
  border-bottom: 0px solid var(--t-900);
}

/* ---------------------------------------------------------------------
   5. Mobiel
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  footer .socket .right,
  footer .socket .left { text-align: left !important; }
  footer .socket .right { margin-top: 0.5rem; }
}


.btn.btn-primary {
  margin: 7px 0;
}

@media (max-width: 991px) {
header nav.navbar-default ul.navbar-nav .active > a:focus, header nav.navbar-default ul.navbar-nav .active > a:hover, header nav.navbar-default ul.navbar-nav .active > a:visited {
  background: none;
  color: var(--color-btn-hover) !important;
}
header div.navbar-collapse ul li a {
  color: var(--color-btn-hover) !important;
}
html.navbar-open body.mm-fullsize nav.type-fullsize button.navbar-toggle {
  color: var(--color-brand);
}

}

.topbar {
  font-size: 14px;
  background: var(--color-border);
}



@media (min-width: 992px) {
section.page,
section.treatment {
  padding: 96px 0;
}
body.home header > div.wrapper {
    min-height: auto;
  }
  body header > div.wrapper {
    min-height: 225px;
    min-height: 205px;
  }


}



/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 2 — Componenten: bogen, sectie-ritme, behandelkaarten,
            merken-band, CTA, reviews
   Plaatsen ONDER deel 1 in: Instellingen › Geavanceerd › Ontwikkelaars
   ---------------------------------------------------------------------
   LET OP: het veld "Uniek ID" van een blok komt als CSS-CLASS in de HTML
   terecht (bv. <section class="intro text block0 s-hero">), niet als id.
   Daarom targeten we hieronder met .s-xxx (punt), niet #s-xxx.

   Werkwijze homepage-blokken:
   - Achtergrondkleur per blok zet je via de blok-optie "Achtergrondkleur"
     met onze hex-waarden (#FBF9F6 papier, #8F797C taupe, #EFE8E7 licht, #43383A donker).
   - Geef secties die we apart stylen een "Uniek ID" uit deze lijst:
       s-hero  s-intro  s-stats  s-behandelingen  s-merken
       s-overons  s-video  s-reviews  s-producten  s-contact
   - Custom layout (split / merken-grid / stats) plak je als HTML in het
     Tekst-veld via de tab "Tekst" (niet "Visueel"), Titel-veld leeg laten.
   - Voor gecentreerde secties: zet Uitlijning op "Midden" (geeft .text-center).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Sectie-ritme — ruime, rustige witruimte (Refactoring UI)
--------------------------------------------------------------------- */
.s-hero, .s-intro, .s-stats, .s-behandelingen, .s-merken,
.s-overons, .s-video, .s-reviews, .s-producten, .s-contact {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

/* Gecentreerde sectiekop (eyebrow + titel) */
.section-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.section-head .eyebrow { display: block; }

/* ---------------------------------------------------------------------
   2. Boog-vorm (signatuur) + afbeeldingen
   Voeg de class toe aan een <img> in het Tekst-veld (HTML), bv.
   <img class="arch-top" src="..." alt="">.
--------------------------------------------------------------------- */
img { border-radius: var(--radius-md); }      /* zachte standaardronding   */

.arch-top {                                   /* hoge boog (hero, portret) */
  border-radius: 130px 130px var(--radius-lg) var(--radius-lg) !important;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 4 / 5;                        /* altijd portret, ongeacht bronformaat */
}
.arch-soft {                                  /* zachtere boog (kaarten)   */
  border-radius: 60px 60px var(--radius-md) var(--radius-md) !important;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* Gelaagd kleurvlak achter een boog-beeld voor diepte.
   Gebruik: <div class="arch-stack"><img class="arch-top" ...></div> */
.arch-stack { position: relative; }
.arch-stack::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: -14px;
  width: 80%;
  height: 88%;
  background: var(--sage-light);
  border-radius: 130px 130px var(--radius-lg) var(--radius-lg);
  z-index: 0;
}
.arch-stack > img { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   3. Behandelkaarten  (Behandelingen-blok)
   >>> Verifieer de classes; documentatie noemt treatments-grid,
       treatment-card en treatment-image. <<<
--------------------------------------------------------------------- */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.treatment-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.treatment-card:hover {
  transform: translateY(-4px);
  border-color: var(--t-300);
  box-shadow: 0 14px 30px -18px rgba(67, 56, 58, 0.45);
}

.treatment-image,
.treatment-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.treatment-card .treatment-body,
.treatment-card > div:last-child { padding: 1.1rem 1.25rem 1.25rem; }

.treatment-card h2,
.treatment-card h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.treatment-card p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0 0 0.75rem; }

/* Hele kaart klikbaar via een uitgerekte link (geen <a> om blok-elementen) */
.card-stretch { position: absolute; inset: 0; z-index: 2; }

.treatment-card .card-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--t-600);
  display: inline-block;
  margin-top: 0.15rem;
}
.treatment-card:hover .card-link { color: var(--color-btn-hover); }

/* ---------------------------------------------------------------------
   4. Merken-band  (.s-merken) — donker taupe, klikbare logo's op wit
--------------------------------------------------------------------- */
.s-merken .eyebrow,
.s-merken :is(h1, h2) { color: var(--color-page) !important; text-align: center; }
.s-merken :is(h1, h2) { margin-bottom: 1.5rem; }

.merken-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.merken-grid a,
.merken-grid .merk-logo {
  flex: 1 1 110px;
  max-width: 180px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: var(--color-page);
  border-radius: var(--radius-md);
  transition: transform 0.18s ease;
}
.merken-grid a:hover { transform: translateY(-3px); }
.merken-grid img { max-height: 34px; width: auto; border-radius: 0; }

/* ---------------------------------------------------------------------
   5. Call-to-action  (.cta-section) — bv. producten-teaser
--------------------------------------------------------------------- */
.cta-section,
.footer-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cta-section :is(h1, h2) { margin: 0 0 0.35rem; }
.cta-section p { margin: 0; }

/* ---------------------------------------------------------------------
   6. Reviews  (.reviews-grid / .review — custom HTML)
--------------------------------------------------------------------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.review {
  background: var(--s-50);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  margin: 0;
}
.review blockquote {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  border: 0;
  margin: 0 0 0.8rem;
  padding: 0;
}
.review figcaption,
.review .review-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t-700);
}
.review .fa-quote-left,
.review .review-icon {
  color: var(--sage-mid);
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  display: block;
}

/* ---------------------------------------------------------------------
   7. Stats-strip  (.s-stats) — cijferband (30+ jaar enz.)
   Tekst-blok met donkere achtergrond (#43383A), HTML in het Tekst-veld.
--------------------------------------------------------------------- */
.s-stats :is(h1, h2, h3, p) { color: var(--color-page); }
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1.25rem;
  text-align: center;
}
.stats-strip .stat-number {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-page);
  line-height: 1;
}
.stats-strip .stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-200);
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------
   8. Twee-koloms sectie (intro / over ons): beeld + tekst naast elkaar
   Wrap in <div class="split"> ... </div>; klapt onder elkaar op mobiel.
--------------------------------------------------------------------- */
.split {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  flex-wrap: wrap;
}
.split > * { flex: 1 1 260px; }
.split--reverse { flex-direction: row-reverse; }

/* ---------------------------------------------------------------------
   9. Video  (.s-video) — boog-frame om de (toekomstige) video
--------------------------------------------------------------------- */
.video-frame {
  max-width: 750px;
  margin: 0 auto;
  border-radius: 90px 90px var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--t-600);
}
.video-frame iframe,
.video-frame video { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------
   10. Mobiel — extra ademruimte / kleinere bogen
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  .arch-top { border-radius: 90px 90px var(--radius-md) var(--radius-md) !important; }
  .arch-stack::before { display: none; }
  .s-producten .container, .cta-section { text-align: center; justify-content: center; }
}

/* =====================================================================
   11. Afbeeldingen — altijd dezelfde verhouding (los van bronformaat)
   object-fit: cover vult het kader en snijdt het teveel weg (vanuit het
   midden), zonder uitrekken. Voeg een ratio-class toe aan een <img>.
   ===================================================================== */
.ratio-square,
.ratio-portrait,
.ratio-photo,
.ratio-wide,
.ratio-pano,
img.cover {
  width: 100%;
  object-fit: cover;
  display: block;
}

.ratio-square   { aspect-ratio: 1 / 1; }     /* vierkant            */
.ratio-portrait { aspect-ratio: 4 / 5; }     /* staand (portret)    */
.ratio-photo    { aspect-ratio: 3 / 2; }     /* klassieke foto      */
.ratio-wide     { aspect-ratio: 16 / 9; }    /* breedbeeld          */
.ratio-pano     { aspect-ratio: 21 / 9; }    /* panorama / banner   */

/* Wil je een foto een vaste hoogte geven (bv. in een eigen kader):
   geef het kader een hoogte en zet class="cover" op de <img>. */
.image-frame {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.image-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Pas het brandpunt aan als een foto verkeerd uitgesneden wordt: */
.focus-top    { object-position: top; }
.focus-bottom { object-position: bottom; }
.focus-left   { object-position: left; }
.focus-right  { object-position: right; }


/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 6 — Behandelcategorie-pagina's (thema-shortcode, alleen CSS)
   Plaatsen ONDER deel 2 in: Instellingen › Geavanceerd › Ontwikkelaars
   Target de thema-markup: .treatments.shortcode, .treatments .item,
   .page-header, .breadcrumbs. Geldt voor ALLE categoriepagina's.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Breadcrumbs
--------------------------------------------------------------------- */
.breadcrumbs {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}
.breadcrumbs a { color: var(--t-600) !important; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-btn-hover) !important; text-decoration: underline; }
.breadcrumbs .breadcrumb_last { color: var(--color-text); }

/* ---------------------------------------------------------------------
   2. Paginakop
--------------------------------------------------------------------- */
.page-header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-header h1 { font-family: var(--font-head); }

/* De shortcode herhaalt de categorienaam als <h3> — dubbelop, verbergen */
.treatments.shortcode > h3 { display: none; }

/* ---------------------------------------------------------------------
   3. Raster — float-grid omzetten naar een nette responsive grid
--------------------------------------------------------------------- */
.treatments .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Clearfix-pseudo's van het thema worden anders lege grid-cellen */
.treatments .row::before,
.treatments .row::after { display: none !important; }

.treatments .row > [class*="col-"] {
  display: flex;                      /* laat de kaart de cel vullen */
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   4. Behandel-item als kaart
--------------------------------------------------------------------- */
.treatments .item {
  height: auto !important;            /* inline thema-hoogtes resetten */
  min-height: 0 !important;
  width: 100%;                        /* vult de cel → gelijke hoogtes */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.treatments .item:hover {
  transform: translateY(-4px);
  border-color: var(--t-300);
  box-shadow: 0 14px 30px -18px rgba(67, 56, 58, 0.45);
}

/* Ronde thumbnail */
.treatments .item img,
.treatments .item .img-circle {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 1px solid var(--s-200);
}

/* Titel (zit in een <a>, dus linkkleur + onderstreping overschrijven) */
.treatments .item a { text-decoration: none !important; }
.treatments .item h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text) !important;
  margin: 0;
}
.treatments .item:hover h4 { color: var(--color-btn) !important; }

/* ---------------------------------------------------------------------
   5. Sectie-ruimte
--------------------------------------------------------------------- */
.treatments.shortcode { margin-top: 0.5rem; }


div.page-header h1 {
  border-bottom: 0px solid #e6e6e6;
}



/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 7 — Behandel-detailpagina
   Plaatsen ONDER deel 2 in: Instellingen › Geavanceerd › Ontwikkelaars
   Gescoped met :has(.treatment-layout) zodat het ALLEEN behandelpagina's
   raakt die onze custom HTML bevatten — niet de categoriepagina's.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Thema-onderdelen op de detailpagina bijsturen
--------------------------------------------------------------------- */
.content:has(.treatment-layout) .page-header { margin-bottom: 1.25rem; }
.content:has(.treatment-layout) .page-header h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
}

/* Bannerfoto als brede afbeelding met zachte boog-bovenkant */
.content:has(.treatment-layout) > figure { margin: 0 0 1.75rem; }
.content:has(.treatment-layout) > figure img {
  width: 100%;
  height: clamp(160px, 26vw, 400px);
  object-fit: cover;
  border-radius: 40px 40px var(--radius-md) var(--radius-md);
}

/* Automatische knoppenrij van het thema verbergen (prijskaart heeft ze) */
.content:has(.treatment-layout) .actions { display: none !important; }

/* ---------------------------------------------------------------------
   2. Twee-koloms layout
--------------------------------------------------------------------- */
.treatment-layout {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: flex-start;
  flex-wrap: wrap;
}
.treatment-main  { flex: 1.7; min-width: 280px; }
.treatment-aside { flex: 1;   min-width: 230px; }

/* ---------------------------------------------------------------------
   3. Leeskolom
--------------------------------------------------------------------- */
.treatment-main .lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 1.5rem;
}
.treatment-main h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
.treatment-main p { margin: 0 0 1rem; color: var(--color-text-muted); }

/* "De behandeling bestaat uit" — aangevinkte lijst in twee kolommen */
.treatment-steps {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
.treatment-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text);
}
.treatment-steps li i { color: var(--sage-mid); font-size: 0.85rem; margin-top: 0.18rem; }

/* ---------------------------------------------------------------------
   4. Prijskaart (meescrollend)
--------------------------------------------------------------------- */
.price-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 1.25rem;
}
.price-card .price-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.price-card .price-amount {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--color-text);
  line-height: 1;
  margin: 0.2rem 0 1.1rem;
}
.price-card .price-meta { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.price-card .price-meta li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--s-100);
}
.price-card .price-meta li:last-child { border-bottom: 0; }
.price-card .price-meta i { color: var(--t-500); width: 18px; text-align: center; }

.price-card .btn { display: flex; width: 100%; margin-top: 0.5rem; }

/* ---------------------------------------------------------------------
   5. Mobiel
--------------------------------------------------------------------- */
@media (max-width: 640px) {
  .treatment-steps { grid-template-columns: 1fr; }
  .price-card { position: static; }
}



/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 9 — Merk-/tekstpagina (leespagina met banner)
   Plaatsen ONDER deel 2 in: Instellingen › Geavanceerd › Ontwikkelaars
   Herbruikbaar voor alle merkpagina's (hannah, Lanèche, Henriëtte
   Faroche, Courtin, PUNE) en andere tekstpagina's.
   ===================================================================== */

/* Brede banner bovenaan, met zachte boog-bovenkant */
.page-banner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 40px 40px var(--radius-md) var(--radius-md);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Rustige leeskolom */
.page-prose { max-width: 72ch; margin: 0 auto; }

.page-prose h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 2rem 0 0.5rem;
}
.page-prose h2:first-child { margin-top: 0; }

.page-prose p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 0 1.1rem;
}

/* Knoppenrij onderaan */
.page-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}


/* =====================================================================
   l'Avantage — Salonsite (NetBeauty) custom CSS
   DEEL 12 — Afspraak en contact (standaard themapagina, alleen styling)
   Plaatsen ONDER deel 2. Alles gescoped onder .contact.
   ===================================================================== */

.contact { padding-block: clamp(2rem, 4vw, 3.5rem); }
.contact .page-header { border: 0; margin-bottom: 1.25rem; }

/* --- De twee blokken (Afspraak maken + Contactformulier) als kaarten --- */
.contact .holder .row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.contact .holder .row::before,
.contact .holder .row::after { display: none; }   /* clearfix-pseudo's uit */
.contact .holder .row > [class*="col-"] {
  flex: 1 1 260px;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
.contact .holder .wrap {
  height: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
/* "Afspraak maken" subtiel accent zodat de online-boeking opvalt */
.contact .holder .row > [class*="col-"]:first-child .wrap { background: var(--t-50); }

.contact .wrap h3,
.contact .wrap h4,
.contact .nf-form-title h3 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.6rem;
}

/* --- Ninja Forms velden --- */
.contact .nf-field-element .ninja-forms-field:not([type="submit"]) {
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}
.contact textarea.ninja-forms-field { min-height: 120px; }
.contact .ninja-forms-field:not([type="submit"]):focus {
  outline: none;
  border-color: var(--t-500);
  box-shadow: 0 0 0 3px rgba(143, 121, 124, 0.18);
}
.contact .nf-field-container { margin-bottom: 1rem; }
.contact .contact-privacy p { font-size: 0.85rem; color: var(--color-text-soft); margin: 0; }
.contact .ninja-forms-req-symbol { color: var(--t-600); }
/* submit-knop = al .btn .btn-primary -> krijgt onze knopstijl; auto breedte */
.contact input[type="submit"].btn { width: auto; cursor: pointer; }

/* --- Rechter kolom: kaartjes --- */
.contact aside .block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: 1.25rem;
}
.contact aside .head h4 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}
.contact aside .list-unstyled { list-style: none; padding: 0; margin: 0; }
.contact aside .list-unstyled li { padding: 0.15rem 0; color: var(--color-text); }
.contact aside a { color: var(--color-btn); }
.contact aside a:hover { text-decoration: underline; }

/* Kaart met ronde hoeken en vaste hoogte */
.contact .googlemap,
.contact .map.js-map {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Openingstijden-tabel (zoals in de footer) */
.contact .opening_hours { width: 100%; border-collapse: collapse; }
.contact .opening_hours td {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

p:empty {
  display: none;
}

.contact .opening_hours td:last-child { text-align: right; color: var(--color-text-soft); }
.contact .opening_hours tr:last-child td { border-bottom: 0; }

/* === Netbeauty aanpassingen 19-06-2026 === */
/* Knoppen: stabiele border zodat hover niet hapert (incl. submit-knoppen) */
.btn,
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
[type="submit"], [type="submit"]:hover, [type="submit"]:focus, [type="submit"]:active,
.nf-form-content input[type=submit], .nf-form-content input[type=submit]:hover, .nf-form-content input[type=submit]:focus, .nf-form-content input[type=submit]:active {
  border-width: 1px !important;
  border-style: solid !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
[type="submit"], [type="submit"]:hover, [type="submit"]:focus, [type="submit"]:active,
.nf-form-content input[type=submit], .nf-form-content input[type=submit]:hover, .nf-form-content input[type=submit]:focus, .nf-form-content input[type=submit]:active {
  border-color: var(--t-700, #5C4C4F) !important;
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  border-color: var(--t-400, #A89195) !important;
}

/* Behandelingen: ruimte onder de opsomming (stappenlijst) */
.treatment-main ul.treatment-steps {
  margin-bottom: var(--space-xl, 2rem) !important;
}


/* merklogo zwart - alle merklogo's egaal zwart maken (Netbeauty) */
.merken-grid img {
  filter: brightness(0);
}