/* ============================================================
   VitaSure design system v2
   Bron: design-reference/design_handoff_vitasure_store (README.md)
   Alle nieuwe templates gebruiken vs2-* classnamen; de legacy
   theme.css en het critical-overrides-blok raken deze niet.
   ============================================================ */

:root {
  /* kleuren */
  --vs2-bone: #f4f1ea;
  --vs2-surface: #fbfaf6;
  --vs2-forest: #1f3d2f;
  --vs2-deep: #141c17;
  --vs2-mid: #2f6b4f;
  --vs2-pale: #e7ede4;
  --vs2-panel-tint: #eef3ec;
  --vs2-amber: #5db040;
  --vs2-amber-dark: #3f8a28;
  --vs2-ink: #1c2620;
  --vs2-body: #3a4a41;
  --vs2-body-soft: #4a5a4f;
  --vs2-muted: #5f6b62;
  --vs2-faint: #8a968c;
  --vs2-line: rgba(28, 38, 32, 0.09);
  --vs2-line-strong: rgba(28, 38, 32, 0.18);

  /* typografie */
  --vs2-font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --vs2-font-serif: "Newsreader", Georgia, serif;

  /* vorm */
  --vs2-r-btn: 13px;
  --vs2-r-input: 11px;
  --vs2-r-card: 20px;
  --vs2-r-panel: 26px;

  /* schaduw */
  --vs2-shadow-card: 0 26px 52px -26px rgba(31, 61, 47, 0.4);
  --vs2-shadow-btn: 0 12px 30px -12px rgba(31, 61, 47, 0.8);
  --vs2-shadow-amber: 0 12px 30px -14px rgba(93, 176, 64, 0.65);

  /* beweging */
  --vs2-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* layout — 1320px is de moderne containerbreedte (was 1220 uit het
     design-handoff; keuze Joris 4 juli 2026) */
  --vs2-max: 1320px;
  --vs2-pad: 40px;
}

/* ---------- basis ---------- */

body.vs2 {
  background: var(--vs2-bone);
  color: var(--vs2-ink);
  font-family: var(--vs2-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.vs2 ::selection {
  background: var(--vs2-forest);
  color: var(--vs2-bone);
}

body.vs2 a {
  color: inherit;
  text-decoration: none;
}

.vs2-container {
  margin: 0 auto;
  max-width: var(--vs2-max);
  padding-left: var(--vs2-pad);
  padding-right: var(--vs2-pad);
}

@media (max-width: 767px) {
  :root {
    --vs2-pad: 20px;
  }
}

/* ---------- typografie-helpers ---------- */

.vs2-eyebrow {
  color: var(--vs2-mid);
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.vs2-h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 22px;
}

.vs2-h2 {
  font-size: clamp(30px, 3.3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
}

.vs2-serif {
  color: var(--vs2-mid);
  font-family: var(--vs2-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.vs2-lead {
  color: var(--vs2-body-soft);
  font-size: 19px;
  line-height: 1.55;
}

/* ---------- knoppen ---------- */

.vs2-btn {
  border: 0;
  border-radius: var(--vs2-r-btn);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  padding: 15px 28px;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.vs2-btn:hover {
  transform: translateY(-2px);
}

/* Icoontje in een knop, netjes uitgelijnd met de tekst. */
.vs2-btn__icon {
  height: 17px;
  margin-right: 8px;
  vertical-align: -3px;
  width: 17px;
}

.vs2-btn--primary {
  background: var(--vs2-forest);
  box-shadow: var(--vs2-shadow-btn);
  color: var(--vs2-bone) !important;
}

.vs2-btn--primary:hover {
  color: var(--vs2-bone) !important;
}

.vs2-btn--amber {
  background: var(--vs2-amber);
  box-shadow: var(--vs2-shadow-amber);
  color: var(--vs2-ink) !important;
}

.vs2-btn--ghost {
  background: var(--vs2-surface);
  border: 1.5px solid var(--vs2-line-strong);
  color: var(--vs2-ink) !important;
  font-weight: 600;
  padding: 14px 24px;
}

.vs2-btn--ghost-light {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
  font-weight: 600;
  padding: 15px 28px;
}

/* ---------- kaarten ---------- */

.vs2-card {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: var(--vs2-r-card);
  transition: transform 0.24s var(--vs2-ease), box-shadow 0.25s ease;
}

.vs2-card--hover:hover {
  box-shadow: var(--vs2-shadow-card);
  transform: translateY(-6px);
}

/* ---------- USP-balk (boven de nav) ---------- */

.vs2-uspbar {
  background: var(--vs2-forest);
  color: var(--vs2-pale);
  padding: 9px 0;
}

.vs2-uspbar__track {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
  gap: 8px 24px;
  /* zelfde container als de nav: eerste USP lijnt met het logo,
     laatste met de winkelmand-knop */
  justify-content: space-between;
  letter-spacing: 0.01em;
  margin: 0 auto;
  max-width: var(--vs2-max);
  padding: 0 var(--vs2-pad);
}

.vs2-uspbar__item {
  align-items: center;
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.vs2-uspbar__item svg {
  flex: none;
  height: 14px;
  margin-top: -1px; /* optisch gecentreerd t.o.v. de kapitaalhoogte */
  width: 14px;
  fill: currentColor;
  stroke: none;
}

.vs2-uspbar__item strong {
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 767px) {
  /* mobiel: één item zichtbaar, swipebaar — zelfde patroon als voorheen */
  .vs2-uspbar__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .vs2-uspbar__track::-webkit-scrollbar {
    display: none;
  }

  .vs2-uspbar__item {
    flex: 0 0 100%;
    justify-content: center;
    scroll-snap-align: start;
  }
}

/* ---------- navigatie ---------- */

.vs2-nav {
  background: rgba(244, 241, 234, 0);
  border-bottom: 1px solid transparent;
  position: relative;
  transition: background 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease;
  z-index: 50;
}

/* USP-balk + nav scrollen samen mee; offset voor de WP-adminbalk. */
.vs2-stickyhead {
  position: sticky;
  top: 0;
  z-index: 90;
}

body.admin-bar .vs2-stickyhead {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .vs2-stickyhead {
    top: 46px;
  }
}

@media (max-width: 600px) {
  /* de adminbalk is hier position:absolute en scrolt zelf weg */
  body.admin-bar .vs2-stickyhead {
    top: 0;
  }
}

.vs2-nav.is-scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(244, 241, 234, 0.85);
  border-bottom-color: rgba(28, 38, 32, 0.1);
}

.vs2-nav__inner {
  align-items: center;
  display: flex;
  height: 74px;
  justify-content: space-between;
}

.vs2-nav__logo img {
  display: block;
  height: 36px !important;
  /* Het woordmerk zit iets laag in het SVG-kader; optisch uitlijnen
     met de menutekst. */
  transform: translateY(-3px);
  width: 146px !important;
}

.vs2-nav__links {
  align-items: center;
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs2-nav__links a {
  color: #3c4a41;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.18s;
}

.vs2-nav__links a:hover,
.vs2-nav__links .current-menu-item > a {
  color: var(--vs2-forest);
}

/* WPML-taalwissel: compacte vlag met dropdown bij hover */
.vs2-nav__links .wpml-ls-menu-item {
  position: relative;
}

.vs2-nav__links .wpml-ls-menu-item img {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(31, 61, 47, 0.14);
  display: block;
  height: auto;
  width: 20px;
}

/* Actieve vlag: extra klikvlak + caret, houdt de hover door tot aan de dropdown */
.vs2-nav__links > .wpml-ls-menu-item > a {
  align-items: center;
  display: flex;
  padding: 10px 2px;
}

.vs2-nav__links > .wpml-ls-menu-item > a::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #6b7d72;
  content: "";
  margin-left: 6px;
  transition: transform 0.15s ease;
}

.vs2-nav__links > .wpml-ls-menu-item:hover > a::after,
.vs2-nav__links > .wpml-ls-menu-item:focus-within > a::after {
  transform: rotate(180deg);
}

.vs2-nav__links .wpml-ls-menu-item .sub-menu {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 10px;
  box-shadow: 0 14px 30px -18px rgba(31, 61, 47, 0.4);
  display: none;
  left: 50%;
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% - 6px);
  transform: translateX(-50%);
  z-index: 40;
}

.vs2-nav__links .wpml-ls-menu-item .sub-menu li {
  display: block;
  margin: 0;
  padding: 0;
}

.vs2-nav__links .wpml-ls-menu-item .sub-menu a {
  align-items: center;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  padding: 7px 9px;
}

/* Zelfde compacte maat als de vlag in de balk — een grotere vlag oogt
   uitvergroot naast de 20px-versie erboven. */
.vs2-nav__links .wpml-ls-menu-item .sub-menu img {
  border-radius: 3px;
  width: 20px;
}

.vs2-nav__links .wpml-ls-menu-item .sub-menu a:hover {
  background: var(--vs2-pale);
}

.vs2-nav__links .wpml-ls-menu-item:hover .sub-menu,
.vs2-nav__links .wpml-ls-menu-item:focus-within .sub-menu {
  display: block;
}

.vs2-nav__actions {
  align-items: center;
  display: flex;
  gap: 18px;
}

.vs2-nav__login {
  color: #3c4a41;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.18s;
}

.vs2-nav__login:hover {
  color: var(--vs2-forest);
}

.vs2-nav__cart {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 12px;
  box-shadow: 0 8px 22px -12px rgba(31, 61, 47, 0.8);
  color: var(--vs2-bone) !important; /* wint van legacy a-kleurregels tijdens migratie */
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 9px;
  padding: 11px 18px;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

/* Winkelwagen: icoon + aantal (zoals gebruikelijk in webshops). */
.vs2-nav__carticon {
  display: inline-flex;
  height: 20px;
  width: 20px;
}

.vs2-nav__cart:hover {
  color: var(--vs2-bone) !important;
  transform: translateY(-2px);
}

.vs2-nav__cartcount {
  align-items: center;
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  display: flex;
  font-size: 12.5px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}

/* mobiele nav */
.vs2-nav__toggle {
  background: transparent;
  border: 0;
  color: var(--vs2-forest);
  cursor: pointer;
  display: none;
  padding: 8px;
}

.vs2-nav__toggle svg {
  display: block;
  height: 26px;
  width: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

@media (max-width: 991px) {
  .vs2-nav__toggle {
    display: block;
  }

  .vs2-nav__links {
    background: var(--vs2-surface);
    border-bottom: 1px solid var(--vs2-line);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 8px 0;
    position: absolute;
    right: 0;
    top: 100%;
  }

  .vs2-nav__links.is-open {
    display: flex;
  }

  .vs2-nav__links li {
    width: 100%;
  }

  .vs2-nav__links a {
    display: block;
    font-size: 16px;
    padding: 13px var(--vs2-pad);
  }

  .vs2-nav__login {
    display: none;
  }

  .vs2-nav__cart {
    font-size: 14px;
    padding: 9px 12px;
  }

  /* Account-item verschijnt in het mobiele menu (bovenaan afgescheiden) */
  .vs2-nav__mobileaccount {
    border-top: 1px solid var(--vs2-line);
    margin-top: 6px;
  }

  .vs2-nav__mobileaccount > a {
    font-weight: 700;
  }

  /* Taalwissel op mobiel: geen hover-dropdown, maar de talen inline en
     tapbaar onder elkaar. */
  .vs2-nav__links .wpml-ls-menu-item {
    border-top: 1px solid var(--vs2-line);
    margin-top: 6px;
  }

  .vs2-nav__links > .wpml-ls-menu-item > a {
    padding: 13px var(--vs2-pad);
  }

  .vs2-nav__links > .wpml-ls-menu-item > a::after {
    display: none; /* geen caret op mobiel */
  }

  .vs2-nav__links .wpml-ls-menu-item .sub-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
    left: auto;
    padding: 0;
    position: static;
    top: auto;
    transform: none;
    z-index: auto;
  }

  .vs2-nav__links .wpml-ls-menu-item .sub-menu a {
    border-radius: 0;
    gap: 12px;
    justify-content: flex-start;
    padding: 13px var(--vs2-pad);
  }

  .vs2-nav__links .wpml-ls-menu-item .sub-menu a:hover {
    background: var(--vs2-pale);
  }

  .vs2-nav__links .wpml-ls-menu-item img {
    width: 24px;
  }

  /* Toon de taalnaam naast de vlag (WPML zet 'm in de alt/aria) */
  .vs2-nav__links > .wpml-ls-menu-item > a::before {
    content: "Taal";
    color: var(--vs2-muted);
    font-size: 13px;
    font-weight: 600;
    margin-right: 10px;
  }
}

/* Account-item alleen op mobiel tonen (desktop heeft de header-link). */
.vs2-nav__mobileaccount {
  display: none;
}

@media (max-width: 991px) {
  .vs2-nav__mobileaccount {
    display: block;
  }
}

/* ---------- secties ---------- */

.vs2-section {
  margin: 0 auto;
  max-width: var(--vs2-max);
  padding: 76px var(--vs2-pad) 20px;
}

.vs2-section--dark {
  background: var(--vs2-forest);
  color: var(--vs2-pale);
  margin: 72px 0 0;
  max-width: none;
  padding: 0;
}

.vs2-section--dark .vs2-container {
  padding-bottom: 84px;
  padding-top: 84px;
}

/* ---------- footer ---------- */

.vs2-footer {
  background: var(--vs2-deep);
  color: #a9b8ac;
}

.vs2-footer__inner {
  margin: 0 auto;
  max-width: var(--vs2-max);
  padding: 60px var(--vs2-pad) 30px;
}

.vs2-footer__grid {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: 44px;
}

@media (max-width: 991px) {
  .vs2-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .vs2-footer__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-footer__logo {
  align-items: center;
  background: var(--vs2-bone);
  border-radius: 12px;
  display: inline-flex;
  margin-bottom: 18px;
  padding: 9px 14px;
}

.vs2-footer__logo img {
  display: block;
  height: 30px !important;
  width: 122px !important;
}

.vs2-footer__about {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 300px;
}

.vs2-footer__title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.vs2-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs2-footer__col a {
  color: #a9b8ac;
  font-size: 14.5px;
  transition: color 0.18s;
}

.vs2-footer__col a:hover {
  color: #ffffff;
}

.vs2-footer__bottom {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  gap: 12px 22px;
  justify-content: space-between;
  padding-top: 26px;
}

.vs2-footer__legal {
  display: flex;
  gap: 22px;
}

.vs2-footer__legal ul {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs2-footer__legal a {
  color: #a9b8ac;
  transition: color 0.18s;
}

.vs2-footer__legal a:hover {
  color: #ffffff;
}

/* ---------- animaties ---------- */

@keyframes vs2Float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes vs2Fade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vs2-fade {
  animation: vs2Fade 0.8s var(--vs2-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .vs2-fade {
    animation: none;
  }
}

/* ============================================================
   Homepage-secties (Vitasure Homepage.dc.html)
   ============================================================ */

/* ---------- hero ---------- */

.vs2-hero {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1.02fr 0.98fr;
  padding-bottom: 44px;
  padding-top: 64px;
}

.vs2-hero__pill {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 26px;
  padding: 7px 14px;
}

.vs2-hero__pilldot {
  background: var(--vs2-amber);
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.vs2-hero__accent {
  display: block;
  font-size: 0.9em;
  margin-top: 6px;
}

.vs2-hero__lead {
  margin: 0 0 34px;
  max-width: 490px;
}

.vs2-hero__ctas {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.vs2-hero__proof {
  align-items: center;
  color: var(--vs2-body-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 12px 26px;
}

.vs2-hero__proof b {
  color: var(--vs2-ink);
}

.vs2-hero__stars {
  color: var(--vs2-amber);
  font-size: 16px;
}

.vs2-hero__proofdivider {
  background: rgba(28, 38, 32, 0.14);
  height: 26px;
  width: 1px;
}

.vs2-hero__showcase {
  animation-delay: 0.12s;
  background: linear-gradient(150deg, #e7ede4, #dbe4d6);
  background-image: repeating-linear-gradient(45deg, rgba(31, 61, 47, 0.05) 0 14px, transparent 14px 28px);
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: var(--vs2-r-panel);
  height: 460px;
  overflow: hidden;
  position: relative;
}

.vs2-hero__showcase-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.vs2-hero__bottle {
  align-items: center;
  animation: vs2Float 6s ease-in-out infinite;
  background: var(--vs2-surface);
  border: 1px solid rgba(28, 38, 32, 0.1);
  border-radius: 20px;
  box-shadow: 0 30px 60px -28px rgba(31, 61, 47, 0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 18px;
}

.vs2-hero__bottleimg {
  display: block;
  height: 230px;
  object-fit: contain;
  width: auto;
}

/* Eigen herofoto (paginaveld): vult het hele vlak, zonder kader */
.vs2-hero__showcase > .vs2-hero__photo {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Slogan op de hero-foto — één elegante serif-regel direct op de foto (geen
   blok). Een subtiele verloop-schaduw onderin houdt hem leesbaar op elke foto. */
.vs2-hero__slogan {
  background: linear-gradient(to top, rgba(18, 26, 21, 0.6), rgba(18, 26, 21, 0));
  bottom: 0;
  left: 0;
  padding: 64px 26px 24px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 2;
}

.vs2-hero__slogantext {
  color: #ffffff;
  display: block;
  font-family: var(--vs2-font-serif);
  font-size: clamp(19px, 2.1vw, 26px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.vs2-hero__badge {
  background: var(--vs2-surface);
  border-radius: 14px;
  box-shadow: 0 14px 30px -18px rgba(31, 61, 47, 0.4);
  padding: 12px 16px;
  position: absolute;
}

.vs2-hero__badge--tl {
  left: 22px;
  top: 22px;
}

.vs2-hero__badge--br {
  align-items: center;
  bottom: 22px;
  display: flex;
  gap: 10px;
  right: 22px;
}

.vs2-hero__badgelabel {
  color: var(--vs2-faint);
  font-size: 12px;
  font-weight: 600;
}

.vs2-hero__badgevalue {
  color: var(--vs2-forest);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-hero__badgetitle {
  font-size: 13.5px;
  font-weight: 700;
}

.vs2-hero__badgecheck {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 50%;
  color: var(--vs2-forest);
  display: flex;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 34px;
}

@media (max-width: 991px) {
  .vs2-hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .vs2-hero__showcase {
    height: 380px;
  }
}

/* ---------- vertrouwensblok: USP-kaarten onder de hero ---------- */

.vs2-homeusps {
  margin-top: 26px;
}

.vs2-homeusps__grid {
  border-bottom: 1px solid rgba(28, 38, 32, 0.1);
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(4, 1fr);
  padding: 26px 0;
}

.vs2-homeusps__icon {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 11px;
  color: var(--vs2-forest);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 12px;
  width: 42px;
}

.vs2-homeusps__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
}

.vs2-homeusps__body {
  color: var(--vs2-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .vs2-homeusps__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .vs2-homeusps__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---------- persbalk (ongebruikt sinds het vertrouwensblok) ---------- */

.vs2-press {
  margin-top: 22px;
}

.vs2-press__inner {
  align-items: center;
  border-bottom: 1px solid rgba(28, 38, 32, 0.1);
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 22px 0;
}

.vs2-press__label {
  color: var(--vs2-faint);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vs2-press__logos {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.vs2-press__name {
  color: #9aa79c;
  font-family: var(--vs2-font-serif);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

@media (max-width: 767px) {
  .vs2-press__inner {
    flex-direction: column;
    gap: 14px;
  }
}

/* ---------- missie ---------- */

.vs2-mission {
  padding-top: 82px;
}

.vs2-mission__head {
  margin-bottom: 36px;
  max-width: 820px;
}

.vs2-mission__head .vs2-h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  margin-bottom: 20px;
}

.vs2-mission__lead {
  color: var(--vs2-body);
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
}

.vs2-mission__cols {
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr 1fr;
  padding-top: 34px;
}

.vs2-mission__cols p {
  color: var(--vs2-body-soft);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 767px) {
  .vs2-mission__cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---------- productgrid ---------- */

.vs2-products__head {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 36px;
}

.vs2-seg {
  background: var(--vs2-pale);
  border-radius: 12px;
  display: inline-flex;
  flex: none;
  padding: 4px;
}

.vs2-seg__btn {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--vs2-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 18px;
}

.vs2-seg__btn.is-active {
  background: var(--vs2-surface);
  box-shadow: 0 2px 8px -3px rgba(31, 61, 47, 0.4);
  color: var(--vs2-forest);
}

.vs2-seg__btn:disabled {
  cursor: default;
  opacity: 0.75;
}

.vs2-seg__hint {
  color: var(--vs2-amber-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.vs2-products__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

/* Homepage toont alle vijf de supplementen: 3 kolommen op smallere desktops, één rij van 5 vanaf 1200px */
@media (min-width: 992px) {
  .vs2-products .vs2-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .vs2-products .vs2-products__grid {
    gap: 16px;
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 991px) {
  .vs2-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vs2-products__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .vs2-products__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vs2-product__media {
  align-items: center;
  display: flex;
  height: 210px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.vs2-product__img {
  height: 170px;
  object-fit: contain;
  transition: transform 0.4s var(--vs2-ease);
  width: auto;
}

.vs2-card--hover:hover .vs2-product__img {
  transform: scale(1.04);
}

.vs2-product__badge {
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  font-size: 11.5px;
  font-weight: 800;
  left: 14px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  position: absolute;
  top: 14px;
}

.vs2-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 20px;
}

.vs2-product__name {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.vs2-product__tag {
  color: var(--vs2-mid);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.vs2-product__desc {
  color: var(--vs2-muted);
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.vs2-product__foot {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.vs2-product__price {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-product__add {
  background: var(--vs2-ink);
  border: 0;
  border-radius: 11px;
  color: var(--vs2-bone) !important;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  transition: background 0.18s, transform 0.16s;
}

.vs2-product__add:hover {
  background: var(--vs2-forest);
  transform: translateY(-1px);
}

.vs2-products__note {
  color: var(--vs2-faint);
  font-size: 14px;
  margin-top: 26px;
  text-align: center;
}

.vs2-products__cta {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ---------- wetenschap (donker) ---------- */

.vs2-eyebrow--amber {
  color: var(--vs2-amber);
}

.vs2-science__head {
  margin-bottom: 52px;
  text-align: center;
}

.vs2-science__title {
  color: #ffffff !important;
  margin-bottom: 14px;
}

.vs2-science__lead {
  color: #b8c6ba;
  font-size: 18px;
  margin: 0 auto;
  max-width: 600px;
}

.vs2-science__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .vs2-science__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-science__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  padding: 30px 26px;
}

.vs2-science__cardhead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.vs2-science__icon {
  align-items: center;
  background: rgba(93, 176, 64, 0.16);
  border-radius: 13px;
  color: #a8d98c;
  display: flex;
  font-size: 22px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.vs2-science__no {
  color: var(--vs2-amber);
  font-family: var(--vs2-font-serif);
  font-size: 16px;
}

.vs2-science__cardtitle {
  color: #ffffff !important;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.vs2-science__cardbody {
  color: #b8c6ba;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 18px;
}

.vs2-science__chip {
  align-items: center;
  background: rgba(93, 176, 64, 0.16);
  border-radius: 999px;
  color: #a8d98c;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  padding: 6px 12px;
}

/* ---------- leefstijl-pijlers ---------- */

.vs2-pillars {
  padding-top: 82px;
}

.vs2-pillars__grid {
  align-items: start;
  display: grid;
  gap: 56px;
  grid-template-columns: 0.85fr 1.15fr;
}

@media (max-width: 991px) {
  .vs2-pillars__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.vs2-pillars__title {
  font-size: 38px;
  line-height: 1.08;
  margin-bottom: 22px;
}

.vs2-pillars__copy,
.vs2-pillars__copywrap p {
  color: var(--vs2-body-soft);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.vs2-pillars__cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 575px) {
  .vs2-pillars__cards {
    grid-template-columns: 1fr;
  }
}

.vs2-pillar {
  align-items: flex-start;
  border-radius: 16px;
  display: flex;
  gap: 15px;
  padding: 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

.vs2-pillar:hover {
  border-color: rgba(31, 61, 47, 0.28);
  box-shadow: 0 18px 40px -26px rgba(31, 61, 47, 0.34);
  transform: translateY(-4px);
}

.vs2-pillar__icon {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 12px;
  color: #1f3d2f;
  display: flex;
  flex: none;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.vs2-pillar__title {
  color: var(--vs2-forest);
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 5px;
}

.vs2-pillar__body {
  color: var(--vs2-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- protocol-teaser ---------- */

.vs2-protocol {
  padding-bottom: 40px;
  padding-top: 82px;
}

.vs2-protocol__grid {
  align-items: center;
  display: grid;
  gap: 60px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 991px) {
  .vs2-protocol__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.vs2-protocol__visual {
  background: linear-gradient(135deg, #e7ede4, #f0eee4);
  background-image: repeating-linear-gradient(45deg, rgba(31, 61, 47, 0.05) 0 14px, transparent 14px 28px);
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 24px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

/* Eigen protocol-afbeelding (paginaveld): vult het hele vlak */
.vs2-protocol__visual > .vs2-protocol__photo {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* De vier kernformules als losse, zacht zwevende productkaartjes */
.vs2-protocol__products {
  align-items: center;
  display: flex;
  gap: 14px;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.vs2-protocol__product {
  animation: vs2Float 7s ease-in-out infinite;
  background: var(--vs2-surface);
  border: 1px solid rgba(28, 38, 32, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 36px -20px rgba(31, 61, 47, 0.5);
  display: block;
  padding: 10px;
  transition: transform 0.2s ease;
}

.vs2-protocol__product:hover {
  transform: translateY(-4px);
}

.vs2-protocol__product:nth-child(even) {
  margin-top: 34px;
}

.vs2-protocol__product img {
  display: block;
  height: 104px;
  object-fit: contain;
  width: 82px;
}

@media (max-width: 575px) {
  .vs2-protocol__products {
    gap: 8px;
  }

  .vs2-protocol__product {
    padding: 7px;
  }

  .vs2-protocol__product img {
    height: 74px;
    width: 56px;
  }
}

.vs2-protocol__bottles {
  align-items: center;
  display: flex;
  gap: 10px;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.vs2-protocol__bottles span {
  background: var(--vs2-surface);
  border: 1px solid rgba(28, 38, 32, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 24px -16px rgba(31, 61, 47, 0.5);
  height: 88px;
  width: 56px;
}

.vs2-protocol__bottles span:nth-child(2) {
  margin-top: 28px;
}

.vs2-protocol__pricecard {
  background: var(--vs2-forest);
  border-radius: 14px;
  bottom: 20px;
  box-shadow: 0 14px 30px -16px rgba(31, 61, 47, 0.5);
  color: var(--vs2-pale);
  left: 20px;
  padding: 14px 18px;
  position: absolute;
}

.vs2-protocol__pricelabel {
  color: #a9c0af;
  font-size: 12.5px;
}

.vs2-protocol__price {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
}

.vs2-protocol__price span {
  color: #a9c0af;
  font-size: 12.5px;
  font-weight: 500;
}

.vs2-protocol__title {
  font-size: 40px;
  margin-bottom: 20px;
}

.vs2-protocol__lead {
  color: var(--vs2-body-soft);
  font-size: 18px;
  margin: 0 0 26px;
  max-width: 460px;
}

.vs2-protocol__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.vs2-protocol__step {
  align-items: flex-start;
  display: flex;
  gap: 16px;
}

.vs2-protocol__stepno {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 11px;
  color: var(--vs2-bone);
  display: flex;
  flex: none;
  font-size: 16px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.vs2-protocol__steptitle {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
}

.vs2-protocol__stepbody {
  color: var(--vs2-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- voordelen ---------- */

.vs2-benefits {
  padding-bottom: 40px;
  padding-top: 40px;
}

.vs2-benefits__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
  .vs2-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .vs2-benefits__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-benefit {
  border-radius: 18px;
  padding: 26px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

.vs2-benefit:hover {
  border-color: rgba(31, 61, 47, 0.28);
  box-shadow: 0 18px 40px -26px rgba(31, 61, 47, 0.34);
  transform: translateY(-4px);
}

.vs2-benefit__icon {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 12px;
  color: var(--vs2-forest);
  display: flex;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  margin-bottom: 16px;
  width: 44px;
}

.vs2-benefit__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 7px;
}

.vs2-benefit__body {
  color: var(--vs2-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- testimonial ---------- */

.vs2-testimonial-wrap {
  padding-bottom: 50px;
  padding-top: 50px;
}

.vs2-testimonial {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 28px;
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr auto;
  padding: 64px 56px;
}

@media (max-width: 991px) {
  .vs2-testimonial {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
}

.vs2-testimonial__stars {
  color: var(--vs2-amber);
  font-size: 20px;
  margin-bottom: 20px;
}

.vs2-testimonial__quote {
  color: var(--vs2-forest);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  margin: 0 0 24px;
}

.vs2-testimonial__who {
  align-items: center;
  display: flex;
  gap: 13px;
}

.vs2-testimonial__avatar {
  background: var(--vs2-forest);
  border-radius: 50%;
  height: 46px;
  width: 46px;
}

.vs2-testimonial__name {
  font-size: 15px;
  font-weight: 700;
}

.vs2-testimonial__meta {
  color: var(--vs2-muted);
  font-size: 13.5px;
}

.vs2-testimonial__stats {
  border-left: 1px solid rgba(31, 61, 47, 0.18);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 48px;
}

@media (max-width: 991px) {
  .vs2-testimonial__stats {
    border-left: 0;
    border-top: 1px solid rgba(31, 61, 47, 0.18);
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    padding-top: 24px;
  }
}

.vs2-testimonial__statn {
  color: var(--vs2-forest);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.vs2-testimonial__statlabel {
  color: var(--vs2-body-soft);
  font-size: 14px;
  margin-top: 3px;
}

/* ---------- faq ---------- */

/* ---------- homepage Longevity Blog-teaser ---------- */

.vs2-homeblog__head {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.vs2-homeblog__lead {
  color: var(--vs2-muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin-top: 8px;
  max-width: 560px;
}

.vs2-homeblog__all {
  flex: none;
  white-space: nowrap;
}

.vs2-homeblog__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

.vs2-homeblog__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
}

.vs2-homeblog__media {
  aspect-ratio: 16 / 10;
  background: var(--vs2-pale);
  overflow: hidden;
  position: relative;
}

.vs2-homeblog__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

.vs2-homeblog__card:hover .vs2-homeblog__media img {
  transform: scale(1.04);
}

.vs2-homeblog__cat {
  background: rgba(251, 250, 246, 0.94);
  border-radius: 999px;
  bottom: 12px;
  color: var(--vs2-forest);
  font-size: 11.5px;
  font-weight: 700;
  left: 12px;
  padding: 4px 11px;
  position: absolute;
}

.vs2-homeblog__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.vs2-homeblog__title {
  color: var(--vs2-ink);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.vs2-homeblog__card:hover .vs2-homeblog__title {
  color: var(--vs2-forest);
}

.vs2-homeblog__meta {
  color: var(--vs2-faint);
  font-size: 13px;
  margin-top: auto;
}

@media (max-width: 900px) {
  .vs2-homeblog__grid {
    grid-template-columns: 1fr;
  }

  .vs2-homeblog__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.vs2-faq {
  margin: 0 auto;
  max-width: 820px;
  padding: 70px var(--vs2-pad);
}

.vs2-faq__head {
  margin-bottom: 40px;
  text-align: center;
}

.vs2-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vs2-faq__item {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 16px;
  overflow: hidden;
}

.vs2-faq__q {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 17px;
  font-weight: 600;
  gap: 20px;
  justify-content: space-between;
  list-style: none;
  padding: 20px 24px;
  transition: color 0.18s;
}

.vs2-faq__q::-webkit-details-marker {
  display: none;
}

.vs2-faq__q:hover {
  color: var(--vs2-forest);
}

.vs2-faq__plus {
  color: var(--vs2-forest);
  flex: none;
  font-size: 26px;
  font-weight: 400;
  transition: transform 0.25s ease;
}

.vs2-faq__item[open] .vs2-faq__plus {
  transform: rotate(45deg);
}

.vs2-faq__a {
  color: var(--vs2-body-soft);
  font-size: 15.5px;
  line-height: 1.6;
  padding: 0 24px 22px;
}

/* ---------- cta-band ---------- */

.vs2-ctaband-wrap {
  margin: 0 auto;
  max-width: var(--vs2-max);
  padding: 20px var(--vs2-pad) 80px;
}

.vs2-ctaband {
  background: var(--vs2-forest);
  border-radius: 28px;
  overflow: hidden;
  padding: 64px 56px;
  position: relative;
  text-align: center;
}

@media (max-width: 767px) {
  .vs2-ctaband {
    padding: 44px 24px;
  }
}

.vs2-ctaband__circle {
  border-radius: 50%;
  position: absolute;
}

.vs2-ctaband__circle--tr {
  background: rgba(93, 176, 64, 0.12);
  height: 220px;
  right: -40px;
  top: -60px;
  width: 220px;
}

.vs2-ctaband__circle--bl {
  background: rgba(255, 255, 255, 0.05);
  bottom: -80px;
  height: 200px;
  left: -30px;
  width: 200px;
}

.vs2-ctaband__inner {
  position: relative;
}

.vs2-ctaband__title {
  color: #ffffff !important;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.vs2-ctaband__lead {
  color: #b8c6ba;
  font-size: 19px;
  margin: 0 auto 32px;
  max-width: 540px;
}

.vs2-ctaband__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ============================================================
   Productenpagina (Producten.dc.html)
   ============================================================ */

.vs2-breadcrumb {
  color: var(--vs2-faint);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 18px;
}

.vs2-breadcrumb a {
  color: var(--vs2-faint);
}

.vs2-breadcrumb a:hover {
  color: var(--vs2-forest);
}

.vs2-breadcrumb__sep {
  margin: 0 6px;
}

.vs2-breadcrumb__current {
  color: var(--vs2-ink);
  font-weight: 600;
}

.vs2-shop__head {
  padding-bottom: 30px;
  padding-top: 52px;
}

.vs2-shop__intro {
  align-items: end;
  display: grid;
  gap: 40px;
  grid-template-columns: 1.1fr 0.9fr;
}

@media (max-width: 991px) {
  .vs2-shop__intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.vs2-shop__title {
  font-size: clamp(34px, 3.7vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 14px;
}

.vs2-shop__lead {
  color: var(--vs2-body-soft);
  font-size: 18px;
  margin: 0;
  max-width: 480px;
}

.vs2-shop__stats {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .vs2-shop__stats {
    justify-content: flex-start;
  }
}

.vs2-shop__statn {
  color: var(--vs2-forest);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.vs2-shop__statlabel {
  color: var(--vs2-faint);
  font-size: 13px;
  margin-top: 2px;
}

.vs2-shop__statdivider {
  background: rgba(28, 38, 32, 0.14);
  width: 1px;
}

.vs2-shop__filters {
  padding-bottom: 30px;
}

.vs2-shop__filterbar {
  align-items: center;
  border-bottom: 1px solid rgba(28, 38, 32, 0.1);
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 20px 0;
}

@media (max-width: 767px) {
  .vs2-shop__filterbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

.vs2-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.vs2-chip {
  background: transparent;
  border: 1.5px solid rgba(28, 38, 32, 0.16);
  border-radius: 999px;
  color: #3c4a41;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 15px;
  transition: all 0.16s;
}

.vs2-chip.is-active {
  background: var(--vs2-forest);
  border-color: var(--vs2-forest);
  color: var(--vs2-bone);
}

.vs2-shop__gridwrap {
  padding-bottom: 40px;
}

.vs2-product__bundlemock {
  display: flex;
  gap: 8px;
}

.vs2-product__bundlemock span {
  background: var(--vs2-surface);
  border: 1px solid rgba(28, 38, 32, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 24px -16px rgba(31, 61, 47, 0.5);
  height: 110px;
  width: 46px;
}

.vs2-product__bundlemock span:nth-child(2) {
  margin-top: 16px;
}

/* ---------- bundel-CTA-band ---------- */

.vs2-bundlecta-wrap {
  padding-bottom: 70px;
  padding-top: 30px;
}

.vs2-bundlecta {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 26px;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr auto;
  overflow: hidden;
  padding: 52px 48px;
  position: relative;
}

@media (max-width: 991px) {
  .vs2-bundlecta {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
}

.vs2-bundlecta__circle {
  background: rgba(93, 176, 64, 0.1);
  border-radius: 50%;
  height: 200px;
  position: absolute;
  right: 120px;
  top: -50px;
  width: 200px;
}

.vs2-bundlecta__copy {
  position: relative;
}

.vs2-bundlecta__title {
  color: #ffffff !important;
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

.vs2-bundlecta__lead {
  color: #b8c6ba;
  font-size: 17px;
  margin: 0;
  max-width: 520px;
}

.vs2-bundlecta__panel {
  position: relative;
  text-align: right;
}

@media (max-width: 991px) {
  .vs2-bundlecta__panel {
    text-align: left;
  }
}

.vs2-bundlecta__pricing {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .vs2-bundlecta__pricing {
    justify-content: flex-start;
  }
}

.vs2-bundlecta__price {
  color: #ffffff;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-bundlecta__was {
  color: #a9c0af;
  font-size: 16px;
  text-decoration: line-through;
}

/* ============================================================
   Productdetail (Product-NMN.dc.html)
   ============================================================ */

.vs2-pdp__crumb {
  margin-bottom: 0;
  padding-top: 28px;
}

/* Breadcrumb op contentpagina's: zelfde uitlijning als de productpagina. */
.vs2-breadcrumb--page {
  margin-bottom: -10px;
  padding-top: 28px;
}

.vs2-pdp__grid {
  align-items: start;
  display: grid;
  gap: 56px;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 20px;
  padding-top: 28px;
}

@media (max-width: 991px) {
  .vs2-pdp__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.vs2-pdp__gallery {
  position: sticky;
  top: 130px;
}

@media (max-width: 991px) {
  .vs2-pdp__gallery {
    position: static;
  }
}

.vs2-pdp__gallerycard {
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 24px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.vs2-pdp__gallerycard .vs2-product__badge {
  left: 18px;
  top: 18px;
  z-index: 2;
}

.vs2-pdp__ratingrow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.vs2-pdp__stars {
  color: var(--vs2-amber);
  font-size: 16px;
}

.vs2-pdp__ratinglabel {
  color: var(--vs2-body-soft);
  font-size: 14px;
}

.vs2-pdp__ratinglabel b {
  color: var(--vs2-ink);
}

.vs2-pdp__dot {
  background: #c3ccbf;
  border-radius: 50%;
  height: 4px;
  width: 4px;
}

.vs2-pdp__stock {
  align-items: center;
  color: var(--vs2-mid);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
}

/* Live "op voorraad"-status: een echt groen bolletje met zachte pulse,
   zodat het voelt als een actuele voorraadstatus i.p.v. een label. */
.vs2-pdp__stockdot {
  animation: vs2-stockpulse 2.2s ease-out infinite;
  background: #4ea82f;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(78, 168, 47, 0.5);
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

@keyframes vs2-stockpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(78, 168, 47, 0.45);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(78, 168, 47, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(78, 168, 47, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs2-pdp__stockdot {
    animation: none;
  }
}

.vs2-pdp__title {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 6px;
}

.vs2-pdp__subtitle {
  color: var(--vs2-body-soft);
  font-size: 18px;
  margin: 0 0 24px;
}

.vs2-pdp__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.vs2-pdp__fact {
  background: var(--vs2-pale);
  border-radius: 12px;
  padding: 11px 15px;
}

.vs2-pdp__factlabel {
  color: var(--vs2-muted);
  font-size: 12px;
  font-weight: 500;
}

.vs2-pdp__factvalue {
  color: var(--vs2-forest);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.vs2-pdp__promises {
  color: var(--vs2-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  gap: 8px 20px;
  margin-top: 16px;
}

.vs2-pdp__usps {
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  margin-top: 26px;
  padding-top: 10px;
}

/* de bestaande Woo-koopform binnen de nieuwe schil */
.vs2-pdp__form .single_add_to_cart_button {
  background: var(--vs2-amber) !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: var(--vs2-shadow-amber) !important;
  color: var(--vs2-ink) !important;
  font-weight: 800 !important;
}

.vs2-pdp__form .single_add_to_cart_button:hover {
  transform: translateY(-2px);
}

.vs2-pdp__form .quantity .qty {
  border-color: rgba(28, 38, 32, 0.16) !important;
  border-radius: 11px !important;
}

/* ---------- reviews ---------- */

.vs2-pdp-reviews {
  padding-bottom: 40px;
  padding-top: 40px;
}

.vs2-pdp-reviews__grid {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: 0.8fr 2fr;
}

@media (max-width: 991px) {
  .vs2-pdp-reviews__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.vs2-pdp-reviews__summary {
  background: var(--vs2-pale);
  border-radius: 22px;
  padding: 34px 30px;
  position: sticky;
  top: 130px;
}

@media (max-width: 991px) {
  .vs2-pdp-reviews__summary {
    position: static;
  }
}

/* Trustpilot-stijl sterren (sitebreed): witte ster op groen vlak. */
.vs2-tpstars {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.vs2-tpstar {
  align-items: center;
  background: #00b67a;
  display: inline-flex;
  height: var(--tpsize, 18px);
  justify-content: center;
  width: var(--tpsize, 18px);
}

.vs2-tpstar svg {
  display: block;
  height: 74%;
  width: 74%;
}

/* Trustpilot-woordmerk boven het reviewblok. */
.vs2-reviewbadge {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  padding: 5px 12px;
}

.vs2-tplogo {
  align-items: center;
  color: #191919;
  display: inline-flex;
  font-size: 17px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.vs2-tplogo svg {
  height: 22px;
  width: 22px;
}

.vs2-pdp-reviews__avg {
  color: var(--vs2-forest);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.vs2-pdp-reviews__stars {
  margin: 12px 0 8px;
}

.vs2-pdp-reviews__count {
  color: var(--vs2-body-soft);
  font-size: 14px;
  margin-bottom: 4px;
}

.vs2-pdp-reviews__customers {
  color: var(--vs2-body-soft);
  font-size: 14px;
  margin-bottom: 22px;
}

.vs2-pdp-reviews__bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vs2-pdp-reviews__bar {
  align-items: center;
  color: var(--vs2-muted);
  display: flex;
  font-size: 13px;
  gap: 10px;
}

.vs2-pdp-reviews__barstar {
  white-space: nowrap;
  width: 62px;
}

.vs2-pdp-reviews__bartrack {
  background: rgba(31, 61, 47, 0.1);
  border-radius: 99px;
  flex: 1;
  height: 8px;
  overflow: hidden;
}

.vs2-pdp-reviews__barfill {
  background: #00b67a;
  border-radius: 99px;
  height: 100%;
}

.vs2-pdp-reviews__barpct {
  text-align: right;
  width: 34px;
}

.vs2-pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vs2-pdp-reviews__card {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  padding: 24px 26px;
}

.vs2-pdp-reviews__cardhead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vs2-pdp-reviews__who {
  align-items: center;
  display: flex;
  gap: 12px;
}

.vs2-pdp-reviews__avatar {
  border-radius: 50%;
  height: 38px;
  width: 38px;
}

.vs2-pdp-reviews__name {
  font-size: 15px;
  font-weight: 700;
}

.vs2-pdp-reviews__verified {
  color: var(--vs2-mid);
  font-size: 12.5px;
  font-weight: 600;
}

.vs2-pdp-reviews__cardstars {
  color: var(--vs2-amber);
  font-size: 14px;
}

.vs2-pdp-reviews__body {
  color: var(--vs2-body-soft);
  font-size: 15px;
  line-height: 1.55;
}

.vs2-pdp-reviews__empty {
  align-items: center;
  border: 1.5px dashed rgba(31, 61, 47, 0.18);
  border-radius: 18px;
  color: var(--vs2-muted);
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  min-height: 200px;
  padding: 30px;
  text-align: center;
}

/* ---------- gerelateerd ---------- */

.vs2-pdp-related {
  padding-bottom: 30px;
  padding-top: 50px;
}

.vs2-pdp-related__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.vs2-pdp-related__lead {
  color: var(--vs2-body-soft);
  font-size: 17px;
  margin: 0 0 30px;
}

.vs2-pdp-related__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .vs2-pdp-related__grid {
    grid-template-columns: 1fr;
  }
}

/* PDP: koopknop amber (wint van legacy .woocommerce button.button-regels) */
.vs2-pdp .vs2-pdp__form button.single_add_to_cart_button {
  background: var(--vs2-amber) !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: var(--vs2-shadow-amber) !important;
  color: var(--vs2-ink) !important;
  font-weight: 800 !important;
}

/* PDP: USP-lijst in design-stijl (vinkje in pale vlakje) */
.vs2-pdp__usps ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0 !important;
}

.vs2-pdp__usps li {
  color: #2a3a37;
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0 !important;
  padding: 0 0 0 37px !important;
  position: relative;
}

.vs2-pdp__usps li::before {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 8px;
  color: var(--vs2-forest);
  content: "✓";
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 24px;
}

.vs2-pdp__usps li img,
.vs2-pdp__usps li svg {
  display: none;
}

/* ---------- cadeau-voortgangsbalk (cart) ---------- */

.vs2-giftbar {
  background: var(--vs2-pale);
  border-radius: 14px;
  margin-bottom: 20px;
  padding: 16px 20px;
}

.vs2-giftbar__label {
  color: var(--vs2-body);
  font-size: 14.5px;
  margin-bottom: 10px;
}

.vs2-giftbar__label b {
  color: var(--vs2-forest);
}

.vs2-giftbar__track {
  background: rgba(31, 61, 47, 0.14);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

.vs2-giftbar__fill {
  background: linear-gradient(90deg, var(--vs2-mid), var(--vs2-amber));
  border-radius: 99px;
  height: 100%;
  transition: width 0.4s var(--vs2-ease);
}

/* ---------- PDP USP-vinkjes: wint van het legacy overrides-blok ---------- */

body.vs2 .vs2-pdp .vs2-pdp__usps li {
  margin: 0 !important;
  padding: 0 0 0 37px !important;
}

body.vs2 .vs2-pdp .vs2-pdp__usps li::before {
  align-items: center !important;
  background: var(--vs2-pale) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--vs2-forest) !important;
  content: "✓" !important;
  display: flex !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  height: 24px !important;
  justify-content: center !important;
  left: 0 !important;
  position: absolute !important;
  top: 0 !important;
  transform: none !important;
  width: 24px !important;
}

body.vs2 .vs2-pdp .vs2-pdp__usps li img,
body.vs2 .vs2-pdp .vs2-pdp__usps li svg {
  display: none !important;
}

/* Support-blok (gratis verzending/Trustpilot/VitaPoints) zelfde vinkjes-stijl */
body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(28, 38, 32, 0.1) !important;
  border-radius: 0 !important;
  margin-top: 20px !important;
  padding: 20px 0 0 !important;
}

body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support li {
  color: #2a3a37;
  font-size: 14.5px;
  margin: 0 !important;
  padding: 0 0 0 34px !important;
  position: relative;
  text-indent: 0 !important;
}

body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support li::before {
  align-items: center !important;
  background: var(--vs2-pale) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--vs2-forest) !important;
  content: "✓" !important;
  display: flex !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  height: 22px !important;
  justify-content: center !important;
  left: 0 !important;
  position: absolute !important;
  top: 0 !important;
  transform: none !important;
  width: 22px !important;
}

body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support li img,
body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support li svg {
  display: none !important;
}

body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support li img.trustpilot,
body.vs2 .vs2-pdp .vs2-pdp__buybox .vs-product-support img[src*="trustpilot"] {
  display: inline-block !important;
  height: 14px;
  vertical-align: middle;
  width: auto;
}

/* ============================================================
   WooCommerce systeempagina's (cart/checkout/account) — vs2
   ============================================================ */

.vs2-woo__head {
  padding-bottom: 10px;
  padding-top: 44px;
}

.vs2-woo__title {
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}

.vs2-woo__body {
  padding-bottom: 70px;
  padding-top: 18px;
}

/* notices (sitebreed, ook buiten de Woo-systeempagina's — bijv. de
   "toegevoegd aan winkelwagen"-melding op de homepage) */
body.vs2 .woocommerce-message,
body.vs2 .woocommerce-info,
body.vs2 .woocommerce-notice {
  align-items: center;
  background: var(--vs2-pale) !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: var(--vs2-body) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: space-between;
  padding: 14px 20px !important;
}

/* Woo zet het vinkje absoluut gepositioneerd — botst met onze padding. */
body.vs2 .woocommerce-message::before,
body.vs2 .woocommerce-info::before,
body.vs2 .woocommerce-notice::before {
  display: none !important;
}

/* Knop in de melding ("Verder winkelen") als nette outline-pill. Extra
   zware selectors: legacy-divi-child.css kleurt a.button.wc-forward met
   !important donkergroen. */
body.vs2 .woocommerce-message .button,
body.vs2 .woocommerce-message a.button.wc-forward,
body.vs2 .woocommerce-info .button {
  background: transparent !important;
  border: 1px solid rgba(31, 61, 47, 0.3) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--vs2-forest) !important;
  float: none;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1 !important;
  margin: 0 !important;
  order: 2;
  padding: 10px 16px !important;
  text-decoration: none !important;
  white-space: nowrap;
}

body.vs2 .woocommerce-message .button:hover,
body.vs2 .woocommerce-message a.button.wc-forward:hover,
body.vs2 .woocommerce-info .button:hover {
  background: #fff !important;
  border-color: var(--vs2-forest) !important;
  color: var(--vs2-forest) !important;
}

/* tabel als kaart */
.vs2-woo table.shop_table {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line) !important;
  border-collapse: separate !important;
  border-radius: 18px !important;
  overflow: hidden;
}

.vs2-woo table.shop_table th {
  background: transparent;
  color: var(--vs2-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vs2-woo table.shop_table td {
  border-top: 1px solid var(--vs2-line) !important;
  vertical-align: middle;
}

.vs2-woo .product-name a {
  font-weight: 600;
}

.vs2-woo .quantity .qty {
  background: var(--vs2-surface) !important;
  border: 1px solid rgba(28, 38, 32, 0.16) !important;
  border-radius: 11px !important;
}

/* knoppen */
.vs2-woo .button,
.vs2-woo button.button,
.vs2-woo a.button,
.vs2-woo .woocommerce button.button,
.vs2-woo #place_order {
  background: var(--vs2-forest) !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: var(--vs2-bone) !important;
  font-weight: 700 !important;
  padding: 13px 22px !important;
}

.vs2-woo a.checkout-button,
.vs2-woo .checkout-button,
.vs2-woo button#place_order,
.vs2-woo #place_order {
  background: var(--vs2-amber) !important;
  box-shadow: var(--vs2-shadow-amber) !important;
  color: var(--vs2-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* totals/overzicht als kaart */
.vs2-woo .cart_totals,
.vs2-woo #order_review {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  padding: 10px 22px 22px;
}

/* …maar op de eigen checkout zit #order_review al ín de "Jouw bestelling"-
   kaart — daar geen tweede kader eromheen. */
.vs2-woo .vs2-check__summary #order_review {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.vs2-woo .cart_totals table.shop_table,
.vs2-woo #order_review table.shop_table {
  border: 0 !important;
}

.vs2-woo .cart_totals h2,
.vs2-woo #order_review_heading {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* formuliervelden (checkout) */
.vs2-woo input.input-text,
.vs2-woo textarea.input-text,
.vs2-woo select,
.vs2-woo .select2-selection {
  background: var(--vs2-surface) !important;
  border: 1px solid rgba(28, 38, 32, 0.16) !important;
  border-radius: 11px !important;
  padding: 11px 14px !important;
}

.vs2-woo form .form-row label {
  color: var(--vs2-body);
  font-size: 13.5px;
  font-weight: 600;
}

/* ---------- bundel-nudge (cart) ---------- */

.vs2-nudge {
  align-items: center;
  background: var(--vs2-surface);
  border: 1.5px dashed rgba(31, 61, 47, 0.35);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 14px 18px;
}

.vs2-nudge__media img {
  border-radius: 10px;
  display: block;
  height: 54px;
  object-fit: contain;
  width: 54px;
}

.vs2-nudge__copy {
  flex: 1;
}

.vs2-nudge__title {
  color: var(--vs2-forest);
  font-size: 15.5px;
  font-weight: 700;
}

.vs2-nudge__sub {
  color: var(--vs2-muted);
  font-size: 13.5px;
  margin-top: 2px;
}

.vs2-nudge__btn {
  background: var(--vs2-forest);
  border-radius: 11px;
  color: var(--vs2-bone) !important;
  flex: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  transition: transform 0.16s ease;
}

.vs2-nudge__btn:hover {
  transform: translateY(-1px);
}

/* ============================================================
   Bundelbouwer (Product-Protocol.dc.html)
   ============================================================ */

.vs2-bundle__visual {
  background-color: #1f3d2f;
  background-image: repeating-linear-gradient(45deg, rgba(93, 176, 64, 0.06) 0 16px, transparent 16px 32px), linear-gradient(150deg, #1f3d2f, #2c5040);
  border-radius: 24px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.vs2-bundle__savebadge {
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  font-size: 12.5px;
  font-weight: 800;
  left: 20px;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  position: absolute;
  top: 20px;
  z-index: 2;
}

.vs2-bundle__bottles {
  align-items: center;
  display: flex;
  gap: 14px;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.vs2-bundle__bottle {
  align-items: center;
  animation: vs2Float 6s ease-in-out infinite;
  background: var(--vs2-surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 150px;
  justify-content: center;
  width: 88px;
}

.vs2-bundle__bottle:nth-child(2n) {
  height: 130px;
}

.vs2-bundle__bottledot {
  border-radius: 50%;
  height: 34px;
  width: 34px;
}

/* Echte productfoto in het flesjes-kaartje */
.vs2-bundle__bottlephoto {
  display: block;
  height: 92px;
  object-fit: contain;
  width: 72px;
}

.vs2-bundle__bottle:nth-child(2n) .vs2-bundle__bottlephoto {
  height: 76px;
}

.vs2-bundle__bottlename {
  color: var(--vs2-forest);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0 4px;
  text-align: center;
}

.vs2-bundle__chips {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.vs2-bundle__chip {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.1);
  border-radius: 12px;
  display: flex;
  flex: 1;
  font-size: 11px;
  font-weight: 800;
  gap: 7px;
  height: 64px;
  justify-content: center;
  color: var(--vs2-forest);
}

.vs2-bundle__chipdot {
  border-radius: 50%;
  height: 16px;
  width: 16px;
}

/* stap 1: opties */
.vs2-bundle__step {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  margin-bottom: 16px;
  padding: 20px 22px;
}

.vs2-bundle__stephead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vs2-bundle__steptitle {
  color: var(--vs2-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vs2-bundle__stepcount {
  color: var(--vs2-faint);
  font-size: 12.5px;
}

.vs2-bundle__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vs2-bundle__option {
  align-items: center;
  background: var(--vs2-bone);
  border: 1.5px solid rgba(28, 38, 32, 0.12);
  border-radius: 13px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  transition: border-color 0.16s, background 0.16s;
}

.vs2-bundle__option.is-selected {
  background: var(--vs2-panel-tint);
  border-color: var(--vs2-forest);
}

.vs2-bundle__option input {
  display: none;
}

.vs2-bundle__check {
  align-items: center;
  border: 1.5px solid rgba(28, 38, 32, 0.25);
  border-radius: 7px;
  color: transparent;
  display: flex;
  flex: none;
  font-size: 13px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  transition: all 0.16s;
  width: 22px;
}

.vs2-bundle__option.is-selected .vs2-bundle__check {
  background: var(--vs2-forest);
  border-color: var(--vs2-forest);
  color: var(--vs2-bone);
}

.vs2-bundle__optionswatch {
  align-items: center;
  border-radius: 9px;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.vs2-bundle__optionswatch span {
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

.vs2-bundle__optionswatch img {
  display: block;
  height: 38px;
  object-fit: contain;
  width: 38px;
}

.vs2-bundle__optioncopy {
  flex: 1;
}

.vs2-bundle__optionname {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.vs2-bundle__optiontag {
  color: var(--vs2-faint);
  display: block;
  font-size: 12px;
}

.vs2-bundle__optionprice {
  color: var(--vs2-forest);
  font-size: 14px;
  font-weight: 700;
}

/* stap 2: voordeel */
.vs2-bundle__discount {
  background: var(--vs2-panel-tint);
  border: 1.5px solid rgba(31, 61, 47, 0.25);
  border-radius: 18px;
  margin-bottom: 16px;
  padding: 18px 20px;
}

.vs2-bundle__discounthead {
  align-items: center;
  display: flex;
  gap: 14px;
}

.vs2-bundle__discountbadge {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 14px;
  color: var(--vs2-bone);
  display: flex;
  flex: none;
  flex-direction: column;
  font-size: 20px;
  font-weight: 800;
  height: 58px;
  justify-content: center;
  line-height: 1;
  width: 58px;
}

.vs2-bundle__discountbadge small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vs2-bundle__discounttitle {
  color: var(--vs2-forest);
  font-size: 15.5px;
  font-weight: 700;
}

.vs2-bundle__discounthint {
  color: var(--vs2-muted);
  font-size: 13px;
}

.vs2-bundle__ladder {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.vs2-bundle__rung {
  background: rgba(31, 61, 47, 0.08);
  border-radius: 9px;
  color: var(--vs2-muted);
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
  text-align: center;
}

.vs2-bundle__rung.is-active {
  background: var(--vs2-forest);
  color: var(--vs2-bone);
}

.vs2-bundle__mode {
  margin-bottom: 18px;
}

.vs2-bundle__totalrow {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vs2-bundle__pricing {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.vs2-bundle__price {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-bundle__was {
  color: #a2ada4;
  font-size: 16px;
  text-decoration: line-through;
}

.vs2-bundle__saving {
  color: var(--vs2-mid);
  font-size: 14px;
  font-weight: 700;
}

.vs2-bundle__add {
  width: 100%;
}

.vs2-bundle__add:disabled {
  cursor: default;
  opacity: 0.6;
  transform: none !important;
}

/* dagritme + waarom */
.vs2-bundle__routine {
  padding-bottom: 20px;
  padding-top: 60px;
}

.vs2-bundle__routinehead {
  margin-bottom: 36px;
  text-align: center;
}

.vs2-bundle__routinegrid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .vs2-bundle__routinegrid {
    grid-template-columns: 1fr;
  }
}

.vs2-bundle__routinecard {
  overflow: hidden;
}

.vs2-bundle__routinemedia {
  align-items: center;
  display: flex;
  font-size: 34px;
  height: 96px;
  justify-content: center;
  position: relative;
}

.vs2-bundle__routinemoment {
  font-size: 12px;
  font-weight: 700;
  left: 16px;
  letter-spacing: 0.06em;
  position: absolute;
  text-transform: uppercase;
  top: 14px;
}

.vs2-bundle__routinebody {
  padding: 22px 24px 26px;
}

.vs2-bundle__routinetitle {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.vs2-bundle__routinetext {
  color: var(--vs2-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.vs2-bundle__why {
  padding-bottom: 70px;
  padding-top: 20px;
}

.vs2-bundle__whygrid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .vs2-bundle__whygrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   De wetenschap (De-wetenschap.dc.html)
   ============================================================ */

.vs2-science-hero {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1.05fr 0.95fr;
  padding-bottom: 30px;
  padding-top: 56px;
}

@media (max-width: 991px) {
  .vs2-science-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.vs2-science-hero__lead {
  margin: 0;
  max-width: 480px;
}

.vs2-science-hero__visual {
  animation-delay: 0.1s;
  background: linear-gradient(150deg, #e7ede4, #dbe4d6);
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 24px;
  height: 380px;
  overflow: hidden;
  position: relative;
}

.vs2-science-hero__visual svg {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.vs2-nadpanel-wrap {
  padding-bottom: 30px;
  padding-top: 20px;
}

.vs2-nadpanel {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 28px;
  color: #c4d2c6;
  display: grid;
  gap: 52px;
  grid-template-columns: 1fr 1fr;
  padding: 60px 56px;
}

@media (max-width: 991px) {
  .vs2-nadpanel {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
}

.vs2-nadpanel__title {
  color: #ffffff !important;
  margin-bottom: 18px;
}

.vs2-nadpanel p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.vs2-nadchart {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 32px;
}

.vs2-nadchart__label {
  color: #a9c0af;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.vs2-nadchart__bars {
  align-items: flex-end;
  display: flex;
  gap: 14px;
  height: 170px;
}

.vs2-nadchart__col {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
}

.vs2-nadchart__bar {
  border-radius: 8px 8px 0 0;
  width: 100%;
}

.vs2-nadchart__age {
  color: #a9c0af;
  font-size: 13px;
  font-weight: 600;
}

.vs2-hallmarks,
.vs2-formules {
  padding-bottom: 30px;
  padding-top: 40px;
}

.vs2-hallmarks__head {
  margin-bottom: 44px;
  text-align: center;
}

.vs2-hallmarks__lead {
  color: var(--vs2-body-soft);
  font-size: 18px;
  margin: 12px auto 0;
  max-width: 560px;
}

.vs2-hallmarks__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 991px) {
  .vs2-hallmarks__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-hallmark {
  border-radius: 22px;
  display: flex;
  gap: 24px;
  padding: 34px 32px;
}

.vs2-hallmark__icon {
  align-items: center;
  border-radius: 16px;
  color: var(--vs2-forest);
  display: flex;
  font-size: 26px;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.vs2-hallmark__no {
  color: var(--vs2-faint);
  font-family: var(--vs2-font-serif);
  font-size: 15px;
  margin-top: 14px;
  text-align: center;
}

.vs2-hallmark__main {
  flex: 1;
}

.vs2-hallmark__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.vs2-hallmark__body {
  color: var(--vs2-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.vs2-hallmark__foot {
  align-items: center;
  border-top: 1px solid var(--vs2-line);
  display: flex;
  gap: 10px;
  padding-top: 14px;
}

.vs2-hallmark__footlabel {
  color: var(--vs2-faint);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vs2-hallmark__chip {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest) !important;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 700;
  gap: 7px;
  padding: 6px 13px;
}

.vs2-formules__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .vs2-formules__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-formule {
  display: block;
  padding: 28px 26px;
}

.vs2-formule__head {
  align-items: center;
  display: flex;
  gap: 13px;
  margin-bottom: 14px;
}

.vs2-formule__swatch {
  align-items: center;
  border-radius: 14px;
  display: flex;
  flex: none;
  height: 56px;
  justify-content: center;
  overflow: hidden;
  width: 56px;
}

.vs2-formule__swatch span {
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

/* Productfoto in de tegel: het tintje blijft de achtergrond. */
.vs2-formule__swatch img,
.vs2-formule__img {
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.vs2-formule__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.vs2-formule__tag {
  color: var(--vs2-mid);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vs2-formule__role {
  color: var(--vs2-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.vs2-formule__link {
  color: var(--vs2-forest);
  font-size: 13.5px;
  font-weight: 700;
}

.vs2-synergy-wrap {
  padding-bottom: 30px;
  padding-top: 30px;
}

.vs2-synergy {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 26px;
  display: grid;
  gap: 48px;
  grid-template-columns: 0.9fr 1.1fr;
  padding: 56px;
}

@media (max-width: 991px) {
  .vs2-synergy {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
}

.vs2-synergy__title {
  font-size: clamp(26px, 2.7vw, 34px);
  margin-bottom: 16px;
}

.vs2-synergy__copy {
  color: var(--vs2-body);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0;
}

.vs2-synergy__diagram {
  align-items: center;
  display: flex;
  gap: 20px;
}

@media (max-width: 575px) {
  .vs2-synergy__diagram {
    flex-direction: column;
    gap: 10px;
  }
}

.vs2-synergy__node {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  flex: 1;
  padding: 24px;
  text-align: center;
}

.vs2-synergy__node span {
  border-radius: 50%;
  display: block;
  height: 44px;
  margin: 0 auto 12px;
  width: 44px;
}

/* Productfoto op het tintje i.p.v. een bolletje. */
.vs2-synergy__node .vs2-synergy__prod {
  align-items: center;
  border-radius: 14px;
  display: flex;
  height: 56px;
  justify-content: center;
  margin: 0 auto 12px;
  overflow: hidden;
  width: 56px;
}

.vs2-synergy__node .vs2-synergy__prod img {
  height: 48px;
  object-fit: contain;
  width: 48px;
}

/* Uitkomst-blokje: DNA-icoon in het merkgroen. */
.vs2-synergy__node .vs2-synergy__icon {
  align-items: center;
  border-radius: 0;
  color: var(--vs2-amber);
  display: flex;
  height: 56px;
  justify-content: center;
  margin: 0 auto 12px;
  width: 56px;
}

.vs2-synergy__node .vs2-synergy__icon svg {
  height: 42px;
  width: 42px;
}

.vs2-synergy__node b {
  display: block;
  font-size: 16px;
}

.vs2-synergy__node small {
  color: var(--vs2-muted);
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

.vs2-synergy__node--dark {
  background: var(--vs2-forest);
  border: 0;
  color: #ffffff;
}

.vs2-synergy__node--dark small {
  color: #a9c0af;
}

.vs2-synergy__op {
  font-size: 28px;
  font-weight: 800;
}

.vs2-synergy__op--plus {
  color: var(--vs2-amber);
}

.vs2-synergy__op--eq {
  color: var(--vs2-mid);
}

/* ---------- bronnen & onderbouwing ---------- */

.vs2-sources {
  padding-bottom: 10px;
  padding-top: 20px;
}

.vs2-sources__head {
  margin-bottom: 22px;
  max-width: 720px;
}

.vs2-sources__note {
  color: var(--vs2-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 10px;
}

.vs2-sources__list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs2-sources__item {
  align-items: baseline;
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 14px 18px;
}

.vs2-sources__topic {
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 11px;
}

.vs2-sources__body {
  flex: 1;
  min-width: 240px;
}

.vs2-sources__title {
  color: var(--vs2-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

a.vs2-sources__title:hover {
  color: var(--vs2-forest);
  text-decoration: underline;
}

.vs2-sources__cite {
  color: var(--vs2-faint);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.vs2-science-outro {
  padding-bottom: 70px;
  padding-top: 10px;
}

.vs2-disclaimer {
  align-items: flex-start;
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  display: flex;
  gap: 16px;
  margin-bottom: 36px;
  padding: 24px 28px;
}

.vs2-disclaimer span {
  flex: none;
  font-size: 20px;
}

.vs2-disclaimer p {
  color: var(--vs2-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Vragen (Vragen.dc.html)
   ============================================================ */

.vs2-faqpage__head {
  padding-bottom: 10px;
  padding-top: 56px;
  text-align: center;
}

.vs2-faqpage__title {
  margin-bottom: 14px;
}

.vs2-faqpage__head .vs2-lead {
  margin: 0 auto;
  max-width: 560px;
}

.vs2-faqpage__contactlink {
  color: var(--vs2-mid) !important;
  font-weight: 700;
}

.vs2-faqpage__body {
  margin: 0 auto;
  max-width: 900px;
  padding-bottom: 70px;
  padding-top: 28px;
}

/* ---------- klantenservice: contactblok ---------- */

.vs2-service__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin: 8px auto 24px;
  max-width: 900px;
}

.vs2-service__card {
  align-items: flex-start;
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 3px;
  max-width: 420px;
  padding: 22px 24px;
  text-decoration: none;
}

a.vs2-service__card:hover {
  border-color: var(--vs2-mid);
}

.vs2-service__icon {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 11px;
  color: var(--vs2-forest);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 10px;
  width: 42px;
}

.vs2-service__cardlabel {
  color: var(--vs2-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vs2-service__cardvalue {
  color: var(--vs2-ink);
  font-size: 16px;
  font-weight: 700;
}

.vs2-service__cardnote {
  color: var(--vs2-muted);
  font-size: 13px;
  margin-top: 2px;
}

.vs2-service__faqtitle {
  margin-bottom: 18px;
}

/* Rijke FAQ-antwoorden (stappen, lijsten, tussenkopjes) op de klantenservice */
.vs2-faq__a--rich p {
  margin: 0 0 12px;
}

.vs2-faq__a--rich p:last-child {
  margin-bottom: 0;
}

.vs2-faq__a--rich strong {
  color: var(--vs2-ink);
  font-weight: 700;
}

.vs2-faq__a--rich ol,
.vs2-faq__a--rich ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.vs2-faq__a--rich li {
  margin-bottom: 6px;
}

.vs2-faq__a--rich a {
  color: var(--vs2-forest);
  font-weight: 600;
}

@media (max-width: 767px) {
  .vs2-service__contact {
    grid-template-columns: 1fr;
  }
}

.vs2-faqpage__chips {
  justify-content: center;
  margin-bottom: 28px;
}

/* ============================================================
   Protocol-pagina (Protocol.dc.html)
   ============================================================ */

.vs2-protocolpage__timeline {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--protocol-cols, 3), 1fr);
  padding-bottom: 30px;
  padding-top: 36px;
}

@media (max-width: 991px) {
  .vs2-protocolpage__timeline {
    grid-template-columns: 1fr;
  }
}

/* Optionele booster (TMG) — visueel losgekoppeld van de kern-routine */
.vs2-protocolpage__booster {
  align-items: center;
  border: 1px dashed rgba(31, 61, 47, 0.28);
  border-radius: 18px;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-bottom: 8px;
  padding: 22px 26px;
}

.vs2-protocolpage__boosterbadge {
  align-self: flex-start;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  text-transform: uppercase;
}

.vs2-protocolpage__boostercopy {
  flex: 1 1 340px;
}

.vs2-protocolpage__boostertitle {
  color: var(--vs2-forest);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.vs2-protocolpage__boostercopy p {
  color: var(--vs2-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.vs2-protocolpage__boosterbtn {
  flex: 0 0 auto;
}

.vs2-bundlecta__panelnote {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 13px;
  margin: 6px 0 14px;
}

.vs2-protocolpage__step {
  overflow: hidden;
}

.vs2-protocolpage__doses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.vs2-protocolpage__dose {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  gap: 7px;
  padding: 5px 11px;
}

.vs2-protocolpage__dose span {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.vs2-protocolpage__includes {
  color: #b8c6ba;
  display: grid;
  font-size: 14.5px;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.vs2-protocolpage__includes li::before {
  color: var(--vs2-amber);
  content: "✓ ";
  font-weight: 800;
}

.vs2-protocolpage__tips {
  padding-bottom: 70px;
  padding-top: 30px;
}

/* ============================================================
   Legacy-harmonisatie: oude vs-native-pagina's (over-ons, blog,
   contact, klantenservice, bio-leeftijd) op de nieuwe tokens
   totdat ze volledig herbouwd zijn.
   ============================================================ */

body.vs2 .vs-native-page .vs-native-hero,
body.vs2 .vs-native-page .vs-native-section {
  background: transparent !important;
}

body.vs2 .vs-native-page .vs-native-section--soft {
  background: var(--vs2-pale) !important;
  border-radius: 28px;
  margin: 20px auto;
  max-width: calc(var(--vs2-max) - 2 * var(--vs2-pad));
}

body.vs2 .vs-native-page h1,
body.vs2 .vs-native-page h2,
body.vs2 .vs-native-page h3 {
  color: var(--vs2-ink) !important;
  font-family: var(--vs2-font-sans) !important;
  letter-spacing: -0.03em !important;
}

body.vs2 .vs-native-page .vs-native-intro h1,
body.vs2 .vs-native-page .vs-content-title {
  font-weight: 800 !important;
}

body.vs2 .vs-native-page .btn,
body.vs2 .vs-native-page .vs-transition-button,
body.vs2 .vs-native-page .button {
  background: var(--vs2-forest) !important;
  border: 0 !important;
  border-radius: var(--vs2-r-btn) !important;
  box-shadow: none !important;
  color: var(--vs2-bone) !important;
  font-weight: 700 !important;
}

body.vs2 .vs-native-page .vs-post-card,
body.vs2 .vs-native-page .vs-category-card,
body.vs2 .vs-native-page .vs-info-card {
  background: var(--vs2-surface) !important;
  border: 1px solid var(--vs2-line) !important;
  border-radius: var(--vs2-r-card) !important;
}

body.vs2 .vs-native-page a {
  color: inherit;
}

body.vs2 .vs-native-page .vs-native-intro__text a,
body.vs2 .vs-native-page .vs-editor-content a {
  color: var(--vs2-mid) !important;
  font-weight: 700 !important;
}

/* ---------- PDP: Woo-restjes wegwerken (design-conform) ---------- */

/* "Maak uw keuze:"-label en "Wissen"-reset verbergen */
body.vs2 .vs2-pdp .vs2-pdp__form table.variations th.label,
body.vs2 .vs2-pdp .vs2-pdp__form table.variations td.label,
body.vs2 .vs2-pdp .vs2-pdp__form table.variations label,
body.vs2 .vs2-pdp .vs2-pdp__form .reset_variations {
  display: none !important;
}

/* dubbele voorraadbadge onder de prijs weg (staat al in de rating-regel) */
body.vs2 .vs2-pdp .vs2-pdp__form p.stock {
  display: none !important;
}

/* variatieprijs als nette totaalregel (design) */
body.vs2 .vs2-pdp .vs2-pdp__form .woocommerce-variation-price .price,
body.vs2 .vs2-pdp .vs2-pdp__form .woocommerce-variation-price .price .amount {
  color: var(--vs2-ink) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

body.vs2 .vs2-pdp .vs2-pdp__form .woocommerce-variation-price {
  margin: 6px 0 12px !important;
}

body.vs2 .vs2-pdp .vs2-pdp__form .woocommerce-variation-price del .amount {
  color: #a2ada4 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ============================================================
   Over-ons (Over-ons.dc.html)
   ============================================================ */

.vs2-about__hero {
  max-width: 900px;
  padding-bottom: 10px;
  padding-top: 56px;
}

.vs2-about__herolead {
  color: var(--vs2-body-soft);
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
}

.vs2-about__mission {
  padding-bottom: 40px;
  padding-top: 30px;
}

.vs2-about__companymedia {
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 26px;
  height: 400px;
  overflow: hidden;
}

.vs2-about__companyimg {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.vs2-about__missioncols {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr 1fr;
  margin-top: 44px;
}

@media (max-width: 767px) {
  .vs2-about__missioncols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.vs2-about__missioncols p {
  color: var(--vs2-body);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}

.vs2-about__missioncols a {
  color: var(--vs2-mid) !important;
  font-weight: 600;
  text-decoration: underline;
}

.vs2-about__founder {
  background: var(--vs2-forest);
  color: var(--vs2-pale);
  margin-top: 70px;
}

.vs2-about__foundergrid {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 0.85fr 1.15fr;
  padding-bottom: 80px;
  padding-top: 80px;
}

@media (max-width: 991px) {
  .vs2-about__foundergrid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 44px;
    padding-top: 44px;
  }
}

.vs2-about__portraitmedia {
  background: linear-gradient(135deg, #2c5040, #24402f);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  height: 440px;
  overflow: hidden;
}

.vs2-about__portraitimg {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.vs2-about__foundertitle {
  color: #ffffff !important;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  margin-bottom: 22px;
}

.vs2-about__founderbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vs2-about__founderbody p {
  color: #c4d2c6;
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0;
}

.vs2-about__signature {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-top: 26px;
}

.vs2-about__signame {
  color: #ffffff;
  font-size: 24px;
}

.vs2-about__sigrole {
  color: #a9c0af;
  font-size: 14px;
}

.vs2-about__quality {
  padding-bottom: 40px;
  padding-top: 80px;
}

.vs2-about__qualitygrid {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 991px) {
  .vs2-about__qualitygrid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.vs2-about__qualitytitle {
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.1;
  margin-bottom: 20px;
}

.vs2-about__qualitybody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vs2-about__qualitybody p {
  color: var(--vs2-body);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0;
}

.vs2-about__qualitycards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vs2-about__qualitycard {
  align-items: flex-start;
  border-radius: 16px;
  display: flex;
  gap: 16px;
  padding: 22px 24px;
}

.vs2-about__qualityicon {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 12px;
  color: var(--vs2-forest);
  display: flex;
  flex: none;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.vs2-about__qualityname {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.vs2-about__qualitytext {
  color: var(--vs2-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.vs2-about__contact-wrap {
  padding-bottom: 70px;
  padding-top: 40px;
}

.vs2-about__contact {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 28px;
  display: grid;
  gap: 48px;
  grid-template-columns: 1.2fr 0.8fr;
  padding: 60px 56px;
}

@media (max-width: 991px) {
  .vs2-about__contact {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 24px;
  }
}

.vs2-about__contacttitle {
  font-size: clamp(26px, 2.7vw, 34px);
  margin-bottom: 14px;
}

.vs2-about__contactlead {
  color: var(--vs2-body);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.vs2-about__contactbtns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   Winkelwagen — design v2 (Winkelwagen.dc.html)
   ============================================================ */

.vs2-woo .vs2-woo__body:has(.vs2-cart),
.vs2-woo .vs2-woo__body:has(.vs2-check),
.vs2-woo .vs2-woo__body:has(.vs2-thanks) {
  padding-top: 34px;
}

.vs2-cart__head {
  margin-bottom: 26px;
}

.vs2-cart__headrow {
  align-items: baseline;
  display: flex;
  gap: 14px;
  margin-bottom: 6px;
}

.vs2-cart__title {
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}

.vs2-cart__count {
  color: var(--vs2-muted);
  font-size: 16px;
}

.vs2-cart__continue {
  color: var(--vs2-mid) !important;
  font-size: 14.5px;
  font-weight: 600;
}

.vs2-cart__grid {
  align-items: start;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) 400px;
}

@media (max-width: 991px) {
  .vs2-cart__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Mobiel: de afreken-CTA (aside) direct onder de cartregels — het
     cross-sell-blok mag pas ná de primaire actie komen. */
  .vs2-cart__main {
    display: contents;
  }

  .vs2-cart__form {
    order: 1;
  }

  .vs2-cart__grid > .vs2-cart__aside {
    order: 2;
  }

  .vs2-cart__main > .vs2-crosssell {
    order: 3;
  }
}

.vs2-cart__aside {
  position: sticky;
  top: 130px;
}

@media (max-width: 991px) {
  .vs2-cart__aside {
    position: static;
  }
}

/* Meldingen (bundelkorting, verwijderd-uit-mand) in de linkerkolom */
.vs2-cart__main .woocommerce-message,
.vs2-cart__main .woocommerce-info {
  margin-bottom: 18px;
}

/* --- regels --- */

.vs2-cart__items {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  overflow: hidden;
}

.vs2-cart__row {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
}

.vs2-cart__row + .vs2-cart__row {
  border-top: 1px solid rgba(28, 38, 32, 0.07);
}

.vs2-cart__media {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 12px;
  display: flex;
  flex: none;
  height: 92px;
  justify-content: center;
  overflow: hidden;
  width: 74px;
}

.vs2-cart__media img {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100% !important;
}

.vs2-cart__info {
  flex: 1;
  min-width: 0;
}

.vs2-cart__toprow {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.vs2-cart__name,
.vs2-cart__name a {
  color: var(--vs2-ink) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vs2-cart__size {
  color: var(--vs2-muted);
  font-size: 13px;
  margin-top: 1px;
}

.vs2-cart__pricecol {
  text-align: right;
}

.vs2-cart__linetotal {
  font-size: 17px;
  font-weight: 800;
}

.vs2-cart__linetotal .woocommerce-Price-amount {
  font-weight: 800;
}

.vs2-cart__wastotal {
  color: #a2ada4;
  font-size: 12px;
  text-decoration: line-through;
}

/* "4 × € 33,96" — stuksuitleg onder het regeltotaal bij aantal > 1. */
.vs2-cart__unitcalc {
  color: var(--vs2-muted);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
}

.vs2-cart__pill {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 7px;
  margin-top: 9px;
  padding: 5px 11px;
}

.vs2-cart__pilldot {
  background: var(--vs2-mid);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.vs2-cart__controls {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.vs2-qty {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid rgba(28, 38, 32, 0.14);
  border-radius: 10px;
  display: inline-flex;
}

.vs2-qty__btn {
  background: none;
  border: 0;
  color: var(--vs2-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  height: 36px;
  line-height: 1;
  width: 34px;
}

.vs2-qty__btn:hover {
  color: var(--vs2-mid);
}

.vs2-qty__input {
  -moz-appearance: textfield;
  appearance: textfield;
  background: none;
  border: 0;
  color: var(--vs2-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
  text-align: center;
  width: 34px;
}

.vs2-qty__input::-webkit-outer-spin-button,
.vs2-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vs2-cart__single {
  color: var(--vs2-muted);
  font-size: 13px;
  font-weight: 600;
}

.vs2-cart__remove {
  background: none;
  border: 0;
  color: var(--vs2-faint) !important;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}

.vs2-cart__remove:hover {
  color: #b0472f !important;
}

.vs2-cart__actions {
  margin-top: 12px;
  text-align: right;
}

.vs2-cart__update {
  background: var(--vs2-pale);
  border: 0;
  border-radius: 10px;
  color: var(--vs2-forest);
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
}

/* Met JS werken de steppers automatisch; de fallback-knop verdwijnt. */
.vs2-js .vs2-cart__actions {
  height: 0;
  margin: 0;
  overflow: hidden;
}

.vs2-cart__form.is-updating {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* --- cross-sell --- */

.vs2-crosssell {
  margin-top: 26px;
}

.vs2-crosssell__head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.vs2-crosssell__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.vs2-crosssell__sub {
  color: var(--vs2-faint);
  font-size: 13px;
}

.vs2-crosssell__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vs2-crosssell__row {
  align-items: center;
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 14px;
  display: flex;
  gap: 14px;
  padding: 12px 16px;
}

.vs2-crosssell__media {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 10px;
  display: flex;
  flex: none;
  height: 64px;
  justify-content: center;
  overflow: hidden;
  width: 52px;
}

.vs2-crosssell__media img {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100% !important;
}

.vs2-crosssell__info {
  flex: 1;
  min-width: 0;
}

.vs2-crosssell__name {
  color: var(--vs2-ink) !important;
  display: block;
  font-size: 15.5px;
  font-weight: 700;
}

.vs2-crosssell__tag {
  color: var(--vs2-mid);
  font-size: 13px;
  font-weight: 600;
}

.vs2-crosssell__price {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  margin-right: 4px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .vs2-crosssell__row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .vs2-crosssell__media {
    grid-row: 1 / 3;
  }

  .vs2-crosssell__info {
    grid-column: 2 / 4;
  }

  .vs2-crosssell__price {
    align-self: center;
    grid-column: 2;
    justify-self: start;
    margin: 8px 0 0;
  }

  .vs2-crosssell__add {
    grid-column: 3;
    justify-self: end;
    margin-top: 8px;
  }

  .vs2-nudge {
    flex-wrap: wrap;
  }

  .vs2-nudge__btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

.vs2-crosssell__add {
  background: #ffffff;
  border: 1.5px solid var(--vs2-forest);
  border-radius: 11px;
  color: var(--vs2-forest) !important;
  flex: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 15px;
  transition: background 0.16s ease, color 0.16s ease;
}

.vs2-crosssell__add:hover {
  background: var(--vs2-forest);
  color: var(--vs2-bone) !important;
}

/* --- overzicht (zijbalk) --- */

.vs2-cartsum {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 20px;
  padding: 26px 24px;
}

.vs2-cartsum__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.vs2-cartsum__rows {
  color: var(--vs2-body);
  display: flex;
  flex-direction: column;
  font-size: 15px;
  gap: 11px;
}

.vs2-cartsum__row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.vs2-cartsum__row b {
  font-weight: 600;
}

.vs2-cartsum__row--save,
.vs2-cartsum__row--save b {
  color: var(--vs2-mid);
  font-weight: 600;
}

/* Totale korting: prominente groene balk in het overzicht. */
.vs2-cartsum__totalsave {
  align-items: center;
  background: var(--vs2-panel-tint);
  border: 1px solid rgba(47, 107, 79, 0.25);
  border-radius: 10px;
  color: var(--vs2-forest);
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  margin: 10px 0 4px;
  padding: 10px 14px;
}

.vs2-cartsum__totalsave b {
  color: var(--vs2-mid);
  font-size: 17px;
}

/* VitaPoints-spaarbanner in cart/checkout. */
.vp-earnbar {
  align-items: center;
  background: #faf4e3;
  border: 1px solid rgba(168, 106, 31, 0.28);
  border-radius: 12px;
  color: var(--vs2-ink);
  display: flex;
  font-size: 14.5px;
  gap: 12px;
  line-height: 1.45;
  margin: 12px 0;
  padding: 12px 16px;
}

.vp-earnbar__icon {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(168, 106, 31, 0.25);
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  font-size: 16px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.vp-earnbar .vp-pts,
.vp-earnbar b {
  color: var(--vs2-forest);
  font-weight: 800;
}

.vs2-cartsum__removecoupon {
  color: var(--vs2-faint) !important;
  font-size: 12px;
  text-decoration: underline;
}

.vs2-cartsum__free {
  color: var(--vs2-mid);
}

.vs2-cartsum__divider {
  background: rgba(28, 38, 32, 0.12);
  height: 1px;
  margin: 18px 0;
}

.vs2-cartsum__total {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.vs2-cartsum__total > span:first-child {
  font-size: 18px;
  font-weight: 800;
}

.vs2-cartsum__amount,
.vs2-cartsum__amount .woocommerce-Price-amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-cartsum__amount .includes_tax,
.vs2-review__grandamount .includes_tax {
  display: none;
}

.vs2-cartsum__note {
  color: var(--vs2-faint);
  font-size: 12.5px;
  margin-bottom: 18px;
}

.vs2-cartsum__cta {
  box-shadow: 0 12px 30px -12px rgba(93, 176, 64, 0.65);
  display: block;
  font-size: 17px;
  font-weight: 800;
  padding: 17px;
  text-align: center;
}

.vs2-cartsum__or {
  align-items: center;
  color: #a2ada4;
  display: flex;
  font-size: 12.5px;
  gap: 10px;
  margin: 14px 0;
}

.vs2-cartsum__or span {
  background: rgba(28, 38, 32, 0.12);
  flex: 1;
  height: 1px;
}

.vs2-cartsum__pay {
  display: flex;
  gap: 8px;
}

.vs2-paybadge {
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
}

.vs2-paybadge--ideal {
  background: #cc0066;
  color: #ffffff;
}

.vs2-paybadge--apple {
  background: var(--vs2-ink);
  color: #ffffff;
  font-weight: 700;
}

.vs2-paybadge--klarna {
  background: #ffb3c7;
  color: var(--vs2-ink);
}

.vs2-cartsum__trust {
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  color: var(--vs2-body);
  display: grid;
  font-size: 13px;
  font-weight: 500;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  padding-top: 20px;
}

.vs2-cartreview {
  background: var(--vs2-pale);
  border-radius: 18px;
  margin-top: 16px;
  padding: 20px 22px;
}

.vs2-cartreview__head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.vs2-cartreview__stars {
  color: var(--vs2-amber-dark);
  font-size: 15px;
}

.vs2-cartreview__count {
  color: var(--vs2-forest);
  font-size: 14px;
  font-weight: 700;
}

.vs2-cartreview__quote {
  color: var(--vs2-forest);
  font-family: var(--vs2-font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 10px;
}

.vs2-cartreview__by {
  color: var(--vs2-muted);
  font-size: 13px;
}

/* --- lege mand --- */

.vs2-cartempty {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: var(--vs2-r-panel);
  margin: 0 auto;
  max-width: 560px;
  padding: 56px 40px;
  text-align: center;
}

.vs2-cartempty__icon {
  font-size: 44px;
  margin-bottom: 14px;
}

.vs2-cartempty__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.vs2-cartempty__sub {
  color: var(--vs2-body-soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 24px;
}

.vs2-cartempty__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   Checkout — design v2 (Checkout.dc.html)
   ============================================================ */

.vs2-check__title {
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

.vs2-check__grid {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) 420px;
}

@media (max-width: 991px) {
  .vs2-check__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vs2-check__section {
  margin-bottom: 30px;
}

.vs2-check__hrow {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vs2-check__h {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.vs2-check__hrow .vs2-check__h {
  margin-bottom: 0;
}

.vs2-check__num {
  color: var(--vs2-amber-dark);
}

.vs2-check__login {
  color: var(--vs2-muted);
  font-size: 13.5px;
}

.vs2-check__login a {
  color: var(--vs2-mid) !important;
  font-weight: 600;
}

.vs2-check__note {
  color: var(--vs2-muted);
  font-size: 13.5px;
  margin: -8px 0 14px;
}

/* Melding dat er bij een abonnement automatisch een account wordt aangemaakt */
.vs2-check__accountnote {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 12px;
  color: var(--vs2-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 18px;
  padding: 12px 16px;
}

/* --- velden --- */

.vs2-check .form-row {
  margin: 0 0 12px;
  padding: 0;
  width: 100%;
}

.vs2-check .form-row label {
  display: block;
}

.vs2-check .form-row label.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Vast, zichtbaar label boven elk checkoutveld — context blijft zichtbaar
   zodra het veld is ingevuld (placeholders blijven als voorbeeldtekst). */
.vs2-check .form-row.vs2-toplabel > label {
  color: var(--vs2-muted);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 5px;
}

/* Ongeldig veld: label in de foutkleur */
.vs2-check .form-row.vs2-toplabel.woocommerce-invalid > label {
  color: #b0472f;
}

/* De verplicht-asterisk subtiel houden */
.vs2-check .form-row.vs2-toplabel > label .required {
  border: 0;
  color: var(--vs2-mid);
  text-decoration: none;
}

.vs2-check .form-row input.input-text,
.vs2-check .form-row textarea,
.vs2-check .form-row select,
.vs2-check .form-row .select2-selection--single {
  background: #ffffff;
  border: 1px solid rgba(28, 38, 32, 0.16);
  border-radius: var(--vs2-r-input);
  box-shadow: none;
  color: var(--vs2-ink);
  font-family: inherit;
  font-size: 15px;
  height: auto;
  line-height: 1.4;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.vs2-check .form-row input.input-text:focus,
.vs2-check .form-row select:focus {
  border-color: var(--vs2-mid);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.14);
  outline: none;
}

.vs2-check .form-row.woocommerce-invalid input.input-text,
.vs2-check .form-row.woocommerce-invalid select {
  border-color: #b0472f;
}

.vs2-check .form-row .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

.vs2-check .form-row .select2-selection__rendered {
  line-height: 1.4 !important;
  padding-left: 0 !important;
}

.vs2-check .form-row .select2-selection__arrow {
  height: 100% !important;
}

.vs2-check__cols {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.vs2-check__cols--zip {
  grid-template-columns: 1fr 1.3fr;
}

@media (max-width: 575px) {
  .vs2-check__cols {
    grid-template-columns: 1fr;
  }
}

.vs2-check .vs2-check__optin,
.vs2-check .create-account {
  margin-top: 2px;
}

.vs2-check .form-row .woocommerce-form__label-for-checkbox {
  align-items: center;
  color: var(--vs2-body);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 10px;
}

.vs2-check .form-row .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  accent-color: var(--vs2-forest);
  height: 17px;
  margin: 0;
  width: 17px;
}

/* Verzenden naar ander adres: compacte toggle onder het adres */
.vs2-check .woocommerce-shipping-fields h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 12px;
}

.vs2-check .woocommerce-shipping-fields #ship-to-different-address {
  color: var(--vs2-body);
}

.vs2-check .woocommerce-additional-fields h3 {
  font-size: 14.5px;
  margin: 0 0 12px;
}

/* --- betaalmethode --- */

.vs2-check #payment,
.vs2-check #payment ul.wc_payment_methods,
.vs2-check #payment div.form-row.place-order {
  background: transparent !important;
  border-radius: 0;
}

/* Woo's "(optioneel)"-suffix past niet bij de design-checkbox. */
.vs2-check .vs2-check__optin .optional {
  display: none;
}

.vs2-check #payment ul.wc_payment_methods {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method {
  background: var(--vs2-surface);
  border: 1.5px solid rgba(28, 38, 32, 0.14);
  border-radius: 13px;
  margin: 0;
  padding: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  background: #ffffff;
  border-color: var(--vs2-forest);
  box-shadow: 0 10px 24px -18px rgba(31, 61, 47, 0.55);
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method > label {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 15.5px;
  font-weight: 700;
  gap: 12px;
  margin: 0;
  padding: 15px 16px;
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method > input.input-radio {
  accent-color: var(--vs2-forest);
  height: 18px;
  margin: 15px 0 15px 16px;
  width: 18px;
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method > label {
  flex: 1;
}

.vs2-check #payment ul.wc_payment_methods li.wc_payment_method > label img {
  height: 24px;
  margin-left: auto;
  width: auto;
}

.vs2-check #payment div.payment_box {
  background: var(--vs2-pale);
  border-radius: 0 0 11px 11px;
  color: var(--vs2-body);
  font-size: 13.5px;
  margin: 0;
  padding: 12px 16px;
  width: 100%;
}

.vs2-check #payment div.payment_box::before {
  display: none;
}

.vs2-check #payment div.payment_box select,
.vs2-check #payment div.payment_box input {
  font-family: inherit;
}

.vs2-check #payment div.form-row.place-order {
  margin: 18px 0 0;
  padding: 0;
}

.vs2-check #place_order {
  background: var(--vs2-amber);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 30px -12px rgba(93, 176, 64, 0.65);
  color: var(--vs2-ink);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  padding: 18px;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  width: 100%;
}

.vs2-check #place_order:hover {
  transform: translateY(-2px);
}

.vs2-check .woocommerce-terms-and-conditions-wrapper {
  color: var(--vs2-muted);
  font-size: 13px;
  margin-top: 14px;
}

.vs2-check__promise {
  color: var(--vs2-mid);
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  text-align: center;
}

.vs2-check__badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.vs2-check__badges span {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.16);
  border-radius: 6px;
  color: var(--vs2-faint);
  display: flex;
  font-size: 11.5px;
  font-weight: 800;
  height: 26px;
  letter-spacing: 0.02em;
  padding: 0 10px;
}

.vs2-check__badges .vs2-check__lock {
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0;
}

/* --- zijbalk --- */

.vs2-check__aside {
  position: sticky;
  top: 130px;
}

@media (max-width: 991px) {
  .vs2-check__aside {
    position: static;
  }
}

.vs2-check__summary {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 20px;
  padding: 24px 22px;
}

.vs2-check__sumtitle {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.vs2-review__lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.vs2-review__line {
  align-items: center;
  display: flex;
  gap: 13px;
}

.vs2-review__media {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 10px;
  display: flex;
  flex: none;
  height: 64px;
  justify-content: center;
  position: relative;
  width: 52px;
}

.vs2-review__media img {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100% !important;
}

.vs2-review__qty {
  align-items: center;
  background: var(--vs2-ink);
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: -8px;
  top: -8px;
}

.vs2-review__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.vs2-review__name {
  font-size: 14.5px;
  font-weight: 700;
}

.vs2-review__size {
  color: var(--vs2-muted);
  font-size: 12px;
}

.vs2-review__disc {
  color: var(--vs2-mid);
  font-size: 12px;
  font-weight: 600;
}

.vs2-review__total {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

.vs2-review__totals {
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  color: var(--vs2-body);
  display: flex;
  flex-direction: column;
  font-size: 14.5px;
  gap: 9px;
  padding-top: 16px;
}

.vs2-review__row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.vs2-review__row b {
  font-weight: 600;
}

.vs2-review__row--save,
.vs2-review__row--save b {
  color: var(--vs2-mid);
  font-weight: 600;
}

.vs2-review__removecoupon {
  color: var(--vs2-faint) !important;
  font-size: 12px;
  text-decoration: underline;
}

.vs2-review__free {
  color: var(--vs2-mid);
}

.vs2-review__grand {
  align-items: baseline;
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  padding-top: 14px;
}

.vs2-review__grand > span:first-child {
  font-size: 17px;
  font-weight: 800;
}

.vs2-review__grandamount,
.vs2-review__grandamount .woocommerce-Price-amount {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-review__note {
  color: var(--vs2-faint);
  font-size: 12.5px;
}

/* --- kortingscode --- */

.vs2-check__coupon {
  margin-top: 18px;
}

.vs2-check__couponrow {
  display: flex;
  gap: 8px;
}

.vs2-check__couponinput {
  background: #ffffff;
  border: 1px solid rgba(28, 38, 32, 0.16);
  border-radius: 12px;
  color: var(--vs2-ink);
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
  padding: 11px 13px;
}

.vs2-check__couponbtn {
  background: var(--vs2-pale);
  border: 0;
  border-radius: 12px;
  color: var(--vs2-forest);
  cursor: pointer;
  flex: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 0 18px;
}

.vs2-check__couponmsg {
  font-size: 13px;
  margin-top: 8px;
}

.vs2-check__couponmsg .woocommerce-message,
.vs2-check__couponmsg .woocommerce-error {
  background: none;
  border: 0;
  color: var(--vs2-mid);
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.vs2-check__couponmsg .woocommerce-error {
  color: #b0472f;
  list-style: none;
}

/* --- bump + redenen --- */

.vs2-bump {
  background: var(--vs2-forest);
  border-radius: 16px;
  margin-top: 14px;
  overflow: hidden;
  padding: 18px 20px;
  position: relative;
}

.vs2-bump__badge {
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  padding: 3px 9px;
  text-transform: uppercase;
}

.vs2-bump__row {
  align-items: center;
  display: flex;
  gap: 13px;
}

.vs2-bump__media {
  align-items: center;
  border-radius: 9px;
  display: flex;
  flex: none;
  height: 54px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.vs2-bump__media img {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100% !important;
}

.vs2-bump__name {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.vs2-bump__sub {
  color: #a9c0af;
  font-size: 12.5px;
}

.vs2-bump__sub b {
  color: var(--vs2-amber);
}

.vs2-bump__btn {
  background: var(--vs2-amber);
  border-radius: 11px;
  color: var(--vs2-ink) !important;
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-top: 12px;
  padding: 10px;
  text-align: center;
}

.vs2-check__reasons {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 16px;
  margin-top: 14px;
  padding: 20px;
}

.vs2-check__reasonstitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.vs2-check__reasonlist {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.vs2-check__reasonlist span {
  color: var(--vs2-body);
  display: flex;
  font-size: 13.5px;
  gap: 10px;
}

.vs2-check__reasonlist b {
  color: var(--vs2-mid);
  flex: none;
}

/* Mobiel: overzicht boven de velden is onhandig — DOM-volgorde is al goed
   (main eerst), alleen ruimte bijsturen. */
@media (max-width: 991px) {
  .vs2-check__aside {
    margin-top: 8px;
  }
}

/* ============================================================
   Bedankpagina — design v2
   ============================================================ */

.vs2-thanks {
  margin: 0 auto;
  max-width: 760px;
  padding: 26px 0 20px;
  text-align: center;
}

.vs2-thanks__icon {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 36px;
  height: 76px;
  justify-content: center;
  margin: 0 auto 24px;
  width: 76px;
}

.vs2-thanks__icon--failed {
  background: #b0472f;
}

.vs2-thanks__title {
  font-size: clamp(30px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

.vs2-thanks__lead {
  color: var(--vs2-body-soft);
  font-size: 18px;
  margin: 0 0 8px;
}

.vs2-thanks__sub {
  color: var(--vs2-muted);
  font-size: 16px;
  margin: 0 0 30px;
}

.vs2-thanks__sub b {
  color: var(--vs2-forest);
}

.vs2-thanks__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

.vs2-thanks__details {
  margin-top: 44px;
  text-align: left;
}

.vs2-thanks__details .woocommerce-order-overview {
  display: none;
}

.vs2-thanks__details h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ============================================================
   Abonnementen — design v2 (plugin vitasure-subscriptions)
   ============================================================ */

/* --- PDP: aankoopvorm-kaarten (Abonneren & besparen / Eenmalig kopen) --- */

.vs2-pdp .vs-subs-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
}

.vs2-pdp .vs-subs-option {
  align-items: center;
  background: var(--vs2-surface);
  border: 1.5px solid rgba(28, 38, 32, 0.14);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.vs2-pdp .vs-subs-option:hover {
  border-color: rgba(28, 38, 32, 0.3);
}

.vs2-pdp .vs-subs-option.is-selected {
  background: #ffffff;
  border-color: var(--vs2-forest);
  box-shadow: 0 10px 24px -18px rgba(31, 61, 47, 0.55);
}

.vs2-pdp .vs-subs-option input[type="radio"] {
  accent-color: var(--vs2-forest);
  flex: none;
  height: 18px;
  margin: 0;
  width: 18px;
}

.vs2-pdp .vs-subs-option__body {
  align-items: center;
  display: grid;
  flex: 1;
  gap: 2px 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.vs2-pdp .vs-subs-option__title {
  align-items: center;
  color: var(--vs2-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 700;
  gap: 8px;
  grid-column: 1;
}

.vs2-pdp .vs-subs-option__badge {
  background: rgba(93, 176, 64, 0.16);
  border-radius: 999px;
  color: var(--vs2-amber-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  text-transform: uppercase;
}

.vs2-pdp .vs-subs-option__price {
  color: var(--vs2-forest);
  font-size: 19px;
  font-weight: 800;
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  text-align: right;
}

.vs2-pdp .vs-subs-option__price .vs-subs-suffix {
  color: var(--vs2-faint);
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.vs2-pdp .vs-subs-option__meta {
  color: var(--vs2-muted);
  font-size: 13px;
  grid-column: 1;
  margin: 0;
}

/* --- cart: abo-pill, wisselknoppen en nudge --- */

.vs2-cart__flags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.vs2-cart__pill--sub {
  background: rgba(93, 176, 64, 0.16);
  color: var(--vs2-forest);
}

.vs2-cart__pill--sub .vs2-cart__pilldot {
  background: var(--vs2-amber-dark);
}

.vs2-cart__modeswitch {
  color: var(--vs2-faint) !important;
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
  text-decoration: underline;
}

.vs2-cart__modeswitch:hover {
  color: var(--vs2-ink) !important;
}

.vs2-cart__subswitch {
  background: #ffffff;
  border: 1.5px solid var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-forest) !important;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 9px;
  padding: 6px 12px;
  transition: background 0.15s ease;
}

.vs2-cart__subswitch:hover {
  background: rgba(93, 176, 64, 0.12);
}

.vs2-cart__flags .vs2-cart__pill {
  margin-top: 9px;
}

.vs2-abonudge {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 16px;
  color: var(--vs2-pale);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 16px 20px;
}

.vs2-abonudge__copy {
  align-items: center;
  display: flex;
  gap: 13px;
}

.vs2-abonudge__icon {
  align-items: center;
  background: rgba(93, 176, 64, 0.22);
  border-radius: 11px;
  display: flex;
  flex: none;
  font-size: 19px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.vs2-abonudge__title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.vs2-abonudge__sub {
  color: #b8c6ba;
  font-size: 13px;
}

.vs2-abonudge__sub b {
  color: #d3ecc5;
}

.vs2-abonudge__btn {
  background: var(--vs2-amber);
  border-radius: 11px;
  color: var(--vs2-ink) !important;
  flex: none;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 18px;
  text-align: center;
}

@media (max-width: 575px) {
  .vs2-abonudge {
    flex-wrap: wrap;
  }

  .vs2-abonudge__btn {
    flex: 1 1 100%;
  }
}

/* --- bundelbouwer: abonnementsmodus ---
   De kortingsladder blijft in beide modi zichtbaar; vs2.js wisselt de
   percentages (0/5/10 eenmalig, 10/12/15 abonnement). */

.vs2-bundle__subnote {
  color: var(--vs2-mid);
  font-size: 13.5px;
  font-weight: 600;
  margin: 10px 0 0;
}

/* Plugin-regel "Abonnement: automatische verlenging" in de cart-rij is
   dubbelop met onze pill. */
.vs2-cart__titles dl.variation dt.variation-Abonnement,
.vs2-cart__titles dl.variation dd.variation-Abonnement {
  display: none;
}

.vs2-cart__titles dl.variation {
  color: var(--vs2-muted);
  font-size: 12.5px;
  margin: 2px 0 0;
}

.vs2-cart__titles dl.variation dt,
.vs2-cart__titles dl.variation dd {
  display: inline;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

/* De aankoopvorm-kaarten staan binnen de legacy koopform-grid (70px | 1fr):
   over de volle breedte spannen, boven aantal + knop. */
body.vs2.single-product .vs-product-purchase .woocommerce-variation-add-to-cart .vs-subs-options,
body.vs2.single-product .vs-product-purchase form.cart > .vs-subs-options {
  grid-column: 1 / -1 !important;
  margin-bottom: 4px;
  width: 100%;
}

/* ============================================================
   PDP-herbouw — design v2 (Product-NMN.dc.html)
   ============================================================ */

/* --- galerij: kader alléén om de hoofdmedia --- */

.vs2-gal__main {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.08);
  border-radius: 24px;
  display: flex;
  height: 500px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.vs2-gal__main img,
.vs2-gal__main .vs2-gal__video {
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

.vs2-gal__badge {
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  font-size: 12px;
  font-weight: 800;
  left: 18px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  position: absolute;
  top: 18px;
  z-index: 2;
}

.vs2-gal__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.vs2-gal__thumb {
  background: var(--vs2-pale);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 84px;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: border-color 0.15s ease;
  width: 84px;
}

.vs2-gal__thumb img,
.vs2-gal__thumb video {
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

.vs2-gal__thumb.is-active {
  border-color: var(--vs2-forest);
}

.vs2-gal__play {
  align-items: center;
  background: rgba(20, 28, 23, 0.65);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 10px;
  height: 26px;
  justify-content: center;
  left: 50%;
  padding-left: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
}

@media (max-width: 991px) {
  .vs2-gal__main {
    height: 380px;
  }
}

/* --- staffel-tegels --- */

.vs2-buy__tiershead {
  margin-bottom: 11px;
}

.vs2-buy__tierstitle {
  color: var(--vs2-ink);
  font-size: 14px;
  font-weight: 700;
}

.vs2-buy__tierstitle span {
  color: var(--vs2-faint);
  font-weight: 500;
}

.vs2-buy__tiers {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--vs2-tiercols, 4), minmax(0, 1fr));
  margin-bottom: 22px;
}

.vs2-buy__tier {
  background: var(--vs2-surface);
  border: 2px solid rgba(28, 38, 32, 0.14);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 11px 8px 10px;
  position: relative;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vs2-buy__tier:hover {
  border-color: rgba(28, 38, 32, 0.3);
}

.vs2-buy__tier.is-active {
  background: var(--vs2-panel-tint);
  border-color: var(--vs2-forest);
}

.vs2-buy__tier.is-oos {
  cursor: not-allowed;
  opacity: 0.45;
}

.vs2-buy__tierbadge {
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  font-size: 10.5px;
  font-weight: 800;
  left: 50%;
  padding: 2px 8px;
  position: absolute;
  top: -9px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.vs2-buy__tiercaps {
  color: var(--vs2-ink);
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.vs2-buy__tierbottles {
  color: var(--vs2-faint);
  display: block;
  font-size: 11.5px;
  margin: 1px 0 6px;
}

/* Held: totale packprijs (wat je betaalt). */
.vs2-buy__tiertotal {
  color: var(--vs2-ink);
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.vs2-buy__tiertotal .woocommerce-Price-amount {
  font-weight: 800;
}

/* Groen: totale besparing — het enige extra getal. */
.vs2-buy__tiersave {
  color: var(--vs2-mid);
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 1px;
}

.vs2-buy__tiersave .woocommerce-Price-amount {
  font-weight: 700;
}

@media (max-width: 575px) {
  .vs2-buy__tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
}

/* fallback: producten met meerdere attributen tonen nette selects */
.vs2-buy__attrs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.vs2-buy__attrlabel {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

.vs2-buy__attrs select {
  background: #ffffff;
  border: 1.5px solid rgba(28, 38, 32, 0.16);
  border-radius: 11px;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
}

/* --- koopvorm-kaarten --- */

.vs2-buy__modes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.vs2-buy__mode {
  align-items: center;
  background: var(--vs2-surface);
  border: 2px solid rgba(28, 38, 32, 0.14);
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 16px 20px;
  transition: border-color 0.15s ease;
}

.vs2-buy__mode:hover {
  border-color: rgba(28, 38, 32, 0.3);
}

.vs2-buy__mode.is-selected {
  border-color: var(--vs2-forest);
}

.vs2-buy__mode input[type="radio"] {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.vs2-buy__radio {
  background: var(--vs2-surface);
  border: 2px solid #b8c2b8;
  border-radius: 50%;
  flex: none;
  height: 20px;
  position: relative;
  width: 20px;
}

.vs2-buy__mode.is-selected .vs2-buy__radio {
  border-color: var(--vs2-forest);
}

.vs2-buy__mode.is-selected .vs2-buy__radio::after {
  background: var(--vs2-forest);
  border-radius: 50%;
  content: "";
  inset: 3px;
  position: absolute;
}

.vs2-buy__modecopy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.vs2-buy__modetitle {
  color: var(--vs2-ink);
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.vs2-buy__modemeta {
  color: var(--vs2-muted);
  display: block;
  font-size: 13.5px;
}

/* "Je betaalt € X per levering" — uitleg bij pakketten van meerdere maanden. */
.vs2-buy__perdelivery {
  color: var(--vs2-forest);
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 3px;
}

/* Maandequivalent onder de eenmalige prijs. */
.vs2-buy__permonth {
  color: var(--vs2-muted);
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

/* Komende incasso's (Mijn account → Abonnementen). */
.vs2-subs-schedule {
  background: #fff;
  border: 1px solid var(--vs2-line-strong);
  border-radius: 14px;
  margin: 0 0 18px;
  padding: 16px 20px;
}

.vs2-subs-schedule__title {
  color: var(--vs2-ink);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}

.vs2-subs-schedule__row {
  border-top: 1px solid var(--vs2-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  padding: 9px 0;
}

.vs2-subs-schedule__date {
  color: var(--vs2-forest);
  flex: 0 0 130px;
  font-weight: 700;
}

.vs2-subs-schedule__items {
  color: var(--vs2-body);
  flex: 1 1 200px;
}

.vs2-subs-schedule__total {
  color: var(--vs2-mid);
  margin-left: auto;
}

.vs2-subs-schedule__note {
  border-top: 1px solid var(--vs2-line);
  color: var(--vs2-faint);
  font-size: 12.5px;
  padding-top: 10px;
}

.vs2-buy__modehint {
  color: var(--vs2-mid) !important;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 3px;
}

.vs2-buy__modeprice {
  text-align: right;
}

.vs2-buy__modeprice b {
  color: var(--vs2-forest);
  display: block;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.vs2-buy__modeprice s {
  color: #a2ada4;
  display: block;
  font-size: 12px;
}

/* --- koopknop --- */

.vs2-buy .woocommerce-variation.single_variation {
  display: none !important;
}

.vs2-buy__actions {
  display: block;
  margin-bottom: 16px;
}

.vs2-pdp__form .vs2-buy__add,
.vs2-buy .vs2-buy__add {
  align-items: center;
  background: var(--vs2-amber);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 12px 30px -14px rgba(93, 176, 64, 0.65);
  color: var(--vs2-ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  padding: 16px;
  transition: transform 0.16s ease;
  width: 100%;
}

.vs2-pdp__form .vs2-buy__add:hover {
  transform: translateY(-2px);
}

.vs2-buy__adddot {
  opacity: 0.6;
}

.vs2-buy__savechip {
  background: rgba(28, 38, 32, 0.14);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 9px;
}

/* --- highlights (excerpt-USP's) --- */

body.vs2 .vs2-pdp .vs2-pdp__usps {
  border-top: 1px solid rgba(28, 38, 32, 0.1);
  margin-top: 26px;
  padding-top: 10px;
}

/* --- trust-badges --- */

.vs2-pdp__trust {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.vs2-pdp__trustlead {
  color: var(--vs2-faint);
  font-size: 12.5px;
  font-weight: 600;
  margin-right: 2px;
}

.vs2-pdp__trustbadge {
  align-items: center;
  border: 1px solid rgba(28, 38, 32, 0.16);
  border-radius: 6px;
  color: var(--vs2-faint);
  display: flex;
  font-size: 11.5px;
  font-weight: 800;
  height: 26px;
  letter-spacing: 0.02em;
  padding: 0 10px;
}

/* --- tabs --- */

.vs2-pdp-tabs {
  padding-bottom: 20px;
  padding-top: 50px;
}

.vs2-pdp-tabs__nav {
  border-bottom: 1px solid rgba(28, 38, 32, 0.12);
  display: flex;
  gap: 6px;
  margin-bottom: 34px;
}

/* Alleen op mobiel horizontaal swipebaar; verticaal nooit scrollen (de
   tabs hangen 1px over de rand voor het actieve streepje). */
@media (max-width: 767px) {
  .vs2-pdp-tabs__nav {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.vs2-pdp-tabs__tab {
  background: none;
  border: 0;
  border-bottom: 2.5px solid transparent;
  color: var(--vs2-faint);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 12px 18px;
  white-space: nowrap;
}

.vs2-pdp-tabs__tab.is-active {
  border-bottom-color: var(--vs2-forest);
  color: var(--vs2-forest);
  font-weight: 700;
}

.vs2-pdp-tabs__panel {
  display: none;
  min-height: 200px;
}

.vs2-pdp-tabs__panel.is-active {
  display: block;
}

.vs2-pdp-tabs__prose {
  color: var(--vs2-body);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 760px;
}

.vs2-pdp-tabs__prose p {
  margin: 0 0 16px;
}

.vs2-pdp-tabs__prose h2,
.vs2-pdp-tabs__prose h3 {
  color: var(--vs2-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 26px 0 12px;
}

.vs2-pdp-tabs__prose img {
  border-radius: 14px;
  height: auto;
  max-width: 100%;
}

.vs2-pdp-tabs__lead {
  color: var(--vs2-forest);
  font-family: var(--vs2-font-serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  margin-top: 0 !important;
}

.vs2-pdp-tabs__note {
  background: var(--vs2-pale);
  border-radius: 14px;
  color: #2f5a45;
  font-size: 15px;
  margin: 24px 0 0;
  padding: 18px 22px;
}

.vs2-pdp-tabs__list,
.vs2-pdp-tabs__prose ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding-left: 20px;
}

/* Notitiekader kan uit de editor komen (citaat-blok) en bevat dan een <p>. */
.vs2-pdp-tabs__note p {
  margin: 0;
}

/* Bronnen onder de wetenschap-tab */
.vs2-pdp-sources {
  border-top: 1px solid var(--vs2-line);
  margin-top: 22px;
  padding-top: 18px;
}

.vs2-pdp-sources__label {
  color: var(--vs2-forest);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vs2-pdp-sources__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.vs2-pdp-sources__list li {
  margin-bottom: 10px;
}

.vs2-pdp-sources__list a {
  color: var(--vs2-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.vs2-pdp-sources__list a:hover {
  color: var(--vs2-forest);
  text-decoration: underline;
}

.vs2-pdp-sources__list small {
  color: var(--vs2-faint);
  display: block;
  font-size: 12.5px;
  margin-top: 1px;
}

.vs2-pdp-sources__note {
  color: var(--vs2-faint);
  font-size: 12.5px;
  margin: 12px 0 0;
}

.vs2-pdp-tabs__ingr {
  max-width: 600px;
}

.vs2-pdp-tabs__ingrsub {
  color: var(--vs2-muted);
  font-size: 14px;
  margin-bottom: 14px;
}

.vs2-pdp-tabs__ingrtable {
  border: 1px solid rgba(28, 38, 32, 0.12);
  border-radius: 14px;
  overflow: hidden;
}

.vs2-pdp-tabs__ingrrow {
  display: flex;
  font-size: 15.5px;
  justify-content: space-between;
  padding: 15px 20px;
}

.vs2-pdp-tabs__ingrrow:nth-child(even) {
  background: var(--vs2-surface);
}

.vs2-pdp-tabs__ingrrow + .vs2-pdp-tabs__ingrrow {
  border-top: 1px solid rgba(28, 38, 32, 0.08);
}

.vs2-pdp-tabs__ingrrow span {
  color: #2a3a37;
  font-weight: 500;
}

.vs2-pdp-tabs__ingrrow b {
  color: var(--vs2-forest);
  font-weight: 700;
}

.vs2-pdp-tabs__ingrnote {
  color: var(--vs2-faint);
  font-size: 13.5px;
  margin-top: 14px;
}

/* --- content-tabellen (producttekst & blogartikelen) ---
   Tabellen die redacteuren in de editor plakken (bv. testresultaten)
   krijgen automatisch de kaart-opmaak van het design. */

.vs2-pdp-tabs__prose table,
.entry-content table {
  background: #fff;
  border: 1px solid var(--vs2-line-strong);
  border-collapse: separate;
  border-radius: 14px;
  border-spacing: 0;
  font-size: 15px;
  margin: 18px 0 26px;
  overflow: hidden;
  width: 100%;
}

.vs2-pdp-tabs__prose table th,
.entry-content table th {
  background: var(--vs2-forest);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 13px 20px;
  text-align: left;
  text-transform: uppercase;
}

.vs2-pdp-tabs__prose table td,
.entry-content table td {
  border-top: 1px solid var(--vs2-line);
  color: var(--vs2-body);
  line-height: 1.55;
  padding: 15px 20px;
  vertical-align: top;
}

.vs2-pdp-tabs__prose table tbody tr:nth-child(even) td,
.entry-content table tbody tr:nth-child(even) td {
  background: var(--vs2-surface);
}

.vs2-pdp-tabs__prose table td strong,
.entry-content table td strong {
  color: var(--vs2-forest);
  font-weight: 700;
}

/* Links in tabellen (bv. "Download PDF") als opvallende knopjes. */
.vs2-pdp-tabs__prose table td a,
.entry-content table td a {
  background: var(--vs2-forest);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.vs2-pdp-tabs__prose table td a:hover,
.entry-content table td a:hover {
  background: var(--vs2-mid);
  color: #fff;
}

.vs2-pdp-tabs__prose table td a strong,
.entry-content table td a strong {
  color: inherit;
  font-weight: inherit;
}

@media (max-width: 640px) {
  .vs2-pdp-tabs__prose table,
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vs2-pdp-tabs__prose table th,
  .vs2-pdp-tabs__prose table td,
  .entry-content table th,
  .entry-content table td {
    padding: 12px 14px;
  }
}

/* --- sticky koopbalk --- */

.vs2-pdp-sticky {
  backdrop-filter: blur(12px);
  background: rgba(244, 241, 234, 0.94);
  border-top: 1px solid rgba(28, 38, 32, 0.12);
  bottom: 0;
  box-shadow: 0 -8px 30px -18px rgba(31, 61, 47, 0.4);
  left: 0;
  position: fixed;
  right: 0;
  transform: translateY(110%);
  transition: transform 0.3s var(--vs2-ease);
  z-index: 60;
}

.vs2-pdp-sticky.is-visible {
  transform: translateY(0);
}

.vs2-pdp-sticky__inner {
  align-items: center;
  display: flex;
  gap: 20px;
  height: 72px;
  justify-content: space-between;
}

.vs2-pdp-sticky__left {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.vs2-pdp-sticky__media {
  align-items: center;
  border-radius: 11px;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.vs2-pdp-sticky__media img {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100% !important;
}

.vs2-pdp-sticky__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs2-pdp-sticky__sub {
  align-items: center;
  color: var(--vs2-muted);
  display: flex;
  font-size: 12.5px;
  gap: 6px;
}

.vs2-pdp-sticky__right {
  align-items: center;
  display: flex;
  flex: none;
  gap: 16px;
}

.vs2-pdp-sticky__price b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs2-pdp-sticky__price span {
  color: var(--vs2-faint);
  font-size: 13px;
}

.vs2-pdp-sticky__btn {
  font-size: 15.5px;
  padding: 13px 26px;
}

@media (max-width: 575px) {
  .vs2-pdp-sticky__sub,
  .vs2-pdp-sticky__price span {
    display: none;
  }
}

@media (max-width: 575px) {
  .vs2-pdp__form .vs2-buy__add {
    flex-wrap: wrap;
    font-size: 16px;
    gap: 4px 8px;
    padding: 14px;
  }

  .vs2-pdp__form .vs2-buy__add > span {
    white-space: nowrap;
  }
}

@media (min-width: 992px) {
  .vs2-pdp__gallery {
    position: sticky;
    top: 130px;
  }
}

/* Failsafe: de verborgen Woo-selects nooit laten tonen (ook niet als een
   plugin — bv. variation-swatches — ze probeert te transformeren). */
.vs2-buy__selects {
  display: none !important;
}

/* ============================================================
   Betaalmethode-iconen (dynamisch, gekleurde logo's)
   ============================================================ */

.vs2-payicons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.vs2-payicons__lead {
  color: var(--vs2-faint);
  font-size: 12.5px;
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.vs2-payicons__img {
  border-radius: 4px;
  display: block;
  height: 24px !important;
  width: auto !important;
}

/* iets groter in de cart-zijbalk */
.vs2-cartsum__pay .vs2-payicons {
  justify-content: center;
}

.vs2-cartsum__pay .vs2-payicons__img {
  height: 28px !important;
}

.vs2-check__badges .vs2-payicons {
  justify-content: center;
}

/* ============================================================
   Longevity Blog — design v2 (Blog.dc.html)
   ============================================================ */

.vs2-blog__hero {
  padding-bottom: 20px;
  padding-top: 56px;
}

/* tekstbreedte beperken binnen de gecentreerde container (design: 680px) */
.vs2-blog__title,
.vs2-blog__lead {
  max-width: 680px;
}

.vs2-blog__chipbadge {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-forest);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 14px;
}

.vs2-blog__chipbadge span {
  background: var(--vs2-amber);
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.vs2-blog__title {
  font-size: clamp(38px, 4.3vw, 52px);
  margin-bottom: 16px;
}

.vs2-blog__lead {
  margin: 0;
}

.vs2-blog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 10px;
  padding-top: 20px;
}

.vs2-blog__featwrap {
  padding-bottom: 12px;
  padding-top: 20px;
}

.vs2-blog__feat {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  transition: box-shadow 0.24s ease, transform 0.24s var(--vs2-ease);
}

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

.vs2-blog__featmedia {
  min-height: 340px;
  overflow: hidden;
  position: relative;
}

.vs2-blog__featmedia img {
  height: 100% !important;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100% !important;
}

.vs2-blog__featbadge {
  background: var(--vs2-amber);
  border-radius: 999px;
  color: var(--vs2-ink);
  font-size: 12px;
  font-weight: 800;
  left: 20px;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  position: absolute;
  text-transform: uppercase;
  top: 20px;
  z-index: 2;
}

.vs2-blog__featbody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 42px;
}

.vs2-blog__featmeta {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.vs2-blog__featcat {
  background: var(--vs2-pale);
  border-radius: 999px;
  color: var(--vs2-mid);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 11px;
}

.vs2-blog__featread {
  color: var(--vs2-faint);
  font-size: 13px;
}

.vs2-blog__feattitle {
  color: var(--vs2-ink);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 14px;
}

.vs2-blog__featexcerpt {
  color: var(--vs2-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.vs2-blog__featdate {
  color: var(--vs2-faint);
  font-size: 13px;
}

@media (max-width: 991px) {
  .vs2-blog__feat {
    grid-template-columns: 1fr;
  }

  .vs2-blog__featmedia {
    min-height: 220px;
  }

  .vs2-blog__featbody {
    padding: 28px 24px;
  }
}

.vs2-blog__gridwrap {
  padding-bottom: 30px;
  padding-top: 24px;
}

.vs2-blog__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .vs2-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .vs2-blog__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-blog__card {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.24s ease, transform 0.24s var(--vs2-ease);
}

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

.vs2-blog__cardmedia {
  background: var(--vs2-pale);
  height: 180px;
  overflow: hidden;
  position: relative;
}

.vs2-blog__cardmedia img {
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

.vs2-blog__cardcat {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: var(--vs2-forest);
  font-size: 11.5px;
  font-weight: 700;
  left: 14px;
  padding: 5px 11px;
  position: absolute;
  top: 14px;
  z-index: 2;
}

.vs2-blog__cardbody {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 22px 24px;
}

.vs2-blog__cardtitle {
  color: var(--vs2-ink);
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 9px;
}

.vs2-blog__cardexcerpt {
  color: var(--vs2-muted);
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.vs2-blog__cardmeta {
  color: var(--vs2-faint);
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.vs2-blog__empty {
  color: var(--vs2-muted);
  font-size: 16px;
  padding: 30px 0;
}

/* --- paginanavigatie --- */

.vs2-blog__pagination {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.vs2-blog__pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs2-blog__pagination .page-numbers li {
  margin: 0;
}

.vs2-blog__pagination a.page-numbers,
.vs2-blog__pagination span.page-numbers {
  align-items: center;
  background: var(--vs2-surface);
  border: 1.5px solid rgba(28, 38, 32, 0.14);
  border-radius: 11px;
  color: var(--vs2-ink) !important;
  display: flex;
  font-size: 14.5px;
  font-weight: 600;
  height: 42px;
  justify-content: center;
  min-width: 42px;
  padding: 0 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vs2-blog__pagination a.page-numbers:hover {
  border-color: var(--vs2-forest);
}

.vs2-blog__pagination span.page-numbers.current {
  background: var(--vs2-forest);
  border-color: var(--vs2-forest);
  color: var(--vs2-bone) !important;
}

.vs2-blog__pagination span.page-numbers.dots {
  border: 0;
  background: none;
  color: var(--vs2-faint) !important;
}

/* --- nieuwsbriefband --- */

.vs2-blog__newswrap {
  padding-bottom: 70px;
  padding-top: 30px;
}

.vs2-blog__news {
  align-items: center;
  background: var(--vs2-forest);
  border-radius: 26px;
  display: grid;
  gap: 44px;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  padding: 56px;
  position: relative;
}

.vs2-blog__news::before {
  background: rgba(93, 176, 64, 0.12);
  border-radius: 50%;
  content: "";
  height: 220px;
  position: absolute;
  right: 80px;
  top: -70px;
  width: 220px;
}

.vs2-blog__newstitle {
  color: #ffffff;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

.vs2-blog__newslead {
  color: #b8c6ba;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 420px;
}

.vs2-blog__newsform {
  position: relative;
}

.vs2-blog__newsform input[type="email"],
.vs2-blog__newsform input[type="text"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 15.5px;
  padding: 14px 16px;
  width: 100%;
}

.vs2-blog__newsform input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.vs2-blog__newsform button,
.vs2-blog__newsform input[type="submit"] {
  background: var(--vs2-amber);
  border: 0;
  border-radius: 12px;
  color: var(--vs2-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  margin-top: 10px;
  padding: 13px 24px;
}

@media (max-width: 991px) {
  .vs2-blog__news {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
}

/* /mnd-suffix op productkaarten (Los/Abonnement-switch) */
.vs2-product__permo {
  color: #3f8a28;
  font-size: 12.5px;
  font-weight: 800;
  margin-left: 6px;
}

/* cadeau-regel in de winkelmand */
.vs2-cart__pill--gift {
  background: rgba(93, 176, 64, 0.16);
  color: var(--vs2-forest);
}

.vs2-cart__linetotal--gift {
  color: var(--vs2-amber-dark);
}

/* ============================================================
   Mijn account — design v2
   ============================================================ */

.vs2-woo .woocommerce-account-wrap,
.vs2-woo__body .woocommerce {
  position: relative;
}

/* layout: zijnav + content */
body.woocommerce-account .vs2-woo__body .woocommerce {
  display: grid;
  gap: 40px;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 767px) {
  body.woocommerce-account .vs2-woo__body .woocommerce {
    grid-template-columns: 1fr;
  }
}

/* uitgelogd (login/registratie) en lost-password: geen grid */
body.woocommerce-account:not(.logged-in) .vs2-woo__body .woocommerce {
  display: block;
}

/* notices over de volle breedte; nav en content elk hun eigen kolom */
body.woocommerce-account .vs2-woo__body .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

body.woocommerce-account .vs2-woo__body .woocommerce > .woocommerce-MyAccount-navigation {
  grid-column: 1;
}

body.woocommerce-account .vs2-woo__body .woocommerce > .woocommerce-MyAccount-content {
  grid-column: 2;
}

@media (max-width: 767px) {
  body.woocommerce-account .vs2-woo__body .woocommerce > .woocommerce-MyAccount-navigation,
  body.woocommerce-account .vs2-woo__body .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 1;
  }
}

/* --- zijnavigatie --- */

.vs2-woo .woocommerce-MyAccount-navigation {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  padding: 10px;
  position: sticky;
  top: 130px;
}

.vs2-woo .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs2-woo .woocommerce-MyAccount-navigation li {
  margin: 0;
}

.vs2-woo .woocommerce-MyAccount-navigation li a {
  align-items: center;
  border-radius: 11px;
  color: var(--vs2-body) !important;
  display: flex;
  font-size: 14.5px;
  font-weight: 600;
  gap: 10px;
  padding: 11px 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.vs2-woo .woocommerce-MyAccount-navigation li a::before {
  content: "•";
  flex: none;
  width: 20px;
  text-align: center;
}

.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "🏠"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before { content: "📦"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--abonnementen a::before { content: "↻"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before { content: "⬇"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "🏠"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "👤"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--vitapoints a::before { content: "⭐"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--vitapoints-shop a::before { content: "🛍️"; }
.vs2-woo .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "→"; }

.vs2-woo .woocommerce-MyAccount-navigation li a:hover {
  background: var(--vs2-pale);
  color: var(--vs2-forest) !important;
}

.vs2-woo .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--vs2-forest);
  color: var(--vs2-bone) !important;
}

.vs2-woo .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--vs2-faint) !important;
}

/* --- content --- */

.vs2-woo .woocommerce-MyAccount-content {
  min-width: 0;
}

.vs2-woo .woocommerce-MyAccount-content > h2,
.vs2-woo .woocommerce-MyAccount-content h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.vs2-woo .woocommerce-MyAccount-content p {
  color: var(--vs2-body);
}

/* dashboard */
.vs2-account__hellotitle {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.vs2-account__hellosub {
  color: var(--vs2-muted);
  font-size: 16px;
  margin: 0 0 26px;
}

.vs2-account__cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575px) {
  .vs2-account__cards {
    grid-template-columns: 1fr;
  }
}

.vs2-account__card {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  transition: box-shadow 0.2s ease, transform 0.2s var(--vs2-ease), border-color 0.15s ease;
}

.vs2-account__card:hover {
  border-color: var(--vs2-forest);
  box-shadow: var(--vs2-shadow-card);
  transform: translateY(-3px);
}

.vs2-account__cardicon {
  align-items: center;
  background: var(--vs2-pale);
  border-radius: 12px;
  display: flex;
  font-size: 19px;
  height: 42px;
  justify-content: center;
  margin-bottom: 6px;
  width: 42px;
}

.vs2-account__cardtitle {
  color: var(--vs2-ink);
  font-size: 16.5px;
  font-weight: 700;
}

.vs2-account__cardbody {
  color: var(--vs2-muted);
  font-size: 14px;
  line-height: 1.5;
}

.vs2-account__logoutline {
  color: var(--vs2-faint);
  font-size: 13.5px;
  margin-top: 22px;
}

.vs2-account__logoutline a {
  color: var(--vs2-mid) !important;
  text-decoration: underline;
}

/* formulieren (accountgegevens, adressen, login) */
.vs2-woo .woocommerce-MyAccount-content .form-row label,
.vs2-woo form.login label,
.vs2-woo form.register label,
.vs2-woo form.lost_reset_password label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

.vs2-woo .woocommerce-MyAccount-content input.input-text,
.vs2-woo .woocommerce-MyAccount-content select,
.vs2-woo form.login input.input-text,
.vs2-woo form.register input.input-text,
.vs2-woo form.lost_reset_password input.input-text {
  background: #ffffff;
  border: 1.5px solid rgba(28, 38, 32, 0.16);
  border-radius: 11px;
  color: var(--vs2-ink);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
}

.vs2-woo .woocommerce-MyAccount-content input.input-text:focus,
.vs2-woo form.login input.input-text:focus,
.vs2-woo form.register input.input-text:focus {
  border-color: var(--vs2-mid);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.14);
  outline: none;
}

.vs2-woo .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--vs2-line);
  border-radius: 14px;
  margin: 26px 0;
  padding: 20px;
}

.vs2-woo .woocommerce-MyAccount-content fieldset legend {
  font-size: 15px;
  font-weight: 800;
  padding: 0 8px;
}

/* adressen als kaarten */
.vs2-woo .woocommerce-Addresses {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575px) {
  .vs2-woo .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

.vs2-woo .woocommerce-Address {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  padding: 22px;
  width: auto !important;
}

.vs2-woo .woocommerce-Address-title {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vs2-woo .woocommerce-Address-title h3 {
  font-size: 17px;
  margin: 0;
}

.vs2-woo .woocommerce-Address-title .edit {
  color: var(--vs2-mid) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
}

.vs2-woo .woocommerce-Address address {
  color: var(--vs2-body);
  font-style: normal;
  line-height: 1.6;
}

/* login/registratie als designkaarten */
.vs2-woo #customer_login {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 0 auto;
  max-width: 900px;
}

.vs2-woo #customer_login > div,
.vs2-woo > .woocommerce > form.login:only-of-type,
.vs2-woo form.lost_reset_password {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 20px;
  float: none !important;
  padding: 32px 30px;
  width: auto !important;
}

.vs2-woo #customer_login h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.vs2-woo form.login,
.vs2-woo form.register {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vs2-woo form.login .form-row,
.vs2-woo form.register .form-row,
.vs2-woo form.lost_reset_password .form-row {
  margin: 0 0 14px;
  padding: 0;
}

.vs2-woo form.login button.button,
.vs2-woo form.register button.button,
.vs2-woo form.lost_reset_password button.button {
  width: 100%;
}

.vs2-woo .woocommerce-LostPassword {
  font-size: 13.5px;
  margin-top: 4px;
}

.vs2-woo .woocommerce-LostPassword a {
  color: var(--vs2-mid) !important;
  text-decoration: underline;
}

.vs2-woo .woocommerce-form-login__rememberme {
  align-items: center;
  color: var(--vs2-body);
  display: flex;
  font-size: 14px;
  font-weight: 500 !important;
  gap: 8px;
}

.vs2-woo .woocommerce-form-login__rememberme input {
  accent-color: var(--vs2-forest);
}

/* kortingsoverzicht boven de abonnementenlijst */
.vs2-subsummary {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--vs2-forest);
  color: #fff;
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
}

.vs2-subsummary__badge {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vs2-subsummary__badge span {
  font-size: 19px;
  font-weight: 800;
}

.vs2-subsummary__badge small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.85;
}

.vs2-subsummary__title {
  font-weight: 700;
  font-size: 15.5px;
}

.vs2-subsummary__sub {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
}

.vs2-subsummary__sub a {
  color: #a8d98c !important;
  font-weight: 700;
  text-decoration: none;
}

.vs2-subsummary__sub a:hover {
  text-decoration: underline;
}

@media (max-width: 575px) {
  .vs2-subsummary {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* abonnementen-kaarten van de plugin naar vs2-stijl */
.vs2-woo .vs-subs-card {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line);
  border-radius: 18px;
  margin-bottom: 16px;
  padding: 22px 24px;
}

.vs2-woo .vs-subs-card__meta {
  color: var(--vs2-muted);
}

.vs2-woo .vs-subs-status--active {
  background: rgba(93, 176, 64, 0.16);
  color: var(--vs2-amber-dark);
}

/* tabellen (bestellingen) — bovenop de bestaande shop_table-stijl */
.vs2-woo .woocommerce-orders-table .woocommerce-button {
  margin-right: 6px;
}

/* Woo's eigen float-layout (30%/68%) uitschakelen binnen onze grid */
body.woocommerce-account .vs2-woo__body .woocommerce-MyAccount-navigation,
body.woocommerce-account .vs2-woo__body .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
}

/* Woo's clearfix-pseudo's worden grid-items en verschuiven de kolommen. */
.vs2-woo #customer_login::before,
.vs2-woo #customer_login::after,
.vs2-woo .woocommerce-Addresses::before,
.vs2-woo .woocommerce-Addresses::after {
  content: none !important;
  display: none !important;
}


/* abo-prijsregel in de bundel-CTA */
.vs2-bundlecta__subnote {
  color: var(--vs2-mid);
  font-size: 13.5px;
  font-weight: 600;
  margin: 6px 0 14px;
}

/* ---------- bundelpagina: "Dit zit er in je bundel" ---------- */

.vs2-bincl {
  padding-bottom: 26px;
  padding-top: 40px;
}

.vs2-bincl__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 991px) {
  .vs2-bincl__grid {
    grid-template-columns: 1fr;
  }
}

.vs2-bincl__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
}

.vs2-bincl__head {
  align-items: center;
  display: flex;
  gap: 16px;
}

.vs2-bincl__media {
  align-items: center;
  border-radius: 14px;
  display: flex;
  flex: none;
  height: 72px;
  justify-content: center;
  overflow: hidden;
  width: 72px;
}

.vs2-bincl__media img {
  height: 58px;
  object-fit: contain;
  width: auto;
}

.vs2-bincl__name {
  color: var(--vs2-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.vs2-bincl__name:hover {
  color: var(--vs2-forest);
}

.vs2-bincl__tag {
  color: var(--vs2-mid);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: uppercase;
}

.vs2-bincl__body {
  color: var(--vs2-body-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.vs2-bincl__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vs2-bincl__fact {
  background: var(--vs2-pale);
  border-radius: 9px;
  color: var(--vs2-muted);
  display: inline-flex;
  flex-direction: column;
  font-size: 12px;
  gap: 1px;
  padding: 8px 12px;
}

.vs2-bincl__fact b {
  color: var(--vs2-forest);
  font-size: 13px;
}

.vs2-bincl__ingr {
  border: 1px solid var(--vs2-line);
  border-radius: 12px;
  padding: 14px 16px;
}

.vs2-bincl__ingrhead {
  color: var(--vs2-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.vs2-bincl__ingrrow {
  color: var(--vs2-body-soft);
  display: flex;
  font-size: 13.5px;
  gap: 12px;
  justify-content: space-between;
  padding: 7px 0;
}

.vs2-bincl__ingrrow + .vs2-bincl__ingrrow {
  border-top: 1px solid rgba(28, 38, 32, 0.07);
}

.vs2-bincl__ingrrow b {
  color: var(--vs2-ink);
  font-weight: 700;
  white-space: nowrap;
}

.vs2-bincl__link {
  color: var(--vs2-mid);
  font-size: 14px;
  font-weight: 700;
  margin-top: auto;
  text-decoration: none;
}

.vs2-bincl__link:hover {
  text-decoration: underline;
}

/* Bundelbouwer: potten met meer maanden voorraad + afreken-uitleg. */
.vs2-bundle__optionmonths {
  color: var(--vs2-faint);
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  text-align: right;
}

.vs2-bundle__charge {
  color: var(--vs2-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: -6px 0 14px;
}

/* --- Zoekresultaten & 404 --- */

.vs2-search__products,
.vs2-search__posts,
.vs2-404__products {
  padding-bottom: 56px;
}

.vs2-search__products .vs2-h2,
.vs2-search__posts .vs2-h2,
.vs2-404__products .vs2-h2 {
  margin-bottom: 22px;
}

.vs2-search__list {
  display: grid;
  gap: 14px;
}

.vs2-search__item {
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  text-decoration: none;
}

.vs2-search__itemtype {
  color: var(--vs2-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs2-search__itemtitle {
  color: var(--vs2-forest);
  font-size: 17px;
  font-weight: 700;
}

.vs2-search__itemexcerpt {
  color: var(--vs2-muted);
  font-size: 14px;
  line-height: 1.6;
}

.vs2-search__none {
  padding: 26px;
}

.vs2-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.vs2-404__search {
  margin-top: 18px;
  max-width: 420px;
}

/* Google Places-adresaanvulling: dropdown boven de sticky header + in huisstijl */
.pac-container {
  background: #ffffff;
  border: 1px solid var(--vs2-line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(28, 38, 32, 0.16);
  font-family: inherit;
  margin-top: 5px;
  overflow: hidden;
  z-index: 100000;
}
.pac-item {
  border-top: 1px solid rgba(28, 38, 32, 0.06);
  color: var(--vs2-ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 14px;
}
.pac-item:first-child {
  border-top: 0;
}
.pac-item:hover,
.pac-item-selected {
  background: var(--vs2-pale);
}
.pac-item-query {
  color: var(--vs2-forest);
  font-size: 14px;
  font-weight: 600;
}
.pac-icon {
  display: none;
}
.pac-logo::after {
  margin: 4px 10px;
  opacity: 0.6;
}

/* ---- Cookiemelding ----
 * GTM injecteert #cookie-banner client-side; de styling staat hier omdat
 * vs2.css van RUCSS is uitgesloten en dus altijd volledig laadt. Verborgen
 * tot de GTM-script hem toont (inline display:block). */
#cookie-banner {
  background: var(--vs2-surface);
  border: 1px solid var(--vs2-line-strong);
  border-radius: var(--vs2-r-card);
  bottom: 18px;
  box-shadow: 0 24px 48px -18px rgba(20, 28, 23, 0.45);
  display: none;
  font-family: var(--vs2-font-sans);
  left: 50%;
  max-width: 700px;
  padding: 22px 24px;
  position: fixed;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  z-index: 100000;
}

#cookie-banner .cookie_tekst p {
  color: var(--vs2-body);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

#cookie-banner .cookie_tekst strong {
  color: var(--vs2-ink);
  display: inline-block;
  font-size: 16px;
  margin-bottom: 6px;
}

#cookie-banner .cookie_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

#cookie-banner button {
  border: 0;
  border-radius: var(--vs2-r-btn);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 22px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.16s ease;
}

#cookie-banner #accept-cookies {
  background: var(--vs2-forest);
  color: var(--vs2-bone);
}

#cookie-banner #accept-cookies:hover {
  background: var(--vs2-mid);
  transform: translateY(-1px);
}

#cookie-banner #decline-cookies {
  background: var(--vs2-surface);
  border: 1.5px solid var(--vs2-line-strong);
  color: var(--vs2-ink);
  font-weight: 600;
}

#cookie-banner #decline-cookies:hover {
  border-color: var(--vs2-forest);
}