@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: #332828;
  }

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

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

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

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

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

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

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

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

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

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

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #512d1a !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://chametiel.nl/wp-content/uploads/sites/150/2024/07/foto_scan.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) {
  header .wrapper.sticky_menu div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a {
  color: #ffffff !important;
  }
  }


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

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

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

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

  .topbar {
  background: var(--ink);
  }
  .topbar {
  color: var(----color-primary-alt);
  }




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

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

  header nav.navbar-default {
  background-color: rgba(81, 45, 26, 1) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(81, 45, 26, 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: #512d1a !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 #bb8768;
  }

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


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

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

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

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

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

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

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

  footer div.socket,
  .footer-sticky {
  background: #6f4433 !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

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

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

  section.treatments div.item a {
  color: #332828 !important;
  }

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

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

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

  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-primary: #6F4433;
  --color-primary-dark: #512D1A;
  --color-primary-light: #BB8768;
  --color-primary-lighter: #DEC7B1;
  --color-primary-medium: #8D5D3B;
  --color-primary-alt: #6F4433;
  --color-primary-accent: #BB8768;

  --color-neutral-warm: #D1CBC1;
  --color-text: #332828;
  --color-text-footer: #222;
  --color-text-dropdown: #221e1f;

  --color-grey-darker: #292929;
  --color-grey-dark: #595959;
  --color-grey: #828282;
  --color-grey-light: #a9a9a9;
  --color-grey-lighter: #b1b1b1;
  --color-grey-lightest: #efefef;
  --color-white: #ffffff;

  --bg: #f5efe7;
  --ink: #512D1A;
  --accent: #8D5D3B;
  --soft: #DEC7B1;
  --rule: rgba(81, 45, 26, 0.18);

  --ink-85: rgba(81, 45, 26, 0.85);
  --ink-82: rgba(81, 45, 26, 0.82);
  --ink-78: rgba(81, 45, 26, 0.78);
  --ink-75: rgba(81, 45, 26, 0.75);
  --ink-70: rgba(81, 45, 26, 0.70);
  --ink-60: rgba(81, 45, 26, 0.60);
  --ink-55: rgba(81, 45, 26, 0.55);
  --ink-50: rgba(81, 45, 26, 0.50);
  --ink-40: rgba(81, 45, 26, 0.40);

  --bg-88: rgba(245, 239, 231, 0.88);
  --bg-85: rgba(245, 239, 231, 0.85);
  --bg-75: rgba(245, 239, 231, 0.75);
  --bg-70: rgba(245, 239, 231, 0.70);
  --bg-60: rgba(245, 239, 231, 0.60);
  --bg-35: rgba(245, 239, 231, 0.35);
  --bg-18: rgba(245, 239, 231, 0.18);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  --pad-x: 0px;
}

.woocommerce .widget_product_categories ul.product-categories li > .count, .widget_product_categories ul.product-categories li > .count {
  display: none;
}
.woocommerce .widget_product_categories ul.product-categories li:hover > a, .woocommerce .widget_product_categories ul.product-categories li:focus > a, .woocommerce .widget_product_categories ul.product-categories li:hover > a:hover, .woocommerce .widget_product_categories ul.product-categories li:focus > a:focus {
  color: var(--ink) !important;
}


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

* {
  box-sizing: border-box;
}


section.page {
  padding: 120px 0;
}

html {
  font-size: 16px;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  font-weight: var(--weight-regular);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h5 { font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-md); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }

small, .text-small {
  font-size: var(--text-sm);
}



a {
  color: var(--color-primary-alt) !important;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

p:empty {
  display: none;
}

.mono-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.serif {
  font-family: var(--serif);
}

.wrap {
  background-color: var(--color-white);
  box-shadow: 0 0 30px -5px rgba(0,0,0,.15);
  padding: 30px;
}

header .topbar {
  padding: 5px 0;
}

.top-header {
  text-align: center;
  background: var(--color-primary);
  min-height: 20px;
  color: var(--color-white);
  height: 27px;
}

body > header > div.top-header a {
  color: var(--color-white) !important;
}

header > div.wrapper::after {
  background-position: 0 -10%;
}

.account {
  float: right;
  padding: 0 15px;
}

.menu-header {
  text-align: center;
  min-height: 20px;
  height: 100%;
  padding: 10px 0;
}

.ticker {
  background: var(--ink);
  color: var(--bg);
  padding: 10px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

div.page-header h1 {
  border-bottom: 0px solid #e6e6e6;
}


.footer-cta.text-center.above {
  background: rgba(222,199,177,0.45);
}
header .topbar {
  padding: 0px 0;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--pad-x);
}

.logo {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
}

.nav-links a.active {
  font-weight: 600;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
}

.br-menu-item__variant br {
  display: none;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform .2s, opacity .2s;
}

.hero-wrap {
  padding: 0 0;
}

.hero {
  position: relative;
  overflow: hidden;
  height: 720px;
  background: url('http://chametiel.nl/wp-content/uploads/sites/150/2024/07/foto_scan.jpg');
  background-color: hsla(24.9, 41%, 39.2%, 0.58);
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-size: cover;
}

.ticker br {
  display: none;
}

.hero-corner {
  position: absolute;
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-corner.tl { top: 24px; left: 24px; }
.hero-corner.tr { top: 24px; right: 24px; }
.hero-corner.bl { bottom: 24px; left: 24px; opacity: 0.7; letter-spacing: 0.14em; }
.hero-corner.br { bottom: 24px; right: 24px; opacity: 0.7; letter-spacing: 0.14em; }

.hero-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  text-align: center;
  padding: 0 40px;
}

.hero-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 22px;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(80px, 14vw, 180px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--bg) !important;
}

.hero-sub {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  color: var(--bg-88);
  max-width: 640px;
}

section.intro.text.block1 {
  background-position: center 10%;
  padding: 80px 0;
}

section.intro .container {
  width: 100%;
  max-width: 1920px;
}

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

section.partners div.item div.holder img {
  max-width: 150px;
}

.home .col-xs-24.col-sm-12 img {
  aspect-ratio: 1/1;
  height: auto;
  width: 100%;
  object-fit: cover;
}

.home .col-md-24.wit {
  background: #ffffffbd;
  padding: 20px 0;
  box-shadow: 3px 3px 11px -3px rgba(107,107,107,1);
}

.openingsactie-home {
  padding: 10px;
  border: 4px solid var(--color-primary-light);
}

.btn-pill {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  transition: background .2s, color .2s;
}

.btn-pill:hover {
  background: var(--ink);
  color: var(--bg);
}

.afspraak_btn_blok {
  background: var(--color-primary-lighter);
  padding: 5px 15px;
  margin-bottom: 25px;
}

.afspraak_btn_blok hr {
  border-color: var(--color-primary);
}

span.prijs {
  background: var(--color-primary-medium);
  padding: 3px 5px;
  border-radius: 17px;
  color: var(--color-white);
  font-weight: var(--weight-medium);
}

span.actie {
  background: var(--color-primary-medium);
  padding: 3px 10px;
  color: var(--color-white);
  border-radius: 75px;
  font-weight: var(--weight-medium);
}

span.tijdelijk {
  background: var(--color-primary-accent);
  padding: 4px 11px;
  border-radius: 0;
  color: var(--color-white);
  font-weight: var(--weight-medium);
}

ul.actie li {
  padding: 6px 0;
}

.before {
  background: var(--color-primary-light);
}

.before:hover {
  background: var(--color-primary-dark);
}

.before img {
  width: 100%;
}

.before img:hover {
  filter: grayscale(1);
}

.before h4 {
  color: var(--color-white) !important;
  text-align: center;
  padding: 9px 0;
}

div.treatments div.item h4 a {
  color: var(--color-text) !important;
}

div.treatments div.item:hover h4 a {
  color: var(--color-primary) !important;
}

#whatsapp_button {
  border: none;
  outline: none;
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 0 4px 0 #3e3e3e52;
}

#whatsapp_button .btn {
  border: 1px solid;
}

.strip {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 22px 0;
}

.strip-cell {
  padding: 0 24px;
  border-right: 1px solid var(--rule);
}

.strip-cell:last-child {
  border-right: none;
}

.strip-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.strip-v {
  font-family: var(--serif);
  font-size: 28px;
  margin-top: 4px;
  color: var(--ink);
}

.strip-v.it {
  font-style: italic;
}

.welcome {
  padding: 120px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.welcome-text {
  padding-left: 60px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
}

.h2.lg { font-size: clamp(44px, 5.5vw, 68px); }
.h2.xl { font-size: clamp(52px, 6.5vw, 56px); line-height: 1; }

.body-16 {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-78);
  max-width: 460px;
}

.inline-link {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.inline-link .line {
  width: 48px;
  height: 1px;
  background: var(--ink);
}

.inline-link span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.welcome-img {
  position: relative;
}

.ph {
  background: repeating-linear-gradient(135deg, rgba(141,93,59,0.4) 0 2px, transparent 2px 14px), rgba(222,199,177,0.55);
  color: var(--ink-60);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  border: 1px solid rgba(81,45,26,0.08);
}

.ph-520 { height: 520px; }
.ph-360 { height: 360px; }

.note-card {
  position: absolute;
  bottom: -24px;
  left: -24px;
  width: 220px;
  height: 160px;
  background: var(--bg);
  padding: 20px;
  box-shadow: 0 1px 0 var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid var(--accent);
}

.note-card .note-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.note-card .note-body { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.25; color: var(--ink); }
.note-card .note-sig { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-55); text-transform: uppercase; }

.rituals {
  padding: 60px var(--pad-x) 120px;
}

.rituals-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  gap: 24px;
}

.rituals-all {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  white-space: nowrap;
}

.trip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.trip-card {
  display: flex;
  flex-direction: column;
}

.trip-card img {
  height: 320px;
  width: 100%;
  object-fit: cover;
  margin: 0;
}

.trip-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

.trip-meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.trip-meta .n { color: var(--accent); }
.trip-meta .time { color: var(--ink-55); }

.trip-title {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  margin-top: 8px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.trip-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-60);
  margin-top: 4px;
}

.trip-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-75);
  margin-top: 16px;
  flex: 1;
}

.trip-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.trip-price {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.trip-cta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.coffee {
  background: var(--ink);
  color: var(--bg);
  padding: 120px var(--pad-x);
}

.coffee-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: center;
}

.coffee-lead {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--bg-60);
  margin-bottom: 12px;
}

.coffee-title {
  font-family: var(--serif);
  font-size: clamp(80px, 11vw, 140px);
  font-weight: 400;
  margin: 0;
  color: #fff !important;
  letter-spacing: -0.025em;
  line-height: 0.9;
}

.coffee-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--bg-85);
  max-width: 520px;
  margin-bottom: 40px;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.menu-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-18);
}

.menu-item {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--bg-85);
  padding: 6px 0;
}

.qr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--bg-18);
}

.qr {
  width: 68px;
  height: 68px;
  background: var(--bg);
  padding: 6px;
  flex-shrink: 0;
}

.qr-inner {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(var(--ink) 2px, transparent 2px), linear-gradient(90deg, var(--ink) 2px, transparent 2px);
  background-size: 8px 8px;
}

.qr-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.qr-cta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--bg);
  margin-top: 4px;
}

.journal {
  padding: 120px var(--pad-x);
}

.journal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 16px;
}

.journal-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.journal-card {
  background: var(--bg);
  padding: 34px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}

.journal-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.journal-tag {
  color: var(--accent);
}

.journal-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.journal-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-70);
  flex: 1;
}

.journal-cta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.news {
  padding: 100px var(--pad-x);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.news h2 {
  max-width: 780px;
  margin: 0 auto;
}

.news-body {
  font-size: 15px;
  color: var(--ink-70);
  margin-top: 20px;
}

.news-form {
  display: flex;
  max-width: 520px;
  margin: 36px auto 0;
  border-bottom: 1px solid var(--ink);
}

.news-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  color: var(--ink);
  padding: 14px 4px;
  outline: none;
}

.news-form button {
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 8px;
}

/* =============================================================
   CHAMÉ COMPONENTS
   ============================================================= */

.chame-home {
  color: var(--color-text);
  font-family: var(--font-body);
}

.chame-home .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.chame-home > section {
  padding: 5rem 0;
}

.chame-home > section + section {
  padding-top: 0;
}

.chame-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-medium);
  margin-bottom: 0.75rem;
}

.chame-section-head {
  margin-bottom: 3rem;
}

.chame-section-head h2 {
  font-size: var(--text-4xl);
  margin: 0;
  color: var(--color-text);
}

.chame-section-head--centered {
  text-align: center;
}

.chame-rule {
  border: 0;
  border-top: 1px solid var(--color-primary);
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0.3;
}

.chame-masthead {
  padding: 4rem 0 1rem !important;
  text-align: center;
}

.chame-masthead__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding: 0.75rem 0;
  margin-bottom: 3rem;
}

.chame-masthead__top .chame-eyebrow {
  margin-bottom: 0;
}

.chame-wordmark {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 18vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--color-primary);
  font-weight: var(--weight-regular);
}

.chame-masthead__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 1.5rem;
}

.chame-hero-image {
  padding-top: 0 !important;
  padding-bottom: 3rem !important;
}

.chame-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.chame-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-grey);
  margin-top: 0.75rem;
  text-align: right;
}

.chame-departments-section {
  padding-top: 2rem !important;
}

.chame-departments {
  border-top: 2px solid var(--color-primary);
}

.chame-department {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-primary-lighter);
  text-decoration: none !important;
  color: var(--color-text) !important;
  transition: padding 0.3s ease, background 0.3s ease;
}

.chame-department:hover {
  padding-left: 1rem;
  background: rgba(222, 199, 177, 0.2);
}

.chame-department__num {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-primary);
  font-weight: var(--weight-regular);
  min-width: 3ch;
  font-style: italic;
}

.chame-department__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin: 0 0 0.25rem;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.chame-department__desc {
  margin: 0;
  color: var(--color-text);
  max-width: 60ch;
  line-height: var(--leading-normal);
}

.chame-department__arrow {
  font-size: var(--text-xl);
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.chame-department:hover .chame-department__arrow {
  transform: translateX(6px);
}

.chame-editorial .container {
  max-width: 720px;
}

.chame-pullquote {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--color-primary);
  font-style: italic;
  font-weight: var(--weight-regular);
  text-align: center;
  max-width: 600px;
  margin: 2.5rem auto;
  padding: 0 1rem;
  border: 0;
  letter-spacing: var(--tracking-tight);
}

.chame-pullquote::before,
.chame-pullquote::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--color-primary);
  margin: 0 auto;
}

.chame-pullquote::before { margin-bottom: 2rem; }
.chame-pullquote::after { margin-top: 2rem; }

.chame-dropcap::first-letter {
  font-family: var(--font-heading);
  font-size: 4.5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.1em 0 0;
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.chame-editorial p {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

.chame-signature {
  font-family: var(--font-heading);
  font-style: italic;
  text-align: right;
  margin-top: 2rem !important;
  color: var(--color-primary-medium);
  font-size: var(--text-lg);
}

.chame-treatments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.chame-treatment {
  text-decoration: none !important;
  color: var(--color-text) !important;
  display: block;
}

.chame-treatment__image {
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--color-primary-lighter);
}

.chame-treatment__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.chame-treatment:hover .chame-treatment__image img {
  transform: scale(1.04);
}

.chame-treatment .chame-eyebrow {
  margin-bottom: 0.25rem;
}

.chame-treatment__title {
  font-size: var(--text-xl);
  margin: 0 0 0.5rem;
  color: var(--color-text) !important;
  letter-spacing: var(--tracking-tight);
}

.chame-treatment p {
  color: var(--color-grey-dark);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin: 0;
}

.chame-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.chame-feature--reverse .chame-feature__image {
  order: 2;
}

.chame-feature__body h2 {
  margin: 0 0 1rem;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
}

.chame-lead {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-primary-dark);
  line-height: var(--leading-snug);
  margin: 0 0 1.5rem;
}

.chame-feature__body p {
  line-height: var(--leading-normal);
}

.chame-image-placeholder {
  aspect-ratio: 4/5;
  width: 100%;
  background: linear-gradient(135deg, var(--color-primary-lighter) 0%, var(--color-neutral-warm) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-medium);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-normal);
  position: relative;
}

.chame-image-placeholder::before {
  content: attr(data-label);
  padding: 0 2rem;
  text-align: center;
}

.chame-feature__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

.chame-button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--color-primary);
  color: var(--color-white) !important;
  text-decoration: none !important;
  border-radius: 0;
  margin-top: 1.5rem;
  transition: background 0.3s ease;
  border: 1px solid var(--color-primary);
}

.chame-button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.chame-button--outline {
  background: transparent;
  color: var(--color-white) !important;
  border: 1px solid var(--color-white);
}

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

.chame-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}

.chame-voices {
  background: var(--color-primary-lighter);
}

.chame-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.chame-quote {
  margin: 0;
  text-align: center;
}

.chame-quote blockquote {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--color-primary-dark);
  margin: 0 0 1rem;
  border: 0;
  padding: 0;
  background: none;
}

.chame-quote blockquote::before { content: '“'; }
.chame-quote blockquote::after { content: '”'; }

.chame-quote figcaption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-medium);
}

.chame-center {
  text-align: center;
  margin-top: 3rem;
}

.chame-visit-section {
  padding-bottom: 5rem !important;
}

.chame-visit {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  padding: 4rem 3rem;
  background: var(--color-primary);
  color: var(--color-white);
}

.chame-visit h2 {
  color: var(--color-white);
  margin: 0;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
}

.chame-visit .chame-eyebrow {
  color: var(--color-primary-lighter);
}

.chame-visit__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.chame-visit p {
  color: var(--color-white);
  margin: 0;
  line-height: var(--leading-normal);
}

.chame-visit a {
  color: var(--color-white) !important;
}


/* =============================================================
   SKINTAKE COMPONENTS
   ============================================================= */

.skintake div.breadcrumbs, 
.stap-1 div.breadcrumbs, 
.stap-2 div.breadcrumbs, 
.stap-3 div.breadcrumbs, 
.stap-4 div.breadcrumbs, 
.skintake div.page-header, 
.stap-1 div.page-header, 
.stap-2 div.page-header, 
.stap-3 div.page-header, 
.stap-4 div.page-header {
  display: none;
}

.stappen-advies {
  padding: 55px 10px;
}

.stappen-advies h1 {
  text-align: center;
  margin-bottom: 35px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-3xl);
}

.stappen-advies .blokwrap {
  box-shadow: 0 0 30px -5px rgba(0,0,0,.15);
  border-radius: 25px;
}

.stappen-advies .blokwrap .wpcf7 {
  padding: 30px 60px;
}

.stappen-advies .blokwrap img {
  width: 100%;
  border-radius: 25px 25px 0 0;
}

.stappen-advies .question {
  border: 1px solid var(--color-grey-lightest);
  padding: 10px 15px 5px;
  margin-bottom: 10px;
}

.stappen-advies input[type="radio"]::before {
  background: var(--color-grey);
  border-radius: 2px;
  content: "";
  position: absolute;
  top: -11px;
  left: 4px;
  width: 11px;
  height: 11px;
  z-index: 99;
  transition: all 0.5s ease;
}

.stappen-advies input[type="radio"]:checked::before {
  background: var(--color-white);
  transition: all 0.5s ease;
}

.stappen-advies .row-advies .col-md-12 {
  margin-bottom: 35px;
  background: var(--color-grey-light);
  padding: 7px 25px;
  text-align: center;
  color: var(--color-white);
}

.stap-1 .stappen-advies .row-advies .col-md-12:nth-child(1), 
.stap-2 .stappen-advies .row-advies .col-md-12:nth-child(2), 
.stap-3 .stappen-advies .row-advies .col-md-12:nth-child(3), 
.stap-4 .stappen-advies .row-advies .col-md-12:nth-child(4) {
  background: var(--color-grey-darker);
}

.stappen-advies center.skintakemark {
  color: var(--color-grey-lighter) !important;
  padding-bottom: 50px;
}

.stappen-advies center.skintakemark img {
  width: 83px!important;
  border-radius: 0!important;
}

.stappen-advies center.skintakeavg {
  color: var(--color-grey) !important;
  padding-bottom: 30px;
  margin-top: -25px;
  font-size: var(--text-xs);
}

.stappen-advies center.skintakeavg img {
  width: 15px!important;
  border-radius: 0!important;
  margin-bottom: 5px;
}

.skintake .stappen-advies .adviestekst {
  padding: 40px 22px 10px;
}

.skintake .stappen-advies center.skintakemark {
  padding-top: 50px;
}

.skintake .stappen-advies .btn {
  width: 30%;
  padding: 12px 14px!important;
  background: var(--color-grey-dark) !important;
  margin-top: 35px!important;
  border: 2px solid;
  border-color: var(--color-grey-dark);
  color: var(--color-white) !important;
  border-radius: 31px!important;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}


/* =============================================================
   WOOCOMMERCE SPECIFICS
   ============================================================= */

.woocommerce .widget_product_categories ul.product-categories .cat-item-345 a, 
.woocommerce .widget_product_categories ul.product-categories .cat-item-366 a, 
.woocommerce .widget_product_categories ul.product-categories .cat-item-374 a, 
.woocommerce .widget_product_categories ul.product-categories .cat-item-355 a, 
.widget_product_categories ul.product-categories .cat-item-391 a {
  font-weight: var(--weight-bold);
}

.children li a { 
  font-weight: var(--weight-regular) !important; 
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 82.5px;
}


/* =============================================================
   FOOTER
   ============================================================= */

.footer {
  padding: 60px var(--pad-x) 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}

.footer-logo {
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--accent);
}

.footer-sig {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 0 12px;
  font-weight: 500;
  border: none !important;
}

.footer-col div {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-82);
}

.footer-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  text-transform: uppercase;
}

footer h4 {
  border-bottom: 0px solid var(--color-text-footer) !important;
}

footer a {
  color: var(--color-text-footer) !important;
}

footer a:hover {
  text-decoration: underline;
}

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

footer div.socket, 
footer div.socket a, 
footer div.socket a:hover {
  color: var(--accent) !important;
}

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


/* =============================================================
   MEDIA QUERIES (Gebundeld)
   ============================================================= */

@media (min-width: 992px) {
  section.fullwidth .container,
  footer .container,
  header .container {
    width: 100%;
    max-width: 1920px;
  }

.header.full-width nav.navbar ul li {
  padding-bottom: 0 !important;
}

  header > div.wrapper {
    min-height: 0;
  }

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

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

  #whatsapp_button {
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 99;
    line-height: 1;
    padding: 22px 18px;
    width: 220px;
    font-size: var(--text-base);
    border-radius: 13px;
  }

  #whatsapp_button .btn {
    margin-top: 10px;
  }

  header > div.wrapper div.wrapper img.logo {
    max-width: 270px;
  }

  img.logo {
    padding: 0 !important;
    width: 280px;
  }

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

  .menu-header .container {
    width: 80%;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav ul.dropdown-menu > li > a {
    padding: 8px 65px 8px 24px;
  }

  header .wrapper.sticky_menu div.navbar-collapse ul.navbar-nav li a, 
  header .wrapper.sticky_menu nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a, 
  header .wrapper.sticky_menu div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a {
    color: var(--color-text) !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) !important;
  }

  .menu-item-1418 .fa {
    color: var(--color-text) !important;
  }

  header nav.navbar-default {
    background-color: var(--color-white) !important;
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: var(--color-grey-darker) !important;
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 22px;
  }

  #navbarCollapse {
    text-align: right;
  }

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

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

  nav.navbar-default div.navbar-collapse ul.navbar-nav {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
  }

  header .wrapper.sticky_menu div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li a {
    color: var(--color-text-dropdown) !important;
  }

  .welcome-img img {
    height: 520px;
    width: 100%;
    object-fit: cover;
  }
}

@media (min-width: 600px) and (max-width: 992px) {
  .col-md-24.col-xs-48.tablet {
    width: 50%;
  }
}

.parent-pageid-1425 section.intro.text.block1 {
  padding: 0 !important;
}

@media (max-width: 991px) {
  .home header > div.wrapper {
    min-height: 665px;
  }



body.mm-fullsize .navbar-collapse #primary_navigation .dropdown-menu, body.mm-fullsize .navbar-collapse #primary_navigation .sub-menu, body.mm-fullsize .navbar-collapse #primary_navigation > li > ul {
  margin: 0 auto !important;
}

header div.header div.wrapper img.logo {
  padding: 0;
}

  .home header > div.wrapper::after {
    top: 80px;
  }

  header > div.wrapper {
    border-bottom: 2px solid var(--color-primary);
  }

  #whatsapp_button {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99;
    line-height: 1;
    padding: 17px 18px;
    width: 100%;
    overflow-x: hidden;
    text-align: center;
    font-size: var(--text-sm);
  }

  #whatsapp_button .btn {
    margin-top: 10px;
    display: block;
  }

  .skintake .stappen-advies .btn {
    width: 55%!important;
  }

  .stappen-advies h1 {
    margin-top: 115px;
  }

  .stappen-advies .row-advies .col-md-12 {
    margin-bottom: 5px!important;
    padding: 7px 9px;
    font-size: var(--text-xs);
  }

  .stappen-advies .blokwrap .wpcf7 {
    padding: 25px;
  }

  .stappen-advies [type=submit], 
  .stappen-advies a.button, 
  .stappen-advies button.button, 
  .stappen-advies button[type=submit], 
  .stappen-advies input.button, 
  .stappen-advies input[type=submit] {
    width: 38%!important;
  }

  .chame-home > section {
    padding: 3rem 0;
  }
  .chame-wordmark {
    font-size: clamp(4rem, 22vw, 8rem);
  }
  .chame-masthead__top {
    flex-direction: column;
    gap: 0.25rem;
  }
  .chame-departments {
    border-top-width: 1px;
  }
  .chame-department {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  .chame-department__arrow {
    display: none;
  }
  .chame-section-head h2 {
    font-size: var(--text-3xl);
  }
  .chame-treatments {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .chame-feature {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .chame-feature--reverse .chame-feature__image {
    order: 0;
  }
  .chame-feature__body h2 {
    font-size: var(--text-3xl);
  }
  .chame-quotes {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .chame-visit {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.5rem;
    gap: 2rem;
  }
  .chame-visit__details {
    grid-template-columns: 1fr;
  }
  .chame-visit h2 {
    font-size: var(--text-3xl);
  }
  .chame-pullquote {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 900px) {
  :root { --pad-x: 20px; }
  .ticker { flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 9px; }
  .ticker span:nth-child(2) { display: none; }

  .menu-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0; background: var(--bg); z-index: 100;
    flex-direction: column; justify-content: center;
    gap: 28px; transform: translateX(100%); transition: transform .3s;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 16px; }

  .hero { height: 540px; }
  .hero-corner.tl, .hero-corner.tr { font-size: 9px; }

  .strip { grid-template-columns: 1fr 1fr; }
  .strip-cell:nth-child(2) { border-right: none; }
  .strip-cell:nth-child(1), .strip-cell:nth-child(2) {
    padding-bottom: 16px; border-bottom: 1px solid var(--rule);
  }
  .strip-cell:nth-child(3), .strip-cell:nth-child(4) {
    padding-top: 16px;
  }

  .welcome { grid-template-columns: 1fr; gap: 48px; padding: 80px var(--pad-x); }
  .welcome-text { padding-left: 0; }
  .note-card { left: 0; bottom: 0; position: relative; margin-top: -40px; margin-left: 20px; }

  .rituals { padding: 40px var(--pad-x) 80px; }
  .rituals-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .trip-grid { grid-template-columns: 1fr; gap: 48px; }

  .coffee { padding: 80px var(--pad-x); }
  .coffee-grid { grid-template-columns: 1fr; gap: 48px; }

  .journal { padding: 80px var(--pad-x); }
  .journal-head { flex-direction: column; align-items: flex-start; }
  .journal-grid { grid-template-columns: 1fr; }

  .news { padding: 80px var(--pad-x); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-logo { font-size: 56px; }
  .footer-foot { flex-direction: column; gap: 8px; align-items: flex-start; }
}

@media (max-width: 600px) {
  .chame-treatments {
    grid-template-columns: 1fr;
  }
  .chame-dropcap::first-letter {
    font-size: 3.5em;
  }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   *** BEAUTY & RELAX COMPONENT SYSTEEM ***
   Dit is de enige CSS die je aan je stylesheet hoeft toe te voegen.
   Deze componenten werken op ELKE behandelingspagina (facials,
   massages, lichaam, etc.) — niet pagina-specifiek.
   ============================================================= */
 
/* -------- br-masthead (aanvulling op .chame-masthead) -------- */
/* Italic quote-tagline onder het grote wordmark */
.br-masthead__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-70);
  margin: 24px auto 0;
  max-width: 640px;
  line-height: 1.45;
}
 
/* -------- br-hero-image -------- */
/* Breed sfeerbeeld dat de pagina visueel opent */
.br-hero-image {
  padding: 24px 0 48px;
}
.br-hero-image__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
.br-hero-image img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  display: block;
}
.br-hero-image__caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-top: 14px;
  text-align: right;
}
 
/* -------- br-intake -------- */
/* "Start hier" / eerste-kennismaking blok met 3 instapkaarten.
   Bruikbaar voor elke pagina die een intake-flow heeft. */
.br-intake {
  padding: 48px 24px 64px;
  background: rgba(222,199,177,0.35);
}
.br-intake__inner { max-width: 1100px; margin: 0 auto; }
.br-intake__head { text-align: center; margin-bottom: 48px; }
.br-intake__head h2 {
  font-family: var(--serif);
  font-weight: var(--weight-regular);
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1;
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.br-intake__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.br-intake__card {
  background: var(--bg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.br-intake__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.br-intake__num,
.br-intake__duur {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.br-intake__num { color: var(--accent); }
.br-intake__duur { color: var(--ink-55); }
.br-intake__card h3 {
  font-family: var(--serif);
  font-weight: var(--weight-medium);
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.br-intake__card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-78);
  margin: 0 0 16px;
  flex: 1;
}
.br-intake__price {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
}
.br-intake__price--italic {
  font-style: italic;
  font-size: 18px;
  color: var(--ink-70);
}
 
/* -------- br-menu-head -------- */
/* Kop boven een menukaart (gecentreerd, serif, italic accent) */
.br-menu-head {
  text-align: center;
  padding: 80px 24px 24px;
}
.br-menu-head h2 {
  font-family: var(--serif);
  font-weight: var(--weight-regular);
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1;
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.br-menu-head h2 em { font-style: italic; color: var(--accent); }
 
/* -------- br-menu-group -------- */
/* Een groep menu-items met groepstitel (bv. "Klassieke facials") 
   en een romein-range rechts (bv. "I — V") */
.br-menu-group {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 16px;
}
.br-menu-group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.br-menu-group__head h3 {
  font-family: var(--serif);
  font-weight: var(--weight-medium);
  font-size: 28px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.br-menu-group__range {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}
 
/* -------- br-menu-item -------- */
/* Één regel in een menukaart: roman-cijfer, titel, duur, tags, 
   beschrijving links — prijs en eventuele kuur rechts. */
.br-menu-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.br-menu-item--signature {
  background: rgba(81,45,26,0.04);
  padding: 24px;
  border-left: 2px solid var(--accent);
  border-bottom: none;
  margin-top: 12px;
}
.br-menu-item__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: baseline;
}
.br-menu-item__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.br-menu-item__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
  min-width: 2ch;
}
.br-menu-item h4 {
  font-family: var(--serif);
  font-weight: var(--weight-medium);
  font-size: 24px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.br-menu-item__duur {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.br-menu-item__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-78);
  margin: 0;
  max-width: 560px;
}
.br-menu-item__desc em {
  color: var(--ink-60);
  font-style: italic;
}
.br-menu-item__price-block { text-align: right; white-space: nowrap; }
.br-menu-item__price {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink);
}
.br-menu-item__price--italic {
  font-style: italic;
  font-size: 18px;
  color: var(--ink-70);
}
.br-menu-item__kuur {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-60);
  margin-top: 4px;
}
 
/* -------- br-tag -------- */
/* Kleine inline labels (Carboxy, Kuur beschikbaar, Signature, 
   Combi, Nieuw, etc.) — drie varianten */
.br-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--accent);
  color: var(--bg);
  display: inline-block;
}
.br-tag--outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.br-tag--signature {
  background: var(--ink);
  color: var(--bg);
}
 
/* -------- br-footnote -------- */
/* Italic voetnoot onder een sectie voor disclaimers en extra info */
.br-footnote {
  padding: 48px 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.br-footnote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-70);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}
 
/* -------- br-outro -------- */
/* Eenvoudige rustige afsluiting: italic zin + tekstlink.
   Gebruik dit op pagina's die al een globale CTA onderaan hebben. */
.br-outro {
  padding: 40px 24px 100px;
  text-align: center;
}
.br-outro p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.4;
}
.br-outro a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  display: inline-block;
}
 
/* -------- Responsive -------- */
@media (max-width: 900px) {
  .br-intake__grid { grid-template-columns: 1fr; gap: 16px; }
  .br-menu-item__row { grid-template-columns: 1fr; gap: 12px; }
  .br-menu-item__price-block { text-align: left; }
  .chame-masthead__top { flex-direction: column; gap: 4px; }
  .br-masthead__tagline { font-size: 18px; }
  .br-hero-image img { aspect-ratio: 4/3; }
  .br-outro p { font-size: 18px; }
}



/* =============================================================
   *** WOOCOMMERCE STYLING — DIT IS DE CSS DIE JE TOEVOEGT ***
   Plak alles tussen deze comments in je stylesheet of WordPress
   Customizer → Aanvullende CSS.
   ============================================================= */
 
/* ---- Page header — editorial masthead ---- */
.woocommerce .page-header,
body.archive .page-header {
  text-align: center;
  padding: 40px 0 20px;
  border-bottom: 1px solid var(--color-primary);
  margin-bottom: 32px;
}
.woocommerce .page-header h1,
body.archive .page-header h1 {
text-align: left;
}
.woocommerce .page-header h1 span { font-style: italic; }
 
/* Editorial sub-tagline (toegevoegd via ::before pseudo) */
.woocommerce .page-header::before {
  content: 'Producten — voor thuisgebruik na de behandeling';
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
 
/* ---- Resultaatcounter + sorteer-dropdown ---- */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55) !important;
  margin: 0 0 24px !important;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
 
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  margin-bottom: 24px !important;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 10px 36px 10px 14px;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23512D1A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
 
/* ---- Productgrid ---- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 48px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 48px 32px !important;
}
@media (min-width: 768px) {
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1100px) {
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
 
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}
 
/* ---- Productafbeelding ---- */
.woocommerce ul.products li.product .thumbnail-wrapper,
.woocommerce-page ul.products li.product .thumbnail-wrapper {
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: var(--color-white);
  overflow: hidden;
  margin-bottom: 16px;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 24px;
  margin: 0 !important;
  transition: transform 0.4s ease;
  background: var(--color-white);
}
.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img {
  transform: scale(1.04);
}
 
/* ---- Producttitel ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  min-height: auto !important;
  text-align: left;
}
 
/* Product woordmerk-prefix uitlichten (ILUMA, AGELESS, IMAGE MD etc.)
   We kunnen dat niet bij de letter doen, maar wel een hover-effect */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--accent) !important;
}
 
/* ---- Prijs ---- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  color: var(--ink) !important;
}
 
/* ---- Toevoegen-knop ---- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product .button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin: auto 0 0 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  transition: background 0.2s, color 0.2s !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
 
/* "Toegevoegd" status */
.woocommerce ul.products li.product .added_to_cart {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
  display: block;
}
 
/* ---- Pagination ---- */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
  text-align: center !important;
  padding: 32px 0 !important;
  border-top: 1px solid var(--rule) !important;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  border: none !important;
  display: inline-flex !important;
  gap: 4px;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink) !important;
  background: transparent !important;
  padding: 10px 14px !important;
  min-width: 42px;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  transition: border-color 0.2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--rule) !important;
  background: transparent !important;
  color: var(--ink) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
 
/* =============================================================
   ZIJBALK / WIDGETS
   ============================================================= */
 
.woocommerce .widget,
.woocommerce-page .widget {
  margin-bottom: 40px !important;
  padding: 0 !important;
}
.woocommerce .widget h3,
.woocommerce-page .widget h3,
.widget-area .widget > h3:first-child {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--rule);
  border-top: none !important;
}
 
/* ---- Zoekveld ---- */
.woocommerce .widget_product_search form,
.widget_product_search form {
  position: relative;
}
.woocommerce .widget_product_search input.search-field,
.widget_product_search input.search-field {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 10px 70px 10px 0;
  color: var(--ink);
  border-radius: 0;
  outline: none;
}
.woocommerce .widget_product_search input.search-field::placeholder {
  color: var(--ink-55);
}
.woocommerce .widget_product_search button,
.widget_product_search button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  border: none !important;
  padding: 0 4px !important;
  cursor: pointer;
}
 
/* ---- Categorieënlijst (FIX: flex alleen op directe ul-kinderen, niet op nested children) ---- */
.woocommerce .widget_product_categories ul.product-categories,
.widget_product_categories ul.product-categories {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Reset het thema/plugin pijltje */
.woocommerce .widget_product_categories ul.product-categories li::before,
.woocommerce .widget_product_categories ul.product-categories li::after,
.widget_product_categories ul.product-categories li::before,
.widget_product_categories ul.product-categories li::after {
  display: none !important;
  content: none !important;
}

/* Item zelf — geen flex, gewoon een blok */
.woocommerce .widget_product_categories ul.product-categories li,
.widget_product_categories ul.product-categories li {
  display: block !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink) !important;
  list-style: none !important;
  position: relative;
}
.woocommerce .widget_product_categories ul.product-categories > li:last-child {
  border-bottom: none;
}

/* De link + telling samen op één regel — telling rechts */
.woocommerce .widget_product_categories ul.product-categories li > a,
.widget_product_categories ul.product-categories li > a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  display: inline;
}
.woocommerce .widget_product_categories ul.product-categories li > a:hover {
  color: var(--accent) !important;
  font-style: italic;
}

/* De "(73)" telling — direct naast de link, niet uitgelijnd rechts */
.woocommerce .widget_product_categories ul.product-categories li > .count,
.widget_product_categories ul.product-categories li > .count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-55);
  margin-left: 6px;
}

/* Sub-categorieën — ingesprongen blok onder de parent */
.woocommerce .widget_product_categories ul.product-categories ul.children,
.widget_product_categories ul.product-categories ul.children {
  list-style: none !important;
  margin: 12px 0 0 18px !important;
  padding: 12px 0 0 !important;
  border-top: 1px dotted var(--rule);
  display: block !important;
}
.woocommerce .widget_product_categories ul.product-categories ul.children li,
.widget_product_categories ul.product-categories ul.children li {
  padding: 6px 0 !important;
  border-bottom: none !important;
  font-size: 15px;
}

/* Actieve categorie subtiel uitlichten */
.woocommerce .widget_product_categories ul.product-categories li.current-cat > a,
.woocommerce .widget_product_categories ul.product-categories li.current-cat-parent > a,
.widget_product_categories ul.product-categories li.current-cat > a {
  color: var(--accent) !important;
  font-weight: 500 !important;
  font-style: italic;
}

 
/* ---- Prijsfilter ---- */
.woocommerce .widget_price_filter .price_slider_amount,
.widget_price_filter .price_slider_amount {
  text-align: left;
  margin-top: 16px;
}
.woocommerce .widget_price_filter .price_slider_amount .button,
.widget_price_filter .price_slider_amount .button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  float: left !important;
  cursor: pointer;
}
.woocommerce .widget_price_filter .price_slider_amount .button:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
.woocommerce .widget_price_filter .price_label,
.widget_price_filter .price_label {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 15px !important;
  color: var(--ink-78) !important;
  float: right !important;
  padding-top: 8px;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--rule) !important;
  border-radius: 0 !important;
  border: none !important;
  height: 2px !important;
  margin: 16px 0 !important;
}
.woocommerce .widget_price_filter .ui-slider-range {
  background: var(--accent) !important;
  border-radius: 0 !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--ink) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  top: -7px !important;
  cursor: grab;
}
 
/* ---- Recent bekeken producten ---- */
.woocommerce .widget_recently_viewed_products ul.product_list_widget,
.widget_recently_viewed_products ul.product_list_widget {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce .widget_recently_viewed_products ul.product_list_widget li,
.widget_recently_viewed_products ul.product_list_widget li {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 12px;
}
.woocommerce .widget_recently_viewed_products ul.product_list_widget li:last-child {
  border-bottom: none !important;
}
.woocommerce .widget_recently_viewed_products ul.product_list_widget li a {
  text-decoration: none !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1;
}
.woocommerce .widget_recently_viewed_products ul.product_list_widget li img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  background: var(--color-white);
  padding: 4px;
  margin: 0 !important;
  flex-shrink: 0;
  float: none !important;
}
.woocommerce .widget_recently_viewed_products ul.product_list_widget li .product-title {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}
.woocommerce .widget_recently_viewed_products ul.product_list_widget li .woocommerce-Price-amount,
.widget_recently_viewed_products ul.product_list_widget li .woocommerce-Price-amount {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  color: var(--ink-78) !important;
  margin-left: auto;
  display: block;
  text-align: right;
  padding: 4px 0;
}
 
/* ---- Betalen-widget ---- */
.widget.text-2 .textwidget {
  text-align: center;
}
.widget.text-2 .textwidget img {
  max-width: 60px;
  height: auto;
  margin: 0 auto;
}
 
/* Mobiele filter-toggle ---- */
.btn-primary.d-block {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}
 
/* Verberg de "Geen producten" winkelmand-tekst die toch hidden is */
.widget_shopping_cart[style*="none"] { display: none !important; }

/* =============================================================
   *** WOOCOMMERCE SINGLE PRODUCT STYLING ***
   Plak deze CSS bij de webshop-CSS in Customizer → Aanvullende CSS
   ============================================================= */
 
/* ---- Twee koloms layout: gallery + summary ---- */
.woocommerce div.product,
.woocommerce-page div.product {
  display: grid !important;
  grid-template-columns: 5fr 6fr !important;
  gap: 56px !important;
  margin-bottom: 64px !important;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
  grid-column: 1 / -1 !important;
}
.woocommerce div.product .related,
.woocommerce-page div.product .related {
  grid-column: 1 / -1 !important;
}
 
/* ---- Productafbeelding ---- */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image {
  background: #fff;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  padding: 32px !important;
  margin: 0 !important;
  display: block;
}
.woocommerce div.product .woocommerce-product-gallery__trigger {
  top: 16px !important;
  right: 16px !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(245, 239, 231, 0.9) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  z-index: 99;
}
 
/* ---- Producttitel (zit meestal in de page-header) ---- */
.single-product .page-header,
.woocommerce.single-product .page-header {
  text-align: left !important;
  padding: 32px 0 24px !important;
  border-bottom: 1px solid var(--rule) !important;
  margin-bottom: 48px !important;
  border-top: 1px solid var(--color-primary);
  padding-top: 16px !important;
}
.single-product .page-header::before,
.woocommerce.single-product .page-header::before {
  content: 'Webshop · Productlijnen';
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.single-product .page-header h1,
.woocommerce.single-product .page-header h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
 
/* ---- Prijs in summary ---- */
.woocommerce div.product p.price,
.woocommerce-page div.product p.price,
.woocommerce div.product .summary .price,
.woocommerce-page div.product .summary .price {
  font-family: var(--serif) !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 24px !important;
  padding: 0 0 24px !important;
  border-bottom: 1px solid var(--rule) !important;
  line-height: 1 !important;
}
 
/* ---- Korte beschrijving (bulletpoints) als selling points ---- */
.woocommerce-product-details__short-description {
  margin: 0 0 24px !important;
}
.woocommerce-product-details__short-description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-product-details__short-description ul li {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--ink-78) !important;
  padding: 8px 0 8px 24px !important;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.woocommerce-product-details__short-description ul li:last-child {
  border-bottom: none !important;
}
.woocommerce-product-details__short-description ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--accent);
  font-style: normal;
}
 
/* ---- Voorraadstatus ---- */
.woocommerce div.product p.stock,
.woocommerce-page div.product p.stock {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  padding: 12px 0 !important;
  margin: 24px 0 !important;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.woocommerce div.product p.stock.in-stock {
  color: var(--accent) !important;
}
.woocommerce div.product p.stock.out-of-stock {
  color: var(--ink-55) !important;
}
.woocommerce div.product p.stock.available-on-backorder {
  color: var(--ink-70) !important;
}
/* Voeg automatisch een rustig icoon-streepje toe */
.woocommerce div.product p.stock::before {
  content: '·';
  margin-right: 8px;
  color: var(--accent);
  font-weight: bold;
}
 
/* ---- Aantal-input + Toevoegen knop ---- */
.woocommerce div.product form.cart,
.woocommerce-page div.product form.cart {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin: 24px 0 32px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
  margin: 0 !important;
  flex-shrink: 0;
}
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-page div.product form.cart .quantity input.qty {
  width: 64px !important;
  height: 100% !important;
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 20px !important;
  text-align: center !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 12px 8px !important;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce-page div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt {
  flex: 1 !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: transparent !important;
  color: var(--ink) !important;
}
 
/* ---- Product meta (SKU + categorie) ---- */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--ink-55) !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--rule) !important;
  margin-top: 24px !important;
}
.woocommerce div.product .product_meta > span,
.woocommerce-page div.product .product_meta > span {
  display: block;
  padding: 4px 0;
}
.woocommerce div.product .product_meta a {
  color: var(--ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ink-55);
}
.woocommerce div.product .product_meta a:hover {
  border-color: var(--ink) !important;
}
.woocommerce div.product .product_meta .sku {
  color: var(--ink-70) !important;
  font-family: var(--mono);
  letter-spacing: 0.1em;
}
 
/* ---- Tabs (Beschrijving, etc.) ---- */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
  margin: 64px 0 !important;
  padding-top: 48px !important;
   border-top: 0px solid var(--rule) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  border-bottom: 1px solid var(--rule) !important;
  display: flex;
  gap: 32px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs::before {
  display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--ink-55) !important;
  padding: 0 0 14px !important;
  display: block;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  text-decoration: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--ink) !important;
}
 
/* Tab content */
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce-page div.product .woocommerce-Tabs-panel {
  padding: 16px 0 !important;
  max-width: 720px;
}
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce-page div.product .woocommerce-Tabs-panel h2 {
  display: none !important; /* "Beschrijving" h2 is dubbel met tab — verbergen */
}
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce-page div.product .woocommerce-Tabs-panel p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--ink-78);
  margin: 0 0 18px !important;
}
.woocommerce div.product .woocommerce-Tabs-panel h3,
.woocommerce-page div.product .woocommerce-Tabs-panel h3 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  margin: 32px 0 12px !important;
}
 
/* ---- Gerelateerde producten ---- */
.woocommerce div.product section.related,
.woocommerce-page div.product section.related,
.woocommerce .related.products {
  border-top: 1px solid var(--rule) !important;
  padding-top: 64px !important;
  margin-top: 32px !important;
}
.woocommerce div.product section.related > h2,
.woocommerce-page div.product section.related > h2,
.woocommerce .related.products > h2 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  text-align: center;
  margin: 0 0 8px !important;
  font-style: italic;
}
/* Eyebrow voor gerelateerde producten */
.woocommerce div.product section.related::before,
.woocommerce-page div.product section.related::before,
.woocommerce .related.products::before {
  content: 'Misschien ook interessant';
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
}
 
/* ---- Responsive ---- */
@media (max-width: 900px) {
  .woocommerce div.product,
  .woocommerce-page div.product {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
    gap: 16px;
  }
  .woocommerce div.product form.cart {
    flex-direction: column;
  }
  .woocommerce div.product form.cart .quantity input.qty {
    width: 100% !important;
  }
}
 
</style>
</head>
<body>
 
<div class="preview-wrapper woocommerce single-product">
 
  <!-- Page header (titel) — komt buiten de product div in WooCommerce -->
  <div class="page-header">
    <h1>IMAGE MD – Restoring Eye Masks (1 paar)</h1>
  </div>
 
  <!-- ===================== SINGLE PRODUCT ===================== -->
  <div id="product-2606" class="product type-product post-2606 status-publish first onbackorder product_cat-image-md has-post-thumbnail purchasable product-type-simple">
 
    <!-- Gallery links -->
    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4">
      <a href="#" role="button" class="woocommerce-product-gallery__trigger" aria-label="Volledig scherm bekijken">
        <span aria-hidden="true">⛶</span>
      </a>
      <div class="woocommerce-product-gallery__wrapper">
        <div class="woocommerce-product-gallery__image">
          <img src="https://chametiel.nl/wp-content/uploads/sites/150/2024/07/Restoring-Eye-Mas-550x550.png" alt="IMAGE MD - Restoring Eye Masks">
        </div>
      </div>
    </div>
 
    <!-- Summary rechts -->
    <div class="summary entry-summary">
 
      <p class="price">
        <span class="woocommerce-Price-amount amount">
          <bdi><span class="woocommerce-Price-currencySymbol">€</span>7,50</bdi>
        </span>
      </p>
 
      <div class="woocommerce-product-details__short-description">
        <ul>
          <li>Hydraterend</li>
          <li>Voor alle huidtypen</li>
        </ul>
      </div>
 
      <p class="stock available-on-backorder">Beschikbaar via nabestelling</p>
 
      <form class="cart" method="post">
        <div class="quantity">
          <input type="number" class="input-text qty text" name="quantity" value="1" min="1" step="1">
        </div>
        <button type="submit" name="add-to-cart" value="2606" class="single_add_to_cart_button button alt">
          Toevoegen aan winkelwagen
        </button>
      </form>
 
      <div class="product_meta">
        <span class="sku_wrapper">Artikelnummer: <span class="sku">MD-227</span></span>
        <span class="posted_in">Categorie: <a href="#" rel="tag">Image MD</a></span>
      </div>
 
    </div>
 
    <!-- Tabs (volledige breedte) -->
    <div class="woocommerce-tabs wc-tabs-wrapper">
      <ul class="tabs wc-tabs" role="tablist">
        <li class="description_tab active" id="tab-title-description">
          <a href="#tab-description">Beschrijving</a>
        </li>
      </ul>
      <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab" id="tab-description">
        <h2>Beschrijving</h2>
        <p>Geniet overal en altijd van stralende ogen. Deze hydrogel oogmaskers verminderen fijne lijntjes en tekenen van vermoeidheid in enkele minuten. De handige 1-paar verpakkingen maken stralende ogen onderweg een fluitje van een cent.</p>
        <h3>Gebruik &amp; tips</h3>
        <p>Haal elk oogmasker uit de verpakking met behulp van een pincet. Breng met de vingertoppen aan op de gereinigde huid en plaats het bredere uiteinde in de buitenste ooghoek. Laat 10 – 15 minuten zitten en verwijder vervolgens de oogmaskers. Dagelijks gebruiken of zo vaak als gewenst.</p>
        <p><strong>LET OP:</strong> Alleen voor uitwendig gebruik. Stop het gebruik bij tekenen van irritatie. Vermijd contact met de ogen. Bij contact grondig spoelen met koel water. Buiten bereik van kinderen bewaren. Op een koele, droge plaats bewaren.</p>
      </div>
    </div>
 
    <!-- Gerelateerde producten -->
    <section class="related products">
      <h2>Gerelateerde producten</h2>
      <ul class="products columns-4">
 
        <li class="product type-product">
          <a href="#" class="woocommerce-LoopProduct-link">
            <div class="thumbnail-wrapper">
              <img src="https://chametiel.nl/wp-content/uploads/sites/150/2020/04/eyegel.jpg" alt="">
            </div>
            <h2 class="woocommerce-loop-product__title">MD – Restoring Collagen Recovery Eye Gel</h2>
            <span class="price"><span class="woocommerce-Price-amount"><bdi>€112,00</bdi></span></span>
          </a>
          <a href="#" class="button add_to_cart_button">Toevoegen aan winkelwagen</a>
        </li>
 
        <li class="product type-product">
          <a href="#" class="woocommerce-LoopProduct-link">
            <div class="thumbnail-wrapper">
              <img src="https://chametiel.nl/wp-content/uploads/sites/150/woocommerce-placeholder.png" alt="">
            </div>
            <h2 class="woocommerce-loop-product__title">IMAGE MD – Skincare System</h2>
            <span class="price"><span class="woocommerce-Price-amount"><bdi>€225,00</bdi></span></span>
          </a>
          <a href="#" class="button add_to_cart_button">Toevoegen aan winkelwagen</a>
        </li>
 
        <li class="product type-product">
          <a href="#" class="woocommerce-LoopProduct-link">
            <div class="thumbnail-wrapper">
              <img src="https://chametiel.nl/wp-content/uploads/sites/150/2020/04/MD-Cleanser-A.jpg" alt="">
            </div>
            <h2 class="woocommerce-loop-product__title">MD – Restoring Facial Cleanser</h2>
            <span class="price"><span class="woocommerce-Price-amount"><bdi>€48,00</bdi></span></span>
          </a>
          <a href="#" class="button add_to_cart_button">Toevoegen aan winkelwagen</a>
        </li>
 
        <li class="product type-product">
          <a href="#" class="woocommerce-LoopProduct-link">
            <div class="thumbnail-wrapper">
              <img src="https://chametiel.nl/wp-content/uploads/sites/150/2020/04/restoring-youth-serum.jpg" alt="">
            </div>
            <h2 class="woocommerce-loop-product__title">MD – Restoring Youth Serum</h2>
            <span class="price"><span class="woocommerce-Price-amount"><bdi>€105,00</bdi></span></span>
          </a>
          <a href="#" class="button add_to_cart_button">Toevoegen aan winkelwagen</a>
        </li>
 
      </ul>
    </section>
 
  </div>
 
</div>
 
<!-- Voor de preview hieronder ook de productgrid styling die we al hadden -->
<style>
.woocommerce ul.products {
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
}
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.woocommerce ul.products li.product .thumbnail-wrapper {
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: #fff;
  margin-bottom: 16px;
}
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 24px;
  background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.woocommerce ul.products li.product .price {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
  border: none !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product a.button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  margin: auto 0 0 !important;
  text-align: center !important;
  display: block !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

.products.columns-4::before {
  display: none !important;
}
.woocommerce .widget_product_categories ul, aside div.block.treatments ul {
  border: 0px solid #e6e6e6;
}

/* ============================================================
   Netbeauty admin custom additions — 2026-05-01
   ============================================================ */

/* Make trip-card fully clickable, keep visual styling intact */
.trip-card { position: relative; }
.trip-card a.trip-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.trip-card a.trip-card-link:hover .trip-cta { text-decoration: underline; }
.trip-card a.trip-card-link img { transition: transform .6s ease, filter .6s ease; }
.trip-card:hover a.trip-card-link img { transform: scale(1.02); filter: brightness(1.03); }
/* Hide WP-autop empty trailing anchor */
.trip-card > p:empty,
.trip-card > p > a.trip-card-link:empty,
.trip-card a.trip-card-link:empty { display: none; }
.trip-card p:has(> a.trip-card-link:empty) { display: none; }

/* "Maak kennis met Laura" inline-link as actual link */
.inline-link a { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 16px; cursor: pointer; }
.inline-link a:hover span { text-decoration: underline; }

/* ===== Footer Netbeauty logo: maak bruin via filter ===== */
.socket img[src*="netbeauty"] {
  /* Convert white SVG to brand brown #6F4433 (best-effort filter) */
  filter: brightness(0) saturate(100%) invert(28%) sepia(18%) saturate(1567%) hue-rotate(346deg) brightness(94%) contrast(89%);
  opacity: 0.85;
  transition: opacity .2s ease;
}
.socket img[src*="netbeauty"]:hover { opacity: 1; }

/* Footer socket: betere uitlijning op cremebeige achtergrond */
.socket { font-family: var(--font-body, 'Inter', sans-serif); }
.socket .row { align-items: center; }
.socket a { color: var(--color-text-footer, #221e1f); }

/* ===== Desktop dropdown menu — Chamé typografie ===== */
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--color-neutral-warm, #e7dfd6);
  border-radius: 0;
  box-shadow: 0 14px 40px -20px rgba(60, 40, 30, 0.18);
  padding: 14px 0 !important;
  min-width: 220px;
  margin-top: 8px !important;
}
.dropdown-menu li > a {
  font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-text, #2d2a26) !important;
  font-style: normal !important;
  padding: 10px 22px !important;
  transition: background .2s ease, color .2s ease;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
  background: var(--color-brand-light, #f4efeb) !important;
  color: var(--color-primary, #6F4433) !important;
}

/* ===== Mobiel menu — beeldvullend layout (clean v2) ===== */
@media (max-width: 991px) {
  /* Override theme padding-top: 150px van .navbar-collapse */
  body.mm-fullsize .navbar-collapse,
  body.mm-fullsize .navbar-collapse.in,
  body.mm-fullsize .navbar-collapse.show,
  body.mm-fullsize .navbar-collapse.collapsing {
    background: var(--color-brand-light, #f4efeb);
    padding-top: 64px !important;
    padding-bottom: 24px !important;
  }
  /* Bootstrap height-transitie uitzetten: voorkomt 'verspring' bij openen */
  body.mm-fullsize .navbar-collapse.collapsing {
    height: 100% !important;
    transition: none !important;
    overflow: auto !important;
  }
  body.mm-fullsize .navbar-collapse.in,
  body.mm-fullsize .navbar-collapse.show {
    height: 100% !important;
  }
  /* Top-level menu lijst */
  body.mm-fullsize .navbar-collapse #primary_navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 8px 16px 24px !important;
    margin: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }
  body.mm-fullsize .navbar-collapse #primary_navigation > li {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    float: none !important;
    position: relative;
  }
  body.mm-fullsize .navbar-collapse #primary_navigation > li > a {
    display: block;
    width: 100%;
    padding: 12px 8px !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--color-text, #2d2a26) !important;
    background: transparent !important;
    text-shadow: none;
  }

  /* Hamburger icoon → X als menu open */
  body:has(.navbar-collapse.in) .navbar-toggle.default .fa-bars,
  body:has(.navbar-collapse.show) .navbar-toggle.default .fa-bars,
  body:has(.navbar-collapse.in) .navbar-toggle.default i,
  body:has(.navbar-collapse.show) .navbar-toggle.default i {
    color: var(--color-primary, #6F4433) !important;
  }
  body:has(.navbar-collapse.in) .navbar-toggle.default .fa-bars::before,
  body:has(.navbar-collapse.show) .navbar-toggle.default .fa-bars::before {
    content: "\f00d" !important; /* fa-times */
  }
  /* Fallback voor oudere browsers zonder :has() — toggle altijd zichtbaar */
  body.mm-fullsize .navbar-toggle.default {
    color: var(--color-primary, #6F4433) !important;
  }
  body.mm-fullsize .navbar-toggle.default i {
    color: var(--color-primary, #6F4433) !important;
  }
  
  /* "Afspraak maken" als pill button — alleen top-level menu-item-22 */
  body.mm-fullsize .navbar-collapse #primary_navigation > li.menu-item-22 > a {
    margin: 16px auto 0 !important;
    padding: 14px 28px !important;
    border: 1px solid var(--color-primary, #6F4433);
    border-radius: 999px;
    color: var(--color-primary, #6F4433) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    width: auto !important;
  }
  /* Sub-menu's standaard ingeklapt */
  body.mm-fullsize .navbar-collapse #primary_navigation .dropdown-menu,
  body.mm-fullsize .navbar-collapse #primary_navigation .sub-menu,
  body.mm-fullsize .navbar-collapse #primary_navigation > li > ul {
    display: none;
    position: static !important;
    float: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 4px 0 8px !important;
    margin: 0 auto !important;
    width: 100% !important;
    list-style: none !important;
  }
  body.mm-fullsize .navbar-collapse #primary_navigation li.open > .dropdown-menu,
  body.mm-fullsize .navbar-collapse #primary_navigation li.open > .sub-menu,
  body.mm-fullsize .navbar-collapse #primary_navigation li.open > ul,
  body.mm-fullsize .navbar-collapse #primary_navigation .dropdown-menu[style*="display: block"],
  body.mm-fullsize .navbar-collapse #primary_navigation .sub-menu[style*="display: block"] {
    display: block !important;
  }
  /* Sub-menu items */
  body.mm-fullsize .navbar-collapse #primary_navigation .dropdown-menu li,
  body.mm-fullsize .navbar-collapse #primary_navigation .sub-menu li {
    width: 100%;
    text-align: center;
  }
  body.mm-fullsize .navbar-collapse #primary_navigation .dropdown-menu li > a,
  body.mm-fullsize .navbar-collapse #primary_navigation .sub-menu li > a {
    display: block;
    padding: 8px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--color-text, #2d2a26) !important;
    background: transparent !important;
    opacity: 0.85;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* ~~~ Caret pijltje: alleen .sub-arrow tonen, .caret verbergen (anders 2 pijltjes) ~~~ */
  body.mm-fullsize .navbar-collapse #primary_navigation > li.dropdown > a.dropdown-toggle .caret {
    display: none !important;
  }
  body.mm-fullsize .navbar-collapse #primary_navigation > li.dropdown > a.dropdown-toggle .sub-arrow {
    display: inline-block !important;
    width: 0;
    height: 0;
    margin-left: 10px;
    vertical-align: middle;
    border-top: 6px solid var(--color-primary, #6F4433);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 0;
    background: none !important;
    transition: transform .2s ease;
  }
  /* Open state: pijltje omhoog */
  body.mm-fullsize .navbar-collapse #primary_navigation > li.dropdown.open > a.dropdown-toggle .sub-arrow,
  body.mm-fullsize .navbar-collapse #primary_navigation > li.dropdown > a.dropdown-toggle[aria-expanded="true"] .sub-arrow {
    transform: rotate(180deg);
  }
}

/* ===== Behandeling hero image: minder ruimte tot tekst ===== */
.br-hero-image { padding-bottom: 16px !important; }
section.intro.text.block1 + section.intro.text { padding-top: 24px; }
section.intro.text.block1 { padding-bottom: 24px; }

/* ===== Lash Rituelen blok centreren op /diensten/nails/ ===== */
.page-id-1569 .br-placeholder,
.page-id-1993 .br-placeholder {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-id-1569 .br-placeholder h1,
.page-id-1569 .br-placeholder h2,
.page-id-1569 .br-placeholder h3,
.page-id-1569 .br-placeholder p,
.page-id-1993 .br-placeholder h1,
.page-id-1993 .br-placeholder h2,
.page-id-1993 .br-placeholder h3,
.page-id-1993 .br-placeholder p {
  text-align: center;
}

/* ===== Webshop: gerelateerde producten spacing ===== */
.woocommerce div.product section.related.products,
.woocommerce-page div.product section.related.products,
.woocommerce .related.products,
body .related.products {
  padding-top: 24px !important;   /* was 64px - minder ruimte boven */
}
.woocommerce div.product section.related.products::before,
.woocommerce-page div.product section.related.products::before,
.woocommerce .related.products::before {
  margin-bottom: 14px !important;
}
.woocommerce div.product section.related.products > h2,
.woocommerce-page div.product section.related.products > h2,
.woocommerce .related.products > h2 {
  margin-bottom: 56px !important;  /* meer ruimte tussen kop en cards */
}
/* Gat tussen omschrijving en gerelateerde producten verkleinen */
.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce-Tabs-panel { padding-bottom: 8px !important; margin-bottom: 24px !important; }
.single-product div.product + .related.products,
.single-product .product .summary ~ .related.products { margin-top: 0 !important; }



/* Journal card clickable wrapping */
.journal-card { position: relative; }
.journal-card a.journal-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.journal-card a.journal-card-link:hover .journal-cta { text-decoration: underline; }
.journal-card a.journal-card-link:hover .journal-title { color: var(--color-primary, #6F4433); }
.journal-card > p:empty,
.journal-card > p > a.journal-card-link:empty,
.journal-card a.journal-card-link:empty { display: none; }


/* ===== Netbeauty admin custom additions — 2026-05-01 ronde 2 ===== */

/* ----- Footer socket layout: logo netjes inline naast tekst ----- */
.socket .col-md-18.right { text-align: right; }
.socket .col-md-18.right > span { display: inline-flex; align-items: center; }
.socket .col-md-18.right a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
}
.socket .col-md-18.right a img {
  display: inline-block !important;
  vertical-align: middle;
  height: 12px;
  width: auto;
  margin: 0 !important;
}
@media (max-width: 767px) {
  .socket .col-md-30.left,
  .socket .col-md-18.right { text-align: center; }
  .socket .col-md-18.right { margin-top: 8px; }
  .socket .col-md-18.right a { white-space: normal; justify-content: center; }
}

/* ----- Footer logo CHAMÉ uppercase styling ----- */
.footer-logo {
  text-transform: none; /* content already uppercase */
  letter-spacing: 0.04em;
}
.footer-logo .italic { font-style: italic; }


/* ===== Journal/trip cards: verberg wpautop empty wrappers ===== */
.trip-card > p:empty, .journal-card > p:empty,
.trip-card a.trip-card-link > p:empty, .journal-card a.journal-card-link > p:empty,
.trip-card a.trip-card-link:empty, .journal-card a.journal-card-link:empty,
.trip-card p:has(> a.trip-card-link:empty),
.journal-card p:has(> a.journal-card-link:empty) { display: none !important; margin: 0 !important; padding: 0 !important; }


/* === Netbeauty admin: aanpassingen mei 2026 === */

/* --- Menu: dropdown dichter onder knop & kleinere padding --- */
header .menu-item-has-children > .dropdown-menu,
header ul.sub-menu {
  margin-top: 0 !important;
  padding-top: 6px !important;
}

/* --- Logo iets kleiner, header compacter --- */
header .logo,
header img.logo,
header .logo img,
header .header img.logo,
header .header .logo,
header .header .logo img {
  max-height: 44px !important;
  height: 44px !important;
  width: auto !important;
}
header .header .holder { padding: 8px 0 !important; }
header .header .row.no-gutter { align-items: center; }
header nav ul.nav > li > a,
header .menu > li > a,
header ul.nav > li > a { padding-top: 10px !important; padding-bottom: 10px !important; }

/* --- Breadcrumbs verbergen op gehele website --- */
.breadcrumbs,
#breadcrumbs,
.breadcrumb,
.woocommerce-breadcrumb { display: none !important; }

/* --- Webshop: leesbare hover op zijbalk-categorieën --- */
.woocommerce .widget_product_categories ul.product-categories li:hover > a,
.woocommerce .widget_product_categories ul.product-categories li:focus > a,
.woocommerce .widget_product_categories ul.product-categories li:hover > a:hover,
.woocommerce .widget_product_categories ul.product-categories li:focus > a:focus {
  color: #ffffff !important;
  font-style: normal !important;
}

/* --- Webshop: minder visuele lijntjes (rustigere productenlijst) --- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
  border: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  color: #6F4433 !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: transparent !important;
  color: #512D1A !important;
}
/* Imageachtergrond integreren met paginakleur (geen "kaderlijntje" effect) */
.woocommerce ul.products li.product .thumbnail-wrapper,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
  background: transparent !important;
}
.woocommerce ul.products li.product .thumbnail-wrapper { padding: 0 !important; }
.woocommerce ul.products li.product img { padding: 8px !important; }

/* --- Behandelingen-overzichtspagina (categorie): minder ruimte tussen intro en foto --- */
section.intro.text + section.br-hero-image,
section.br-hero-image { padding-top: 16px !important; }
section.intro.text.block1 { padding-bottom: 16px !important; }

/* --- On-page CTA "Klaar om te boeken..." weghalen (we hebben al een globale CTA) --- */
section.br-outro { display: none !important; }

/* --- Home: lijntje "Maak kennis met Laura" centreren tov tekst --- */
.welcome .inline-link { align-items: baseline !important; }
.welcome .inline-link .line {
  position: relative;
  top: -0.4em;
}
.welcome .inline-link p { margin: 0 !important; }

/* --- Home: "Uit het atelier" - meer ruimte onder kop, "Lees meer" onderaan uitlijnen --- */
.journal .journal-head { margin-bottom: 32px !important; }
.journal .journal-head h2 { margin-bottom: 12px !important; }
.journal .journal-card { position: relative; padding-bottom: 64px !important; }
.journal .journal-card .journal-cta {
  position: absolute;
  left: 28px;
  bottom: 28px;
  margin: 0 !important;
}
/* "Lees ?" wordt "Lees meer ?" via CSS content-replace */
.journal .journal-card .journal-cta { font-size: 0; }
.journal .journal-card .journal-cta::before {
  content: "Lees meer \2197";
  font-size: 16px;
}

/* --- Contact / afspraak maken: in lijn met de rest van de site --- */
.page-template-template-contact .container > .row { gap: 24px; }
.page-template-template-contact h1 {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 500;
}
.page-template-template-contact .nf-form-cont,
.page-template-template-contact .ninja-forms-form-wrap {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.page-template-template-contact .nf-form-content input:not([type="button"]):not([type="submit"]),
.page-template-template-contact .nf-form-content textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(81,45,26,0.25) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-template-template-contact .nf-form-content input[type="button"],
.page-template-template-contact .nf-form-content input[type="submit"] {
  background: #6F4433 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --- Contact: extra: witte form-wrap weghalen --- */
body.page-template-template-contact section.contact .col-md-32 .wrap {
  margin-top: 30px;
}
body.page-template-template-contact section.contact h2 {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 500;
}
body.page-template-template-contact .nf-form-content input[type="button"],
body.page-template-template-contact .nf-form-content input[type="submit"] {
  background: var(--color-primary, #6F4433) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --- Before & after parent: subtielere categorie-knoppen --- */
.tablet .before {
  background: transparent !important;
  border: 1px solid var(--color-primary-light, #BB8768) !important;
  border-radius: 9999px !important;
}
.tablet .before h4 {
  color: var(--color-primary-dark, #512D1A) !important;
  font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.tablet a:hover .before {
  background: var(--color-primary-dark, #512D1A) !important;
  border-color: var(--color-primary-dark, #512D1A) !important;
}
.tablet a:hover .before h4 {
  color: #fff !important;
}


/* === Netbeauty admin: vervolg-aanpassingen mei 2026 (v2) === */

/* Menu: dropdown gap dichten (geen interne padding meer) */
header .menu-item-has-children .dropdown-menu,
header .menu-item-has-children .sub-menu {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
header .menu-item-has-children .dropdown-menu > li:first-child,
header .menu-item-has-children .sub-menu > li:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Header: holder compacter nu het logo kleiner is */
.header .holder {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.header .holder .wrapper {
  height: auto !important;
}

/* Webshop product detail: random lijntjes weg */
.single-product .page-header {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__trigger {
  border: 0 !important;
}
.single-product .summary .price,
.single-product .summary .stock {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.single-product .product_meta {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.single-product .product_meta a {
  border-bottom: 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-product .woocommerce-tabs.wc-tabs-wrapper {
  border-top: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
  border: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
  border-bottom: 2px solid var(--color-primary, #6F4433) !important;
}


/* === Netbeauty admin: header v3 fix mei 2026 === */

/* Logo-holder net zo hoog laten worden als de menu-rij zodat het logo verticaal mee centreert met het menu */
.header.full-width .row.no-gutter { align-items: center !important; }
.header.full-width .col-sm-10,
.header.full-width .col-sm-10 .holder,
.header.full-width .col-sm-38,
.header.full-width .col-sm-38 .holder { height: auto !important; }
.header.full-width .col-sm-10 .holder .wrapper,
.header.full-width .col-sm-38 .holder .wrapper { vertical-align: middle !important; }

/* Dropdown direct onder de tekst openen (geen wit gat meer) */
header nav .menu-item-has-children { padding-bottom: 0 !important; }
header nav .menu-item-has-children > .dropdown-menu,
header nav .menu-item-has-children > .sub-menu {
  top: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* fallback voor het geval de li padding niet weg kan: schuif dropdown op met negatieve translate */
header nav ul > li.menu-item-has-children > ul.dropdown-menu,
header nav ul > li.menu-item-has-children > ul.sub-menu {
  transform: translateY(0) !important;
}


/* === Netbeauty admin: header v6 menu compacter mei 2026 === */
/* Verwijder de grote margin-bottom op menu-links zodat de nav-rij dezelfde hoogte krijgt als de logo-holder en alles netjes verticaal centreert */
.header.full-width nav.navbar ul li > a { margin-bottom: 0 !important; }
.header.full-width nav.navbar ul li.menu-item-has-children { padding-top: 0 !important; padding-bottom: 0 !important; }
.header.full-width nav.navbar ul li { padding-top: 0 !important; padding-bottom: 0 !important; }

/* === Netbeauty admin: coffee corner QR v2 mei 2026 === */
.coffee .qr-row { align-items: center; gap: 18px; }
.coffee .qr {
  width: 140px !important;
  height: auto !important;
  padding: 10px !important;
  background: var(--bg, #f5efe7) !important;
  border-radius: 8px !important;
  display: block !important;
  flex: 0 0 auto;
}
.coffee .qr-inner {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  display: block;
}
.coffee .qr-inner img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
}
@media (max-width: 640px) {
  .coffee .qr { width: 120px !important; }
}




/* === Netbeauty admin: ronde 7 mei 2026 (v8) === */
/* Mobiel menu: terug naar theme-default. Geen eigen hamburger/positie/dropdown overrides meer. */

/* --- Home: meer ruimte onder kop bij journal/blog kaarten --- */
.journal-card .journal-title,
.journal-card-link .journal-title,
.home .journal-title,
h3.journal-title {
  margin-bottom: 14px !important;
  padding-bottom: 4px !important;
}
.journal-card .journal-body,
.journal-card-link .journal-body {
  margin-top: 0 !important;
}

/* --- Webshop: knop "Toevoegen aan winkelwagen" met achtergrond --- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product a.button,
.woocommerce-page ul.products li.product .add_to_cart_button {
  background: #6F4433 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: background-color .2s ease, transform .15s ease !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product .add_to_cart_button:hover {
  background: #512D1A !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* --- Contactpagina: rustiger ritme, GEEN eigen kader om formulier --- */
.page .wpcf7 {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 8px;
}
.page .wpcf7 input.wpcf7-form-control:not([type=submit]),
.page .wpcf7 textarea.wpcf7-form-control {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(81,45,26,.18) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin-bottom: 8px !important;
  transition: border-color .2s ease;
}
.page .wpcf7 input.wpcf7-form-control:focus,
.page .wpcf7 textarea.wpcf7-form-control:focus {
  outline: 0 !important;
  border-bottom-color: #6F4433 !important;
}
.page .wpcf7 .wpcf7-not-valid-tip {
  display: none !important;
}
.page .wpcf7 input[type=submit].wpcf7-submit {
  background: #6F4433 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  letter-spacing: .12em !important;
  margin-top: 18px !important;
}
.page aside .block + .block { margin-top: 28px !important; }
.page aside .head { padding-bottom: 8px !important; }
.page aside .block h3,
.page aside .block h2 { margin-bottom: 14px !important; }
@media (max-width: 767px) {
  .page aside .block + .block { margin-top: 24px !important; }
}

/* --- Contact: layout meer in balans (map groter, aside breder op desktop) --- */
@media (min-width: 992px) {
  body.page-template-template-contact .col-md-32 {
    width: 65% !important;
  }
  body.page-template-template-contact .col-md-14.col-md-offset-2 {
    width: 32% !important;
    margin-left: 3% !important;
  }
  body.page-template-template-contact aside .map,
  body.page-template-template-contact aside #map,
  body.page-template-template-contact aside [id*=map],
  body.page-template-template-contact aside .gm-style,
  body.page-template-template-contact aside .acf-map {
    height: 320px !important;
    min-height: 320px !important;
  }
  body.page-template-template-contact aside > .block:first-of-type .map,
  body.page-template-template-contact aside .block iframe {
    height: 320px !important;
  }
}

/* --- Topbar fade-cycle op mobiel (v2) --- */
@media (max-width: 767px) {
  .topbar { position: relative; }
  .topbar .container { position: relative; }
  .topbar .ticker {
    position: relative !important;
    display: block !important;
    height: 1.6em !important;
    overflow: hidden !important;
  }
  .topbar .ticker br { display: none !important; }
  .topbar .ticker > span {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    text-align: center !important;
    opacity: 0;
    will-change: opacity;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }
  .topbar .ticker > span:nth-of-type(1) { animation-name: chame-topbar-1; }
  .topbar .ticker > span:nth-of-type(2) { animation-name: chame-topbar-2; }
  .topbar .ticker > span:nth-of-type(3) { animation-name: chame-topbar-3; }
}
@keyframes chame-topbar-1 {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes chame-topbar-2 {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  35%  { opacity: 1; }
  63%  { opacity: 1; }
  68%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes chame-topbar-3 {
  0%   { opacity: 0; }
  63%  { opacity: 0; }
  68%  { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; }
}



/* === Webshop fixes (zijbalk hover + knop hoeken) === */
/* 1. Sidebar productcategorieen: hover tekst zichtbaar houden
      (override op de witte hover-tekst uit custom-styles.css.php) */
body.woocommerce .widget_product_categories ul.product-categories li:hover > a,
body.woocommerce .widget_product_categories ul.product-categories li:focus > a,
body.woocommerce .widget_product_categories ul.product-categories li:hover > a:hover,
body.woocommerce .widget_product_categories ul.product-categories li:focus > a:focus,
body .widget_product_categories ul.product-categories li:hover > a {
  color: var(--ink) !important;
  font-style: italic !important;
}

/* 2. WooCommerce knoppen vierkante hoeken (matchend met de rest van de site) */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce .button,
body.woocommerce-page .button,
body .woocommerce ul.products li.product .button,
body .woocommerce-cart table.cart input.button,
body .woocommerce-checkout #payment #place_order,
body .woocommerce .price_slider_amount .button,
body .widget_product_search button[type="submit"] {
  border-radius: 0 !important;
}


/* === br-care block fix (subdiensten zoals No Trim Brows / Brows) === */
.br-care { padding: 24px 16px; }
.br-care__inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.br-care__head { text-align: center; margin-bottom: 32px; }
.br-care__head .chame-eyebrow { display: inline-block; }
.br-care__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.br-care__col { min-width: 0; }
.br-care__col h3 { margin-top: 0; }
.br-care__col ul { padding-left: 1.1em; }
@media (max-width: 768px) {
  .br-care__grid { grid-template-columns: 1fr; gap: 24px; }
  .br-care__inner { padding: 0 8px; }
}

/* === Mobiel menu caret centering: parent label op true center === */
body.mm-fullsize .navbar-collapse #primary_navigation > li > a { position: relative; }
body.mm-fullsize .navbar-collapse #primary_navigation > li > a .caret,
body.mm-fullsize .navbar-collapse #primary_navigation > li > a span.sub-arrow {
  position: absolute !important;
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  float: none !important;
}

/* === Vierkante hoeken voor overige knoppen (CF7, Ninja Forms, etc.) === */
html body input[type="submit"],
html body button[type="submit"],
html body .wpcf7 input[type="submit"],
html body .ninja-forms-field.nf-element,
html body .nf-form-content input[type="button"],
html body .nf-form-content input[type="submit"],
html body.page-template-template-contact .nf-form-content input[type="button"],
html body.page-template-template-contact .nf-form-content input[type="submit"],
html body .btn,
html body .btn-primary {
  border-radius: 0 !important;
}



/* ======================================================== */
/* === Ronde-2 fixes (menu spacing, coffee, CTA, etc.) === */
/* ======================================================== */

/* 1. Menu items met dropdown: extra ademruimte rondom de caret */
@media (min-width: 992px) {
  nav.navbar-default ul.navbar-nav > li.menu-item-has-children > a {
    padding-right: 22px !important;
  }
  nav.navbar-default ul.navbar-nav > li.menu-item-has-children + li {
    margin-left: 6px;
  }
}

/* 2. Coffee corner labels: meer contrast op donkere achtergrond */
.chame-coffee .menu-h,
.chame-coffee .qr-label,
section[class*="coffee"] .menu-h,
section[class*="coffee"] .qr-label,
section.dark-bg .menu-h,
section.dark-bg .qr-label,
[style*="background"][style*="#512D"] .menu-h,
[style*="background"][style*="#512D"] .qr-label {
  color: var(--color-primary-lighter, #DEC7B1) !important;
  letter-spacing: 0.18em;
}
/* fallback voor de "menu-h" en "qr-label" wanneer de parent ink-kleur als bg heeft */
[style*="background-color: var(--ink)"] .menu-h,
[style*="background-color:#512D1A"] .menu-h,
[style*="background-color: #512D1A"] .menu-h {
  color: var(--color-primary-lighter, #DEC7B1) !important;
}

/* 3. Bottom CTA (.btn-pill) hover: tekst leesbaar houden bij hover */
.btn-pill,
a.btn-pill {
  transition: background-color .25s ease, color .25s ease;
}
a.btn-pill:hover,
a.btn-pill:focus {
  background: var(--ink) !important;
  color: var(--bg, #f5efe7) !important;
  border-color: var(--ink) !important;
}

/* 4. PhotoSwipe / WooCommerce productafbeelding lightbox: duidelijkere sluit-knop */
.pswp__top-bar { right: 0 !important; }
.pswp__button--close {
  opacity: 1 !important;
  background-color: rgba(81, 45, 26, 0.85) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 99999 !important;
}
.pswp__button--close::after {
  content: "\00d7";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  background: transparent;
}
/* Verberg de sprite-image van de standaard PhotoSwipe knoppen op close zodat ons × niet er bovenop ligt */
.pswp__button--close { background-image: none !important; }

/* 5. Diensten subpagina’s: "intro text block6" leeg-section verbergen onder de care-block */
main section.intro:has(.br-outro:only-child),
main section.intro.block6:has(.br-outro) {
  display: none;
}
/* extra fallback voor browsers zonder :has(): collapseer de paragraaf-spacing als alle directe kinderen leeg zijn */
main section .br-outro { display: none; }
main section.intro:has(.container > p > .container, .container > p:empty + .br-outro) { padding: 0; min-height: 0; }

/* 6. Massage / Tanden bleken: meerdere prijzen (.br-menu-item__variant) zelfde stijl als .br-menu-item__price */
.br-menu-item__variants,
.br-menu-item__variant {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}
.br-menu-item__variants { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.br-menu-item__variant { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* 7. Contact + Afspraak: titel zonder border-bottom + meer ademruimte (zoals andere paginas) */
body.page-template-template-contact main h1,
body.page-template-template-afspraak main h1,
body.page-id-3 main h1,
main section.contact h1,
main section.afspraak h1 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 24px;
}
body.page-template-template-contact main > section:first-of-type,
body.page-template-template-afspraak main > section:first-of-type {
  padding-top: 80px !important;
}

/* 8. Mobiel: WhatsApp floating button verbergen wanneer mobiel menu open is */
@media (max-width: 991px) {
  body.mm-fullsize #whatsapp_button,
  body.menu-open #whatsapp_button,
  body:has(.navbar-collapse.in) #whatsapp_button,
  body:has(.navbar-collapse.show) #whatsapp_button {
    display: none !important;
  }
}

/* 9. Mobiel: in dienst-menu de "min" onder de naam zetten ipv ernaast */
@media (max-width: 768px) {
  .br-menu-item {
    flex-wrap: wrap;
  }
  .br-menu-item__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .br-menu-item__head .br-menu-item__time,
  .br-menu-item__head .br-menu-item__duration,
  .br-menu-item__head [class*="min"],
  .br-menu-item__head .min {
    margin-left: 0 !important;
    display: block;
  }
}


/* === Ronde-3 fix: bleek-tabel uitlijning (variant-rijen + meest gekozen badge) === */
/* Symptoom: rij met 'Meest gekozen' badge schuift uit lijn met andere rijen.
   Oorzaak: badge zit inline in .br-menu-item__variant-duur, waardoor die rij
   breder wordt dan de andere rijen (align-items:flex-end op .br-menu-item__variants
   laat ze dan rechts uitlijnen i.p.v. kolomgewijs uitlijnen). */
.br-menu-item__variants {
  align-items: stretch !important;
}
.br-menu-item__variant {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  column-gap: 1.25rem !important;
  justify-content: end !important;
  align-items: baseline !important;
  position: relative !important;
}
.br-menu-item__variant br,
.br-menu-item__variant-spacer {
  display: none !important;
}
.br-menu-item__variant-duur,
.br-menu-item__variant-prijs {
  display: inline-block !important;
  white-space: nowrap !important;
  text-align: right !important;
}
/* Badge ('Meest gekozen') uit de tekst-flow van de duur-kolom halen,
   zodat de duur-kolom dezelfde breedte houdt als de andere rijen. */
.br-menu-item__variant-duur {
  position: static !important;
}
.br-menu-item__variant-duur .br-tag--popular {
  position: absolute !important;
  right: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 1rem 0 0 !important;
  white-space: nowrap !important;
}


/* QR mobile CTA — coffee corner */
.qr-mobile-cta { margin: 8px 0 0; }
.qr-mobile-cta .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 768px) {
  .qr-row { flex-wrap: wrap; justify-content: center; text-align: center; }
  .qr-row .qr { margin: 0 auto; }
  .qr-mobile-cta { text-align: center; }
}