@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-primary-600) !important;
  }

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

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

  div.social-media ul li a {
  background: var(--color-primary-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-primary-400) !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: var(--color-primary-600) !important;
  }

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

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

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

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

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

  header > div.wrapper {
  display: block;
  position: relative;
  }

  header div.header::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  }

  header > div.wrapper::after {
  background: url('https://sashalashes.nl/wp-content/uploads/sites/506/2025/06/header-v2.jpg');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }




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

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

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

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





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

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

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

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

  @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-primary-600) !important;
  }
  }


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

  @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-primary-600) !important;
  }

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

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

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

  footer div.socket,
  .footer-sticky {
  background: var(--color-primary-400) !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-primary-500);
  }

  /* ===========================================================================
   DESIGN TOKEN - ROOT VARIABLES (HSL + Refactoring UI Principles)
   ==========================================================================*/
:root {
  /* ---------- 1. Primary Scale (Warme zand/caramel tint) -------------------- */
  /* Gebaseerd op hue 32° met variërende saturatie en lightness voor natuurlijke gradatie */
  --color-primary-50:  hsl(32, 25%, 96%);   /* bijna-wit linen */
  --color-primary-100: hsl(32, 28%, 92%);
  --color-primary-200: hsl(32, 32%, 87%);
  --color-primary-300: hsl(32, 35%, 81%);
  --color-primary-400: hsl(32, 38%, 72%);
  --color-primary-500: hsl(32, 42%, 62%);   /* "sweet caramel" basistint */
  --color-primary-600: hsl(32, 38%, 52%);
  --color-primary-700: hsl(32, 35%, 42%);
  --color-primary-800: hsl(32, 32%, 33%);
  --color-primary-900: hsl(32, 28%, 25%);
  --color-primary-950: hsl(32, 25%, 16%);   /* bijna donker-chocolade */

  /* ---------- 2. Neutral Scale (Grijzere tint voor backgrounds) ------------- */
  /* Subtiel warmere grijs met hue 35° voor harmonie met primary */
  --color-neutral-50:  hsl(35, 15%, 98%);
  --color-neutral-100: hsl(35, 18%, 95%);
  --color-neutral-200: hsl(35, 20%, 89%);
  --color-neutral-300: hsl(35, 18%, 83%);
  --color-neutral-400: hsl(35, 15%, 75%);
  --color-neutral-500: hsl(35, 12%, 66%);
  --color-neutral-600: hsl(35, 10%, 55%);
  --color-neutral-700: hsl(35, 8%, 42%);
  --color-neutral-800: hsl(35, 6%, 31%);
  --color-neutral-900: hsl(35, 8%, 22%);
  --color-neutral-950: hsl(35, 10%, 14%);

  /* ---------- 3. Accent Scale (Nieuwe kleur #625350) ----------------------- */
  /* Gebaseerd op je nieuwe accentkleur met hue 24° voor warme, aardse tint */
  --color-accent-50:  hsl(24, 25%, 95%);    /* zachte blush */
  --color-accent-100: hsl(24, 28%, 90%);
  --color-accent-200: hsl(24, 30%, 82%);
  --color-accent-300: hsl(24, 28%, 72%);
  --color-accent-400: hsl(24, 25%, 62%);
  --color-accent-500: hsl(24, 18%, 35%);    /* ✨ je nieuwe basisaccent #625350 */
  --color-accent-600: hsl(24, 20%, 30%);
  --color-accent-700: hsl(24, 22%, 25%);
  --color-accent-800: hsl(24, 25%, 20%);
  --color-accent-900: hsl(24, 28%, 15%);
  --color-accent-950: hsl(24, 30%, 10%);

  /* convenience aliases - aangepast voor nieuwe kleuren */
  --primary-light:  var(--color-primary-50);
  --primary:        var(--color-primary-500);
  --primary-dark:   var(--color-primary-700);
  --accent:         var(--color-accent-500);
  --neutral-50:     var(--color-neutral-50);

  /* ---------- 4. Typography ------------------------------------------------- */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-50:  clamp(0.70rem, 0.72vw + 0.55rem, 0.80rem); /* xs   */
  --fs-100: clamp(0.80rem, 0.76vw + 0.60rem, 0.90rem); /* sm   */
  --fs-200: clamp(0.94rem, 0.86vw + 0.66rem, 1.00rem); /* base */
  --fs-300: clamp(1.06rem, 0.98vw + 0.74rem, 1.13rem); /* md   */
  --fs-400: clamp(1.20rem, 1.10vw + 0.82rem, 1.25rem); /* lg   */
  --fs-500: clamp(1.44rem, 1.32vw + 0.96rem, 1.60rem); /* xl   */
  --fs-600: clamp(1.80rem, 1.60vw + 1.10rem, 2.00rem); /* 2xl  */
  --fs-700: clamp(2.16rem, 1.90vw + 1.30rem, 2.40rem); /* 3xl  */

  /* ---------- 5. Spacing (4-pt grid) ---------------------------------------- */
  --space-0:  0rem;
  --space-1:  0.25rem; /* 4px  */
  --space-2:  0.50rem; /* 8px  */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1.00rem; /* 16px */
  --space-5:  1.50rem; /* 24px */
  --space-6:  2.00rem; /* 32px */
  --space-8:  3.00rem; /* 48px */
  --space-10: 4.00rem; /* 64px */
  --space-12: 6.00rem; /* 96px */

  /* ---------- 6. Misc utilities --------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px hsla(35, 10%, 0%, 0.04);
  --shadow-lg: 0 6px 30px hsla(35, 10%, 0%, 0.08);

  --transition-fast: 150ms ease;
  --transition-medium: 300ms ease;
}

/* ===========================================================================
   BASE STYLES • Scandi-Boho Lash&Brow Salon
   ==========================================================================*/
.subkop {
  text-transform: uppercase;
  letter-spacing: 1.618px;
  font-weight: bold;
  font-size: var(--fs-300);
  color: var(--accent);
  margin-bottom: var(--space-1);
}
/* ---------- 0. Global reset & box-model ------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.button-group {
  display: flex;
  gap: var(--space-1);
  flex-direction: row;
  flex-wrap: wrap;
}

.accent {
  overflow: hidden;
  position: absolute;
  top: -30px;
  max-width: 110px;
  left: -30px;
  z-index: 0;
}

.as-1-1 {
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  z-index: 1;
}

/* ---------- 1. Document root ------------------------------------------ */
html {
  scroll-behavior: smooth;
  font-size: 16px !important; /* 16px */
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: 1.6;
  color: var(--color-neutral-800) !important;
  background: var(--color-neutral-100);
  padding: var(--space-6) var(--space-4);
  overflow-x: hidden;
}

article.post figure.featured-image, article.post figure.featured-image img {
  max-height: 430px;
  object-fit: cover;
}

/* ---------- 2. Heading scale ------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-neutral-900) !important;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--fs-700); }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }
h5 { font-size: var(--fs-300); }
h6 { font-size: var(--fs-200); }

/* ---------- 3. Text elements ------------------------------------------ */
p {
  margin-bottom: var(--space-4);
}

a:not(a.btn):not(header a):not(footer a) {
  color: var(--accent) !important;
  text-decoration: underline;
  transition: color var(--transition-fast);
}
a:hover,
a:focus {
  color: var(--color-accent-400) !important;
  text-decoration: underline;
}

strong, b { font-weight: 600; }
em, i     { font-style: italic; }






blockquote {
  border-left: 4px solid var(--color-primary-300);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-neutral-700);
}

/* ---------- 4. Lists --------------------------------------------------- */
ul, ol {
  margin: var(--space-4) 0 var(--space-6) var(--space-6);
  padding-left: var(--space-4);
}
li + li {
  margin-top: var(--space-2);
}


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

/* ---------- 5. Buttons ------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: center;
  border: none;
  padding: 1.125rem 1.25rem;
  border-radius: 100rem !important;
  margin-top: 1.5rem;
}

.radius {
  border-radius: var(--radius-lg);
}

/* primary button – with !important to override CMS */
.btn-primary {
  background: var(--accent) !important;
  color: hsl(0, 0%, 100%) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-accent-600) !important;
}

/* secondary/ghost variant (optioneel) */
.btn-outline {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--accent) !important;
  color: hsl(0, 0%, 100%) !important;
}

.align-start__md h2 {
  margin-top: 0;
}


/* ---------- 6. Images & media ----------------------------------------- */
img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}

.woocommerce .widget_product_categories ul li, aside div.block.treatments ul li {
  padding: 5px 15px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.woocommerce .widget_product_categories ul, aside div.block.treatments ul {
  border: 0px solid #e6e6e6;
  margin: var(--space-2) var(--space-2);
}

/* ---------- 7. Forms --------------------------------------------------- */
input, textarea, select {
  width: 100%;
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: hsl(0, 0%, 100%);
  transition: border var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px hsla(24, 18%, 35%, 0.3);
}

h2.display, .title-in-header h1 {
  font-size: calc(var(--fs-700) * 1.618);
  line-height: calc(1.618 * 0.7);
}

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

.review .col-sm-36 {
  padding: var(--space-3) var(--space-6);
}

.title-in-header {
  display: flex;
  height: calc(100% - 150px);
  align-items: center;
  position: relative;
  justify-content: center;
}

.cw * {
  color: var(--color-neutral-50) !important;
}

label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: var(--color-neutral-800);
}

.title-in-header h1 {
  margin: 0;
}
.single__review .subkop {
  font-size: var(--fs-50);
}

.review__name {
  margin: 0 0 0 var(--space-6);
  color: var(--color-neutral-200) !important;
}

.lead.review__lead {
  margin: var(--space-3) var(--space-0) var(--space-2) var(--space-0);
}
/*.single__review.cw {
  background: url(https://sashalashes.nl/wp-content/uploads/sites/506/2025/05/one-by-one.jpg);
  background-size: 100%;
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  background-blend-mode: multiply;
  background-color: hsla(24, 29.4%, 10%, 0.33);
}*/

section.reviewss {
  background: url(https://sashalashes.nl/wp-content/uploads/sites/506/2025/05/one-by-one.jpg);
  background-color: rgba(0, 0, 0, 0);
  background-size: auto;
  background-size: 100%;
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  background-blend-mode: multiply;
  background-position: center;
  background-color: hsla(24, 29.4%, 10%, 0.33);
  margin: 1rem 0;
  padding: calc(var(--space-12) * 1.6) 0 !important;
}

.intro.text.block0.radius__bottom {
  position: relative;
  padding-top: calc(var(--space-12) + 15px);
  top: -15px;
}

section.prices table thead tr {
    height: 110px;
}
section.prices table thead:nth-child(1) tr {
    height: 60px;
}
.table>thead>tr>th {
    vertical-align: bottom!important;
    border-bottom: 3px solid var(--accent)!important;
    font-size: 18px;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 16px 8px!important;
    vertical-align: middle;
}


.col-md-18.right span a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.block.text {
  background: var(--color-primary-100);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
}

.col-md-14.col-md-offset-2 {
  padding: var(--space-3);
  position: sticky;
  top: var(--space-3);
  right: 0;
  background: var(--color-neutral-50);
  border-radius: var(--radius-lg);
}


/* ---------- 8. Utility helpers (margins & paddings) ------------------- */
/* only de meest gebruikte – breid uit naar wens */
.mt-4 { margin-top: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }

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

.list-unstyled {
  margin: 0;
}

/* ---------- 9. Container ---------------------------------------------- */
.container {
  max-width: 72rem; /* ≈ 1152px */
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ---------- 10. Accessibility focus ring ------------------------------ */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

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

footer .column a {
  font-size: var(--fs-400);
  color: var(--color-accent-300) !important;
}
footer .column a:hover {
  color: var(--color-accent-50) !important;
}
.treatments.text-center.block2.radius {
  padding: var(--space-12) 0;
}


.review .blockquote {
  margin: 0 0 0 var(--space-3);
  color: var(--color-neutral-600) !important;
  border: none;
  padding: 0;
  font-size: var(--fs-200);
}


  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: var(--color-primary-950) !important;
    border-bottom: 3px double transparent !important;
    transition: var(--transition-medium);
  }

  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-neutral-950) !important;
    border-bottom: 3px double var(--color-primary-300) !important;
    transition: var(--transition-medium);
  }

aside div.block.treatments ul li:hover, .woocommerce .widget_product_categories ul li:hover {
  background: var(--color-primary-100);
  color: var(--color-neutral-950) !important;
  border-radius: var(--radius);
  transition: var(--transition-fast);
    transition: var(--transition-fast);
}
.woocommerce .widget_product_categories ul li:focus a, .woocommerce .widget_product_categories ul li:focus span, .woocommerce .widget_product_categories ul li:hover a, .woocommerce .widget_product_categories ul li:hover span, aside div.block.treatments ul li:focus a, aside div.block.treatments ul li:focus span, aside div.block.treatments ul li:hover a, aside div.block.treatments ul li:hover span {
  color: var(--color-neutral-800) !important;
  transition: var(--transition-fast);
}


/* ---------- 11. Desktop Styles ---------------------------------------- */
@media only screen and (min-width: 992px) {


header div.header {
  background-color: var(--color-neutral-50) !important;
}

  nav.navbar-default div.navbar-collapse ul.navbar-nav > li a:hover {
    background-color: var(--primary-light) !important;
  }

ul.dropdown-menu {
  border-radius: var(--radius-md) !important;
}
.shop_uspbar {
  min-height: 43px;
}
.single__review.cw {
display: grid;
grid-template-columns: 1fr 0.5fr;
grid-template-rows: auto;
}
.subkop {
grid-column: 1;
grid-row: 1;
}
.lead.review__lead {
grid-column: 1;
grid-row: 2;
}
.review__name {
grid-column: 1;
grid-row: 3;
}
.review__button {
grid-column: 2;
grid-row: 1 / span 3;
align-self: baseline;
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
}


  .align-end__md {
    justify-self: end;
    align-self: end;
    margin-top: auto;
  }
  .align-start__md {
    align-self: start;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav > li a:hover {
    background-color: transparent !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  #menu-item-587 {
    margin-left: auto;
  }

.radius__bottom {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
  
  nav.navbar-default div.navbar-collapse ul.navbar-nav > li {
    margin: 0;
  }

  .col-sm-10 .holder {
    width: auto !important;
  }


  #menu-item-587 {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    float: right;
  }

  #menu-item-587:hover {
    background: var(--accent);
    color: var(--neutral-50) !important;
    border: 1px solid var(--accent);
    float: right;
  }

  #menu-item-587 a {
    color: var(--accent) !important;
  }

section.archive.reviews div.reviews div.review {
  border-bottom: 1px solid var(--color-neutral-300);
}



section.archive.reviews div.reviews div.review h4 {
  text-transform: uppercase;
  letter-spacing: 1.618px;
  font-weight: bold;
  font-size: var(--fs-50);
  color: var(--accent) !important;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
}



  #menu-item-587:hover a, #menu-item-587 a:hover {
    color: var(--neutral-50) !important;
    border: none !important;
  }

  .topbar .container, .header .container {
    width: 100%;
    max-width: none;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav {
    text-align: left;
  }
section.treatments div.items div.item img {
  border-radius: var(--radius-lg) !important;
  object-fit: cover;
  height: 260px;
  width: 100%;
}
.col-xs-24.col-sm-16.col-md-8 {
  width: 33.3%;
}
section.treatments div.items div.item a span {
  display: inline-block;
  font-size: var(--fs-100);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 15px;
  text-transform: none;
  word-break: break-word;
  font-family: var(--font-serif);
  color: var(--color-neutral-950) !important;
}

  header div.header.full-width div.wrapper img.logo {
    max-height: 100px;
  }

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

  body.home header > div.wrapper, body header > div.wrapper {
    min-height: 350px;
    min-height: 500px;
    height: 75vh;
  }
}


.support {
  position: absolute;
  z-index: 12;
  right: var(--space-10);
  color: var(--color-neutral-900);
  top: 50%;
  background: hsla(30, 20%, 98%, 0.34);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  font-size: var(--fs-50);
  backdrop-filter: blur(200px);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
}

/* ---------- 12. Layout Components ------------------------------------- */
.topbar__container {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  color: var(--color-primary-500);
  font-size: var(--fs-100);
}

.topbar .list-inline, .topbar .list-inline li {
  margin: 0;
}

body {
  padding-top: 0;
}

section.intro {
  padding: var(--space-12) 0;
}

.image-gallery .container {
  padding: 0;
  width: 100%;
  max-width: none;
}

#menu-item-658 {
  float: right;
}

/* ---------- 13. Review Section ---------------------------------------- */
.review-section {
  background-color: var(--color-neutral-50);
  padding: var(--space-8) var(--space-4);
}

.review-section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  color: var(--primary-dark);
  text-align: center;
  margin-block-end: var(--space-6);
}

.review-section__list {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
header > div.wrapper::after {
  background-color: hsla(24.4, 18%, 34.9%, 0.65);
  background-blend-mode: multiply;
}

.review-card {
  background-color: var(--primary-light);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}


.review .row .col-sm-12 {
  display: none;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

header > div.wrapper::after {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  top: 130px;
  background-position: center;
}
header div.header {
 /* background-color: rgba(255, 255, 255, 1) !important;*/
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.review-card__text {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: 1.6;
  color: var(--color-neutral-900);
  margin-block-end: var(--space-4);
}
section.page, section.archive.reviews, section.treatments {
  padding: var(--space-12) 0;
}
.review-card__author {
  font-family: var(--font-serif);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--primary);
  text-align: right;
}

footer div.socket, .footer-sticky {
  background: var(--color-primary-950) !important;
}
footer {
  border-radius: var(--radius-lg);
  overflow: hidden;
}


section.archive.treatments div.items div.treatments div.item a span, section.archive.treatments div.treatments div.item h4, section.archive.treatments div.treatments div.items div.item a span, section.treatments.shortcode div.items div.treatments div.item a span, section.treatments.shortcode div.treatments div.item h4, section.treatments.shortcode div.treatments div.items div.item a span {
  max-width: 100%;
  display: inline-block;
  font-size: var(--fs-100);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 15px;
  text-transform: none;
  word-break: break-word;
  font-family: var(--font-serif);
  color: var(--color-neutral-950) !important;
}

section.archive.treatments div.treatments div.item img, section.treatments.shortcode div.treatments div.item img {
  border-radius: var(--radius-lg) !important;
  height: 190px;
  object-fit: cover;
  width: 100%;
}

footer {
  background-image: url(https://sashalashes.nl/wp-content/uploads/sites/506/2025/05/Asset-3.png) !important;
  background-color: var(--color-primary-950) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: 100% 20px !important;
}


section.contact div.holder div.wrap {
  background: white;
  border-radius: var(--radius-lg);
}


@media only screen and (max-width: 991px) {

 body {
   padding: var(--space-1);
 }

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: var(--color-accent-800) !important;
}


.gallery-container {
  margin-bottom: 0 !important;
}

.col-md-14.col-md-offset-2 {
  margin-top: var(--space-6);
}

section.page, section.archive.reviews, section.treatments {
  padding: var(--space-6) 0;
}

.title-in-header {
  position: absolute;
  width: 100%;
}

header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
  text-align: left;
  font-size: var(--fs-400);
}
.fas.fa-bars {
  color: var(--accent);
}

a.glink img {
  width: 60px;
  height: 24px;
  text-align: left;
  float: left;
}

.social-media.visible-xs.visisble-sm {
  display: none !important;
}

#menu-item-658 {
  float: none;
  width: 100%;
}
nav.navbar-default, div.navbar-collapse {
  background-color: var(--color-primary-100);
}

.gallery-container {
  margin: var(--space-8) 0;
}

header > div.wrapper {
  min-height: 450px !important;
}

h2.display, .title-in-header h1 {
  font-size: calc(var(--fs-700) * 1.318);
}

.col-md-18.right span a {
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
}

footer {
  background-size: 280px !important;
  background-position: 230% 10% !important;
}

section.reviewss {
  padding: var(--space-12) 0 !important;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center;
}


section.treatments div.items div.item img {
  border-radius: var(--radius-lg) !important;
  width: 100%;
  max-height: 310px;
  object-fit: cover;
}

.col-xs-24.col-sm-16.col-md-8 {
  width: 100%;
}


.support {
  right: var(--space-2);
}
.align-end__md {
  z-index: 2;
}
.button-group {
  z-index: 12;
  position: relative;
  margin-bottom: var(--space-3);
}


}





header div.navbar-collapse ul li > a span.caret::before {
  font-weight: 900;
}

#whatsapp_button {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 99;
    font-size: 32px;
    line-height: 1;
    border: none;
    outline: none;
    background-color: #25D366;
    color: #fff;
    cursor: pointer;
    padding: 14px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: rgb(0 0 0 / 30%) 0px 3px 15px !important;
}

button#whatsapp_button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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