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

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

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', 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: #171a18;
  }

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

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

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

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

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

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

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

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

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

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

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #d8a15a !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.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://salonesthermatser.nl/wp-content/uploads/sites/558/2026/04/DSC00940.jpg');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }


    header .sticky_menu_small div.header {
    background-color: rgba(255, 255, 255, 1) !important;
    }
    @media only screen and (min-width : 992px) {
  header .wrapper.sticky_menu div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a {
  color: #333333 !important;
  }
  }


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

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

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

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





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

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

  header nav.navbar-default {
  background-color: rgba(216, 161, 90, .5) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(216, 161, 90, .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: #d8a15a !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 #ead6c2;
  }

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

  :root {
    /* --- Kleuren: Primary (Warm palette) --- */
    --color-primary-50: #f8f3ec;
    --color-primary-100: #EAD6C2;
    --color-primary-200: #E8E2D8;
    --color-primary-300: #e1bfa3;
    --color-primary-400: #D8A15A;
    --color-primary-500: #c08a4a;
    --color-primary-600: #A65A1F;
    --color-primary-700: #8a4a19;
    --color-primary-800: #7A3E17;
    --color-primary-900: #5e2f10;
    /* --- Kleuren: Grays --- */
    --color-gray-50: #faf7f2;
    --color-gray-100: #f2ede5;
    --color-gray-200: #e8e2d8;
    --color-gray-300: #d4cbbd;
    --color-gray-400: #b09a82;
    --color-gray-500: #847261;
    --color-gray-600: #5e4f40;
    --color-gray-700: #433729;
    --color-gray-800: #2b2219;
    --color-gray-900: #1a140e;
    /* --- Status Kleuren --- */
    --color-success: #6b8e6b;
    --color-error: #a36b6b;
    --color-warning: #a3926b;
    /* --- Typography Scale --- */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    /* --- Spacing System --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    /* --- UI Elements --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


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

/* ============================================
   Basis typografie
   ============================================ */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.65;
    color: var(--color-gray-700);
    background-color: var(--color-gray-50);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-gray-800);
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--font-size-4xl);
    margin-top: 0;
    margin-bottom: var(--space-6);
    line-height: 1.2;
}

h2 {
    font-size: var(--font-size-3xl);
    margin-top: 0;
    margin-bottom: var(--space-6);
    line-height: 1.25;
}

h3 {
    font-size: var(--font-size-xl);
  margin-top: var(--space-12);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

p {
    margin-bottom: var(--space-4);
}

p.lead {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.6;
    font-weight: 400;
}

a {
    color: var(--color-primary-700) !important; /* lichtblauw, vervangt mosterdgeel - 28-04-2026 */
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-primary-900) !important;
    text-decoration: none;
}

main img {
    border-radius: var(--radius-md);
}

/* ============================================
   Section spacing
   ============================================ */
section,
nav.container-fluid {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}




/* ============================================
   Knoppen
   ============================================ */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all var(--transition-base);
    border-width: 1px;
    padding: var(--space-2) var(--space-6);
}

.btn-lg {
    padding: var(--space-3) var(--space-8);
    font-size: var(--font-size-base);
}

.btn + .btn {
    margin-left: var(--space-2);
}


section.featured a div.item {
  background: var(--color-primary-300);
  color: #fff !important;
}

section.featured a div.item * {
  color: #fff !important;
}


.btn-primary {
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
    color: #fff;
}

.btn-default {
    background-color: transparent !important;
    border-color: var(--color-primary-300) !important;
    color: var(--color-primary-700) !important;
}

.itallic {
  display: block;
  font-family: 'Dancing Script', 'Great Vibes', 'Allura', cursive;
  font-style: italic;
  font-weight: 400;
  color: #c08a4a;
  opacity: 1;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: var(--color-primary-100) !important;
    border-color: var(--color-primary-500) !important;
    color: var(--color-primary-800) !important;
}

blockquote {
  border-color: var(--color-primary-500);
}

.wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
    top: 150px;
}

.btn-link {
    color: var(--color-primary-600) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--color-primary-800) !important;
    text-decoration: none !important;
}


/* ============================================
   Responsive
   ============================================ */
@media (max-width: 767px) {
    h1 {
        font-size: var(--font-size-3xl);
    }
    h2 {
        font-size: var(--font-size-2xl);
    }
    section,
    nav.container-fluid {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
    .btn + .btn {
        margin-left: 0;
        margin-top: var(--space-2);
    }
    .thumbnail .caption p {
        min-height: 0;
    }
}

.btn-group .btn:first-child {
  margin-bottom: 1rem;
}
footer .column a {
  color: #fff !important;
  opacity: 0.8;
  text-decoration: underline;
}


section.archive.treatments div.treatments div.item img, section.treatments.shortcode div.treatments div.item img {
    width: 100%;
    height: 350px;
    border-radius: 11px !important;
    object-fit: cover;
}

@media only screen and (min-width: 992px) {
section.treatments.shortcode .col-xs-24.col-sm-12 {
    width: 33.333333%;
}
body.blog header > div.wrapper::after {
    background-position: center 35% !important;
}
    header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li a {
        color: #3e2020 !important;
    }
.single-behandelingen .page .content, .single-post section.page .content {
    max-width: 768px;
    margin: 0 auto;
    display: block;
}
header > div.wrapper.shadow::before {
  width: 50% !important;
}

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

section.featured a div.item h3 {
    font-size: 17px;
    min-height: 42px;
}
.btn-group .btn:first-child {
  margin-right: 1rem;
}
#primary_navigation {
  text-align: right;
}
.item.item-background {
  min-height: 380px;
}
.item-centered.text-center {
  text-align: left;
  padding: 1rem !important;
}

header > div.wrapper .header__content {
    transform: translate3d(0, 170px, 0);
  }
.header__content .container {
  width: 50vw;
  margin-left: 0;
}
  .home header > div.wrapper::after {
    background-position: center;
    width: 50%;
    margin-left: 50%;
  }
header > div.wrapper .header__content .col-md-32.col-md-offset-8 {
    margin-left: 0;
    width: 100%;
    padding: var(--space-10);
    text-align: left;
  }
body.home header > div.wrapper {
    min-height: 850px;
  }

}

header > div.wrapper.shadow::before {
  background: var(--color-gray-400) !important;
width: 34%;
}
.item.item-card img {
  height: 350px;
  width: 100% !important;
  object-fit: cover;
}

article .thumbnail {
  height: 100%;
}

.slick-arrow i {
  font-size: 25px !important;
  background: var(--color-gray-500);
  color: #fff;
  width: 35px;
  height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}

@media only screen and (min-width: 992px) {
  body header > div.wrapper {
    min-height: 850px;
  }
header > div.wrapper.title_in_header .header__content {
  margin-top: 0;
  transform: translate3d(0, 230px, 0) !important;
}
.wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
  background-position: center;
  width: 50%;
  margin-left: 50%;
}

}

.slick-list.draggable {
  background: var(--color-gray-200);
  border-radius: var(--radius-md);
  max-width: 768px;
  margin: 0 auto;
}
.slick-dots {
  bottom: -50px;
}

.text-container {
  max-width: 768px;
  margin: 0 auto;
}

.header__content {
  padding: var(--space-10) !important;
}


@media only screen and (max-width: 991px) {
section.treatments.shortcode .col-xs-24.col-sm-12 {
    width: 100%;
}
body.blog header > div.wrapper::after, .wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
    background-position: center 35% !important;
}
header>div.wrapper.title_in_header div.page-header h1 {
    line-height: 1;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
        text-align: center;
    }
.breadcrumbs {
    display: none;
}
.nbs_slider .slick-next, .nbs_slider .slick-prev {
bottom: -50px;
top: auto;
z-index: 10;
}
.slick-prev.slick-arrow {
left: 0;
}
.nbs_slider .slick-next {
right: -3rem;
right: 1rem;
}

.home .wrapper.shadow.above_shadow.dynamic_sticky_menu.sticky_header {
  min-height: 570px !important;
}
.home header .header__content {
  top: 60px !important;
}
.header__content {
align-items: center !important;
justify-content: start !important;
}
.header__content .container {
width: 100%;
}
.wrapper.shadow.above_shadow.dynamic_sticky_menu.sticky_header.sticky_menu.sticky_menu_small, header > div.wrapper {
min-height: 70vh !important;
}
.col-md-32.col-md-offset-8 {
  text-align: left;
}

header .header__content {
  padding: var(--space-1) !important;
}
header .header__content {
  top: 15px !important;
  position: relative;
    min-height: 0;
height: 75vh;
margin-top: 0 !important;
padding-bottom: 10vh !important;
}

}

/* --- Footer: lichte beige kleuren (klantverzoek) --- */
footer,
.footer-cta.center::after,
.author {
  background-color: var(--color-primary-100) !important;
  color: var(--color-primary-900) !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer span, footer li {
  color: var(--color-primary-900) !important;
}
footer .column a {
  color: var(--color-primary-800) !important;
  opacity: 1;
}
footer div.social-media ul li a {
  background-color: var(--color-primary-300) !important;
  color: var(--color-primary-900) !important;
}
footer div.socket,
.footer-sticky {
  background-color: var(--color-primary-200) !important;
  color: var(--color-primary-900) !important;
}
footer div.socket a,
.footer-sticky a {
  color: var(--color-primary-800) !important;
}

footer div.column > h4,
footer div.column > h1,
footer div.column > h2,
footer div.column > h3,
footer div.column > h5,
footer div.column > h6 {
  color: var(--color-primary-900) !important;
}
footer div.column > p,
footer div.column > p a {
  color: var(--color-primary-900) !important;
}
footer div.social-media ul li a i,
footer div.social-media ul li a svg {
  color: var(--color-primary-900) !important;
}


/* === KLEURCONSOLIDATIE 23-04-2026 START === */
/* Doel: kleurgebruik terugbrengen naar 2 hoofdkleuren + 1 zachte variant.
   Headervak (links) = #EAD6C2 (nude/beige).
   Accent (knoppen, quote schrijfletters, vinkjes) = #c08a4a (goud).
   Zachte wisselsecties + footer = #f8f3ec (creme).
   Tekst en koppen blijven #433729 (donkerbruin). */

/* 1. Headervak links: nude/beige */
body header > div.wrapper.shadow::before,
body header > div.wrapper.shadow.above_shadow::before,
body header > div.wrapper.shadow.dynamic_sticky_menu::before {
  background: #EAD6C2 !important;
  background-color: #EAD6C2 !important;
}

/* 1b. Tekst in het headervak: van wit naar donkerbruin (leesbaar op nude) */
body div.wrapper.dynamic_sticky_menu .header__content h1,
body div.wrapper.dynamic_sticky_menu .header__content h2,
body div.wrapper.dynamic_sticky_menu .header__content p:not(.itallic),
body div.wrapper.dynamic_sticky_menu .header__content .text-container,
body div.wrapper.dynamic_sticky_menu .header__content .text-container p:not(.itallic),
body div.wrapper.dynamic_sticky_menu .header__content .text-container h1 {
  color: #433729 !important;
}

/* 1c. Quote in schrijfletters: groot en in goud-accent */
body div.wrapper.dynamic_sticky_menu .header__content .itallic,
body div.wrapper.dynamic_sticky_menu .header__content p.itallic,
body div.wrapper.dynamic_sticky_menu .header__content h1 .itallic {
  color: #c08a4a !important;
  font-family: 'Dancing Script', 'Great Vibes', 'Allura', cursive !important;
  font-style: italic !important;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important;
  line-height: 1.25 !important;
  display: block !important;
  margin-bottom: 1rem !important;
}

/* 2. Card-blokken (item-background en item-card): wit met subtiele schaduw */
body section .item.item-background,
body section .item.item-card {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(67, 55, 41, 0.06) !important;
}
/* Tekst in item-card leesbaar houden: donkerbruin op wit (item-card heeft foto bovenin, tekst eronder) */
body section .item.item-card,
body section .item.item-card a,
body section .item.item-card a *,
body section .item.item-card p,
body section .item.item-card h1,
body section .item.item-card h2,
body section .item.item-card h3 {
  color: #433729 !important;
}
/* item-background heeft de foto als achtergrond, tekst blijft wit voor leesbaarheid op donkere foto.
   Layout-aanpassingen voor deze cards komen later (opmerking 15/16). */

/* 3. Reviews-slider achtergrond + footer-socket: zachte creme */
.slick-list.draggable {
  background-color: #f8f3ec !important;
}
footer .socket {
  background-color: #f8f3ec !important;
}

/* 4. Footer hoofdblok: van #EAD6C2 naar zachte creme */
body > footer {
  background-color: #f8f3ec !important;
}

/* 5. Slider-pijlen: van taupe naar goud 
.nbs_slider .slick-next, .nbs_slider .slick-prev,
.slick-prev.slick-arrow {
  background-color: #c08a4a !important;
}*/

/* 6. Hoofdknop blijft goud, hover iets donkerder */
.btn-primary {
  background-color: #c08a4a !important;
  border-color: #c08a4a !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #A65A1F !important;
  border-color: #A65A1F !important;
  color: #ffffff !important;
}


/* 7. Breadcrumbs: donkerbruin i.p.v. wit/grijs */
body .header__content div.breadcrumbs,
body .header__content div.breadcrumbs span,
body .header__content div.breadcrumbs span#breadcrumbs,
body .header__content div.breadcrumbs span#breadcrumbs a,
body .header__content div.breadcrumbs span#breadcrumbs span.breadcrumb_last,
body div.breadcrumbs,
body div.breadcrumbs span,
body div.breadcrumbs a,
body div.breadcrumbs .breadcrumb_last {
  color: #433729 !important;
}
body .header__content div.breadcrumbs span#breadcrumbs a:hover,
body div.breadcrumbs a:hover {
  color: #c08a4a !important;
}

/* 8. Pageheader-quote: grote gouden schrijfletter onder h1 in beige vak */
body .page-header h1 .pageheader-quote,
body .page-header .pageheader-quote {
  display: block;
  margin-top: 0.4em;
  font-family: 'Dancing Script', 'Great Vibes', 'Allura', cursive;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  color: #c08a4a !important;
  letter-spacing: 0.01em;
  max-width: min(90vw, 32ch);
  margin-left: 0;
  margin-right: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
  text-wrap: balance;
}

/* Mobile pageheader: stack (foto boven, beige+tekst onder) */
@media (max-width: 991px) {
  header > div.wrapper.shadow::before {
    width: 100% !important;
    top: auto !important;
    bottom: 0 !important;
height: 50vh !important;
  }
  header > div.wrapper::after,
  .wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
    top: 130px !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
height: 35vh !important;
    margin-left: 0 !important;
    background-size: cover !important;
z-index: 0;
    background-position: center center !important;
  }
  header > div.wrapper.shadow {
    min-height: 80vw;
  }
  .header__content {
    align-items: flex-end !important;
  }
  .pageheader-quote {
    max-width: 90vw;
  }
}

/* === KLEURCONSOLIDATIE 23-04-2026 EIND === */


/* === AANPASSINGEN 28-04-2026: quotes uniform + lichtblauwe links + skinproducten foto === */

/* Homepage quote (h1 .itallic) groter en opzichtiger - eerste wat je leest */
body.home h1 .itallic,
body.home .header__content h1 .itallic,
body.page-id-465 h1 .itallic {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  font-family: 'Dancing Script', 'Great Vibes', 'Allura', cursive !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #c08a4a !important;
  line-height: 1.2 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* Pageheader-quote uniform met homepage: zelfde lettertype, kleur en opbouw */
body .page-header h1 .pageheader-quote,
body .page-header .pageheader-quote,
body .header__content .pageheader-quote {
  font-family: 'Dancing Script', 'Great Vibes', 'Allura', cursive !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #c08a4a !important;
  line-height: 1.25 !important;
}

/* SKINproducten headerfoto: positie naar boven zodat hoofd en producten zichtbaar zijn */
body.skinproducten header > div.wrapper::after,
body.skinproducten .wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
  background-position: center 21% !important;
}
@media (max-width: 991px) {
  body.skinproducten header > div.wrapper::after,
  body.skinproducten .wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
    background-position: center 30% !important;
  }
}


/* Anchor scroll: zorg dat sticky header niet over de h2 valt bij anchor-links */
main section[id] {
  scroll-margin-top: 120px;
}












/* === AANPASSINGEN 01-05-2026 (rev8): laatste polish homepage desktop + mobiel === */

/* --- 1. Homepage quote: groter desktop, ingetoomd zodat hij niet over de foto loopt --- */
body.home div.wrapper.dynamic_sticky_menu .header__content h1 .itallic,
body.home .header__content h1 .itallic,
body.page-id-465 div.wrapper.dynamic_sticky_menu .header__content h1 .itallic,
body.page-id-465 .header__content h1 .itallic {
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  line-height: 1.2 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* --- 2. Desktop homepage: ademruimte tussen quote en fotorand --- */
@media (min-width: 992px) {
  /* Container links smaller maken zodat tekst niet tegen de fotorand komt */
  body.home .header__content > .container,
  body.page-id-465 .header__content > .container {
    width: 45vw !important;
    padding-right: 4vw !important;
  }
  /* Quote en content krijgen extra rechtermarge zodat ze niet tot de fotorand lopen */
  body.home .header__content h1,
  body.page-id-465 .header__content h1,
  body.home .header__content p,
  body.page-id-465 .header__content p {
    max-width: 90% !important;
  }
}

/* --- 3. Mobiele homepage: content GEGARANDEERD onder de foto, in de beige zone --- */
@media (max-width: 991px) {
  /* Wrapper: vaste hoogte met foto bovenin (75vw vierkant gevoel) en beige eronder met content */
  body.home .wrapper.shadow.above_shadow.dynamic_sticky_menu.sticky_header,
  body.page-id-465 .wrapper.shadow.above_shadow.dynamic_sticky_menu.sticky_header {
    min-height: calc(75vw + 480px) !important;
  }
  /* Foto: bovenin, vaste hoogte 75vw (loopt vanaf top:130 of waar het thema het neerzet) */
  body.home header > div.wrapper::after,
  body.page-id-465 header > div.wrapper::after,
  body.home .wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after,
  body.page-id-465 .wrapper.dynamic_sticky_menu.sticky_header.title_in_header.shadow::after {
    height: 75vw !important;
  }
  /* Beige onderkant: vanaf onder de foto tot bottom van wrapper */
  body.home header > div.wrapper.shadow::before,
  body.page-id-465 header > div.wrapper.shadow::before {
    top: auto !important;
    bottom: 0 !important;
    height: 480px !important;
    width: 100% !important;
  }
  /* Header content: gepositioneerd in de beige zone onderaan */
  body.home .header__content,
  body.page-id-465 .header__content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: calc(59vw + 30px) !important;
    padding-bottom: 30px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 5 !important;
  }
  body.home .header__content > .container,
  body.page-id-465 .header__content > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 5 !important;
  }
  body.home .header__content h1,
  body.home .header__content p,
  body.home .header__content .btn,
  body.home .header__content a,
  body.page-id-465 .header__content h1,
  body.page-id-465 .header__content p,
  body.page-id-465 .header__content .btn,
  body.page-id-465 .header__content a {
    position: relative !important;
    z-index: 5 !important;
  }
  /* Quote mobiel iets compacter */
  body.home div.wrapper.dynamic_sticky_menu .header__content h1 .itallic,
  body.home .header__content h1 .itallic,
  body.page-id-465 div.wrapper.dynamic_sticky_menu .header__content h1 .itallic,
  body.page-id-465 .header__content h1 .itallic {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  body.home div.wrapper.dynamic_sticky_menu .header__content h1 .itallic,
  body.home .header__content h1 .itallic,
  body.page-id-465 div.wrapper.dynamic_sticky_menu .header__content h1 .itallic,
  body.page-id-465 .header__content h1 .itallic {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
  }
}

/* --- 4. Mobiele vervolgpagina's: ongewijzigd uit rev7 (werkt al goed) --- */
@media (max-width: 991px) {
  body:not(.home):not(.page-id-465) .header__content,
  body:not(.home):not(.page-id-465) .header__content > .container,
  body:not(.home):not(.page-id-465) .header__content h1,
  body:not(.home):not(.page-id-465) .header__content .breadcrumbs,
  body:not(.home):not(.page-id-465) .header__content div.breadcrumbs {
    position: relative !important;
    z-index: 5 !important;
  }
  body:not(.home):not(.page-id-465) .header__content {
    align-items: flex-end !important;
    padding-bottom: 30px !important;
  }
  body:not(.home):not(.page-id-465) .header__content .breadcrumbs,
  body:not(.home):not(.page-id-465) .header__content div.breadcrumbs {
    margin-bottom: 0.75rem !important;
  }
}


/* === AANPASSINGEN 01-05-2026 (rev10): mobile menu blokkering volledig fixen === */
/* Probleem in rev9: .header__content had z-index 5 en creëerde een stacking context
   die het uitgeklapte mobiele menu blokkeerde. Op mobiel hebben we die z-index helemaal
   niet nodig om content boven foto/beige te tonen (pseudo-elements zitten op z-index -2/-1).
   Reset hier z-index voor de container; alleen de tekst-elementen houden indien gewenst hun positie. */
@media (max-width: 991px) {
  /* Reset z-index op de container - die hoort niet hoger te liggen dan het menu */
  body .header__content,
  body.home .header__content,
  body.page-id-465 .header__content,
  body:not(.home):not(.page-id-465) .header__content {
    z-index: auto !important;
  }
  body .header__content > .container,
  body.home .header__content > .container,
  body.page-id-465 .header__content > .container {
    z-index: auto !important;
  }
  /* Tekst-elementen ook gewoon auto, want pseudo-elements staan al op z-index -1/-2 dus content komt sowieso boven */
  body .header__content h1,
  body .header__content p,
  body .header__content .btn,
  body .header__content a.btn,
  body .header__content .breadcrumbs,
  body .header__content div.breadcrumbs {
    z-index: auto !important;
  }
  /* Header navigation row ALTIJD bovenop, ongeacht stacking context */
  header div.header,
  header div.header.full-width,
  header > div.wrapper > .header,
  header > div.wrapper > div.header.full-width {
    position: relative !important;
    z-index: 1000 !important;
  }
  /* En het uitgeklapte menu zelf */
  nav.navbar,
  nav.navbar .nav,
  nav.navbar ul.nav,
  nav.navbar .navbar-nav,
  .menu-primaire-navigatie-container,
  nav.navbar div.wrapper {
    position: relative !important;
    z-index: 1000 !important;
  }
}


/* === AANPASSINGEN 01-05-2026 (rev11): logo weer klikbaar maken === */
/* Probleem in rev10: nav.navbar kreeg z-index 1000, maar nav heeft op mobiel
   xs-absolute-overlay wat hem absolute over de hele breedte legt - dus over het logo heen.
   Fix: nav.navbar terug naar auto, alleen de hamburger button + uitgeklapte menu items
   krijgen een hoge z-index. Logo-link krijgt ook hoge z-index zodat hij altijd klikbaar is. */
@media (max-width: 991px) {
  /* Reset nav.navbar - die mag NIET over logo heen liggen */
  nav.navbar,
  nav.navbar > div.wrapper {
    z-index: auto !important;
  }
  /* Hamburger button blijft klikbaar */
  nav.navbar button.navbar-toggle {
    position: relative !important;
    z-index: 1001 !important;
  }
  /* Uitgeklapte menu items klikbaar */
  nav.navbar .navbar-collapse,
  nav.navbar .nav.navbar-nav,
  nav.navbar ul.nav,
  .menu-primaire-navigatie-container {
    position: relative !important;
    z-index: 1001 !important;
  }
  /* Logo: maak alleen de img.logo en zijn directe <a> parent klikbaar - NIET de hele kolom
     want col-sm-10 strekt zich over de hamburger uit */
  img.logo {
    position: relative !important;
    z-index: 1002 !important;
  }
  /* col-sm-10 niet groter maken, maar wel pointer-events op auto laten zodat clicks doorgaan
     naar wat eronder ligt (in dit geval de hamburger via col-sm-38 xs-absolute-overlay) */
  div.col-sm-10 {
    pointer-events: none !important;
  }
  div.col-sm-10 a,
  div.col-sm-10 img.logo {
    pointer-events: auto !important;
  }
}



section.treatments.shortcode h3 {
    display: none;
}
section.treatments.shortcode {
    margin-top: 100px;
}
.blog_intro {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary-800);
    margin-bottom: 45px;
}
body.blog header > div.wrapper::after {
    background: url(/wp-content/uploads/sites/558/2026/05/blog_header.jpg);
}

.bloglayout-card figure.featured-image img {
    height: auto!important;
}