@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: 40px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 28px;
  }

  h4 {
  font-size: 24px;
  }

  h5 {
  font-size: 20px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: var(--ink);
  }

  h1, h2, h3, h4, h5, h6 {
  color: var(--ink) !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: #c9674e !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: #9d604d !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: #c9674e !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: #9d604d !important;
  color: #fff !important;
  }

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

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

  div.social-media ul li a:hover {
  background: #9d604d !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: #c9674e !important;
  }

  div.phone a.phone, div.email a.email {
  background: #9d604d !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: #9d604d !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: #9d604d;
  border-color: #9d604d;
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: #9d604d !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #9d604d !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: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }



  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://lavishhuidinstituut.nl/wp-content/uploads/sites/513/2026/09/260305_Lavish-Langmair-042-1920x1280.webp');
  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: 418px;
    }
  body.home header > div.wrapper.above {
  min-height: 500px;
      min-height: 568px;
    }
  }

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

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

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

  .topbar {
  background: var(--gray-950);
  }
  .topbar {
  color: var(--gray-50);
  }




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

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

  header nav.navbar-default {
  background-color: rgba(157, 96, 77, .5) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(157, 96, 77, .5) !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: #9d604d !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: center;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid #c9674e;
  }

  @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: #c9674e !important;
  }
  }


  header div.header div.contact i {
  color: #c9674e;
  }

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

  section.featured div.item p,
  section.news div.item p {
  color: var(--ink) !important;
  }

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

  section.partners {
  background: #c9674e !important;
  }

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

  footer,
  .footer-cta.center:after,
  .author {
  background: #9d604d !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid #c9674e;
  }

  footer div.socket,
  .footer-sticky {
  background: #9d604d !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

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

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

  section.treatments div.item a {
  color: var(--ink) !important;
  }

  section.prices table tr td a {
  color: var(--ink) !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: var(--ink) !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: #9d604d;
  }

  /*https://coventgarden.showit.site*/
/*https://marylebone.showit.site/*/
/*https://studiodesigns.co/shop*/

/* =========================================================================
   KLEUREN
   Alle kleuren staan in dit ene blok. Wil je een andere richting op,
   pas dan alleen de waarden hieronder aan — de rest van de CSS gebruikt
   uitsluitend deze tokens.

   Actief: huisstijl Iris — crème achtergrond, antraciet tekst,
   terracotta als accent. Onderaan dit blok staat een donkere variant
   van dezelfde huisstijl, uitgecommentarieerd.
   ========================================================================= */

:root {

/* merkkleuren — huisstijl Iris */
    --creme:      #F3ECE1;
    --beige:      #D6C8BD;
    --terracotta: #C9674E;
    --brons:      #9D604D;
    --antraciet:  #2B2D35;

/* afgeleide schaal: crème en antraciet in stappen gemengd,
   met beige als 300 — voor lijnen, tinten en tussenliggende teksten */
    --stone-50:  #FAF7F2;
    --stone-100: var(--creme);
    --stone-200: #E5DFD5;
    --stone-300: var(--beige);
    --stone-400: #B7B3AD;
    --stone-500: #8F8D8B;
    --stone-600: #676669;
    --stone-700: #494A4F;
    --stone-800: #3A3B42;
    --stone-900: var(--antraciet);
    --stone-950: #1E1F25;

    --accent:      var(--terracotta); /* cursieve accenten, cijfers, sterren */
    --accent-dark: var(--brons);      /* hover op accentkleur */
    --accent-soft: var(--beige);      /* slagschaduw foto's, subtiele vlakken */

/* semantische tokens — deze gebruikt de rest van de stylesheet */
    --bg:            var(--creme);       /* body */
    --surface:       var(--stone-50);    /* .wrap, secties */
    --surface-alt:   var(--beige);       /* light-background, table hover */
    --surface-modal: var(--stone-50);

    --ink:        var(--stone-900);      /* hoofdtekst */
    --ink-soft:   var(--stone-600);      /* hover, secundair */
    --line:       var(--stone-400);      /* randen, scheidingslijnen */
    --line-light: var(--stone-200);

    --on-image:   #ffffff;               /* tekst over foto's / hero */
    --footer-bg:  var(--antraciet);
    --footer-ink: var(--creme);

    /* Let op: crème op terracotta is 3,2:1 en crème op brons 4,3:1.
       Voor tekst van 13px vraagt WCAG AA 4,5:1. Wil je dat halen, zet
       --btn-primary-bg dan op var(--antraciet) (11,7:1) en houd terracotta
       voor accenten. Zie de toelichting bij de oplevering. */
    --btn-primary-bg:      var(--terracotta);
    --btn-primary-ink:     var(--creme);
    --btn-primary-hover:   var(--brons);
    --btn-secondary-line:  var(--antraciet);  /* outline-knop */
    --btn-secondary-ink:   var(--antraciet);
    /* de --white-varianten: alleen bedoeld voor knoppen die over een foto
       of op een donker vlak staan. Op de crème achtergrond vallen ze weg. */
    --btn-invert-bg:       var(--creme);
    --btn-invert-ink:      var(--antraciet);
    --btn-invert-hover:    var(--beige);

    --link-hover: var(--terracotta);

    --ticker-bg:   var(--antraciet);
    --ticker-ink:  var(--creme);
    --ticker-star: var(--accent);

/* typografie uit de branding.
   MADE Bon Voyage en MADE The Artist zijn betaalde fonts: die moet je zelf
   hosten via @font-face. Zolang dat niet gebeurd is valt hij netjes terug
   op Cormorant Garamond. Montserrat staat op Google Fonts. */
    --font-body:    "Montserrat", "Work Sans", sans-serif;
    --font-display: "MADE Bon Voyage", "Cormorant Garamond", serif;
    --font-script:  "MADE The Artist Script", "Cormorant Garamond", serif;

/* logo's: op een lichte ondergrond zwart, op een donkere wit */
    --logo-filter:        brightness(0);              /* footer/merken op licht */
    --logo-filter-ondark: brightness(0) invert(1);    /* header + footer */

/* ---- ALTERNATIEF: origineel donker palet ----
   Vervang de semantische tokens hierboven door onderstaande waarden
   om terug te gaan naar het donkere ontwerp.

    --bg:            var(--antraciet);
    --surface:       var(--stone-800);
    --surface-alt:   var(--stone-700);
    --surface-modal: var(--stone-800);
    --ink:            var(--creme);
    --ink-soft:       var(--beige);
    --line:           var(--stone-600);
    --line-light:     var(--stone-700);
    --footer-bg:      var(--stone-950);
    --footer-ink:     var(--creme);
    --btn-primary-bg:     var(--terracotta);
    --btn-primary-ink:    var(--creme);
    --btn-primary-hover:  var(--brons);
    --btn-secondary-line: var(--creme);
    --btn-secondary-ink:  var(--creme);
    --logo-filter:        brightness(0) invert(1);
   -------------------------------------------- */

/* legacy aliassen — voor oude regels of inline styles die --gray-* gebruiken */
    --gray-50:  var(--stone-50);
    --gray-100: var(--stone-100);
    --gray-200: var(--stone-200);
    --gray-300: var(--stone-300);
    --gray-400: var(--stone-400);
    --gray-500: var(--stone-500);
    --gray-600: var(--stone-600);
    --gray-700: var(--stone-700);
    --gray-800: var(--stone-800);
    --gray-900: var(--stone-900);
    --gray-950: var(--stone-950);

/*spacings*/
   --spacing-25: calc(1rem * 0.25);
   --spacing-50: calc(1rem * 0.5);
   --spacing-75: calc(1rem * 0.75);
   --spacing-100: calc(1rem * 1);
   --spacing-150: calc(1rem * 1.5);
   --spacing-200: calc(1rem * 2);
   --spacing-300: calc(1rem * 3);
   --spacing-400: calc(1rem * 4);
   --spacing-600: calc(1rem * 6);
   --spacing-800: calc(1rem * 8);
   --spacing-1200: calc(1rem * 12);
   --spacing-1600: calc(1rem * 16);
   --spacing-2400: calc(1rem * 24);
   --spacing-3200: calc(1rem * 32);
   --spacing-4000: calc(1rem * 40);
   --spacing-4800: calc(1rem * 48);

--transition-speed: 300ms;
}

.shop_uspbar .container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.table-hover>tbody>tr:hover {
    background-color: var(--surface-alt);
}

body {
 /* background: var(--bg);*/
  color: var(--ink);
  font-family: var(--font-body);
}


div.merken {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--spacing-300);
  align-items: center;
}

header > div.wrapper::after {
  background-position: 0 20%;
  filter: grayscale(1);
}

header div.header.full-width div.wrapper img.logo {
  filter: var(--logo-filter-ondark);
}

/* tekst in de hero staat over een foto en blijft dus licht */
header .header__content,
header .header__content h1,
header .header__content h2,
header .header__content p {
  color: var(--on-image);
}

/* Linkkleur staat bewust op lage specificiteit (:where telt niet mee).
   De oorspronkelijke selector woog zwaarder dan .btn.btn-primary,
   .col-xs-48 a en de footerregels, waardoor die er niet overheen kwamen —
   ook niet met !important. Nu winnen uitzonderingen vanzelf. */
a:where(:not(.socket a, header a, .btn)) {
  color: var(--ink) !important;
}

/* Opmaak blijft op de oorspronkelijke specificiteit staan, zodat het thema
   deze niet terugdraait. */
.link a:not(.btn), a:not(.socket a):not(header a):not(.btn) {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid;
}

/* E-mailadressen niet in hoofdletters tonen (footer, contact, vacatures e.d.) */
a[href^="mailto:"] {
  text-transform: none !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

div.behandelingen-container_col:nth-child(6) {
  border-right: 0 !important;
}


.faq-answer {
    display: none;
}

.wrap {
  background: var(--surface);
}
.single-behandelingen .row {
  grid-column: 1 / span 2;
}

.single-behandelingen .faq {
  grid-column: 1;
}

.faq-question br {
  display: none;
}
.faq-question {
  display: flex;
  gap: 1rem;
}

/* lichte knop, bedoeld voor gebruik over foto's en donkere vlakken */
.btn.btn-primary--white {
  background: var(--btn-invert-bg) !important;
  color: var(--btn-invert-ink) !important;
  border: 1px solid var(--btn-invert-bg) !important;
}

.btn.btn-primary--white:hover,
.btn.btn-primary--white:focus-visible {
  background: var(--btn-invert-hover) !important;
  color: var(--btn-invert-ink) !important;
  border-color: var(--btn-invert-hover) !important;
}
.row.foto-team img {
  box-shadow: -15px 15px var(--accent-soft);
  height: 360px;
}

article.post header, article.post .entry-summary {
  max-width: 500px;
  width: 100%;
}

.row.equal.logos img {
  filter: var(--logo-filter);
  margin-bottom: var(--spacing-300);
}

article.post figure, article.post img {
  width: auto;
  max-height: 300px;
}
.entry-summary .btn {
  margin-top: 0 !important;
  margin-bottom: var(--spacing-300);
}
hundefined {
  display: none;
}
.treatments {
  z-index: 0;
  position: relative;
}

.btn.btn-secondary--white {
  background: none !important;
  color: var(--creme) !important;
  /* staat over een foto, daarom crème i.p.v. de donkere tekstkleur */
  border: 1px solid var(--btn-invert-bg) !important;
}
.btn.btn-secondary--white:hover,
.btn.btn-secondary--white:focus-visible {
  background: var(--btn-invert-bg) !important;
  color: var(--btn-invert-ink) !important;
  border-color: var(--btn-invert-bg) !important;
}
.wrap h3 {
  display: none;
}
.col-xs-48.col-md-24 a, .col-xs-48.col-md-24 img {
  outline: 1px solid var(--stone-100);
  outline-offset: -20px;
  z-index: 2;
}

.col-xs-48.col-md-24 img {
  filter: brightness(0.65);
}
.col-xs-48.col-md-24 a {
  border: none;
  color: var(--on-image) !important;
}

h3:has(.script) .script {
  font-size: 30px;
}
.menu-item.menu-item-gtranslate.menu-item-has-children.notranslate {
  float: right;
  margin-top: 7px;
  margin-left: 12px;
}
.script {
  font-style: italic;
  font-family: var(--font-script);
  font-size: 25px;
  line-height: 1.3;
  color: var(--accent) !important;
}

/* script over een foto blijft wit */
header .script,
.col-xs-48.col-md-24 .script {
  color: var(--on-image) !important;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:hover {
  opacity: 0.8;
  transition: var(--transition-speed);
}

.contact-gegevens--link:hover {
  opacity: 0.6;
}

.section--diensten {
  background-blend-mode: multiply;
}


.modal__container {
  background-color: var(--surface-modal);
  color: var(--ink);
}

.faq-question {
    cursor: pointer;
}


footer div.social-media ul li a {
  border-bottom: 0;
}

h2:has(a) a {
  color: var(--ink) !important;
}

body.home header > div.wrapper {
  height: 91vh;
  min-height: 650px;
  max-height: 1920px;
}

div.merken br {
  display: none;
}

.topbar {
  text-align: center;
}

.behandelingen-container {
  display: flex;
/*  gap: var(--spacing-200); */
}

.behandelingen-container_col {
  flex: 1;
}

.row.foto-team img {
  max-height: 350px;
  width: auto;
}

p:has(iframe) {
  grid-column: 1 / span 3;
  margin: var(--spacing-300) 0;
}

p:has(iframe) {
  grid-column: 1 / span 3;
}
/* ---- KNOPPEN ----
   Typografie volgt de sub header uit de branding:
   Montserrat bold, caps, 13px, 160 letterspacing. */
.btn {
  /* vangnet: elke knop is terracotta, ook zonder modifier-klasse.
     .btn-secondary zet dit hieronder weer terug naar een outline. */
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-ink) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  padding: var(--spacing-150) var(--spacing-200) !important;
  border-radius: 0 !important;
  margin-top: var(--spacing-300) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  text-decoration: none !important;
  border-bottom: 0;
  cursor: pointer;
  transition: background-color var(--transition-speed),
              border-color var(--transition-speed),
              color var(--transition-speed);
}
.btn:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-ink) !important;
}
.btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* primair: terracotta, hover naar brons */
.btn.btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-ink) !important;
  border: 1px solid var(--btn-primary-bg) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-ink) !important;
}

/* secundair: alleen een lijn, vult zich met antraciet */
.btn.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--btn-secondary-line) !important;
  color: var(--btn-secondary-ink) !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
  background: var(--btn-secondary-line) !important;
  border-color: var(--btn-secondary-line) !important;
  color: var(--creme) !important;
}

div.behandelingen-container_col > a:nth-child(1) {
  border-color: var(--line);
}

section.treatments div.item a {
  text-decoration: none !important;
  border-bottom: 0;
}


:is(section):is(.page, .prices, .contact, .treatments) {
  padding: var(--spacing-800) 0;
}
.single-behandelingen p:has(iframe) {
  grid-column: 1 / span 2 !important;
}

.footer-cta.text-center.above {
  background: var(--footer-bg) !important;
  color: var(--footer-ink);
}
footer div.socket, .footer-sticky {
  background: var(--footer-bg) !important;
  color: var(--footer-ink);
}
footer div.socket a, .footer-sticky a,
.footer-cta.text-center.above a,
footer div.socket h1, footer div.socket h2,
footer div.socket h3, footer div.socket h4 {
  color: var(--footer-ink) !important;
}

header > div.wrapper.above_shadow::before {
  top: 0;
}

div.page-header h1 {
  border-bottom: 0px solid var(--line-light);
  line-height: 60px;
  margin-bottom: 30px;
  margin-top: 0;
}
footer div.column img {
  filter: var(--logo-filter-ondark);
}
.light-background {
  background: var(--surface-alt);
  color: var(--ink);
  border-radius: 0;
  text-align: center;
  padding: 2rem;
}

.number {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 75px;
  color: var(--accent) !important;
  position: relative;
  text-align: center;
  top: -27px;
  line-height: 0;
  margin-bottom: var(--spacing-200);
    pointer-events: none;
}

.mb-2 {
  margin-bottom: 1em !important;
}

div.merken img {
  filter: var(--logo-filter);
}


@media only screen and (min-width: 992px) {

.behandelingen-container {
  display: grid;
  gap: var(--spacing-200);
  grid-template-columns: repeat(3, 1fr);
}

.header.full-width .container {
  width: 100%;
  max-width: 1600px;
}

  body header > div.wrapper {
    min-height: 525px;
  }

section.intro h1, section.intro h2 {
  font-size: 60px;
}
header > div.wrapper::after {
  transform: scaleX(-1);
}

.col-md-32.col-md-offset-8 {
  text-align: left;
  margin: 0;
}

section.intro {
  padding: var(--spacing-1200) 0;
}
.behandelingen-container_col {
  padding: var(--spacing-200);
  border-right: 1px solid var(--line);
}



footer .column a:hover {
opacity: 0.75;
transition: var(--transition-speed);
}

a:where(:not(.socket a, header a, .btn)):hover {
  color: var(--link-hover) !important;
    opacity: 0.8;
  transition: color var(--transition-speed), opacity var(--transition-speed);
}

div.behandelingen-container_col:nth-child(3) {
  border-right: none;
}
footer div.column > h4 {
  border-bottom: 0px solid var(--stone-800);
}
.behandelingen-container_col {
  display: flex;
  flex-direction: column;
}
.link {
  margin-top: auto;
}
.contact-gegvens--block .btn {
  margin-top: 0 !important;
}


.contact-gegvens--container {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-100);
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}
.contact-gegvens--block {
  border: 1px solid var(--line);
  color: var(--ink);
  flex: 1;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


:is(.single-post .content) :is(ul, p, ol, strong) {
  grid-column: 1;
}


:is(.single-post .content) :is(h1, h2, h3, h4, h5, h6, .page-header ) {
  grid-column: 1 / span 2;
}

.single-post .content  p:has(img) {
  grid-column: 1 / span 2;
}

.single-post .content {
  display: grid !important;
  grid-template-columns: 0.6fr 0.3fr 0.1fr;
}
.single-post  figure {
  grid-column: 1 / span 3;
  margin-bottom: var(--spacing-300);
}


.single-behandelingen h1, 
.single-behandelingen h2, 
.single-behandelingen h3, 
.single-behandelingen h4, 
.single-behandelingen h5, 
.single-behandelingen h6 {
  grid-column: 1 / span 2;
}
.single-behandelingen p, .single-behandelingen ul, .single-behandelingen strong, .single-behandelingen ol, .single-behandelingen table, .single-behandelingen .gallery {
  grid-column: 1;
}
.single-behandelingen p:has(img) {
  grid-column: 1 / span 2;
}

.behandelingen-container_col img {
  height: 420px;
  object-fit: cover;
  width: 100%;
}

.single-behandelingen section.page {
  padding: var(--spacing-1200) 0;
}
.single-behandelingen figure {
  grid-column: 1 / span 3;
  margin-bottom: var(--spacing-300);
}
.single-behandelingen figure img {
  width: 100%;
    object-fit: cover;
    max-height: 500px;
}

.single-behandelingen section.page div.content {
  display: grid;
  grid-template-columns: 0.6fr 0.3fr 0.1fr;
}
.single-behandelingen .page-header {
  grid-column: 1 / span 2;
}

  header > div.wrapper .header__content {
    transform: translate3d(0, -150px, 0);
  }

}

.font-big {
  font-size: var(--spacing-300);
}
.italic {
  font-style: italic;
  font-family: var(--font-display);
}
header .header__content h1 {
  font-size: var(--spacing-800);
  line-height: 1;
  margin-bottom: var(--spacing-150);
}


@media only screen and (max-width: 991px) {

body.home header > div.wrapper {
  min-height: 870px;
}

.gt_switcher_wrapper {
  position: absolute !important;
  top: 70px !important;
}

.home .logos div.col-md-24:nth-child(4) {
  margin-top: 0 !important;
}
.home .logos div.col-md-24:nth-child(4) img {
 display: none !important;
}

.behandelingen-container_col img {
  height: 210px;
  width: 100%;
  object-fit: cover;
}

footer div.socket {
  padding-bottom: 75px !important;
}

header > div.wrapper::after {
    background-position: 40% 0;
}

 #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-size: 13px !important;
}

header .header__content h1 {
  font-size: 60px;
}
header nav.navbar-default {
  background: transparent;
}
.navbar-toggle.default {
  color: var(--on-image);
}
header .header__content {
  align-items: center;
}
header .header__content .btn {
  width: 100%;
  margin: 0 auto;
}
header .header__content p {
  line-height: 1.3;
}
.behandelingen-container {
  flex-direction: column;
}
.row.equal.vertical-align.logos {
  row-gap: var(--spacing-400);
}
.contact-gegvens--block {
  border: 1px solid var(--line);
  flex: 1;
  height: 135px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 1rem;
}
.contact-gegvens--block a {
  color: var(--ink) !important;
}
.contact-gegvens--block .btn {
  margin-top: 0 !important;
}



#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item .mega-sub-menu {
  display: none;
}
.show-submenu {
    display: block !important;
}
.backToOverview {
    padding: 10px 20px;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-ink);
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
}
.backToOverview:hover {
    background-color: var(--btn-primary-hover);
}

}

/*top rated*/

        .ticker-wrapper {
            width: 100%;
            height: 50px;
            background: var(--ticker-bg);
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
        }

        .ticker-content {
            display: flex;
            white-space: nowrap;
            position: absolute;
            animation: scroll 20s linear infinite;
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            padding: 0 50px;
        }

        .star {
            color: var(--ticker-star);
            font-size: 27px;
            margin: 0 10px;
        }

     .ticker-wrapper   .text {
            color: var(--ticker-ink);
            font-size: 25px;
            font-weight: 900;
            letter-spacing: 2px;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Voor mooiere sterren */
        .star::before {
            content: '★';
        }

@media (prefers-reduced-motion: reduce) {
  .ticker-content {
    animation: none;
  }
}





.behandelingen-container_col a:not(.socket a):not(header a):not(.btn) {
  border-bottom: 0 !important;
}


.problem-card h3 {
  color: var(--bg) !important;
}

.slick-list.draggable .script {
  color: var(--accent-soft) !important;
}


/* --- Behandelpagina's: rustiger ritme, gecentreerde leeskolom --- */

.single-behandelingen section.page {
  padding: var(--spacing-800) 0 var(--spacing-1200);
}

.single-behandelingen section.page div.content {
  display: block;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.single-behandelingen figure {
  margin-bottom: var(--spacing-600);
}

.single-behandelingen figure img {
  max-height: 340px;
}

.single-behandelingen section.page div.content > figure + br {
  display: none;
}

.single-behandelingen section.page div.content h2,
.single-behandelingen section.page div.content h3,
.single-behandelingen section.page div.content h4 {
  margin-top: var(--spacing-600);
  margin-bottom: var(--spacing-150);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.single-behandelingen section.page div.content > h2:first-child,
.single-behandelingen section.page div.content > h3:first-child,
.single-behandelingen section.page div.content > h4:first-child {
  margin-top: 0;
}

.single-behandelingen section.page div.content p,
.single-behandelingen section.page div.content li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.single-behandelingen section.page div.content p {
  margin-bottom: var(--spacing-150);
}

/* vetgedrukte regels die als tussenkopje gebruikt worden */
.single-behandelingen section.page div.content p:has(> strong:only-child) {
  color: var(--ink);
  margin-top: var(--spacing-300);
  margin-bottom: var(--spacing-50);
}

.single-behandelingen section.page div.content p > strong:only-child {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.single-behandelingen section.page div.content ul,
.single-behandelingen section.page div.content ol {
  margin: var(--spacing-150) 0 var(--spacing-300);
  padding-left: var(--spacing-200);
}

.single-behandelingen section.page div.content li {
  margin-bottom: var(--spacing-75);
}

.single-behandelingen section.page div.content li::marker {
  color: var(--accent);
}

.single-behandelingen section.page div.content .btn {
  margin-top: var(--spacing-300);
}

@media only screen and (max-width: 991px) {
  .single-behandelingen section.page {
    padding: var(--spacing-400) 0 var(--spacing-600);
  }
  .single-behandelingen figure {
    margin-bottom: var(--spacing-400);
  }
  .single-behandelingen section.page div.content h2,
  .single-behandelingen section.page div.content h3,
  .single-behandelingen section.page div.content h4 {
    margin-top: var(--spacing-400);
  }
}


.single-behandelingen section.page div.content > p:first-child {
  margin-top: 0;
}


/* --- Herstel: kleine visuele fouten --- */

/* wpautop laat lege alinea's achter; die geven rommelige tussenruimte */
.behandelingen-container_col p:empty {
  display: none;
}

/* de lichte knop erfde de creme tekstkleur van de footer-CTA en werd onleesbaar */
.footer-cta.text-center.above a.btn.btn-primary--white {
  color: var(--btn-invert-ink) !important;
}

/* nummers over de behandelfotos leesbaar houden, ook op lichte fotos */
.behandelingen-container_col .number {
  text-shadow: 0 0 10px rgba(250, 247, 242, 0.95), 0 0 22px rgba(250, 247, 242, 0.8);
}

/* de donkere laag over de reviews-achtergrond stond achter de foto (z-index -1) */
section.shadow > div.shadow-inner {
  z-index: 0;
}
section.shadow > div.container {
  position: relative;
  z-index: 1;
}

/* logos in links kregen de onderstreping van gewone links */
main a:has(> img),
main a:has(> img):hover {
  border-bottom: 0 !important;
}

/* merklogos op een gelijke hoogte brengen */
div.merken img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* de Salonized-module op de contactpagina had maar 300px breedte */
@media only screen and (min-width: 992px) {
  section.contact div.holder > div.row > div.col-sm-24 {
    width: 100%;
  }
}


/* --- Homepage: meer rust en ritme --- */

/* de drie kolommen in het welkomblok stonden bovenaan uitgelijnd, waardoor
   er een groot leeg vlak onder de tekst overbleef naast de staande foto */
@media only screen and (min-width: 992px) {
  body.home section.block0 > div.container > div.row {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: var(--spacing-600);
    align-items: start;
  }
  body.home section.block0 > div.container > div.row::before,
  body.home section.block0 > div.container > div.row::after {
    display: none;
  }
  body.home section.block0 div[class*="col-md-"] {
    width: auto;
    float: none;
  }
  /* kop en alle tekst in de linkerkolom */
  body.home section.block0 div.col-md-48 {
    grid-column: 1;
    grid-row: 1;
  }
  body.home section.block0 div.col-md-16:not(:has(> img)) {
    grid-column: 1;
  }
  /* foto rechts, opgetrokken zodat hij over de header valt */
  body.home section.block0 div.col-md-16:has(> img) {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: -260px;
    position: relative;
    z-index: 2;
  }
  body.home section.block0 div.col-md-16:has(> img) img {
    width: 100%;
    height: auto;
  }
}

/* warme afsluiting voor de footer in plaats van een wit vlak */
body.home section.block6 {
  background-color: var(--creme);
}

/* sectiekoppen iets ruimer gespatieerd */
body.home section.intro h2 {
  letter-spacing: 0.05em;
}

/* wat meer lucht tussen alinea's in blokpaginas */
section.intro div.container p {
  margin-bottom: var(--spacing-150);
}


/* --- Herstel ronde 2 --- */

/* de knoppenlijst onderaan behandelpagina's erfde de inspringing van gewone lijsten */
.single-behandelingen section.page div.content ul.list-inline,
.single-behandelingen section.page div.content ul.list-inline > li {
  padding-left: 0;
}

/* footerlinks stonden in antraciet op brons: contrast 2,8:1 */
footer div.column a:not(.btn) {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.45) !important;
}
footer div.column a:not(.btn):hover {
  color: var(--creme) !important;
  border-bottom-color: var(--creme) !important;
}


/* --- Homepage: behandelingenblok als rustige panelen --- */

body.home .behandelingen-container {
  gap: var(--spacing-300);
}

body.home .behandelingen-container_col {
  background: var(--surface);
  border-right: 0 !important;
  padding: 0 0 var(--spacing-300);
}

body.home .behandelingen-container_col > .number,
body.home .behandelingen-container_col > h4,
body.home .behandelingen-container_col > p {
  padding-left: var(--spacing-200);
  padding-right: var(--spacing-200);
}

body.home .behandelingen-container_col h4 {
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: var(--spacing-100);
}

body.home .behandelingen-container_col p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}


/* afsluitende knop onder het behandelingenblok */
body.home p.behandelingen-cta {
  margin-top: var(--spacing-600);
  margin-bottom: 0;
}


/* --- Homepage ronde 3 --- */

/* het Instagram-blok stond op padding-top 0; met de cremekleurige achtergrond
   plakte de kop tegen de bovenrand */
body.home section.block6.pdt-0 {
  padding-top: var(--spacing-1200) !important;
  padding-bottom: var(--spacing-1200);
}
body.home section.block6 h2 {
  margin-bottom: var(--spacing-300);
margin-top: var(--spacing-300)
}
body.home section.block6 p {
  margin-bottom: 0;
}

/* terracotta vlak achter het portret in het welkomblok */
@media only screen and (min-width: 992px) {
  body.home section.block0 div.col-md-16:has(> img) {
    position: relative;
  }
  body.home section.block0 div.col-md-16:has(> img)::before {
    content: "";
    position: absolute;
    z-index: 0;
    background: var(--accent);
    top: var(--spacing-400);
    right: var(--spacing-400);
    bottom: calc(var(--spacing-400) * -1);
    left: calc(var(--spacing-400) * -1);
  }
  body.home section.block0 div.col-md-16:has(> img) img {
    position: relative;
    z-index: 1;
  }
}


/* --- Huidproblemen-kaarten net als de behandelkaarten --- */
/* geldt zowel voor het homepageblok als voor de pagina /huidproblemen/ */

.problems-grid .problem-card {
  background: var(--surface);
  padding-bottom: var(--spacing-150);
  line-height: 0;
}

.problems-grid .problem-link {
  line-height: 0;
}

/* lege alinea van wpautop onder de kaart */
.problems-grid .problem-card > p {
  display: none;
}

.problems-grid .problem-card h3 {
  font-size: 20px !important;
  color: var(--ink) !important;
  text-transform: none;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.04em;
  padding: 0 var(--spacing-100);
  margin-top: var(--spacing-150);
  margin-bottom: 0;
}

/* losse regelafbreking boven de kop */
body.home section.block2 > div.container > br {
  display: none;
}

/* wit randje boven de foto in de behandelkaarten (marge van .aligncenter) */
body.home .behandelingen-container_col img {
  margin-top: 0;
  margin-bottom: 0;
}


/* --- Huidproblemen-pagina's: zelfde leeskolom als de behandelpagina's --- */

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page {
  padding: var(--spacing-800) 0 var(--spacing-1200);
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content {
  display: block;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content h2,
:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content h3,
:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content h4 {
  margin-top: var(--spacing-600);
  margin-bottom: var(--spacing-150);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content > h2:first-child,
:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content > h3:first-child {
  margin-top: 0;
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content p,
:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content p {
  margin-bottom: var(--spacing-150);
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content ul,
:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content ol {
  margin: var(--spacing-150) 0 var(--spacing-300);
  padding-left: var(--spacing-200);
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content li {
  margin-bottom: var(--spacing-75);
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content li::marker {
  color: var(--accent);
}

:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content .btn {
  margin-top: var(--spacing-300);
}

@media only screen and (max-width: 991px) {
  :is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page {
    padding: var(--spacing-400) 0 var(--spacing-600);
  }
  :is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content h2,
  :is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content h3 {
    margin-top: var(--spacing-400);
  }
}

@media (min-width: 992px) {
 .col-md-24:has(.item-category) {
     width: 32.5%;
   }
}

.award_section {
padding-bottom: 0 !important;
margin-bottom: -8rem;
}
.award_section img {
max-height: 670px;
width: auto;
  box-shadow: 15px 15px 0px var(--accent);
margin: 0 auto;
ds: ;
display: block;
}
.award_section {
padding-top: 0 !important;
}

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

/* ===================================================================
   Opmerkingen klant september 2026
   =================================================================== */

/* Behandelingen-overzicht: de tegels staan in een float-grid. Zodra een
   tegel een pixel hoger is blijft de volgende erachter haken en valt er
   een gat (zichtbaar na Facials). Flex-wrap laat elke rij zelfstandig
   afbreken, de kolombreedtes uit het 48-koloms grid blijven intact. */
.post-type-archive-behandelingen .treatments .row {
  display: flex;
  flex-wrap: wrap;
}

/* Behandelpagina's: de grote foto stond als alignleft in de editor,
   waardoor de tekst in een smalle kolom ernaast liep en opsommingen
   deels over de foto vielen. Foto boven de tekst, tekst eronder op de
   volle kolombreedte. */
.single-behandelingen .content img.alignleft,
.single-behandelingen .content img.alignright {
  float: none;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--spacing-200);
}


/* Mobiel menu: Max Mega Menu toonde nog zijn eigen standaardopmaak
   (donkergrijs blok op het bronskleurige vlak). Nu: antraciet vlak over het
   hele scherm, menu transparant, creme letters in kapitaal, terracotta als
   actief-kleur, submenu's ingesprongen.
   Let op: de selectors beginnen bewust met #navbarCollapse en
   .mega-menu-toggle + ..., anders wint de standaardopmaak van Max Mega Menu.
   De tekstkleur staat op !important omdat het thema zelf al
   "header div.navbar-collapse ul li a { color: #fff !important }" zet. */
@media only screen and (max-width: 991px) {

  #mega-menu-wrap-primary_navigation .mega-menu-toggle {
    background: transparent;
    height: auto;
    padding: var(--spacing-50) 0;
  }
  #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 button .mega-toggle-animated-inner,
  #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 button .mega-toggle-animated-inner::before,
  #mega-menu-wrap-primary_navigation .mega-menu-toggle .mega-toggle-block-0 button .mega-toggle-animated-inner::after {
    background-color: var(--on-image);
    height: 2px;
    width: 26px;
  }

  #navbarCollapse.navbar-collapse {
    background: var(--antraciet);
  }

  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation {
    background: transparent;
    padding: 0 var(--spacing-100);
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item {
    border-bottom: 1px solid rgba(243, 236, 225, .15);
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link {
    background: transparent;
    color: var(--creme) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.4;
    height: auto;
    padding: var(--spacing-100) 0;
    border: 0;
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    height: auto;
    line-height: inherit;
    width: auto;
    padding: 0 0 0 var(--spacing-100);
    margin: 0;
    color: var(--creme) !important;
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:hover,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:focus {
    background: transparent;
    color: var(--terracotta) !important;
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:hover > span.mega-indicator {
    color: var(--terracotta) !important;
  }

  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation li.mega-menu-item ul.mega-sub-menu {
    background: transparent;
    padding: 0 0 var(--spacing-100) var(--spacing-100);
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation li.mega-menu-item ul.mega-sub-menu li.mega-menu-item {
    border: 0;
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation li.mega-menu-item ul.mega-sub-menu a.mega-menu-link {
    background: transparent;
    color: var(--creme) !important;
    opacity: .85;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1.4;
    height: auto;
    padding: var(--spacing-50) 0;
    border: 0;
  }
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:hover,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:focus,
  #navbarCollapse #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
    background: transparent;
    color: var(--terracotta) !important;
    opacity: 1;
  }
}

/* Huidproblemen-pagina's: de foto bovenaan had per pagina een andere
   verhouding (Acne en Doffe huid waren duidelijk lager). Nu overal 3:2. */
:is(body.acne, body.pigmentvlekken, body.rosacea, body.littekens, body.doffe-huid) section.page div.content > p:first-child img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}