@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(--c-espresso);
  }

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

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

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

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

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

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

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

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

  header button.navbar-toggle {
  color: var(--c-espresso);
  border-color: var(--c-espresso);
  }

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

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

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

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



  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;
  }
  }

  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://chantellehair.nbsals4.nl/wp-content/uploads/sites/318/2026/08/header_foto.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(35, 26, 20, 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: #f7f3ec !important;
  }
  }


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

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

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

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





  nav.navbar-default, div.navbar-collapse {
  background-color: var(--c-espresso); !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(--c-espresso) !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 var(--c-karamel);
  }

  @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(--c-karamel) !important;
  }
  }


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

  @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(--c-espresso) !important;
  }

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

  section.partners {
  background: var(--c-karamel) !important;
  }

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

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

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

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


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

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

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

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

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

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

  @media only screen and (min-width : 1400px) {
  .container {
  width: 1370px;
  }
  }
  :root {
    --c-espresso: #231A14;
    --c-walnoot: #6B4E35;
    --c-karamel: #C08A55;
    --c-zand: #E8DCCB;
    --c-offwhite: #F7F3EC;
    --c-wit: #FFFFFF;
    --c-lijn: rgba(107, 78, 53, .28);
    --c-lijn-invert: rgba(232, 220, 203, .3);
    --font-display: "Noto Serif Georgian", serif;
    --font-body: "Open Sans", sans-serif;
    --fs-body: 1.0625rem;
    --fs-lead: 1.3125rem;
    --fs-label: .75rem;
    --fs-h3: 1.375rem;
    --fs-h2: clamp(2rem, 3.6vw, 2.875rem);
    --fs-h1: clamp(2.5rem, 5.4vw, 5.5rem);
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 40px;
    --sp-6: 48px;
    --sp-8: 64px;
    --sp-10: 80px;
    --sp-12: 96px;
    --container: 1200px;
    --gutter: 24px;
    --lap-xl: 160px;
    --lap-lg: 112px;
    --lap-md: 80px;
    --lap-sm: 48px;
}

.btn, .wpcf7-submit, .woocommerce span.onsale, .woocommerce a.button, .woocommerce .button, [type="submit"], .nf-form-content input[type=submit] {
    color: var(--c-zand) !important;
    border: 1px solid transparent!important;
    padding: 18px 40px !important;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.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 {
    color: var(--c-zand) !important;
    border-color: var(--c-espresso) !important;
}

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


.btn__group .btn {
    margin: 0 !important;
}
.btn__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

header span.color-em {
    font-size: 6.5rem;
}
span.color-em {
    color: var(--c-karamel);
    font-weight: 900;
}


header div.header {
    background-color: rgb(255 255 255 / 0%) !important;
}

header>div.wrapper.shadow:before {
    top: 0 !important;
    background: linear-gradient(90deg, rgb(35 26 20 / 86%) 0%, rgb(35 26 20 / 49%) 52%, rgba(35, 26, 20, .1) 100%);
}
.hero__body {
    text-align: left;
}

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

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

html {font-size: 100% !important; }
.bottom-align {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: end;
   align-items: end;
}
    header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        text-decoration: none;
        padding-bottom: 4px;
        border-bottom: 1px solid transparent !important;
        color: var(--c-offwhite) !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 {
        color: var(--c-offwhite) !important;
        border-bottom: 1px solid var(--c-karamel) !important;
    }
header div.header.full-width .container, header>div.wrapper .header__content .container {
    width: 80%;
    max-width: 1800px;
}
    body.home header > div.wrapper {
        min-height: 795px;
    }
header>div.wrapper .header__content {
        transform: translate3d(0, 120px, 0);
    }
header>div.wrapper .header__content .col-md-32.col-md-offset-8 {
    margin-left: 0;
    top: 27% !important;
}
    header>div.wrapper div.wrapper img.logo {
        max-width: 140px;
    }
.reverse {
    direction: rtl;
    margin-bottom: 0;
}
.reverse > * {
    direction: ltr;
}
    header div.header div.holder {
        height: 84px;
        min-height: 50px;
    }
}

header .header__content p {
    color: var(--c-zand) !important;
    font-size: 17px !important;
    line-height: 1.5;
    max-width: 39ch;
    margin-top: 25px;
}


@media only screen and (max-width: 991px) {
html {font-size: 100%!important;}

}



main section, section.treatments {
    padding: 100px 0;
}

body {
    background: var(--c-offwhite);
    color: var(--c-espresso);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
margin: 2.75rem 0 1.05rem;
    font-family: var(--font-display);
    color: var(--c-espresso)!important;
    margin: 0;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.06;
}


h1 {font-size: var(--fs-h1);}
h2 {font-size: var(--fs-h2);}
h3 {font-size: var(--fs-h3);}



small, .text_small {font-size: 0.8em;}

.smallmargin {
    margin-top: 1.15rem;
}

p {margin-bottom: 1.15rem;}

.btn {
    margin:1em 0;
    white-space: normal;
}

.relative, main section {
    position: relative;
}
ol, ul {
    margin-bottom: 1.15rem;
}

html, body {
    overflow-x: hidden;
}

img {
    height: auto;
}

@media only screen and (max-width: 991px) {
.gallery .gallery-item {
    width: 100%;
}
.m-pdt-0 {
padding-top:0!important;
}
.m-pdb-0 {
padding-bottom:0!important;
}
.m-pdb-2 {
padding-bottom:2em!important;
}
.m-pdt-2 {
padding-top:2em!important;
}
.m-mt-0 {
margin-top:0!important;
}
.m-mb-0 {
margin-bottom:0!important;
}
}


.about {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: var(--sp-12);
    align-items: center;
}
.collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
}
.collage__item--a {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 5;
    z-index: 1;
}
.collage__item--b {
    grid-column: 6 / span 6;
    grid-row: 1;
    aspect-ratio: 4 / 3;
    margin-top: var(--sp-8);
    z-index: 2;
}
.collage__item--c {
    grid-column: 5 / span 4;
    grid-row: 2;
    aspect-ratio: 1 / 1;
    align-self: end;
    margin-bottom: calc(var(--sp-8) * -1);
    z-index: 3;
}
.collage__item {
    position: relative;
    overflow: hidden;
    background: var(--c-walnoot);
    border: 1px solid var(--c-espresso);
}
.about__body h2 {
    margin-top: 0;
    margin-bottom: var(--sp-3);
}

.link-arrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--c-karamel);
    color: var(--c-espresso)!important;
}
.link-arrow:hover, .link-arrow:focus-visible {
    border-bottom-color: var(--c-espresso)!important;
}

/* === Tussenscherm Activiteiten & Producten === */
.keuze-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8,2rem);margin-top:var(--sp-8,2rem);}
.keuze-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--c-espresso);}
.keuze-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.keuze-tile:hover img{transform:scale(1.04);}
.keuze-tile__label{position:absolute;left:0;right:0;bottom:0;padding:1.25rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;z-index:2;}
@media only screen and (max-width:767px){.keuze-grid{grid-template-columns:1fr;}}

/* === Collage afbeeldingen home === */
.collage__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* === Home: groepsfoto in hero (briefing) === */
/* headerfoto home wordt ingesteld via Pagina Home > Headerachtergrond */

/* === Tarieven: 3 fototegels + scheidingslijnen === */
.keuze-grid--3{grid-template-columns:1fr 1fr 1fr;}
.keuze-grid--3 .keuze-tile{aspect-ratio:1/1;}
@media only screen and (max-width:767px){.keuze-grid--3{grid-template-columns:1fr;}}
hr.tarieven-divider{border:0;border-top:1px solid var(--c-lijn,rgba(107,78,53,.28));margin:2.5rem 0;}

/* === Subpagina's: foto-bolletjes === */
.bolletjes-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin:2rem 0;}
.bolletje{width:220px;height:220px;border-radius:50%;overflow:hidden;border:1px solid var(--c-espresso);flex:0 0 auto;}
.bolletje img{width:100%;height:100%;object-fit:cover;display:block;}

/* === Teampagina === */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem 2rem;margin-top:2rem;}
.team-card{text-align:center;}
.team-card__foto{width:200px;height:200px;border-radius:50%;overflow:hidden;margin:0 auto 1.25rem;border:1px solid var(--c-espresso);}
.team-card__foto img{width:100%;height:100%;object-fit:cover;display:block;}
.team-card h3{margin:0 0 .25rem;}
.team-card__dagen{margin:0 0 .5rem;font-weight:600;}

/* ==============================================================
   HBC 2026 -- vormgeving: sectieritme, hero, componenten
   ============================================================== */

/* Rustiger sectieritme en een smallere leesbreedte */
main section, section.treatments { padding: clamp(56px, 7vw, 96px) 0; }
main section > .container { max-width: 1240px; margin-left: auto; margin-right: auto; float: none; }
@media only screen and (min-width: 992px) {
  header > div.wrapper .header__content .container { max-width: 1240px; width: 100%; }
}

/* Hero rustiger: kleiner koptype, geen overloop onder de foto */
header .hero__body h1 { font-size: clamp(2.25rem, 4.4vw, 4.25rem); }
header span.color-em { font-size: inherit !important; }
@media only screen and (min-width: 992px) {
  body.home header > div.wrapper { min-height: 88vh; }
  header > div.wrapper .header__content { transform: none !important; padding-bottom: 5vh; }
}

/* Sectiekop */
.sectie__kop { max-width: 62ch; margin-bottom: var(--sp-6); }
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-walnoot); margin: 0 0 var(--sp-2); }
.sectie__kop h2 { margin: 0 0 var(--sp-2); }
.sectie__actie { margin-top: var(--sp-5); margin-bottom: 0; }

/* Ghost-knop */
a.btn.btn--ghost { background: transparent !important; border: 1px solid var(--c-karamel) !important; color: var(--c-karamel) !important; }
a.btn.btn--ghost:hover { background: var(--c-karamel) !important; color: var(--c-espresso) !important; }

/* Teamteaser op de homepage */
.team-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-5) var(--sp-3); margin-top: var(--sp-6); }
.team-teaser__item { text-align: center; }
.team-teaser__foto { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--c-lijn); margin-bottom: var(--sp-2); }
.team-teaser__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.team-teaser__item:hover .team-teaser__foto img { transform: scale(1.05); }
.team-teaser__item p { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* CTA-blok (donkere band) */
main section:has(.cta-blok) { background: var(--c-espresso); }
.cta-blok { max-width: 56ch; margin: 0 auto; text-align: center; }
.cta-blok .eyebrow { color: var(--c-karamel); }
.cta-blok h2 { color: var(--c-offwhite) !important; }
.cta-blok p { color: var(--c-zand); }
.cta-blok p a { color: var(--c-karamel); }
.cta-blok .btn__group { justify-content: center; }

/* Tarievenlijst */

.tarieven__sectie h2 { margin-bottom: var(--sp-4); }
.tarieven__sectie h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: 1.125rem; }
.tarieven__sectie h3 em { font-style: normal; font-weight: 400; opacity: .7; }
.prijslijst { list-style: none; margin: 0; padding: 0; }
.prijslijst li { display: flex; align-items: baseline; gap: var(--sp-3); padding: .6rem 0; border-bottom: 1px dotted var(--c-lijn); }
.prijslijst li > span { flex: 1 1 auto; }
.prijslijst li > span em { font-style: normal; opacity: .6; font-size: .875em; }
.prijslijst li > b { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
hr.tarieven-divider { border: 0; border-top: 1px solid var(--c-lijn); margin: var(--sp-8) 0; }
.tarieven__note { font-size: .9375rem; opacity: .8; }
.tarieven__note ul { padding-left: 1.15em; }

/* Contactpagina */
.contact-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-8); align-items: start; }
.contact-layout__main h1 { margin-bottom: var(--sp-4); }
.contact-layout__main h3 { margin: var(--sp-5) 0 var(--sp-1); font-size: 1.125rem; }
.contact-foto { margin: 0 0 var(--sp-4); overflow: hidden; border: 1px solid var(--c-lijn); }
.contact-foto img { width: 100%; height: auto; display: block; }
.contact-card { background: var(--c-zand); padding: var(--sp-5); }
.contact-card__title { margin: 0 0 var(--sp-2) !important; font-size: 1.125rem; }
.contact-card__adres { margin-bottom: var(--sp-5); }
.openingstijden { display: grid; grid-template-columns: auto 1fr; gap: .35rem var(--sp-3); margin: 0; }
.openingstijden dt { font-weight: 600; }
.openingstijden dd { margin: 0; text-align: right; }

/* Mobiel */
@media only screen and (max-width: 991px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .about { grid-template-columns: 1fr; gap: var(--sp-6); }
  .team-teaser { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .bolletje { width: 150px; height: 150px; }
  .prijslijst li { gap: var(--sp-2); }
}

/* wpautop voegt <br> toe tussen inline-elementen; die mogen geen grid-cel innemen */
.keuze-grid > br, .team-teaser > br, .bolletjes-grid > br, .team-grid > br, .contact-layout > br, .about > br, .collage > br, .btn__group > br { display: none; }

/* Geneste secties (tarievenlijst) mogen de sectie-padding van het thema niet erven */
main section.tarieven__sectie { padding: 0; }
.tarieven__sectie + .tarieven-divider { margin-top: var(--sp-6); }

/* Opeenvolgende secties: alleen ondermarge, anders dubbele witruimte */
main section + section:not(:has(.cta-blok)) { padding-top: clamp(24px, 3vw, 44px); }
main section:has(.cta-blok) { padding-top: clamp(56px, 7vw, 96px); }

/* Prettige regellengte voor losse tekstblokken */
main section > .container > h2 + p { margin-top: var(--sp-3); }

/* Teampagina: gelijkmatige rasterindeling */
.team-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: start; }
@media only screen and (min-width: 1100px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }
.team-card p { margin-bottom: .4rem; }
.team-card em { opacity: .7; }

/* Paginatitels in de content: h2-formaat, niet hero-formaat */
main h1 { font-size: var(--fs-h2); }

main section > .container > h1 + p, main section > .container > h2 + p { margin-top: var(--sp-3); }

/* Mobiel: collage mag niet over de tekst heen vallen */
@media only screen and (max-width: 991px) {
  .collage__item--c { margin-bottom: 0; }
  .collage { margin-bottom: var(--sp-4); }
}

/* Oude import-opmaak (row-fluid / spanX) fatsoeneren: Activiteiten & Producten */
.row-fluid { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; margin-bottom: var(--sp-6); }
.row-fluid > * { flex: 1 1 260px; min-width: 0; }
.row-fluid > .span4 { flex: 1 1 28%; }
.row-fluid > .span6 { flex: 1 1 45%; }
.row-fluid > .span8 { flex: 2 1 60%; }
.row-fluid > .span12 { flex: 1 1 100%; }
.row-fluid .row-fluid { margin-bottom: 0; }
.row-fluid .box-options-panel { display: none; }
.row-fluid .box { margin-bottom: var(--sp-3); }
.row-fluid .box-image img { width: 100%; height: auto; display: block; }
.row-fluid img { max-width: 100%; height: auto; }
.row-fluid p:empty { display: none; }
@media only screen and (max-width: 767px) { .row-fluid > * { flex: 1 1 100%; } }


/* ==============================================================
   HBC 2026 -- ronde 2: header, hero en kleurbanden
   ============================================================== */

/* Header: vaste donkere balk (naar voorbeeld davinciforhair.nl) */
header div.header.full-width { background-color: var(--c-espresso) !important; border-bottom: 1px solid rgba(232,220,203,.14); }
@media only screen and (min-width: 992px) {
  header div.header div.holder { height: 104px; min-height: 104px; }
  header > div.wrapper div.wrapper img.logo { max-width: 200px; }
  header div.header.full-width .container, header > div.wrapper .header__content .container { max-width: 90vw; width: 100%; }
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a { font-size: .8125rem; letter-spacing: .12em; margin-left: 30px; padding-bottom: 6px; }
}

/* Boek-online knop in de header */
header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li.menu-cta > a,
header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li.menu-cta > a:focus {
  background: var(--c-karamel);
  color: var(--c-espresso) !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 13px 28px !important;
  margin-left: 34px;
  line-height: 1;
  transition: background-color .2s ease;
}
header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li.menu-cta > a:hover {
  background: var(--c-zand);
  color: var(--c-espresso) !important;
  border: 0 !important;
}

/* Knoppen in pill-vorm */
.btn, [type="submit"], .nf-form-content input[type=submit] { border-radius: 999px; }

/* Hero */
header .header__content p.hero__eyebrow { color: var(--c-karamel) !important; font-size: .75rem !important; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 var(--sp-3) !important; max-width: none; }
header .header__content p.hero__lead { margin-top: var(--sp-3); }
.hero__body .btn__group { margin-top: var(--sp-5); }
a.btn.btn--ghost-light { background: transparent !important; border: 1px solid rgba(247,243,236,.55) !important; color: var(--c-offwhite) !important; }
a.btn.btn--ghost-light:hover { background: rgba(247,243,236,.14) !important; border-color: var(--c-offwhite) !important; color: var(--c-offwhite) !important; }

/* Kleurbanden op de homepage */
body.home main section.block1 { background: var(--c-espresso); color: var(--c-zand); border-radius: 40px; margin-left: clamp(0px, 2vw, 32px); margin-right: clamp(0px, 2vw, 32px); }
body.home main section.block1 h2, body.home main section.block1 h3 { color: var(--c-offwhite) !important; }
body.home main section.block1 .eyebrow { color: var(--c-karamel); }
body.home main section.block1 .sectie__intro { color: var(--c-zand); opacity: .85; }
body.home main section.block1 .link-arrow { color: var(--c-zand) !important; border-bottom-color: var(--c-karamel) !important; }
body.home main section.block1 .link-arrow:hover { color: var(--c-offwhite) !important; border-bottom-color: var(--c-offwhite) !important; }
body.home main section.block1 .keuze-tile { border-color: rgba(232,220,203,.25); }

body.home main section.block2 { background: var(--c-zand); }

body.home main section.block4-oud { background: var(--c-karamel) !important; }
body.home main section.block4-oud .cta-blok h2 { color: var(--c-espresso) !important; }
body.home main section.block4-oud .cta-blok p { color: var(--c-espresso); }
body.home main section.block4-oud .cta-blok .eyebrow { color: var(--c-espresso); opacity: .7; }
body.home main section.block4-oud .cta-blok p a { color: var(--c-espresso); text-decoration: underline; }
body.home main section.block4-oud a.btn { background: var(--c-espresso) !important; color: var(--c-zand) !important; border-color: var(--c-espresso) !important; }
body.home main section.block4-oud a.btn.btn--ghost { background: transparent !important; border: 1px solid var(--c-espresso) !important; color: var(--c-espresso) !important; }
body.home main section.block4-oud a.btn.btn--ghost:hover { background: var(--c-espresso) !important; color: var(--c-zand) !important; }

/* Jaartal-accent in het introblok */
.jaartal { display: block; font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 6rem); line-height: .85; color: var(--c-karamel); opacity: .38; letter-spacing: -.03em; margin-bottom: var(--sp-2); }

/* Streepje voor de sectie-eyebrow */
.sectie__kop .eyebrow { display: flex; align-items: center; gap: .8rem; }
.sectie__kop .eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: 0 0 auto; }

/* Tegels iets levendiger */
.keuze-tile { transition: transform .35s ease; }
.keuze-tile:hover { transform: translateY(-5px); }
.keuze-tile__label { transition: padding-bottom .3s ease; }
.keuze-tile:hover .keuze-tile__label { padding-bottom: 1.7rem; }

@media only screen and (max-width: 767px) {
  body.home main section.block1 { border-radius: 22px; margin-left: 12px; margin-right: 12px; }
}

/* Correcties ronde 2 */
.btn, a.btn, .btn-primary, [type="submit"], .nf-form-content input[type=submit] { border-radius: 999px !important; }
@media only screen and (min-width: 992px) {
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; float: none; }
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li { float: none; white-space: nowrap; }
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a { font-size: .75rem; letter-spacing: .1em; margin-left: 22px; }
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li.menu-cta > a { padding: 12px 22px !important; margin-left: 26px; }
}
@media only screen and (min-width: 992px) and (max-width: 1300px) {
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a { margin-left: 16px; font-size: .7rem; }
  header > div.wrapper div.wrapper img.logo { max-width: 160px; }
}

/* CTA-band op karamel: leesbaarheid knoppen en links */
body.home main section.block4-oud .cta-blok p a:not(.btn) { color: var(--c-espresso) !important; text-decoration: underline; }
body.home main section.block4-oud .cta-blok a.btn { text-decoration: none !important; background: var(--c-espresso) !important; color: var(--c-zand) !important; border: 1px solid var(--c-espresso) !important; }
body.home main section.block4-oud .cta-blok a.btn:hover { background: transparent !important; color: var(--c-espresso) !important; }
body.home main section.block4-oud .cta-blok a.btn.btn--ghost { background: transparent !important; color: var(--c-espresso) !important; }
body.home main section.block4-oud .cta-blok a.btn.btn--ghost:hover { background: var(--c-espresso) !important; color: var(--c-zand) !important; }
body.home main section.block4-oud .cta-blok .eyebrow { opacity: .85; }

/* Ruimere headerfoto op subpagina's en consistente koppen */
@media only screen and (min-width: 992px) {
  body:not(.home) header > div.wrapper { min-height: 420px; }
}
main h1.h2, main h1.h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; }


/* Mobiel menu-icoon leesbaar op de donkere balk */
header div.header.full-width .navbar-toggle,
header div.header.full-width .navbar-toggle i,
header div.header.full-width .navbar-toggle:hover,
header div.header.full-width .navbar-toggle:focus { color: var(--c-offwhite) !important; background: transparent !important; border: 0 !important; font-size: 1.4rem; }
@media only screen and (max-width: 991px) {
  header div.header div.holder { height: 76px; min-height: 76px; }
  header > div.wrapper div.wrapper img.logo { max-width: 150px; }
  .hero__body .btn__group .btn { width: 100%; text-align: center; }
}

/* Mobiel: menuknop verticaal centreren in de balk */
@media only screen and (max-width: 991px) {
  header div.header.full-width nav.navbar .navbar-header .holder,
  header div.header.full-width nav.navbar .navbar-header .holder > .wrapper { height: 76px !important; min-height: 76px !important; }
}

/* ==============================================================
   HBC 2026 -- ronde 3: herbruikbare kleurbanden + rustiger CTA
   ============================================================== */

/* Donkere band met afgeronde hoeken -- zet class="band-dark" op de wrapper in een tekstblok */
main section:has(.band-dark) {
  background: var(--c-espresso);
  color: var(--c-zand);
  border-radius: 40px;
  margin-left: clamp(0px, 2vw, 32px);
  margin-right: clamp(0px, 2vw, 32px);
  margin-bottom: clamp(32px, 5vw, 72px);
}
main section:has(.band-dark) h1, main section:has(.band-dark) h2, main section:has(.band-dark) h3 { color: var(--c-offwhite) !important; }
main section:has(.band-dark) p, main section:has(.band-dark) li { color: var(--c-zand); }
main section:has(.band-dark) .eyebrow { color: var(--c-karamel); }
main section:has(.band-dark) .link-arrow { color: var(--c-zand) !important; border-bottom-color: var(--c-karamel) !important; }
main section:has(.band-dark) .link-arrow:hover { color: var(--c-offwhite) !important; border-bottom-color: var(--c-offwhite) !important; }
main section:has(.band-dark) .keuze-tile, main section:has(.band-dark) .bolletje, main section:has(.band-dark) .team-card__foto { border-color: rgba(232,220,203,.25); }

/* Warme lichte band -- class="band-zand" */
main section:has(.band-zand) { background: var(--c-zand); }

/* Extra lucht onder de donkere band op de homepage */
body.home main section.block1 { margin-bottom: clamp(32px, 5vw, 72px); }

/* CTA: ingesprongen donker paneel in plaats van een volle kleurband */
main section:has(.cta-blok) { background: transparent !important; }
.cta-blok {
  background: var(--c-espresso);
  border-radius: 40px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.cta-blok .eyebrow { justify-content: center; color: var(--c-karamel) !important; }
.cta-blok h2 { color: var(--c-offwhite) !important; margin-bottom: var(--sp-3); }
.cta-blok p { color: var(--c-zand) !important; max-width: 46ch; margin-left: auto; margin-right: auto; }
.cta-blok p a:not(.btn) { color: var(--c-karamel) !important; text-decoration: underline; }
.cta-blok a.btn { text-decoration: none !important; background: var(--c-karamel) !important; color: var(--c-espresso) !important; border: 1px solid var(--c-karamel) !important; }
.cta-blok a.btn:hover { background: transparent !important; color: var(--c-karamel) !important; }
.cta-blok a.btn.btn--ghost { background: transparent !important; color: var(--c-zand) !important; border: 1px solid rgba(232,220,203,.45) !important; }
.cta-blok a.btn.btn--ghost:hover { background: rgba(232,220,203,.14) !important; color: var(--c-offwhite) !important; border-color: var(--c-offwhite) !important; }

@media only screen and (max-width: 767px) {
  main section:has(.band-dark) { border-radius: 22px; margin-left: 12px; margin-right: 12px; }
  .cta-blok { border-radius: 22px; }
}

/* CTA: knoppen naast elkaar (btn__group is een p en erfde de leesbreedte) */
.cta-blok p.btn__group { max-width: none; gap: var(--sp-2); }

/* Leesbreedte ook binnen een band */


/* ==============================================================
   HBC 2026 -- footer
   ============================================================== */
footer { padding-top: clamp(48px, 6vw, 80px) !important; }
footer > div.container { max-width: 1240px; margin-left: auto; margin-right: auto; float: none; }
footer .column { margin-bottom: var(--sp-5); }
footer h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-offwhite) !important;
  border-bottom: 1px solid rgba(232,220,203,.22) !important;
  padding-bottom: .65rem;
  margin: 0 0 var(--sp-3) !important;
}
footer h4:empty { display: none; }
footer p, footer li, footer td { color: var(--c-zand); }
footer p { margin-bottom: .6rem; }
footer a { color: var(--c-zand); text-decoration: none; }
footer a:hover { color: var(--c-karamel); }

/* Snelle links */
footer ul.footer-links { list-style: none; margin: 0; padding: 0; }
footer ul.footer-links li { margin: 0 0 .55rem; }
footer ul.footer-links a { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
footer ul.footer-links a:hover { border-bottom-color: var(--c-karamel); }

/* Openingstijden */
footer table.opening_hours { width: 100%; max-width: 300px; }
footer table.opening_hours td { padding: .18rem 0; vertical-align: top; }

/* Social media */
footer .social-media { margin-top: var(--sp-1); }
footer .social-media a { transition: transform .2s ease, background-color .2s ease; }
footer .social-media a:hover { transform: translateY(-2px); }

/* Onderste balk */
footer div.socket { border-top: 1px solid rgba(232,220,203,.14); margin-top: var(--sp-4); padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
footer div.socket, footer div.socket span, footer div.socket a { font-size: .8125rem; color: rgba(232,220,203,.65); }
footer div.socket a:hover { color: var(--c-karamel); }

@media only screen and (max-width: 767px) {
  footer .col-sm-16 { width: 100%; float: none; }
  footer .column { margin-bottom: var(--sp-6); }
  footer div.socket .col-md-30, footer div.socket .col-md-18 { width: 100%; float: none; text-align: left !important; }
}

/* Snelle links in de footer rustig houden, karamel alleen bij hover */
footer ul.footer-links li a { color: var(--c-zand) !important; }
footer ul.footer-links li a:hover { color: var(--c-karamel) !important; border-bottom-color: var(--c-karamel); }
footer div.socket a { color: rgba(232,220,203,.8) !important; }
footer div.socket a:hover { color: var(--c-karamel) !important; }

/* ==============================================================
   HBC 2026 -- Activiteiten & Producten: media-rijen + opschoning
   ============================================================== */
.media-rij { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.media-rij--omgekeerd .media-rij__beeld { order: 2; }
.media-rij__beeld { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.media-rij__foto { margin: 0; overflow: hidden; border: 1px solid var(--c-lijn); }
.media-rij__foto img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .5s ease; }
.media-rij__foto:hover img { transform: scale(1.04); }
.media-rij__tekst > *:first-child { margin-top: 0; }
.media-rij__tekst p { max-width: 56ch; }
.beeld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.beeld-rij__foto { margin: 0; overflow: hidden; border: 1px solid var(--c-lijn); }
.beeld-rij__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
main section:has(.media-rij), main section:has(.beeld-rij) { padding-top: clamp(28px, 4vw, 52px) !important; padding-bottom: clamp(28px, 4vw, 52px) !important; }
main section:has(.media-rij--omgekeerd) { background: var(--c-zand); }
@media only screen and (max-width: 767px) {
  .media-rij { grid-template-columns: 1fr; }
  .media-rij--omgekeerd .media-rij__beeld { order: 0; }
}

/* Oude .h1/.h2/.h3-klassen ook in het koplettertype */
main .h1, main .h2, main .h3, main .h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
main .h2 { font-size: var(--fs-h2); }
main .h3 { font-size: var(--fs-h3); }

/* Lege alinea uit de oude import verbergen */
main p:empty, footer p:empty { display: none; }

/* Foto-bolletjes links uitlijnen met de tekst */
.bolletjes-grid { justify-content: flex-start; }

/* Tekstpagina (privacyverklaring, cookies): leesbare regellengte en kopmarges */
main section.page .col-xs-48 > h2, main section.page .col-xs-48 > h3, main section.page .col-xs-48 > h4 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
main section.page .col-xs-48 > *:first-child { margin-top: 0; }

/* Kopjes in media-rijen wat lucht geven */
.media-rij__tekst h2, .media-rij__tekst h3, .media-rij__tekst h4 { margin-bottom: .65rem; }
.media-rij__tekst h2 + p, .media-rij__tekst h3 + p, .media-rij__tekst h4 + p { margin-top: 0; }
.sectie > h1 + p, .sectie__kop + .media-rij { margin-top: var(--sp-4); }


/* === Home hero: groepsfoto sept 2026, tekstblok rechtsonder === */
.home header > div.wrapper::after { background-position: 50% 15%; }
@media only screen and (min-width: 992px) {
  .home header > div.wrapper.shadow:before {
    background:
      linear-gradient(to top, rgb(35 26 20 / 84%) 0%, rgb(35 26 20 / 32%) 55%, rgb(35 26 20 / 6%) 100%),
      linear-gradient(270deg, rgb(35 26 20 / 42%) 0%, rgb(35 26 20 / 8%) 62%, rgb(35 26 20 / 0%) 100%);
  }
  .home .header__content { align-items: flex-end; }
  .home .header__content > .container { display: flex; align-items: flex-end; }
  .home .header__content .row { width: 100%; }
  .home .header__content .col-md-32 { float: right; margin-left: 0; }
  .home .header__content { padding-top: min(200px, 22vh); }
  .home .hero__body { max-width: 600px; margin-left: auto; text-align: right; }
  .home .hero__body h1 { font-size: 2.75rem; line-height: 1.12; }
  .home .hero__body .btn__group { justify-content: flex-end; margin-top: 1.25rem; }
}

/* === Slogan-regel onder de behandelteksten === */
.claim { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.35; color: var(--c-karamel); margin-top: var(--sp-3); }

/* === 2-koloms keuzetegels: beeldverhouding volgen zodat foto's niet half wegvallen === */
.keuze-grid:not(.keuze-grid--3) .keuze-tile { aspect-ratio: 16 / 10; }

/* === Foto's die volledig in beeld moeten blijven (geen 4:5-uitsnede) === */
.media-rij__foto--vol img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* === Twee productblokken naast elkaar (Biosilk / Nioxin) === */
.duo-rij { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.duo-rij__foto { margin: 0 0 var(--sp-3); overflow: hidden; border: 1px solid var(--c-lijn); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--c-wit); }
.duo-rij__foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.duo-rij__item h3 { margin: 0 0 .65rem; }
.duo-rij__item p { margin-top: 0; max-width: 56ch; }
@media only screen and (max-width: 767px) { .duo-rij { grid-template-columns: 1fr; } }

/* === Headerfoto salon (stoelenrij) op Team en Activiteiten & Producten === */
.page-id-511 header > div.wrapper::after,
.page-id-1386 header > div.wrapper::after { background-position: 50% 42%; }