@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: var(--color-text-muted);
  }

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

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

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

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

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

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

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

  div.phone a.phone, div.email a.email {
  background: var(--color-brand-dark)  !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(--color-brand-dark)  !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: var(--color-brand-dark) ;
  border-color: var(--color-brand-dark) ;
  }

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

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: var(--color-brand-dark)  !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, .5) !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;
  }
  }





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

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





  nav.navbar-default, div.navbar-collapse {
  background-color: var(--color-brand-dark) ; !important;
  }

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

  header nav.navbar-default {
  background-color: rgba(10, 0, 0, .5) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(10, 0, 0, .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: var(--color-brand-dark)  !important;
  }
  }


  section.featured div.wrapper {
  margin-top: 60px;
  }





  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 var(--color-mokka);
  }

  @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(--color-mokka) !important;
  }
  }


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

  @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: var(--color-text-muted) !important;
  }

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

  section.partners {
  background: var(--color-mokka) !important;
  }

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

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

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

  footer div.socket,
  .footer-sticky {
  background: var(--color-brand-dark)  !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(--color-text-muted) !important;
  }

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

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

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

  @font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4g.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/jost/v20/92zUtBhPNqw73oHt4D4h.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2')}


html{font-size:16px !important}
@media(max-width:600px){html{font-size:14px !important}}

:root{
  --color-brand:#F6E3DC;
  --color-brand-light:#FFFBF8;
  --color-brand-dark:#4A2E27;
  --color-accent:#E2B8AA;
  --color-mokka:#9A6C5E;
  --color-text-main:#5E463E;
  --color-text-muted:#8F6E63;
  --color-white:#FFFFFF;
  --font-heading: "Playfair Display", serif;
  --font-body: "Jost", sans-serif;
  --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem;
  --radius-boog:14rem 14rem 0 0;
  --radius-default:1.2rem;
  --radius-pill:9999px;
  --border-color:rgba(154,108,94,.16);
}

html {
    scroll-behavior: smooth;
}
.hh-boven, .hh-kop {
    scroll-margin-top: 100px;
}

header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li.hh-knop>a {
    padding: 5px 11px !important;
    font-size: .85rem !important;
    font-weight: 200 !important;
    transition: background .35s ease, transform .35s ease;
    letter-spacing: .02em;
    color: var(--color-brand-light) !important;
    border: none !important;
}


@media only screen and (min-width: 992px) {
    header div.header div.holder {
        height: 77px;
        min-height: 50px;
    }
header div.header {
    z-index: 10;
}
    header>div.wrapper.sticky_menu.sticky_header .header {
        box-shadow: none !important;
        background: rgba(255, 251, 248, .92) !important;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(154, 108, 94, .16);
    }
.dropdown-menu {
    background: var(--color-brand-light);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-default) !important;
    padding: .6rem 0 !important;
    box-shadow: 0 24px 45px -30px rgba(74, 46, 39, .5);
}
    header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>ul.dropdown-menu > li> a {
        display: block;
        padding: .6rem 1.4rem !important;
        font-size: .9rem;
        letter-spacing: .02em;
        color: var(--color-text-main) !important;
        border-bottom: 1px solid transparent !important;
        font-weight: 300;
    }
header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>ul.dropdown-menu > li> a:hover {
    background: var(--color-brand) !important;
    color: var(--color-brand-dark) !important;
    border-bottom: 1px solid var(--color-accent) !important;
}
   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 {
        border-bottom-color: var(--color-accent) !important;
    }
    nav.navbar-default div.navbar-collapse ul.navbar-nav>li {
        padding: 10px 15px;
    }
    header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li a {
        padding: 0!important;
    }
    header div.header.full-width div.wrapper img.logo {
        max-width: 165px;
    }
    header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a {
        color: var(--color-text-main) !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid transparent !important;
        font-weight: 300;
        font-size: .87rem;
        letter-spacing: .06em;
    }
header > div.wrapper {
        min-height: 78px;
    }
}


section.archive.treatments div.treatments div.item img, section.treatments.shortcode div.treatments div.item img {
    border-radius: var(--radius-boog) !important;
    width: 100%;
    aspect-ratio: 5 / 4.4;
    object-fit: cover;
    object-position: center 28%;
    margin: 0;
}


@media only screen and (max-width: 991px) {
header div.header div.wrapper img.logo {
    max-width: 140px;
    padding: 0 !important;
}
.hh-feiten {
    gap: 1rem clamp(2rem, 4vw, 3.5rem)!important;
    flex-direction: column;
}
.hh-mini div {
    gap: .2rem!important;
    margin-bottom: 1rem!important;
    flex-direction: column;
}
section.treatments .treatments .col-xs-24.col-sm-12 {
    width: 100%;
}
  html.navbar-open, .navbar-open body {
    overflow: hidden !important;
  }
nav.navbar-default, div.navbar-collapse {
    background: var(--color-brand-light) !important;
}
.hh-regel-top {
    flex-direction: column;
}
header div.header {
    text-align: left;
}
header nav.navbar-default div.navbar-header div.holder, header div.header div.holder {
    min-height: 50px;
    height: 70px;
}
header>div.wrapper {
    min-height: 70px;
}
header nav.navbar-default button.navbar-toggle.text {
    border: 1px solid rgba(154, 108, 94, .4);
    border-radius: var(--radius-pill);
    padding: .6rem 1.1rem;
    font-family: var(--font-body);
font-size: .85rem !important;
    letter-spacing: .06em;
    color: var(--color-brand-dark)!important;
    cursor: pointer;
    align-items: center;
    gap: .55rem;
    display: inline-flex;
}
header nav.navbar-default button.navbar-toggle.text:after {
    font-size: .85rem !important;
    font-weight: 200!important;
}
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, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, header nav.navbar-default ul.navbar-nav .active>a, nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a, 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  {
    color: var(--color-brand-dark) !important;
    font-weight: 200;
    border: none !important;
    padding-left: 0;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: var(--color-brand-dark) !important;
    font-weight: 200;
        border-bottom: 1px solid var(--border-color);
}
header .social-media.visible-xs.visisble-sm {
    padding-left: 0!important;
    margin-top: 25px;
}
}

header div.header {
    background: rgba(255, 251, 248, .92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(154, 108, 94, .16);
}

main section, section.treatments {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    position: relative;
    overflow: hidden;
}

footer div.column > h4 {
    border-bottom: 0px solid var(--color-mokka);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-accent) !important;
    margin: 0 0 1.1rem;
    padding-bottom: 0;
}
footer {
    color: #F0DCD3;
    padding: clamp(3.5rem, 6vw, 5rem) 0 0;
}
footer div.socket {
    margin-top: 1rem;
    padding: 15px 0;
    color: #BF9A8C !important;
    padding: 1.7rem 0;
}
footer div.socket a, footer div.socket a:hover {
    color: #BF9A8C !important;
}

footer p {
    font-size: .92rem;
    margin: 0;
    line-height: 1.9;
}
footer .column a {
    color: #D3B3A6 !important;
    border-bottom: none;
    font-size: .92rem;
}
footer .column a:hover {
    color: #FBEDE6 !important;
}

body{background:var(--color-brand-light);color:var(--color-text-main);font-family:var(--font-body);font-weight:300;font-size:1.0625rem;line-height:1.8}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.18;color:var(--color-brand-dark) !important;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem)}
main{background:var(--color-brand-light)}

/* ===== Huid & Hart — links binnen eigen componenten ===== */
.hh-sectie a,.hh-balk a{text-decoration:none}
.hh-sectie a:hover,.hh-sectie a:focus,.hh-balk a:hover{text-decoration:none}
.hh-kaart:hover,.hh-route:hover,.hh-verder-kaart:hover{text-decoration:none}

/* ===== Huid & Hart — gedeeld ===== */
.hh-eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--color-mokka);font-weight:400;margin-bottom:var(--space-md)}
.hh-lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--color-text-muted)}
.hh-kop{max-width:38rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.text-center .hh-kop,.text-center .hh-paginakop-tekst,.text-center .hh-statement,.text-center .hh-artikelkop{margin-left:auto;margin-right:auto}
.hh-sectie h1,.hh-sectie h2,.hh-sectie h3{margin-top:0}
.hh-kop h2{margin:0 0 var(--space-md)}
.hh-kop .hh-lead{margin:0}
.hh-kop .hh-eyebrow{margin:0 0 var(--space-md)}
.hh-sectie p:last-child{margin-bottom:0}
section.intro.hh-sectie{padding:clamp(4.5rem,9vw,8rem) 0;position:relative;overflow:hidden}
section.intro.hh-bewijs-blok{padding:1.5rem 0}
section.intro.hh-balk-blok{padding:0}
.hh-knop{display:inline-block;background:var(--color-brand-dark);color:var(--color-brand-light) !important;font-size:.95rem;letter-spacing:.02em;padding:1.05rem 2.3rem;border-radius:var(--radius-pill);border:none;transition:background .35s ease,transform .35s ease}
.hh-knop:hover{background:var(--color-mokka);color:var(--color-brand-light) !important;transform:translateY(-2px)}
.hh-knop-open{background:none;color:var(--color-brand-dark) !important;border:1px solid rgba(154,108,94,.45);padding:1.05rem 2.1rem}
.hh-knop-open:hover{background:rgba(154,108,94,.09);color:var(--color-brand-dark) !important}
.hh-sectie a:not(.hh-knop):not(.hh-meer){color:inherit !important;border-bottom:none}
.hh-sectie a.hh-meer{color:var(--color-mokka) !important;border-bottom:1px solid var(--color-accent)}
.hh-blad{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5;z-index:0}
.hh-blad svg{position:absolute;width:78%;height:auto;top:-14%;right:-10%}
.hh-boven{position:relative;z-index:1}
.hh-midden{text-align:center;margin-top:clamp(2.5rem,5vw,4rem)}

/* ===== Huid & Hart — hero ===== */
.hh-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hh-hero-beeld img{border-radius:var(--radius-boog);width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:center 28%;margin:0}
.hh-hero-acties{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--space-xl)}
@media(max-width:860px){
  .hh-hero,.hh-jes-grid,.hh-prijs-grid,.hh-prak-grid{grid-template-columns:1fr!important;gap:clamp(2rem,7vw,3rem)!important}
  .hh-prijs-beeld{display:none}
}
.hh-hero h1{margin:0 0 var(--space-lg)}

/* ===== Huid & Hart — bewijsstrip ===== */
.hh-bewijs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 3rem;font-size:.9rem;color:var(--color-brand-dark);margin:0}
.hh-bewijs span{line-height:1.5}
.hh-bewijs b{font-family:var(--font-heading);font-size:1.02rem;font-weight:500;margin-right:.25rem}

/* ===== Huid & Hart — oplossingen ===== */
.hh-opl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.hh-kaart{position:relative;display:block;background:var(--color-white);border-radius:9rem 9rem var(--radius-default) var(--radius-default);overflow:hidden;border:1px solid var(--border-color);transition:transform .45s ease,box-shadow .45s ease;height:100%}
.hh-kaart:hover{transform:translateY(-6px);box-shadow:0 22px 45px -28px rgba(74,46,39,.45)}
.hh-kaart:focus-within{outline:2px solid var(--color-accent);outline-offset:3px}
.hh-kaart img{aspect-ratio:5/4;object-fit:cover;width:100%;display:block;border-radius:0;margin:0}
.hh-kaart-beeld{margin:0}
.hh-kaart-tekst{padding:1.5rem 1.7rem 1.9rem}
.hh-kaart h3{margin:0 0 .5rem}
.hh-kaart p{font-size:.95rem;color:var(--color-text-muted);line-height:1.7;margin:0}
.hh-meer{display:inline-block;margin-top:var(--space-md);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-mokka) !important;border-bottom:1px solid var(--color-accent);padding-bottom:3px;text-decoration:none}
.hh-kaart .hh-meer::after{content:"";position:absolute;inset:0;z-index:1}
.hh-kaart .hh-meer:focus-visible{outline:none}
.hh-kaart-leeg{background:var(--color-brand);border-color:transparent;display:flex;align-items:center;border-radius:var(--radius-default)}
.hh-kaart-leeg .hh-kaart-tekst{padding:2.2rem 1.7rem}
@media(max-width:900px){.hh-opl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.hh-opl{grid-template-columns:1fr}}

/* ===== Huid & Hart — werkwijze ===== */
.hh-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
.hh-stap img{border-radius:8rem 8rem 1rem 1rem;aspect-ratio:3/3.5;object-fit:cover;width:100%;margin:0 0 var(--space-lg)}
.hh-stap-nr{font-family:var(--font-heading);font-style:italic;font-size:1.15rem;color:var(--color-mokka);display:block;margin-bottom:.3rem}
.hh-stap h3{margin:0 0 .7rem}
.hh-stap p{font-size:.97rem;color:var(--color-text-muted)}
.hh-stap-prijs{margin-top:var(--space-md);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-mokka)}
@media(max-width:800px){.hh-stappen{grid-template-columns:1fr;gap:3rem}}

/* ===== Huid & Hart — resultaten ===== */
.hh-res{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem)}
.hh-res figure{margin:0}
.hh-res-beeld{border-radius:var(--radius-default);overflow:hidden;background:var(--color-brand);aspect-ratio:1/1}
.hh-res-beeld img{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0}
.hh-res h3{font-size:1.05rem;margin:1.1rem 0 .3rem}
.hh-res p{font-size:.9rem;color:var(--color-text-muted);line-height:1.65;margin:0}
.hh-res-kuur{display:block;margin-top:.5rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-mokka)}
.hh-res-onder{margin-top:clamp(2.2rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg)}
.hh-res-onder p{font-size:.88rem;color:var(--color-text-muted);max-width:26rem;margin:0}
@media(max-width:900px){.hh-res{grid-template-columns:repeat(2,1fr)}}

/* ===== Huid & Hart — ervaring (donkere sectie) ===== */
.hh-ervaring{color:#F0DCD3}
.hh-ervaring h2,.hh-ervaring h3{color:#FBEDE6 !important}
.hh-ervaring .hh-eyebrow{color:var(--color-accent)}
.hh-ervaring .hh-lead{color:#D8B9AC}
.hh-erv{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.hh-erv img,.hh-erv video{border-radius:7rem 7rem .8rem .8rem;aspect-ratio:3/4;object-fit:cover;width:100%;display:block;margin:0 0 1.1rem}
.hh-erv h3{font-size:1.1rem;margin:0 0 .35rem}
.hh-erv p{font-size:.9rem;color:#D3B3A6;line-height:1.65;margin:0}
.hh-erv-leeg{border:1px dashed rgba(240,220,211,.45);border-radius:7rem 7rem .8rem .8rem;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;font-size:.8rem;color:#BF9A8C;margin-bottom:1.1rem}
.hh-afsluiter{font-family:var(--font-heading);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.5;color:#FBEDE6;max-width:34rem;margin:0}
@media(max-width:900px){.hh-erv{grid-template-columns:repeat(2,1fr)}}

/* ===== Huid & Hart — video met rusttoestand ===== */
.hh-film{position:relative;margin-bottom:1.1rem;cursor:pointer}
.hh-film video{margin-bottom:0;filter:brightness(.72) saturate(.7);transition:filter .6s ease}
.hh-film .hh-teken{position:absolute;left:50%;top:calc(50% - .5rem);transform:translate(-50%,-50%);width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(251,237,230,.7);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease;pointer-events:none}
.hh-film .hh-teken svg{width:1.6rem;height:1.6rem;fill:#FBEDE6}
.hh-film.hh-speelt video{filter:none}
.hh-film.hh-speelt .hh-teken{opacity:0}

/* ===== Huid & Hart — reviews ===== */
.hh-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);margin-top:clamp(2.5rem,5vw,3.5rem);text-align:left}
.hh-review{background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default) var(--radius-default) var(--radius-default) 5rem;padding:2rem 1.9rem;margin:0}
.hh-review p{font-family:var(--font-heading);font-style:italic;font-size:1.05rem;line-height:1.65;color:var(--color-brand-dark);margin:0}
.hh-review cite{display:block;margin-top:1.1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-mokka);font-style:normal}
.hh-score{font-family:var(--font-heading);font-size:3.6rem;line-height:1;color:var(--color-brand-dark);margin:0}
.hh-score-sub{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-mokka);margin:.7rem 0 0}
@media(max-width:860px){.hh-reviews{grid-template-columns:1fr}}

/* ===== Huid & Hart — over Jessica ===== */
.hh-jes-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hh-jessica img{border-radius:var(--radius-boog);aspect-ratio:3/4;object-fit:cover;object-position:62% center;width:100%;margin:0}
.hh-jessica p{margin-bottom:1.1rem;color:var(--color-text-muted)}
.hh-jessica h2{margin:0 0 var(--space-lg)}

/* ===== Huid & Hart — prijzen ===== */
.hh-regel{border-top:1px solid rgba(154,108,94,.22);padding:1.7rem 0}
.hh-regel:last-of-type{border-bottom:1px solid rgba(154,108,94,.22)}
.hh-regel-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-lg);margin-bottom:.5rem}
.hh-regel h3{font-size:1.25rem;margin:0}
.hh-tarief{font-family:var(--font-body);font-size:.9rem;letter-spacing:.04em;color:var(--color-mokka);white-space:nowrap}
.hh-regel p{font-size:.97rem;color:var(--color-text-muted);margin:0}
.hh-extra{margin-top:var(--space-lg);font-size:.93rem;color:var(--color-text-muted)}
.hh-prijs-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hh-prijs-beeld img{border-radius:7rem 7rem 1rem 1rem;aspect-ratio:3/4;object-fit:cover;object-position:72% center;width:100%;margin:0}

/* ===== Huid & Hart — praktisch ===== */
.hh-feit{padding:1.2rem 0;border-bottom:1px solid rgba(154,108,94,.2)}
.hh-feit:last-child{border-bottom:none}
.hh-feit h3{font-size:1.05rem;margin:0 0 .3rem}
.hh-feit p{font-size:.95rem;color:var(--color-text-muted);margin:0}
.hh-tijden{display:grid;grid-template-columns:auto auto;gap:.25rem 1.5rem;justify-content:start;font-size:.95rem;color:var(--color-text-muted)}
.hh-prak-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hh-praktisch img{border-radius:var(--radius-default) var(--radius-default) var(--radius-default) 8rem;aspect-ratio:4/3;object-fit:cover;width:100%;margin:0}
.hh-praktisch h2{margin:0 0 var(--space-xl)}

/* ===== Huid & Hart — slot ===== */
.hh-slot .hh-sub{margin-top:var(--space-lg);font-size:.92rem;color:var(--color-text-muted)}
.hh-slot .hh-sub a{color:var(--color-mokka) !important;border-bottom:1px solid var(--color-accent)}
.hh-slot h2{margin:0 0 var(--space-lg)}

/* ===== Huid & Hart — mobiele actiebalk ===== */
.hh-balk-blok .container{padding-top:0;padding-bottom:0}
.hh-balk{position:fixed;left:0;right:0;bottom:-1px;z-index:70;display:none;background:var(--color-brand-light);border-top:1px solid rgba(154,108,94,.2);padding:.7rem;gap:.7rem;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hh-balk a{flex:1;text-align:center;padding:.9rem;border-radius:var(--radius-pill);font-size:.9rem;border-bottom:none}
.hh-balk .hh-bel{border:1px solid rgba(154,108,94,.4);color:var(--color-brand-dark) !important}
.hh-balk .hh-boek{background:var(--color-brand-dark);color:var(--color-brand-light) !important}
@media(max-width:760px){.hh-balk{display:flex}}
.hh-balk.hh-slim{transform:translateY(105%)}
.hh-balk.hh-slim.hh-zichtbaar{transform:none}

/* ===== Huid & Hart — toegankelijkheid ===== */
@media(prefers-reduced-motion:reduce){
  .hh-kaart,.hh-knop,.hh-film video,.hh-balk{transition:none !important}
  .hh-kaart:hover,.hh-knop:hover{transform:none !important}
}

/* ===== Huid & Hart — oplossingspagina ===== */
.hh-leeg{display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;border:1px dashed rgba(154,108,94,.45);background:var(--color-brand);font-size:.85rem;line-height:1.6;color:var(--color-mokka)}

.hh-aanpak .hh-stappen{grid-template-columns:repeat(4,1fr)}
.hh-aanpak .hh-stap img{border-radius:6rem 6rem .8rem .8rem;aspect-ratio:4/3.4;object-fit:cover;width:100%;margin:0 0 var(--space-md)}
@media(max-width:1000px){.hh-aanpak .hh-stappen{grid-template-columns:repeat(2,1fr);gap:2.5rem}}
@media(max-width:640px){.hh-aanpak .hh-stappen{grid-template-columns:1fr}}

.hh-oorzaken{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.hh-oorzaak{background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default);padding:1.8rem 1.9rem}
.hh-oorzaak h3{font-size:1.15rem;margin:0 0 .5rem}
.hh-oorzaak p{font-size:.97rem;color:var(--color-text-muted);margin:0}
.hh-uitgelicht{font-family:var(--font-heading);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.55;color:var(--color-brand-dark);max-width:38rem;margin:clamp(2.2rem,4vw,3rem) 0 0;padding-left:1.6rem;border-left:2px solid var(--color-accent)}
@media(max-width:700px){.hh-oorzaken{grid-template-columns:1fr}}

.hh-verwacht{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2rem,4vw,3.5rem)}
.hh-verwacht .hh-feit{border-bottom:1px solid rgba(154,108,94,.2)}
@media(max-width:700px){.hh-verwacht{grid-template-columns:1fr}}

.hh-res-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hh-res-duo h2{margin:var(--space-md) 0 var(--space-lg)}
.hh-res-duo p{color:var(--color-text-muted)}
.hh-klein{font-size:.85rem;margin-top:var(--space-lg)}
.hh-res-duo .hh-res-beeld{border-radius:var(--radius-default);overflow:hidden;aspect-ratio:1/1}
@media(max-width:800px){.hh-res-duo{grid-template-columns:1fr}}

.hh-vert{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hh-vert h3{margin:0 0 var(--space-md)}
.hh-vert p{color:var(--color-text-muted)}
@media(max-width:800px){.hh-vert{grid-template-columns:1fr}}

/* ===== Huid & Hart — hoort hierbij ===== */
.hh-verder{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(154,108,94,.22);text-align:left}
.hh-verder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.hh-verder-kaart{position:relative;display:block;background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default);padding:1.5rem 1.7rem;transition:transform .35s ease}
.hh-verder-kaart:hover{transform:translateY(-4px)}
.hh-verder-kaart:focus-within{outline:2px solid var(--color-accent);outline-offset:3px}
.hh-verder-kaart h3{font-size:1.05rem;margin:0 0 .3rem}
.hh-verder-kaart p{font-size:.9rem;color:var(--color-text-muted);margin:0}
.hh-verder-link{color:inherit !important;text-decoration:none;border-bottom:0}
.hh-verder-link::after{content:"";position:absolute;inset:0;z-index:1}
.hh-verder-link:focus-visible{outline:none}
@media(max-width:800px){.hh-verder-grid{grid-template-columns:1fr}}


/* ===== Huid & Hart — behandelpagina ===== */
.hh-tarieven{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:var(--space-lg) 0 0;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-mokka)}
.hh-gevoel{max-width:44rem}
.hh-gevoel h2{margin:0 0 var(--space-lg)}
.hh-gevoel p{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.85;color:var(--color-text-main);margin-bottom:1.2rem}
.hh-stappen.hh-vijf{grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.6rem)}
.hh-vijf .hh-stap img{border-radius:5rem 5rem .8rem .8rem;aspect-ratio:3/3.6;object-fit:cover;width:100%;margin:0 0 var(--space-md)}
.hh-vijf .hh-stap h3{font-size:1.1rem}
.hh-vijf .hh-stap p{font-size:.92rem}
@media(max-width:1000px){.hh-stappen.hh-vijf{grid-template-columns:repeat(2,1fr);gap:2.5rem}}
@media(max-width:640px){.hh-stappen.hh-vijf{grid-template-columns:1fr}}
.hh-keuze-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem)}
.hh-keuze-kaart{background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default);padding:2rem 2.1rem}
.hh-keuze-kaart h3{margin:0 0 .3rem}
.hh-keuze-prijs{font-family:var(--font-heading);font-size:2rem;color:var(--color-brand-dark);margin:0 0 var(--space-md)}
.hh-keuze-kaart p:last-child{font-size:.97rem;color:var(--color-text-muted);margin:0}
.hh-uitgelicht-kaart{background:var(--color-brand);border-color:transparent}
.hh-keuze-hint{margin-top:var(--space-lg);font-size:.95rem;color:var(--color-text-muted)}
@media(max-width:700px){.hh-keuze-grid{grid-template-columns:1fr}}

/* ===== Huid & Hart — overzichtspagina ===== */
.hh-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.hh-route{position:relative;display:block;background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default);padding:2rem 2.1rem;transition:transform .4s ease,box-shadow .4s ease}
.hh-route:hover{transform:translateY(-5px);box-shadow:0 20px 40px -28px rgba(74,46,39,.4)}
.hh-route:focus-within{outline:2px solid var(--color-accent);outline-offset:3px}
.hh-route-nr{display:block;font-family:var(--font-heading);font-style:italic;font-size:1.05rem;color:var(--color-mokka);margin-bottom:.4rem}
.hh-route h3{margin:0 0 .6rem}
.hh-route p{font-size:.95rem;color:var(--color-text-muted);margin:0}
.hh-route-link{color:inherit !important;text-decoration:none;border-bottom:0}
.hh-route-link::after{content:"";position:absolute;inset:0;z-index:1}
.hh-route-link:focus-visible{outline:none}
.hh-route .hh-meer{pointer-events:none}
@media(max-width:900px){.hh-routes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.hh-routes{grid-template-columns:1fr}}
.hh-lijst{max-width:54rem}
.hh-lijst .hh-regel h3 a{color:var(--color-brand-dark) !important;border-bottom:1px solid transparent}
.hh-lijst .hh-regel h3 a:hover{border-bottom-color:var(--color-accent)}
.hh-lijst-noot{margin-top:var(--space-lg);font-size:.9rem;color:var(--color-text-muted);max-width:38rem}
.hh-meer-blok .hh-meer-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hh-meer-blok .hh-lijst{max-width:none}
.hh-meer-blok .hh-meer-beeld img{border-radius:7rem 7rem 1rem 1rem;aspect-ratio:3/4;object-fit:cover;width:100%;margin:0}
@media(max-width:860px){.hh-meer-blok .hh-meer-grid{grid-template-columns:1fr}.hh-meer-blok .hh-meer-beeld{display:none}}


/* ===== Huid & Hart — over Jessica ===== */
.hh-duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hh-duo h2{margin:var(--space-md) 0 var(--space-lg)}
.hh-duo p{color:var(--color-text-muted)}
.hh-duo img{border-radius:var(--radius-boog);aspect-ratio:3/4;object-fit:cover;width:100%;margin:0}
.hh-omgekeerd{grid-template-columns:.9fr 1.1fr}
.hh-omgekeerd img{border-radius:var(--radius-default) var(--radius-default) var(--radius-default) 8rem;aspect-ratio:4/4.6}
@media(max-width:860px){.hh-duo,.hh-omgekeerd{grid-template-columns:1fr}.hh-duo img{max-width:22rem}.hh-omgekeerd > div:first-child{order:2}}

/* ===== Huid & Hart — layoutvormen om af te wisselen ===== */

/* 1. Uitspraak: alleen tekst, smal, groot gezet. Onderbreekt het ritme. */
.hh-statement{max-width:46rem}
.hh-statement p{font-family:var(--font-heading);font-size:clamp(1.4rem,2.8vw,2.15rem);line-height:1.45;color:var(--color-brand-dark);margin:0 0 var(--space-lg)}
.hh-statement .hh-onder{font-family:var(--font-body);font-size:1.05rem;line-height:1.85;color:var(--color-text-muted);margin:0 0 1.1rem}

/* 2. Beeldstrook: drie foto's naast elkaar op verschillende hoogtes. */
.hh-strook{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:end}
.hh-strook img{width:100%;object-fit:cover;margin:0;border-radius:var(--radius-default)}
.hh-strook img:nth-child(1){aspect-ratio:3/4;border-radius:6rem 6rem var(--radius-default) var(--radius-default)}
.hh-strook img:nth-child(2){aspect-ratio:3/3.4}
.hh-strook img:nth-child(3){aspect-ratio:3/4.4;border-radius:var(--radius-default) var(--radius-default) var(--radius-default) 5rem}
@media(max-width:760px){.hh-strook{grid-template-columns:1fr 1fr}.hh-strook img:nth-child(3){display:none}}

/* ===== Huid & Hart — paginakop (onderliggende pagina's) =====
   De homepage houdt de hero met tekst en beeld naast elkaar.
   Onderliggende pagina's krijgen een gestapelde kop: rustiger,
   en het beeld staat eronder over de volle containerbreedte. */
section.intro.hh-paginakop{padding:clamp(3rem,6vw,5rem) 0 0;overflow:visible}
/* het beeld loopt bewust over de sectiegrens heen in de volgende sectie */
.hh-paginakop-beeld{position:relative;z-index:2;margin-bottom:calc(var(--overloop) * -1)}
.hh-paginakop{--overloop:clamp(3rem,7vw,7rem)}
/* de volgende sectie krijgt die ruimte er bovenop, zodat de tekst niet onder de foto valt */
/* alleen extra ruimte als er daadwerkelijk een beeld overloopt */
section.intro.hh-paginakop:has(.hh-paginakop-beeld) + section.intro{padding-top:calc(clamp(4.5rem,9vw,8rem) + clamp(3rem,7vw,7rem))}
section.intro.hh-paginakop-kaal{padding-bottom:clamp(2rem,4vw,3rem)}
.hh-paginakop-tekst{max-width:44rem}
.hh-paginakop h1{margin:var(--space-md) 0 var(--space-lg)}
.hh-paginakop .hh-lead{margin:0}
.hh-paginakop-acties{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--space-xl)}
.hh-paginakop-beeld{margin-top:clamp(2.5rem,5vw,4rem)}
.hh-paginakop-beeld img{width:100%;aspect-ratio:16/6.5;object-fit:cover;object-position:center 30%;border-radius:var(--radius-default);margin:0}
/* portret: minder extreem breed en hoger uitgesneden */
.hh-paginakop-beeld.hh-portret img{aspect-ratio:16/9;object-position:center 22%}
@media(max-width:700px){.hh-paginakop-beeld img{aspect-ratio:4/3}}

/* feiten onder de kop van een behandelpagina */
.hh-feiten{display:flex;flex-wrap:wrap;gap:0 clamp(2rem,4vw,3.5rem);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid rgba(154,108,94,.22)}
.hh-feiten div{padding:.4rem 0}
.hh-feiten dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-mokka);margin-bottom:.25rem}
.hh-feiten dd{margin:0;font-family:var(--font-heading);font-size:1.35rem;color:var(--color-brand-dark)}

/* ===== Huid & Hart — kennisbankartikel ===== */
.hh-artikelkop{max-width:44rem}
.hh-artikelkop h1{font-size:clamp(2rem,4.2vw,3.2rem);margin:var(--space-md) 0 var(--space-lg)}
.hh-meta{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-mokka);margin:var(--space-lg) 0 0}
.hh-artikelbeeld{margin-top:clamp(2.5rem,5vw,4rem)}
.hh-artikelbeeld img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius-default);margin:0}
.hh-artikel{max-width:40rem}
.hh-artikel h2{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:clamp(2.2rem,4vw,3rem) 0 var(--space-md)}
.hh-artikel p{font-size:1.08rem;line-height:1.9;margin:0 0 1.2rem}
.hh-inleiding{font-family:var(--font-heading);font-size:clamp(1.2rem,2.2vw,1.55rem) !important;line-height:1.6 !important;color:var(--color-brand-dark);margin-bottom:var(--space-xl) !important}
.hh-artikel-cta{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default);padding:clamp(1.8rem,3vw,2.6rem)}
.hh-artikel-cta h2{margin:0 0 var(--space-md);font-size:clamp(1.25rem,2vw,1.6rem)}
.hh-artikel-cta p{color:var(--color-text-muted);margin:0}
.hh-artikel-cta .hh-sub{margin-top:.8rem;font-size:.85rem}
@media(max-width:760px){.hh-artikel-cta{grid-template-columns:1fr}}

/* ===== Huid & Hart — overzicht huidoplossingen ===== */
.hh-oplosgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.4rem)}
.hh-oploskaart{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--color-white);border:1px solid var(--border-color);border-radius:var(--radius-default);overflow:hidden;transition:transform .4s ease,box-shadow .4s ease}
.hh-oploskaart:hover{transform:translateY(-5px);box-shadow:0 22px 45px -30px rgba(74,46,39,.45)}
.hh-oploskaart img{width:100%;height:100%;object-fit:cover;margin:0}
.hh-oploskaart-tekst{padding:1.7rem 1.8rem}
.hh-oploskaart h2{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:0 0 .5rem}
.hh-oploskaart p{font-size:.95rem;color:var(--color-text-muted);margin:0}
.hh-mini{margin:var(--space-md) 0 0;padding-top:var(--space-md);border-top:1px solid var(--border-color)}
.hh-mini div{display:flex;gap:.6rem;align-items:baseline;margin-bottom:.3rem}
.hh-mini dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-mokka);min-width:5.2rem}
.hh-mini dd{margin:0;font-size:.9rem;color:var(--color-text-muted)}
@media(max-width:1000px){.hh-oplosgrid{grid-template-columns:1fr}}
@media(max-width:560px){.hh-oploskaart{grid-template-columns:1fr}.hh-oploskaart img{aspect-ratio:5/3}}


@media only screen and (max-width: 1450px) {
footer div.socket {
    padding-bottom: 80px!important;
}
}

.hh-sectie [id]{scroll-margin-top:6.5rem}

/* Afspraakknop in het menu: platter, iets naar rechts, duidelijkere tekst */
@media (min-width:768px){
header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li.hh-knop{padding:6.5px 12px !important;margin:0 -15px 0 14px !important}
header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li.hh-knop > a{font-weight:400 !important;-webkit-font-smoothing:antialiased}
}

/* Footer: meer ruimte tussen de links in de kolommen */
footer .row > [class*="col-"]:not(:first-child) > .column > p{line-height:34px !important}

footer div.socket .container {
    border-top: 1px solid rgba(240, 220, 211, .2);
    padding-top: 1.7rem;
}