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

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

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

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

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

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

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

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

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

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

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

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

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

  header button.navbar-toggle {
  color: var(--color-sand-500);
  border-color: var(--color-sand-500);
  }

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

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: var(--color-sand-500) !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(250, 248, 246, 1) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(250, 248, 246) !important;
  }

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


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



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

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





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

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

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

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

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: var(--color-sand-500) !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-sand-300);
  }

  @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-sand-300) !important;
  }
  }


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

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

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

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

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

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

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

  footer div.socket,
  .footer-sticky {
  background: var(--color-sand-300) !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: #595959 !important;
  }

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

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

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

          :root {

            /* Primary: Antraciet / Grijs */
            --color-primary-100: #f2f2f2;
            --color-primary-200: #dcdcdc;
            --color-primary-500: #545454; /* Main Text */
            --color-primary-700: #3d3d3d; /* Hover styling */
            --color-primary-900: #222222;

            /* Accent: Oud Roze */
            --color-accent-100: #fbf2f1; 
            --color-accent-200: #edd2cf;
            --color-accent-500: #d9a6a1; /* Main Button Color */
            --color-accent-700: #c48781; /* Darker Pink (Hover) */
            
            /* Neutral: Zand & Gebroken Wit */
            --color-sand-100: #fcf9f7;
            --color-sand-300: #f5ece6;
            --color-sand-500: #EDDFD6; /* Main Sand Background */
            --color-bg-body: #faf8f6;  /* Main Body Background */
            --color-white: #ffffff;

            /* Spacing */
            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 2rem;
            --space-lg: 4rem;
            --space-xl: 6rem;

            /* Fonts */
            --font-serif: 'Alice', serif;
            --font-sans: 'Lato', sans-serif;
            --line-height-base: 1.8; /* Ruime regelafstand voor luxe gevoel */
        }

        body {
            font-family: var(--font-sans);
            color: var(--color-primary-500);
            background-color: var(--color-bg-body);
            line-height: var(--line-height-base);
            font-size: 18px; 
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        /* Headings: Alice */
        h1, h2, h3, h4 {
            font-family: var(--font-serif);
            color: var(--color-primary-900) !important;
            margin-top: 0;
            margin-bottom: var(--space-sm);
            line-height: 1.2;
        }

        h1 { font-size: 3.5rem; }
        h2 { font-size: 2.5rem; }
        h3 { font-size: 1.75rem; }

        /* Kleine kopjes (H4/H5) mogen soms strak in Lato */
        h5 {
            font-family: var(--font-sans);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.875rem;
            color: var(--color-accent-500); /* Roze accent kopjes */
            margin-bottom: var(--space-xs);
        }

       /* p {
            margin-bottom: var(--space-md);
            max-width: 70ch;
        }*/

        a {
            color: var(--color-accent-500) !important;
            text-decoration: none !important;
            transition: color 0.2s ease;
        }

        a:hover {
            color: var(--color-accent-700) !important;
        }


        .btn {
            display: inline-block;
            padding: 18px 48px !important; /* Veel padding */
            border-radius: 0px !important; /* Sharp corners */
            
            font-family: var(--font-sans) !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
            font-size: 0.9rem !important;
            
            text-decoration: none !important;
            border: 1px solid transparent !important;
            transition: all 0.3s ease;
            cursor: pointer;
            text-align: center;
        }

        /* Primary: Oud Roze */
        .btn-primary {
            background-color: var(--color-accent-500) !important;
            color: var(--color-white) !important;
        }

        .btn-primary:hover {
            background-color: var(--color-accent-700) !important;
            color: var(--color-white) !important;
        }

        /* Secondary: Antraciet */
        .btn-secondary {
            background-color: var(--color-primary-500) !important;
            color: var(--color-white) !important;
        }

        .btn-secondary:hover {
            background-color: var(--color-primary-900) !important;
        }

        /* Outline: Transparant met rand */
        .btn-outline {
            background-color: transparent !important;
            border: 1px solid var(--color-primary-500) !important;
            color: var(--color-primary-500) !important;
        }

        .btn-outline:hover {
            background-color: var(--color-primary-500) !important;
            color: var(--color-white) !important;
        }

        input[type="text"], input[type="email"], textarea {
            width: 100%;
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 0px; /* Sharp */
            background: var(--color-white);
            font-family: var(--font-sans);
            font-size: 1rem;
            margin-bottom: var(--space-sm);
            box-sizing: border-box;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--color-primary-500);
        }

em {
  font-family: var(--font-serif);
}
html {
  font-size: 16px !important;
}



/* --- LAYOUT CLASSES --- */

/* Grid voor Tekst + Foto (50/50) */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
}

/* Mobiel: onder elkaar */
@media (max-width: 768px) {
    .split-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Missie blok (gekleurde achtergrond) */
.mission-block {
    background-color: var(--color-sand-500, #EDDFD6); /* Fallback naar hex als var niet werkt */
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Zorgt dat hij even hoog is als de tekst ernaast in een grid */
}

.mission-text {
    font-family: var(--font-serif, 'Alice', serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-primary-500, #545454);
}

/* Dikgedrukte lead tekst voor intro's */
.text-lead {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: block;
}

/* Lijn tussen secties */
.divider {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 4rem 0;
}

/* --- BUTTON GROUP (Herbruikbaar) --- */
.button-group {
    display: flex;
    align-items: center;
    gap: 2rem; /* Ruimte tussen de knoppen */
    margin-top: 2rem;
    flex-wrap: wrap; /* Zorgt dat ze onder elkaar zakken als het scherm te smal is */
}

/* Mobiele aanpassing voor de button group (optioneel, voor als je ze altijd onder elkaar wilt op mobiel) */
@media (max-width: 991px) {

#mobile-menu .container {
  width: 100%;
}

.sticky {
  position: fixed;
  top: 10px;
  left: -10px;
  width: 100%;
  display: grid;
  margin: 0 10px;
  grid-template-columns: 1fr 0.2fr;
}
header > div.wrapper.sticky_menu.sticky_header .header {
background: white!important;
}
.header.full-width.sticky .logo {
padding: 10px !important;
  float: left;
    max-width: 125px !important;
}
.header.full-width.sticky div.holder {
  min-height: 75px !important;
}
.header.full-width.sticky {
  position: fixed;
  top: 0;
  left: -10px;
  width: 100%;
}
.header.full-width.sticky {
  position: fixed;
  top: 0;
  left: -10px;
  width: 100%;
background: white!important;
}


    .button-group {
        gap: 1.5rem;
    }
.btn.btn-primary {
  white-space: wrap;
}
}


[type="submit"], .nf-form-content input[type="submit"] {
  background-color: var(--color-accent-500) !important;
}

/*home*/

/* --- MAGAZINE INTRO BLOK --- */

.intro-section {
    position: relative;
    padding: 8rem 0; /* Veel ruimte boven en onder */
    background-color: #faf8f6; /* De gebroken wit van de klant */
    overflow: hidden; /* Zorgt dat overlappende elementen niet buiten beeld breken */
}

.container-editorial {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* De Grid Layout */
.intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Foto deel iets breder */
    column-gap: 6rem; /* Grote gap voor luxe uitstraling */
    align-items: center;
}

/* --- DE FOTO COLLAGE (LINKS) --- */
.collage-wrapper {
    position: relative;
    padding-bottom: 20px; /* Beetje ruimte voor de schaduw/rand */
}

/* De Grote Foto (Achter) */
.img-base {
    position: relative;
    width: 85%;
    aspect-ratio: 3/4; /* Portret verhouding */
    object-fit: cover;
    z-index: 1;
    display: block;
}

/* De Kleine Foto (Overlap) */
.img-overlay {
    position: absolute;
    bottom: -40px; /* Hangt eronder */
    right: 0;      /* Hangt rechts */
    width: 55%;
    aspect-ratio: 1/1; /* Vierkant */
    object-fit: cover;
    z-index: 2;
    border: 8px solid #faf8f6; /* Randkleur matcht achtergrond van de sectie */
}


footer div.column > h4 {
  border-bottom: 0px solid var(--color-sand-300);
}

/* --- DE TEKST (RECHTS) --- */
.intro-content {
    position: relative;
}

/* Het kleine labeltje erboven */
.sub-label {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px; /* Breder = meer luxe */
    color: #999;
    display: block;
    margin-bottom: 1.5rem;
    /* Font-weight is weggehaald zoals gevraagd */
}

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

/* Decoratief lijntje naast de titel (Magazine touch) */
.editorial-title::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background-color: #d9a6a1; /* Accentkleur */
}

.intro-text p {
    line-height: 1.8;
    color: #545454;
    margin-bottom: 1.5rem;
}

.button-group .text-link {
  margin-top: 0;
}

/* Linkje */
.text-link {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    color: #545454;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    transition: color 0.3s ease;
}

.text-link:hover {
    color: #d9a6a1;
}

@media (max-width: 991px) {
.section-menu__inner {
  padding: 0;
}

    .intro-section {
        padding: 4rem 0; /* Iets compacter op mobiel */
    }

    .intro-grid {
        grid-template-columns: 1fr; /* Alles onder elkaar */
        gap: 4rem;
    }

    /* Foto aanpassingen voor mobiel */
    .img-base {
        width: 90%; /* Iets breder */
        margin-left: 0;
    }

    .img-overlay {
        width: 50%;
        bottom: -20px;
        right: 10px;
    }

    /* Tekst aanpassingen */
    .editorial-title {
        font-size: 2.5rem; /* Kleiner op mobiel */
        padding-left: 0;
    }

    /* Lijntje weg of aanpassen op mobiel? Weg is vaak rustiger. */
    .editorial-title::before {
        display: none;
    }
}

/* --- WP AUTOP FIXES --- */

/* Zorgt dat de <p> tags die WP om de kaarten gooit genegeerd worden door het Grid */
.bento-grid > p {
    display: contents; 
}

/* Verbergt de random <br> tags die WP toevoegt */
.bento-grid br {
    display: none;
}

footer div.col-sm-24:nth-child(1) > div:nth-child(1) > h4:nth-child(1) {
  display: none;
}

/* Verbergt lege <p> tags die vaak ontstaan */
.bento-grid p:empty {
    display: none;
}
p:empty {
  display: none;
}
/* Reset margins van <p> tags die binnenin je kaartjes opduiken */
.card-content p {
    margin: 0;
    padding: 0;
}


/* --- TREATMENTS SECTION --- */

/* Header styling binnen de sectie */
.treatments-section .section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 4rem auto;
}

.treatments-section .section-label {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
  color: var(--color-accent-700);
    display: block;
    margin-bottom: 1rem;
}

.treatments-section .editorial-title {
    font-family: 'Alice', serif;
    font-size: 2.5rem; /* Iets kleiner gezet voor balans */
    margin: 0;
    color: #545454;
}

/* --- BENTO GRID LAYOUT --- */
.treatments-section .bento-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(2, 300px);
    gap: 20px;
}

/* --- DE KAARTEN --- */
.treatments-section .treatment-card {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    background-color: #EDDFD6;
    height: 100%; /* Zorg dat ze de grid hoogte pakken */
    width: 100%;
}

/* Grid Posities */
.treatments-section .span-col-tall {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* Achtergrond Foto */
.treatments-section .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.treatments-section .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

/* Hover Zoom */
.treatments-section .treatment-card:hover .card-bg {
    transform: scale(1.05);
}

/* Content Text Linksonder */
.treatments-section .card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem; /* Iets minder padding ivm WP p-tags */
    box-sizing: border-box; /* Belangrijk */
}

.treatments-section .card-title {
    font-family: 'Alice', serif;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
  color: #fff !important;
    line-height: 1.2;
}
.treatments-section {
  padding: var(--space-xl) 0;
}
.treatments-section .card-desc {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 1.5rem;
}

/* Fake Button Styling */
.treatments-section .card-link {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 2px;
    transition: all 0.3s;
}

.treatments-section .treatment-card:hover .card-link {
    border-bottom-color: #fff;
    gap: 12px;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .treatments-section .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .treatments-section .span-col-tall {
        grid-column: auto;
        grid-row: auto;
        height: 400px; /* Vaste hoogte voor de grote kaart op mobiel */
    }
    
    .treatments-section .treatment-card {
        min-height: 300px; /* Minimale hoogte voor de rest */
    }
}


/* --- WP AUTOP CLEANUP --- */
/* Verberg lege paragrafen die WP aanmaakt */
.treatments-section p:empty {
    display: none;
}

/* Zorg dat de <p> geen margin heeft als er per ongeluk toch iets in staat */
.bento-grid p {
    margin: 0;
    padding: 0;
}

/* --- DE STRUCTUUR FIX --- */

/* De kaart is nu een DIV, dus zorg dat hij relative is */
.treatments-section .treatment-card {
    position: relative; /* Essentieel voor de absolute link */
    display: block;
    overflow: hidden;
    background-color: #EDDFD6;
    height: 100%;
    width: 100%;
    /* Cursor pointer zodat mensen zien dat het klikbaar is, ook al is het een div */
    cursor: pointer; 
}

/* De onzichtbare link die eroverheen ligt */
.treatments-section .card-full-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Zorg dat hij bovenop ligt */
    opacity: 0;  /* Onzichtbaar */
}

/* --- HOVER EFFECT FIX --- */
/* Omdat de div nu de parent is, moeten we de hover op de div zetten */
.treatments-section .treatment-card:hover .card-bg {
    transform: scale(1.05);
}

.treatments-section .treatment-card:hover .card-link {
    border-bottom-color: #fff;
    gap: 12px;
}


/* --- PARTNERS SECTION --- */
.partners-section {
    padding: 3rem 0;
    background-color: #faf8f6; /* Zelfde lichte kleur als intro voor eenheid, of wit */
    border-top: 1px solid rgba(0,0,0,0.05); /* Heel subtiel lijntje bovenkant */
}

.partners-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* De Layout: Tekst Links | Logo's Rechts */
.partners-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

/* Het label "Wij werken met:" */
.partners-label {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #545454;
    white-space: nowrap; /* Zorgt dat de tekst niet breekt */
    margin: 0;
}

/* De Logo Rij */
.logo-row {
    display: flex;
    align-items: center;
  justify-content: space-between;
    flex-wrap: wrap; /* Mag breken naar volgende regel als het scherm te smal is */
    gap: 3rem; /* Ruimte tussen logo's */
    width: 100%;
}

/* De Logo's zelf */
.partner-logo {
    display: block;
    max-height: 40px; /* Zorgt dat alle logo's even hoog ogen */
    width: auto;
    object-fit: contain;
    
    /* Chique Grayscale effect */
  filter: brightness(0) invert(60%);
    opacity: 0.6;
    transition: all 0.3s ease;
}


/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .partners-layout {
        flex-direction: column; /* Onder elkaar */
        align-items: flex-start; /* Links uitlijnen */
        gap: 2rem;
    }

    .logo-row {
    justify-content: space-around;
        gap: 2rem;
    }
    
    .partner-logo {
        max-height: 35px; /* Iets kleiner op mobiel */
    }
}

/* --- REVIEWS SECTION --- */
.reviewer-info p {
  margin-bottom: 0;
}
.reviews-section {
    padding: 6rem 0;
    background-color: #faf8f6; /* Lichte achtergrond */
    overflow: hidden; /* Belangrijk voor slider */
}

.reviews-header {
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.sub-title {
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #545454;
    display: block;
    margin-top: 0.5rem;
}

/* --- SLIDER CONTAINER --- */
.reviews-slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 1rem 0; /* Ruimte voor schaduw */
}

.reviews-track {
    display: flex;
    gap: 2rem; /* Ruimte tussen kaarten */
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

/* --- REVIEW CARD --- */
.review-card {
    background: #ffffff;
    padding: 3rem;
    flex: 0 0 calc(50% - 1rem); /* 2 kaarten minus de gap */
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.05); /* Heel subtiel lijntje */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Stars */
.review-stars {
    color: #545454; /* Antraciet sterren, chiquer dan geel */
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

/* Quote Text */
.review-text {
    font-family: 'Alice', serif; /* Serif voor de quote voor magazine gevoel */
    font-size: 1.15rem;
    line-height: 1.6;
    color: #545454;
    font-style: italic;
    margin-bottom: 2rem;
    flex-grow: 1; /* Duwt de footer naar beneden */
}

/* --- FOOTER (AVATAR + NAAM) --- */
.review-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

/* Initials Avatar (Jouw verzoek) */
.avatar-circle {
    width: 50px;
    height: 50px;
    background-color: #d9a6a1; /* Accent Roze */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.reviewer-info h4 {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #545454;
}

.reviewer-info span {
    font-size: 0.85rem;
    color: #999;
    display: block;
}

/* --- CONTROLS (ARROWS & DOTS) --- */
.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding: 0 1rem; /* Lijn met content */
}

/* Dots (Links) */
.slider-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background-color: #545454;
}

/* Arrows (Rechts) */
.slider-arrows {
    display: flex;
    gap: 1rem;
}

.arrow-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #545454;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2rem;
    color: #545454;
}

.arrow-btn:hover {
    background-color: #545454;
    color: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .review-card {
        flex: 0 0 100%; /* 1 kaart op mobiel */
        padding: 2rem;
    }
    
    .slider-controls {
        padding: 0;
    }


/* Inline | https://sandracosmetics.nl/ */

header div.navbar-collapse ul li a {
  color: var(--color-accent-700) !important;
  font-weight: ;
  font-size: 20px;
  text-align: left;
}

header .social-media.visible-xs.visisble-sm {
  display: none !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 {
  color: var(--color-accent-500) !important;
  border-bottom: 1px solid var(--color-accent-500);
}

html.navbar-open body.mm-fullsize nav.type-fullsize button.navbar-toggle {
  color: var(--color-accent-700);
}
html, body {
  overflow-x: hidden !important;
}
.btn.btn-secondary {
  white-space: wrap;
}

}




/* 1. De Fade In Up basis */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  /* Cubic-bezier zorgt voor een hele natuurlijke 'ease-out' beweging */
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), 
              transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

/* De staat als hij in beeld is */
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Vertragingen voor als je meerdere dingen na elkaar wilt laten opkomen */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* 2. Parallax classes */
/* Zorgt dat het element relatief gepositioneerd is voor de JS verplaatsing */
.parallax-item {
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}



/* --- EDITORIAL HERO (FINAL) --- */

.hero-editorial-wrapper {
    background-color: var(--color-sand-500); /* Zand */
    padding: 6rem 2rem;
    min-height: 85vh; 
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.editorial-grid {
    display: grid;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    /* 12 kolommen grid voor desktop precisie */
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto; 
    gap: 2rem;
    align-items: start;
}

/* --- 1. DE TITEL (Bovenin) --- */
.hero-title-area {
    grid-column: 1 / span 8; 
    grid-row: 1;
    position: relative;
    z-index: 10;
    margin-bottom: -4rem; /* Overlap effect */
}

.small-label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
  color: var(--color-accent-500);
    display: block;
    margin-bottom: 1rem;
}

.big-headline {
    font-family: var(--font-serif); /* Alice */
    font-size: 5.5rem; 
    line-height: 0.9;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0;
}

/* De sierlijke naam */
.script-name {
    font-family: 'Pinyon Script', cursive;
    font-size: 6rem;
     color: var(--color-accent-700);
    position: absolute;
  bottom: -80px;
  left: 25vw;
    z-index: 11;
}

/* --- 2. DE FOTO'S --- */

/* Kleine foto links (Desktop: kolom 1-3) */
.img-small-wrapper {
    grid-column: 1 / span 3;
    grid-row: 2;
    margin-top: 4rem; 
    position: relative;
    z-index: 2;
}

.img-small {
    width: 100%;
    height: 350px;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Grote foto midden (Desktop: kolom 4-8) */
.img-large-wrapper {
    grid-column: 4 / span 5; 
    grid-row: 2;
    position: relative;
    z-index: 1;
}

.img-large {
    width: 100%;
    height: 600px;
    object-fit: cover;
}

/* --- 3. DE TEKST RECHTS --- */
.hero-text-content {
    grid-column: 10 / span 3; 
    grid-row: 2;
    padding-top: 6rem; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.side-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary-500);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.side-paragraph {
    font-family: var(--font-sans);
    line-height: 1.8;
    color: var(--color-primary-500);
    margin-bottom: 2.5rem;
}

/* Speciale donkere knop voor hier */
.btn-dark {
    background-color: var(--color-primary-500);
    color: var(--color-white);
    padding: 18px 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    transition: background 0.3s;
    font-weight: 700;
    font-family: var(--font-sans);
}

.btn-dark:hover {
    background-color: #333;
}

/* --- RESPONSIVE (< 1100px) --- */
/* Hier fixen we de foto's naast elkaar zoals in jouw voorbeeld */
@media (max-width: 1100px) {
    .hero-editorial-wrapper {
        padding: 3rem 0em;
        min-height: auto;
    }

    .editorial-grid {
        /* We maken een 2-koloms grid voor mobiel */
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto auto auto; /* Title, Photos, Text */
        gap: 1.5rem;
    }

    /* 1. Titel bovenaan over de volle breedte */
    .hero-title-area {
        grid-column: 1 / -1; /* Volle breedte */
        grid-row: 1;
        margin-bottom: 1rem;
        text-align: left;
    }

    .big-headline {
        font-size: 3.5rem;
    }

    .script-name {
        position: relative;
        left: 0;
        bottom: 0;
        display: block;
        margin-top: -25px;
    text-align: left;
    line-height: 1;
    }

    /* 2. Foto's NAAST ELKAAR op mobiel (Zoals je screenshot) */
    
    /* Links: Kleine foto */
    .img-small-wrapper {
        display: block; /* We tonen hem weer! */
        grid-column: 1 / 2; /* Linkerkant */
        grid-row: 2;
        margin-top: 2rem; /* Iets lager laten zakken voor speels effect */
    }
    
    .img-small {
        height: 250px; /* Iets kleiner op mobiel */
    }

    /* Rechts: Grote foto */
    .img-large-wrapper {
        grid-column: 2 / 3; /* Rechterkant */
        grid-row: 2;
        margin-top: 0;
    }

    .img-large {
        height: 300px; /* Iets groter dan de linker */
    }

    /* 3. Tekst onderaan over de volle breedte */
    .hero-text-content {
        grid-column: 1 / -1; /* Volle breedte */
        grid-row: 3;
        padding-top: 2rem;
        text-align: left;
        align-items: center; /* Centreer knop */
    }
}

.problems {
  padding: 8rem 0;
}
.hero-editorial-wrapper .container {
  width: 100%;
}







/*behandelingen*/



/* --- Component: Hero Magazine --- */

.hero-magazine {
    width: 100%;
    /* We gebruiken padding voor ruimte, achtergrond wordt door ACF/Sectie bepaald */
    padding: var(--space-lg) 0;
}

.hero-magazine__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Mobiel eerst (onder de 992px) */
.hero-magazine__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2; /* Op mobiel: eerst afbeelding (optioneel), of tekst. 
                 Standaard magazine: Tekst boven, foto onder? 
                 Als je foto eerst wil, zet order op 2 en media op 1.
                 Nu staat tekst (2) onder foto (indien media order 1 heeft).
                 Laten we 'natural flow' houden voor mobiel (tekst eerst). */
    order: 1;
}

.hero-magazine__media {
    order: 2;
    width: 100%;
}

.hero-magazine__figure {
    margin: 0;
    width: 100%;
    height: auto;
    display: block;
}

.hero-magazine__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Aspect ratio voor mooie magazine look */
    aspect-ratio: 4 / 3; 
}

/* Typografie en details (globaal in te zetten) */
.hero-magazine__back-link {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-primary-500);
    text-decoration: none;
    margin-bottom: var(--space-md);
    display: inline-block;
    font-weight: 600;
}

.hero-magazine__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.hero-magazine__tag {
    background-color: var(--color-sand-500); /* Zandkleur label */
    padding: 0.25em 0.75em;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-primary-500);
}

.hero-magazine__meta {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-primary-700);
}

.hero-magazine__title {
    /* Font family komt uit je global H1, maar hier specifiek forceren voor magazine look */
    font-family: var(--font-serif);
    font-size: 2.5rem; /* Lekker groot */
    line-height: 1.2;
    color: var(--color-primary-900);
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xs);
}

.hero-magazine__intro {
    margin-bottom: var(--space-md);
    max-width: 50ch; /* Zorgt voor fijne leesbreedte */
    color: var(--color-primary-500);
    /* Font settings erven van body */
}

/* Button styling (minimalistisch) */
.hero-magazine__btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color-accent-500);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.hero-magazine__btn:hover {
    background-color: var(--color-accent-700);
}

/* --- Desktop Styles (>= 992px) --- */
@media (min-width: 992px) {

header .wrapper .container {
  width: 100%;
  max-width: 1500px;
}

header div.header.full-width div.wrapper img.logo {
  max-width: 200px;
}
#primary_navigation {
  text-align: right;
}

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: var(--color-primary-500) !important;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

    .hero-magazine__inner {
        display: grid;
        /* Magazine verhouding: tekst iets smaller (5 delen), foto breder (7 delen) of 50/50 */
        grid-template-columns: 5fr 7fr; 
        gap: var(--space-xl);
        align-items: center;
    }

    .hero-magazine__content {
        padding-right: var(--space-md);
    }
    
    .hero-magazine__title {
        font-size: 3.5rem; /* Nog groter op desktop */
    }

    .hero-magazine__image {
        /* Op desktop mag de foto hoger zijn */
        aspect-ratio: 16 / 9; 
        min-height: 400px;
    }
}



/* --- Component: Split Section (Magazine Layout) --- */

.section-split {
    background-color: var(--color-white);
    padding: var(--space-xl) 0; /* Ruime padding boven/onder */
}

.section-split__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* --- Linker kolom (Head) --- */
.section-split__label {
 /*   display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-500);*/
    margin-bottom: var(--space-xs);
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #999;
  display: block;
  margin-bottom: 1.5rem;
}

.section-split__title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--color-primary-900);
    max-width: 15ch; /* Zorgt dat de titel mooi breekt op desktop */
}

/* --- Rechter kolom (Body) --- */
.section-split__intro p {
    font-family: var(--font-sans);
    color: var(--color-primary-500);
    margin-bottom: 1em;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* --- Feature Grid (De icoon blokjes) --- */
.feature-grid {
    display: grid;
    /* Mobiel: onder elkaar */
    grid-template-columns: 1fr; 
    gap: var(--space-md);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-primary-200); /* Dun lijntje boven features */
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.feature-item__icon {
    /* Kleur van het icoon: Accent roze of donkergrijs */
    color: var(--color-primary-900); 
    flex-shrink: 0;
    margin-top: 4px; /* Visueel uitlijnen met titel */
}

.feature-item__title {
    font-family: var(--font-serif); /* Of Sans, wat jij mooier vindt */
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary-900);
    margin-bottom: 0.25rem;
}

.feature-item__text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-primary-500);
    margin: 0;
}

/* Tekst linkje (zoals 'Meer >') */
.btn-text-link {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-primary-900);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.btn-text-link:hover {
    border-bottom-color: var(--color-accent-500);
}

/* --- Desktop Styles (>= 992px) --- */
@media (min-width: 992px) {
    .section-split__inner {
        display: grid;
        /* Verhouding: Titel 4 delen, Content 8 delen (ongeveer 1/3 vs 2/3) */
        grid-template-columns: 4fr 8fr; 
        gap: var(--space-xl);
    }

    .feature-grid {
        /* Desktop: features naast elkaar */
        grid-template-columns: 1fr 1fr; 
        gap: var(--space-lg);
    }
}

/* --- Component: Section Steps (Visual + List) --- */

.section-steps {
    /* Optie: Maak deze licht zandkleurig voor afwisseling met vorige witte blok */
    background-color: var(--color-sand-100); 
    padding: var(--space-xl) 0;
}

.section-steps__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* --- Media Kolom (Links op desktop) --- */
.section-steps__media {
    width: 100%;
    order: 1; /* Op mobiel eerst de foto? Of tekst? Zet op 2 voor tekst eerst. */
}

.section-steps__figure {
    margin: 0;
    height: 100%;
}

.section-steps__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1; /* Vierkant op mobiel is vaak mooi, of 4/5 */
    border-radius: 0px; /* Klein beetje zachtheid */
}

/* --- Content Kolom (Rechts) --- */
.section-steps__content {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-steps__title {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-primary-900) !important;
    margin-bottom: var(--space-sm);
}

.section-steps__intro {
    font-family: var(--font-sans);
    color: var(--color-primary-500);
    margin-bottom: var(--space-md);
}

/* --- De Lijst --- */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.step-item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.step-item__icon {
    flex-shrink: 0;
    color: var(--color-primary-900); /* Of accent roze: var(--color-accent-500) */
    background-color: var(--color-white);
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Rondje erachter */
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-item__body {
    padding-top: var(--space-xs);
}

.step-item__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-primary-900);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.step-item__text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-primary-500);
    line-height: 1.6;
    margin: 0;
}

/* --- Desktop Styles (>= 992px) --- */
@media (min-width: 992px) {
    .section-steps__inner {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 verdeling */
        gap: var(--space-xl);
        align-items: center;
    }

    .section-steps__media {
        /* Op desktop staat de foto links (grid kolom 1) */
        order: 1; 
        height: 100%;
    }
    
    .section-steps__content {
        order: 2;
        padding-left: var(--space-md); /* Beetje lucht naar de foto toe */
    }

    .section-steps__image {
        aspect-ratio: 3 / 4; /* Staand formaat (portrait) past mooi naast een lijstje */
        height: 100%;
    }
}


.feature-item__icon i,
.step-item__icon i {
    font-size: 1.5rem; /* Of groter naar wens */
  color: var(--color-accent-500);
}


/* --- Component: Result & CTA --- */

.section-result {
    background-color: var(--color-white);
    padding: var(--space-xl) 0;
    text-align: center; /* Alles gecentreerd voor focus */
}

.section-result__inner {
    max-width: 800px; /* Niet te breed maken, leest fijner */
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section-result__title {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  color: var(--color-accent-500) !important;
    margin-bottom: var(--space-md);
}

.section-result__text {
    font-family: var(--font-serif);
    font-size: 1.5rem; /* Lekker groot, als een quote */
    line-height: 1.6;
    color: var(--color-primary-900);
    margin-bottom: var(--space-md);
    font-style: italic; /* Geeft het dat 'magazine quote' gevoel */
}

.section-result__divider {
    width: 60px;
    height: 2px;
    background-color: var(--color-accent-500);
    margin: 0 auto var(--space-md) auto;
}

.section-result__cta p {
    font-family: var(--font-sans);
    color: var(--color-primary-500);
    margin-bottom: var(--space-sm);
}

/* --- Component: Menu List (Prijzen) --- */

.section-menu {
   /* background-color: var(--color-white);*/
    padding: var(--space-xl) 0;
}

.section-menu__inner {
    max-width: 800px; /* Mooie smalle kolom voor leesbaarheid */
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section-menu__header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section-menu__title {
    font-family: var(--font-serif);
    font-size: 2rem;
  color: var(--color-primary-900) !important;
    margin-bottom: var(--space-xs);
}

.section-menu__intro {
    font-family: var(--font-sans);
    color: var(--color-primary-500);
}

/* De Lijst */
.menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.menu-item {
    display: flex;
    flex-direction: column;
}

.menu-item__head {
    display: flex;
    align-items: baseline; /* Zorgt dat tekst en puntjes netjes op 1 lijn staan */
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.menu-item__name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-primary-900);
    font-weight: 600;
    flex-shrink: 0; /* Naam mag niet krimpen */
}

/* De stippellijn tussen naam en prijs */
.menu-item__dots {
    flex-grow: 1;
    border-bottom: 1px dotted var(--color-primary-200);
    margin: 0 var(--space-sm);
    position: relative;
    top: -5px; /* Beetje finetunen zodat het op de juiste hoogte zit */
}

.menu-item__price {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-accent-500); /* Prijs in accentkleur */
    flex-shrink: 0;
}

.menu-item__desc {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-primary-500);
    line-height: 1.5;
    max-width: 90%; /* Zorgt dat regels niet te lang worden */
}




/* --- Component: Treatment Grid --- */

.section-grid {
    background-color: var(--color-sand-100); /* Lichte achtergrond */
    padding: var(--space-xl) 0;
}

.section-grid__inner {
    /* Container breedte */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.treatment-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobiel: 1 kolom */
    gap: var(--space-md);
}

/* De Kaart */
.treatment-card {
    background-color: var(--color-white);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    height: 100%; /* Zorgt dat alle kaarten even hoog zijn */
}

.treatment-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.treatment-card__media {
    width: 100%;
    aspect-ratio: 3 / 2; /* Liggend formaat foto */
    overflow: hidden;
}

.treatment-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.treatment-card__content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Zorgt dat de content de ruimte vult */
}

.treatment-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-primary-900);
    margin-bottom: var(--space-xs);
    transition: color 0.3s ease;
}

.treatment-card__desc {
    font-family: var(--font-sans);
    font-size: 0.95rem;
  font-weight: 300;
    color: var(--color-primary-500);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex-grow: 1; /* Duwt de 'lees meer' knop naar beneden */
}

/* Hover Effecten */
.treatment-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: var(--color-sand-300);
}

.treatment-card:hover .treatment-card__image {
    transform: scale(1.05); /* Foto zoomt iets in */
}

.treatment-card:hover .treatment-card__title {
    color: var(--color-accent-500); /* Titel wordt roze */
}

/* Desktop Styles */
@media (min-width: 768px) {
    .treatment-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 kolommen */
        gap: var(--space-lg);
    }
}

@media (min-width: 992px) {
    .treatment-grid {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 kolommen */
    }
}

.btn.text-link {
  padding: 0 !important;
  background: transparent !important;
  color: var(--color-accent-700) !important;
}
.btn.text-link:hover {
opacity: 0.7;
}


html {
scroll-behavior: smooth;
}

.btn.text-link {
  white-space: wrap;
}


/*--footer--*/


/* --- WhatsApp Button (Fixed rechtsonder) --- */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  background-color: var(--color-accent-500);
  color: #FFF !important;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E !important;
  background-color: var(--color-accent-100) !important;
    transform: scale(1.1);
}

.whatsapp-icon {
    width: 35px;
    height: 35px;
    fill: white;
}

footer .container .row::before {
  display: none;
}

.fab.fa-whatsapp:hover {
  color: #fff;
}

footer div.social-media ul li a {
  background: var(--color-accent-700) !important;
}

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

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

footer div.socket a, footer div.socket a:hover {
  font-weight: normal;
}

footer {
  padding-top: var(--space-xl);
}


.wpcf7-submit, .woocommerce span.onsale, .woocommerce a.button, .woocommerce .button, [type="submit"], .nf-form-content input[type="submit"] {
  background: var(--color-accent-500) !important;
  border: none !important;
  border-radius: 0 !imporant;
}
.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-accent-700) !important;
  border: none !important;
  border-radius: 0 !imporant;
}


.nf-form-content .list-select-wrap .nf-field-element > div, .nf-form-content input:not([type="button"]), .nf-form-content textarea {
  border-radius: 0px !important;
}