/*
 * VisionSound — eigen stijlen bovenop de Sympos Webflow-template (visionsound.webflow.css).
 * Gebruikt de design tokens van de template: --base--orange, --grey--grey-*, Geist / Geist Mono.
 */

:root {
  --vs-ease: cubic-bezier(.25, .46, .45, .94); /* outQuad, zoals de Webflow-interacties */
  --vs-radius: 0;
  --vs-cream: var(--grey--grey-100, #f6f6ea);
  --vs-sand: var(--grey--grey-200, #eaeade);
  --vs-line: rgba(1, 1, 1, .12);
  --vs-line-light: rgba(255, 255, 255, .16);
  --vs-error: #c62d1f;
  --vs-success: #1f8a4c;
}

/* ---------------------------------------------------------------- basis (uit de Webflow global embed) */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: .125rem solid var(--base--light-orange, #ff470f);
  outline-offset: .125rem;
}

.container-medium, .container-small, .container-large { margin-right: auto !important; margin-left: auto !important; }
.text-style-3lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.text-style-2lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hide { display: none !important; }
@media screen and (max-width: 991px) { .hide-tablet { display: none !important; } }
@media screen and (max-width: 767px) { .hide-mobile-landscape { display: none !important; } }
@media screen and (max-width: 479px) { .hide-mobile { display: none !important; } }

p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }

.vs-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.vs-skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 1000;
  padding: .75rem 1rem; background: var(--base--orange); color: #fff;
  font-family: var(--_typography---font-family--alternate); text-decoration: none;
}
.vs-skip-link:focus { top: 1rem; }

/* honeypot tegen spam */
.vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- hover-interacties (vervangen Webflow IX2) */

.button_banner-text,
.button_icon,
.link-container,
.button_ticket_text { transition: transform .35s var(--vs-ease); }
.button_ticket_text { transition-duration: .25s; }

.button:hover .button_banner-text,
.button:focus-visible .button_banner-text { transform: translateY(-100%); }
.button:hover .button_icon,
.button:focus-visible .button_icon { transform: translate(100%, -100%); }

.button_cover { display: flex; transform: translateX(-110%); transition: transform .35s var(--vs-ease); }
.button:hover .button_cover,
.button:focus-visible .button_cover { transform: translateX(0); }
.button.is-leaving .button_cover { transform: translateX(110%); transition-duration: .2s; }
.button.is-resetting .button_cover { transition: none; }

.button_ticket:hover .button_ticket_text,
.button_ticket:focus-visible .button_ticket_text { transform: translateY(-100%); }

.nav_links:hover .link-container,
.nav_links:focus-visible .link-container,
.footer_link:hover .link-container,
.footer_link:focus-visible .link-container { transform: translateY(-125%); }
.nav_links, .footer_link { position: relative; overflow: clip; }

/* knopvarianten */
.button { text-decoration: none; }
.button.is-ghost .button_left { background-color: transparent; border-color: rgba(255, 255, 255, .6); }
.button.is-ghost-dark .button_left { background-color: transparent; border-color: var(--base--black); }
.button.is-ghost-dark .button_text { color: var(--base--black); }
.button.is-ghost-dark .button_icon { color: var(--base--black); }
.button.is-ghost-dark .button_cover { background-color: var(--base--black); }
.button.is-ghost-dark .button_text.text-color-orange { color: #fff; }
.button.is-ghost-dark .button_icon.is-bottom { color: #fff; }

/* De template zet .button:hover op een verwijderde Webflow-variabele die terugvalt op blauw (#003cff);
   die schemerde door de rand van omlijnde knoppen. Geen achtergrond meer, en een oranje rand als accent. */
.button:hover, .button:focus-visible { background-color: transparent; }
.button.is-ghost .button_left, .button.is-ghost-dark .button_left { transition: border-color .35s var(--vs-ease); }
.button.is-ghost:hover .button_left, .button.is-ghost:focus-visible .button_left,
.button.is-ghost-dark:hover .button_left, .button.is-ghost-dark:focus-visible .button_left { border-color: var(--base--orange); }

.vs-button-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* hamburger (vervangt NAVBAR_OPEN-interactie) */
.nav-button_line { transition: transform .3s var(--vs-ease), opacity .2s; }
.menu-button.w--open .nav-button_line.is-first { transform: translate(0, 0) rotate(45deg); }
.menu-button.w--open .nav-button_line.is-second { opacity: 0; }
.menu-button.w--open .nav-button_line.is-third { transform: translate(0, 0) rotate(-45deg); }

/* Op gsm geen inschuif-animatie voor grote blokken: de Webflow-interactie verbergt ze tot ze 20% in beeld zijn en
   schuift ze 25% van hun eigen hoogte op. Bij hoge blokken gaf dat lange zwarte vlakken tijdens het scrollen. */
@media screen and (max-width: 767px) {
  [animation="block"], [animation="ticket"], [animation="img"] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- navbar & logo */

.navbar { z-index: 50; }
/* Webflow zet de actieve link op color: inherit (zwart), onzichtbaar op de donkere hero. */
.nav_links.w--current { color: var(--base--light-orange, #ff470f); }
.navbar_logo.vs-logo { width: auto; height: 5.25rem; max-height: none; }
@media screen and (max-width: 767px) { .navbar_logo.vs-logo { height: 3.75rem; } }
.footer_logo { width: 10rem; height: 6.5rem; }
.vs-logo-contain { object-fit: contain; object-position: left center; }

/* ---------------------------------------------------------------- woordmerk (vervangt HG'25) */

.vs-wordmark { display: block; width: 100%; height: auto; overflow: visible; }
.vs-wordmark text {
  font-family: var(--_typography---font-family--headers, Geist, sans-serif);
  font-size: 262px;
  font-weight: 600;
  fill: var(--grey--grey-100, #f6f6ea);
}
.vs-hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 1, 1, .45) 0%, rgba(1, 1, 1, 0) 30%, rgba(1, 1, 1, 0) 50%, rgba(1, 1, 1, .75) 100%);
}

/* ---------------------------------------------------------------- hero: VISIONSOUND-titel
 * Letters komen één voor één op vanachter een onzichtbare rand, VISION krijgt daarna een lichtveeg.
 * js/visionsound.js past de lettergrootte aan zodat het woord exact de volle breedte vult.
 */
.vs-hero-img { animation: vs-hero-settle 2.6s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 60%; }
.vs-hero-slide { opacity: 0; transition: opacity 1.6s ease; }
.vs-hero-slide:not([src]) { display: none; }
.vs-hero-slide.is-visible { opacity: 1; animation: vs-hero-drift 8s linear both; }
@keyframes vs-hero-drift { from { transform: scale(1.06); } to { transform: none; } }
@keyframes vs-hero-settle {
  from { transform: scale(1.08); opacity: .35; }
  to { transform: none; opacity: 1; }
}

.vs-hero-brand {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 0 1.25vw .6vw; pointer-events: none;
}
.vs-hero-meta {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0 .4vw;
  font-family: var(--_typography---font-family--alternate); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(246, 246, 234, .85);
  animation: vs-fade-up .9s var(--vs-ease) 1.15s both;
}
.vs-hero-meta span { display: inline-flex; align-items: center; gap: .625rem; }
.vs-hero-meta span::before { content: ""; width: .45rem; height: .45rem; background: var(--base--orange); flex: none; }
@media screen and (max-width: 767px) { .vs-hero-meta { font-size: .625rem; gap: .5rem; } }

.vs-hero-title {
  display: inline-flex; align-self: flex-start; margin: 0; white-space: nowrap;
  font-family: var(--_typography---font-family--headers, Geist, sans-serif); font-weight: 700;
  font-size: 16.4vw; /* wordt door JS exact op de breedte gezet */
  line-height: 1; letter-spacing: -.055em;
  padding-right: .07em; /* compenseert de negatieve letterafstand na de D + omlijning, zodat die niet buiten beeld valt */
  color: var(--grey--grey-100, #f6f6ea);
}
.vs-hero-word { display: inline-flex; }
/* Door de negatieve letterafstand steken letters (en de omlijning van SOUND) zijdelings buiten hun vak:
   het masker knipt daarom enkel onderaan (voor het opkomen), niet op de zijkanten. */
.vs-hero-char { display: inline-block; line-height: .8; padding-top: .045em; margin-top: -.045em; clip-path: inset(-.5em -.5em -.03em -.5em); }
.vs-hero-char > span {
  display: inline-block;
  padding: 0 .1em; margin: 0 -.1em; /* ruimer vlak zodat de vulkleur en gloed de hele letter bedekken */
  animation: vs-rise 1.15s cubic-bezier(.19, 1, .22, 1) both;
  animation-delay: calc(.25s + var(--i) * 55ms);
}
@keyframes vs-rise {
  from { transform: translateY(105%); }
  to { transform: none; }
}
/* Warme lichtveeg over alle letters nadat ze staan (loopt door van V tot D via --i).
   --vs-base is de gewone vulkleur: crème voor VISION, transparant voor het omlijnde SOUND,
   zodat SOUND enkel oplicht waar de gloed passeert. */
.vs-hero-char > span {
  --vs-base: var(--grey--grey-100, #f6f6ea);
  color: transparent;
  background: linear-gradient(105deg, var(--vs-base) 0 40%, #ffb48f 45%, #ffd9c4 48%, #fff 50%, #ffd9c4 52%, #ffb48f 55%, var(--vs-base) 60% 100%) 100% 0 / 320% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: vs-rise 1.15s cubic-bezier(.19, 1, .22, 1) both, vs-shine 1.4s ease-in-out both;
  animation-delay: calc(.25s + var(--i) * 55ms), calc(1.35s + var(--i) * 70ms);
}
/* SOUND: omlijnd */
.vs-hero-word.is-outline .vs-hero-char > span {
  --vs-base: rgba(246, 246, 234, 0);
  -webkit-text-stroke: .016em var(--grey--grey-100, #f6f6ea);
}
@keyframes vs-shine {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
.footer_img .vs-wordmark text { fill: var(--grey--grey-100, #f6f6ea); }

/* ---------------------------------------------------------------- tags & links */

.tag-pill.vs-tag-inline { display: inline-flex; align-self: flex-start; }
/* badge ("Meest verhuurd") moet ook op donkere achtergronden leesbaar zijn */
.tag-pill.vs-badge { background-color: var(--base--orange); color: #fff; }
.vs-text-link {
  font-family: var(--_typography---font-family--alternate); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8125rem; color: var(--base--orange); text-decoration: none; border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.vs-inline-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: .2em; }
.vs-inline-link:hover { color: var(--base--light-orange); }
.vs-inline-link.is-dark { text-decoration-color: rgba(1, 1, 1, .35); }
.vs-inline-link.is-dark:hover { color: var(--base--orange); }

/* ---------------------------------------------------------------- page hero (subpagina's) */

.vs-page-hero {
  position: relative; overflow: clip;
  background-color: var(--bg-color--bg-dark);
  padding: 10rem 0 5rem;
}
.vs-page-hero.is-compact { padding: 9.5rem 0 2.5rem; }
.vs-page-hero.is-full { min-height: 100svh; display: flex; align-items: center; }
.vs-page-hero.is-full > .padding-global { width: 100%; }
.vs-page-hero_img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35;
}
.vs-page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 1, 1, .6) 0%, rgba(1, 1, 1, .2) 50%, rgba(1, 1, 1, .85) 100%);
}
.vs-page-hero .padding-global { position: relative; z-index: 1; }
.vs-page-hero_content { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: 56rem; }
.vs-measure { max-width: 36rem; }
.vs-measure-wide { max-width: 46rem; }

.vs-breadcrumbs {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem;
  font-family: var(--_typography---font-family--alternate); font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-color--text-on-secondary, rgba(255, 255, 255, .72));
}
.vs-breadcrumbs a { color: inherit; text-decoration: none; }
.vs-breadcrumbs a:hover { color: #fff; }
.vs-breadcrumbs [aria-current] { color: #fff; }

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

.vs-section { padding: 4.5rem 0 7rem; }
.vs-section.is-cream { background-color: var(--vs-cream); }
@media screen and (max-width: 767px) { .vs-section { padding: 3rem 0 4.5rem; } .vs-page-hero { padding: 8rem 0 3.5rem; } }

.vs-empty { padding: 3rem 0; font-size: 1rem; color: var(--text-color--text-secondary); }

/* ---------------------------------------------------------------- catalogus */

.vs-catalog-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding-bottom: 2rem; margin-bottom: 3rem; border-bottom: 1px solid var(--vs-line);
}
.vs-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.vs-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1rem; border: 1px solid rgba(1, 1, 1, .2);
  font-family: var(--_typography---font-family--alternate); font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--base--black); text-decoration: none; background: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.vs-chip:hover { border-color: var(--base--black); }
.vs-chip.is-active { background-color: var(--base--orange); border-color: var(--base--orange); color: #fff; }
.vs-chip_count { opacity: .6; }
.vs-search input {
  width: 18rem; max-width: 100%; height: 2.875rem; padding: 0 1rem;
  border: 1px solid rgba(1, 1, 1, .2); background: #fff; font: inherit; font-size: .9375rem; color: var(--base--black);
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
@media screen and (max-width: 767px) { .vs-search, .vs-search input { width: 100%; } }

.vs-category-block + .vs-category-block,
.vs-product + .vs-category-block,
.vs-artist + .vs-category-block,
.vs-category-block + .vs-empty { margin-top: 5rem; }
.vs-category-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2rem;
}
.vs-category-head p { margin-top: .5rem; }

.vs-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.5rem; }
@media screen and (max-width: 479px) { .vs-product-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } }

.vs-product-card {
  position: relative; display: flex; flex-direction: column; background-color: var(--vs-sand); color: var(--base--black); text-decoration: none;
  transition: transform .35s var(--vs-ease), box-shadow .35s var(--vs-ease);
}
.vs-product-card_name a { color: inherit; text-decoration: none; }
.vs-product-card_name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* hele kaart klikbaar */
.vs-product-card_name a:focus-visible { outline: none; }
.vs-product-card:has(.vs-product-card_name a:focus-visible) { outline: 2px solid var(--base--orange); outline-offset: 3px; }
.vs-product-card_actions { display: flex; align-items: center; gap: .75rem; }
/* Plusknop: ligt boven de kaartlink, zodat een klik het product meteen in de offerte zet. */
.vs-basket-add.is-icon {
  position: relative; z-index: 2; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; justify-content: center;
  border-width: 1.5px; border-color: rgba(1, 1, 1, .3); color: inherit;
}
.vs-basket-add.is-icon .vs-basket-add_icon { width: 1.25rem; height: 1.25rem; }
.vs-basket-add.is-icon:hover { border-color: var(--base--orange); background-color: var(--base--orange); color: #fff; }
.vs-basket-add.is-icon.is-added { border-color: var(--base--orange); color: var(--base--orange); }
.vs-basket-add.is-icon.is-flash { color: #fff; }
.vs-basket-add.is-icon.is-flash .vs-basket-add_icon { animation: vs-bump .45s var(--vs-ease); }
.vs-product-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(1, 1, 1, .08); }
.vs-product-card_img { position: relative; aspect-ratio: 1 / 1; background-color: #fff; overflow: clip; }
.vs-product-card_img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.5rem;
  transition: transform .5s var(--vs-ease);
}
.vs-product-card:hover .vs-product-card_img img { transform: scale(1.05); }
.vs-product-card_body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.25rem 1.25rem 1.25rem; }
.vs-product-card_name {
  font-family: var(--_typography---font-family--alternate); font-size: .9375rem; line-height: 1.35; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
}
.vs-product-card_meta { font-size: .875rem; color: var(--text-color--text-secondary); }
.vs-product-card_foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .75rem; }
.vs-product-card_price { font-size: 1.5rem; font-weight: 500; color: var(--base--orange); }
.vs-product-card_arrow { display: flex; width: 1.5rem; height: 1.5rem; transition: transform .35s var(--vs-ease); }
.vs-product-card:hover .vs-product-card_arrow { transform: translate(3px, -3px); color: var(--base--orange); }
@media screen and (max-width: 479px) {
  .vs-product-card_body { padding: .875rem; }
  .vs-product-card_name { font-size: .8125rem; }
  .vs-product-card_price { font-size: 1.125rem; }
  .vs-product-card_img img { padding: .75rem; }
}

/* ---------------------------------------------------------------- productdetail */

.vs-product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
@media screen and (max-width: 991px) { .vs-product { grid-template-columns: 1fr; gap: 2.5rem; } }
.vs-product_main { position: relative; aspect-ratio: 1 / 1; background-color: #fff; }
.vs-product_main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3rem; }
.vs-product_thumbs { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.vs-product_thumb {
  position: relative; width: 5.5rem; height: 5.5rem; padding: 0; background: #fff; border: 2px solid transparent; cursor: pointer;
}
.vs-product_thumb.is-active { border-color: var(--base--orange); }
.vs-product_thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.vs-product_info { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.vs-product_title { text-transform: uppercase; }
.vs-product_price { font-size: 3rem; line-height: 1; font-weight: 500; color: var(--base--orange); }
.vs-product_intro { margin: 0; max-width: 40rem; }
/* "excl. BTW" klein naast een prijs; één regel onder een prijsoverzicht. */
.vs-vat {
  margin-left: .5rem; font-family: var(--_typography---font-family--alternate); font-size: .75rem; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; opacity: .7;
}
.vs-vat-note { margin: 1rem 0 0; font-size: .8125rem; }
.vs-product_packages { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--vs-line); width: 100%; }

.vs-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.vs-checklist li { display: flex; align-items: center; gap: .75rem; font-size: 1rem; }
.vs-checklist svg { flex: none; color: var(--base--orange); }
.vs-specs { display: flex; flex-direction: column; gap: 1rem; }
.w-mod-js .vs-checklist.is-collapsed .is-extra { display: none; }
.vs-checklist:not(.is-collapsed) .is-extra { animation: vs-fade-up .35s var(--vs-ease) both; }
.vs-more.is-on-light { color: var(--base--orange); }
.vs-more.is-on-light:hover { color: var(--base--black); }

/* ---------------------------------------------------------------- pakketten */

/* align-items: start → een opengeklapt ticket groeit alleen, de buren blijven hun hoogte houden. */
.vs-package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 2rem; align-items: start; }
@media screen and (max-width: 479px) { .vs-package-grid { grid-template-columns: 1fr; } }
.pricing_ticket.vs-package { max-width: none; scroll-margin-top: 7rem; }

/* Inhoud van een ticket: max. 5 lijnen + "Toon nog X items". js/visionsound.js zet per rij een min-height
   op .pricing_ticket_top zodat ingeklapte tickets naast elkaar even hoog eindigen (niet op gsm). */
.vs-ticket-items { display: flex; flex-direction: column; gap: 1rem; }
.w-mod-js .piricing_ticket_benefit-list.is-collapsed .is-extra { display: none; }
.piricing_ticket_benefit-list:not(.is-collapsed) .is-extra { animation: vs-fade-up .35s var(--vs-ease) both; }
html:not(.w-mod-js) .vs-more { display: none; }
.vs-more {
  display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start;
  min-height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--_typography---font-family--alternate); font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--base--light-orange, #ff470f);
}
.vs-more:hover { color: #fff; }
.vs-more_icon { width: 1rem; height: 1rem; transform: rotate(90deg); transition: transform .3s var(--vs-ease); }
.vs-more[aria-expanded="true"] .vs-more_icon { transform: rotate(-90deg); }
.vs-package_img { position: relative; aspect-ratio: 4 / 3; background-color: #fff; }
.vs-package_img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.vs-package_tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.vs-package_tags:empty { display: none; }
.vs-package_name { font-size: 1.125rem; font-weight: 500; margin-bottom: .25rem; }
.vs-package:target .pricing_ticket_top { box-shadow: inset 0 0 0 2px var(--base--orange); }

/* ---------------------------------------------------------------- home: projecten-slider */

.vs-slider { width: 100%; }
.vs-slider_track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; margin-right: calc(-1 * var(--_sizes---fixed--xlarge, 1.5rem));
}
.vs-slider_track::-webkit-scrollbar { display: none; }
.vs-slider_track .lineup_card_container { scroll-snap-align: start; width: 26.5rem; }
@media screen and (max-width: 767px) { .vs-slider_track .lineup_card_container { width: 82vw; min-width: 0; } }
.vs-project-card { color: inherit; height: 100%; }
.vs-project-card .lineup_card_img { display: block; }
.vs-project-card .img { transition: transform .6s var(--vs-ease); }
.vs-project-card:hover .img { transform: scale(1.05); }
.vs-project-card .lineup_card_content { gap: 0; }
.vs-project-card_open {
  display: block; width: 100%; padding-right: 0; padding-bottom: 0; padding-left: 0; border: 0; background: none; cursor: pointer;
}
.vs-project-card_hint {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 1; display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .625rem; font-family: var(--_typography---font-family--alternate); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background-color: rgba(1, 1, 1, .65); border-radius: var(--vs-radius-small, 0);
  transition: background-color .25s;
}
.vs-project-card_hint .icon-1x1-small { width: 1rem; height: 1rem; }
.vs-project-card_open:hover .vs-project-card_hint { background-color: var(--base--orange); }
.vs-project-card_title {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; cursor: pointer; transition: color .2s;
}
.vs-project-card_title:hover { color: var(--base--orange); }

/* Blikvanger "In de kijker" onder de hero (tijdelijk, aan/uit in het beheer). */
.vs-highlight { padding: 2.5rem 0; background-color: var(--vs-sand); color: var(--base--black); }
.vs-highlight_inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 2.5rem;
  border-left: 4px solid var(--base--orange); padding-left: 2rem;
}
.vs-highlight_inner.is-no-img { grid-template-columns: 1fr; }
.vs-highlight_img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--vs-radius-small, 0); }
.vs-highlight_img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vs-highlight_content { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 36rem; }
.vs-highlight_content h2, .vs-highlight_content p { margin: 0; }
@media screen and (max-width: 767px) {
  .vs-highlight_inner { grid-template-columns: 1fr; gap: 1.5rem; padding-left: 1.25rem; }
}

/* Venster (projecten): native <dialog>, gesloten met Esc, de sluitknop of een klik naast het venster. */
.vs-dialog {
  width: min(64rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0;
  color: var(--base--black); background-color: #fff; border-radius: var(--vs-radius-small, 0); overflow: auto;
}
.vs-dialog::backdrop { background-color: rgba(1, 1, 1, .75); }
.vs-dialog[open] { animation: vs-fade-up .35s var(--vs-ease) both; }
body:has(.vs-dialog[open]) { overflow: hidden; }
.vs-dialog_inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.vs-dialog_inner:not(:has(.vs-dialog_gallery)) { grid-template-columns: 1fr; }
.vs-dialog_close {
  position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  padding: 0; color: #fff; background-color: rgba(1, 1, 1, .7); border: 0; border-radius: 999px; cursor: pointer;
}
.vs-dialog_close .icon-1x1-medium { width: 1.25rem; height: 1.25rem; }
.vs-dialog_close:hover { background-color: var(--base--orange); }
.vs-dialog_gallery { padding: 1rem; background-color: var(--base--black, #010101); }
.vs-dialog_main { position: relative; aspect-ratio: 4 / 3; }
.vs-dialog_main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vs-dialog_thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: thin; }
.vs-dialog_thumbs .vs-product_thumb { flex: none; width: 4.5rem; height: 4.5rem; background: #111; }
.vs-dialog_thumbs .vs-product_thumb img { object-fit: cover; padding: 0; }
.vs-dialog_content { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2.5rem 2rem 2rem; }
.vs-dialog_content h2, .vs-dialog_content p { margin: 0; }
.vs-dialog_content .vs-button-row { margin-top: .5rem; }
@media screen and (max-width: 767px) {
  .vs-dialog_inner { grid-template-columns: 1fr; }
  .vs-dialog_content { padding: 1.5rem 1.25rem 1.5rem; }
}
.vs-project-card_head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.vs-project-card_head h3 { margin: 0; overflow-wrap: anywhere; }
.vs-project-card_head h3 a { color: inherit; text-decoration: none; }
.vs-project-card_toggle {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid rgba(1, 1, 1, .25); background: transparent; color: inherit; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.vs-project-card_toggle svg { width: 1.25rem; height: 1.25rem; transition: transform .3s var(--vs-ease); }
.vs-project-card_toggle:hover { background-color: var(--base--orange); border-color: var(--base--orange); color: #fff; }
.vs-project-card.is-open .vs-project-card_toggle svg { transform: rotate(90deg); }
/* Beschrijving standaard dicht; openklappen via het pijltje (grid-rows 0fr → 1fr). */
.vs-project-card_more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--vs-ease); }
.vs-project-card_more > div { min-height: 0; overflow: hidden; }
.vs-project-card_more p { margin: 0; padding-top: .75rem; }
.vs-project-card.is-open .vs-project-card_more { grid-template-rows: 1fr; }
.vs-slider_nav { display: flex; gap: .75rem; margin-top: 2rem; }
.vs-slider_nav .arrow_item {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0;
  border: 1px solid rgba(1, 1, 1, .25); background: transparent; color: var(--base--black); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.vs-slider_nav .arrow_item:hover { background-color: var(--base--black); color: #fff; }
.vs-slider_nav .arrow_item:disabled { opacity: .35; cursor: default; background: transparent; color: var(--base--black); }

/* ---------------------------------------------------------------- home: overige aanpassingen */

.event_cards.vs-cards-3 { grid-template-columns: repeat(3, 1fr); }
@media screen and (max-width: 991px) { .event_cards.vs-cards-3 { grid-template-columns: 1fr; } }
.vs-event-link { color: inherit; text-decoration: none; transition: background-color .3s; }
.vs-event-link:hover { background-color: var(--vs-cream); }
.impact_header { align-items: flex-end; }
.vs-counter { font-variant-numeric: tabular-nums; } /* vaste cijferbreedte: geen verspringen tijdens het optellen */
.rundown_row_content .button { display: inline-flex; width: auto; }
/* Verhuur-categorieën: gewone lijst onder elkaar (de kleverige stapel uit de template schoof de rijen over elkaar,
   dat vonden bezoekers verwarrend). Elke rij komt los in beeld via animation="block". */
.rundown_row { position: relative; }
.rundown_row.is-no-img { grid-template-columns: 1fr; }
.sec_cta .img { z-index: 0; }
.sec_cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(1, 1, 1, .8) 0%, rgba(1, 1, 1, .35) 60%, rgba(1, 1, 1, .1) 100%);
}
.sec_cta .padding-global { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; }
.sec_cta .padding-global > .container-large { width: 100%; }
.sec_cta.vs-cta-compact { height: 70svh; min-height: 30rem; }
.testimonials_content .button { align-self: flex-start; }
.vs-text-stack { display: flex; flex-direction: column; gap: .875rem; }
.vs-text-stack p { margin: 0; }
.vs-impact-intro { max-width: 40rem; }

/* ---------------------------------------------------------------- home: pakketten-overzicht */

.vs-home-packages_head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
  margin-bottom: var(--_sizes---fixed--xlarge, 3rem);
}
.vs-home-packages_intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: 34rem; }
.vs-home-packages_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vs-home-package {
  display: flex; flex-direction: column; color: var(--text-color--text-on-primary, #fff); text-decoration: none;
  background-color: var(--grey--grey-600, #212121); border-radius: var(--vs-radius); overflow: hidden;
  transition: transform .3s var(--vs-ease), background-color .3s;
}
.vs-home-package:hover { transform: translateY(-4px); background-color: var(--base--black, #010101); }
.vs-home-package:focus-visible { outline: 2px solid var(--base--orange); outline-offset: 3px; }
.vs-home-package_img { position: relative; aspect-ratio: 4 / 3; background-color: #fff; }
.vs-home-package_img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.vs-home-package_img.is-empty {
  display: grid; place-items: center; background-color: var(--base--orange);
  font-family: var(--_typography---font-family--alternate); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase;
}
.vs-home-package_badge {
  position: absolute; top: .625rem; left: .625rem; z-index: 1; padding: .3rem .55rem;
  font-family: var(--_typography---font-family--alternate); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background-color: var(--base--orange); border-radius: var(--vs-radius-small, 0);
}
.vs-home-package_body { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1rem 1.125rem 1.125rem; flex: 1; }
.vs-home-package_name { font-family: var(--_typography---font-family--alternate); letter-spacing: .08em; text-transform: uppercase; }
.vs-home-package_price { font-size: 1.5rem; font-weight: 500; white-space: nowrap; color: var(--base--orange); }
@media screen and (max-width: 991px) { .vs-home-packages_grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) {
  .vs-home-packages_grid { grid-template-columns: 1fr; }
  .vs-home-package { flex-direction: row; }
  .vs-home-package_img { width: 40%; aspect-ratio: 1; flex-shrink: 0; }
  .vs-home-package_body { flex-direction: column; align-items: flex-start; justify-content: center; }
}

/* ---------------------------------------------------------------- artiesten */

.vs-artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media screen and (max-width: 991px) { .vs-artist-grid { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 600px) { .vs-artist-grid { grid-template-columns: 1fr; } }
.vs-artist-card { color: inherit; text-decoration: none; }
.vs-artist-card .img { transition: transform .6s var(--vs-ease); }
.vs-artist-card:hover .img { transform: scale(1.04); }

.vs-artist { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; }
@media screen and (max-width: 991px) { .vs-artist { grid-template-columns: 1fr; gap: 2.5rem; } }
.vs-artist_photo { position: relative; padding-top: 115%; overflow: clip; }
.vs-artist_body { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.vs-quote {
  font-family: var(--_typography---font-family--alternate); text-transform: uppercase; letter-spacing: .08em;
  font-size: 1.25rem; line-height: 1.4; color: var(--base--orange); padding-left: 1.25rem; border-left: 3px solid var(--base--orange);
}
.vs-social-pill {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem;
  border: 1px solid rgba(1, 1, 1, .25); color: var(--base--black); text-decoration: none;
  font-family: var(--_typography---font-family--alternate); font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  transition: background-color .2s, color .2s;
}
.vs-social-pill:hover { background-color: var(--base--black); color: #fff; }
.vs-references { list-style: none; margin: 0; padding: 0; columns: 3 16rem; column-gap: 2.5rem; }
.vs-references li {
  break-inside: avoid; padding: .75rem 0; border-bottom: 1px solid var(--vs-line);
  font-size: .9375rem; color: var(--text-color--text-primary);
}
.vs-references_note { margin-top: 1.5rem; }
.vs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.vs-gallery_item { position: relative; padding-top: 75%; overflow: clip; background: var(--vs-sand); }

/* ---------------------------------------------------------------- tekstpagina's */

.vs-prose { font-size: 1rem; line-height: 1.65; color: var(--text-color--text-primary); }
.vs-prose > * + * { margin-top: 1rem; }
.vs-prose h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 500; margin-top: 2.5rem; }
.vs-prose h2.h5 { font-size: 1.125rem; margin-top: 1.75rem; }
.vs-prose > h2:first-child { margin-top: 0; }
.vs-prose ul { padding-left: 1.25rem; }
.vs-prose li + li { margin-top: .5rem; }
.vs-prose a { color: var(--base--orange); }

/* ---------------------------------------------------------------- contact */

.vs-contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media screen and (max-width: 991px) { .vs-contact { grid-template-columns: 1fr; } }
.vs-contact_form form { display: flex; flex-direction: column; gap: 1.25rem; }
.vs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media screen and (max-width: 600px) { .vs-form-grid { grid-template-columns: 1fr; } }

.vs-field { display: flex; flex-direction: column; gap: .5rem; }
.vs-field > label {
  font-family: var(--_typography---font-family--alternate); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-color--text-secondary);
}
.vs-field input, .vs-field textarea {
  width: 100%; padding: .875rem 1rem; border: 1px solid rgba(1, 1, 1, .18); border-radius: 0; background: #fff;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--base--black); -webkit-appearance: none; appearance: none;
}
.vs-field textarea { resize: vertical; min-height: 10rem; }
.vs-field input:focus, .vs-field textarea:focus { border-color: var(--base--orange); outline: none; box-shadow: 0 0 0 1px var(--base--orange); }
.vs-field.has-error input, .vs-field.has-error textarea { border-color: var(--vs-error); }
.vs-field_error { color: var(--vs-error); font-size: .875rem; }
.vs-field-check label { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.vs-field-check input[type="checkbox"] {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem; padding: 0; border: 1px solid rgba(1, 1, 1, .35); background: #fff;
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; cursor: pointer;
}
.vs-field-check input[type="checkbox"] { transition: background-color .15s, border-color .15s; }
/* Aangevinkt: oranje vakje met een wit vinkje (clip-path tekent de vinkvorm). */
.vs-field-check input[type="checkbox"]::before {
  content: ""; width: .8rem; height: .8rem; background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0); transition: transform .15s var(--vs-ease);
}
.vs-field-check input[type="checkbox"]:checked { background-color: var(--base--orange); border-color: var(--base--orange); }
.vs-field-check input[type="checkbox"]:checked::before { transform: scale(1); }
.vs-submit { border: 0; width: 100%; cursor: pointer; color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }

.vs-alert { padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 1rem; border-left: 4px solid; }
.vs-alert.is-success { background: #fff; border-color: var(--vs-success); }
.vs-alert.is-error { background: #fff4f2; border-color: var(--vs-error); color: #7a1a10; }

.vs-contact_info {
  display: flex; flex-direction: column; gap: 2rem; padding: 2rem;
  background-color: var(--bg-color--bg-dark); color: var(--text-color--text-on-primary);
}
.vs-contact_logo { width: 9rem; height: auto; }
.vs-contact_list { margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.vs-contact_list dt {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem;
  font-family: var(--_typography---font-family--alternate); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-color--text-on-secondary, rgba(255, 255, 255, .72));
}
.vs-contact_list dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.vs-contact_list a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--vs-line-light); }
.vs-contact_list a:hover { color: var(--base--light-orange); }

/* ---------------------------------------------------------------- offertemandje */

.vs-basket-add {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 3rem; padding: 0 1.25rem;
  font-family: var(--_typography---button--font-family, var(--_typography---font-family--alternate)); font-size: .875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--base--black); background: transparent;
  border: .125rem solid currentColor; border-radius: var(--vs-radius); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.vs-basket-add:hover { color: var(--base--orange); }
.vs-basket-add.is-added { color: var(--base--orange); }
.vs-basket-add.is-flash { background-color: var(--base--orange); border-color: var(--base--orange); color: #fff; }
.vs-basket-add.is-on-dark { color: var(--text-color--text-on-primary, #fff); min-height: 2.5rem; padding: 0 1rem; font-size: .8125rem; }
.vs-basket-add.is-on-dark:hover, .vs-basket-add.is-on-dark.is-added { color: var(--base--orange); }
.vs-basket-add.is-on-dark.is-flash { color: #fff; }
.vs-basket-add_icon { display: flex; width: 1.125rem; height: 1.125rem; }

.vs-basket-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem .75rem 1.125rem;
  font-family: var(--_typography---font-family--alternate); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background-color: var(--base--orange); border-radius: 999px; text-decoration: none;
  box-shadow: 0 .75rem 2rem rgba(1, 1, 1, .35);
}
.vs-basket-fab[hidden] { display: none; }

/* Themaknop linksonder: toont het icoon en de naam van de versie waarnaar je overschakelt. */
.vs-theme-toggle {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem 0 .875rem;
  font-family: var(--_typography---font-family--alternate); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--base--black); background-color: #fff; border: 1px solid rgba(1, 1, 1, .15); border-radius: 999px; cursor: pointer;
  box-shadow: 0 .75rem 2rem rgba(1, 1, 1, .2); transition: background-color .25s, color .25s, border-color .25s;
}
.vs-theme-toggle:hover { border-color: var(--base--orange); color: var(--base--orange); }
.vs-theme-toggle:focus-visible { outline: 2px solid var(--base--orange); outline-offset: 3px; }
.vs-theme-toggle_icon { display: flex; width: 1.125rem; height: 1.125rem; }
.vs-theme-toggle_icon .icon-1x1-small { width: 100%; height: 100%; }
.vs-theme-toggle_icon.is-sun { display: none; }
html.vs-theme-donker .vs-theme-toggle { color: #f5f5f4; background-color: #1c1917; border-color: rgba(255, 255, 255, .18); }
html.vs-theme-donker .vs-theme-toggle:hover { border-color: var(--base--orange); color: var(--base--orange); }
html.vs-theme-donker .vs-theme-toggle_icon.is-sun { display: flex; }
html.vs-theme-donker .vs-theme-toggle_icon.is-moon { display: none; }
@media screen and (max-width: 479px) {
  .vs-theme-toggle { left: .875rem; bottom: .875rem; width: 2.75rem; padding: 0; justify-content: center; }
  .vs-theme-toggle_label { display: none; }
  .vs-basket-fab { right: .875rem; bottom: .875rem; }
}
.vs-basket-fab .icon-1x1-small { width: 1.25rem; height: 1.25rem; }
.vs-basket-fab_count {
  display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem;
  font-size: .75rem; color: var(--base--orange); background-color: #fff; border-radius: 999px; letter-spacing: 0;
}
.vs-basket-fab.is-bump { animation: vs-bump .45s var(--vs-ease); }
@keyframes vs-bump { 40% { transform: scale(1.12); } }

.vs-basket { margin-bottom: 1.5rem; padding: 1.25rem; background-color: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); }
.vs-basket[hidden] { display: none; }
.vs-basket_head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.vs-basket_title {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--_typography---font-family--alternate); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase;
}
.vs-basket_title .icon-1x1-small { width: 1.25rem; height: 1.25rem; color: var(--base--orange); }
.vs-basket_clear { font: inherit; font-size: .8125rem; color: var(--text-color--text-secondary); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.vs-basket_list { margin: 0; padding: 0; list-style: none; }
.vs-basket_item { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--vs-line); }
.vs-basket_name { flex: 1; }
.vs-basket_qty {
  width: 4rem; padding: .375rem .5rem; font: inherit; text-align: center; color: inherit;
  background: transparent; border: 1px solid rgba(1, 1, 1, .2); border-radius: var(--vs-radius);
}
.vs-basket_remove { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--text-color--text-secondary); background: none; border: 0; cursor: pointer; }
.vs-basket_remove:hover { color: var(--vs-error); }
.vs-basket_note { margin: .75rem 0 0; }

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


.vs-footer-info {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  padding-top: 2.5rem; border-top: 1px solid var(--vs-line-light);
}
@media screen and (max-width: 991px) { .vs-footer-info { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 479px) { .vs-footer-info { grid-template-columns: 1fr; } }
.vs-footer-info_col { display: flex; flex-direction: column; gap: .375rem; color: var(--text-color--text-on-primary); font-size: .9375rem; }
.vs-footer-info_col a { color: inherit; text-decoration: none; }
.vs-footer-info_col a:hover { color: var(--base--light-orange); }
.vs-footer-info_label {
  margin-bottom: .375rem; font-family: var(--_typography---font-family--alternate); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-color--text-on-secondary, rgba(255, 255, 255, .72));
}
.vs-socials { display: flex; gap: .75rem; }
.vs-socials a { display: flex; color: inherit; transition: color .2s; }
.vs-socials a:hover { color: var(--base--light-orange); }
.vs-footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 2rem;
  font-family: var(--_typography---font-family--alternate); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-color--text-on-secondary, rgba(255, 255, 255, .72));
}
.vs-credit-link { color: #155dfc; text-decoration: none; transition: color .2s; }
.vs-credit-link:hover { color: #4d84ff; }
/* Homepage-CTA gebruikt de oorspronkelijke templatefoto, die al donker genoeg is: geen extra verloop. */
.sec_cta.is-template-img::after { display: none; }

/* ---------------------------------------------------------------- intro-animatie subpagina's
 * De Webflow-scrollanimaties starten pas als een element 80% van het scherm passeert. Bovenaan een subpagina
 * leek de pagina daardoor leeg tot je scrolde. Wat meteen zichtbaar is, animeert daarom op load (zonder scroll).
 */
@keyframes vs-fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}
.vs-page-hero_content > *,
.vs-breadcrumbs,
.vs-package-grid > *,
.vs-artist-grid > * { animation: vs-fade-up .7s var(--vs-ease) both; }
.vs-page-hero_content > :nth-child(2) { animation-delay: .08s; }
.vs-page-hero_content > :nth-child(3) { animation-delay: .16s; }
.vs-page-hero_content > :nth-child(n+4) { animation-delay: .24s; }
.vs-package-grid > *, .vs-artist-grid > * { animation-delay: .2s; }
.vs-package-grid > :nth-child(2), .vs-artist-grid > :nth-child(2) { animation-delay: .28s; }
.vs-package-grid > :nth-child(3), .vs-artist-grid > :nth-child(3) { animation-delay: .36s; }

/* Adres als link naar de Google Maps-routebeschrijving (footer); zelfde stijl als e-mail en telefoon */
.vs-directions { display: flex; flex-direction: column; gap: .375rem; }

/* ---------------------------------------------------------------- algemene voorwaarden */
.vs-terms { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; align-items: start; }
@media screen and (max-width: 991px) { .vs-terms { grid-template-columns: 1fr; gap: 2.5rem; } }
.vs-terms_toc { position: sticky; top: 2rem; padding: 1.5rem; background: var(--vs-sand); }
@media screen and (max-width: 991px) { .vs-terms_toc { position: static; } }
.vs-terms_toc-title {
  margin-bottom: .75rem; font-family: var(--_typography---font-family--alternate); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-color--text-secondary);
}
.vs-terms_toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; }
@media screen and (max-width: 991px) and (min-width: 600px) { .vs-terms_toc ol { display: block; columns: 2; column-gap: 2rem; } }
.vs-terms_toc a { display: flex; gap: .5rem; padding: .3rem 0; font-size: .875rem; line-height: 1.35; color: var(--base--black); text-decoration: none; }
.vs-terms_toc a span { flex: none; width: 1.5rem; color: var(--text-color--text-secondary); font-variant-numeric: tabular-nums; }
.vs-terms_toc a:hover { color: var(--base--orange); }
.vs-terms_body { max-width: 46rem; }
.vs-terms_article { scroll-margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--vs-line); }
.vs-terms_article:first-child { padding-top: 0; border-top: 0; }
.vs-terms_article + .vs-terms_article { margin-top: 2rem; }
.vs-prose .vs-terms_article h2 { margin-top: 0; font-size: 1.375rem; }
.vs-terms_num { color: var(--base--orange); }
.vs-terms_sub { font-family: var(--_typography---font-family--alternate); font-weight: 500; }
.vs-terms_defs { margin: 1rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.vs-terms_defs dt { font-weight: 600; }
.vs-terms_defs dd { margin: .125rem 0 0; }
.vs-terms_updated { margin-top: 3rem !important; }
.vs-terms_article > * + * { margin-top: .875rem; }
.vs-terms_article > h2 + * { margin-top: 1rem; }
.vs-terms_article ul { margin-bottom: 0; }