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

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

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

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

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

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

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

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

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

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

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

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

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

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #eacbcb !important;
  }

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

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



  header div.header {
  background-color: rgba(255, 249, 246, 1) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(255, 249, 246) !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://beautybyjay.nl/wp-content/uploads/sites/536/2025/12/jay-header-1920x921.jpg');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }


    header .sticky_menu_small div.header {
    background-color: rgba(255, 255, 255, 1) !important;
    }
  

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

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

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

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





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

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

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

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(255, 249, 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: #eacbcb !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 #ecd1d1;
  }

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


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

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

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

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

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

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

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

  footer div.socket,
  .footer-sticky {
  background: #e8c6c6 !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: #171313 !important;
  }

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

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

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

  /* 1. Global Variables (De Bron van Waarheid) */
:root {
    --color-bg-light: #FFF7F7;      /* Aangeleverde lichte kleur */
    --color-accent-pink: #E8C6C6;   /* Aangeleverde accentkleur */
    --color-text-main: #4A3B3B;     /* Zelf gekozen donkere contrastkleur */
    --color-white: #FFFFFF;
    
    /* Fonts */
    --font-heading: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
}

/* 2. Typography Overrides */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--color-text-main) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

body, p, li, span, div {
    font-family: var(--font-body) !important;
    color: var(--color-text-main) !important;
    line-height: 1.7 !important;
}

/* Links (Algemeen) */
a {
    color: var(--color-text-main) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

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

/* 3. Button Styling (.btn & .btn-primary) */
.btn {
    display: inline-block !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    font-size: 14px !important;
    border: 1px solid transparent !important; 
}

.col-md-32.col-md-offset-8 .btn.btn-primary:hover {
  background: white !important;
}

/* Primary Button (De Roze Knop) */
.btn-primary {
    background-color: var(--color-accent-pink) !important;
    color: var(--color-text-main) !important;
    border-color: var(--color-accent-pink) !important;
}

/* Hover Effect */
.btn-primary:hover {
    background-color: transparent !important;
    color: var(--color-text-main) !important;
    border-color: var(--color-text-main) !important; /* Rand wordt donker */
    transform: translateY(-2px); 
}




/* Section Spacing */
.section-treatments {
    padding: 80px 0;
    background-color: var(--color-bg-light); /* #FFF7F7 */
}


/* --- Split Header Styling --- */
.treatments-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Zorgt dat de tekst rechts onderin uitlijnt met de titel */
    margin-bottom: 60px;
    gap: 40px;
    flex-wrap: wrap;
}

.header-left {
    flex: 1 1 400px; /* Neemt ruimte in, maar mag krimpen */
}

.header-right {
    flex: 1 1 400px;
    max-width: 500px; /* Voorkomt dat de tekst te breed wordt om te lezen */
}

.subtitle {
    display: block;
    font-family: var(--font-body) !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
  font-weight: 300;
    margin-bottom: 10px;
    color: var(--color-text-light);
}

.header-left h2 {
    margin-bottom: 0; /* Margin reset voor strakke uitlijning */
    font-size: 36px; /* Lekker groot */
}

/* --- Grid Styling --- */
.treatments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 kolommen */
    gap: 40px; /* Ruimte tussen de kaarten */
}

/* Card Styling */
.treatment-card {
    display: flex;
    flex-direction: column;
}

.card-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* Houdt de afbeeldingen altijd in dezelfde verhouding */
    background-color: #ddd; /* Fallback kleur */
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 4px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.card-content h3 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-content p {
    font-size: 15px;
    margin-bottom: 20px;
    color: var(--color-text-light); /* Iets lichter voor hiërarchie */
}

/* De 'Ontdekken' link styling */
.text-link {
    font-family: var(--font-body) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0; /* Reset */
}

.text-link .arrow {
    transition: transform 0.3s ease;
}

.text-link:hover .arrow {
    transform: translateX(5px); /* Pijltje schuift op bij hover */
}

/* --- Responsive aanpassingen --- */
@media (max-width: 900px) {
    .treatments-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolommen op tablets */
    }
}

@media (max-width: 600px) {
    .treatments-grid {
        grid-template-columns: 1fr; /* 1 kolom op mobiel */
    }
    
    .treatments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}



/* Section Spacing */
.section-about {
    padding: 100px 0;
    background-color: var(--color-white); /* Wit breekt lekker met de lichtroze vorige sectie */
}

/* Layout Grid */
.about-wrapper {
    display: flex;
    align-items: center; /* Zorgt dat tekst verticaal in het midden van de foto staat */
    gap: 80px; /* Lekker veel witruimte tussen foto en tekst */
}

/* Image Styling */
.about-image {
    flex: 1;
    position: relative;
}

header > div.wrapper::after {
  background-position: top;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    box-shadow: 20px 20px 0px var(--color-bg-light); /* Speels effect: blokje achter de foto */
}

/* Content Styling */
.about-content {
    flex: 1;
}

.about-content h2 {
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 1.3;
}

.about-content p {
    margin-bottom: 20px;
    color: var(--color-text-light);
}

/* --- De 'Vinkjes' Lijst --- */
.about-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.about-list li {
    position: relative;
    padding-left: 35px; /* Ruimte voor het icoontje */
    margin-bottom: 15px;
    font-weight: 500;
    font-family: var(--font-body) !important;
}

/* Het vinkje (gemaakt met CSS square) */
.about-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px; /* Uitlijnen met tekst */
    width: 16px;
    height: 16px;
    background-color: var(--color-bg-light); /* Lichte achtergrond van vinkje */
    border-radius: 4px;
}

/* Optioneel: Een echt vinkje erin (of gewoon een gekleurd blokje) */
.about-list li::after {
    content: '✓'; 
    position: absolute;
    left: 4px;
    top: 2px;
    font-size: 12px;
    color: var(--color-text-main);
    font-weight: bold;
}

/* Knoppen naast elkaar */
.about-buttons {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .about-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .about-image img {
        box-shadow: 10px 10px 0px var(--color-bg-light); /* Iets kleiner effect op tablet */
    }
}



/* =========================================
   Reviews Slider Styling
   ========================================= */

/* 1. Sectie Basis */
.slider.block2 {
    background-color: var(--color-bg-light) !important; /* #FFF7F7 */
    padding: 80px 0 !important;
}

/* Forceer centreren (oogt luxer voor quotes) */
.slider.block2 .container {
    text-align: center !important;
    max-width: 800px !important; /* Smal houden voor leesbaarheid */
    margin: 0 auto !important;
}

/* 2. Het Grote Quote Teken (Pseudo-element) */
.slide--text > div::before {
    content: '“';              /* Het aanhalingsteken */
    font-family: 'Times New Roman', serif !important; /* Klassiek font voor mooi krulletje */
    font-size: 100px !important;
    line-height: 1 !important;
    color: var(--color-accent-pink) !important; /* #E8C6C6 */
    display: block !important;
    height: 60px !important;    /* Voorkomt dat het te veel ruimte inneemt */
    opacity: 0.6 !important;
    margin-bottom: 20px !important;
}

/* 3. Review Tekst (De inhoud) */
.slide--text p {
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: var(--color-text-main) !important;
    font-style: italic !important; /* Maakt het net wat persoonlijker */
    margin-bottom: 24px !important;
}

/* 4. Naam van de klant */
/* We targeten de laatste paragraaf, want daar staat de naam */
.slide--text p:last-of-type {
    font-family: var(--font-heading) !important; /* Cinzel */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-style: normal !important; /* Naam niet cursief */
    letter-spacing: 2px !important;
    color: var(--color-text-light) !important;
}

/* Verwijder lege H3's die de plugin genereert */
.slide--text h3 {
    display: none !important;
}

/* 5. De Bolletjes (Slick Dots) Styling */
.slick-dots {
    position: relative !important;
    bottom: -30px !important;
}

.slick-dots li {
    margin: 0 5px !important;
}

/* Inactief bolletje */
.slick-dots li button:before {
    font-size: 12px !important;
    color: var(--color-accent-pink) !important;
    opacity: 0.5 !important;
}

/* Actief bolletje */
.slick-dots li.slick-active button:before {
    color: var(--color-text-main) !important;
    opacity: 1 !important;
}

/* =========================================
   Footer Styling - The Grand Finale
   ========================================= */

/* 1. Hoofd Footer Container */
footer {
    background-color: var(--color-text-main) !important; /* #4A3B3B - Donkerbruin */
    color: #FFFFFF !important; /* Witte tekst voor leesbaarheid */
    padding-top: 60px !important;
    padding-bottom: 20px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
}

/* 2. Koppen (Cinzel + Roze) */
footer h4 {
    color: var(--color-accent-pink) !important; /* #E8C6C6 */
    font-family: var(--font-heading) !important;
    font-size: 18px !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

.header-right {
text-align: right;
}
.header-right .btn {
margin-top: 0 !important;
}

/* 3. Linkjes & Tekst */
footer a, 
footer li, 
footer p, 
footer span {
    color: #efefef !important; /* Off-white, leest rustiger dan fel wit */
    text-decoration: none !important;
    line-height: 1.8 !important;
    transition: color 0.3s ease !important;
}

/* Hover effect op linkjes */
footer a:hover {
    color: var(--color-accent-pink) !important;
}

/* Lijstjes netjes uitlijnen */
footer ul {
    padding-left: 0 !important;
    list-style: none !important;
}

footer li {
    margin-bottom: 8px !important;
}

/* 4. Openingstijden Tabel Strak trekken */
table.opening_hours {
    width: 100% !important;
    max-width: 300px !important; /* Voorkomt dat het te breed wordt */
    border-collapse: collapse !important;
}

table.opening_hours td {
    padding: 4px 0 !important;
    border: none !important; /* Weg met die lijntjes */
    vertical-align: top !important;
    color: #efefef !important;
}

/* Eerste kolom (Dagen) breedte geven */
table.opening_hours td:first-child {
    width: 110px !important;
    font-weight: 500 !important;
}

/* 5. Social Media Icons */
.social-media a {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(255,255,255,0.2) !important; /* Subtiel randje */
    border-radius: 50% !important; /* Rondje maken */
    font-size: 18px !important;
    margin-right: 10px !important;
}

.social-media a:hover {
    background-color: var(--color-accent-pink) !important;
    border-color: var(--color-accent-pink) !important;
    color: var(--color-text-main) !important; /* Icoon wordt donker bij hover */
}

/* 6. Socket (Copyright balk onderin) */
.socket {
    margin-top: 50px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important; /* Heel subtiel lijntje */
    font-size: 12px !important;
    opacity: 0.7 !important;
}

.socket img {
    height: 20px !important; /* Logo van netbeauty niet te groot */
    vertical-align: middle !important;
    margin-left: 5px !important;
}
footer div.socket, .footer-sticky {
  background: var(--color-text-main) !important;
}

.col-md-32.col-md-offset-8 {
  margin-left: 0;
  text-align: left;
}
@media only screen and (min-width: 992px) {


  header div.header div.holder {
    height: auto;
  }

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

  nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: var(--color-text-main) !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 {
  background: none;
  color: var(--color-text-main) !important;
}
header > div.wrapper div.wrapper img.logo {
  padding: 12px;
}
  body.home header > div.wrapper {
    min-height: 500px;
    height: 92vh;
  }
  header > div.wrapper .header__content {
    transform: translate3d(0, -110px, 0);
  }
nav.navbar-default div.navbar-collapse ul.navbar-nav > li a:hover {
    color: var(--color-accent-pink) !important;
  }
section.intro {
  padding: 100px 0;
}
}
.col-md-32.col-md-offset-8 .btn.btn-primary {
  margin: 16px 0 0 0;
}






/* =========================================
   Archive Page: Behandelingen
   ========================================= */

/* 1. Sectie Basis */
section.archive.treatments {
    background-color: var(--color-bg-light) !important; /* #FFF7F7 */
    padding: 60px 0 !important;
}

/* 2. Breadcrumbs (Het kruimelpad bovenin) */
.breadcrumbs {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-text-light) !important;
    margin-bottom: 40px !important;
}

.breadcrumbs a {
    color: var(--color-text-light) !important;
}

/* 3. Header Styling (Gecentreerd & Luxe) */
.page-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 60px auto !important;
    border-bottom: none !important; /* Haalt standaard lijntjes weg */
}

.page-header h1 {
    font-size: 42px !important;
    margin-bottom: 20px !important;
    color: var(--color-text-main) !important;
}

/* De subtitel 'Mooi zoals jij bent' */
.page-header p em {
    font-family: var(--font-heading) !important; /* Cinzel */
    font-size: 22px !important;
    color: var(--color-accent-pink) !important;
    font-style: normal !important; /* Cinzel is al sierlijk genoeg */
    display: block !important;
    margin-bottom: 20px !important;
}

.page-header p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: var(--color-text-main) !important;
}

/* 4. Treatments Grid Items */
.treatments .item {
    margin-bottom: 50px !important;
    background: transparent !important;
    height: auto !important; /* Overschrijft de inline height uit de HTML */
    transition: transform 0.3s ease !important;
}

/* Hover effectje: kaartje komt iets omhoog */
.treatments .item:hover {
    transform: translateY(-5px) !important;
}

/* 5. Afbeeldingen: Van Rondje naar Rechthoek */
.treatments .item img.img-circle {
    border-radius: 4px !important; /* Onze standaard radius */
    width: 100% !important;
    height: 350px !important; /* Forceer gelijke hoogte */
    object-fit: cover !important; /* Zorgt dat de foto niet uitrekt/vervormt */
    box-shadow: none !important; /* Geen schaduwen */
    margin-bottom: 20px !important;
    filter: brightness(0.95) !important; /* Ietsje gedempt voor sfeer */
    transition: filter 0.3s ease !important;
}

.treatments .item:hover img.img-circle {
    filter: brightness(1.05) !important; /* Licht op bij hover */
}

/* 6. Titels onder de foto's */
.treatments .item h4 {
    font-family: var(--font-heading) !important;
    font-size: 18px !important;
    color: var(--color-text-main) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 10px !important;
}

/* Linkjes rondom de titels clean houden */
.treatments .item a {
    text-decoration: none !important;
}




/* =========================================
   Single Treatment Page Styling
   ========================================= */

/* 1. Sectie Basis */
section.page {
/*    background-color: var(--color-bg-light) !important; */
    padding: 60px 0 100px 0 !important;
}

/* 2. Breadcrumbs (Consistent houden) */
.breadcrumbs {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-text-light) !important;
    margin-bottom: 20px !important;
    text-align: center !important; /* Centreren staat chique boven de titel */
}

.breadcrumbs a {
    color: var(--color-text-light) !important;
}

/* 3. Titel (H1) */
/* Ook al zei je dat page-header weg mocht, hij zit in de HTML. 
   We stylen hem voor de zekerheid, of verbergen hem als je dat liever hebt via display:none */
.page-header h1 {
    font-family: var(--font-heading) !important;
    color: var(--color-text-main) !important;
    font-size: 42px !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    text-transform: uppercase !important;
}

/* 4. Content Container (Magazine Look) */
/* We beperken de breedte van de tekst voor betere leesbaarheid */
.content {
    max-width: 800px !important;
    margin: 0 auto !important; /* Centreren */
  display: block !important;
}

/* Tekst en Paragrafen */
.content p {
    font-family: var(--font-body) !important;
    color: var(--color-text-main) !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
    font-size: 16px !important;
}

/* Tussenkopjes (H3 - Prijzen etc) */
.content h3 {
    font-family: var(--font-heading) !important;
    color: var(--color-accent-pink) !important; /* Roze accent */
    font-size: 24px !important;
    text-transform: uppercase !important;
    margin-top: 50px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    border-bottom: 1px solid #E8C6C6 !important; /* Subtiel lijntje eronder */
    padding-bottom: 10px !important;
    display: inline-block !important; /* Zorgt dat lijntje niet hele breedte pakt */
    width: 100% !important;
}

/* 5. Lijstjes (Prijzen en opties) */
.content ul {
    list-style: none !important; /* Standaard bolletjes weg */
    padding-left: 0 !important;
    margin-bottom: 30px !important;
}

.content ul li, .content ol li {
    font-family: var(--font-body) !important;
    color: var(--color-text-main) !important;
    padding: 8px 0 8px 25px !important; /* Ruimte voor eigen bolletje */
    position: relative !important;
    border-bottom: 1px solid rgba(74, 59, 59, 0.05) !important; /* Heel licht lijntje tussen items */
}

/* Custom Roze Bolletje */
.content ul li::before {
    content: '•'; /* Of gebruik '✓' als je vinkjes wilt */
    color: var(--color-accent-pink) !important;
    font-size: 24px !important;
    position: absolute !important;
    left: 0 !important;

    line-height: 1 !important;
}

.content strong {
    font-weight: 600 !important;
    color: var(--color-text-main) !important;
}

/* =========================================
   6. Gallery Styling (De grote make-over)
   ========================================= */

/* Reset de oude WordPress floats */
.gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 kolommen */
    gap: 15px !important;
    width: 100% !important;
    margin: 40px 0 !important;
}

.gallery-item {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Afbeeldingen uniform maken */
.gallery-icon img {
    width: 100% !important;
    height: 250px !important; /* Vaste hoogte zorgt voor strak grid */
    object-fit: cover !important; /* Zorgt dat foto niet vervormt */
    border-radius: 4px !important;
    border: none !important; /* Weg met die lelijke WP borders */
    transition: transform 0.3s ease !important;
}

/* Hover effect op foto's */
.gallery-icon img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Responsive Gallery */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 kolommen op mobiel */
    }
}


/* =========================================
   Contact Pagina Styling
   ========================================= */

/* 1. Basis Layout */
section.contact {

    padding: 60px 0 80px 0 !important;
}

/* Titel en intro tekst */
section.contact .page-header h1 {
    font-family: var(--font-heading) !important;
    color: var(--color-text-main) !important;
    text-align: left !important; /* Op deze pagina staat links uitlijnen vaak netter boven de tekst */
    margin-bottom: 30px !important;
}

section.contact p {
    margin-bottom: 20px !important;
    color: var(--color-text-main) !important;
    font-size: 16px !important;
}

/* =========================================
   2. Ninja Forms Styling (De grote schoonmaak)
   ========================================= */

/* Verwijder standaard lelijke randen en achtergronden */
.nf-form-cont {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Labels */
.nf-field-label label {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--color-text-main) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

/* Input velden (Tekstvakken) */
.ninja-forms-field {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.1) !important; /* Heel subtiel randje */
    border-radius: 4px !important;
    padding: 12px 15px !important;
    font-family: var(--font-body) !important;
    color: var(--color-text-main) !important;
    transition: all 0.3s ease !important;
    height: auto !important; /* Voorkomt gekke hoogtes */
}

/* Focus effect (Als je erin klikt) */
.ninja-forms-field:focus {
    border-color: var(--color-accent-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(232, 198, 198, 0.2) !important; /* Roze gloed */
}

/* Submit Button (Gelijktrekken met de rest) */
/* Ninja forms gebruikt inputs, geen buttons, dus we moeten specifiek zijn */
input[type="submit"].ninja-forms-field {
    background-color: var(--color-accent-pink) !important;
    color: var(--color-text-main) !important;
    border: 1px solid var(--color-accent-pink) !important;
    font-family: var(--font-heading) !important; /* Cinzel */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 40px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: auto !important; /* Niet beeldvullend */
    display: inline-block !important;
}

input[type="submit"].ninja-forms-field:hover {
    background-color: transparent !important;
    border-color: var(--color-text-main) !important;
    color: var(--color-text-main) !important;
}


.contact-privacy a {
    color: var(--color-text-main) !important;
    text-decoration: underline !important;
}

/* Foutmeldingen styling */
.nf-error-msg {
    color: #d9534f !important; /* Rood, maar niet te fel */
    font-size: 12px !important;
    margin-top: 5px !important;
}

/* =========================================
   3. Sidebar Styling (Kaarten)
   ========================================= */

/* We maken van elk blok een witte 'kaart' */
aside .block {
    background-color: #FFFFFF !important;
    padding: 30px !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; /* Zeer zachte schaduw */
    margin-bottom: 30px !important;
    border: 1px solid rgba(0,0,0,0.02) !important;
}

/* Koppen in de sidebar */
aside .head h4 {
    font-family: var(--font-heading) !important;
    color: var(--color-accent-pink) !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
}

/* Lijstjes styling */
aside ul.list-unstyled li {
    margin-bottom: 12px !important;
    color: var(--color-text-main) !important;
    font-size: 14px !important;
    display: flex !important; /* Zorgt voor uitlijning */
    align-items: center !important;
}

aside ul.list-unstyled li a {
    color: var(--color-text-main) !important;
    font-weight: 500 !important;
}

/* Openingstijden Tabel in Sidebar */
aside table.opening_hours {
    width: 100% !important;
}

aside table.opening_hours td {
    padding: 6px 0 !important;
    color: var(--color-text-main) !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important; /* Heel licht lijntje */
}

aside table.opening_hours tr:last-child td {
    border-bottom: none !important;
}

aside table.opening_hours td:first-child {
    font-weight: 600 !important;
    width: 40% !important;
}

/* Google Maps Container */
.googlemap {
    border-radius: 4px !important;
    overflow: hidden !important; /* Zorgt dat de kaart niet buiten de ronde hoekjes komt */
    height: 300px !important; /* Vaste hoogte voor netheid */
}

.js-map {
    height: 100% !important;
}

/* =========================================
   Responsive Fixes
   ========================================= */
@media (max-width: 991px) {

footer div.socket {
  padding-bottom: 75px;
}
.header-left {
  flex: 1;
}
.header-right {
  flex: 1;
}
header > div.wrapper {
  min-height: 370px;
}

.treatments .item img.img-circle {
  height: 250px !important;
}

.page-header h1 {
  font-size: 32px !important;
}
header .type-fullsize .navbar-collapse {
  left: 15px;
}
    /* Op mobiel/tablet de sidebar wat ruimte geven aan de bovenkant */
    aside {
        margin-top: 60px !important;
    }
html.navbar-open body.mm-fullsize nav.type-fullsize button.navbar-toggle {
  color: var(--color-accent-pink);
}
header div.navbar-collapse ul li a {
  color: var(--color-text-main) !important;
  line-height: 25px;
  font-weight: bold;
}
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-text-main) !important;
  font-weight: bold;
}

}


.actions .list-inline li {
  border: none !important;
  padding: 0 !important;
}

.actions .list-inline li::before {
content: none;
}