/* =====================================================================
   Voetbalshirtjes — componenten die buiten theme.json/style.css vallen.
   Klein houden: dit bestand laadt op elke pagina.
   ===================================================================== */

/* Productkaarten: ankers voor de sale-badge */
ul.products li.product,
.wp-block-woocommerce-product-template li.product,
.wc-block-grid__product {
  position: relative;
}
.wp-block-woocommerce-product-image {
  position: relative;
}

/* "AANBIEDING"-badge: premium oranje pil, linksboven op de productfoto.
   Eén regel voor alle varianten: het sale-badge block (grid), de oudere
   component-variant, de klassieke span.onsale in de blok-gallerij (PDP)
   en losse span.onsale in elke WooCommerce-context. */
.wp-block-woocommerce-product-image-gallery {
  position: relative;
}
.wp-block-woocommerce-product-sale-badge,
.wc-block-components-product-sale-badge,
ul.products li.product span.onsale,
.wp-block-woocommerce-product-image-gallery span.onsale,
.woocommerce span.onsale,
span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 3;
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 6px 14px;
  border: 0;
  border-radius: 30px;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 4px 12px rgba(224, 78, 0, 0.28);
}

/* Gallerij-vergrootglas (zoom-trigger) visueel verbergen — de native
   hover-zoom (wc-product-gallery-zoom) blijft volledig actief. */
.woocommerce-product-gallery__trigger {
  display: none !important;
}

/* Theme-afbeeldingen (hero, club-kaarten, maattabel-detail) worden als
   echte cover-/image-blocks gerenderd vanuit patterns/*.php via
   get_theme_file_uri() — géén CSS-backgrounds, anders zijn ze
   onzichtbaar in de Site Editor. */

/* =====================================================================
   WK 2026 collectie-grid (homepage): 5 kolommen op desktop, geleveld.
   Kaarten zijn flex-kolommen; titels clampen op 2 regels met vaste
   min-hoogte zodat titels, prijzen en knoppen perfect uitlijnen.
   ===================================================================== */
.vs-wk-grid li.product {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
.vs-wk-grid li.product .wp-block-post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0.65rem 0.75rem 0.2rem;
  font-size: 0.92rem;
  line-height: 1.35;
}
.vs-wk-grid li.product .wp-block-woocommerce-product-price {
  min-height: 1.6em;
  margin: 0 0.75rem 0.6rem;
}
.vs-wk-grid li.product .wp-block-woocommerce-product-button {
  margin-top: auto;
  padding: 0 0.75rem;
}
.vs-wk-grid li.product .wp-block-woocommerce-product-button .wp-block-button__link {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.6rem 0.5rem;
}

/* Club-kaarten op de homepage */
.vs-club-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.vs-club-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10, 15, 26, 0.25);
}
/* Hele kaart klikbaar: gestrekte link over het beeld; de tekst + knop
   staan via z-index erbovenop zodat de knop apart klikbaar blijft. */
.vs-club-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}
.vs-club-card .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}
.vs-club-card .wp-block-cover__inner-container h3,
.vs-club-card .wp-block-cover__inner-container p {
  pointer-events: none; /* kliks op tekst vallen door naar de kaartlink */
}

/* Maattabel */
.vs-size-table table {
  border-collapse: collapse;
  width: 100%;
}
.vs-size-table th {
  background: var(--wp--preset--color--contrast, #0a0f1a);
  color: #fff;
  font-weight: 700;
  text-align: left;
}
.vs-size-table th,
.vs-size-table td {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--wp--preset--color--mist, #eef1f6);
}
.vs-size-table tbody tr:nth-child(even) {
  background: var(--wp--preset--color--surface, #f8f9fb);
}

/* Clearance-badge + USP-lijst in de korte productomschrijving (PDP) */
.vs-clearance {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  background: rgba(217, 45, 32, 0.1);
  color: var(--wp--preset--color--urgentie, #d92d20);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.vs-usp-lijst {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #0a0f1a);
}

/* PDP trust-bar onder de koopknop */
.vs-trust-bar--pdp {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-radius: 14px;
  background: var(--wp--preset--color--surface, #f8f9fb);
}

/* Variatie-selects (maatkeuze) groot en tapbaar (44px touch target) */
.variations select,
table.variations .value select {
  min-height: 48px;
  padding: 0.5rem 2.2rem 0.5rem 0.9rem;
  border: 1.5px solid var(--wp--preset--color--mist, #d8dde6);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  max-width: 320px;
}
.variations select:focus {
  border-color: var(--wp--preset--color--oranje, #ff6600);
}

/* Kwantiteit + ATC op één rij */
form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}
form.cart .variations,
form.cart .woocommerce-variation,
form.cart > p,
form.cart .vs-trust-bar--pdp {
  flex-basis: 100%;
}
form.cart .quantity input.qty {
  min-height: 52px;
  width: 4.5rem;
  border: 1.5px solid var(--wp--preset--color--mist, #d8dde6);
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
form.cart .single_add_to_cart_button {
  flex: 1;
  min-height: 52px;
  font-size: 1.05rem;
}

/* =====================================================================
   PDP-REDESIGN (Kit & Ace-referentie): asymmetrisch grid, verticale
   thumbnails, maat-swatches, schaarste-balk, stepper + CTA, accordeon.
   ===================================================================== */

/* --- Gallerij: grote hoofdfoto met thumbnail-rij eronder --- */
.vs-pdp__gallery .woocommerce-product-gallery {
  opacity: 1 !important; /* Woo verbergt de gallerij tot JS-init; voorkom flits */
}
.vs-pdp__gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
.vs-pdp__gallery .flex-control-thumbs {
  display: flex;
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;            /* swipebaar op mobiel */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vs-pdp__gallery .flex-control-thumbs::-webkit-scrollbar {
  display: none;
}
.vs-pdp__gallery .flex-control-thumbs li {
  flex: 1 0 calc(25% - 0.55rem);
  max-width: calc(25% - 0.55rem);
  float: none;
}
.vs-pdp__gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1.5px solid var(--wp--preset--color--mist, #eef1f6);
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.vs-pdp__gallery .flex-control-thumbs img:hover,
.vs-pdp__gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--wp--preset--color--contrast, #0a0f1a);
}
@media (max-width: 781px) {
  .vs-pdp__gallery .flex-control-thumbs li {
    flex: 0 0 76px;
    max-width: 76px;
  }
}

/* --- Premium sterren-rating (4.8/5, goud, partiële vulling) --- */
.vs-rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}
.vs-rating__stars {
  position: relative;
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.vs-rating__base {
  color: #d8dde6;
}
.vs-rating__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623; /* premium goud/amber */
}
.vs-rating__link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.vs-rating__link:hover {
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-rating__count {
  font-weight: 500;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Voorraadstatus (groen) + "Valt normaal"-tag boven de maatkeuze --- */
.vs-stock-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
}
.vs-stock-status::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  flex: none;
}
.vs-stock-status--instock {
  color: var(--wp--preset--color--succes, #067647);
}
.vs-stock-status--instock::before {
  background: var(--wp--preset--color--succes, #067647);
  box-shadow: 0 0 0 4px rgba(6, 118, 71, 0.14);
}
.vs-stock-status--out {
  color: var(--wp--preset--color--urgentie, #d92d20);
}
.vs-stock-status--out::before {
  background: var(--wp--preset--color--urgentie, #d92d20);
}
.vs-fit-tag {
  display: inline-block;
  margin-bottom: 0.3rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--wp--preset--color--mist, #d8dde6);
  border-radius: 999px;
  background: var(--wp--preset--color--surface, #f8f9fb);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}

/* --- USP-checklist met groene vinkjes (onder de koopknop) --- */
.vs-usp-checklist {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #0a0f1a);
}
.vs-usp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.vs-usp-checklist li::before {
  content: "✓";
  flex: none;
  font-weight: 800;
  color: var(--wp--preset--color--succes, #067647);
}

/* --- Conversie-CTA: Oranje merkkleur met winkelwagen-icoon --- */
form.cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  font-weight: 700;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
form.cart .single_add_to_cart_button::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7.2 14.6 7 15.5c0 .3.2.5.5.5H19v2H7.5A2.5 2.5 0 0 1 5 15.4l.3-1.4L3.6 4H1V2h4.2l.5 2H22.4a1 1 0 0 1 1 1.2l-1.8 8a1 1 0 0 1-1 .8H7.6l-.4.6z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7.2 14.6 7 15.5c0 .3.2.5.5.5H19v2H7.5A2.5 2.5 0 0 1 5 15.4l.3-1.4L3.6 4H1V2h4.2l.5 2H22.4a1 1 0 0 1 1 1.2l-1.8 8a1 1 0 0 1-1 .8H7.6l-.4.6z"/></svg>') center / contain no-repeat;
}
form.cart .single_add_to_cart_button:hover {
  background: var(--wp--preset--color--oranje-deep, #e04e00);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(224, 78, 0, 0.4);
}
/* Woo zet opacity:0.5 op de knop zolang er geen maat gekozen is — dat
   oogt als "vaal oranje". Houd de knop vol verzadigd; de cursor + Woo's
   eigen melding communiceren dat eerst een maat nodig is. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
form.cart .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 1 !important;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  cursor: not-allowed;
}

/* --- Info-kolom: typografische hiërarchie --- */
.vs-pdp__breadcrumbs,
.vs-pdp__info .woocommerce-breadcrumb {
  font-size: 0.78rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
  margin-bottom: 0.4rem;
}
.vs-pdp__titel {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.vs-pdp__subtitel {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}
.vs-pdp__prijs {
  margin: 0.4rem 0 0.5rem;
}
.vs-pdp__prijs del {
  color: #9aa3b2;
  font-weight: 500;
}
.vs-pdp__prijs ins {
  margin-left: 0.35em;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  font-weight: 800;
  text-decoration: none;
}

/* --- Maat-swatches: vierkante tekst-knoppen --- */
.vs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.vs-swatch {
  min-width: 52px;
  height: 48px;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d8dde6;
  border-radius: 10px;
  background: var(--wp--preset--color--base, #fff);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out,
              color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.vs-swatch:hover {
  border-color: var(--wp--preset--color--contrast, #0a0f1a);
  transform: translateY(-1px);
}
.vs-swatch.is-selected {
  border-color: var(--wp--preset--color--contrast, #0a0f1a);
  background: var(--wp--preset--color--contrast, #0a0f1a);
  color: #fff;
}
/* Native select visueel weg zodra swatches actief zijn (a11y: blijft focusbaar via swatches) */
.vs-has-swatches select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.vs-has-swatches,
.vs-has-swatches tbody,
.vs-has-swatches tr,
.vs-has-swatches td,
.vs-has-swatches th {
  display: block;
  border: 0;
  padding: 0;
}
.vs-has-swatches td.label,
.vs-has-swatches th.label {
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.vs-has-swatches td.label label,
.vs-has-swatches th.label label {
  margin: 0;
  line-height: 1.2;
}
form.cart table.vs-has-swatches {
  margin: 0 0 0.3rem;
  border-collapse: collapse;
}
/* Woo-core (.woocommerce div.product form.cart .variations td) wint qua
   specificiteit van onze flatten-regels — celpadding hard op nul, anders
   blijft er een groot gat tussen het MAAT-label en de swatches staan. */
.woocommerce div.product form.cart .vs-has-swatches th.label,
.woocommerce div.product form.cart .vs-has-swatches td.label,
.woocommerce div.product form.cart .vs-has-swatches td.value {
  padding: 0 !important;
}
.woocommerce div.product form.cart .vs-has-swatches tr {
  margin: 0;
}
/* "Clear"/reset-link verbergen: puur visueel — het wisselen van maat
   loopt via de swatches die de select direct aansturen, dus de link is
   functioneel overbodig. !important omdat Woo-core 'm anders bij elke
   variatiewissel weer zichtbaar maakt via inline display. */
.woocommerce div.product form.cart .reset_variations,
.vs-has-swatches .reset_variations {
  display: none !important;
}

/* Variatie-voorraadtekst ("6 op voorraad"): zelfde groen + stip als de
   "Op voorraad — vandaag verzonden" indicator hogerop voor visuele rust. */
.woocommerce-variation-availability p.stock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--wp--preset--color--succes, #067647);
}
.woocommerce-variation-availability p.stock::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  flex: none;
  background: var(--wp--preset--color--succes, #067647);
  box-shadow: 0 0 0 4px rgba(6, 118, 71, 0.14);
}
.woocommerce-variation-availability p.stock.out-of-stock {
  color: var(--wp--preset--color--urgentie, #d92d20);
}
.woocommerce-variation-availability p.stock.out-of-stock::before {
  background: var(--wp--preset--color--urgentie, #d92d20);
  box-shadow: none;
}

/* --- Maattabel-link met liniaal-icoon --- */
.vs-size-guide-row {
  margin: 0.35rem 0 0;
}
.vs-size-guide-link::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.3 6.7 17.3 2.7a1 1 0 0 0-1.4 0L2.7 15.9a1 1 0 0 0 0 1.4l4 4a1 1 0 0 0 1.4 0L21.3 8.1a1 1 0 0 0 0-1.4zM7.4 19.2 4.8 16.6l1.8-1.8 1.3 1.3 1-1-1.3-1.3 1.5-1.5 1.3 1.3 1-1L10.1 11l1.5-1.5 1.3 1.3 1-1-1.3-1.3 1.8-1.8 2.6 2.6L7.4 19.2z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.3 6.7 17.3 2.7a1 1 0 0 0-1.4 0L2.7 15.9a1 1 0 0 0 0 1.4l4 4a1 1 0 0 0 1.4 0L21.3 8.1a1 1 0 0 0 0-1.4zM7.4 19.2 4.8 16.6l1.8-1.8 1.3 1.3 1-1-1.3-1.3 1.5-1.5 1.3 1.3 1-1L10.1 11l1.5-1.5 1.3 1.3 1-1-1.3-1.3 1.8-1.8 2.6 2.6L7.4 19.2z"/></svg>') center / contain no-repeat;
}

/* --- Schaarste-balk met oranje stip --- */
.vs-scarcity {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  margin: 0.55rem 0;
  padding: 0.6rem 0;
  border-top: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-bottom: 1px solid var(--wp--preset--color--mist, #eef1f6);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #0a0f1a);
}
.vs-scarcity::before {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.55em;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--wp--preset--color--oranje, #ff6600);
  box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.15);
}

/* --- ATC-rij: stepper + brede CTA --- */
form.cart .single_variation_wrap {
  flex-basis: 100%;
}
.woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.woocommerce-variation-add-to-cart > p,
.woocommerce-variation-add-to-cart .vs-scarcity,
.woocommerce-variation-add-to-cart .vs-trust-bar--pdp {
  flex-basis: 100%;
}
.vs-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid #d8dde6;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--base, #fff);
}
.vs-qty button {
  width: 44px;
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.vs-qty button:hover {
  background: var(--wp--preset--color--surface, #f8f9fb);
  color: var(--wp--preset--color--oranje, #ff6600);
}
form.cart .vs-qty input.qty {
  border: 0;
  border-radius: 0;
  width: 3.2rem;
  min-height: 54px;
  -moz-appearance: textfield;
}
form.cart .vs-qty input.qty::-webkit-outer-spin-button,
form.cart .vs-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
form.cart .single_add_to_cart_button {
  min-height: 56px;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =====================================================================
   WINKELWAGEN — premium retail-layout (page-cart + cart.php overrides)
   ===================================================================== */

/* Kop: titel links, trust rechts */
.vs-cart-header {
  margin-bottom: 1.25rem;
  row-gap: 0.5rem;
}
.vs-cart-header__titel {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.vs-cart-header__trust {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #0a0f1a);
}
.vs-cart-trust-stars {
  color: #f5a623;
  letter-spacing: 0.08em;
}

/* Compacte BESTELLEN-knop rechtsboven in de winkelwagen-kop */
a.vs-cart-header__bestellen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.6rem;
  border-radius: 12px;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
a.vs-cart-header__bestellen:hover {
  background: var(--wp--preset--color--oranje-deep, #e04e00);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(224, 78, 0, 0.4);
}

/* Tabel: brede desktop-layout */
.vs-cart-table {
  width: 100%;
  border-collapse: collapse;
}
.vs-cart-table thead th {
  padding: 0.8rem 0.75rem;
  border-bottom: 2px solid var(--wp--preset--color--contrast, #0a0f1a);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
.vs-cart-table td {
  padding: 1.1rem 0.75rem;
  border-bottom: 1px solid var(--wp--preset--color--mist, #eef1f6);
  vertical-align: middle;
  background: transparent;
}
.vs-cart-product {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vs-cart-product__img img {
  display: block;
  width: 72px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-radius: 10px;
}
.vs-cart-product__meta {
  display: grid;
  gap: 0.2rem;
}
.vs-cart-product__naam {
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.vs-cart-product__naam:hover {
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-cart-product__sku {
  font-size: 0.78rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}
.vs-cart-product__belofte {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wp--preset--color--succes, #067647);
}
.vs-cart-maat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 38px;
  padding: 0 0.6rem;
  border: 1.5px solid var(--wp--preset--color--contrast, #0a0f1a);
  border-radius: 9px;
  font-weight: 800;
  font-size: 0.9rem;
}

/* Maat-dropdown: strakke select met subtiel pijltje rechts */
.vs-cart-maat-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 84px;
  height: 44px;
  padding: 0 2.2rem 0 0.95rem;
  border: 1.5px solid #d8dde6;
  border-radius: 10px;
  background-color: var(--wp--preset--color--base, #fff);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230a0f1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.85em;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.vs-cart-maat-select:hover,
.vs-cart-maat-select:focus-visible {
  border-color: var(--wp--preset--color--contrast, #0a0f1a);
}
.vs-cart-maat-select:disabled {
  opacity: 0.45;
  cursor: wait;
}
.vs-cart-table td.product-subtotal {
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}
.vs-cart-table .vs-qty {
  background: var(--wp--preset--color--base, #fff);
}
.vs-cart-table .vs-qty input.qty {
  border: 0;
  border-radius: 0;
  width: 2.9rem;
  min-height: 44px;
  text-align: center;
  font-weight: 700;
}
.vs-cart-table .vs-qty button {
  width: 38px;
}

/* Verwijder-kruisje */
a.remove.vs-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--wp--preset--color--mist, #d8dde6);
  border-radius: 50%;
  color: var(--wp--preset--color--contrast-soft, #3b4456) !important;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
              background-color 0.2s ease-in-out;
}
a.remove.vs-cart-remove:hover {
  color: #fff !important;
  border-color: var(--wp--preset--color--urgentie, #d92d20);
  background: var(--wp--preset--color--urgentie, #d92d20);
}

/* Update-knop: visueel weg, maar klikbaar voor het auto-update script */
.vs-cart-table td.actions {
  padding: 0 !important;
  border: 0 !important;
}
.vs-cart-update {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Besteloverzicht rechtsonder */
.cart-collaterals {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.vs-cart-totals {
  width: 100%;
  max-width: 410px;
  padding: 1.5rem;
  border: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-radius: 14px;
  background: var(--wp--preset--color--surface, #f8f9fb);
}
.vs-cart-totals__titel {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vs-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
}
.vs-gratis {
  color: var(--wp--preset--color--succes, #067647);
  font-weight: 800;
  letter-spacing: 0.05em;
}
.vs-totals-row--totaal {
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1.5px solid var(--wp--preset--color--contrast, #0a0f1a);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vs-totals-bedrag {
  font-size: 1.45rem;
  font-weight: 900;
}
.vs-totals-bedrag .tax_label,
.vs-totals-bedrag small {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}

/* Massieve oranje afreken-knop */
/* Specificiteit-noot: Woo-core zet
   `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display:block; padding:1em; }`
   op gewicht 0-3-1 — dat versloeg onze eerdere 0-2-1 regel, waardoor de
   flex-centrering nooit actief was en de tekst bovenin bleef hangen.
   Daarom hieronder expliciet op 0-4-1 + de kale fallback-selector. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.vs-checkout-knop,
.woocommerce .wc-proceed-to-checkout a.checkout-button.vs-checkout-knop,
a.checkout-button.vs-checkout-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 1.1rem 0 0;
  padding: 16px 1.5rem;
  border: 0;
  border-radius: 14px;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-indent: 0.1em; /* compenseert letter-spacing aan de rechterrand voor exact optisch midden */
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.vs-checkout-knop:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.vs-checkout-knop:hover,
a.checkout-button.vs-checkout-knop:hover {
  background: var(--wp--preset--color--oranje-deep, #e04e00);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(224, 78, 0, 0.4);
}
.vs-cart-totals__betaalmethodes {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.vs-cart-totals__belofte {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}

/* Lege winkelwagen */
.vs-cart-leeg {
  padding: 3.5rem 1rem;
  text-align: center;
}
.vs-cart-leeg__titel {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 800;
}
.vs-cart-leeg__tekst {
  margin: 0 0 1.25rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}
a.button.vs-cart-leeg__knop {
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  border-radius: 14px;
  padding: 0.85rem 1.6rem;
  font-weight: 700;
  text-decoration: none;
}

/* Mobiel: compacte gestapelde kaarten */
@media (max-width: 781px) {
  .vs-cart-table thead {
    display: none;
  }
  .vs-cart-table tr.cart_item {
    display: block;
    position: relative;
    padding: 1rem 0;
    border-bottom: 1px solid var(--wp--preset--color--mist, #eef1f6);
  }
  .vs-cart-table tr.cart_item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border: 0;
  }
  .vs-cart-table tr.cart_item td::before {
    content: attr(data-title);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--contrast-soft, #3b4456);
  }
  .vs-cart-table tr.cart_item td.product-name,
  .vs-cart-table tr.cart_item td.product-remove {
    display: block;
  }
  .vs-cart-table tr.cart_item td.product-name::before,
  .vs-cart-table tr.cart_item td.product-remove::before {
    display: none;
  }
  .vs-cart-table tr.cart_item td.product-remove {
    position: absolute;
    top: 1rem;
    right: 0;
    width: auto;
    padding: 0;
  }
  .vs-cart-product {
    padding-right: 44px; /* ruimte voor het kruisje */
  }
  .cart-collaterals {
    justify-content: stretch;
  }
  .vs-cart-totals {
    max-width: none;
  }
}

/* =====================================================================
   TRUST-CARDS (homepage kwaliteitssectie): witte zwevende kaarten
   ===================================================================== */
.vs-trust-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.vs-trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08), 0 3px 6px -2px rgba(0, 0, 0, 0.05);
}
.vs-trust-card h3 {
  margin: 0 0 0.6rem;
}
.vs-trust-card p {
  margin: 0;
  line-height: 1.65;
}
/* Mobiel: gestapelde kaarten met ademruimte ertussen */
@media (max-width: 781px) {
  .vs-trust-cards {
    gap: 1rem;
  }
}

/* =====================================================================
   MINI-CART DRAWER
   ===================================================================== */
/* Titel: merk-typografie */
.wc-block-mini-cart__title {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Primaire knop "BESTELLEN": identiek aan de hoofd-afrekenknop */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer a.wc-block-mini-cart__footer-checkout.wc-block-components-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 16px 1.25rem;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout:hover {
  background: var(--wp--preset--color--oranje-deep, #e04e00);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(224, 78, 0, 0.35);
}

/* Secundaire knop "Winkelwagen bekijken": rustige outline */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer a.wc-block-mini-cart__footer-cart.wc-block-components-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--wp--preset--color--mist, #d8dde6);
  border-radius: 12px;
  background: transparent;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover {
  border-color: var(--wp--preset--color--oranje, #ff6600);
  color: var(--wp--preset--color--oranje, #ff6600);
  background: transparent;
}

/* Maat-dropdown in de drawer: compacter dan op de cart-pagina */
.vs-mini-maat.vs-cart-maat-select {
  min-width: 72px;
  height: 36px;
  margin-top: 0.4rem;
  padding: 0 1.9rem 0 0.7rem;
  font-size: 0.82rem;
  background-position: right 0.55rem center;
}
.vs-mini-maat-rij {
  list-style: none;
}

/* Laad-staat tijdens de maat-wissel: regel dimt subtiel */
.vs-mini-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

/* =====================================================================
   SHOP-ARCHIEF: filtersidebar + grid
   ===================================================================== */
.vs-shop__sidebar {
  align-self: flex-start;
  position: sticky;
  top: 110px; /* onder de sticky header */
  padding: 1.4rem;
  border: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-radius: 14px;
  background: var(--wp--preset--color--surface, #f8f9fb);
}
.vs-shop__filters-titel {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Filtergroepen (eigen pattern) */
.vs-filters__wissen {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--wp--preset--color--urgentie, #d92d20);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.vs-filters__wissen:hover {
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-filters__kop {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast, #0a0f1a);
}
.vs-filters__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.vs-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.vs-filter:hover {
  background: rgba(255, 102, 0, 0.07);
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-filter__box {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8dde6;
  border-radius: 5px;
  background: var(--wp--preset--color--base, #fff);
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  position: relative;
}
.vs-filter:hover .vs-filter__box {
  border-color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-filter.is-actief .vs-filter__box,
.vs-filter.active .vs-filter__box {
  background: var(--wp--preset--color--oranje, #ff6600);
  border-color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-filter.is-actief .vs-filter__box::after,
.vs-filter.active .vs-filter__box::after {
  content: "";
  position: absolute;
  inset: 3px 4px 5px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}
.vs-filter.is-actief,
.vs-filter.active {
  font-weight: 700;
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-filter__naam {
  flex: 1;
  min-width: 0;
}
.vs-filter__aantal {
  flex: none;
  font-size: 0.78rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}

/* Lege filtercombinatie: nette fallback-kaart */
.vs-geen-resultaten {
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-radius: 14px;
  background: var(--wp--preset--color--surface, #f8f9fb);
  text-align: center;
  font-weight: 600;
}
.vs-geen-resultaten p {
  margin: 0;
}
.vs-geen-resultaten a {
  color: var(--wp--preset--color--oranje, #ff6600);
}

/* Toolbar boven het grid */
.vs-shop__toolbar {
  margin-bottom: 1rem;
}
.vs-shop__toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 0.88rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}
/* Sorteer-blok netjes uitgelijnd met de resultaatteller op één rij */
.vs-shop__toolbar .wp-block-woocommerce-catalog-sorting,
.vs-shop__toolbar .woocommerce-ordering {
  margin: 0;
}

/* Moderne sorteer-dropdown: eigen chevron, zachte rand, brand-focus */
.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select,
select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 36px 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
  /* elegante down-chevron als SVG-achtergrond rechts */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233b4456" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #0a0f1a);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.woocommerce-ordering select:hover,
.wp-block-woocommerce-catalog-sorting select:hover,
select.orderby:hover {
  border-color: #cbd2dc;
}
.woocommerce-ordering select:focus,
.woocommerce-ordering select:focus-visible,
.wp-block-woocommerce-catalog-sorting select:focus,
.wp-block-woocommerce-catalog-sorting select:focus-visible,
select.orderby:focus,
select.orderby:focus-visible {
  outline: none;
  border-color: var(--wp--preset--color--oranje, #ff6600);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.18);
}

/* Mobiel: sidebar boven het grid, niet sticky */
@media (max-width: 781px) {
  .vs-shop__sidebar {
    position: static;
    margin-bottom: 1.25rem;
  }
}

/* =====================================================================
   INFOPAGINA'S (Over ons, Contact/FAQ, Retourbeleid, juridisch)
   ===================================================================== */
.vs-infopagina h1 {
  margin-bottom: 0.5rem;
}
.vs-infopagina h2 {
  margin-top: 2.2rem;
  color: var(--wp--preset--color--oranje, #ff6600);
  font-size: 1.35rem;
}
.vs-infopagina h3 {
  color: var(--wp--preset--color--contrast, #0a0f1a);
}
.vs-infopagina ul,
.vs-infopagina ol {
  line-height: 1.7;
}

/* Waarschuwingsblok (retourbeleid) */
.vs-belangrijk {
  margin: 1.5rem 0;
  border: 1.5px solid var(--wp--preset--color--oranje, #ff6600);
  border-left-width: 6px;
  border-radius: 12px;
  background: rgba(255, 102, 0, 0.06);
}
.vs-belangrijk p {
  margin: 0;
}

/* FAQ-accordeons */
.vs-faq__categorie {
  margin-top: 2rem !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vs-faq__item {
  margin: 0;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--wp--preset--color--mist, #eef1f6);
}
.vs-faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  cursor: pointer;
  font-weight: 700;
  transition: color 0.2s ease-in-out;
}
.vs-faq__item summary::-webkit-details-marker {
  display: none;
}
.vs-faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wp--preset--color--oranje, #ff6600);
  transition: transform 0.2s ease-in-out;
}
.vs-faq__item[open] summary::after {
  transform: rotate(45deg);
}
.vs-faq__item summary:hover {
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-faq__item > :not(summary) {
  padding-bottom: 1rem;
  margin: 0;
}

/* Contactformulier */
.vs-contactform {
  max-width: 640px;
}
.vs-form__rij {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.vs-form__rij label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vs-verplicht {
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-optioneel {
  font-weight: 500;
  text-transform: none;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}
.vs-form input[type="text"],
.vs-form input[type="email"],
.vs-form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid #d8dde6;
  border-radius: 10px;
  background: var(--wp--preset--color--base, #fff);
  font: inherit;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.vs-form input:focus-visible,
.vs-form textarea:focus-visible {
  outline: none;
  border-color: var(--wp--preset--color--oranje, #ff6600);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.18);
}
.vs-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.vs-form__verstuur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2rem;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--oranje, #ff6600);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
.vs-form__verstuur:hover {
  background: var(--wp--preset--color--oranje-deep, #e04e00);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(224, 78, 0, 0.4);
}
.vs-form__fallback {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--wp--preset--color--contrast-soft, #3b4456);
}
.vs-form-melding {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
}
.vs-form-melding--ok {
  border: 1.5px solid var(--wp--preset--color--succes, #067647);
  background: rgba(6, 118, 71, 0.08);
  color: var(--wp--preset--color--succes, #067647);
}
.vs-form-melding--fout {
  border: 1.5px solid var(--wp--preset--color--urgentie, #d92d20);
  background: rgba(217, 45, 32, 0.08);
  color: var(--wp--preset--color--urgentie, #d92d20);
}

/* --- Accordeon: productomschrijving --- */
.vs-pdp__accordeon {
  margin-top: 1rem;
  padding: 0.2rem 0;
  border-top: 1px solid var(--wp--preset--color--mist, #eef1f6);
  border-bottom: 1px solid var(--wp--preset--color--mist, #eef1f6);
}
.vs-pdp__accordeon summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;
}
.vs-pdp__accordeon summary::-webkit-details-marker {
  display: none;
}
.vs-pdp__accordeon summary:hover {
  color: var(--wp--preset--color--oranje, #ff6600);
}
.vs-pdp__accordeon summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s ease-in-out;
}
.vs-pdp__accordeon[open] summary::after {
  transform: rotate(45deg);
}
.vs-pdp__accordeon > :not(summary) {
  padding-bottom: 1rem;
}