@charset "UTF-8";
/* ==========================================================================
  CSS Reset
  ========================================================================== */
@font-face {
  font-family: "RethinkSans";
  src: url("/Resources/fonts/RethinkSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "RethinkSans";
  src: url("/Resources/fonts/RethinkSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "RethinkSans";
  src: url("/Resources/fonts/RethinkSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "RethinkSans";
  src: url("/Resources/fonts/RethinkSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "RethinkSans";
  src: url("/Resources/fonts/RethinkSans-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
}
/* Skin Renew huisstijl: Fraunces (koppen) en Inter (lopende tekst), vanaf
   onze eigen server. Variabele lettertypes: één bestand per taalbereik
   bedient alle diktes; de -latin-ext-variant laadt alleen als er ook echt
   een teken uit dat bereik op de pagina staat. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/Resources/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/Resources/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/Resources/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/Resources/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --------------------------------------------------------------------------
   Skin Renew huisstijl (herontwerp)
   Losse merktokens naast de bestaande $variabelen hierboven, zodat de
   bestaande pagina's (die $primary-pink etc. gebruiken) ongemoeid blijven.
   Gebruikt door components/header.scss, components/footer.scss,
   _buttons.scss en pages/home.scss.
   -------------------------------------------------------------------------- */
:root {
  --gold-50: #fbf8f1;
  --gold-100: #f4ecd9;
  --gold-200: #e8d9b4;
  --gold-300: #d7c088;
  --gold-400: #c2a25c;
  --gold-500: #ae8b33;
  --gold-600: #96762b;
  --gold-700: #7a5f24;
  --gold-800: #5b471c;
  --gold-900: #3a2d12;
  --gold-text: var(--gold-700);
  --bronze: #43351a;
  --bronze-deep: #2f2510;
  --cta: #157a26;
  --cta-hover: #10651e;
  --cta-rgb: 21, 122, 38;
  --ink: #191814;
  --ink-2: #2e2c26;
  --ink-3: #4d4a41;
  --muted: #676253;
  --line: #e7e2d8;
  --line-2: #f0ece4;
  --surface: #ffffff;
  --surface-2:#faf8f3;
  --surface-3:#f4f1ea;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.6rem, 1.45rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 2.75rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.1rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.2rem);
  --fs-body: 1.0625rem;
  --fs-sm: 1rem;
  --fs-xs: 0.875rem;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --section-y: clamp(3rem, 1.9rem + 3.6vw, 5.5rem);
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --sh-xs: 0 1px 2px rgba(58, 45, 18, 0.05);
  --sh-sm: 0 2px 8px rgba(58, 45, 18, 0.06);
  --sh-md: 0 8px 28px rgba(58, 45, 18, 0.08);
  --sh-lg: 0 20px 60px rgba(58, 45, 18, 0.12);
  --container-sr: 1200px;
  --container-narrow: 780px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;
}

@media (max-width: 700px) {
  :root {
    --fs-h1: clamp(1.8rem, 1.35rem + 1.9vw, 2.2rem);
    --fs-h2: clamp(1.55rem, 1.25rem + 1.5vw, 1.9rem);
    --fs-lead: 1.0625rem;
  }
}
/* Groen is op de hele site gereserveerd voor actieknoppen (btn--primary en
   .btn-default in het actiegroen - "Maak een afspraak", "Boek uw gratis
   consult", ...). Zo'n knop drukt zichzelf iedere 6,5 seconde eventjes in en
   veert terug (@keyframes knopKlik, _animations.scss), en heeft een hover die
   optilt met een grotere schaduw + iets donkerder groen - allebei 1-op-1 uit
   het ontwerp (newwebsite/public, .btn--primary). Eén gedeelde mixin, zodat
   elke knop dit effect op dezelfde manier krijgt in plaats van het losse
   :hover-regels per plek te laten verschillen. */
/* Sitewide knop voor CMS-tekst: als een content-editor via TinyMCE een link
   in een tekstblok zet, krijgt die .btn-default (de bestaande knop-mixin uit
   _variables.scss). Voorheen bestond deze regel alleen genest in specifieke
   containers (.right-menu, .thanks, .errors, ...); hier staat hij bewust
   los, zodat .btn-default overal werkt waar CMS-tekst hem gebruikt. */
.btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
}
.btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.btn-default:hover {
  background: #fff;
  color: #141F1B;
}

/* Skin Renew knoppen (herontwerp). Nieuwe klassen (.btn, .btn--primary, ...),
   botsen niet met de bestaande .btn-default hierboven, dus dit kan gewoon
   naast elkaar bestaan: .btn-default voor CMS-tekst, .btn/.btn--primary voor
   de vaste (niet-CMS) knoppen in de .aspx-bestanden. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  min-height: 48px;
  padding: 1rem 1.75rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.15s var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.btn--primary:hover, .btn--primary:focus-visible, .btn--primary:active {
  animation: none;
}
.btn--primary:hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.btn--primary:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary {
    animation: none !important;
  }
  .btn--primary:hover {
    transform: none;
  }
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: #cdc6b6;
}

.btn--outline:hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}

.btn--on-dark {
  background: #fff;
  color: var(--ink);
  border-color: #cdc6b6;
}

.btn--on-dark:hover {
  background: var(--gold-50);
  color: var(--gold-text);
  border-color: var(--gold-400);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.btn--sm {
  padding: 0.75rem 1.35rem;
  font-size: var(--fs-xs);
  min-height: 44px;
}

.btn--block {
  width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

/* Kleine geruststellende regel direct onder een actieknop, bv. "U kiest zelf
   dag en tijd". Button-adjacent, vandaar hier naast .btn-row/.link-arrow. */
.microcopy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.microcopy span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.microcopy svg {
  color: var(--cta);
  flex: none;
}

/* Microcopy uit CMS-tekst (onze-kliniek.aspx, hardcoded met eigen inline svg)
   heeft geen mask-vinkje nodig; een <span> zonder eigen svg krijgt het groene
   vinkje dan uit een mask - zie ook .sidecard .rich-text ul hieronder
   (behandeling-detail.scss) voor de kale-<ul><li>-variant zonder class. */
.microcopy span:not(:has(svg))::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--cta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
}

.link-arrow svg {
  transition: transform var(--dur) var(--ease);
  flex: none;
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* Wisselpaar voor advertentieverkeer (lp-hide/lp-only). Zonder de
   landingsmodus van het nieuwe ontwerp (die vraagt om een aparte
   herkenningslogica, zie docs/CMS-CONTENT-home.md) tonen wij altijd de
   normale variant en verbergen de advertentie-variant. */
.lp-only, .lp-only--flex, .lp-only--block {
  display: none;
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-101%);
    transform: translateY(-100%);
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
/* Skin Renew: verschijnanimatie bij scrollen (herontwerp). main.js zet
   .is-visible zodra een element met .reveal in beeld komt. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* Skin Renew: het "zelf-indrukken" van een groene actieknop (@mixin
   knop-actiegroen, _variables.scss), 1-op-1 uit het ontwerp. De knop drukt
   zichzelf iedere 6,5 seconde eventjes in en veert terug, alsof iemand erop
   klikt - dat is duidelijker dan een glans of kleurwissel: het laat zien wat
   er gebeurt als je hem aanraakt. Klein houden is hier alles: de knop zakt
   maar 3 procent in en de schaduw zakt mee, want een echte knop die
   ingedrukt wordt komt dichter bij het vlak te liggen. De beweging duurt bij
   elkaar nog geen seconde, de rest van de tijd staat de knop stil. */
@keyframes knopKlik {
  0%, 84%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  }
  88% {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 5px rgba(var(--cta-rgb), 0.3);
  }
  95% {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 6px 18px rgba(var(--cta-rgb), 0.28);
  }
}
.checkbox {
  padding: 0px !important;
  margin: 0;
}
.checkbox input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.checkbox input:checked + label:after {
  opacity: 1 !important;
  visibility: visible !important;
}
.checkbox.mrg-bottom label {
  margin-bottom: 10px !important;
}
.checkbox label {
  position: relative;
  padding-left: 31px;
  margin: 0 !important;
  cursor: pointer;
}
.checkbox label a {
  font-weight: 500;
  color: #000;
  text-decoration: underline;
}
.checkbox label:after {
  content: "\f00c" !important;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 3px;
  font-size: 15px;
  top: 2px;
  margin-left: 0;
  opacity: 0 !important;
  visibility: hidden !important;
  color: #044024;
}
.checkbox label:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 21px;
  height: 21px;
  left: 0;
  top: 4px;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  border: 1px solid #e7e2d8;
  color: #fff;
}

.radio {
  padding: 0px !important;
  margin: 0;
}
.radio input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.radio input:checked + label:after {
  opacity: 1 !important;
  visibility: visible !important;
}
.radio.mrg-bottom label {
  margin-bottom: 10px !important;
}
.radio label {
  position: relative;
  padding-left: 31px;
  margin: 0 !important;
  cursor: pointer;
}
.radio label a {
  font-weight: 500;
  color: #000;
  text-decoration: underline;
}
.radio label:after {
  content: "";
  position: absolute;
  left: 15px;
  font-size: 15px;
  width: 13px;
  transform: translateY(-50%);
  top: 50%;
  opacity: 0 !important;
  visibility: hidden !important;
  background: #141F1B;
  height: 13px;
  border-radius: 50%;
}
.radio label:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 22px;
  height: 22px;
  left: 10px;
  transform: translateY(-50%);
  top: 50%;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  border: 1px solid #ddd;
}

/*.checkbox {
    padding-left: 20px;

    label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;

        &::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #000;
            border-radius: 0;
            background-color: #fff;
            -webkit-transition: border .15s ease-in-out,color .15s ease-in-out;
            -o-transition: border .15s ease-in-out,color .15s ease-in-out;
            transition: border .15s ease-in-out,color .15s ease-in-out;
        }

        &::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 13px;
            color: #e6265e;
        }
    }

    &.has-success label::after {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
        margin-left: -20px;
        padding-left: 3px;
        padding-top: 1px;
        font-size: 13px;
        color: #e6265e;
    }

    input {
        &[type=checkbox],
        &[type="radio"] {
            opacity: 0;
            z-index: 1;
        }

        &[type="checkbox"]:focus + label::before, &[type="radio"]:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        /*&[type="checkbox"]:checked + label::after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f004";
        }
    }

    /*&.has-success label::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f004";
    }

    input {
        &[type="radio"]:checked + label::after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f004";
        }

        &[type="checkbox"]:disabled + label, &[type="radio"]:disabled + label {
            opacity: 0.65;
        }

        &[type="checkbox"]:disabled + label::before, &[type="radio"]:disabled + label::before {
            background-color: #eeeeee;
            cursor: not-allowed;
        }
    }

    &.checkbox-circle label::before {
        border-radius: 50%;
    }

    &.checkbox-inline {
        margin-top: 0;
    }
}

.checkbox-primary input {
    &[type="checkbox"]:checked + label::before, &[type="radio"]:checked + label::before {
        background-color: #fff;
        border-color: #fff;
    }

    &[type="checkbox"]:checked + label::after, &[type="radio"]:checked + label::after {
        color: #fff;
    }
}

.checkbox-danger input {
    &[type="checkbox"]:checked + label::before, &[type="radio"]:checked + label::before {
        background-color: #d9534f;
        border-color: #d9534f;
    }

    &[type="checkbox"]:checked + label::after, &[type="radio"]:checked + label::after {
        color: #fff;
    }
}

.checkbox-info input {
    &[type="checkbox"]:checked + label::before, &[type="radio"]:checked + label::before {
        background-color: #5bc0de;
        border-color: #5bc0de;
    }

    &[type="checkbox"]:checked + label::after, &[type="radio"]:checked + label::after {
        color: #fff;
    }
}

.checkbox-warning input {
    &[type="checkbox"]:checked + label::before, &[type="radio"]:checked + label::before {
        background-color: #f0ad4e;
        border-color: #f0ad4e;
    }

    &[type="checkbox"]:checked + label::after, &[type="radio"]:checked + label::after {
        color: #fff;
    }
}

.checkbox-success input {
    &[type="checkbox"]:checked + label::before, &[type="radio"]:checked + label::before {
        background-color: #5cb85c;
        border-color: #5cb85c;
    }

    &[type="checkbox"]:checked + label::after, &[type="radio"]:checked + label::after {
        color: #fff;
    }
}

.radio {
    padding-left: 20px;

    label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;

        &::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }

        &::after {
            display: inline-block;
            position: absolute;
            content: " ";
            width: 11px;
            height: 11px;
            left: 3px;
            top: 3px;
            margin-left: -20px;
            border-radius: 50%;
            background-color: #555555;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }
    }

    input[type="radio"] {
        opacity: 0;
        z-index: 1;

        &:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        &:checked + label::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        &:disabled + label {
            opacity: 0.65;

            &::before {
                cursor: not-allowed;
            }
        }
    }

    &.radio-inline {
        margin-top: 0;
    }
}

.radio-primary input[type="radio"] {
    + label::after {
        background-color: #337ab7;
    }

    &:checked + label {
        &::before {
            border-color: #337ab7;
        }

        &::after {
            background-color: #337ab7;
        }
    }
}

.radio-danger input[type="radio"] {
    + label::after {
        background-color: #d9534f;
    }

    &:checked + label {
        &::before {
            border-color: #d9534f;
        }

        &::after {
            background-color: #d9534f;
        }
    }
}

.radio-info input[type="radio"] {
    + label::after {
        background-color: #5bc0de;
    }

    &:checked + label {
        &::before {
            border-color: #5bc0de;
        }

        &::after {
            background-color: #5bc0de;
        }
    }
}

.radio-warning input[type="radio"] {
    + label::after {
        background-color: #f0ad4e;
    }

    &:checked + label {
        &::before {
            border-color: #f0ad4e;
        }

        &::after {
            background-color: #f0ad4e;
        }
    }
}

.radio-success input[type="radio"] {
    + label::after {
        background-color: #5cb85c;
    }

    &:checked + label {
        &::before {
            border-color: #5cb85c;
        }

        &::after {
            background-color: #5cb85c;
        }
    }
}

input {
    &[type="checkbox"].styled:checked + label:after, &[type="radio"].styled:checked + label:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f00c";
    }

    &[type="checkbox"] .styled:checked + label::before, &[type="radio"] .styled:checked + label::before, &[type="checkbox"] .styled:checked + label::after, &[type="radio"] .styled:checked + label::after {
        color: #fff;
    }
}

.checkbox-size {
    position: relative;
    z-index: 1;
    padding-left: 0;
    display: inline-block;

    input {
        display: none;
    }

    label::before {
        background-color: #e53069;
        position: absolute;
        margin-left: 0;
        margin-top: -5px;
        left: 50%;
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: -1;
        color: #fff;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        border: 2px solid #e53069;
        transition: border 0.2s ease-in-out;
    }

    input[type="radio"]:checked ~ .checkbox-size label::before {
        border: 1px solid #fff;
    }
}

.Checkbox .form-control-feedback {
    display: none !important;
}*/
/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - topbalk boven de header (page.master).
   Port van het .topbar-blok uit het bronontwerp (style.css). Verborgen onder
   800px; daar neemt de actionbar (vervolgstap) de contactknoppen over.
   ========================================================================== */
.topbar {
  background: linear-gradient(180deg, #f7f1e2 0%, #f2ead6 100%);
  border-bottom: 1px solid var(--gold-200);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.topbar svg {
  color: var(--gold-500);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 40px;
  flex-wrap: wrap;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
}

.topbar a:hover {
  color: var(--gold-text);
}

.topbar__list {
  display: flex;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar__list li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.topbar__list--right {
  gap: 0;
}

.topbar__list--right li {
  padding-inline: var(--sp-4);
}

.topbar__list--right li + li {
  border-left: 1px solid rgba(174, 139, 51, 0.28);
}

.topbar__list--right li:last-child {
  padding-right: 0;
}

/* Taalknop, laatste item rechts. Port van .topbar__lang uit het bronontwerp; de
   knop komt uit repTaalTopbar (page.master) en verschijnt pas zodra er meer dan
   een taal is, dus er is geen aparte "verbergen"-regel nodig. De landingsmodus
   uit de bron (.is-landing .topbar__lang) is hier overgeslagen: die modus bestaat
   in deze site nog niet, zie de opmerking bij .lp-only in _buttons.scss. */
.topbar__lang {
  border: 1px solid var(--gold-300);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.topbar__lang:hover {
  background: var(--gold-50);
  border-color: var(--gold-400);
}

@media (max-width: 800px) {
  .topbar {
    display: none;
  }
}
@media only screen and (min-width: 1200px) {
  header .back-btn {
    display: none !important;
  }
  .offcanvas-menu ul li {
    margin: 0 0 15px;
  }
  .offcanvas-menu ul li.has-children > .offcanvas-submenu {
    right: 0 !important;
    position: relative !important;
    transform: none !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }
  .offcanvas-menu ul li.has-children > .offcanvas-submenu li a {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .offcanvas-menu ul li.has-children:hover > .offcanvas-submenu {
    max-height: 500px; /* adjust depending on submenu content */
    opacity: 1;
  }
  .offcanvas-menu ul li.has-children:hover .sub-menu-toggle:after {
    content: "-";
  }
}
@media only screen and (min-width: 1200px) {
  .wrapper-menu {
    /*    width: calc(100vw - 290px);
    overflow: hidden;
    position: fixed;
    top: 83px;
    left: 139px;*/
    position: relative;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    visibility: hidden;
    display: flex;
  }
  .wrapper-menu ul b {
    display: block;
    margin-bottom: 10px;
  }
  .wrapper-menu ul li a {
    color: #141414;
  }
  .wrapper-menu .pop-products {
    width: 20%;
    max-width: 20%;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .wrapper-menu .pop-products .bottom {
    color: #141414;
    margin-top: auto;
    text-decoration: underline;
  }
  .wrapper-menu .pop-products li {
    display: block;
  }
  .wrapper-menu .drop-desk {
    width: 100%;
    padding: 0 0;
    position: relative;
  }
}
@media only screen and (max-width: 1200px) {
  header .wrapper-menu {
    width: calc(100vw - 290px);
    overflow: hidden;
    position: fixed;
    top: 83px;
    left: 139px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    visibility: hidden;
    background: #EEEAE0;
    display: flex;
  }
}
.hamburger {
  position: relative;
  z-index: 3;
  /*    width: 40px;
  height: 25px;
  right: 10px;*/
  top: 0;
  display: none;
  margin: 0 10px 0;
  cursor: pointer;
}
.hamburger .inner {
  position: relative;
  /*        top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);*/
  background: #FFFBE7;
  padding: 10px;
  border-radius: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #141F1B;
}
.hamburger .inner.bg-white {
  background: #fff !important;
  color: #141F1B;
}
.hamburger .inner.bg-white .menu-title {
  color: #141F1B !important;
}
.hamburger .inner.bg-white #nav-icon2 span {
  background: #141F1B;
}
.hamburger .inner .menu-title {
  font-size: 20px;
  display: block;
  margin: 0 15px 0 0;
}
.hamburger #nav-icon2 {
  width: 30px;
  height: 18px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.hamburger #nav-icon2 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 50%;
  background: #141F1B;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.hamburger #nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}
.hamburger #nav-icon2 span:nth-child(odd) {
  left: 0px;
  border-radius: 9px 0 0 9px;
}
.hamburger #nav-icon2 span:nth-child(1), .hamburger #nav-icon2 span:nth-child(2) {
  top: 0px;
}
.hamburger #nav-icon2 span:nth-child(3), .hamburger #nav-icon2 span:nth-child(4) {
  top: 8px;
}
.hamburger #nav-icon2 span:nth-child(5), .hamburger #nav-icon2 span:nth-child(6) {
  top: 16px;
}
.hamburger #nav-icon2.open {
  top: -3px;
}
.hamburger #nav-icon2.open span {
  background: #141F1B;
}
.hamburger #nav-icon2.open span:nth-child(1) {
  left: 3px;
  top: 7px;
}
.hamburger #nav-icon2.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}
.hamburger #nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}
.hamburger #nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}
.hamburger #nav-icon2.open span:nth-child(5) {
  left: 2px;
  top: 15px;
}
.hamburger #nav-icon2.open span:nth-child(6) {
  left: calc(50% - 4px);
  top: 15px;
}
.hamburger #nav-icon2.open span:nth-child(1), .hamburger #nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hamburger #nav-icon2.open span:nth-child(2), .hamburger #nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.search-results {
  position: relative;
  left: 0;
  background: #FAF8F5;
  transition: all 0.3s ease-in-out;
  overflow-y: auto;
  width: 100%;
  top: 0;
}
.search-results .inner {
  padding: 15px;
  border-top: 2px solid #f0f0f0;
  position: relative;
  background: #fff;
}
.search-results .inner .close-search {
  position: absolute;
  top: 20px;
  right: 0px;
  font-size: 30px;
  color: #bbb;
  padding: 13px;
  z-index: 1;
  cursor: pointer;
}
.search-results .inner .close-search.hidden {
  display: none;
}
.search-results .inner b {
  display: block;
  font-size: 24px;
  margin-bottom: 30px;
}
.search-results .inner .products .item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  color: #000;
  text-decoration: none !important;
  align-items: center;
  border-bottom: 1px solid #ececec;
  justify-content: space-between;
  padding: 15px 0;
  transition: all 0.3s ease-in-out;
}
.search-results .inner .products .item:hover {
  background-color: #fafafa;
}
.search-results .inner .products .item .img {
  max-width: 80px;
}
.search-results .inner .products .item .img img {
  max-width: 100%;
}
.search-results .inner .products .item h6 {
  font-weight: bold;
  margin-bottom: 15px;
}
.search-results .inner .products .item .btn-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  width: 30%;
}
.search-results .inner .products .item .btn-list .delivery {
  text-align: right;
  display: block;
}
.search-results .inner .products .item .btn-list .stock {
  width: 100%;
  text-align: right;
  position: relative;
  padding: 0 0.5rem;
}
.search-results .inner .products .item .btn-list .stock b {
  font-size: 12px;
  color: #01982b;
  margin: 10px 0;
}
.search-results .inner .products .item .btn-list .stock.not b {
  color: red;
}
.search-results .inner .products .item .btn-list input {
  padding: 9px 5px;
  width: 60px;
  height: inherit;
  border-radius: 4px;
  color: #000;
  font-weight: 500;
  text-align: center;
  background: #f8f8f8;
  -webkit-appearance: none;
  border: 2px solid #eee;
  margin-right: 15px;
}
.search-results .inner .products .item .right-side {
  padding-left: 20px;
  flex: 0 0 80%;
  max-width: 80%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.search-results .inner .products .item .right-side .sku {
  font-weight: 600;
}
.search-results .inner .products .item .right-side .price {
  margin: 0 0 0 25px;
  font-weight: bold;
  font-size: 16px;
  width: 20%;
  text-align: right;
}
.search-results .inner .products .item .right-side a {
  text-decoration: none;
}
.search-results .inner .products .item .right-side b {
  font-size: 16px;
  color: #000;
  margin-bottom: 15px;
}
.search-results .inner .products .item .right-side .info {
  margin-right: auto;
  max-width: 70%;
  width: 100%;
}
.search-results .inner .cats {
  max-width: 100%;
  margin-bottom: 10px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
.search-results .inner .cats a {
  display: table;
  color: #000;
  padding: 5px 0px;
  font-weight: 600;
}
.search-results .inner .cats a span {
  font-weight: 400;
}
.search-results .inner .cats a:nth-of-type(even) {
  background: #f7f7f7;
}

.twitter-typeahead {
  width: 100%;
}
.twitter-typeahead .tt-menu {
  padding: 15px 0px;
  background: #fff;
  width: 100%;
}
.twitter-typeahead .tt-menu .tt-selectable {
  color: #014023;
  cursor: pointer;
  font-size: 14px;
  padding: 5px 15px;
  transition: all 0.3s ease-in-out;
}
.twitter-typeahead .tt-menu .tt-selectable:hover {
  background: #eee;
}

.search {
  /*z-index: 201;*/
  margin: 0 auto;
  width: 100%;
  max-width: 650px;
  position: relative;
}
.search .help-block {
  display: none !important;
  visibility: hidden;
}
.search .form-group {
  margin-bottom: 0;
  position: relative;
}
.search .form-group .close-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 45px;
  font-size: 22px;
  color: #bbb;
  padding: 13px;
  z-index: 1;
  cursor: pointer;
}
.search .form-group .form-control {
  min-width: 265px;
  background: #fff !important;
  padding-right: 90px !important;
  color: #014023;
  width: 100%;
  padding: 12px 15px;
  height: inherit;
  border: none;
  border-radius: 4px;
  background: none;
  color: #000;
  font-weight: 500;
  background: #f8f8f8;
  -webkit-appearance: none;
  outline: none !important;
}
.search .form-group .btn-search {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  padding: 5px;
  z-index: 11;
  color: #014023;
}

.menu-items {
  background: #f6f6f6;
  position: relative;
}

.mobile-products {
  display: block;
}

.search-wrapper {
  top: calc(100% + 10px);
  width: calc(100% - 20px);
  right: 10px;
}

.right-menu {
  position: relative;
  display: flex;
  margin-left: auto;
  padding-right: 55px;
  flex-wrap: wrap;
  flex-direction: row;
  z-index: 99;
  align-items: center;
}
.right-menu .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
}
.right-menu .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.right-menu .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.right-menu .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.right-menu #aLogin {
  color: #014023;
  display: inline-block;
  margin: 0 5px 0 0;
}
.right-menu .shopping-cart-icon {
  display: table;
  position: relative;
  cursor: pointer;
}
.right-menu .shopping-cart-icon .icon {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background: #D3AF59;
  z-index: 10;
}
.right-menu .shopping-cart-icon svg {
  max-width: 22px;
  margin: 7px 0 0 5px;
}
.right-menu .menu-icon .dropdown-account {
  left: -100px;
  text-align: left;
}
.right-menu .menu-icon .dropdown-account object {
  position: relative;
  z-index: 5;
}
.right-menu .menu-icon:hover .dropdown-account {
  opacity: 1;
  max-height: 999px;
}
.right-menu .menu-icon b.qty, .right-menu .btn-default b.qty {
  display: inline-block;
  position: absolute;
  top: -5px;
  right: -15px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #fff;
  color: #000;
  border-radius: 50%;
  text-align: center;
}
.right-menu .menu-icon b.qty span, .right-menu .btn-default b.qty span {
  font-size: 14px;
}
.right-menu .menu-icon i, .right-menu .btn-default i {
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.language-switch .inner {
  font-size: 0;
  padding: 5px;
  text-align: center;
}
.language-switch .inner img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  padding: 4px;
  margin: 0px 0 0 10px;
  border-radius: 50%;
}
.language-switch .inner .active-lan {
  display: inline-block;
}
.language-switch .inner .active-lan img {
  background: #EEEAE0;
}
.language-switch .inner ul {
  display: inline-block;
}
.language-switch .inner ul li {
  display: inline-block;
}
.language-switch .inner ul li a {
  padding: 0px;
}

.menu-middle .container-fluid {
  padding: 0 !important;
}
.menu-middle .right .menu-icon {
  height: 35px;
  width: 35px;
  margin: 0 4px;
}
.menu-middle .right .menu-icon.show-desktop {
  display: none;
}
.menu-middle .right .menu-icon.hide-desktop {
  display: block;
}
.menu-middle .right .menu-icon i {
  font-size: 16px;
}

footer, .copy, .menu-middle {
  left: 0%;
  transition: all 0.3s ease-in-out;
}

html.active header .custom-nav {
  right: 0% !important;
  visibility: visible;
  opacity: 1;
}

.hamburger, .login-mobile {
  display: block;
}

.offcanvas-menu {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0px 0px 20px;
  z-index: 4;
}
@media (hover: hover) and (pointer: fine) {
  .offcanvas-menu .has-children:hover .wrapper-menu {
    opacity: 1;
    visibility: visible;
  }
}
.offcanvas-menu .container {
  padding: 0;
}
.offcanvas-menu .title-drop {
  font-weight: 600;
  font-size: 20px;
  padding-left: 20px;
  margin: 25px 0px 5px;
}
.offcanvas-menu .menu.off-view {
  transform: translate3d(-100%, 0, 0);
}
.offcanvas-menu ul li {
  display: table;
}
.offcanvas-menu ul li.back-btn {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: none;
}
.offcanvas-menu ul li.back-btn a {
  touch-action: manipulation;
}
.offcanvas-menu ul li.back-btn a:before {
  content: "\f053";
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  position: relative;
  margin-right: 10px;
}
.offcanvas-menu ul li a {
  display: block;
  padding: 15px 20px;
  transition: color 0.3s;
  font-size: 18px;
  color: #141F1B !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 50px;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 767.5px) and (hover: hover) and (pointer: fine) {
  .offcanvas-menu ul li a:hover {
    opacity: 0.6;
  }
}
.offcanvas-menu ul li a.btnRegistreren {
  color: #fff !important;
  margin: 0px 15px;
}
.offcanvas-menu ul li.has-children > .offcanvas-submenu {
  position: relative;
  display: block;
  margin-bottom: 20px;
}
.offcanvas-menu ul li.has-children > .offcanvas-submenu.in-view {
  transform: translate3d(0, 0, 0);
}
.offcanvas-menu ul li.has-children > .offcanvas-submenu.in-view.off-view {
  transform: translate3d(-100%, 0, 0);
}
.offcanvas-menu ul li.has-children > .offcanvas-submenu li {
  margin: 0 0 10px;
}
.offcanvas-menu ul li.has-children > .offcanvas-submenu li:last-of-type {
  margin: 0;
}
.offcanvas-menu ul li.has-children > .offcanvas-submenu li a {
  padding: 0 20px;
}
.offcanvas-menu ul li.has-children > span {
  display: block;
  position: relative;
  width: 100%;
}
.offcanvas-menu ul li.has-children.not-child .sub-menu-toggle {
  display: none !important;
}
.offcanvas-menu ul li .sub-menu-toggle {
  position: absolute;
  top: 0;
  right: -65px;
  width: 60px;
  height: calc(100% - 1px);
  transition: background-color 0.3s;
  z-index: 1;
  display: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.offcanvas-menu ul li .sub-menu-toggle:after {
  content: "+";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #141F1B;
  font-size: 35px;
  padding: 20px;
  pointer-events: none;
}
.offcanvas-menu .menu {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

header {
  /* Positionering/achtergrond staat in het herontwerp-blok (.header, onderin
     dit bestand): sticky met is-stuck, niet meer fixed. Hier alleen nog de
     legacy geneste regels voor blokken die nog niet zijn opgeruimd. */
}
header .container-fluid.custom {
  width: 100%;
  max-width: var(--container-sr);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
header.white .hamburger .inner {
  background: #141F1B;
}
header.white .hamburger .inner .menu-title {
  color: #fff;
}
header.white .hamburger #nav-icon2 span {
  background: #fff;
}
header.static .hamburger .inner {
  background: #141F1B;
}
header.static .hamburger .inner .menu-title {
  color: #fff;
}
header.static .hamburger #nav-icon2 span {
  background: #fff;
}
header.static .logo {
  background: #014023;
}
header.static .right-menu .shopping-cart-icon .icon {
  background: #141F1B;
}
header .dropdown-custom .back-btn:not(:first-child) {
  display: none;
}
header .dropdown-custom li .sub-menu-toggle {
  display: none !important;
}
header .logo {
  /*  padding: 0;
  display: table;*/
  display: inline-block;
  position: relative;
  height: 40px;
  max-width: 225px;
  width: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background: #fff;
  z-index: 10;
}
header .logo img {
  max-width: 175px;
  display: block;
  height: 50px;
}
header.active .custom-nav {
  right: 0;
}
header.active .custom-nav .nav-items {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
@keyframes bg-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(14);
    opacity: 1;
  }
}
header .custom-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  bottom: 0;
  background-color: #D3AF59;
  transition: right 0.4s ease-in-out;
  height: 100vh;
  overflow-y: scroll;
  right: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  -ms-overflow-style: none;
  transition: all 0.3s ease-in-out !important;
}
header .custom-nav:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60vw;
  height: 90vh;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
header .custom-nav::-webkit-scrollbar {
  display: none;
}
header .custom-nav .container-fluid.custom {
  max-width: 1500px;
}
header .custom-nav .socials {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
header .custom-nav .socials ul {
  display: flex;
  flex-direction: row;
}
header .custom-nav .socials ul li {
  position: relative;
  width: 55px;
}
header .custom-nav .socials ul li:nth-of-type(2) {
  margin: 0 5px;
}
header .custom-nav .socials ul li a {
  background: #141F1B;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .custom-nav .socials ul li a:hover img {
  transform: rotate(7deg);
}
header .custom-nav .socials ul li a img {
  position: relative;
  z-index: 1;
  max-width: 25px;
  background: transparent;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
header .custom-nav .off-canvas {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: auto;
  transform: translate3d(100%, 0, 0);
  transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
header .custom-nav .off-canvas.in-view {
  transform: translate3d(0, 0, 0);
}
header .custom-nav .nav-items {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 20px;
  letter-spacing: 2px;
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
header .custom-nav .nav-items.off-view {
  transform: translate3d(-100%, 0, 0);
}
header .custom-nav .nav-items .dropdown-test .nav-big-down {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: auto;
  transform: translate3d(100%, 0, 0);
  transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
header .custom-nav .nav-items li {
  margin-bottom: 20px;
}
header .custom-nav .close-mobile {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
}
header .custom-nav .title {
  display: block;
  font-size: 30px;
  color: #fff;
  font-family: "RethinkSans", sans-serif;
  position: relative;
  font-weight: 400;
}
header .custom-nav .social {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 30px;
}
header .custom-nav .social li {
  display: inline-block;
  margin-right: 20px;
}
header .custom-nav .social li:last-child {
  margin-right: 0px;
}
header .custom-nav .social li a {
  color: #014023;
}
header .custom-nav .mobile-copyright {
  margin: 0;
  display: inline-block;
  width: 100%;
  margin-top: 50px;
  color: #014023;
}
header .custom-nav .mobile-show {
  display: block;
  padding-left: 20px;
}
header .custom-nav .mobile-show img {
  max-width: 200px;
  display: block;
  height: auto;
  margin-bottom: 75px;
}

@media only screen and (max-width: 1550px) {
  header .container-fluid.custom {
    padding: 0 15px;
  }
  header .custom-nav {
    /*  padding: 50px 0 0 0;*/
  }
  header .custom-nav .container-fluid.custom {
    max-width: 1000px;
  }
}
@media only screen and (max-width: 767.5px) {
  .hamburger .inner .menu-title {
    font-size: 18px;
  }
  header .container-fluid.custom {
    padding: 0 15px 0 5px;
  }
  header .custom-nav {
    width: 100%;
    right: -100%;
  }
  header .logo {
    max-width: 150px;
    height: 45px;
  }
  html.active main, html.active .topheader, html.active footer, html.active .copy, html.active .menu-middle {
    left: -75%;
  }
  html.active .overlay-search {
    left: -75%;
  }
  .offcanvas-menu {
    height: 100% !important;
  }
  .offcanvas-menu ul li a {
    padding: 15px 10px;
  }
  .offcanvas-menu .offcanvas-submenu .back-btn {
    margin: 0 0 25px;
  }
  .offcanvas-menu .offcanvas-submenu .back-btn a:before {
    font-size: 26px;
  }
  .offcanvas-menu .offcanvas-submenu a {
    padding: 5px 20px !important;
    font-size: 23px;
    display: table;
  }
}
@media only screen and (max-width: 360px) {
  .right-menu .search {
    padding: 14px 12px;
  }
  .right-menu .menu-icon.login {
    padding: 15px 12px;
  }
  /*      .right-menu .menu-icon:last-of-type {
          margin-left: 0;
      }*/
}
@media only screen and (max-width: 1200px) {
  .menu-middle {
    width: 100%;
    left: 0;
    padding: 10px 0;
  }
  .menu-middle .shopping-bag .drop {
    position: fixed;
    top: 55px;
    z-index: 999;
    right: initial;
    left: 15px;
    width: calc(100% - 30px);
    min-width: inherit;
    max-height: calc(100vh - 150px);
    height: 100%;
  }
  .menu-middle .shopping-bag .drop .list::-webkit-scrollbar {
    display: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .menu-middle .search {
    position: absolute;
    left: 0px;
    top: 60px;
    padding: 10px 15px;
    background: #014023;
    width: 100%;
    order: 3;
    margin-left: auto;
    max-width: inherit;
  }
  .menu-middle .search .form-group .form-control {
    padding: 8px 15px;
  }
}
@media only screen and (max-width: 1024px) {
  .topheader ul {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .menu-middle .search .form-group .btn-search {
    top: 0px;
  }
}
@media only screen and (max-width: 767.5px) {
  .offcanvas-menu ul li a {
    font-size: 32px;
  }
  .right-menu {
    padding: 0;
    margin: 0 15px 0 auto;
  }
  .right-menu .btn-default {
    display: none;
  }
  .search-results .inner {
    max-height: 70vh;
    overflow-y: scroll;
    margin: 0;
    padding: 20px 15px;
    -webkit-overflow-scrolling: touch;
  }
  .search-results .inner .close-search {
    padding: 0;
    right: 20px;
    font-size: 26px;
    top: 25px;
  }
  .search-results .inner b {
    display: block;
    margin-bottom: 10px;
  }
  .search-results .inner .products {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0px;
  }
  .search-results .inner .products .item {
    align-items: flex-start;
  }
  .search-results .inner .products .item .right-side {
    padding-left: 0;
    max-width: calc(100% - 120px);
    flex: 0 0 calc(100% - 120px);
    align-items: start;
  }
  .search-results .inner .products .item .right-side .price {
    margin: 10px auto 10px 0;
  }
  .search-results .inner .products .item .right-side .btn-list .stock, .search-results .inner .products .item .right-side .btn-list .delivery {
    text-align: left;
  }
  .search-results .inner .products .item .right-side .info, .search-results .inner .products .item .right-side .price, .search-results .inner .products .item .right-side .btn-list {
    max-width: 100%;
    text-align: left;
    width: 100%;
    justify-content: start;
  }
  .search-results .inner .products .item h6 {
    margin-bottom: 5px;
  }
  .search-results .inner .products .item img {
    flex: 0 0 20%;
    max-width: 20%;
    object-fit: contain;
  }
  .search-results .inner .cats {
    flex: 0 0 100%;
    max-width: 100%;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    border-right: 0;
    margin-bottom: 30px;
  }
  .topheader {
    padding: 15px 0px;
  }
  .topheader ul li {
    margin-bottom: 3px;
  }
}
@media only screen and (max-width: 360px) {
  header .logo img {
    max-width: 115px;
    height: 40px;
  }
  .right-menu .menu-icon, .right-menu .btn-default {
    width: 35px;
    height: 35px;
  }
  .right-menu .menu-icon i, .right-menu .btn-default i {
    font-size: 14px;
  }
}
/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - headerschil, exact naar de bron.
   Twee hoogtematen: de rustmaat (--header-rest) bovenaan de pagina en de
   compacte maat (--header-h) zodra de balk vastplakt. menu.js zet .is-stuck
   zodra de eigen bovenkant het scherm raakt (de topbalk staat erboven, dus
   scrollY zegt niets over dat moment). De .header-shim onder de balk groeit
   precies zoveel als de balk krimpt, zodat de pagina niet springt.
   ========================================================================== */
:root {
  --header-h: 76px;
  --header-rest: 76px;
  --nav-logo-h: 54px;
  --nav-logo-rest: 54px;
}

/* Op brede schermen begint de balk ruim met een groot logo en krimpt hij bij
   het vastplakken naar een compacte leesbalk. Onder 1200px past de brede
   opzet niet naast het menu; daar zijn beide maten gelijk en gebeurt er niets.
   (Live geverifieerd op de bron: geen mobiele krimp, wel desktop.) */
@media (min-width: 1200px) {
  :root {
    --header-h: 64px;
    --header-rest: 120px;
    --nav-logo-h: 46px;
    --nav-logo-rest: 96px;
  }
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bronze);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

/* Het menu sluit direct op het logo aan; de afspraakknop wordt met margin-left
   naar de overkant geduwd. */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-5);
  min-height: var(--header-rest);
  transition: min-height var(--dur) var(--ease);
}

.header.is-stuck .nav {
  min-height: var(--header-h);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
}

/* Het logo zit in een <picture> (page.master): onder 1100px, waar de hamburger
   het menu overneemt, het brede woordlogo (logo-woord.svg), daarboven het
   gewone logo. display: contents laat de <picture> zelf geen flex-item zijn,
   zodat de <img> direct in .nav__logo staat en de hoogte (en het krimpen bij
   het vastplakken) precies werkt als toen de <img> er los in stond. */
.nav__logo picture {
  display: contents;
}

.nav__logo img {
  height: var(--nav-logo-rest);
  width: auto;
  transition: height var(--dur) var(--ease);
}

.header.is-stuck .nav__logo img {
  height: var(--nav-logo-h);
}

.header-shim {
  height: 0;
  transition: height var(--dur) var(--ease);
}

.header.is-stuck + .header-shim {
  height: calc(var(--header-rest) - var(--header-h));
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__menu > li {
  margin: 0;
  position: relative;
}

/* De Behandelingen-LI verliest hier bewust zijn eigen relative-anker: het
   megamenu moet niet onder zijn eigen trigger opengaan (die staat links in de
   balk), maar horizontaal midden op het scherm. Zonder eigen "position"
   springt .megamenu's containing block (position:absolute) door naar .header
   (position:sticky, volle schermbreedte) - daardoor centreert .megamenu's
   left:50%/translateX(-50%) voortaan écht op het scherm i.p.v. op deze LI.
   .submenu (Over ons, geen [data-mega]) houdt gewoon zijn eigen anker. */
.nav__menu > li:has([data-mega]) {
  position: static;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-xs);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link[aria-expanded=true] {
  color: var(--gold-text);
  background: var(--gold-50);
}

.nav__link[aria-current=page] {
  color: var(--gold-text);
  font-weight: 600;
}

.nav__link svg {
  transition: transform var(--dur) var(--ease);
}

.nav__link[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  margin-left: auto;
}

/* ---------- Uitklapmenu voor Behandelingen (megamenu) ----------
   Poort van style.css ".megamenu*"; open/dicht via koppelUitklap in menu.js
   (klasse .is-open op [data-mega], attribuut aria-expanded op de trigger).
   De bron groepeert de categorieën handmatig in 3 vaste kolom-<div>'s; hier
   is dat data-driven (clsBehandelingen.getOverzicht, page.master.vb), dus
   CSS-multicolumn i.p.v. een vaste 3-koloms grid - dat verdeelt elk aantal
   categorieën netjes over 3 kolommen zonder dat de kolomindeling hier
   opnieuw hardcoded hoeft te staan. break-inside:avoid houdt een categorie
   (kop + lijst) samen in één kolom. */
.megamenu {
  position: absolute;
  top: calc(100% + 25px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(94vw, 1080px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.megamenu__grid {
  columns: 4;
  column-gap: var(--sp-6);
}

.megamenu__cat {
  break-inside: avoid;
  margin-bottom: var(--sp-5);
}

.megamenu__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* .megamenu__title is nu een link naar de categoriepagina (was een kale
     <p>) - zonder dit wint de sitebrede a:where(...){text-decoration:underline}
     (main.scss) de tie-break op specificiteit (allebei a-elementselector,
     laatste in broncode wint), zie .nav__link/.link-arrow/.kruimels a
     hierboven voor hetzelfde patroon. */
  text-decoration: none;
}

.megamenu__title:hover {
  color: var(--gold-500);
}

.megamenu__title svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.megamenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.megamenu__list li {
  margin: 0;
}

.megamenu__list a {
  display: block;
  padding: 0.4rem 0.5rem;
  margin-left: -0.5rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-xs);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.megamenu__list a:hover {
  background: var(--gold-50);
  color: var(--gold-text);
}

.megamenu__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Uitklapmenu voor Over ons (submenu) ----------
   Poort van style.css ".submenu*". Kleiner en eenvoudiger dan .megamenu (geen
   kolommen, geen icoon per item): één lijstje met naam + korte omschrijving
   per pagina. Zelfde open/dicht-mechanisme als het megamenu - koppelUitklap
   in menu.js bedient [data-sub-trigger]/[data-sub] al generiek; alleen de
   markup (repSub, page.master) en de databinding (page.master.vb) staan hier
   nog niet, dat is een vervolgstap. Klaar om aan te haken zodra dat er is. */
.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(92vw, 320px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.submenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.submenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu__list li {
  margin: 0;
}

.submenu__list a {
  display: block;
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  color: var(--ink-2);
  border-radius: var(--r-xs);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.submenu__list a:hover {
  background: var(--gold-50);
  color: var(--gold-text);
}

.submenu__naam {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.submenu__uit {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 0.1rem;
}

.submenu__list a[aria-current=page] .submenu__naam {
  color: var(--gold-text);
}

/* De volledige menubalk heeft ongeveer 1100px nodig; daaronder neemt de
   hamburger het over — dezelfde grens als waar .nav__menu verdwijnt. */
@media (max-width: 1099px) {
  .nav__menu,
  .nav__actions .btn--desktop {
    display: none;
  }
}
@media (min-width: 1100px) {
  .nav__link {
    padding-inline: 0.6rem;
  }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav {
    gap: var(--sp-4);
  }
}
/* Hamburgerknop */
/* Pil met het woord "Menu" links van de hamburger (was een rond knopje van
   44px met alleen het icoon). */
.nav__toggle {
  display: none;
  height: 44px;
  padding: 0 0.7rem 0 0.95rem;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--ink);
}

.nav__toggle-tekst {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

@media (max-width: 1099px) {
  .nav__toggle {
    display: inline-flex;
  }
}
/* Sluit de bezoeker het menu, dan tekent de hamburger zichzelf opnieuw:
   het icoon veert terug en de drie streepjes verschijnen een voor een. De
   veer zit op de svg, niet op de hele knop: het woord "Menu" ernaast hoort
   niet mee te draaien. */
.nav__toggle svg line {
  stroke-dasharray: 18;
  stroke-dashoffset: 0;
}

.nav__toggle.is-terug svg {
  animation: burger-veer 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.nav__toggle.is-terug line {
  animation: burger-teken 0.34s var(--ease) backwards;
}

.nav__toggle.is-terug line:nth-of-type(1) {
  animation-delay: 0.1s;
}

.nav__toggle.is-terug line:nth-of-type(2) {
  animation-delay: 0.19s;
}

.nav__toggle.is-terug line:nth-of-type(3) {
  animation-delay: 0.28s;
}

@keyframes burger-veer {
  from {
    transform: scale(0.5) rotate(75deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes burger-teken {
  from {
    stroke-dashoffset: 18;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.nav__toggle svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav__toggle:active svg {
  transform: scale(0.88);
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle.is-terug svg,
  .nav__toggle.is-terug line {
    animation: none;
  }
  .nav__toggle svg {
    transition: none;
  }
}
/* ==========================================================================
   Drawer: mobiel zijpaneel met scrim (herontwerp).
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(47, 37, 16, 0.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(2px);
}

.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 420px);
  background: #fff;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 var(--sp-5) var(--sp-6);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__panel:focus,
.drawer__panel:focus-visible {
  outline: 0;
}

/* De kop blijft staan tijdens het scrollen, zodat de sluitknop nooit kwijtraakt */
.drawer__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0 calc(var(--sp-5) * -1) var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border-bottom: 1px solid var(--line-2);
}

.drawer__head img {
  height: 40px;
  width: auto;
}

.drawer__close {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--ink);
}

/* Het kruisje tekent zichzelf zodra het menu opent */
.drawer__close svg line {
  stroke-dasharray: 17;
  stroke-dashoffset: 0;
}

.drawer.is-open .drawer__close {
  animation: kruis-veer 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s backwards;
}

.drawer.is-open .drawer__close line {
  animation: kruis-teken 0.38s var(--ease) backwards;
}

.drawer.is-open .drawer__close line:first-of-type {
  animation-delay: 0.22s;
}

.drawer.is-open .drawer__close line:last-of-type {
  animation-delay: 0.34s;
}

@keyframes kruis-veer {
  from {
    transform: scale(0.4) rotate(-120deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes kruis-teken {
  from {
    stroke-dashoffset: 17;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.drawer__close svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drawer__close:active svg {
  transform: rotate(90deg) scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
  .drawer.is-open .drawer__close,
  .drawer.is-open .drawer__close line {
    animation: none;
  }
  .drawer__close svg {
    transition: none;
  }
}
.drawer__label {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer__nav li {
  margin: 0;
}

.drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__nav > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.drawer__nav > li + li {
  border-top: 1px solid var(--line-2);
}

.drawer__nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* Los knopje náást de link (page.master: btnDrawerMegaToggle/btnDrawerSubToggle),
   niet erin - de link zelf blijft altijd gewoon navigeren (Behandelingen is
   zelf ook een pagina), alleen dit knopje klapt het paneel open/dicht. Eigen
   klikvlak, geen overlap, dus geen z-index-truc nodig. */
.drawer__acc-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: var(--sp-1);
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  color: var(--gold-500);
  cursor: pointer;
}

.drawer__acc-toggle:hover,
.drawer__acc-toggle:focus-visible {
  background: var(--gold-50);
}

/* Het paneel valt op zijn eigen volle-breedte regel, onder de link+knopje-rij
   (.drawer__nav > li staat nu op display:flex; flex-wrap:wrap). */
.drawer__nav > li > .drawer__acc-panel {
  flex-basis: 100%;
  width: 100%;
}

.drawer__nav > li > a[aria-current=page] {
  color: var(--gold-text);
}

/* Waar je nu bent: goud gemerkt met een streepje tegen de rand van het paneel */
.drawer__nav > li > a[aria-current=page]::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1);
  top: 0.85rem;
  bottom: 0.85rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}

.drawer__acc-toggle svg {
  transition: transform var(--dur) var(--ease);
}

.drawer__acc-toggle[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.drawer__acc-panel .drawer__cat-link[aria-current=page] {
  color: var(--gold-text);
}

.drawer__acc-panel {
  display: none;
}

/* Het uitgeklapte deel krijgt een eigen vlak. Zo zie je in een oogopslag dat
   de categorieën bij Behandelingen horen en niet bij het menu eronder. */
.drawer__acc-panel.is-open {
  display: block;
  margin: 0 calc(var(--sp-3) * -1) var(--sp-4);
  padding: 0.1rem var(--sp-4) var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

/* Categorielijst in het mobiele menu: eerst alleen de acht categorieën, de
   behandelingen komen pas in beeld na een tik op de categorie. */
.drawer__cats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__cat + .drawer__cat {
  border-top: 1px solid var(--line-2);
}

.drawer__acc-panel .drawer__cat-btn,
.drawer__acc-panel .drawer__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  padding: 0.45rem 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.drawer__acc-panel .drawer__cat-btn[aria-expanded=true] {
  color: var(--gold-text);
}

.drawer__cat-link svg {
  color: var(--gold-400);
  flex: none;
}

.drawer__cat-btn svg {
  color: var(--gold-400);
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.drawer__cat-btn[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.drawer__cat-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Een gouden lijntje langs de behandelingen laat zien onder welke categorie ze
   vallen, ook als je halverwege de lijst begint te lezen. */
.drawer__cat-list.is-open {
  display: block;
  margin: 0 0 var(--sp-3) 0.1rem;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 2px solid var(--gold-200);
}

.drawer__acc-panel .drawer__cat-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-3);
  text-decoration: none;
}

.drawer__acc-panel .drawer__viewall,
.drawer__acc-panel .drawer__cat-list .drawer__viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
}

.drawer__acc-panel .drawer__cat-list .drawer__viewall {
  padding-top: var(--sp-2);
}

/* De afspraakknop staat los onder het menu; daaronder begint het contactblok */
.drawer__panel > a.btn:last-of-type {
  margin-bottom: var(--sp-5);
}

/* Taalwissel onder de afspraakknop. .drawer__meta hieronder heeft margin-top:
   auto - dat duwt deze knop vanzelf vlak boven het contactblok, ongeacht
   hoeveel menu-items erboven staan. Zelfde pilvorm als .topbar__lang
   (topbar.scss), maar op de witte drawer-achtergrond i.p.v. de crème topbalk;
   daarom een eigen klasse in plaats van .topbar__lang hergebruiken. */
.drawer__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: var(--sp-5);
  border: 1px solid var(--gold-300);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.drawer__lang svg {
  color: var(--gold-500);
}

.drawer__lang:hover {
  background: var(--gold-50);
  border-color: var(--gold-400);
}

.drawer__meta {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.drawer__meta p {
  margin: 0;
}

.drawer__meta .drawer__label {
  margin-top: 0;
}

.drawer__meta a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  padding-block: 0.4rem;
}

.drawer__adres {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.custom-nav {
  background-color: var(--surface-2);
}

.custom-nav:before {
  opacity: 0.5;
}

header .custom-nav.color-dodge:after {
  display: none;
}

.custom-nav .container-fluid.custom {
  max-width: 640px;
}

.offcanvas-menu ul li a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--ink) !important;
  letter-spacing: 0;
}

.offcanvas-menu ul li a:hover {
  color: var(--gold-text) !important;
  opacity: 1;
}

.offcanvas-menu ul li.has-children > span > a {
  font-weight: 400;
}

/* De pop-up submenu's (populair/dropdown bij hover, desktop) en het
   uitklap-submenu (mobiel) krijgen dezelfde, kleinere, leesbare maat in
   plaats van de tekst van het hoofdmenu te kopiëren. */
.offcanvas-menu .wrapper-menu {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

.offcanvas-menu .wrapper-menu ul li a,
.offcanvas-menu .pop-products li a,
.offcanvas-submenu li a {
  font-family: var(--font-body);
  font-size: 1rem !important;
  font-weight: 500;
  color: var(--ink-2) !important;
}

.offcanvas-menu .pop-products b {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.custom-nav .title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

.custom-nav .social a {
  background: var(--bronze-deep);
}

.custom-nav .mobile-copyright {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
}

/* Rechterkant van de balk: account/taal/zoeken in het nieuwe lettertype en
   de gedempte merkkleur in plaats van het oude donkergroen/fel goud. */
.right-menu #aLogin {
  color: var(--gold-text);
  font-family: var(--font-body);
  font-weight: 600;
}

.right-menu .shopping-cart-icon .icon {
  background: var(--gold-500);
}

.language-switch .inner ul li a {
  font-family: var(--font-body);
  color: var(--ink-2);
}

.search .form-control {
  font-family: var(--font-body);
}

.search .btn-search {
  color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   Menubalk op desktop, altijd zichtbaar (geen hamburger-klik nodig).

   Waarom dit nodig was: .custom-nav (waar repHoofd/repSub in zitten) is in
   de bestaande opzet altijd een volledig-scherm paneel dat verborgen blijft
   (opacity/visibility 0, position fixed) tot html.active wordt gezet door
   het klikken op de hamburger (zie Resources/js/menu.js). Daardoor was er op
   geen enkele schermbreedte een doorlopend zichtbare menubalk, alleen het
   hamburger-icoon. Dit blok zet .custom-nav vanaf 1200px om naar een gewoon,
   statisch onderdeel van de balk (naast het logo, voor .right-menu, dat al
   margin-left:auto heeft) - de repeaters, hun ItemTemplates en de
   OnItemDataBound-koppeling in page.master zijn hierbij niet aangeraakt,
   alleen hoe dit bestaande blok zich presenteert. Onder 1200px blijft het
   hamburger-menu (met de logo-animatie uit menu.js) volledig ongewijzigd:
   dat is prima ruimte voor een uitklapmenu op een telefoon/tablet.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  header .custom-nav {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    visibility: visible;
    background: transparent;
    display: flex;
    align-items: center;
    overflow: visible;
    transition: none;
    right: auto;
    bottom: auto;
  }
  header .custom-nav:before {
    display: none;
  }
  header .custom-nav .socials {
    display: none;
  }
  header .custom-nav .container-fluid.custom {
    max-width: none;
    padding: 0;
  }
  header .custom-nav .row {
    margin: 0;
  }
  header .custom-nav .col-sm-12 {
    padding: 0;
  }
  /* het menu sluit direct op het logo aan; .right-menu heeft al
     margin-left:auto en wordt daarmee naar de overkant geduwd, zodat de
     loze ruimte tussen menu en knoppen valt - niet tussen logo en menu */
  header .custom-nav {
    margin-left: var(--sp-5);
  }
  .offcanvas-menu {
    width: auto;
    margin: 0;
    overflow: visible;
  }
  .offcanvas-menu ul.menu {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  .offcanvas-menu ul.menu > li {
    margin: 0;
  }
  /* was 2rem voor het volledige-scherm mobiele menu; in een balk hoort
     navigatietekst klein en rustig te zijn (maat uit het ontwerp) */
  .offcanvas-menu ul li a {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.6rem 0.9rem;
    border-radius: var(--r-xs);
    white-space: nowrap;
    color: var(--ink-2) !important;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .offcanvas-menu ul li a:hover {
    color: var(--gold-text) !important;
    background: var(--gold-50);
    opacity: 1;
  }
  .offcanvas-menu ul li.active > span > a {
    color: var(--gold-text) !important;
    font-weight: 600;
  }
  .offcanvas-menu .sub-menu-toggle {
    display: none;
  }
  /* .wrapper-menu (de hover-flyout) bestaat niet als los element in de
     huidige markup - .pop-products en .offcanvas-submenu.drop-desk staan
     als twee losse lijsten direct in dezelfde <li>. Ze krijgen hier allebei
     rechtstreeks hun eigen hover-dropdown, zonder dat er een wrapper-div
     bij hoeft te komen. */
  header .custom-nav li.has-children {
    position: relative;
  }
  header .custom-nav li.has-children > .pop-products,
  header .custom-nav li.has-children > ul.offcanvas-submenu.drop-desk {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: var(--sp-3);
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
  }
  header .custom-nav li.has-children:hover > .pop-products,
  header .custom-nav li.has-children:hover > ul.offcanvas-submenu.drop-desk {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  header .custom-nav .pop-products {
    display: block;
  }
  header .custom-nav .pop-products li,
  header .custom-nav .offcanvas-submenu.drop-desk li {
    display: block;
  }
  /* hamburger is overbodig zodra de balk zelf al zichtbaar is */
  header .hamburger {
    display: none !important;
  }
}
/* ==========================================================================
  Vaste WhatsApp-knop rechtsonder (aWhatsappKnop in page.master).
  Overgenomen van rijkstaete (.fixed-btn in main.scss daar): groene pil met
  icoon en tekst, groeit iets bij hover. Zelfde classnaam als de bron, zodat
  een latere wijziging daar 1-op-1 over te zetten is. Verschillen met de bron:
  - het icoon is een inline svg (currentColor) i.p.v. een <img>, zoals de rest
    van page.master;
  - lettertype en grootte via de tokens van het herontwerp (--font-body,
    --fs-sm = 16px, regelhoogte 1.5 = 24px, precies wat rijkstaete rendert)
    i.p.v. de body-font van dat project;
  - z-index tussen de sticky header (100, header.scss) en het mobiele menu
    (200), zodat het menu de knop afdekt.
  De .whatsappme-chatbox die hier stond was nergens geimporteerd (dood).
  ========================================================================== */
.fixed-btn {
  position: fixed;
  right: 15px;
  bottom: 25px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 12px 20px;
  border-radius: 100px;
  background: #28CA42;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  /* Eigen hover-regel nodig: de sitebrede a:where(...):hover (main.scss)
     zou de tekst anders goud kleuren. */
}
.fixed-btn:hover, .fixed-btn:focus-visible {
  color: #fff;
  transform: scale(1.05);
}
.fixed-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ==========================================================================
   Actiebalk onderaan op mobiel (page.master, .actiebalk): "Maak een afspraak"
   links en WhatsApp rechts, naast elkaar. Naar het voorbeeld van
   bfabo.skinrenew.nl (.sticky-cta): witte balk met schaduw omhoog die van
   onderen inschuift zodra er geen actieknop in beeld is (actiebalk.js zet
   .is-visible). Op desktop bestaat de balk niet; daar blijft de losse
   WhatsApp-knop (.fixed-btn, whatsapp.scss), die op mobiel juist wijkt voor
   deze balk. visibility wisselt mee, zodat de knoppen van een weggeschoven
   balk niet met Tab bereikbaar zijn.
   ========================================================================== */
.actiebalk {
  display: none;
}

@media (max-width: 899px) {
  .actiebalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    gap: var(--sp-3);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(33, 31, 27, 0.1);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .actiebalk.is-visible {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Beide knoppen groeien vanuit hun inhoud en delen de restruimte gelijk;
     de tekst blijft op één regel (op 375px past "Maak een afspraak" anders
     niet naast WhatsApp en wordt de knop twee regels hoog). */
  .actiebalk__btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 52px;
    padding: 0.75rem 0.9rem;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }
  .actiebalk__btn svg {
    flex: none;
  }
  /* links: zelfde actiegroen (met klik-animatie) als de andere afspraakknoppen */
  .actiebalk__btn--afspraak {
    background: var(--cta);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
    animation: knopKlik 6.5s ease-in-out 2.5s infinite;
    /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
       schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
       animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
       transform + border-radius op hetzelfde element. Deze mask-truc dwingt
       Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
       te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
       negeren een onbekend prefix), dus geen aparte browser-check nodig. */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .actiebalk__btn--afspraak:hover, .actiebalk__btn--afspraak:focus-visible, .actiebalk__btn--afspraak:active {
    animation: none;
  }
  .actiebalk__btn--afspraak:hover {
    background: var(--cta-hover);
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
    transform: translateY(-2px);
  }
  .actiebalk__btn--afspraak:active {
    transform: translateY(0);
  }
  /* rechts: het WhatsApp-groen van de losse knop (.fixed-btn); eigen
     hover-kleur omdat de sitebrede a:hover de tekst anders goud kleurt */
  /* de losse WhatsApp-knop wijkt op mobiel voor de balk */
  /* de footer houdt onderin ruimte vrij (footer.scss reserveerde al 56px
     voor deze balk); de balk is 12 + 50 + 12 = 74px plus de veilige zone
     van toestellen met een schermrand onderin */
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .actiebalk__btn--afspraak {
    animation: none !important;
  }
  .actiebalk__btn--afspraak:hover {
    transform: none;
  }
}
@media (max-width: 899px) {
  .actiebalk__btn--wa {
    background: #28CA42;
  }
  .actiebalk__btn--wa:hover, .actiebalk__btn--wa:focus-visible {
    color: #fff;
  }
  .fixed-btn {
    display: none;
  }
  footer .footer__bottom {
    padding-bottom: calc(var(--sp-5) + 74px + env(safe-area-inset-bottom));
  }
}
/* Smalle toestellen (320-360px): iets kleinere letter en het kalender-icoon
   weg, anders passen de twee knoppen niet naast elkaar. */
@media (max-width: 360px) {
  .actiebalk {
    gap: var(--sp-2);
  }
  .actiebalk__btn {
    font-size: 0.875rem;
    padding-inline: 0.7rem;
  }
  .actiebalk__btn--afspraak svg {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .actiebalk {
    transition: none;
  }
}
@media (max-width: 640px) {
  .hero .btn-default {
    min-width: 220px !important;
  }
}
.hero .btn-default:nth-of-type(1) {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.hero .btn-default:nth-of-type(1):hover, .hero .btn-default:nth-of-type(1):focus-visible, .hero .btn-default:nth-of-type(1):active {
  animation: none;
}
.hero .btn-default:nth-of-type(1):hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.hero .btn-default:nth-of-type(1):active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hero .btn-default:nth-of-type(1) {
    animation: none !important;
  }
  .hero .btn-default:nth-of-type(1):hover {
    transform: none;
  }
}
.hero .btn-default:nth-of-type(2) {
  border: 1px solid transparent;
  background: transparent;
  border-color: rgb(205, 198, 182);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Telefoonicoon uit de bron (daar een inline SVG in de knop; hier
     via mask, want de knop komt uit CMS-tekst zonder markup). */
}
.hero .btn-default:nth-of-type(2)::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero .btn-default:nth-of-type(2):hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}

.behandelingen-sec.home {
  background: #faf8f3;
}
.behandelingen-sec .btn-default {
  border: 1px solid transparent;
  background: transparent;
  border-color: rgb(205, 198, 182);
  align-items: center;
  margin: 0 auto;
  display: table;
}
.behandelingen-sec .btn-default:hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}

.color-dodge {
  position: relative;
}
.color-dodge .wrapper, .color-dodge container-fluid.custom, .color-dodge .bamboo {
  position: relative;
  z-index: 2;
}
.color-dodge.reverse:after {
  transform: scaleY(-1);
}
.color-dodge:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: color-dodge;
  opacity: 0.5;
}

.expertise-sec {
  background: #fff;
}
.expertise-sec .link-arrow {
  display: block;
}
.expertise-sec .link-arrow svg {
  top: 2px;
  position: relative;
}

.lab-sec {
  background: #fff;
}
.lab-sec.textpage-detail .split {
  display: grid;
  grid-template-columns: initial;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.lab-sec.textpage-detail p {
  margin: 0 0 15px;
}
.lab-sec.textpage-detail .reveal {
  opacity: 1 !important;
  transform: none;
}
.lab-sec .btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  min-height: 48px;
  padding: 1rem 1.75rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.15s var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  background: transparent;
  color: var(--ink);
  border-color: #cdc6b6;
  margin-top: 20px;
}
.lab-sec .btn-default:nth-of-type(2) {
  margin-left: 10px;
}

.kliniek-sec {
  background: #fff;
}
.kliniek-sec .btn-default {
  display: inline-block;
  margin-top: 15px;
}
.kliniek-sec .btn-default:nth-of-type(1) {
  border: 1px solid transparent;
  background: transparent;
  border-color: rgb(205, 198, 182);
}
.kliniek-sec .btn-default:nth-of-type(1):hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}
.kliniek-sec .btn-default:nth-of-type(2) {
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
  /* Pijltje uit de bron (daar een inline SVG achter de linktekst) */
}
.kliniek-sec .btn-default:nth-of-type(2)::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kliniek-sec .btn-default:nth-of-type(2):hover::after {
  transform: translateX(4px);
}

/* De golfranden van de kengetallen-sectie komen uit het bron-blok
   .section--organic::after (verderop in dit bestand), met de kleuren van de
   buursecties. De eigen .counter-sec-golven die hier stonden hadden de
   kleuren omgedraaid en zijn vervallen; alleen de ul-styling voor de
   CMS-kengetallen (ltl25) blijft. */
.counter-sec {
  position: relative;
}
.counter-sec ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--sp-5);
  /* auto-fit past bij 4 getallen op een smal scherm niet altijd een
     heel aantal kolommen: dan blijft er 1 item over op een eigen,
     onvolledige rij en die staat links i.p.v. gecentreerd (grid
     rekt elk item over zijn eigen kolom, niet over de hele breedte).
     Vast op 2 kolommen voorkomt dat - de items mogen best onder
     elkaar (in paren) staan, als ze maar recht boven elkaar/gecentreerd
     blijven. */
}
@media (max-width: 640px) {
  .counter-sec ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}
.counter-sec ul li {
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
}
.counter-sec ul li strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--gold-text);
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 400;
}

.reviews-sec a:not(.btn-default) {
  color: var(--gold-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration: underline;
}
@media only screen and (max-width: 767.5px) {
  .reviews-sec a:not(.btn-default) {
    display: table;
    margin: 0 auto;
  }
}

.cta-band .btn-row {
  display: flex;
  flex-direction: row;
  /* Op mobiel staan de knoppen (tot 3) in een rij te dringen, en de
     losse zij-marge op de 2e knop (voor de rij-opstelling hierboven)
     blijft ook staan zodra hij naar een eigen regel wrapt - dan oogt
     hij scheef i.p.v. gecentreerd. Onder elkaar en op volle breedte is
     hier netter dan een krappe of wrappende rij.

     De knoppen staan in een <p> (CMS-tekst levert ze zo aan) die zélf
     ook display:flex/flex-direction:row heeft (regel hierboven) - dat
     moet hier dus ook naar column, anders blijven de 3 knoppen in die
     <p> nog steeds naast elkaar staan en persen zich zo smal dat de
     tekst breekt en de vaste 50px-radius uit de knop-mixin ze in
     rondjes verandert. */
}
.cta-band .btn-row p {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.cta-band .btn-row .btn-default:nth-of-type(1) {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.cta-band .btn-row .btn-default:nth-of-type(1):hover, .cta-band .btn-row .btn-default:nth-of-type(1):focus-visible, .cta-band .btn-row .btn-default:nth-of-type(1):active {
  animation: none;
}
.cta-band .btn-row .btn-default:nth-of-type(1):hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.cta-band .btn-row .btn-default:nth-of-type(1):active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cta-band .btn-row .btn-default:nth-of-type(1) {
    animation: none !important;
  }
  .cta-band .btn-row .btn-default:nth-of-type(1):hover {
    transform: none;
  }
}
.cta-band .btn-row .btn-default:nth-of-type(2) {
  margin: 0 15px;
}
.cta-band .btn-row .btn-default:nth-of-type(2), .cta-band .btn-row .btn-default:nth-of-type(3) {
  border: 1px solid transparent;
  background: #fff;
  border-color: rgb(205, 198, 182);
}
.cta-band .btn-row .btn-default:nth-of-type(2):hover, .cta-band .btn-row .btn-default:nth-of-type(3):hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}
@media (max-width: 640px) {
  .cta-band .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-band .btn-row p {
    display: flex;
    flex-direction: column;
    width: auto;
    gap: var(--sp-3);
  }
  .cta-band .btn-row .btn-default {
    width: 100%;
    text-align: center;
  }
  .cta-band .btn-row .btn-default:nth-of-type(2) {
    margin: 0;
  }
}

.slider-outer {
  padding: 50px 0;
}
.slider-outer .text-slider {
  color: #141F1B;
  font-size: 40px;
  font-weight: 600;
  text-align: center;
}
.slider-outer .text-slider .slick-slide {
  padding: 15px 0;
}

.products.sustainability {
  padding: 75px 0;
}
.products.sustainability .title {
  text-align: center;
  margin: 0 0 25px;
}
.products.sustainability .title b {
  position: relative;
  padding: 0 0 0 40px;
  color: #141F1B;
  display: table;
  margin: 0 auto;
}
.products.sustainability .title b:before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
}
.products.sustainability .title h2, .products.sustainability .title h3, .products.sustainability .title h4, .products.sustainability .title h5, .products.sustainability .title h6 {
  font-size: 55px;
  line-height: 60px;
  margin: 0 0 10px;
}
.products.shop-page {
  padding: 100px 0 50px;
}
.products.shop-page .title-top {
  margin: 0 0 50px;
}
.products.shop-page .title-top h1 {
  font-size: 55px;
  line-height: 60px;
  margin: 0 0 10px;
}
.products .title-top {
  text-align: center;
  color: #141F1B;
  margin: 0 0 35px;
  font-size: 18px;
}
.products .title-top .beeldmerk {
  display: block;
  max-width: 55px;
  margin: 0 auto 10px;
}
.products .title-top h2, .products .title-top h3, .products .title-top h4, .products .title-top h5, .products .title-top h6 {
  font-size: 50px;
  margin: 5px 0 0 0;
}
.products .item {
  background: #141F1B;
  color: #D3AF59;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 75px 25px;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
  flex-wrap: wrap;
}
.products .item .color-dodge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.products .item:after {
  content: "";
  position: absolute;
  top: 0;
  right: -250px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  height: 100%;
  width: 300px;
  z-index: 1;
  transition: all 0.5s ease-in-out;
}
.products .item:before {
  content: "";
  position: absolute;
  top: -200px;
  left: -25px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  height: 100%;
  width: 300px;
  z-index: 1;
  transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 767.5px) {
  .products .item:hover:after {
    transform: translateX(-200px);
  }
  .products .item:hover:before {
    transform: translateY(80px);
  }
  .products .item:hover .text {
    transform: translateY(0);
  }
  .products .item:hover .text .content {
    opacity: 1;
    visibility: visible;
    /*  max-height: 500px; // set a large enough value for animation*/
    transform: translateY(0);
  }
  .products .item:hover .info-message {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
@media only screen and (max-width: 767.5px) {
  .products .item:after {
    transform: translateX(-200px);
  }
  .products .item:before {
    transform: translateY(80px);
  }
  .products .item .text {
    transform: translateY(0);
    max-width: 50% !important;
  }
  .products .item .text .content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  .products .item .info-message {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.products .item .info-message {
  display: block;
  width: 100%;
  margin-top: 15px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.products .item b.title {
  font-weight: 700;
  font-size: 40px;
  line-height: 50px;
  margin: 0 0 5px;
}
.products .item .text {
  max-width: 40%;
  width: 100%;
  position: relative;
  z-index: 2;
  transform: translateY(30px);
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.products .item .text .content {
  opacity: 0;
  visibility: hidden;
  /*  max-height: 0;*/
  overflow: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.products .item .text .content .old-price {
  color: #969696;
  position: relative;
  font-size: 18px;
  margin-right: 5px;
}
.products .item .text .content .old-price:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background-color: rgba(2, 56, 0, 0.5);
  width: 100%;
  transform: rotate(3deg) translateY(-50%);
}
.products .item .text .content .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  /*background: #141F1B;*/
  margin: 10px 0 0 0;
}
.products .item .text .content .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.products .item .text .content .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.products .item .text .content .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.products .item img {
  max-width: 40%;
  width: 100%;
  position: relative;
  z-index: 2;
}

.text-bamboo {
  position: relative;
  color: #141F1B;
}
.text-bamboo .bamboo {
  max-width: 900px;
  width: 100%;
  display: block;
  margin: 0 auto;
  left: -50px;
  top: 0 !important;
}
.text-bamboo .container-fluid.custom {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}
.text-bamboo .container-fluid.custom .row {
  height: 100%;
  align-items: center;
}
.text-bamboo h2, .text-bamboo h3, .text-bamboo h4, .text-bamboo h5, .text-bamboo h6 {
  font-weight: 600;
  font-size: 50px;
  margin: 0 0 10px;
}
.text-bamboo em {
  font-size: 22px;
  margin: 0 0 5px;
  display: block;
}
.text-bamboo .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  background: #141F1B;
  color: #fff;
  margin: 15px 0 0;
}
.text-bamboo .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.text-bamboo .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.text-bamboo .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.text-bamboo .beeldmerk {
  display: block;
  max-width: 55px;
  margin: 0 0 10px;
}

.text-img {
  padding: 50px 0;
}
.text-img .wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.text-img .right {
  color: #141F1B;
  font-size: 26px;
}
.text-img .right h2, .text-img .right h3, .text-img .right h4, .text-img .right h5, .text-img .right h6 {
  font-size: 60px;
  line-height: 60px;
  margin: 0 0 15px;
}
.text-img .right .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  background: #141F1B;
  color: #fff;
  display: inline-block;
  margin: 10px 0 0 0;
}
.text-img .right .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.text-img .right .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.text-img .right .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.text-img .right .btn-default:nth-of-type(2) {
  border: 2px solid #141F1B;
  background: transparent;
  color: #141F1B;
  margin: 15px 0 0 10px;
}
.text-img .left img {
  width: 100%;
  border-radius: 10px;
}

.text-img-bg {
  background: #141F1B;
  padding: 50px 0;
  color: #EBDECD;
}
.text-img-bg.custom {
  position: relative;
  padding-bottom: 0;
}
.text-img-bg.custom:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}
.text-img-bg .beeldmerk {
  max-width: 65px;
  width: 100%;
  display: block;
  margin: 0 0 15px;
}
.text-img-bg h2, .text-img-bg h3, .text-img-bg h4, .text-img-bg h5, .text-img-bg h6 {
  color: #D3AF59;
  font-size: 55px;
  margin: 0 0 15px;
}
.text-img-bg img:not(.beeldmerk) {
  width: 100%;
  border-radius: 16px;
}
.text-img-bg em {
  font-weight: 600;
  margin: 0 0 15px;
  display: block;
  font-size: 22px;
}
.text-img-bg .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 10px 0 0;
}
.text-img-bg .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.text-img-bg .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.text-img-bg .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.text-img-bg .img-wrapper {
  position: relative;
}
.text-img-bg .img-wrapper .top-image {
  position: absolute;
  top: 50%;
  left: -175px;
  transform: translateY(-50%);
}
.text-img-bg .img-wrapper .top-image img {
  max-width: 350px;
  width: 100%;
}

.beeldmerk-sec {
  background: #141F1B;
  padding: 50px 0;
}
.beeldmerk-sec .beeldmerk {
  width: 100%;
  max-width: 650px;
  display: block;
  margin: 0 auto 50px;
}
.beeldmerk-sec .img-wrapper {
  position: relative;
  overflow: hidden;
}
.beeldmerk-sec .img-wrapper img:not(.beeldmerk) {
  max-width: 350px;
  width: 100%;
  top: initial;
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.beeldmerk-sec .img-wrapper img:not(.beeldmerk).earth {
  bottom: -150px;
}
.beeldmerk-sec .img-wrapper img:not(.beeldmerk).bamboo {
  bottom: -100px;
  max-width: 500px;
  left: 48%;
}
.beeldmerk-sec .img-wrapper img:not(.beeldmerk).active {
  transform: translateY(-80px) translateX(-50%);
  opacity: 1;
}
.beeldmerk-sec .img-wrapper img:not(.beeldmerk).active.earth, .beeldmerk-sec .img-wrapper img:not(.beeldmerk).active.bamboo {
  transform: translateY(-20px) translateX(-50%);
}
.beeldmerk-sec .usps {
  padding: 75px 0 0 0;
}
.beeldmerk-sec .usps ul {
  display: flex;
  justify-content: center;
}
.beeldmerk-sec .usps ul li {
  max-width: 22%;
  width: 100%;
  text-align: center;
  color: rgba(235, 222, 205, 0.5);
  font-style: italic;
  cursor: pointer;
  position: relative;
  font-size: 22px;
  transition: all 0.3s ease-in-out;
}
.beeldmerk-sec .usps ul li:hover, .beeldmerk-sec .usps ul li.active {
  color: #EBDECD;
}
.beeldmerk-sec .usps ul li:hover:before, .beeldmerk-sec .usps ul li.active:before {
  opacity: 1;
}
.beeldmerk-sec .usps ul li:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1400px) {
  .head img {
    max-width: 450px;
  }
}
@media only screen and (max-width: 1200px) {
  .text-img .wrapper .right {
    padding: 25px;
  }
}
@media only screen and (max-width: 991.5px) {
  .head {
    min-height: 50vh;
  }
  .head .underwear {
    display: none;
  }
  .head .text {
    padding: 0;
  }
  .head img {
    max-width: 300px;
  }
  .head h1 {
    font-size: 50px;
    line-height: 55px;
  }
  .text-img .wrapper .right h2, .text-img .wrapper .right h3, .text-img .wrapper .right h4, .text-img .wrapper .right h5, .text-img .wrapper .right h6 {
    font-size: 40px;
    line-height: 45px;
  }
  .text-img-bg .img-wrapper .top-image {
    left: -125px;
  }
  .text-img-bg .img-wrapper .top-image img {
    max-width: 200px;
  }
}
@media only screen and (max-width: 767.5px) {
  .kliniek-sec .btn-default {
    padding: 10px !important;
  }
  .head {
    padding: 75px 0 50px;
    font-size: 20px;
    min-height: 55vh;
    display: block;
  }
  .head .text {
    font-size: 18px;
  }
  .head .text p {
    max-width: 75%;
  }
  .head .text p:has(.btn-default) {
    margin-top: 20px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .head .btn-default {
    display: block;
    width: 50%;
    margin: 0 0 15px !important;
  }
  .head:before {
    background-position: right bottom;
  }
  .head img {
    max-width: 200px;
    height: initial;
    bottom: 0;
    top: initial;
    left: initial;
    right: 0;
  }
  .head h1 {
    font-size: 40px;
    line-height: 45px;
  }
  .slider-outer .text-slider {
    font-size: 30px;
  }
  .products.sustainability {
    padding: 50px 0 0;
  }
  .products.sustainability .title h2, .products.sustainability .title h3, .products.sustainability .title h4, .products.sustainability .title h5, .products.sustainability .title h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .products.shop-page {
    padding: 100px 0 50px;
  }
  .products.shop-page .title-top {
    margin: 0 0 25px;
  }
  .products.shop-page .title-top h1 {
    font-size: 40px;
    line-height: 45px;
  }
  .products .title-top h2, .products .title-top h3, .products .title-top h4, .products .title-top h5, .products .title-top h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .products .item {
    margin: 0 0 25px;
    padding: 50px 25px;
  }
  .products .item b.title {
    font-size: 32px;
    line-height: 36px;
  }
  .products .item .text .content .btn-default {
    min-width: 150px;
  }
  .text-bamboo {
    padding: 50px 0;
    overflow: hidden;
  }
  .text-bamboo .offset-sm-7 {
    margin: 0 0 25px;
  }
  .text-bamboo .bamboo {
    right: -100px;
    left: initial;
    height: 100%;
    opacity: 0.4 !important;
    object-fit: cover;
    position: absolute;
  }
  .text-bamboo .container-fluid.custom {
    position: relative !important;
    top: initial;
    left: initial;
    transform: none;
  }
  .text-bamboo h2, .text-bamboo h3, .text-bamboo h4, .text-bamboo h5, .text-bamboo h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .text-img .left, .text-img .right {
    max-width: 100%;
  }
  .text-img .row {
    flex-direction: column-reverse;
  }
  .text-img .right {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .text-img .right h2, .text-img .right h3, .text-img .right h4, .text-img .right h5, .text-img .right h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .text-img .wrapper {
    flex-direction: column;
  }
  .text-img-bg {
    padding: 50px 0 75px;
  }
  .text-img-bg.custom:Before {
    background-size: 350px;
    background-position: bottom right;
  }
  .text-img-bg .img-wrapper {
    margin: 25px 0 0 0;
  }
  .text-img-bg .img-wrapper .top-image {
    left: 50%;
    transform: translateX(-50%);
    top: initial;
    bottom: -75px;
  }
  .text-img-bg h2, .text-img-bg h3, .text-img-bg h4, .text-img-bg h5, .text-img-bg h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .beeldmerk-sec .usps ul {
    flex-direction: column;
  }
  .beeldmerk-sec .usps ul li {
    max-width: 100%;
  }
  .beeldmerk-sec .usps ul li:nth-of-type(2) {
    margin: 75px 0;
  }
  .beeldmerk-sec .img-wrapper img:not(.beeldmerk) {
    max-width: 250px;
  }
}
/* --------------------------------------------------------------------------
   Skin Renew huisstijl (herontwerp): generieke, herbruikbare layout- en
   tekstklassen. Allemaal nieuwe klassenamen (geen bestaande tag-selectors
   zoals body/h1/a), dus dit botst niet met de rest van de site en kan hier
   sitebreed staan zodat andere pagina's dan de homepage ze straks ook kunnen
   gebruiken zonder ze opnieuw te hoeven schrijven.
   -------------------------------------------------------------------------- */
.container-sr {
  width: 100%;
  max-width: var(--container-sr);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--section-y);
}

.section--tinted {
  background: var(--surface-2);
}

.section--dark {
  background: linear-gradient(180deg, #f7f1e2 0%, #f0e8d4 100%);
  border-block: 1px solid var(--gold-200);
  color: var(--ink-3);
}

.section--tight {
  padding-block: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
}

.section--dark h1, .section--dark h2, .section--dark h3 {
  color: var(--ink);
}

/* Alleen binnen een .section krijgen koppen het nieuwe serif-lettertype: dit
   raakt geen koppen op de rest van de site, die blijven op $font-title staan. */
.section h1, .section h2, .section h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}

.section h1 em, .section h2 em {
  font-style: italic;
  color: var(--gold-500);
}

.section h1 {
  font-size: var(--fs-h1);
}

.section h2 {
  font-size: var(--fs-h2);
}

.section h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

/* Organisch vlak: het witte vlak erboven en eronder golft de goudtint in. */
.section--organic {
  --wave-top: var(--surface);
  --wave-bottom: var(--surface);
  --wave-h: clamp(48px, 7vw, 90px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--section-y) + 2rem);
  background-color: #f7f2e5;
  /* Let op bij het bewerken van deze regel: "%75rl(%23g)" hieronder is de
     SVG-filterverwijzing "u" + "rl(#g)" met de eerste letter extra
     ge-percent-encode (%75 = "u"). Web Compiler (compilerconfig.json,
     herbouwt main.css bij elke scss-save) herkent de letters "u"+"rl("
     waar dan ook in dit bestand als een bestandspad en plakt er "../scss/"
     voor - ook al staat dat toevallig binnen deze data-URI en is het een
     interne SVG-filterverwijzing, geen bestand. Dat maakte het filter
     onbruikbaar (de <rect> viel terug op zwart, wat de hele sectie
     donkerder maakte dan het ontwerp). De browser decodeert %75 gewoon
     terug naar "u" bij het uitlezen van de data-URI, dus dit rendert
     identiek aan de normale schrijfwijze - alleen zonder de letterlijke
     tekst die Web Compiler zou proberen te herschrijven. Schrijf die
     schrijfwijze (ook in commentaar!) nooit voluit terug, anders pakt
     Web Compiler 'm alsnog. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='%75rl(%23g)' opacity='0.04'/%3E%3C/svg%3E"), radial-gradient(55% 48% at 78% 22%, rgba(255, 253, 247, 0.85) 0%, rgba(255, 253, 247, 0) 62%), radial-gradient(48% 42% at 14% 86%, rgba(233, 220, 188, 0.45) 0%, rgba(233, 220, 188, 0) 65%), linear-gradient(165deg, #f9f5ea 0%, #f4eedd 55%, #f0e8d3 100%);
  background-size: 180px 180px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  /* De section--dark-borders horen hier niet: de golfranden nemen de
     overgang over (bron: style.css .section--organic, border-block: 0). */
  border-block: 0;
}

.section--organic > * {
  position: relative;
  z-index: 2;
}

/* Randen die als golven het vlak in lopen, boven en onder verschillend. De
   golf heeft de kleur van de buursectie, anders zie je op de grens een
   kaarsrechte streep waar de golf net niet aansluit. (Bron: style.css.) */
.section--organic::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--wave-top), var(--wave-top)), linear-gradient(var(--wave-bottom), var(--wave-bottom));
  background-position: top center, bottom center;
  background-size: 100% var(--wave-h), 100% var(--wave-h);
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1290 62 1140 10 950 36 C760 62 610 16 430 40 C290 58 120 30 0 50 Z' fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L1440 90 L1440 54 C1260 24 1090 74 900 50 C710 26 560 72 380 48 C240 30 110 60 0 40 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-position: top center, bottom center;
  -webkit-mask-size: 100% var(--wave-h), 100% var(--wave-h);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1290 62 1140 10 950 36 C760 62 610 16 430 40 C290 58 120 30 0 50 Z' fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L1440 90 L1440 54 C1260 24 1090 74 900 50 C710 26 560 72 380 48 C240 30 110 60 0 40 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-position: top center, bottom center;
  mask-size: 100% var(--wave-h), 100% var(--wave-h);
  mask-repeat: no-repeat, no-repeat;
}

/* Kleur van de golf per buursectie: boven kijkt naar de vorige, onder naar de
   volgende. Zonder buur blijft het wit uit de standaardwaarde. Let op: ook
   verborgen secties (de kiezers, hidden) tellen als DOM-buur — dat is hier
   juist goed, want de bron heeft exact dezelfde DOM-volgorde. */
.section--tinted + .section--organic {
  --wave-top: var(--surface-2);
}

.section--sand + .section--organic {
  --wave-top: var(--surface-3);
}

.section--organic:has(+ .section--tinted) {
  --wave-bottom: var(--surface-2);
}

.section--organic:has(+ .section--sand) {
  --wave-bottom: var(--surface-3);
}

.section--organic .organic-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: organic-bob 9s ease-in-out infinite alternate;
}

.section--organic .organic-lines::before,
.section--organic .organic-lines::after,
.section--organic .organic-lines > span {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1200px;
  right: -1200px;
  background-repeat: repeat-x;
  background-size: 1200px 100%;
}

.section--organic .organic-lines::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cpath d='M0 140 C 200 95 400 95 600 140 C 800 185 1000 185 1200 140' fill='none' stroke='%23ae8b33' stroke-opacity='0.13' stroke-width='2.6'/%3E%3C/svg%3E");
  animation: organic-line-a 28s linear infinite;
}

.section--organic .organic-lines::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cpath d='M0 300 C 200 348 400 348 600 300 C 800 252 1000 252 1200 300' fill='none' stroke='%23ae8b33' stroke-opacity='0.13' stroke-width='2.6'/%3E%3C/svg%3E");
  animation: organic-line-b 45s linear infinite;
}

.section--organic .organic-lines > span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cpath d='M0 210 C 200 182 400 182 600 210 C 800 238 1000 238 1200 210' fill='none' stroke='%23ae8b33' stroke-opacity='0.09' stroke-width='2.2'/%3E%3C/svg%3E");
  animation: organic-line-a 66s linear infinite;
}

@keyframes organic-line-a {
  to {
    transform: translate3d(-1200px, 0, 0);
  }
}
@keyframes organic-line-b {
  to {
    transform: translate3d(1200px, 0, 0);
  }
}
@keyframes organic-bob {
  from {
    transform: translate3d(0, -4px, 0);
  }
  to {
    transform: translate3d(0, 4px, 0);
  }
}
.section--organic::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: clamp(340px, 44vw, 660px);
  aspect-ratio: 1.1;
  top: -28%;
  right: -8%;
  background: radial-gradient(closest-side, rgba(219, 199, 152, 0.32), rgba(219, 199, 152, 0));
  border-radius: 56% 44% 48% 52%/50% 46% 54% 50%;
  filter: blur(60px);
  animation: organic-drift 34s ease-in-out infinite alternate;
}

@keyframes organic-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  to {
    transform: translate3d(-6%, 8%, 0) rotate(10deg) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section--organic::before,
  .section--organic .organic-lines,
  .section--organic .organic-lines::before,
  .section--organic .organic-lines::after,
  .section--organic .organic-lines > span {
    animation: none;
  }
}
.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--sp-4);
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 12px;
  background: var(--gold-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 9.2C6.5 10.6 10.8 2.9 17.2 2.4c4.6-.4 7.4 3.4 11.2 3.1 1.6-.1 3-.9 4.2-2.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 9.2C6.5 10.6 10.8 2.9 17.2 2.4c4.6-.4 7.4 3.4 11.2 3.1 1.6-.1 3-.9 4.2-2.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  flex: none;
}

.section--dark .eyebrow {
  color: var(--gold-500);
}

.section--dark .eyebrow::before {
  background: var(--gold-500);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-3);
}

.section--dark .lead {
  color: var(--ink-3);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--sp-7);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: var(--sp-4);
}

.mt-6 {
  margin-top: var(--sp-6);
}

.mt-7 {
  margin-top: var(--sp-7);
}

.frame {
  display: block;
}

/* ---------- Paginakop met beeld ernaast ----------
   De rustige variant van de homepage-hero: geen film en geen kengetallen, wel
   dezelfde verhouding tekst/beeld. Elke gemigreerde onderpagina gebruikt hem,
   dus hij staat hier sitebreed en niet in een pages/-partial. */
.page-hero {
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.page-hero.textpage-banner .page-hero__inner {
  grid-template-columns: initial;
}
.page-hero.about-page {
  padding-top: 25px;
  /* Deze 25px komen bovenop de padding-top van .page-hero__inner
     hierboven - op mobiel is dat samen precies de te grote afstand
     tot het menu die hier gemeld werd. Alleen about.aspx heeft deze
     extra regel; de mobiele verkleining hoort dus ook hier. */
}
@media (max-width: 640px) {
  .page-hero.about-page {
    padding-top: 0;
  }
}
.page-hero.about-page .btn-default:nth-of-type(1) {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.page-hero.about-page .btn-default:nth-of-type(1):hover, .page-hero.about-page .btn-default:nth-of-type(1):focus-visible, .page-hero.about-page .btn-default:nth-of-type(1):active {
  animation: none;
}
.page-hero.about-page .btn-default:nth-of-type(1):hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.page-hero.about-page .btn-default:nth-of-type(1):active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .page-hero.about-page .btn-default:nth-of-type(1) {
    animation: none !important;
  }
  .page-hero.about-page .btn-default:nth-of-type(1):hover {
    transform: none;
  }
}
.page-hero.about-page .btn-default:nth-of-type(2) {
  border: 1px solid transparent;
  background: transparent;
  border-color: rgb(205, 198, 182);
}
.page-hero.about-page .btn-default:nth-of-type(2):hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 400px at 80% -20%, rgba(174, 139, 51, 0.1), transparent 60%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}

/* Op mobiel oogt de ruimte tussen het menu en de kruimelpad-tekst onnodig
   groot: de 5vw in de clamp hierboven schaalt wel omlaag, maar de minimum
   van 2,5rem blijft vrij fors op een smal scherm zonder dat daar de brede
   .page-hero__media ernaast staat (die valt hier al onder .page-hero__inner
   op 1 kolom, zie hieronder) om die ruimte te rechtvaardigen. Geldt voor elke
   pagina met .page-hero (about/onze-kliniek/behandelingen/...), niet alleen
   deze. Boven en onder ongelijk: de kop mag dicht op het menu komen, de
   ruimte naar de volgende sectie blijft wat royaler. */
@media (max-width: 640px) {
  .page-hero__inner {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }
}
@media (max-width: 900px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
  }
}
/* .page-hero is geen .section, dus de koptypografie van hierboven raakt hem
   niet. Zonder deze regel valt de <h1> uit de CMS-tekst terug op het oude
   sitebrede h1-lettertype. Zelfde behandeling als .hero__text h1 in
   pages/home.scss, want beide zijn een paginakop. */
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}

.page-hero h1 em {
  font-style: normal;
  color: var(--gold-500);
}

/* knoppenregel in de CMS-tekst: een <p> met (alleen) .btn-default-links erin */
.page-hero .rich-text p:has(> a.btn-default) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

/* De sitebrede .breadcrumbs (main.scss) komt nog uit de vorige huisstijl en heeft
   een groen bolletje als scheidingsteken. Alleen binnen een .page-hero trekken we
   dat naar de huidige tinten; de rest van de site blijft ongemoeid. */
.page-hero .breadcrumbs {
  margin-bottom: var(--sp-4);
  font-family: var(--font-body);
}

.page-hero .breadcrumbs li,
.page-hero .breadcrumbs li a {
  color: var(--muted);
}

.page-hero .breadcrumbs li::after {
  background: var(--gold-500);
}

.page-hero .breadcrumbs li a:hover {
  color: var(--gold-text);
}

.page-hero__media .frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

/* De afbeelding komt uit het CMS (ltlImg...) en heeft geen width/height-attribuut;
   zonder deze regel bepaalt het bronformaat de breedte. */
.page-hero__media .frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Variant zonder mediakolom: alleen tekst, zoals bij Contact en het
   behandelingenoverzicht (.page-hero--tekst). Zelfde patroon als
   .page-hero.about-page hierboven, maar dan het grid laten varen i.p.v.
   de knoppen kleuren. De lead uit CMS-tekst is een kale <p> (geen class). */
.page-hero.contact-hero .page-hero__inner,
.page-hero--tekst .page-hero__inner {
  grid-template-columns: 1fr;
}

.page-hero.contact-hero .lead,
.page-hero--tekst .rich-text p {
  max-width: 44rem;
}

/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - homepage (Default.aspx)
   Eén bestand voor alle homepage-specifieke onderdelen: hero, resultatenslider,
   categoriekaarten, indicatiekiezer, kengetallen, uitgelicht-blokken, reviews
   en de cta-band. Herbruikbare basis (knoppen, .section/.grid/.container-sr,
   tokens, fonts) staat in _buttons.scss, default.scss, _variables.scss en
   _fonts.scss - dit bestand bevat alleen wat echt uniek is voor de homepage.
   Zie docs/CMS-CONTENT-home.md voor de tekst die per Literal in het CMS moet
   komen.
   ========================================================================== */
/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1000px 500px at 15% -10%, rgba(174, 139, 51, 0.1), transparent 60%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2rem, 1.2rem + 2.5vw, 3rem);
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
}
/* CMS-tekst in de hero (ltl01) is helemaal vrij: TinyMCE levert een <b> als
   eyebrow-label, <h1>/<p> voor titel en inleiding, een <p> met <a
   class="btn-default"> voor de knoppen en een <ul><li><strong>...<br>...</li>
   voor de kengetallen. Geen van die tags heeft een eigen class nodig, alles
   is hier gescoped via de vaste wrapper .hero__text. */
.hero__text {
  max-width: 34rem;
}

.hero__text h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}

.hero__text h1 em {
  font-style: normal;
  color: var(--gold-500);
}

.hero__text p {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-3);
}

/* Eyebrow: het eerste element in een tekstblok, als kaal <b> of <strong>
   (geen class; TinyMCE slaat vet op als <strong>, vaste markup gebruikt <b> -
   allebei herkend). .hero__text draagt zelf ook al .rich-text, dus deze ene
   regel dekt de hero én de CMS-blokken (ltl10/ltl30/ltl50/ltl60). .section-head
   is de hardcoded variant: de kiezer-secties gebruiken hetzelfde patroon voor
   dezelfde, ene manier van eyebrows op de hele pagina.

   Live gecheckt op behandeling-detail.aspx (CryoPen): de editor bewaart de
   eyebrow niet als kale <strong>, maar wrapt 'm zelf in een <p> zodra iemand
   de tekst via TinyMCE bewerkt/opslaat: <p><strong>Huidoneffenheden</strong></p>.
   Dan is <strong> geen directe child meer van .rich-text, dus de regels
   hierboven misten dat geval - de :only-child-selectors hieronder dekken 'm
   wél, zonder een gewoon eerste tekstblok (met een los vetgedrukt woord erin)
   ook als eyebrow te gaan stijlen. */
.rich-text > b:first-child,
.rich-text > strong:first-child,
.rich-text > p:first-child > b:only-child,
.rich-text > p:first-child > strong:only-child,
.section-head > b:first-child,
.section-head > strong:first-child,
.section-head > p:first-child > b:only-child,
.section-head > p:first-child > strong:only-child {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--sp-4);
}

.rich-text > b:first-child::before,
.rich-text > strong:first-child::before,
.rich-text > p:first-child > b:only-child::before,
.rich-text > p:first-child > strong:only-child::before,
.section-head > b:first-child::before,
.section-head > strong:first-child::before,
.section-head > p:first-child > b:only-child::before,
.section-head > p:first-child > strong:only-child::before {
  content: "";
  width: 34px;
  height: 12px;
  background: var(--gold-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 9.2C6.5 10.6 10.8 2.9 17.2 2.4c4.6-.4 7.4 3.4 11.2 3.1 1.6-.1 3-.9 4.2-2.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 9.2C6.5 10.6 10.8 2.9 17.2 2.4c4.6-.4 7.4 3.4 11.2 3.1 1.6-.1 3-.9 4.2-2.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  flex: none;
}

/* section-head--center centreert eyebrow/kop/lead; het streepje voor de
   eyebrow moet dan mee centreren in plaats van links te blijven hangen */
.section-head--center > b:first-child,
.section-head--center > strong:first-child {
  justify-content: center;
}

/* De lead in een sectiekop uit het CMS is een kale <p> (geen class="lead"):
   ltl20 (Behandelingen) en de kiezer-kop (PageItem ltl02 van een
   categoriepagina, via kiezer.js). Zelfde maat als .lead in default.scss.
   :not(.eyebrow) - anders won deze regel het van .eyebrow zelf (hogere
   specificiteit: klasse + type versus alleen klasse), zoals bij de
   <p class="eyebrow"> op prijzen.aspx (categoriekop): die kwam er zo in de
   grotere, grijze lead-stijl uit i.p.v. klein en goud. */
.section-head > p:not(.eyebrow) {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-3);
}

/* knoppenregel: een <p> met (alleen) .btn-default-links erin */
.hero__text p:has(> a.btn-default) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

/* kengetallen: <ul><li><strong>30.000+</strong><br>behandelde klanten</li>... */
.hero__text.rich-text ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.hero__text.rich-text ul li {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  padding: 0;
}

/* geen vinkje hier: dit is een kengetal, geen opsomming */
.hero__text.rich-text ul li::before {
  content: none;
}

.hero__text.rich-text ul li strong {
  display: block;
  font-size: 1.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
}

.hero__achtergrond {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__achtergrond picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__achtergrond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero__film.is-klaar {
  opacity: 1;
}

.hero__achtergrond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.86) 38%, rgba(250, 248, 243, 0.42) 62%, rgba(250, 248, 243, 0) 84%);
}

@media (min-width: 900px) {
  .hero--beeld .hero__inner {
    min-height: clamp(24rem, 62svh, 38rem);
  }
}
@media (max-width: 899px) {
  .hero::after {
    display: none;
  }
  .hero__film {
    display: none;
  }
  /* De foto staat op mobiel gewoon in de flow. Hij stond absoluut, met een
     vaste padding-top van 66.7vw op de tekst die uitging van een 3:2-beeld;
     de mobiele banner uit het CMS is 1920x750, dus bleef er een lege strook
     tussen foto en tekst. Nu volgt de hoogte de foto zelf, welk formaat er
     ook geupload wordt, en schuift de tekst met een vaste marge de onderrand
     van de foto in. */
  .hero__achtergrond {
    position: relative;
    inset: auto;
  }
  .hero__achtergrond picture,
  .hero__achtergrond img {
    height: auto;
  }
  .hero__inner {
    position: relative;
    padding-block: 0 var(--sp-6);
    margin-top: -1.5rem;
  }
  /* Het verloop zit alleen in het onderste deel van de foto (transparant tot
     62%, pas op 90% grotendeels dekkend), zodat de foto groot en vrijwel
     ongehinderd in beeld blijft; de kop begint 1,5rem boven de onderrand en
     valt zo net in het verloop, zoals in het oorspronkelijke ontwerp. */
  .hero__achtergrond::after {
    background: linear-gradient(180deg, rgba(250, 248, 243, 0) 62%, rgba(250, 248, 243, 0.35) 78%, rgba(250, 248, 243, 0.8) 90%, rgb(250, 248, 243) 100%);
  }
  .hero__text {
    position: relative;
    z-index: 1;
    max-width: none;
  }
}
@media (max-width: 639px) {
  .hero__text p:has(> a.btn-default) {
    margin-top: var(--sp-5);
  }
  /* De eyebrow ("Huidspecialist in Middelburg") duwt op een telefoon de kop
     de foto uit; daar blijft hij weg, de kop zegt het al. Zelfde selectors
     als de eyebrow-opmaak hierboven (kale <b>/<strong> of in een <p>). */
  .hero__text > b:first-child,
  .hero__text > strong:first-child,
  .hero__text > p:first-child:has(> b:only-child),
  .hero__text > p:first-child:has(> strong:only-child) {
    display: none;
  }
  /* de kengetallen komen verderop nog een keer terug in het cijferblok (30K,
     98%, 11+, 9); op een telefoon maakten ze het eerste scherm alleen maar
     vol en duwden ze de knoppen eruit */
  .hero__text.rich-text ul {
    display: none;
  }
}
/* het "grote kop komt van onderaf omhoog" effect, direct op CSS zodat het
   niet op main.js hoeft te wachten */
.hero > .container-sr > * {
  animation: srKopOmhoog 0.7s var(--ease) both;
}

.hero > .container-sr > :nth-child(2) {
  animation-delay: 0.09s;
}

.hero > .container-sr > :nth-child(3) {
  animation-delay: 0.18s;
}

@keyframes srKopOmhoog {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero > .container-sr > * {
    animation: none !important;
  }
}
/* ---------- Vertrouwensbalk ---------- */
/* CMS-tekst (ltl05) is een kale <ul><li>...</li></ul>, geen classes, geen
   SVG's. De drie iconen (schild, medaille, mensen) komen puur uit CSS via
   ::before + mask, per positie (nth-child) - zelfde techniek als .eyebrow
   en de vinkjes in .rich-text ul hierboven. */
.trustbar {
  border-block: 1px solid var(--line);
  background: #fff;
}

.trustbar__inner {
  padding-block: var(--sp-5);
}

.trustbar__inner ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trustbar__inner li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  margin: 0;
}

.trustbar__inner li::before {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--gold-500);
}

/* 1. ANBOS en SKIN geregistreerd - schild met vinkje */
.trustbar__inner li:nth-child(1)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 2. KNMG-geregistreerde cosmetisch artsen - medaille */
.trustbar__inner li:nth-child(2)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 3. 9 specialisten onder één dak - mensen */
.trustbar__inner li:nth-child(3)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (min-width: 1040px) {
  .trustbar__inner ul {
    display: flex;
  }
  .trustbar__inner li {
    flex: 1 1 auto;
    white-space: nowrap;
    padding-inline: var(--sp-3);
  }
}
.trustbar__inner li + li {
  border-left: 1px solid var(--gold-200);
}

@media (max-width: 900px) {
  .trustbar__inner ul {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .trustbar__inner li {
    justify-content: flex-start;
    padding-inline: 0;
  }
  .trustbar__inner li + li {
    border-left: 0;
    border-top: 1px solid var(--line-2);
    padding-top: var(--sp-3);
  }
}
/* ---------- Resultatenslider (voor/na) ---------- */
.slider {
  position: relative;
}

.slider__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.55rem;
  margin-bottom: -0.55rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

.slider__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.slider__pair .ba-item {
  border-radius: 0;
  box-shadow: none;
}

.slider__pair .ba-item:first-child {
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}

.slider__pair .ba-item:last-child {
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
}

/* Elke helft op de 4:3 van .ba-item img (regel verderop) i.p.v. het vierkant
   dat hier stond: bij twee helften naast elkaar oogt vierkant al snel als een
   staand blok. 4:3 per foto maakt het paar samen duidelijk breder dan hoog. */
.slider__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) 4px 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.slider__caption strong {
  font-weight: 600;
  color: var(--ink);
}

.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--sh-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.slider__btn:hover {
  background: var(--gold-50);
  color: var(--gold-text);
}

/* De knoppen horen op het midden van de FOTO'S, niet van de hele .slider: die
   is hoger, want het bijschrift (.slider__caption, in elke slide) en de
   stippen (.slider__dots) staan in dezelfde position:relative-ouder, dus
   top:50% viel steeds te laag (en met het bijschrift op twee regels nog lager).
   De fotohoogte is in CSS niet betrouwbaar af te leiden: de foto's hebben een
   height-attribuut (Default.aspx) dat de aspect-ratio hieronder overstemt.
   Daarom meet home.js (Resultatenslider) de hoogte van het fotopaar en zet die
   als --slider-foto-h op de .slider; zonder JS valt dit terug op het midden van
   de hele slider. .review-rotator heeft eigen .slider__btn-regels (verderop)
   en staat niet in een .slider, dus die raakt dit niet. */
.slider .slider__btn {
  top: calc(var(--slider-foto-h, 100%) / 2);
}

.slider__btn--prev {
  left: 0.9rem;
}

.slider__btn--next {
  right: 0.9rem;
}

.slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  margin-top: var(--sp-4);
}

.slider__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.slider__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--gold-200);
  transition: width 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.35s var(--ease);
}

.slider__dot:hover::before {
  background: var(--gold-400);
}

.slider__dot[aria-current=true]::before {
  width: 28px;
  background: var(--gold-500);
}

@media (prefers-reduced-motion: reduce) {
  .slider__dot::before {
    transition: none;
  }
}
.ba-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.ba-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.ba-item figcaption {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(58, 45, 18, 0.85);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
}

/* ---------- Uitgelicht-blok (tekst naast beeld) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split > * {
  min-width: 0;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}
.split--wide-media {
  grid-template-columns: 0.8fr 1.2fr;
}

@media (max-width: 860px) {
  .split--wide-media {
    grid-template-columns: 1fr;
  }
}
.split--reverse .split__media {
  order: -1;
}

@media (max-width: 860px) {
  .split--reverse .split__media {
    order: 0;
  }
}
.split__media .frame {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.split__media .frame picture {
  display: block;
  width: 100%;
}

/* De bron gebruikt hier liggende foto's van 1600x1069 (~3:2) met vaste
   width/height-attributen. Onze afbeelding komt uit het CMS (ltlImg...) zonder
   die attributen, en de upload kan elk formaat hebben. De aspect-ratio + cover
   dwingt de bron-verhouding af, wat er ook geupload is — anders rekt een
   staande upload het blok verticaal uit. */
.split__media .frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}

/* CMS-tekst (ltl_expertise, ltl_skinlab) mag gewoon een kale <ul><li> bevatten
   in TinyMCE: de opsomming met vinkje komt automatisch uit de wrapper
   .rich-text, geen "checklist"-class nodig in de tekst zelf. */
.rich-text ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  font-family: var(--font-body);
}

.rich-text ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.rich-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ae8b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

@media (max-width: 639px) {
  .rich-text ul li {
    font-size: 0.8rem;
    padding-left: 1.5rem;
    margin-bottom: var(--sp-2);
  }
  .rich-text ul li::before {
    width: 16px;
    height: 16px;
    top: 0.3rem;
    background-size: 10px;
  }
}
/* De vrije alinea (lead) in CMS-tekst: zelfde opmaak als .lead (hardcoded
   sectiekoppen), maar zonder dat de tekst zelf een class nodig heeft. */
.rich-text p {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-3);
}

/* ---------- Categoriekaarten ---------- */
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

a.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--gold-200);
  color: inherit;
}

.cat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--gold-50);
  color: var(--gold-500);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-2);
}

.cat-card h3 {
  margin: 0;
  font-size: 1.3rem;
}

.cat-card p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
}

.cat-card__more {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cat-card__more svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.5, 1) 0.04s, color 0.35s var(--ease);
}

a.cat-card:hover .cat-card__more svg {
  transform: translateX(5px);
  color: var(--gold-500);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card__more svg {
    transition: none;
  }
  a.cat-card:hover .cat-card__more svg {
    transform: none;
  }
}
@media (max-width: 639px) {
  .grid--cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .cat-card {
    padding: var(--sp-4);
    gap: var(--sp-2);
  }
  .cat-card__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: var(--r-sm);
  }
  .cat-card__icon svg {
    width: 18px;
    height: 18px;
  }
  .cat-card h3 {
    font-size: 0.92rem;
    line-height: 1.3;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .cat-card p {
    font-size: 0.85rem;
    line-height: 1.45;
  }
  .cat-card__more {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    justify-content: space-between;
    width: 100%;
    gap: 0.3rem;
  }
  .cat-card__more svg {
    flex: 0 0 auto;
  }
}
/* ---------- Indicatiekiezer (plekjeskaarten + chips) ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-3);
}

.ind-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0.8rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.ind-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(244, 236, 217, 0.5) 0%, var(--gold-50) 55%, #fff 100%);
  opacity: 0;
  transform: translateX(-6%) scale(1.04);
  transition: opacity 0.5s var(--ease), transform 0.75s var(--ease);
}

.ind-chip:hover {
  border-color: var(--gold-300);
  color: var(--gold-800);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.ind-chip:hover::before {
  opacity: 1;
  transform: none;
}

.ind-chip__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.ind-chip__cat {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.1rem;
}

.ind-chip svg {
  flex: none;
  color: var(--gold-500);
  transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.5, 1) 0.04s, color 0.35s var(--ease);
}

.ind-chip:hover svg {
  transform: translateX(5px);
  color: var(--gold-500);
}

.indcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-4);
}

@media (max-width: 560px) {
  .indcards {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
}
.indcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.indcard__img {
  display: block;
  aspect-ratio: 4/3;
  background: var(--surface-3);
  overflow: hidden;
}

.indcard__img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.indcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.indcard__body {
  display: block;
  padding: 0.85rem 1rem 1rem;
}

.indcard__name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--ink-2);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Ondertitel op de indicatiekaarten van de behandelpagina zelf (geen link,
   dus geen .indcard__cat met pijltje - hier de Latijnse/omschrijvende naam). */
.indcard__lat {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.indcard--link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.indcard--link:hover {
  border-color: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.indcard--link:hover .indcard__name {
  color: var(--gold-800);
}

.indcard--link .indcard__img img {
  transition: transform 0.9s var(--ease);
}

.indcard--link:hover .indcard__img img {
  transform: scale(1.045);
}

.indcard--link .indcard__cat svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.5, 1) 0.04s, color 0.35s var(--ease);
}

.indcard--link:hover .indcard__cat svg {
  transform: translateX(5px);
  color: var(--gold-500);
}

.indcard--link .indcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.indcard--link .indcard__cat {
  margin-top: auto;
  padding-top: 0.35rem;
}

.indcard__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
}

.indcard__cat svg {
  flex: none;
  color: var(--gold-500);
}

.indcard--wa .indcard__cat {
  color: #1a7d43;
  font-weight: 500;
}

.indcard--wa .indcard__cat svg {
  color: #25d366;
}

.indcard--wa:hover {
  border-color: #7ddba0;
}

.indcard--wa:hover .indcard__name {
  color: #16693a;
}

.indcard--wa:hover .indcard__cat svg {
  transform: none;
  color: #1faa4e;
}

@media (prefers-reduced-motion: reduce) {
  .ind-chip, .ind-chip::before, .ind-chip svg,
  .indcard--link, .indcard--link .indcard__img img, .indcard--link .indcard__cat svg {
    transition: none;
  }
  .ind-chip:hover, .ind-chip:hover svg,
  .indcard--link:hover, .indcard--link:hover .indcard__img img,
  .indcard--link:hover .indcard__cat svg {
    transform: none;
  }
  .ind-chip:hover::before {
    transform: none;
  }
}
.ind-chip__name, .indcard__name {
  hyphenate-limit-chars: 10 5 5;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
}

@supports not ((hyphenate-limit-chars: 10 5 5) or (-webkit-hyphenate-limit-before: 5)) {
  .ind-chip__name, .indcard__name {
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}
/* ---------- Kengetallen ----------
   De echte opmaak (.counter-sec ul/li/strong) staat in default.scss: de
   kengetallen komen als kale <ul><li><strong> uit het CMS (ltl25), niet als
   .stats/.stat/.stat__num-divs zoals hier stond - die classes matchten niets
   meer en zijn vervallen. */
/* ---------- Reviews ---------- */
.review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
}

.review__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: var(--sp-5);
  flex: 1;
}

.review__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--gold-100);
  color: var(--gold-700);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.review__name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.review__meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--gold-500);
  margin-bottom: 2px;
}

.stars svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 639px) {
  .stars svg {
    width: 11px;
    height: 11px;
  }
}
.review-rotator {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
}

.review-rotator .slider__btn {
  top: 45%;
  transform: translateY(-50%);
}

.review-rotator .slider__btn--prev {
  left: -70px;
}

.review-rotator .slider__btn--next {
  right: -70px;
}

@media (max-width: 860px) {
  .review-rotator {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "stage stage stage" "prev dots next";
    align-items: center;
    row-gap: var(--sp-4);
  }
  .review-rotator__stage {
    grid-area: stage;
    min-width: 0;
  }
  .review-rotator .slider__btn {
    position: static;
    transform: none;
    width: 46px;
    height: 46px;
    box-shadow: var(--sh-sm);
  }
  .review-rotator .slider__btn--prev {
    grid-area: prev;
  }
  .review-rotator .slider__btn--next {
    grid-area: next;
  }
  /* De middelste ("dots") kolom is maar 1fr breed - met 10 recensies (sinds
     kort worden de laatste 10 getoond, zie Default.aspx.vb sFilterReviews)
     passen de bolletjes (elk 44px, .slider__dot hierboven) daar niet meer in.
     Zonder min-width:0 laat een grid-1fr-kolom zich door zulke content breder
     duwen dan de kolom zelf, en dat trok de hele pagina op mobiel horizontaal
     scrollbaar. min-width:0 + eigen overflow-x maakt er in plaats daarvan een
     kort, in zichzelf scrollbaar rijtje van (zelfde truc als .pagenav__inner). */
  .review-rotator .slider__dots {
    grid-area: dots;
    margin-top: 0;
    min-width: 0;
    padding-inline: var(--sp-2);
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .review-rotator .slider__dots::-webkit-scrollbar {
    display: none;
  }
}
.review-rotator__stage {
  display: grid;
  align-items: start;
  overflow: hidden;
  transition: height 0.5s var(--ease);
}

.review-rotator__stage > .review {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}

.review-rotator__stage > .review.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.review--spotlight .review__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* Alleen op desktop, waar de bolletjes onder de kaart staan. Deze regel stond
   zonder media query na het mobiele blok hierboven en won daar van diens
   margin-top: 0, zodat de bolletjes op een telefoon 12px lager hingen dan de
   pijlen in dezelfde grid-rij. */
@media (min-width: 861px) {
  .review-rotator .slider__dots {
    margin-top: var(--sp-5);
  }
}
.review--spotlight .review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  flex: 0 1 auto;
  margin-bottom: var(--sp-4);
}

.review--spotlight .review__author {
  margin-top: auto;
}

.review--spotlight.is-open .review__text {
  -webkit-line-clamp: none;
  overflow: visible;
}

.review__more {
  align-self: flex-start;
  margin-bottom: calc(var(--sp-5) - 0.6rem);
  padding: 0.6rem 0.75rem 0.6rem 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-700);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.review__more:hover {
  color: var(--ink);
}

@media (max-width: 600px) {
  .review--spotlight .review__text {
    -webkit-line-clamp: 6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .review-rotator__stage > .review {
    transition: none;
    transform: none;
  }
}
/* ---------- Oproep tot actie (cta-band) ---------- */
.cta-band {
  --wave-top: var(--surface);
  position: relative;
  overflow: hidden;
  color: var(--ink-3);
  background-color: #f2ebd8;
  /* "%75rl(%23g)" is dezelfde SVG-filterverwijzing als bij .section--organic
     (default.scss) met de "u" extra ge-percent-encode - zie de uitgebreide
     toelichting daar: Web Compiler herschrijft anders de letters "u"+"rl("
     hier als was het een bestandspad, waardoor het filter faalt en de
     sectie donkerder oogt dan het ontwerp. De browser decodeert %75 gewoon
     terug naar "u". Schrijf de normale schrijfwijze (ook in commentaar!)
     nooit voluit terug, anders pakt Web Compiler 'm alsnog. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='%75rl(%23g)' opacity='0.04'/%3E%3C/svg%3E"), radial-gradient(700px 400px at 85% 115%, rgba(174, 139, 51, 0.08), transparent 60%), linear-gradient(175deg, #f6f0e1 0%, #efe6cf 100%);
  background-size: 180px 180px, auto, auto;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat;
}

.cta-band__zwier {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='397.5 146.25 1640 1640'%3E%3Cg fill='%23ae8b33' fill-opacity='0.055'%3E%3Cpath transform='matrix(1.33333 0 0 -1.33333 809.02 810.087)' d='M0 0c734.977-205.28 28.43-333.838-35.164-696.316C42.34-418.104 820.775-195.003 0 0'/%3E%3Cpath transform='matrix(1.33333 0 0 -1.33333 1133.562 1069.674)' d='M0 0c280.931 112.852 223.152 222.724 95.947 258.753-42.847 12.135-93.564 15.898-141.876 8.565-194.34-29.506-396.069-287.817-432.972-506.76C-417.405-84.47-227.982 205.804-22.964 206.66c18.681.689 36.558-.892 52.351-4.435 77.085-17.259 103.514-82.169-80.247-168.598-329.237-154.844 369.011-309.162 655.977-445.301C408.986-298.508-223.073-98.409 0 0'/%3E%3Cpath transform='matrix(1.33333 0 0 -1.33333 1141.769 1110.782)' d='M0 0c-728.182 226.699-17.986 331.124 56.969 687.686C-29.229 414.958-814.215 219.274 0 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto 160%;
  background-position: calc(100% + clamp(50px, 9vw, 140px)) 62%;
  background-repeat: no-repeat;
  transform-origin: 94% 62%;
  animation: srZwierZweef 30s ease-in-out infinite alternate;
}

@media (max-width: 720px) {
  .cta-band__zwier {
    background-size: clamp(360px, 46vw, 640px) auto;
  }
}
@keyframes srZwierZweef {
  from {
    transform: translate3d(0, -6px, 0) rotate(-1.2deg) scale(1);
  }
  to {
    transform: translate3d(0, 6px, 0) rotate(1.2deg) scale(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band__zwier {
    animation: none;
  }
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 2;
  height: clamp(44px, 6vw, 80px);
  pointer-events: none;
}

.cta-band::before {
  top: 0;
  background: var(--wave-top);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1290 62 1140 10 950 36 C760 62 610 16 430 40 C290 58 120 30 0 50 Z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1290 62 1140 10 950 36 C760 62 610 16 430 40 C290 58 120 30 0 50 Z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.cta-band::after {
  bottom: 0;
  background: var(--surface-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L1440 90 L1440 54 C1260 24 1090 74 900 50 C710 26 560 72 380 48 C240 30 110 60 0 40 Z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L1440 90 L1440 54 C1260 24 1090 74 900 50 C710 26 560 72 380 48 C240 30 110 60 0 40 Z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.section--tinted + .cta-band {
  --wave-top: var(--surface-2);
}

.section--dark + .cta-band {
  --wave-top: #f0e8d4;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding-block: clamp(3.25rem, 2.4rem + 3.8vw, 5.25rem);
}

@media (max-width: 800px) {
  .cta-band__inner {
    grid-template-columns: 1fr;
  }
}
/* .cta-band gebruikt geen .section, dus geen automatische Fraunces-stijl uit
   default.scss: hier expliciet, net als bij .hero__text h1 hierboven. */
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  font-size: var(--fs-h2);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}

.cta-band p {
  font-family: var(--font-body);
}

/*Oude bestanden*/
.text-page-banner {
  position: relative;
  padding: 75px 0 100px;
}
.text-page-banner:before {
  content: "";
  position: absolute;
  background: #000;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.text-page-banner.information h1 {
  text-align: center;
  margin: 0 0 15px;
}
.text-page-banner.information ul:not(.breadcrumbs) {
  display: block;
  text-align: center;
}
.text-page-banner.information ul:not(.breadcrumbs) li {
  display: inline-block;
  margin: 0 5px 0 0;
}
.text-page-banner.information ul:not(.breadcrumbs) li a {
  padding: 10px 15px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5019607843);
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.text-page-banner.information ul:not(.breadcrumbs) li a:hover {
  background: #fff;
  color: #141F1B;
}
.text-page-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-page-banner .breadcrumbs {
  margin: 0 0 75px;
}
.text-page-banner .breadcrumbs li:not(:last-child):after {
  background: #fff;
}
.text-page-banner .breadcrumbs li a {
  color: #Fff;
}
.text-page-banner .top-text {
  color: #fff;
}
.text-page-banner .top-text h1 {
  color: #fff;
  font-size: 55px;
  line-height: 60px;
  margin: 0 0 25px;
}
.text-page-banner .top-text h1 strong {
  display: block;
  color: #D3AF59;
}
.text-page-banner .top-text a:not(.btn-default) {
  color: #fff;
  text-decoration: underline;
}
.text-page-banner .top-text .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 10px 0 0;
}
.text-page-banner .top-text .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.text-page-banner .top-text .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.text-page-banner .top-text .btn-default:hover {
  background: #fff;
  color: #141F1B;
}

.text-page {
  padding: 75px 0;
  overflow: hidden;
}
.text-page .text h2, .text-page .text h3, .text-page .text h4, .text-page .text h5, .text-page .text h6 {
  font-size: 35px;
  line-height: 40px;
  margin: 0 0 10px;
}
.text-page .text ul {
  padding: 0 0 0 20px;
}
.text-page .text ul li {
  list-style: disc;
  margin: 0 0 5px;
}
.text-page .text a:not(.btn-default) {
  color: #141F1B;
  text-decoration: underline;
}
.text-page .text .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
}
.text-page .text .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.text-page .text .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.text-page .text .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.text-page img {
  width: 100%;
  border-radius: 16px;
  margin: 15px 0;
}

@media only screen and (max-width: 767.5px) {
  .text-page-banner {
    padding: 65px 0;
  }
  .text-page-banner.information {
    padding: 75px 0 50px;
  }
  .text-page-banner.information h1 {
    text-align: left;
  }
  .text-page-banner.information ul:not(.breadcrumbs) {
    text-align: left;
  }
  .text-page-banner.information ul:not(.breadcrumbs) li {
    margin: 0 5px 10px;
  }
  .text-page-banner .breadcrumbs {
    margin: 0 0 25px;
  }
  .text-page-banner .top-text h1 {
    font-size: 32px;
    line-height: 36px;
    margin: 0 0 10px;
  }
  .text-page {
    padding: 50px 0;
  }
  .text-page .text h2, .text-page .text h3, .text-page .text h4, .text-page .text h5, .text-page .text h6 {
    font-size: 26px;
    line-height: 32px;
  }
}
.product-head-new {
  background: #fff;
  padding: 75px 0 0;
  position: relative;
  overflow: hidden;
}
.product-head-new .product-slider {
  height: 100%;
}
.product-head-new .slider-wrapper {
  position: relative;
  min-height: 600px;
}
.product-head-new .nav-slider-product {
  position: absolute;
  bottom: 85px;
  right: 25px;
  z-index: 4;
  display: flex;
}
.product-head-new .nav-slider-product .slick-arrow {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  cursor: pointer;
  font-weight: 700;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}
.product-head-new .nav-slider-product .slick-arrow:hover {
  background: #fff;
}
.product-head-new .nav-slider-product .slick-arrow.JS-prev {
  margin-right: 10px;
}
.product-head-new .slick-slide img {
  display: block;
  object-fit: contain;
  min-height: 300px;
}
.product-head-new #div_variantenkleur {
  position: relative;
  margin-bottom: 0;
}
.product-head-new .product-info {
  background: rgba(227, 227, 227, 0.7490196078);
  backdrop-filter: blur(30px);
  padding: 25px;
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 3;
  border-radius: 16px;
  /* min-width: 500px;*/
  max-width: 550px;
  width: 100%;
}
.product-head-new .product-info .switch-product ul {
  display: flex;
  flex-direction: row;
  background: rgba(255, 255, 255, 0.3019607843);
  border: 1px solid #FFFFFF;
  border-radius: 100px;
  padding: 7px;
  margin: 0 0 15px;
}
.product-head-new .product-info .switch-product ul li {
  max-width: 50%;
  width: 100%;
  text-align: center;
  padding: 5px 15px;
  border-radius: 100px;
  cursor: pointer;
}
.product-head-new .product-info .switch-product ul li.active {
  background: #141F1B;
  color: #fff;
  font-weight: 700;
}
.product-head-new .product-info .title-wrapper {
  display: flex;
  flex-direction: row;
  margin: 0 0 10px;
}
.product-head-new .product-info .title-wrapper h1 {
  color: #141F1B;
  font-weight: 700;
  font-size: 30px;
}
.product-head-new .product-info .title-wrapper .prices-list {
  margin: 0 0 0 auto;
  color: #141F1B;
  font-weight: 700;
  font-size: 20px;
}
.product-head-new .product-info .title-wrapper .prices-list .old-price {
  color: #969696;
  position: relative;
  font-size: 18px;
  margin-right: 5px;
}
.product-head-new .product-info .title-wrapper .prices-list .old-price:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background-color: rgba(2, 56, 0, 0.5);
  width: 100%;
  transform: rotate(3deg) translateY(-50%);
}
.product-head-new .product-info .title-wrapper .prices-list .current-price {
  font-size: 22px;
}
.product-head-new .product-info .message-stock {
  display: block;
  color: #141F1B;
  margin: 0px 0 15px 0;
  text-align: center;
}
.product-head-new .product-info .variant-outer {
  display: flex;
  flex-direction: column;
  /* Gedeelde stijl voor kleur- én maat-bolletjes (kleur volle breedte boven, maat eronder) */
  /* Kleur-bolletjes: kleinere cirkel gevuld met de werkelijke kleur */
}
.product-head-new .product-info .variant-outer .left-outer {
  max-width: 100%;
  width: 100%;
}
.product-head-new .product-info .variant-outer .left {
  display: none;
}
.product-head-new .product-info .variant-outer .left.active {
  display: block;
}
.product-head-new .product-info .variant-outer .left .ddlSizes {
  background: transparent;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 100px;
}
.product-head-new .product-info .variant-outer .right {
  max-width: 100%;
  width: 100%;
  margin: 15px 0 0;
}
.product-head-new .product-info .variant-outer .ddlColorOption {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
.product-head-new .product-info .variant-outer .ddlColorOption li {
  max-width: 55px;
  width: 100%;
}
.product-head-new .product-info .variant-outer .ddlColorOption li label {
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  cursor: pointer;
  font-weight: 700;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}
.product-head-new .product-info .variant-outer .ddlColorOption li label:hover {
  background: #fff;
}
.product-head-new .product-info .variant-outer .ddlColorOption li input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.product-head-new .product-info .variant-outer .ddlColorOption li input[type=radio]:checked + label {
  background: #809973;
  color: #fff;
  border-color: #809973;
}
.product-head-new .product-info .variant-outer .ddlColorSwatch {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
.product-head-new .product-info .variant-outer .ddlColorSwatch li {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-head-new .product-info .variant-outer .ddlColorSwatch li label {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ccc;
  border: 1px solid rgb(255, 255, 255);
  cursor: pointer;
  font-size: 0;
  margin-bottom: 0;
  box-shadow: 0 0 0 2px transparent;
  transition: all 0.3s ease-in-out;
}
.product-head-new .product-info .variant-outer .ddlColorSwatch li input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.product-head-new .product-info .variant-outer .ddlColorSwatch li input[type=radio]:checked + label {
  box-shadow: 0 0 0 2px #141F1B;
}
.product-head-new .product-info .add-quantity {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.product-head-new .product-info .add-quantity .btn-default {
  width: 80%;
}
.product-head-new .product-info .add-quantity .quantity-outer {
  position: relative;
  left: 0;
  top: 0;
  width: 50%;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgb(255, 255, 255);
  padding: 10px 15px;
  text-align: center;
}
.product-head-new .product-info .add-quantity .quantity-outer .form-group {
  margin: 0;
}
.product-head-new .product-info .add-quantity .quantity-outer .form-group.quantity {
  display: flex;
  flex-direction: row;
}
.product-head-new .product-info .add-quantity .quantity-outer .form-group.quantity .current {
  margin: 0 auto;
}
.product-head-new .product-info .add-quantity .quantity-outer input {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  border-radius: 0;
  border: none;
  width: 27px;
  height: 27px;
  background: transparent;
}
.product-head-new .product-info .add-quantity .quantity-outer .min, .product-head-new .product-info .add-quantity .quantity-outer .max {
  color: #141F1B;
  font-weight: 700;
  cursor: pointer;
  font-size: 20px;
}
.product-head-new .product-info .description {
  color: #141F1B;
  border-bottom: 1px solid #FFFFFF;
  padding: 0 0 15px;
  margin: 0 0 15px;
}
.product-head-new .product-info .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  background: #141F1B;
  color: #fff;
  width: 100%;
}
.product-head-new .product-info .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.product-head-new .product-info .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.product-head-new .product-info .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.product-head-new .product-info .delivery {
  position: relative;
  padding: 0 0 0 25px;
  display: table;
  margin: 15px auto 0;
  color: #141F1B;
}
.product-head-new .product-info .delivery:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
}

.product-description {
  padding: 75px 0;
}
.product-description table {
  width: 85%;
  border-collapse: collapse;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  cursor: initial;
}
.product-description table th, .product-description table td {
  padding: 10px;
  border-bottom: 1px solid rgba(41, 41, 41, 0.168627451);
  border-right: 1px solid rgba(41, 41, 41, 0.168627451);
  min-width: 50px;
}
.product-description table th:last-of-type, .product-description table td:last-of-type {
  border-right: 0;
}
.product-description table tr {
  border-bottom: 1px solid rgba(41, 41, 41, 0.168627451);
}
.product-description table tr:last-of-type {
  border-right: 0;
}
.product-description table tr:hover {
  background: rgba(255, 255, 255, 0.4784313725);
}
.product-description ul li {
  border-bottom: 1px solid #141F1B;
  margin: 0 0 30px;
  padding: 0 0 40px;
  max-height: 50px;
  overflow: hidden;
  cursor: pointer;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  position: relative;
}
.product-description ul li:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 17px;
  height: 17px;
  transition: all 0.3s ease-in-out;
}
.product-description ul li.active {
  max-height: 500px;
}
.product-description ul li.active table {
  opacity: 1;
  visibility: visible;
}
.product-description ul li.active:after {
  transform: rotate(180deg);
}
.product-description ul li:last-child {
  border: none;
}
.product-description ul li strong {
  font-size: 24px;
  display: block;
  padding: 0 0 20px;
  font-weight: 600;
  color: #141F1B;
}

.product-bottom {
  background: #141F1B;
  position: relative;
}
.product-bottom.product-overview ul li {
  color: #D3AF59;
}
.product-bottom .wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.product-bottom .wrapper .right {
  max-width: 35%;
  width: 100%;
  position: relative;
}
.product-bottom .wrapper .right:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}
.product-bottom .wrapper .right img {
  width: 100%;
  border-radius: 0;
  z-index: 2;
}
.product-bottom .wrapper .left {
  max-width: 65%;
  width: 100%;
  padding: 75px;
  color: #FFFBE7;
  font-size: 26px;
}
.product-bottom .wrapper .left h2, .product-bottom .wrapper .left h3, .product-bottom .wrapper .left h4, .product-bottom .wrapper .left h5, .product-bottom .wrapper .left h6 {
  font-size: 60px;
  line-height: 60px;
  color: #D3AF59;
  margin: 0 0 10px;
}
.product-bottom .wrapper .left ul {
  margin: 10px 0 0;
}
.product-bottom .wrapper .left ul li {
  position: relative;
  padding: 0 0 0 25px;
  margin: 0 0 5px;
  font-size: 18px;
}
.product-bottom .wrapper .left ul li:before {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
}

.color-options {
  padding: 25px 0 75px;
  background: #141F1B;
}
.color-options .top-text {
  margin: 0 0 25px;
}
.color-options .top-text .beeldmerk {
  max-width: 60px;
  margin: 0 auto 7px;
  display: table;
}
.color-options .top-text h2, .color-options .top-text h3, .color-options .top-text h4, .color-options .top-text h5, .color-options .top-text h6 {
  text-align: center;
  color: #D3AF59;
  font-weight: 600;
  font-size: 40px;
  margin: 0 0 25px;
}
.color-options .item {
  padding: 15px;
}
.color-options .item img {
  width: 100%;
}

.toolbar {
  position: fixed;
  left: 0;
  bottom: 15px;
  width: 100%;
  z-index: 999;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.toolbar .outer {
  border-radius: 15px;
  position: relative;
  padding: 10px;
  box-shadow: 0px 0px 50px -20px rgba(0, 0, 0, 0.5019607843);
  background: rgba(2, 56, 0, 0.5);
  backdrop-filter: blur(30px);
}
.toolbar img {
  max-width: 100px;
  display: inline-block;
}
.toolbar .content {
  display: inline-block;
  margin-left: 25px;
  vertical-align: middle;
}
.toolbar.active {
  opacity: 1;
  visibility: visible;
}
.toolbar .title {
  font-weight: 600;
  color: #fff;
  font-size: 22px;
}
.toolbar .btn-default {
  background: #D3AF59;
  text-align: center;
  color: #141F1B;
  border-radius: 100px;
  padding: 12px 25px;
  display: table;
  margin: 0 0 0 auto;
  width: 100%;
  font-weight: 600;
}
.toolbar .price {
  text-align: right;
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  margin: 0 0 0 25px;
}

@media only screen and (max-width: 767.5px) {
  .product-head-new .nav-slider-product {
    bottom: 15px;
  }
  .product-head-new .nav-slider-product .slick-arrow {
    width: 43px;
    height: 43px;
    background: rgba(227, 227, 227, 0.7490196078);
  }
  .product-head-new .nav-slider-product .slick-arrow i {
    font-size: 16px;
    position: relative;
    top: -5px;
  }
  .product-head-new .slider-wrapper {
    min-height: initial;
  }
  .product-head-new .slick-slide img {
    min-height: initial;
    max-width: 300px;
    margin: 0 auto;
    display: block !important;
  }
  .product-head-new .product-info {
    position: relative;
    left: 0;
    bottom: initial;
    border-radius: 16px 16px 0 0;
  }
  .product-head-new .product-info .title-wrapper {
    margin: 0 0 10px;
  }
  .product-head-new .product-info .form-group .form-control {
    padding: 10px 15px;
  }
  .product-head-new .product-info .variant-outer {
    flex-direction: column;
  }
  .product-head-new .product-info .variant-outer .left-outer {
    max-width: 100%;
  }
  .product-head-new .product-info .variant-outer .right {
    max-width: 100%;
    margin: 15px 0 0;
  }
  .product-head-new .product-info .variant-outer .ddlColorOption li {
    max-width: 40px;
  }
  .product-head-new .product-info .variant-outer .ddlColorOption li label {
    width: 43px;
    height: 43px;
    font-size: 18px;
    line-height: 43px;
  }
  .product-description {
    padding: 50px 0 0;
  }
  .color-options {
    padding: 25px 0 50px;
  }
  .color-options .col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .color-options .top-text h2, .color-options .top-text h3, .color-options .top-text h4, .color-options .top-text h5, .color-options .top-text h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .color-options .item {
    margin: 0 0 25px;
  }
  .product-bottom .wrapper {
    flex-direction: column;
  }
  .product-bottom .wrapper .left, .product-bottom .wrapper .right {
    max-width: 100%;
  }
  .product-bottom .wrapper .left {
    padding: 25px 15px;
    font-size: 18px;
  }
  .product-bottom .wrapper .left h2, .product-bottom .wrapper .left h3, .product-bottom .wrapper .left h4, .product-bottom .wrapper .left h5, .product-bottom .wrapper .left h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .toolbar .title {
    font-size: 16px;
  }
  .toolbar .title span {
    display: block;
    margin: 0 0 -5px;
  }
  .toolbar .price {
    font-size: 13px;
  }
  .toolbar .btn-default {
    padding: 7px 15px !important;
  }
  .toolbar .outer {
    border-radius: 16px;
    padding: 10px 15px;
  }
  .toolbar .outer:before {
    border-radius: 16px;
  }
  .toolbar .col-sm-4 {
    -ms-flex: 0 0 55%;
    flex: 0 0 55%;
    max-width: 55%;
  }
  .toolbar .col-lg-2 {
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
  }
  .toolbar .content {
    margin: 0;
  }
  .toolbar .price {
    text-align: left;
    display: block;
    margin: 0;
  }
}
/*@import "pages/bestellen.scss";
@import 'pages/winkelwagen.scss';*/
/*@import "pages/acc-styling.scss";*/
.confirm {
  padding: 150px 0 50px;
  position: relative;
  min-height: 100vh;
}
.confirm:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60vw;
  height: 650px;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.confirm .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 15px 0 0;
}
.confirm .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.confirm .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.confirm .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.confirm h1 {
  font-size: 40px;
  text-transform: uppercase;
  line-height: initial;
  font-weight: 900;
}
.confirm .ordernumber {
  font-size: 30px;
  margin-bottom: 30px;
  color: #014023;
}
.confirm .ordernumber span {
  margin-left: 15px;
}
.confirm .custom-row {
  margin: 25px -15px 0;
}
.confirm .info {
  font-size: 16px;
  color: #000;
  line-height: 24px;
  margin-bottom: 30px;
}
.confirm .shopping-cart {
  background: transparent;
  margin-top: 50px;
}
.confirm .shopping-cart .comment {
  padding: 0 20px;
}
.confirm .inner {
  height: calc(100% - 30px);
  margin-bottom: 20px;
  background: #014023;
  color: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
}
.confirm .inner .heading {
  font-size: 16px;
  background: #014023;
  padding: 0;
  margin-bottom: 10px;
  font-weight: 600;
}
.confirm .inner .heading, .confirm .inner .text {
  z-index: 2;
  position: relative;
}

@media only screen and (max-width: 767.5px) {
  .confirm {
    padding: 100px 0 50px;
  }
  .confirm h1 {
    font-size: 40px;
    margin-bottom: 10px;
  }
  .confirm .inner {
    margin-top: 0;
    margin-bottom: 15px;
    height: calc(100% - 15px);
  }
  .confirm:after {
    display: none;
  }
}
.popup {
  position: fixed;
  z-index: 12;
  left: 50px;
  bottom: 20px;
  width: calc(100% - 100px);
  background: #fff;
  border-radius: 5px;
  border: 2px solid #e5e5e5;
  padding: 15px 35px;
}
.popup .accept {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 0 0 0 auto;
}
.popup .accept.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.popup .accept.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.popup .accept:hover {
  background: #fff;
  color: #141F1B;
}
.popup p {
  margin: 0;
  font-size: 14px;
}
.popup p a {
  color: #fff;
}
.popup .link {
  color: #FFFFFF;
  margin-right: 15px;
}
.popup .cookies-img {
  margin-right: 30px;
  font-size: 25px;
  float: left;
  color: #141414;
}

.link-pref {
  color: #fff;
  margin-right: 50px;
}
.link-pref:hover {
  text-decoration: underline;
}

.cookies {
  padding: 45px 0;
}
.cookies .title {
  display: block;
  font-weight: 500;
  text-align: center;
  font-size: 30px;
  padding: 0 60px;
}
.cookies .text {
  font-size: 16px;
  margin-top: 30px;
}
.cookies .text b {
  font-size: 24px;
  color: #014023;
  display: block;
  margin-bottom: 15px;
}
.cookies .banner {
  padding-left: 0;
  padding-right: 0;
  position: relative;
  overflow: hidden;
  color: #014023;
  margin-bottom: 60px;
}
.cookies .banner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  margin-top: -20px;
}
.cookies .info {
  margin-top: 30px;
}
.cookies .info ul {
  list-style: none;
  padding: 0;
}
.cookies .info li {
  transition: max-height 0.4s ease-in-out;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.cookies .info h4 {
  background: #014023;
  font-size: 18px;
  letter-spacing: 3px !important;
  color: #fff;
  cursor: pointer;
  height: 60px;
  padding: 20px 15px 0 45px;
  position: relative;
  border-radius: 5px;
  width: 100%;
  margin: auto;
  text-transform: none;
}
.cookies .info h4:after {
  display: block;
  content: "";
  height: 100%;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 30px;
  left: 0;
  z-index: -1;
  transition: background 0.2s ease-in-out;
}
.cookies .info h4:before {
  display: block !important;
  content: "";
  height: 30px;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: background 0.2s ease-in-out;
}
.cookies .info li.next h4:before, .cookies .info li.active h4:after {
  background: transparent;
}
.cookies .info .content {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.cookies .info .table {
  width: 1110px;
  max-width: 1110px;
  margin-top: 30px;
  color: #394452;
  text-transform: none;
}
.cookies .info .head {
  font-weight: 700;
  font-size: 18px;
}
.cookies .info .head .col {
  padding-top: 0 !important;
}
.cookies .info .content .row {
  display: flex;
}
.cookies .info .row .col {
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}
.cookies .info .border {
  position: absolute;
  height: 2px;
  width: calc(100% - 15px);
  background: #000;
  left: 15px;
  bottom: 0;
}

.preference {
  margin: 50px 0;
  float: left;
  width: 100%;
}
.preference .disable {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.preference .checkbox-cookies input {
  opacity: 0;
  z-index: 1;
  position: absolute;
}
.preference .checkbox-cookies input:checked + label:before {
  background: #014023;
}
.preference .checkbox-cookies input:checked + label:after {
  left: 20px !important;
}
.preference .checkbox-cookies label {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 5px;
}
.preference .checkbox-cookies label:before {
  content: "";
  height: 30px;
  width: 45px;
  border: none;
  background: #b1b1b1;
  outline: none !important;
  border-radius: 100px;
  right: 0;
  margin: 0 auto;
  display: inline-block;
  position: absolute;
  left: 0;
  transition: all 0.2s ease-in-out;
}
.preference .checkbox-cookies label:after {
  content: "" !important;
  display: block;
  position: absolute;
  left: 5px;
  top: 5px;
  height: 20px;
  width: 20px;
  margin-left: 0;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease-in-out;
}
.preference .item {
  position: relative;
  margin-bottom: 30px;
}
.preference .btn {
  float: right;
}

.btn-cancel {
  text-decoration: none;
  font-weight: bold;
}

.btn-accept {
  float: right;
}
.btn-accept:hover {
  background: #394452;
  color: #fff;
}

.radio {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

@media (max-width: 1440px) {
  .popup .container-fluid {
    padding: 0 15px;
  }
}
@media (max-width: 992px) {
  .popup {
    left: 25px;
    width: calc(100% - 50px);
    padding: 10px 15px;
  }
  .cookies .title {
    padding: 0 120px;
  }
  .checkbox-mobile {
    position: absolute;
    right: 30px;
    top: -10px;
    text-align: right;
  }
  .preference .checkbox {
    margin-right: 0px;
  }
}
@media (max-width: 767.5px) {
  .cookies .title {
    padding: 0 30px;
  }
  .cookies .info h4 {
    text-align: center;
    padding: 10px;
    font-size: 16px;
  }
  .popup {
    padding: 15px 0;
    line-height: inherit;
    left: 15px;
    width: calc(100% - 30px);
    bottom: 15px;
  }
  .popup .link {
    display: inline-block;
    vertical-align: -webkit-baseline-middle;
  }
  .popup p {
    padding: 0;
    padding-left: 0px;
  }
  .popup .cookies-img {
    margin-bottom: 15px;
    margin-right: 0px;
    display: none;
  }
  .popup .container-fluid {
    padding: 0 15px;
  }
  .popup .accept {
    margin-top: 15px;
    line-height: inherit;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    width: 70%;
    text-align: center;
    display: block;
  }
}
.shop-banner {
  position: relative;
  min-height: 50vh;
  padding: 125px 0 25px 0;
  color: #014023;
}
.shop-banner.faq-banner {
  min-height: 40vh;
}
.shop-banner img {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fff;
  width: 100%;
  object-fit: cover;
  object-position: right;
  z-index: -1;
}
.shop-banner h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 60px;
  margin: 0 0 10px;
}
.shop-banner h1 strong {
  font-weight: 600;
  color: #141F1B;
}
.shop-banner .w-100 {
  width: 100%;
}
.shop-banner .usps {
  padding: 125px 0 0 0;
}
.shop-banner .usps ul {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 16px;
}
.shop-banner .usps ul li {
  position: relative;
  background: linear-gradient(108.74deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-radius: 100px;
  padding: 10px 15px 10px 45px;
  backdrop-filter: blur(100px);
  box-shadow: 0px 0px 50px -20px rgba(0, 0, 0, 0.5019607843);
}
.shop-banner .usps ul li:not(:last-child) {
  margin: 0 10px 0 0;
}
.shop-banner .usps ul li:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  padding: 3px;
  background: linear-gradient(108.74deg, rgba(34, 194, 98, 0.6) 0%, rgba(166, 166, 166, 0.54) 36.46%, rgba(166, 166, 166, 0.3) 73.96%, rgba(34, 194, 98, 0.6) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.shop-banner .usps ul li:before {
  content: "";
  position: absolute;
  top: 13px;
  left: 15px;
  width: 22px;
  height: 22px;
  /*  background-image: url('/Resources/img/icon-check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;*/
}

html.overflow, body.overflow {
  overflow: hidden;
}

.banner-shop.parfums-banner {
  display: none;
}

.breadcrumbs-shop {
  position: absolute;
  top: 0;
}
.breadcrumbs-shop .breadcrumbs li:after {
  color: #FCF9F2 !important;
}
.breadcrumbs-shop .breadcrumbs li:last-child {
  color: #FCF9F2 !important;
}
.breadcrumbs-shop .breadcrumbs li a {
  color: #FCF9F2 !important;
}

.bg-image-shop {
  position: relative;
}
.bg-image-shop:not(.img-right) .bg-img {
  max-width: 500px;
  bottom: -45px;
  left: -150px;
}
.bg-image-shop .bg-img {
  position: absolute;
}
.bg-image-shop.img-right .bg-img {
  bottom: initial;
  top: -50%;
  left: initial;
  right: 0;
  max-width: 550px;
  -webkit-transform-origin-y: top;
  transform: rotate(-40deg);
}
.bg-image-shop img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.text-seo-full-width {
  padding: 100px 0;
  position: relative;
  z-index: 1;
}
.text-seo-full-width .bg-img {
  position: absolute;
  top: 25px;
  max-width: 500px;
  z-index: -1;
  opacity: 0.15;
  left: -125px;
}
.text-seo-full-width h1, .text-seo-full-width h2, .text-seo-full-width h3, .text-seo-full-width h4, .text-seo-full-width h5 {
  font-size: 40px;
  display: block;
  font-weight: 400;
}
.text-seo-full-width .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin-top: 20px;
}
.text-seo-full-width .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.text-seo-full-width .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.text-seo-full-width .btn-default:hover {
  background: #fff;
  color: #141F1B;
}

.sending-methodes {
  position: relative;
  padding: 100px 0;
  z-index: 3;
}
.sending-methodes .bg-img img {
  position: absolute;
}
.sending-methodes .bg-img img:first-of-type {
  left: -120px;
  max-width: 450px;
  bottom: -350px;
}
.sending-methodes h4 {
  font-size: 40px;
  display: block;
  font-weight: 400;
  margin: 30px 0 20px;
}
.sending-methodes .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin-top: 20px;
}
.sending-methodes .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.sending-methodes .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.sending-methodes .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.sending-methodes ul {
  margin: 0px -10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.sending-methodes ul li {
  background: #B5D0C1;
  padding: 35px 20px;
  flex: 0 0 calc(33% - 20px);
  margin: 0px 10px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.sending-methodes ul li strong, .sending-methodes ul li b {
  margin: auto auto 0;
  display: table;
  padding-top: 20px;
}
.sending-methodes ul li h5 {
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}

.banner-shop {
  padding-bottom: 50px;
  background: #141414;
  position: relative;
  min-height: 300px;
}
.banner-shop img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  object-position: right;
}
.banner-shop .title-left {
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translateY(-50%);
}
.banner-shop .title-left h1 {
  color: #FCF9F2;
  font-size: 55px;
  text-transform: uppercase;
}
.banner-shop .sale {
  position: absolute;
  right: 75px;
  top: 75%;
  transform: translateY(-50%);
  color: #FCF9F2;
}
.banner-shop .sale h2 {
  color: #FCF9F2;
  text-transform: uppercase;
}

.seo-top {
  padding: 35px;
  background: #f8f8f8;
  margin-bottom: 25px;
}
.seo-top h1 {
  font-size: 24px;
  margin: 0px 0 10px;
  color: #1caeb0;
  display: block;
  font-weight: 900;
}

.seo-bottom {
  margin: 25px 0;
  background: #f8f8f8;
  padding: 35px;
}
.seo-bottom h2 {
  font-size: 22px;
  margin: 0px 0 10px;
  color: #1caeb0;
  display: block;
  font-weight: 900;
}
.seo-bottom a {
  color: #1caeb0;
  font-weight: bold;
}
.seo-bottom ul {
  padding: 0px 0px 0 20px;
  margin: 10px 0;
}
.seo-bottom ul li {
  list-style: initial;
}

.view-selector {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 20px;
}
.view-selector li {
  display: inline-block;
  padding: 5px 10px;
  font-size: 26px;
  line-height: 26px;
  border-radius: 5px;
  margin: 0px 3px;
  cursor: pointer;
}
.view-selector li.active {
  background: #e9e9e9;
  border: 1px solid #e7e6e6;
}

.paging-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 35px;
}
.paging-wrapper .pagenation {
  flex-wrap: wrap;
  flex-direction: row;
  display: flex;
}
.paging-wrapper .pagenation li {
  width: 45px;
  height: 45px;
  display: inline-block;
  position: relative;
  border-radius: 0px;
  background: transparent;
  border: 2px solid #ddd;
  font-weight: normal;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  /*&:last-child {
      margin-right: 0;
  }*/
}
.paging-wrapper .pagenation li.active {
  color: #014023;
  border-color: #014023;
  font-weight: bold;
}
.paging-wrapper .pagenation li span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.paging-wrapper .page-controls div {
  height: 45px;
  position: relative;
  /*   background: #f8f8f8;*/
  border: 2px solid #ddd;
  font-weight: normal;
  cursor: pointer;
  padding: 0 15px;
  line-height: 42px;
}
.paging-wrapper .page-controls div.left-side {
  margin-right: 10px;
}
.paging-wrapper .page-controls div.left-side i {
  color: #CAC8C5;
  margin-right: 10px;
}
.paging-wrapper .page-controls div.right-side {
  /*margin-left: 10px;*/
}
.paging-wrapper .page-controls div.right-side i {
  margin-left: 20px;
  color: #CAC8C5;
}

.shop {
  padding: 125px 0px 50px;
  position: relative;
}
.shop .filter-top {
  width: 275px;
  margin-left: auto;
}
.shop .filter-top b {
  display: block;
}
.shop .filter-top .form-control {
  border: 2px solid #eeeeee;
  background: #fff;
}
.shop#div_upsells {
  padding: 30px 0;
  background: no-repeat;
  margin: 30px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.shop#div_upsells .product-list .item {
  background: transparent !important;
}
.shop#div_upsells .product-list .right {
  padding: 10px !important;
}
.shop#div_upsells .col-sm-4 {
  padding: 0px 10px;
}
.shop#div_upsells .item .btn-default {
  margin-top: 15px;
}
.shop#div_upsells .item .btn-default.disabled {
  pointer-events: none;
}
.shop#div_upsells .item .btn-default em {
  margin-right: 10px;
}
.shop#div_upsells .title {
  hyphens: auto;
}
.shop#div_upsells .title h5 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 10px;
}
.shop .custom-control {
  width: 75px;
  margin-left: auto;
  margin-top: 25px;
}
.shop .custom-control .form-control {
  border: 2px solid #eeeeee;
  background: #fff;
}
.shop .img-bg img {
  position: absolute;
}
.shop .img-bg img:nth-child(1) {
  z-index: -1;
  opacity: 0.15;
  max-width: 550px;
  left: -100px;
  top: 150px;
}
.shop .img-bg img:nth-child(2) {
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 570px;
  z-index: 1;
}
.shop h1 {
  font-size: 24px;
  font-family: inherit;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
.shop .text-seo {
  margin-bottom: 25px;
}
.shop .checkbox label {
  margin-bottom: 5px !important;
}
.shop hr {
  border-top: 3px solid #f1f1f1;
  display: block;
  margin: 20px 0;
}
.shop .price-filter .input-list {
  display: flex;
}
.shop .price-filter h6 {
  color: #141414;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  font-family: "Crimson Pro", serif;
}
.shop .price-filter input {
  border: 1px solid #141414;
  background: transparent;
  display: inline-block;
  width: calc(50% - 25px);
  padding: 7px;
}
.shop .price-filter input:nth-child(2) {
  margin-left: 25px;
}
.shop .list {
  margin: 3px 0;
}
.shop .list label {
  padding-left: 25px !important;
  display: block;
  /* &:hover {
      &:before {
          border-color: $secondary-color;
      }
  }*/
}
.shop .list label:after {
  left: 3px;
  font-size: 12px;
  top: 3px;
}
.shop .list label:before {
  border-radius: 2px;
  background-color: transparent;
  border: 1px solid #141414;
  width: 17px;
  height: 17px;
  top: 1px;
}
.shop .list.checked .types {
  display: block;
}
.shop .list .models .submodels {
  display: none;
  padding: 5px 15px 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #dedede;
}
.shop .list .models .submodels.empty {
  display: none !important;
}
.shop .list .models.checked .submodels {
  display: block;
}
.shop .list .types {
  display: none;
  padding: 5px 15px 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #dedede;
}
.shop a {
  color: #141414;
}
.shop .cats .cat-title {
  font-size: 17px;
  color: #000;
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.shop .cats .cat-title.active {
  color: #014023;
  font-size: 18px;
  display: block;
  font-weight: 900;
}
.shop .cats .sub {
  margin-bottom: 10px;
  padding-left: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}
.shop .cats .sub .div-title {
  font-size: 14px;
  color: #014023;
  display: block;
  margin-bottom: 5px;
}
.shop .cats .sub.open-main {
  max-height: 999px;
}
.shop .cats .sub.open-main .div-title i {
  transform: rotate(-180deg);
}
.shop .cats .sub .div-title {
  position: relative;
}
.shop .cats .sub .div-title i {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  transform: rotate(0deg);
  color: #014023;
  border-left: 1px solid #ededed;
  padding: 5px;
  margin: -5px;
  padding-left: 10px;
  transition: all 0.3s ease-in-out;
}
.shop .cats .sub.open .show-all:after {
  transform: rotate(-180deg);
}
.shop .cats .sub .show-all {
  color: #014023;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-left: 15px;
}
.shop .cats .sub .show-all:after {
  content: "\f078";
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(0deg);
  border-left: 1px solid #ededed;
  padding: 5px 10px;
  margin: -5px -10px;
}
.shop .cats .sub .sub-title {
  color: #014023;
}
.shop .cats .sub .subsub {
  margin-left: 15px;
  max-height: 95px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.shop .cats .sub .subsub a {
  color: #939393;
  padding: 5px 0;
  display: table;
}
.shop .select2-results__option--highlighted[aria-selected] {
  background-color: #014023 !important;
  color: #fff !important;
}
.shop .select2-selection__choice {
  background-color: #014023 !important;
  border: 1px solid #014023 !important;
  color: #fff;
}
.shop .select2-selection__choice__remove {
  color: #fff !important;
}
.shop .container-fluid {
  padding: 0px 150px;
}
.shop .select2-container {
  width: 100% !important;
}
.shop .range-slider .input-list {
  margin-bottom: 15px;
  width: 100%;
  white-space: nowrap;
}
.shop .range-slider .input-list input {
  border: none;
  width: calc(50% - 2px);
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
}
.shop .range-slider .input-list input.max-custom {
  margin-left: auto;
  text-align: right;
}
.shop .range-slider .ui-widget-content {
  height: 5px;
  background: #27BBB1;
  position: relative;
  border-radius: 5px;
}
.shop .range-slider .ui-widget-content .ui-slider-range {
  position: absolute;
  background: #014023;
  height: 100%;
}
.shop .range-slider .ui-widget-content .ui-slider-handle {
  height: 20px;
  width: 20px;
  background: rgb(255, 255, 255);
  border: 2px solid rgb(206, 206, 206);
  display: block;
  border-radius: 50%;
  top: 2px;
  position: absolute;
  transform: translateY(-50%);
  cursor: pointer;
  margin-left: -10px;
}
.shop .select2-container--default .select2-selection--multiple {
  background: #F8F8F8;
  border: 1px solid #CECECE;
}
.shop .select2-container--default .select2-selection--multiple:after {
  content: "\f078";
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  color: #939393;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
}
.shop .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: #939393;
  padding: 0px 15px;
}
.shop .usp-shop {
  position: relative;
  color: #014023;
  text-align: center;
  font-size: 12px;
  margin: 25px 0px;
  /*&:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0px;
      height: 2px;
      width: 100%;
      background: $primary-pink;
      transform: translateY(-50%);
  }*/
}
.shop .usp-shop li {
  display: inline-block;
  z-index: 1;
  position: relative;
  padding: 10px;
  font-size: 14px;
  color: #777;
}
.shop .usp-shop li:first-child {
  padding-left: 0;
}
.shop .usp-shop li:last-child {
  padding-right: 0;
}
.shop .usp-shop li i {
  margin-right: 5px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  color: #014023;
}
.shop .checkbox-color input {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  visibility: hidden;
}
.shop .checkbox-color input:checked + label {
  opacity: 1;
}
.shop .checkbox-color label {
  position: relative;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #CECECE;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  margin-right: 5px;
}
.shop .filters .inner {
  padding: 20px;
  border: 2px solid #eeeeee;
  background: #fff;
  /*    h6 {
      color: #939393;
      font-size: 14px;
  }*/
}
.shop .filters .inner .options .height-collapser {
  padding-left: 20px;
}
.shop .filters .inner .btn-default {
  padding: 0;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  margin-left: auto;
}
.shop .filters .inner h3 {
  color: #202326;
  font-size: 16px;
  position: relative;
  cursor: default;
  font-family: inherit;
  padding-left: 0;
  padding: 0 0 5px;
  font-weight: 300;
  /*    &:before {
      content: "";
      font-family: "Font Awesome 5 Free";
      position: absolute;
      top: 0;
      left: 0;
      font-weight: 900;
      transition: all 0.3s ease-in-out;
      width: 21px;
      height: 21px;
      border: 1px solid #dddddd;
      border-radius: 5px;
  }

  &:after {
      content: "\f00c" !important;
      font-weight: 900;
      font-family: "Font Awesome 5 Free";
      position: absolute;
      left: 6px;
      font-size: 10px;
      top: 5px;
      margin-left: 0;
      opacity: 0;
      visibility: hidden;
      color: #fff;
  }*/
}
.shop .filters .inner h3.open {
  color: #000;
}
.shop .filters .inner h3.open:after {
  opacity: 1;
  visibility: visible;
}
.shop .filters .inner h3.open:before {
  background: #000;
}
.shop .filters .inner .title {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 900;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.shop .shop-header {
  position: relative;
}
.shop .shop-header img {
  max-width: 100%;
}
.shop .shop-header .img-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  text-align: center;
}
.shop .shop-header .img-text h1 {
  font-weight: bold;
  color: #fff;
  margin: 0;
  font-size: 30px;
}
.shop .results {
  color: #014023;
  margin-bottom: 35px;
}
.shop .results b {
  display: inline-block;
  margin-right: 5px;
}
.shop .results .mrg-right {
  text-align: right;
}
.shop .results .mrg-right .form-group {
  margin-bottom: 0px;
  margin-left: 15px;
  display: inline-block;
}
.shop .results .mrg-right .form-group select {
  background-position: 95% !important;
}
.shop .results .mrg-right .form-group .form-control {
  width: 150px;
  font-size: 15px;
  padding: 10px;
  padding-right: 35px;
  border-radius: 0;
  border: 1px solid #eeeae2;
  color: #000;
  background: #fff;
}
.shop .results .mrg-right .form-group .form-control option {
  background: #eee;
}
.shop .results .mrg-right .form-group .form-control option:checked {
  background: #014023;
  color: #fff;
}
.shop .product-list .right {
  width: 100%;
  padding: 10px 10px 0;
  background: #fff;
}
.shop .product-list .right .old-price {
  margin-left: 10px;
  position: relative;
}
.shop .product-list .right .old-price:before {
  content: "";
  height: 1px;
  width: 120%;
  transform: rotate(-6deg) translateX(-50%);
  background: #c90000;
  position: absolute;
  top: 7px;
  left: 50%;
}
.shop .product-list .row {
  margin: 0px -10px;
}
.shop .product-list .col-custom {
  -ms-flex: 0 0 33%;
  flex: 0 0 33%;
  max-width: 33%;
  padding: 0px 10px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
}
.shop .product-list .item {
  position: relative;
}
.shop .product-list .item object {
  margin-top: auto;
}
.shop .product-list .item .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  background: #f69986;
  font-size: 16px;
  padding: 12px 10px;
  width: 100%;
  position: relative;
}
.shop .product-list .item .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.shop .product-list .item .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.shop .product-list .item .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.shop .product-list .item .btn-default.notifyMe i {
  color: #fff;
  margin: 0;
  position: absolute;
  font-weight: 900;
  right: 15px;
  min-height: initial;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}
.shop .product-list .item .quantity {
  display: table;
  border: 2px solid #e6e6e6;
  margin-bottom: 0;
  border-radius: 5px;
}
.shop .product-list .item .quantity input {
  max-width: 40px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  border: none;
}
.shop .product-list .item .quantity .min, .shop .product-list .item .quantity .max {
  background: #fff;
  cursor: pointer;
  padding: 5px 10px;
}
.shop .product-list .item .quantity .current {
  background: #fafafa;
  padding: 5px;
  display: inline-block;
  text-align: center;
  border-left: 1px solid #f3f2f2;
  border-right: 1px solid #f3f2f2;
}
.shop .product-list .item .xtra-div .btn-shop {
  margin-left: auto;
}
.shop .product-list .item .xtra-div .btn-shop .btn-default {
  display: block;
  text-align: center;
  text-decoration: underline !important;
}
.shop .product-list .item .favorite-button {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 1;
}
.shop .product-list .item .favorite-button input {
  position: absolute;
  top: 0px;
  opacity: 0;
}
.shop .product-list .item .favorite-button input:checked + label .fas {
  opacity: 1;
}
.shop .product-list .item .favorite-button input:checked + label .far {
  opacity: 0;
}
.shop .product-list .item .favorite-button label {
  margin: 0;
  cursor: pointer;
  height: 45px;
  width: 45px;
  position: relative;
  color: #1caeb0;
  display: block;
  border: 2px solid #e6e6e6;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.39);
}
.shop .product-list .item .favorite-button label i {
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 50%;
  font-size: 17px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.shop .product-list .item .favorite-button label .far {
  opacity: 1;
}
.shop .product-list .item .favorite-button label .fas {
  opacity: 0;
}
.shop .product-list .item .stock {
  font-size: 14px;
  color: #83AD86;
  position: relative;
  display: block;
  font-weight: 300;
  padding: 2px 0;
}
.shop .product-list .item .stock b {
  font-weight: 500;
}
.shop .product-list .item .stock.not {
  color: #CD5C73;
}
.shop .product-list .item .brand {
  width: 100%;
  padding: 0px 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.shop .product-list .item .brand .overlayer {
  content: "";
  position: absolute;
  top: -500px;
  left: -500px;
  height: 999px;
  background: rgba(255, 255, 255, 0.7);
  width: 999px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
.shop .product-list .item .brand .label {
  padding: 5px;
  font-size: 11px;
  background: #28bbb0;
  text-align: center;
  font-weight: bold;
  border-radius: 3px;
  color: #fff;
  position: relative;
  cursor: pointer;
  z-index: 1;
}
.shop .product-list .item .brand .label:hover + .overlayer, .shop .product-list .item .brand .label:focus + .overlayer, .shop .product-list .item .brand .label:active + .overlayer {
  opacity: 1;
  visibility: visible;
}
.shop .product-list .item .brand .label:hover .popover-custom, .shop .product-list .item .brand .label:focus .popover-custom, .shop .product-list .item .brand .label:active .popover-custom {
  opacity: 1;
  visibility: visible;
}
.shop .product-list .item .brand .label .popover-custom {
  transition: all 0.3s ease-in-out;
  position: absolute;
  bottom: 150%;
  background: #fff;
  border: 2px solid #d1d1d1;
  padding: 10px;
  min-width: 255px;
  z-index: 1;
  text-align: left;
  color: #000;
  border-radius: 10px;
  left: 0;
  font-weight: normal;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  max-height: 300px;
  overflow: hidden;
  overflow-y: scroll;
  /*&:after {
      content: "\f0da";
      font-family: "Font Awesome 5 Free";
      font-weight: bold;
      font-size: 70px;
      position: absolute;
      line-height: 30px;
      color: #fff;
      left: 30px;
      bottom: -19px;
      z-index: -1;
      text-shadow: -2px 0 #d1d1d1, 0 2px #d1d1d1, 2px 0 #d1d1d1, 0 -2px #d1d1d1;
  }*/
}
.shop .product-list .item .brand .label .popover-custom::-webkit-scrollbar {
  width: 10px;
}
.shop .product-list .item .brand .label .popover-custom::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.shop .product-list .item .brand .label .popover-custom::-webkit-scrollbar-thumb {
  background: #27b9af;
  border-radius: 10px;
}
.shop .product-list .item .brand .label .popover-custom::-webkit-scrollbar-thumb:hover {
  background: #555;
  border-radius: 10px;
}
.shop .product-list .item .brand .label .popover-custom b {
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}
.shop .product-list .item .brand img {
  max-height: inherit;
  max-width: 115px;
  width: 50%;
  margin-right: 0;
}
.shop .product-list .item .new-product {
  min-width: 175px;
  background: #EEEAE0;
  text-align: center;
  padding: 5px;
  color: #014023;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 28px;
  transform: rotate(-45deg);
  left: -40px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.11);
}
.shop .product-list .item img {
  width: 100%;
  object-fit: contain;
  margin: 0 auto 0;
  display: block;
}
.shop .product-list .item .text {
  font-size: 13px;
  margin-bottom: 7px;
  color: #4E4E4E;
}
.shop .product-list .item .text li {
  display: block;
  position: relative;
  padding-left: 10px;
}
.shop .product-list .item .text li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #4E4E4E;
}
.shop .product-list .item h5 {
  font-weight: 500;
  color: #000;
  font-family: inherit;
  font-size: 18px;
}
.shop .product-list .item i {
  font-size: 20px;
  display: block;
  margin: 5px 0;
  font-weight: 600;
  min-height: 50px;
  overflow: hidden;
}
.shop .product-list .item .discount {
  position: absolute;
  right: 10px;
  width: 75px;
  height: 75px;
  top: 10px;
  background: #b5d0c1;
  border-radius: 50%;
  transform: rotate(15deg);
  font-size: 14px;
  border: 1px solid #fff;
}
.shop .product-list .item .discount b {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  font-weight: 500;
  text-align: center;
}
.shop .product-list .item .delivery {
  color: #01982b;
  line-height: 15px;
  display: none;
  font-size: 13px;
  margin: 5px 0;
}
.shop .product-list .item .price {
  margin: 0;
  display: block;
  width: 100%;
  color: #014023;
  font-size: 14px;
}
.shop .product-list .item .price .old {
  display: inline-block;
  margin-left: 5px;
  font-size: 14px;
  position: relative;
  font-weight: 500;
  color: #919191;
}
.shop .product-list .item .price .old:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background-color: #F69986;
  width: 100%;
  transform: rotate(-3deg) translateY(-50%);
}

.filter-button {
  display: none;
}

.close-filters {
  position: absolute;
  right: 35px;
  top: 75px;
  color: #014023;
  font-size: 25px;
  padding: 5px;
  margin: -5px;
  display: none;
}

@media only screen and (max-width: 1350px) {
  .shop .container-fluid {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 991.5px) {
  .close-filters {
    display: block;
  }
  .text-seo-full-width {
    padding: 50px 0;
  }
  .sending-methodes {
    padding: 50px 0;
  }
  .sending-methodes ul {
    margin: 15px 0 0;
  }
  .sending-methodes ul li {
    flex: 0 0 100%;
    margin: 0 0 10px;
  }
  .sending-methodes h4 {
    margin-top: 0;
  }
  .filter-button {
    background: #b8d0c2;
    display: block;
    position: fixed;
    z-index: 2;
    bottom: 10px;
    left: 0;
    border-radius: 5px;
    margin: 0 auto;
    right: 0;
    color: #fff;
    cursor: pointer;
    padding: 11px 25px;
    transition: background-color 0.2s linear;
    -webkit-tap-highlight-color: transparent;
    width: 50%;
    text-align: center;
  }
  .filter-button.button-static {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-top: 25px;
  }
  .filter-button i {
    font-size: 15px;
    margin-right: 10px;
  }
  .shop .usp-shop li {
    padding: 10px;
    display: table;
    margin: 0 auto;
  }
  .shop .filter-wrapper {
    position: fixed;
    top: 0px;
    z-index: 9;
    padding: 0;
    width: 80%;
    bottom: 0;
    left: -80%;
    transition: all 0.3s ease-in-out;
    visibility: hidden;
  }
  .shop .filter-wrapper.open {
    left: 0px;
    visibility: visible;
  }
  .shop .filters {
    background: #fcf9f2;
    height: 100vh;
    overflow-y: scroll;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.17);
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.17);
    padding: 125px 0 0;
  }
  .shop .filters .inner {
    padding: 50px 25px 25px;
    margin-bottom: 0;
  }
  .shop .filters .inner .option .height-collapser::-webkit-scrollbar {
    display: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .bg-image-shop.img-right .bg-img {
    max-width: 400px;
    top: -35%;
    right: -50px;
  }
}
@media only screen and (max-width: 767.5px) {
  .shop-banner {
    padding: 75px 0 25px 0;
  }
  .shop-banner img {
    position: relative;
    min-height: 200px;
    object-position: right;
    margin: 0 0 15px;
  }
  .shop-banner .breadcrumbs {
    margin: 0 0 10px;
  }
  .shop-banner h1 {
    font-size: 36px;
    line-height: 42px;
  }
  .shop-banner .usps {
    padding: 25px 0 0 0;
  }
  .shop-banner .usps ul li {
    font-size: 14px;
    padding: 7px 25px 7px 40px;
  }
  .shop-banner .usps ul li:nth-of-type(2) {
    margin: 10px 0;
  }
  .shop-banner .usps ul li:before {
    width: 17px;
    height: 17px;
    top: 13px;
  }
  .close-filters {
    right: 15px;
  }
  .banner-shop {
    padding-top: 0;
    background: #141414;
    min-height: 200px;
  }
  .banner-shop .shop-header {
    padding-top: 50px;
  }
  .banner-shop .title-left {
    top: 40%;
  }
  .banner-shop .title-left h1 {
    font-size: 35px;
  }
  .banner-shop .sale {
    transform: none;
    top: 25px;
    right: 25px;
  }
  .sending-methodes .bg-img img:first-of-type {
    left: -50px;
    max-width: 200px;
    bottom: -150px;
  }
  .text-seo-full-width .bg-img {
    max-width: 250px;
    left: 50px;
    top: initial;
    bottom: -25px;
  }
  .bg-image-shop.img-right .bg-img {
    display: none;
  }
  .bg-image-shop:not(.img-right) .bg-img {
    display: none;
  }
  .view-selector {
    margin: 15px auto 0;
  }
  .shop {
    padding: 80px 0 25px;
    background-size: 250px;
    background-position: 95% 100%;
  }
  .shop .filter-top .form-control {
    font-size: 16px;
  }
  .shop .img-bg img:nth-child(1) {
    max-width: 350px;
    left: 0px;
    top: 100px;
  }
  .shop .img-bg img:nth-child(2) {
    display: none;
  }
  .shop a {
    padding: 0;
  }
  .shop .product-list.list-view .item h5 {
    max-width: 65%;
  }
  .shop .product-list.list-view .item .left {
    max-width: 100px;
  }
  .shop .product-list.list-view .item .right {
    max-width: calc(100% - 125px);
    flex: 0 0 100%;
  }
  .shop .product-list .col-custom {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0px 5px;
    margin-bottom: 0;
  }
  .shop .product-list .item .height-adjuster {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .shop .product-list .item .btn-default {
    width: 100%;
  }
  .shop .product-list .left img {
    margin: auto;
  }
  .shop .product-list .right {
    border-top: none;
  }
  .shop .product-list .btn-shop {
    width: 100%;
  }
  .shop .brand .label {
    width: 100%;
  }
  .shop .brand .label .popover-custom {
    min-width: inherit !important;
    font-size: 12px !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    max-height: 250px !important;
  }
  .shop .brand .label .popover-custom::-webkit-scrollbar {
    width: 5px !important;
  }
  .shop .brand img {
    margin: 15px auto 0;
    max-width: 100px;
  }
  .shop .results {
    padding: 0;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
    align-items: flex-start;
  }
  .shop .results .mrg-right {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  .shop .results .mrg-right .form-group {
    margin-bottom: 0;
    margin-left: auto;
    display: inline-block;
    width: 100%;
  }
  .shop .results .mrg-right .form-group .form-control {
    width: 50%;
  }
  .shop .results .mrg-right .form-group:nth-of-type(1) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 425px) {
  .shop .product-list .row {
    margin: 0 -5px;
  }
  .shop .product-list .item {
    margin-bottom: 20px;
    height: calc(100% - 20px);
    display: block;
    background: #fff;
    /*
    .xtra-div {
        padding: 5px 10px;

        .btn-shop {
            width: 100%;
            margin-top: 10px;
        }
    }*/
  }
  .shop .product-list .item .price {
    margin: auto 10px 0 0;
    width: calc(100% - 10px);
    font-size: 16px;
  }
  .shop .product-list .item .brand {
    padding: 0 10px;
  }
  .shop .product-list .item .stock {
    /*margin: 5px 10px 10px 0;*/
  }
  .shop .product-list .item .delivery {
    margin: 5px 10px 0;
  }
  .shop .product-list .item h5 {
    font-size: 16px;
  }
}
.video-banner {
  position: relative;
  padding: 75px 0 150px;
  min-height: 100vh;
}
.video-banner:before {
  content: "";
  position: absolute;
  background: #000;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.video-banner.sustainability ul:not(.breadcrumbs) li {
  position: relative;
  padding: 0 0 0 25px;
  margin: 0 0 5px;
}
.video-banner.sustainability ul:not(.breadcrumbs) li:before {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
}
.video-banner .mouse-icon {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.video-banner .mouse-icon img {
  max-width: 20px;
  width: 100%;
}
.video-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-banner .breadcrumbs {
  margin: 0 0 75px;
}
.video-banner .breadcrumbs li:not(:last-child):after {
  background: #fff;
}
.video-banner .breadcrumbs li a {
  color: #Fff;
}
.video-banner .top-text {
  color: #fff;
}
.video-banner .top-text h1 {
  color: #fff;
  font-size: 75px;
  line-height: 70px;
  margin: 0 0 35px;
}
.video-banner .top-text h1 strong {
  display: block;
  color: #D3AF59;
}
.video-banner .top-text a:not(.btn-default) {
  color: #fff;
  text-decoration: underline;
}
.video-banner .top-text .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 10px 0 0 0;
  display: inline-block;
  border: 2px solid #D3AF59;
}
.video-banner .top-text .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.video-banner .top-text .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.video-banner .top-text .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.video-banner .top-text .btn-default:nth-of-type(2) {
  border: 2px solid #D3AF59;
  background: transparent;
  color: #D3AF59;
  margin: 10px 0 0 10px;
}

.text-sec-img {
  padding: 75px 0;
}
.text-sec-img.bg-green {
  background: #141F1B;
  color: #fff;
}
.text-sec-img.bg-green .text h2, .text-sec-img.bg-green .text h3, .text-sec-img.bg-green .text h4, .text-sec-img.bg-green .text h5, .text-sec-img.bg-green .text h6 {
  color: #fff;
}
.text-sec-img.bg-green .text b {
  color: #fff;
}
.text-sec-img.bg-green .text a:not(.btn-default) {
  color: #D3AF59;
}
.text-sec-img.bg-green img {
  margin: 0;
}
.text-sec-img .text.pd-left {
  padding: 0 0 0 50px;
}
.text-sec-img .text b {
  position: relative;
  padding: 0 0 0 40px;
  color: #141F1B;
  display: block;
  margin: 0 0 10px;
}
.text-sec-img .text b:before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
}
.text-sec-img .text h2, .text-sec-img .text h3, .text-sec-img .text h4, .text-sec-img .text h5, .text-sec-img .text h6 {
  font-size: 50px;
  line-height: 50px;
  margin: 0 0 15px;
}
.text-sec-img img {
  max-width: 550px;
  width: 100%;
  display: block;
  border-radius: 16px;
  margin: 0 0 0 auto;
}

.reviews {
  padding: 75px 0;
}
.reviews b {
  position: relative;
  padding: 0 0 0 40px;
  color: #141F1B;
  display: table;
  margin: 0 auto 10px;
  text-align: center;
}
.reviews b:before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
}
.reviews h2, .reviews h3, .reviews h4, .reviews h5, .reviews h6 {
  text-align: center;
  font-size: 50px;
  line-height: 50px;
}
.reviews .review-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin: 50px 0 0;
}
.reviews .review-item {
  flex: 1 1 calc(50% - 17px);
  max-width: calc(50% - 17px);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  background: #141F1B;
  color: #D3AF59;
  overflow: hidden;
}
.reviews .review-item b {
  color: #D3AF59;
}
.reviews .review-item b.rating-center {
  text-align: left;
  margin: 0 0 10px;
  font-size: 20px;
  padding-left: 0;
}
.reviews .review-item b.rating-center:before {
  display: none;
}
.reviews .review-item:hover {
  box-shadow: 0 15px 35px rgba(20, 31, 27, 0.08);
  transform: translateY(-5px);
}
.reviews .review-item .text-wrapper {
  margin: 0 0 25px;
  z-index: 2;
  position: relative;
}
.reviews .review-item .text-wrapper .text {
  color: #D3AF59;
  line-height: 26px;
}
.reviews .review-item .review-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  z-index: 2;
  position: relative;
}
.reviews .review-item .review-bottom .name {
  margin: 0;
  text-align: left;
}
.reviews .review-item .review-bottom .rating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reviews .review-item .review-bottom .rating .stars {
  max-width: 110px;
  width: 100%;
  display: block;
}
.reviews .review-item .review-bottom .rating .google {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
}

.img-bg-bottom {
  background: #D3AF59;
  padding: 75px 0;
  overflow: hidden;
}
.img-bg-bottom.dark {
  background: #141F1B;
  color: #EBDECD;
}
.img-bg-bottom.dark b {
  color: #D3AF59;
}
.img-bg-bottom.dark h1, .img-bg-bottom.dark h2, .img-bg-bottom.dark h3, .img-bg-bottom.dark h4, .img-bg-bottom.dark h5, .img-bg-bottom.dark h6 {
  color: #D3AF59;
}
.img-bg-bottom.dark .btn-default {
  background: #D3AF59;
  color: #141F1B;
}
.img-bg-bottom b {
  position: relative;
  padding: 0 0 0 40px;
  color: #141F1B;
  display: table;
  margin: 0 0 10px;
}
.img-bg-bottom b:before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
}
.img-bg-bottom h2, .img-bg-bottom h3, .img-bg-bottom h4, .img-bg-bottom h5, .img-bg-bottom h6 {
  font-size: 50px;
  line-height: 50px;
  margin-bottom: 15px;
}
.img-bg-bottom .img-wrapper {
  position: relative;
}
.img-bg-bottom .img-wrapper .beeldmerk {
  width: 100%;
  display: block;
}
.img-bg-bottom .img-wrapper img:not(.beeldmerk) {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 350px;
}
.img-bg-bottom .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  background: #141F1B;
  color: #fff;
  margin: 10px 0 0;
}
.img-bg-bottom .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.img-bg-bottom .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.img-bg-bottom .btn-default:hover {
  background: #fff;
  color: #141F1B;
}

.advantages {
  background: #141F1B;
  padding: 75px 0;
}
.advantages h2, .advantages h3, .advantages h4, .advantages h5, .advantages h6 {
  font-size: 50px;
  line-height: 55px;
  text-align: center;
  color: #fff;
  margin: 0 0 35px;
}
.advantages h2 strong, .advantages h3 strong, .advantages h4 strong, .advantages h5 strong, .advantages h6 strong {
  color: #D3AF59;
}
.advantages .text-bottom {
  text-align: center;
  color: #fff;
  padding-top: 25px;
}
.advantages ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.advantages ul li {
  max-width: 49%;
  width: 100%;
  margin: 0 0 15px;
  background: #D3AF59;
  padding: 25px;
  border-radius: 16px;
  color: #141F1B;
}
.advantages ul li strong {
  display: block;
  font-size: 30px;
  margin: 0 0 10px;
  font-weight: 600;
}
.advantages a {
  display: table;
  text-align: center;
  color: #D3AF59;
  margin: 25px auto 0;
  position: relative;
  text-align: center;
}
.advantages a:before {
  content: "";
  right: -17px;
  position: absolute;
  top: 8px;
  width: 11px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}

.faq {
  padding: 75px 0;
}
.faq .top-text {
  margin: 0 0 25px;
}
.faq .top-text b {
  position: relative;
  padding: 0 0 0 40px;
  color: #141F1B;
  display: table;
  margin: 0 0 10px;
}
.faq .top-text b:before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
}
.faq .top-text h2, .faq .top-text h3, .faq .top-text h4, .faq .top-text h5, .faq .top-text h6 {
  font-size: 50px;
  line-height: 50px;
}
.faq .questions {
  border: 1px solid #EBEBEB;
  border-radius: 16px;
  background: rgba(250, 250, 250, 0.2784313725);
  overflow: hidden;
}
.faq .questions li {
  color: #141F1B;
  border-bottom: 1px solid #EBEBEB;
  transition: background 0.3s ease-in-out;
}
.faq .questions li:last-child {
  border-bottom: none;
}
.faq .questions li .question {
  padding: 20px 55px 20px 25px;
  cursor: pointer;
  position: relative;
  font-size: 18px;
  line-height: 24px;
  transition: all 0.3s ease-in-out;
}
.faq .questions li .question:hover {
  background: rgba(255, 255, 255, 0.7);
}
.faq .questions li .question:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%) rotate(90deg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease-in-out;
}
.faq .questions li .answer {
  display: none;
  padding: 0 25px 25px;
  color: #141F1B;
  line-height: 26px;
}
.faq .questions li.active {
  background: rgba(255, 255, 255, 0.4901960784);
}
.faq .questions li.active .question {
  font-weight: 600;
}
.faq .questions li.active .question:after {
  transform: translateY(-50%) rotate(-90deg);
}

@media only screen and (max-width: 991.5px) {
  .video-banner {
    min-height: 50vh;
  }
  .text-sec-img .text h2, .text-sec-img .text h3, .text-sec-img .text h4, .text-sec-img .text h5, .text-sec-img .text h6 {
    font-size: 40px;
    line-height: 45px;
  }
  .reviews h2, .reviews h3, .reviews h4, .reviews h5, .reviews h6 {
    font-size: 40px;
    line-height: 45px;
  }
  .reviews .review-item {
    flex: 1 1 calc(50% - 13px);
    max-width: calc(50% - 13px);
  }
  .img-bg-bottom h2, .img-bg-bottom h3, .img-bg-bottom h4, .img-bg-bottom h5, .img-bg-bottom h6 {
    font-size: 40px;
    line-height: 45px;
  }
}
@media only screen and (max-width: 767.5px) {
  .video-banner {
    min-height: 100vh;
  }
  .video-banner .breadcrumbs {
    margin: 0 0 100px;
  }
  .video-banner .top-text h1 {
    font-size: 42px;
    line-height: 46px;
  }
  .video-banner .top-text .btn-default {
    padding: 10px 15px !important;
  }
  .text-sec-img {
    padding: 50px 0;
  }
  .text-sec-img.bg-green img {
    margin: 25px 0 0 auto;
  }
  .text-sec-img .text h2, .text-sec-img .text h3, .text-sec-img .text h4, .text-sec-img .text h5, .text-sec-img .text h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .text-sec-img img {
    margin: 25px 0 0 0;
  }
  .reviews {
    padding: 50px 0;
  }
  .reviews h2, .reviews h3, .reviews h4, .reviews h5, .reviews h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .reviews .review-items {
    margin: 35px 0 0;
  }
  .reviews .review-item {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 20px;
    font-size: 14px;
  }
  .img-bg-bottom {
    padding: 50px 0;
  }
  .img-bg-bottom h2, .img-bg-bottom h3, .img-bg-bottom h4, .img-bg-bottom h5, .img-bg-bottom h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .img-bg-bottom .img-wrapper {
    margin: 50px 0 0 0;
  }
  .img-bg-bottom .img-wrapper img:not(.beeldmerk) {
    max-width: 200px;
    bottom: initial;
    top: -15px;
  }
  .advantages {
    padding: 50px 0;
  }
  .advantages h2, .advantages h3, .advantages h4, .advantages h5, .advantages h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .advantages ul li {
    max-width: 100%;
  }
  .advantages ul li strong {
    font-size: 26px;
  }
  .faq {
    padding: 50px 0;
  }
  .faq .top-text h2, .faq .top-text h3, .faq .top-text h4, .faq .top-text h5, .faq .top-text h6 {
    font-size: 32px;
    line-height: 36px;
  }
  .faq .questions li .question {
    padding: 15px 45px 15px 18px;
  }
  .faq .questions li .question:after {
    right: 18px;
  }
  .faq .questions li .answer {
    padding: 0 18px 18px;
  }
}
/*@import 'pages/cart-modal.scss';*/
/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - teamkaarten (about.aspx)
   Alleen de .person-kaart zelf. De omliggende onderdelen staan elders en
   worden gedeeld: .section/.section--tinted, .section-head, .eyebrow, .lead,
   .container-sr, .grid en .grid--3 in default.scss, .cta-band in
   pages/home.scss, .reveal in _animations.scss.
   Zie docs/lijsten/Team.md voor de lijst waar de kaarten uit komen en
   docs/CMS-CONTENT-about.md voor de vaste teksten van de pagina.
   ========================================================================== */
.team-sec {
  background: #fff;
}

.person {
  text-align: left;
}

.person__photo {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  margin-bottom: var(--sp-4);
}

/* Subtiele actie rechtsonder op de foto */
.person__cta {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  gap: 0.45rem;
}

.person__book {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold-500);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.15s var(--ease);
}

.person__book:hover {
  background: var(--gold-500);
  color: #fff;
  transform: translateY(-2px);
}

.person__iconbtn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold-500);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.15s var(--ease);
}

.person__iconbtn:hover {
  background: var(--gold-500);
  color: #fff;
  transform: translateY(-2px);
}

/* Globe-icoon (website-knop): Resources/img/sr/globe.svg heeft geen eigen kleur
   en zou als <img> altijd zwart zijn. Als mask op currentColor krijgt het
   dezelfde goud/wit-wissel als de inline svg's van de andere knoppen. */
.person__ico-globe {
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask: url("/Resources/img/sr/globe.svg") center/contain no-repeat;
  mask: url("/Resources/img/sr/globe.svg") center/contain no-repeat;
}

/* De portretkaders zijn staand, de foto's uit de studio zijn liggend. Met
   object-position iets hoger dan het midden blijft het gezicht in beeld in
   plaats van de kin. Het <picture> eromheen moet het kader helemaal vullen,
   anders bepaalt de foto zelf de hoogte. */
.person__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* Let op de specificiteit: default.scss heeft ".section h1, .section h2,
   .section h3" (0,1,1) en dat verslaat een kale .person__name (0,1,0) op zowel
   font-size als margin. Vandaar hier via .section, anders doet deze regel niets. */
.section .person__name {
  font-size: 1.2rem;
  margin: 0 0 0.15rem;
}

.person__role {
  font-size: var(--fs-sm);
  color: var(--gold-text);
  font-weight: 500;
}

/* De bron gebruikt hier var(--text-soft); die token bestaat in dit project niet,
   var(--muted) is het equivalent.
   De bio komt uit TinyMCE (LijstItems.sDescription) en bevat zelf <p>-tags;
   daarom is de wrapper in about.aspx een <div>, geen <p>. Als <p> sloot de
   browser hem meteen bij de geneste <p>, waardoor de tekst buiten .person__bio
   viel en zwart (body-kleur) werd i.p.v. dit grijs. */
.person__bio {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--sp-3);
}

.person__bio p {
  margin: 0;
}

.person__bio p + p {
  margin-top: var(--sp-2);
}

/* Mobiel: twee kaarten naast elkaar (was een, via de auto-fit van .grid--3 met
   280px minimum). Op 375px is een kaart dan ~160px breed; de knoppen op de
   foto passen daar alleen als de afspraakknop, net als mail en telefoon, een
   rondje met alleen het icoon wordt - de tekst blijft voor schermlezers
   bestaan (.person__book-tekst, visueel verborgen). Kop en tekst een maat
   kleiner, anders breekt bijna elke naam op twee regels. .team-grid staat op
   de grid zelf in about.aspx, want de sectie eromheen wisselt van class
   (team-sec / section--tinted, about.aspx.vb) en is dus geen vaste haak. */
@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .team-grid .person__cta {
    right: 0.5rem;
    bottom: 0.5rem;
    gap: 0.35rem;
  }
  .team-grid .person__book {
    width: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .team-grid .person__book-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .section .team-grid .person__name {
    font-size: 1.05rem;
  }
  .team-grid .person__role,
  .team-grid .person__bio {
    font-size: var(--fs-xs);
  }
}
/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - contactpagina (Contact.aspx)
   .page-hero, .section(--tight), .grid, .btn*, .microcopy staan sitebreed in
   default.scss / _buttons.scss. Dit bestand bevat alleen wat uniek is voor
   deze pagina: de contactgegevens-kolom en de contactkaart met het formulier.
   Zie docs/CMS-CONTENT-contact.md voor de CMS-tekst in de hero (ltl01).
   ========================================================================== */
.contact-sec {
  background: #fff;
}
.contact-sec .map-frame {
  margin-top: 25px;
}
.contact-sec .company-info {
  font-size: var(--fs-xs);
  margin-top: var(--sp-6);
  color: var(--muted);
}
.contact-sec .company-info strong {
  color: var(--gold-text);
  font-weight: 600;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-cta .btn {
  min-width: 230px;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- Contactgegevens (linkerkolom, uit ltl10) ----------
   De CMS-tekst gebruikt de bron-structuur: <ul class="info-list"> met per
   <li> een <span class="info-list__label"> (TinyMCE wikkelt er een <strong>
   omheen), <span class="info-list__value"> en eventueel <a class="link-arrow">
   — maar zónder de inline-SVG's van de bron. De iconen komen daarom uit CSS:
   zelfde mask-techniek als .trustbar__inner li:nth-child in pages/home.scss,
   met een badge-vlak erachter (::before) voor het "gouden vierkantje" i.p.v.
   het bron-<span class="info-list__icon">. Wijzigt de volgorde van de <li>'s
   in het CMS, dan verschuiven de iconen mee. Zie docs/CMS-CONTENT-contact.md. */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  position: relative;
  min-height: 42px;
  padding-left: calc(42px + var(--sp-4));
  margin-bottom: var(--sp-5);
  /* Losse tekst in een <li> (de "binnen 30 minuten"-regel bij WhatsApp)
     rendert als microcopy; label en waarde zetten hieronder hun eigen maat. */
  font-size: var(--fs-xs);
  color: var(--muted);
}

.info-list__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  /* neutraliseert de <strong> die TinyMCE om het label zet */
  font-weight: 400;
}

.info-list__value {
  font-size: var(--fs-body);
  color: var(--ink);
  font-weight: 500;
}

.info-list__value a {
  color: inherit;
  text-decoration: none;
}

.info-list__value a:hover {
  color: var(--gold-text);
}

/* De CMS-link-arrow heeft geen inline-SVG zoals die op Default.aspx; de pijl
   komt dan uit een mask, met dezelfde hover-verschuiving als het bron-svg'tje. */
.link-arrow:not(:has(svg))::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
}

.link-arrow:not(:has(svg)):hover::after {
  transform: translateX(4px);
}

.info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--gold-50);
}

.info-list li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 20px;
  height: 20px;
  background: var(--gold-500);
}

/* 1. Adres */
.info-list li:nth-child(1)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 2. Parkeren */
.info-list li:nth-child(2)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M9.5 17V7h4a3 3 0 0 1 0 6h-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M9.5 17V7h4a3 3 0 0 1 0 6h-4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 3. Telefoon */
.info-list li:nth-child(3)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 4. WhatsApp */
.info-list li:nth-child(4)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 5. E-mail */
.info-list li:nth-child(5)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Knoppenrij + microcopy (ltl15, in .contact-cta) ----------
   CMS-tekst: <div class="btn-row mt-7"> met .btn.btn--primary (afspraak) en
   .btn.btn--outline (bellen) — die classes bestaan al in _buttons.scss, dus
   hier alleen wat de CMS-versie mist t.o.v. de bron: het telefoonicoon in de
   belknop (de bron heeft daar een inline-SVG, de CMS-knop niet) en de kale
   <ul> eronder die als microcopy-regel met groene vinkjes rendert. */
.contact-cta .btn--outline::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* De kale <ul> onder de knoppen: geen opsomming maar de microcopy-regel uit de
   bron (<p class="microcopy"> met spans); horizontaal, klein en gedempt, met
   het groene vinkje uit een mask per <li>. */
.contact-cta ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  padding: 0;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 35px;
}

.contact-cta ul li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.contact-cta ul li::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--cta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Openingstijden (openingstijden.ascx) ----------
   De control rendert een kale <table> zonder class en zonder <th> (twee
   <td>'s per rij: dag, tijd); Contact.aspx wikkelt hem in <div class="hours">.
   "Vandaag" krijgt class="active" van de control zelf
   (openingstijden.ascx:8), niet van onze code-behind. */
.hours table {
  width: calc(100% + 1.4rem);
  margin-inline: -0.7rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}

.hours td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  font-weight: 400;
  color: var(--muted);
}

.hours td:last-child {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
}

.hours tr.active td {
  color: var(--gold-700);
  font-weight: 600;
  background: var(--gold-50);
  border-bottom-color: transparent;
}

.hours tr.active td:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.hours tr.active td:last-child {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.map-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-3);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* ---------- Formulier ---------- */
.form {
  display: grid;
  gap: var(--sp-4);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}

/* een veld met een hint eronder mag de invoervelden ernaast niet omlaag duwen */
.form__row .field {
  align-content: start;
}

@media (max-width: 560px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}
.field {
  display: grid;
  gap: 0.2rem;
}

.field label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(174, 139, 51, 0.14);
}

/* Het pijltje dat de browser zelf in een keuzelijst zet is op elk systeem
   anders. Daarom een eigen chevron in dezelfde goudtint als de rest van de
   site. Dit is de terugval zonder JS; met JS bouwt keuzelijst.js er de eigen
   .keuze-component omheen (verderop in dit bestand). */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ae8b33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------- Eigen keuzelijst (.keuze) ----------
   Resources/js/keuzelijst.js bouwt rond elke <select> in een .field een eigen
   knop + lijst (uitleg daar); het echte <select> blijft onzichtbaar in de
   wrapper staan en verstuurt de waarde. De knop oogt als de andere velden
   (zelfde rand, radius en focusring als .field input hierboven); de open
   lijst is een kaart eronder met het gekozen antwoord aangevinkt en het
   actieve antwoord (muis of pijltjestoetsen) op een zachte goudtint. */
.keuze {
  position: relative;
}

/* Niet display:none: formValidation (validations.js) slaat :hidden-velden
   over bij revalidateField. Zo blijft het veld voor jQuery zichtbaar, maar
   ziet en raakt niemand het. */
.keuze select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Padding en regelhoogte gelijk aan wat de invoervelden hiernaast echt
   renderen: die krijgen via de sitebrede .form-group .form-control-regel
   (main.scss) 15px padding en een normale regelhoogte, geen 0.85rem/1.7. */
.keuze__knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 15px;
  line-height: normal;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(58, 45, 18, 0.04);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.keuze__knop:hover {
  border-color: var(--gold-300);
}

.keuze__knop:focus-visible,
.keuze.is-open .keuze__knop {
  outline: 0;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(174, 139, 51, 0.14);
}

.keuze__waarde {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keuze__pijl {
  flex: none;
  color: var(--gold-500);
  transition: transform var(--dur) var(--ease);
}

.keuze.is-open .keuze__pijl {
  transform: rotate(180deg);
}

.keuze__lijst {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh-md);
  max-height: 280px;
  overflow-y: auto;
}

.keuze__lijst[hidden] {
  display: none;
}

.keuze__optie {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  line-height: normal;
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}

.keuze__optie.is-actief {
  background: var(--gold-100);
}

/* Het vinkje neemt bij elk antwoord ruimte in, zodat de teksten onder elkaar
   uitlijnen; alleen bij het gekozen antwoord is het zichtbaar. */
.keuze__vink {
  flex: none;
  color: var(--ink);
  visibility: hidden;
}

.keuze__optie[aria-selected=true] .keuze__vink {
  visibility: visible;
}

/* Bij een optioneel veld hoort een teken dat het niet verplicht is. Een
   sterretje bij alle andere velden zou drukker staan dan dit ene labeltje. */
.field__opt {
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--muted);
  opacity: 0.75;
}

.form-error {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  background: #fdf0ec;
  border: 1px solid #f0c6b8;
  color: #8a3216;
  font-size: var(--fs-sm);
}

/* Privacy-akkoord. cbPrivacy2.Text (Contact.aspx.vb) zet zelf de link naar de
   voorwaardenpagina, dus hier alleen de vorm. */
.check {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.check input {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  accent-color: var(--gold-500);
  flex: none;
}

.check a {
  color: var(--gold-text);
}

/* Contactkaart met het formulier. Deze kaart mag meer aandacht krijgen dan een
   gewone zijbalk: dit is de plek op de pagina waar iemand echt iets doet.
   Vandaar de warme ondergrond en de lichte schaduw; het goud zit verder alleen
   nog in het envelopje en verschijnt pas bij hover/focus op de velden. */
.contactcard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.contactcard .btn.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.contactcard .btn.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}

@media (max-width: 560px) {
  .contactcard {
    padding: var(--sp-5);
  }
}
.contactcard__head {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.contactcard__head h2 {
  font-size: 1.5rem;
  margin: 0;
}

.contactcard__head p {
  margin: 0.35rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.contactcard__ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  color: var(--gold-500);
  display: grid;
  place-items: center;
}

.contactcard .form {
  margin-top: var(--sp-6);
}

.contactcard .field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Twee velden naast elkaar delen hun labelregel. Zodra één label over twee
   regels loopt (Telefoonnummer met een hint eronder) zou het invoerveld
   eronder anders lager komen te staan dan zijn buurman. */
.contactcard .form__row {
  grid-template-rows: auto auto;
}

.contactcard .form__row .field {
  grid-row: span 2;
  row-gap: 0.2rem;
}

.contactcard .field input,
.contactcard .field select,
.contactcard .field textarea {
  border-color: var(--line);
  box-shadow: inset 0 1px 2px rgba(58, 45, 18, 0.04);
  caret-color: var(--gold-500);
}

.contactcard .field input:hover,
.contactcard .field select:hover,
.contactcard .field textarea:hover {
  border-color: var(--gold-300);
}

.contactcard .field input:focus,
.contactcard .field select:focus,
.contactcard .field textarea:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(174, 139, 51, 0.14);
}

.contactcard .field textarea {
  min-height: 150px;
}

.contactcard .field input::placeholder,
.contactcard .field textarea::placeholder {
  color: #8d8571;
}

.contactcard__send {
  margin-top: var(--sp-2);
}

.contactcard__foot {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* Registratienummers onder de openingstijden. Zelfde classnamen als de bron
   gebruikt (ook al staan ze hier niet in de footer) — scheelt een tweede naam
   voor hetzelfde soort regel. */
.footer__reg {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.7;
  margin-top: var(--sp-4);
}

.reg-nr {
  color: var(--gold-text);
  font-weight: 600;
}

/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - behandelingenoverzicht (behandelingen.aspx)
   Port van de .card-blokken uit het ontwerp (style.css "Kaarten"). De pagina
   zelf gebruikt verder .page-hero--tekst, .section--tight, .section-head en
   .grid--3 uit default.scss en .link-arrow uit _buttons.scss.
   Data: docs/CMS-CONTENT-behandelingen.md (overzichtspagina).
   ========================================================================== */
/* De bron heeft een witte body; onze body is nog het oude #EBDECD (main.scss).
   Net als .expertise-sec/.lab-sec op de homepage krijgt elk categorieblok
   daarom zelf wit, anders schemert de oude kleur tussen page-hero en cta-band. */
.behandelingen-sec {
  background: #fff;
}

/* De bron gebruikt auto-fit: bij 1 of 2 kaarten rekken die op tot de volle
   breedte. Hier auto-fill, zodat lege kolommen blijven staan en een blok met 1
   of 2 behandelingen dezelfde kaartbreedte houdt als een blok met 3 - dat oogt
   rustiger onder elkaar. Zelfde minimum (280px) en gap als .grid--3. */
.behandelingen-sec .grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--gold-200);
}

.card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-3);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Let op de specificiteit: default.scss heeft ".section h3" (0,1,1); daarom via
   .section, anders wint die op font-size en margin (zelfde truc als team.scss). */
.section .card__title {
  font-size: 1.25rem;
  margin: 0 0 var(--sp-2);
}

/* De bron gebruikt var(--text-soft); die token bestaat hier niet, --muted is het equivalent. */
.card__text {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--sp-4);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* De prijs onder in een behandelkaart: zwart en dikgedrukt leest als het bedrag;
   "Vanaf", "per sessie" en "(i.p.v. €125)" blijven licht (.prijs__zacht). */
.card__price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.5rem;
  margin-bottom: var(--sp-2);
}

.prijs__zacht {
  font-weight: 400;
  color: var(--muted);
}

/* De hele kaart klikbaar via de link in de voet */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - behandeling-detailpagina
   (behandeling-detail.aspx, 1-op-1 behandelingen/phi-ion-plasmalift.html)

   Port van de bron-blokken (style.css): kruimelpad, page-hero--facts +
   factstrip + specialistenportret, layout-sidebar (prose/notes/usps/sidecard),
   stappenkaarten, prijsblok (price-split/pricecard/pricetable/notice) en de
   FAQ-accordeon. Gedeeld met de rest van de site: .page-hero, .section*,
   .section-head, .eyebrow, .lead, .grid--3, .cat-card, .btn*, .microcopy,
   .prijs__zacht (pages/behandelingen.scss).
   De bron gebruikt var(--text-soft); die token bestaat hier niet, --muted is
   het equivalent (zelfde afspraak als team.scss/behandelingen.scss).
   ========================================================================== */
/* ---------- Kruimelpad ----------
   Eigen naam (.kruimels) omdat de sitebrede .breadcrumbs (main.scss) nog de
   oude huisstijl draagt (ul met groen bolletje); dit is de bron-variant met
   een <ol> en schuine strepen. */
.kruimels {
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-block: var(--sp-4);
  background: #fff;
}

.kruimels ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.kruimels li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kruimels li + li::before {
  content: "/";
  color: var(--line);
}

.kruimels a {
  color: var(--muted);
  text-decoration: none;
}

.kruimels a:hover {
  color: var(--gold-text);
}

/* ---------- Hero met feitenbalk ---------- */
.page-hero--facts .page-hero__inner {
  padding-bottom: var(--sp-6);
  align-items: stretch;
}

.page-hero--facts .page-hero__media {
  display: flex;
  min-height: 340px;
}

.page-hero--facts .page-hero__media .frame {
  flex: 1;
}

.page-hero--facts .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* zonder foto (die komt straks uit het CMS) toont het frame de rustige ondergrond */
.page-hero--facts .page-hero__media .frame {
  background: var(--surface-3);
}

/* De kale <ul> in de hero-tekst (straks CMS) is de checklist uit de bron,
   geen opsomming met vinkje-bolletjes uit .rich-text (home.scss). */
.page-hero--facts .rich-text > ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
}

.page-hero--facts .rich-text > ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.page-hero--facts .rich-text > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ae8b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* Knoppen: <a class="btn-default"> in een kale <p> in de editor-tekst; de
   knoppenregel-layout komt van .page-hero .rich-text p:has(> a.btn-default)
   (default.scss). Hier alleen de kleuren op volgorde, zoals de home-hero. */
.page-hero--facts .rich-text .btn-default:nth-of-type(1) {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.page-hero--facts .rich-text .btn-default:nth-of-type(1):hover, .page-hero--facts .rich-text .btn-default:nth-of-type(1):focus-visible, .page-hero--facts .rich-text .btn-default:nth-of-type(1):active {
  animation: none;
}
.page-hero--facts .rich-text .btn-default:nth-of-type(1):hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.page-hero--facts .rich-text .btn-default:nth-of-type(1):active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--facts .rich-text .btn-default:nth-of-type(1) {
    animation: none !important;
  }
  .page-hero--facts .rich-text .btn-default:nth-of-type(1):hover {
    transform: none;
  }
}

.page-hero--facts .rich-text .btn-default:nth-of-type(2) {
  border: 1px solid rgb(205, 198, 182);
  background: transparent;
}

.page-hero--facts .rich-text .btn-default:nth-of-type(2):hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}

/* checklist: vinkjes in een rondje (hero en usps) */
.checklist {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
}

.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ae8b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

@media (max-width: 639px) {
  .checklist li {
    font-size: 0.8rem;
    padding-left: 1.5rem;
    margin-bottom: var(--sp-2);
  }
  .checklist li::before {
    width: 16px;
    height: 16px;
    top: 0.3rem;
    background-size: 10px;
  }
}
/* feitenbalk onder de hero */
.factstrip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin-bottom: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}

.factstrip__item {
  position: relative;
  min-width: 0;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-5);
}

.factstrip__item + .factstrip__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line);
}

.factstrip__ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  color: var(--gold-500);
}

.factstrip__tekst {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.factstrip__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.factstrip__value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: break-word;
}

@media (min-width: 1001px) {
  .factstrip:has(.specialists__avatars:not([data-aantal="1"])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  }
}
@media (max-width: 1000px) {
  .factstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .factstrip__item:nth-child(odd)::before {
    display: none;
  }
  .factstrip__item:nth-child(n+3) {
    border-top: 1px solid var(--line-2);
  }
}
@media (max-width: 560px) {
  .factstrip {
    grid-template-columns: minmax(0, 1fr);
  }
  .factstrip__item::before {
    display: none;
  }
  .factstrip__item + .factstrip__item {
    border-top: 1px solid var(--line-2);
  }
}
/* portret van de specialist in de feitenbalk: het rondje is het venster, de
   foto staat er vergroot achter zodat het gezicht het beeld vult (bron) */
.specialists__avatars {
  display: flex;
  flex: none;
  gap: 6px;
}

.specialists__avatars picture {
  display: block;
  flex: none;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: var(--sh-md);
  outline: 1px solid var(--gold-100);
  outline-offset: -3px;
  background: var(--surface-3);
}

.specialists__avatars picture img {
  display: block;
  width: 165%;
  height: auto;
  max-width: none;
  margin: -13% 0 0 -32.5%;
}

.specialists__avatars > img {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: var(--sh-md);
  background: var(--surface-3);
}

.specialists__avatars[data-aantal="2"] picture,
.specialists__avatars[data-aantal="2"] > img {
  width: 54px;
  height: 54px;
}

/* ---------- Inhoud + zijbalk ---------- */
.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 980px) {
  .layout-sidebar {
    grid-template-columns: 1fr;
  }
}
/* lopende tekst; de <ul>'s zijn kaal (TinyMCE) en krijgen het gouden bolletje */
.prose h2 {
  margin-top: var(--sp-7);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--sp-6);
}

/* De sitebrede legacy-reset (main.scss: "p { margin: 0 }") zet elke <p>-marge
   op 0 - voor kale, meeralinea CMS-tekst (TinyMCE) hoort er juist ruimte
   tussen de alinea's te zitten, zoals de bron (p { margin: 0 0 var(--sp-4) })
   sitebreed doet. Kleur was hier var(--muted) - dat hoort bij .prose--legal
   in de bron, niet bij deze gewone lopende tekst (die krijgt daar geen eigen
   kleur, dus gewoon de standaard-inkt). */
.prose p {
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}

.prose ul {
  padding-left: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--sp-2);
  color: var(--muted);
}

/* Een naam/kernwoord in een opsomming (bv. "Drs. Shirin Rostainejad, BIG-nummer
   ...") mag niet in hetzelfde gedempte grijs verdwijnen als de rest van de
   regel - <strong> krijgt daarom gewoon de standaard-inkt, niet var(--muted). */
.prose ul li strong {
  color: var(--ink);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.75rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

.prose ol li {
  color: var(--muted);
}

.prose ol li::marker {
  color: var(--gold-500);
  font-weight: 600;
}

/* aandachtspunten vooraf */
.notes {
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.notes__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-800);
  margin: 0 0 var(--sp-4);
}

.notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notes li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.notes li:last-child {
  margin-bottom: 0;
}

.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ae8b33' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='16.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.notes li strong {
  color: var(--gold-800);
}

/* De titel is een kale <strong> (zo slaat de editor vet op; <b> ook herkend);
   zelfde gezicht als .notes__title uit de bron */
.notes > strong, .notes > b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--gold-800);
  margin: 0 0 var(--sp-4);
}

@media (max-width: 639px) {
  .notes {
    padding: var(--sp-4);
  }
  .notes__title {
    font-size: 1rem;
    margin-bottom: var(--sp-3);
  }
  .notes li {
    font-size: 0.94rem;
    padding-left: 1.6rem;
  }
}
/* pluspunten onder de tekst, twee kolommen. Kop = kale <b>, punten = kale <ul>
   (straks CMS); zelfde gezicht als .usps h3 + .checklist--cols uit de bron. */
.usps {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.usps strong {
  font-weight: 400;
  font-family: var(--font-display);
}

.usps > strong, .usps > b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}

.usps > ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-6);
  margin: var(--sp-4) 0 0;
}

.usps > ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.usps > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ae8b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

@media (max-width: 560px) {
  .usps > ul {
    grid-template-columns: 1fr;
  }
}
/* zijkaart met prijs en afspraakknop; plakt onder de menubalk */
.sidecard {
  /* de foto's van de specialisten (.sidecard__spec-fotos) lopen met een
     negatieve marge tot de kaartrand; die marge leest deze variabele */
  --sidecard-pad: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sidecard-pad);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.sidecard .btn-default {
  margin: 20px 0;
}

@media (max-width: 400px) {
  .sidecard {
    --sidecard-pad: var(--sp-5);
    padding: var(--sidecard-pad);
  }
  .sidecard .btn, .sidecard .btn-default {
    padding-inline: 1rem;
  }
}
.sidecard h3 {
  font-size: 1.2rem;
}

.sidecard p {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* De afspraakknop: btn-default over de volle breedte, in het actiegroen */
.sidecard .btn-default {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.sidecard .btn-default:hover, .sidecard .btn-default:focus-visible, .sidecard .btn-default:active {
  animation: none;
}
.sidecard .btn-default:hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.sidecard .btn-default:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sidecard .btn-default {
    animation: none !important;
  }
  .sidecard .btn-default:hover {
    transform: none;
  }
}

.sidecard__price,
.sidecard p.sidecard__price {
  font-family: var(--font-body);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--gold-text);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}

.sidecard__price .prijs__bij {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.sidecard__price .prijs__bedrag {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.sidecard hr {
  margin: var(--sp-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Specialisten bovenin de zijkaart, naar het ontwerp van de klant (2026-09-16).
   De teamfoto('s) lopen tot de randen van de kaart (negatieve marge = de
   kaartpadding, vandaar --sidecard-pad op .sidecard); daaronder de eyebrow
   "Uw chirurg" / "Uw cosmetisch artsen", de na(a)m(en) in de display-letter
   en goud, en dan óf de korte bio (één specialist) óf "Cosmetisch artsen,
   {behandeling}" (meer). Het grid maakt vanzelf evenveel kolommen als er
   foto's zijn; data-aantal (behandeling-detail.aspx.vb) stuurt alleen de
   verhouding: één foto breed, twee staand, drie of vier smaller. */
.sidecard__specialisten {
  margin-bottom: var(--sp-5);
}

.sidecard__spec-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 3px;
  margin: calc(-1 * var(--sidecard-pad)) calc(-1 * var(--sidecard-pad)) var(--sp-5);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  overflow: hidden;
  background: var(--line);
}

.sidecard__spec-fotos img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
}

.sidecard__spec-fotos[data-aantal="1"] img {
  aspect-ratio: 11/10;
}

.sidecard__spec-fotos[data-aantal="3"] img,
.sidecard__spec-fotos[data-aantal="4"] img {
  aspect-ratio: 2/3;
}

.sidecard p.sidecard__spec-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.sidecard p.sidecard__spec-namen {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gold-text);
  margin: 0 0 0.35rem;
}

.sidecard p.sidecard__spec-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

.sidecard__spec-bio {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-3);
}

.sidecard__spec-bio p {
  margin: 0 0 0.35rem;
}

.sidecard__spec-bio p:last-child {
  margin-bottom: 0;
}

/* lege regel (bio bij meer specialisten, subregel bij één) neemt geen ruimte */
.sidecard p.sidecard__spec-sub:empty,
.sidecard__spec-bio:empty {
  display: none;
}

/* Twee korte geruststellende regeltjes ("Altijd eerst een gratis consult",
   "Gratis parkeren voor de deur") onderin de Zijkaart-tekst - kale <ul><li>
   uit de editor, geen class nodig (editors leveren alleen kale tekst, zie
   docs/sql/behandeling-detail-cryopen.sql). Scope op .sidecard .rich-text
   zodat .sidecard__contact (de eigen <ul> met telefoon/WhatsApp) hierbuiten
   blijft. Zet position/padding-left/margin expliciet terug: .rich-text ul li
   (home.scss) is de sitebrede "checklist"-vormgeving (ronde goudkring,
   position: absolute, padding-left: 2rem, margin-bottom) - die past hier niet,
   dit wordt juist een compacte rij i.p.v. een opsomming. */
.sidecard .rich-text ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.sidecard .rich-text ul li {
  position: static;
  padding-left: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  font-size: inherit;
}

.sidecard .rich-text ul li::before {
  content: "";
  position: static;
  border-radius: 0;
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--cta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sidecard__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.sidecard__contact li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.sidecard__contact svg {
  color: var(--gold-500);
  flex: none;
}

.sidecard__contact a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
}

.sidecard__contact a:hover {
  color: var(--gold-text);
}

/* prijsteksten (prijs__zacht staat in pages/behandelingen.scss) */
.prijs__bij {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

.prijs__bedrag {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--gold-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Stappenkaarten ("Zo werkt het") ----------
   Eén kale <ul> (straks één editor): per <li> de titel als <strong>, daarna de
   tekst. Elke <li> rendert als de genummerde kaart uit de bron (.cat-card met
   .cat-card__icon); het nummer komt uit de li-teller, dus de tekst zelf blijft
   vrij van markup. De scroll-animatie uit de bron (.stap-scroll) is een
   JS-vervolgstap; de kaarten staan nu stil op hun plek. */
.stappen ul {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: stap;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.stappen li {
  position: relative;
  counter-increment: stap;
  /* Gewoon blok (was een flex-kolom): zo kan het nummer (::before) links
     floaten naast de titel i.p.v. er verplicht boven te staan. */
  display: block;
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.6;
}

/* Het dunne gouden lijntje tussen de nummers, uit het ontwerp
   (.stap-scroll:not(:first-child)::after) - daar hangt de lengte nog aan de
   scrollpositie (--stap-p), hier gewoon vast: alleen op brede schermen, waar
   de kaarten echt naast elkaar staan (bij .grid--auto-fit met min. 280px per
   kaart passen 3 pas comfortabel vanaf hier). Hoogte staat op het hart van
   het nummerblokje: padding-top (--sp-6) plus de halve hoogte van 48px. */
@media (min-width: 900px) {
  .stappen li:not(:first-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--sp-6) + 24px);
    left: calc(-1 * var(--sp-5));
    width: var(--sp-5);
    height: 2px;
    background: var(--gold-300);
  }
}
.stappen li::before {
  content: counter(stap);
  float: left;
  width: 48px;
  height: 48px;
  margin: 0 var(--sp-4) 0 0;
  border-radius: var(--r-md);
  background: var(--gold-50);
  color: var(--gold-500);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
}

/* De titel (editors leveren <strong>) staat naast het nummer, verticaal in het
   midden van die 48px; de tekst erna begint daardoor onder het nummer. */
.stappen li > strong, .stappen li > b {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

/* De <br> die de editor na de titel zet: de titel is al een blok, dus die
   regelovergang zou hier een lege regel opleveren. */
.stappen li > strong + br, .stappen li > b + br {
  display: none;
}

/* ---------- Voor en na ----------
   Twee vaste afbeeldingen (Images/tussImages, sSoort 'Voor'/'Na'); geen editor
   nodig. De sectie verschijnt alleen als beide foto's er zijn. */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

@media (max-width: 640px) {
  .ba-grid {
    grid-template-columns: 1fr;
  }
}
.ba-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  margin: 0;
}

.ba-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.ba-item figcaption {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(58, 45, 18, 0.85);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
}

/* ---------- Prijsblok ---------- */
.price-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 860px) {
  .price-split {
    grid-template-columns: 1fr;
  }
}
.pricecard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

/* De consultknop onder de tabel: btn-default in het actiegroen (bron: btn--primary).
   Komt de knop straks als <p><a class="btn-default"> uit een editor, dan
   gedraagt die kale <p> zich als de gecentreerde knoppenregel uit de bron. */
.pricecard .btn-default {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.pricecard .btn-default:hover, .pricecard .btn-default:focus-visible, .pricecard .btn-default:active {
  animation: none;
}
.pricecard .btn-default:hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.pricecard .btn-default:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .pricecard .btn-default {
    animation: none !important;
  }
  .pricecard .btn-default:hover {
    transform: none;
  }
}

.pricecard p:has(> a.btn-default) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin: var(--sp-6) 0 0;
}

/* De prijstabel is een kale <table> uit de editor (TinyMCE-tabelknop): geen
   classes op table/tr/td. De bron-opmaak (.pricetable/.price) hangt daarom aan
   de vaste .table-scroll-wrapper; de laatste kolom is het bedrag. */
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table-scroll th, .table-scroll td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--ink-2);
}

.table-scroll th {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.table-scroll td:last-child:not(:first-child),
.table-scroll th:last-child:not(:first-child) {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pricecard .table-scroll tr:last-child td {
  border-bottom: 0;
}

.pricecard .table-scroll td:first-child {
  padding-left: 0;
}

.pricecard .table-scroll td:last-child {
  padding-right: 0;
}

/* Uitklapbare prijstabel (phPrijsAccordion in behandeling-detail.aspx): knop
   en paneel zijn dezelfde .accordion--prijs als op prijzen.aspx (opmaak in
   pages/prijzen.scss). Hier alleen wat de kaart eromheen anders maakt:
   - geen eigen bovenlijn en geen extra lucht boven de knop, de kaartrand en
     de kaartpadding zijn er al;
   - de vastgeplakte open knop krijgt de kaartkleur (wit) i.p.v. de getinte
     sectiekleur die .section--tinted .accordion--prijs 'm in prijzen.scss
     zou geven - de sectie is hier getint, de kaart niet. Drie classes, zodat
     deze regel wint van die in prijzen.scss (later geïmporteerd). */
.pricecard .accordion--prijs {
  border-top: 0;
}

.pricecard .accordion--prijs .accordion__btn {
  padding-top: 0;
}

.section--tinted .pricecard .accordion--prijs {
  --acc-bg: #fff;
}

.notice {
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.notice strong {
  color: var(--gold-800);
}

@media (max-width: 639px) {
  .notice {
    padding: var(--sp-4);
    font-size: 0.94rem;
  }
}
/* Kortingen/acties (ltlNotesKorting, "Korting tekst"): zelfde opzet als
   .notice hierboven, maar in het groen van de actiekleur - 1-op-1 uit het
   ontwerp (.notice--deal). */
.notice--deal {
  background: rgba(var(--cta-rgb), 0.05);
  border-color: rgba(var(--cta-rgb), 0.22);
}

.notice--deal strong {
  color: var(--cta-hover);
}

/* ---------- FAQ-accordeon ---------- */
.accordion {
  border-top: 1px solid var(--line);
}

.accordion__item {
  border-bottom: 1px solid var(--line);
}

.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  line-height: 1.35;
  transition: color var(--dur) var(--ease);
}

.accordion__btn:hover {
  color: var(--gold-text);
}

.accordion__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--gold-500);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.accordion__btn[aria-expanded=true] .accordion__icon {
  transform: rotate(45deg);
  background: var(--gold-50);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.accordion__panel.is-open {
  grid-template-rows: 1fr;
}

.accordion__inner {
  overflow: hidden;
}

.accordion__inner > div {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 52rem;
}

/* de kale <ul>'s in de antwoorden (TinyMCE): zelfde bolletje als .prose */
.accordion__inner ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.accordion__inner ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--sp-2);
}

.accordion__inner ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.7rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

/* ---------- Sectienavigatie ("Op deze pagina", opgebouwd door pagenav.js) -- */
.pagenav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line-2);
}

.pagenav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* alleen zijwaarts; anders vangt de balk het muiswiel af tijdens het scrollen */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0.55rem;
}

.pagenav__inner::-webkit-scrollbar {
  display: none;
}

.pagenav__label {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: var(--sp-2);
}

.pagenav__link {
  flex: none;
  white-space: nowrap;
  padding: 0.55rem 0.1rem;
  margin-right: var(--sp-4);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  background: linear-gradient(to right, var(--gold-500), var(--gold-500)) no-repeat 0 100%;
  background-size: 0% 2px;
  transition: color var(--dur) var(--ease), background-size 0.4s var(--ease);
}

.pagenav__link:hover {
  color: var(--gold-text);
}

.pagenav__link.is-active {
  color: var(--gold-800);
  background-size: 100% 2px;
}

@media (max-width: 800px) {
  .pagenav__label {
    display: none;
  }
}
/* ---------- Kleinigheden ---------- */
.container--narrow {
  max-width: var(--container-narrow);
}

.btn-row--slot {
  justify-content: center;
}

.mt-3 {
  margin-top: var(--sp-3);
}

/* ==========================================================================
   Onze kliniek
   Deelt .page-hero, .section(--tinted/--dark), .grid, .cat-card, .split en
   .cta-band met de rest van de site (default.scss / home.scss / about.scss).
   Hier alleen wat uniek is voor deze pagina: de foto-galerij en de lightbox
   die daarbij hoort.
   ========================================================================== */
/* De body is nog het oude #EBDECD (main.scss). De secties met --tinted/--dark
   zetten hun eigen achtergrond, maar de twee kale .section-blokken op deze
   pagina ("Zo verloopt een eerste afspraak" en "Ondernemen bij Skin Renew")
   niet - zonder deze klasse schemert de oude kleur erdoorheen. Zelfde
   oplossing als .behandelingen-sec/.team-sec elders. */
.onze-kliniek-sec {
  background: #fff;
}
.onze-kliniek-sec .stappen ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  /* Bij 150px minimum passen er op een telefoon nog net 2 kolommen
     naast elkaar (auto-fit rekent het zelf uit) - bij genummerde
     stappen ("Zo verloopt een eerste afspraak") is dat verwarrend:
     je leest dan 1-2 naast elkaar, dan 3 eronder. Onder elkaar,
     op volgorde, is voor een stappenlijst duidelijker. */
}
@media (max-width: 640px) {
  .onze-kliniek-sec .stappen ul {
    grid-template-columns: 1fr;
  }
}

/* ---------- Heroknoppen als btn-default -----------------------------------
   De knoppen zitten nu in ltl01 (PageItems, zie docs/sql/onze-kliniek-pageitems.sql):
   een kale <p> met btn-default-links; de rijlayout komt van
   .page-hero .rich-text p:has(> a.btn-default) (default.scss, geldt voor elke
   .page-hero). Hier alleen de kleuren op volgorde, geschoold via
   .page-hero--kliniek zodat about.aspx (ook plain .page-hero .rich-text
   .btn-default) niet meeliftend gekleurd wordt. Zelfde opzet als
   .page-hero--facts .rich-text .btn-default:nth-of-type() op
   behandeling-detail. */
.page-hero--kliniek .rich-text .btn-default:nth-of-type(1) {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--cta-rgb), 0.25);
  animation: knopKlik 6.5s ease-in-out 2.5s infinite;
  /* Safari-only: border-radius + een transform-animatie (knopKlik hierboven
     schaalt de knop even in/uit) laat Safari de afgeronde hoeken tijdens de
     animatie soms (deels) vierkant renderen - een bekend WebKit-euvel bij
     transform + border-radius op hetzelfde element. Deze mask-truc dwingt
     Safari de eigen border-radius alsnog netjes op de gecomposite laag toe
     te passen; in Chrome/Firefox heeft -webkit-mask-image geen effect (die
     negeren een onbekend prefix), dus geen aparte browser-check nodig. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.page-hero--kliniek .rich-text .btn-default:nth-of-type(1):hover, .page-hero--kliniek .rich-text .btn-default:nth-of-type(1):focus-visible, .page-hero--kliniek .rich-text .btn-default:nth-of-type(1):active {
  animation: none;
}
.page-hero--kliniek .rich-text .btn-default:nth-of-type(1):hover {
  background: var(--cta-hover);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--cta-rgb), 0.34);
  transform: translateY(-2px);
}
.page-hero--kliniek .rich-text .btn-default:nth-of-type(1):active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--kliniek .rich-text .btn-default:nth-of-type(1) {
    animation: none !important;
  }
  .page-hero--kliniek .rich-text .btn-default:nth-of-type(1):hover {
    transform: none;
  }
}

.page-hero--kliniek .rich-text .btn-default:nth-of-type(2) {
  border: 1px solid #cdc6b6;
  background: transparent;
  color: var(--ink);
}

.page-hero--kliniek .rich-text .btn-default:nth-of-type(2):hover {
  border-color: var(--gold-400);
  color: var(--gold-text);
  background: var(--gold-50);
}

/* ---------- Fotogalerij --------------------------------------------------- */
.galerij {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.galerij__item {
  margin: 0;
}

.galerij__knop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-3);
  line-height: 0;
}

.galerij__knop img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.galerij__knop:hover img {
  transform: scale(1.04);
}

.galerij__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.galerij__knop:hover .galerij__zoom, .galerij__knop:focus-visible .galerij__zoom {
  opacity: 1;
}

.galerij__item figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.4;
}

/* ---------- Foto vergroten ------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  /* Hier mag het wel donker: dit vlak bestaat om één foto te laten spreken en
     verdwijnt weer zodra de bezoeker hem gezien heeft. */
  background: rgba(25, 24, 20, 0.88);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__inner {
  margin: 0;
  max-width: min(100%, 1100px);
  text-align: center;
}

.lightbox__inner img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
  margin: 0 auto;
}

.lightbox__inner figcaption {
  margin-top: var(--sp-3);
  color: #f4ecd9;
  font-size: var(--fs-sm);
}

.lightbox__sluit, .lightbox__pijl {
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex: none;
}

.lightbox__sluit {
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-4);
  width: 44px;
  height: 44px;
}

.lightbox__pijl {
  width: 48px;
  height: 48px;
}

.lightbox__sluit:hover, .lightbox__pijl:hover {
  background: #fff;
  color: var(--gold-text);
}

@media (max-width: 640px) {
  .lightbox {
    padding: var(--sp-3);
    gap: var(--sp-2);
  }
  .lightbox__pijl {
    width: 40px;
    height: 40px;
  }
  .lightbox__inner img {
    max-height: 68vh;
  }
}
/* ---------- "Ondernemen bij Skin Renew" ------------------------------------
   Losse alinea onder de twee kaarten, gecentreerd zoals in de bron. */
.kliniek-samenwerken-lead {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* ---------- "Praktisch" (Parkeren/Adres/Openingstijden) --------------------
   Kale <ul> (ltl31, zie docs/sql/onze-kliniek-pageitems.sql): <strong> is de
   titel, het icoon komt op vaste li-positie uit CSS - zelfde techniek als de
   footer-contactkolom (footer.scss). Vaste volgorde: 1 parkeren, 2 adres,
   3 openingstijden; wisselt die volgorde in het CMS, dan verschuiven de
   iconen mee. */
.praktisch-lijst ul {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.praktisch-lijst ul li::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: var(--sp-3);
  background: var(--gold-500);
}

/* 1. Parkeren */
.praktisch-lijst li:nth-child(1)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M9.5 17V7h4a3 3 0 0 1 0 6h-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M9.5 17V7h4a3 3 0 0 1 0 6h-4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 2. Adres (pin) */
.praktisch-lijst li:nth-child(2)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 3. Openingstijden (klok) */
.praktisch-lijst li:nth-child(3)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat;
}

.praktisch-lijst li > strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

/* ==========================================================================
   Prijzen (prijzen.aspx)
   Deelt .page-hero(--tekst), .section, .section-head, .cta-band en de kale
   .accordion-skelet-classes (knop/paneel/icoon) met behandeling-detail.scss
   (FAQ-accordeon daar). Hier alleen wat uniek is: de prijs in de
   accordion-knop, de subtitel eronder, en de prijstabel zelf
   (pricetable__groep/hoofd/vervolg), die prijzen.aspx.vb met een
   StringBuilder opbouwt uit ArtikelVarianten - vandaar kale <table>-opmaak
   i.p.v. TinyMCE-output (dat is bij behandeling-detail.aspx wél het geval,
   zie de toelichting daar in behandeling-detail.scss).

   Bijna 1-op-1 overgenomen uit het ontwerp (public/assets/css/style.css,
   secties 14 en de prijstabel-paragraaf) - alle tokens hieronder (--gold-800,
   --gold-400, --ink-3, --muted, --surface(-2/-3), --header-h) bestonden al op
   deze site, dus geen nieuwe variabelen nodig.
   ========================================================================== */
/* Categoriekop: icoon + naam op één regel (clsBehandelingen.sCatIcoon +
   Item.sText), 1-op-1 uit het ontwerp - zelfde icoonset als cat-card__icon
   op Default.aspx, hier alleen groter en naast de tekst i.p.v. erboven. */
.section-head__met-icoon {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.section-head__met-icoon svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--gold-500);
}

@media (max-width: 560px) {
  .section-head__met-icoon svg {
    width: 22px;
    height: 22px;
  }
}
/* Korte omschrijving onder de behandelnaam (sAccordionSub): bewust klein en
   gedempt, zodat naam en prijs het aanzicht blijven bepalen. */
.accordion--prijs .accordion__btn > span:first-child:not(.accordion__icon) {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.accordion__sub {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
}

.accordion__sub:empty {
  display: none;
}

/* Het bijschrift ("Vanaf") staat een regel boven het bedrag, zodat alle
   bedragen op dezelfde plek eindigen en de prijskolom als kolom leest. */
.accordion__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  flex: none;
  font-family: var(--font-body);
  text-align: right;
}

/* Prijslijst-kop blijft plakken zolang de lijst openstaat, zodat je hem
   halverwege weer dicht kunt klikken zonder terug te scrollen. --acc-bg volgt
   de achtergrond van de sectie waarin de lijst staat (zie .prijzen-sec
   hieronder); zonder dekkende achtergrond zou de tabel eronder doorschemeren. */
.accordion--prijs {
  --acc-bg: var(--surface);
}

.accordion--prijs .accordion__btn {
  position: relative;
}

.accordion--prijs .accordion__btn[aria-expanded=true] {
  position: sticky;
  top: calc(var(--header-h) + var(--pagenav-h, 0px));
  z-index: 20;
  background: var(--acc-bg);
  box-shadow: 0 1px 0 var(--line);
}

.accordion--prijs .accordion__btn[aria-expanded=true]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -1px;
  left: -0.75rem;
  right: -0.75rem;
  background: var(--acc-bg);
}

/* Basis: wit, anders schemert de donkere body-achtergrond (#EBDECD) door -
   zelfde reden als .onze-kliniek-sec/.behandelingen-sec elders. Om en om
   getint (.section--tinted, al bestaande sitewide class): prijzen.aspx.vb
   zet die klasse op ItemIndex i.p.v. hier op nth-of-type te rekenen - de
   hero en de cta-band zijn ook <section>-elementen op deze pagina, dus
   nth-of-type(even) zou vanaf de hero geteld hebben en de EERSTE
   categorie ten onrechte getint maken. */
.prijzen-sec {
  background: #fff;
}

/* Twee classes nodig i.p.v. .section--tinted alleen: anders wint deze regel
   het niet van .prijzen-sec hierboven op gelijke specificiteit + latere
   import-volgorde (pages/prijzen.scss komt na default.scss). */
.prijzen-sec.section--tinted {
  background: var(--surface-2);
}

.section--tinted .accordion--prijs {
  --acc-bg: var(--surface-2);
}

/* ---------- Prijstabel ---------------------------------------------------- */
.pricetable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.pricetable th, .pricetable td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.pricetable td:last-child:not(:first-child),
.pricetable th:last-child:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

/* De prijs op tabellarische breedte (een 1 even breed als een 8), zodat de
   bedragen in de kolom recht onder elkaar staan. */
.pricetable .price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-weight: 600;
  color: var(--ink);
}

.pricetable .prijs__bedrag {
  color: inherit;
}

/* Oude prijs bij een actietarief: doorgestreept links naast het nieuwe
   bedrag, op dezelfde regel, want die twee horen bij elkaar (iBreedte/iHoogte
   in prijzen.aspx.vb). */
.pricetable .prijs__nu {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.pricetable .prijs__oud {
  color: var(--muted);
  font-weight: 400;
}

/* Een vervolgprijs hoort bij de hoofdregel erboven ("Eerste kersenwratje €40"
   + "Elk extra kersenwratje €10" is één tarief): de lijn tussen hoofd en
   vervolg vervalt, alleen de laatste van het groepje sluit het geheel af. */
.pricetable__hoofd td {
  border-bottom: 0;
  padding-bottom: var(--sp-2);
}

.pricetable__vervolg td {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.pricetable__vervolg--laatst td {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-4);
}

.pricetable__vervolg .price {
  font-weight: 500;
}

/* Het vervolg springt in achter een goudkleurig hoekje, als een submapje. */
.pricetable__tak {
  display: inline-block;
  width: 0.8em;
  height: 0.85em;
  margin: 0 0.5em 0 0.2em;
  border-left: 1.5px solid var(--gold-400);
  border-bottom: 1.5px solid var(--gold-400);
  border-bottom-left-radius: 7px;
  transform: translateY(-0.25em);
}

.pricetable .prijs__plus {
  color: var(--muted);
  font-weight: 400;
  margin-right: 0.12em;
}

/* Kopregel boven een groep tarieven ("Ouderdomswratten"): een crèmekleurig
   bandje in de goudkleur i.p.v. grijs, zodat hij als kop leest en niet als
   nóg een tarief. */
.pricetable__groep th {
  background-image: linear-gradient(90deg, rgba(238, 226, 199, 0.55) 0%, rgba(244, 236, 217, 0.38) 32%, rgba(244, 236, 217, 0) 75%);
  color: var(--gold-800);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  padding-block: var(--sp-3);
  border-bottom: 0;
  border-radius: 3px;
}

/* Elke groep staat in een eigen tbody; vanaf de tweede groep komt hier lucht
   boven het bandje - op de tbody zelf, anders loopt het gekleurde vlak mee omhoog. */
.pricetable tbody + tbody::before {
  content: "";
  display: table-row;
  height: var(--sp-5);
}

@media (max-width: 560px) {
  .pricetable th, .pricetable td {
    padding: var(--sp-3) var(--sp-2);
  }
  .pricetable td:first-child {
    overflow-wrap: break-word;
  }
}
/* ==========================================================================
   Bedankt (bedankt.aspx) - na het contactformulier.
   Een getinte sectie met een witte kaart, zelfde bouwstenen als de andere
   tekstpagina's (.section--tinted, .container--narrow, .rich-text). De footer
   kleurt zijn golf mee met een laatste .section--tinted (footer.scss), dus de
   overgang naar de footer is naadloos; de oude .thanks-opmaak (main.scss) liet
   daar een witte golf over de beige body-achtergrond lopen.
   ========================================================================== */
.bedankt-sec {
  min-height: 40vh;
}

.bedankt-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  box-shadow: var(--sh-sm);
}

.bedankt-card p:has(> a.btn-default) {
  margin-top: var(--sp-5);
}

/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - 360°-tour (tour.aspx)
   De tour zelf is een zelfstandige Pannellum-viewer in /360-tour/ (eigen
   HTML/CSS/JS, zie 360-tour/LEESMIJ.txt); deze pagina zet 'm alleen in een
   iframe binnen de sitebrede header/footer. Geen eigen tekststijlen nodig:
   de hero is de gewone .page-hero--tekst uit default.scss.
   ========================================================================== */
.tour-frame {
  position: relative;
  /* Expliciete breedte nodig: met alleen aspect-ratio + min-height "leent" de
     browser de min-height als minimumbreedte (420px x 16/9 = 746px) en loopt
     het kader op smalle schermen uit de pagina. */
  width: 100%;
  aspect-ratio: 16/9;
  /* Op smalle schermen is 16:9 te plat voor een panorama waarin je rond
     moet kunnen kijken; dan wint deze ondergrens. */
  min-height: 420px;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Safari knipt een iframe/gecomposite kind niet altijd netjes af op
     border-radius + overflow:hidden; een eigen stacking context lost dat op. */
  isolation: isolate;
  /* Zelfde ondergrond als de viewer (--bg in 360-tour/css/tour.css), zodat er
     tijdens het laden geen witte flits achter de ronde hoeken zit. */
  background: #0e0f11;
  box-shadow: var(--sh-lg);
}

.tour-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tour-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
}

.tour-onder__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/*@import "pages/about.scss";
@import "pages/scroll-template.scss";
@import "pages/text.scss";
@import "pages/terms.scss";*/
::selection {
  background: #D3AF59;
  color: #141F1B;
}

::-moz-selection {
  background: #D3AF59;
  color: #141F1B;
}

.loading-screen {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  transition: opacity 1s ease;
}
.loading-screen.hidden {
  display: none;
}
.loading-screen video {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* De vaste marge voor de fixed header is vervallen: de header is nu
   position:sticky (header.scss) en staat gewoon in de flow. Het gouden
   SVG-animatieblok (.fixed-img) is met het oude overlay-menu verdwenen. */
.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-terms {
  margin: 5px 0;
  font-size: 14px;
  margin-bottom: 10px !important;
}
.recaptcha-terms a {
  display: inline-block;
  color: inherit;
  text-decoration: underline !important;
}

html.modal-open {
  overflow: hidden;
}
html.modal-open body {
  overflow: hidden;
}

body {
  position: relative;
  font-family: "RethinkSans", sans-serif;
  background: #EBDECD;
  font-weight: 400;
  margin: 0;
  font-size: 18px;
  /*line-height: 26px;*/
  line-height: 1.7;
  color: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*section {
    overflow-x: hidden;
}*/
p {
  margin: 0;
}

:focus {
  outline: none !important;
}

.container-fluid.custom {
  padding: 0px 15px;
  max-width: 1350px;
  position: relative;
  z-index: 9;
}

.img-fluid {
  max-width: 100%;
}

button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: "RethinkSans", sans-serif;
  font-weight: 500;
  color: #141F1B;
}

h2, h3, h4, h5, h6 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
}
h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: 500;
}

*, ::after, ::before {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

input {
  -webkit-appearance: none;
}

.loading-div {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
}
.loading-div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.6;
}
.loading-div .circle {
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
  color: #EEEAE0;
}
.loading-div .circle .fa {
  font-size: 16px;
  bottom: -10px;
  position: relative;
  margin-right: 8px;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.loading-div .circle .fa:nth-child(1) {
  animation-delay: 0.2s;
}
.loading-div .circle .fa:nth-child(2) {
  animation-delay: 0.4s;
}
.loading-div .circle .fa:nth-child(3) {
  animation-delay: 0.6s;
}
.loading-div .inner {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  width: calc(100% - 30px);
  font-size: 25px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 999;
}
.loading-div .inner b {
  font-weight: 500;
}
.loading-div.activeloader {
  opacity: 1;
  visibility: visible;
}

.w-100 {
  width: 100% !important;
}

.hidden {
  display: none !important;
  opacity: 0;
}

a {
  text-decoration: none;
}

/* Basisstijl voor "gewone" linkjes in lopende tekst (CMS-content en vaste
   pagina's), los van de knoppen. :where() geeft dit deel zelf 0 specificiteit,
   zodat het nooit een specifiekere regel (.nav__link, .link-arrow, .cat-card,
   .kruimels a, .footer__contact a, ...) overschrijft en alleen invult waar nog
   niets anders geldt. .btn-default is de CMS-knop (TinyMCE), .btn de vaste
   knoppen in de .aspx-bestanden (zie _buttons.scss) - allebei uitgesloten. */
a:where(:not(.btn-default):not(.btn)) {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:where(:not(.btn-default):not(.btn)):hover {
  color: var(--gold-500);
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

.errors {
  height: 100vh;
  width: 100vw;
  position: relative;
}
.errors:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background-image: url('/Resources/img/bg-home.svg');
  background-repeat: no-repeat;*/
  width: 100%;
  height: 100%;
  z-index: 0;
}
.errors .content {
  width: 800px;
  max-width: calc(100% - 30px);
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*        background: rgba(255,255,255, 0.7%);
  border: 2px solid #e6e6e6;*/
  border-radius: 5px;
  padding: 35px 0;
}
.errors .content .inner {
  color: #232020;
}
.errors .content h4 {
  font-size: 35px;
  font-weight: bold;
  color: #232020;
  margin-bottom: 20px;
}
.errors .content .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 20px auto 0 !important;
}
.errors .content .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.errors .content .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.errors .content .btn-default:hover {
  background: #fff;
  color: #141F1B;
}
.errors .content p {
  margin: 0;
}

.overlay-search {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 22;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
.overlay-search.active {
  opacity: 1;
  visibility: visible;
}

.breadcrumbs {
  position: relative;
  display: block;
  padding: 0 !important;
  list-style-type: none;
  z-index: 1;
  font-size: 12px;
}
.breadcrumbs li {
  position: relative;
  display: inline-block;
}
.breadcrumbs li a {
  text-decoration: none;
  color: #4a4a4a;
}
.breadcrumbs li:after {
  font-weight: 900;
  content: "";
  position: relative;
  display: inline-block;
  top: -1px;
  margin: 0 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #014023;
  vertical-align: middle;
}
.breadcrumbs li:last-child {
  color: #4a4a4a;
}
.breadcrumbs li:last-child:after {
  display: none;
}

.form-group {
  margin-bottom: 15px;
}
.form-group.has-error .form-control {
  border-color: red;
  background: #ffe3e3;
}
.form-group.has-success {
  border-color: green;
}
.form-group select {
  background-image: url(/Resources/img/arrow.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 12px !important;
  background-position: 95% !important;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #202326;
}
.form-group .form-control {
  height: inherit;
  padding: 15px 15px;
  border: none;
  color: #000;
  width: 100%;
  font-size: 16px;
  -webkit-appearance: none;
  border-radius: 0;
  background: #fff;
  border-radius: 10px;
  -webkit-appearance: none;
  font-family: "RethinkSans", sans-serif;
  border: 1px solid transparent;
}
.form-group .form-control:focus {
  background: rgba(20, 31, 27, 0.0705882353) !important;
}
.form-group .help-block {
  display: block;
  color: red;
  padding: 0;
  font-weight: 500;
  font-size: 13px;
  margin-top: 15px;
}

.banner-text {
  position: relative;
  height: 300px;
  background: #f0f0f0;
}
.banner-text:after {
  content: "";
  position: absolute;
  right: -100px;
  top: 0;
  height: 100%;
  width: calc(50% + 100px);
  background: #fff;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
.banner-text .text {
  font-size: 40px;
  position: absolute;
  left: 50%;
  line-height: 45px;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  z-index: 2;
  text-align: center;
  font-family: "RethinkSans", sans-serif;
}
.banner-text .text b {
  font-weight: 500;
  color: #014023;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  font-size: 14px;
  border: 1px solid transparent;
}
.alert.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert.alert-succes {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert.alert-primary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

@keyframes blink {
  0% {
    bottom: -10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: -10px;
  }
}
.shopping-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 999;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.shopping-modal.active {
  opacity: 1;
  visibility: visible;
}
.shopping-modal .close-modal {
  color: #014023;
  position: absolute;
  right: 25px;
  font-size: 24px;
  cursor: pointer;
  top: 15px;
  z-index: 2;
}
.shopping-modal .btn-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-top: 35px;
  justify-content: center;
}
.shopping-modal .btn-row .btn-naked {
  color: #014023;
}
.shopping-modal .btn-row .btn-order {
  padding: 10px 20px;
  background: #141F1B;
  color: #fff;
  min-width: 150px;
  text-align: center;
  border-radius: 25px;
  margin-right: 25px;
}
.shopping-modal .inner {
  position: relative;
  width: calc(100% - 30px) !important;
  max-width: 750px;
  padding: 65px 30px 55px;
  background-color: #EEEAE0;
  color: #014023;
}
.shopping-modal .inner b {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
  text-align: center;
}

.popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
}
.popup-modal.small .content {
  max-width: 700px;
  padding: 50px 100px 30px;
}
.popup-modal.active {
  opacity: 1;
  visibility: visible;
}
.popup-modal .form-control-feedback {
  display: none !important;
}
.popup-modal .help-block {
  width: 100%;
}
.popup-modal .content {
  position: relative;
  width: calc(100% - 30px) !important;
  max-width: 1200px;
  margin: 50px auto;
  background: #FFFBE7;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.0392156863);
}
.popup-modal .content .textdiv {
  font-size: 18px;
  position: relative;
  text-align: center;
  color: #000;
}
.popup-modal .content .textdiv h3 {
  font-size: 30px;
  display: block;
  margin-bottom: 15px;
  font-weight: bold;
}
.popup-modal .content .close-modal {
  color: #014023;
  position: absolute;
  right: 25px;
  font-size: 24px;
  cursor: pointer;
  top: 15px;
  z-index: 2;
}
.popup-modal .content .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  width: 100%;
  margin-top: 30px;
  display: table;
}
.popup-modal .content .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.popup-modal .content .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.popup-modal .content .btn-default:hover {
  background: #fff;
  color: #141F1B;
}

.promotion-banner {
  padding: 10px 15px;
  text-align: center;
  background: #eeeae2;
}
.promotion-banner b {
  font-weight: normal;
  display: block;
  text-transform: uppercase;
}
.promotion-banner i {
  font-style: normal;
  font-weight: bold;
}
.promotion-banner:empty {
  display: none;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   Skin Renew huisstijl (herontwerp) - footer (page.master), exact naar de bron.
   De vier kolommen komen uit CMS-literals (ltlF01..F04): kop als kaal <b>,
   inhoud als kale <ul> — geen classes in CMS-tekst. De iconen van de
   contactkolom hangen daarom aan de li-positie (nth-child), net als op de
   contactpagina. Zie docs/CMS-CONTENT-home.md voor de vulling per literal.
   ========================================================================== */
footer {
  --foot-head: 46px;
  --foot-logo: 64px;
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, #f1e9d6 100%);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  overflow: hidden;
}

/* Golfrand bovenlangs. De kleur is die van de sectie erboven, zodat de golf
   erin lijkt over te lopen; de drie :has()-regels kiezen hem per situatie. */
footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  height: clamp(44px, 6vw, 80px);
  pointer-events: none;
  background: var(--footer-golf, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1290 62 1140 10 950 36 C760 62 610 16 430 40 C290 58 120 30 0 50 Z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 30 C1290 62 1140 10 950 36 C760 62 610 16 430 40 C290 58 120 30 0 50 Z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* :last-of-type ipv :last-child - na de laatste sectie staan op sommige
   pagina's nog onzichtbare elementen (bv. Default.aspx: verborgen
   asp:HiddenField-inputs na de cta-band); die zijn geen <section> en tellen
   dus niet mee voor :last-of-type, waardoor dit ook daar blijft matchen. */
main:has(> .section--tinted:last-of-type) + footer {
  --footer-golf: var(--surface-2);
}

main:has(> .section--sand:last-of-type) + footer {
  --footer-golf: var(--surface-3);
}

main:has(> .section--dark:last-of-type) + footer {
  --footer-golf: #f0e8d4;
}

/* Eindigt de pagina met een cta-band (zoals de homepage), dan tekent de
   cta-band zelf al zijn ondergolf in surface-2 - precies de kleur waar de
   footer mee begint (zelfde var, zie footer { background } hierboven). Golf
   hier dus transparant, anders overlapt footer's eigen golf (voorheen wit uit
   de standaardwaarde) daar zichtbaar overheen en ontstaat er een harde/dubbele
   rand in plaats van een vloeiende overgang. */
main:has(> .cta-band:last-of-type) + footer {
  --footer-golf: transparent;
}

footer .footer__top {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.6fr;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: var(--sp-7);
  padding-block: calc(var(--sp-8) + clamp(16px, 2.5vw, 32px)) var(--sp-7);
}

footer .footer__logo img {
  height: var(--foot-logo);
  width: auto;
  margin-bottom: var(--sp-4);
}

/* Payoff uit ltlF01: een kale <p> */
footer .footer__logo p {
  max-width: 32ch;
  line-height: 1.65;
  margin: 0;
}

.socials {
  display: flex;
  gap: 0.35rem;
  margin-top: var(--sp-5);
  margin-left: -11px;
}

.socials a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--gold-500);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.socials a svg {
  width: 22px;
  height: 22px;
}

.socials a:hover {
  color: var(--gold-800);
  transform: translateY(-2px);
}

/* Kolomkop: kaal <b> in de CMS-tekst (bron gebruikt h3; zelfde vorm).
   --foot-head trekt alle koppen op één lijn, ook naast het hogere logo. */
footer b {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: flex;
  align-items: flex-end;
  min-height: var(--foot-head);
  margin: 0 0 var(--sp-4);
}

footer .footer__top ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

footer .footer__top ul li {
  margin: 0;
}

/* Linkstreepje-hover, alleen op de linkkolommen — de contactkolom
   (.footer__contact-col) doet niet mee. position:relative op de link zelf,
   anders hangt het streepje aan de verkeerde voorouder. */
footer .footer__top div:not(.footer__contact-col) ul li a {
  position: relative;
  display: inline-block;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left 0.3s var(--ease);
}

footer .footer__top div:not(.footer__contact-col) ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--gold-500);
  transition: width 0.3s var(--ease);
}

footer .footer__top div:not(.footer__contact-col) ul li a:hover {
  padding-left: 1.05rem;
  color: var(--gold-text);
}

footer .footer__top div:not(.footer__contact-col) ul li a:hover::before {
  width: 0.7rem;
}

/* Contactkolom (ltlF04): kale <ul>, iconen via mask op li-positie.
   Vaste volgorde: 1 adres (pin), 2 telefoon, 3 e-mail, 4 openingstijden (klok)
   — zelfde volgorde als de bron-footer. Wijzigt de volgorde in het CMS, dan
   verschuiven de iconen mee. */
footer .footer__contact-col ul li {
  position: relative;
  padding-left: calc(16px + 0.75rem);
}

footer .footer__contact-col ul li a {
  color: var(--ink-2);
  text-decoration: none;
}

footer .footer__contact-col ul li a:hover {
  color: var(--gold-text);
}

footer .footer__contact-col ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background: var(--gold-500);
}

footer .footer__contact-col ul li:nth-child(1)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

footer .footer__contact-col ul li:nth-child(2)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}

footer .footer__contact-col ul li:nth-child(3)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

footer .footer__contact-col ul li:nth-child(4)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Onderbalk: copyright links (ltlCopy1, kale <p>), privacylinks rechts
   (ltlCopy2, kale <ul>). De extra padding onderin reserveert ruimte voor de
   mobiele actionbar (vervolgstap), zoals de bron dat ook doet. */
footer .footer__bottom {
  background: linear-gradient(90deg, rgba(174, 139, 51, 0), rgba(174, 139, 51, 0.35) 50%, rgba(174, 139, 51, 0)) top center/100% 1px no-repeat;
  padding-block: var(--sp-5);
  padding-bottom: calc(var(--sp-5) + 68px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--muted);
}

@media (max-width: 1023px) {
  footer .footer__bottom {
    padding-bottom: calc(var(--sp-5) + 56px);
  }
}
footer .footer__bottom p {
  margin: 0;
}

footer .footer__bottom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

footer .footer__bottom ul li {
  margin: 0;
}

footer .footer__bottom a {
  color: var(--ink-2);
  text-decoration: none;
}

footer .footer__bottom a:hover {
  color: var(--gold-text);
}

/* Responsive kolomherschikking (bron): 3 kolommen met het logo over de volle
   breedte, daaronder 2, en op mobiel alles onder elkaar. */
@media (max-width: 1000px) {
  footer .footer__top {
    grid-template-columns: 1fr 1fr 1.2fr;
    row-gap: var(--sp-6);
  }
  footer .footer__logo {
    grid-column: 1/-1;
  }
  footer .footer__logo p {
    max-width: 52ch;
  }
}
@media (max-width: 700px) {
  footer {
    --foot-head: 42px;
    --foot-logo: 56px;
  }
  footer .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  footer .footer__top {
    row-gap: var(--sp-5);
  }
  footer b {
    min-height: 0;
  }
}
@media (pointer: coarse) {
  footer .footer__top ul {
    gap: 0.3rem;
  }
}
@media only screen and (max-width: 1450px) {
  .container-fluid.custom {
    padding: 0px 50px;
  }
}
@media only screen and (max-width: 1350px) {
  .container-fluid.custom {
    padding: 0px 50px;
    max-width: 1200px;
  }
}
@media only screen and (max-width: 1200px) {
  .container-fluid.custom {
    padding: 0px 75px;
  }
}
@media only screen and (max-width: 991.5px) {
  .errors:before {
    position: absolute;
    top: 0px;
    left: -370px;
    transform: unset;
    /*background-image: url(/Resources/img/bg-home.svg);
    background-repeat: no-repeat;*/
    width: 245%;
    height: 100%;
    z-index: 0;
    background-size: 105%;
  }
  .modal-account .content {
    max-width: 700px !important;
  }
  .container-fluid.custom {
    padding: 0px 25px;
  }
}
@media only screen and (max-width: 767.5px) {
  h2, h3, h4, h5, h6 {
    font-size: 28px;
    line-height: 32px;
  }
  .modal-account .content {
    max-width: 325px !important;
    padding: 50px 25px !important;
  }
  .modal-account .content .fas {
    top: 15px !important;
    right: 15px !important;
  }
  .container-fluid.custom {
    padding: 0px 15px;
  }
  .shopping-modal .inner {
    padding: 50px 20px 20px;
    min-width: inherit;
  }
  .shopping-modal .inner b {
    font-size: 21px;
  }
  .shopping-modal .btn-row {
    margin-top: 20px;
  }
  .shopping-modal .btn-row .btn-order {
    min-width: 120px;
    margin-right: 10px;
  }
  .banner-text {
    height: 200px;
  }
  .banner-text .text {
    font-size: 30px;
    width: calc(100% - 30px);
  }
  .breadcrumbs {
    margin: 0px 0 20px;
  }
  .popup-modal .content {
    padding: 30px 15px !important;
    overflow: hidden;
  }
  .popup-modal .content .input-wrapper .form-control {
    width: 100%;
  }
  .popup-modal .content .btn-ripple {
    width: 100%;
    margin-top: 10px;
  }
  .popup-modal .content .width {
    max-width: 100%;
    margin: 0 auto;
  }
  .popup-modal .content .textdiv {
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 25px;
    margin-top: 10px;
  }
  .popup-modal .content .textdiv h3 {
    font-size: 24px;
  }
  .btn-default {
    padding: 10px 20px !important;
    min-width: initial !important;
    font-size: 16px !important;
  }
  .breadcrumb-wrapper.shop-crumbs {
    display: block;
    padding: 15px 0;
  }
  .breadcrumb-wrapper.shop-crumbs .btn-back {
    margin: 0px 0px 15px;
  }
  .errors:before {
    transform: translateY(-50%);
    left: -260px;
    width: 250%;
    background-size: 120%;
    top: 68%;
  }
}
.ui-datepicker {
  display: none;
  background-color: #b5d0c1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
  margin-top: 0.25rem;
  padding: 0.5rem;
}
.ui-datepicker-calendar table {
  border-collapse: collapse;
  border-spacing: 0;
}
.ui-datepicker-calendar thead th {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
}
.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  text-align: center;
  padding: 0;
  color: #fff;
}
.ui-datepicker-calendar tbody td.ui-state-disabled {
  opacity: 0.3;
}
.ui-datepicker-calendar tbody td a {
  display: block;
  border-radius: 50%;
  line-height: 2rem;
  transition: 0.3s all;
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
.ui-datepicker-calendar tbody td a:hover {
  background: white;
  color: white;
}
.ui-datepicker-calendar tbody td a.ui-state-active {
  background: #f69986;
  font-weight: bold;
}
.ui-datepicker-calendar tbody td a.ui-state-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #f69986;
}
.ui-datepicker-header a span {
  display: none;
}
.ui-datepicker-header a.ui-corner-all {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
}
.ui-datepicker-header a.ui-datepicker-prev {
  left: 0;
}
.ui-datepicker-header a.ui-datepicker-prev::after {
  font-family: "Font Awesome 5 Free";
  content: "\f104";
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}
.ui-datepicker-header a.ui-datepicker-next {
  right: 0;
  text-align: right;
}
.ui-datepicker-header a.ui-datepicker-next::after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}
.ui-datepicker-title {
  color: white;
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: bold;
  padding-bottom: 0.25rem;
}
.ui-datepicker-week-col {
  color: #353535;
  font-weight: 400;
  font-size: 0.75rem;
}

.modal-account {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.46);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  overflow-y: auto;
  box-shadow: 0 3px 6px rgba(49, 77, 81, 0.0034);
}
.modal-account.active {
  opacity: 1;
  visibility: visible;
}
.modal-account .content {
  margin: 1.75rem auto;
  background: #f7f8fa;
  border-radius: 10px;
  padding: 75px 50px;
  text-align: center;
  max-width: 800px;
  min-height: inherit;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  position: relative;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.modal-account .content::-webkit-scrollbar {
  width: 10px;
}
.modal-account .content::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.modal-account .content::-webkit-scrollbar-thumb {
  background: #888;
}
.modal-account .content::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.modal-account .content .fas {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
  line-height: 44px;
  width: 44px;
  background: #b5d0c1;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  color: #fff;
}
.modal-account .content .fas.small {
  max-width: 800px;
}
.modal-account .content .fas.small b {
  margin-bottom: 20px;
}
.modal-account .content .fas b {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
}
.modal-account .content .btn-default {
  padding: 12px 28px;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none !important;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #D3AF59;
  color: #141F1B;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  /*    &:before {
      content: "\f061";
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      position: absolute;
      left: 0;
      font-size: 30px;
      z-index: 2;
      color: #b29858;
  }

  &:hover {
      &:after {
          width: calc(100% + 30px);
      }
  }

  &:after {
      content: "";
      position: absolute;
      left: -20px;
      background: #b29858;
      width: 65px;
      height: 100%;
      opacity: 0.5;
      z-index: -1;
      top: 0;
      border-radius: 50px;
      transition: all 0.3s ease-in-out;
  }*/
  margin: 15px auto 0;
}
.modal-account .content .btn-default.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.modal-account .content .btn-default.loading:before {
  content: "\f110" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 18px;
}
.modal-account .content .btn-default:hover {
  background: #fff;
  color: #141F1B;
}

section:not(.fold-home).anim-active .container-fluid.custom, section:not(.fold-home).anim-active img {
  opacity: 1;
  top: 0;
}
section:not(.fold-home) .container-fluid.custom, section:not(.fold-home) img {
  position: relative;
  opacity: 0;
  top: 30px;
  -webkit-transition: all 0.6s ease-in-out 0.2s;
  transition: all 0.6s ease-in-out 0.2s;
}
section.anim-active {
  -webkit-transition: opacity 0.5s linear 0s;
  transition: opacity 0.5s linear 0s;
}