.cvc-carousel-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* height:100% wint van de inline aspect-ratio zodra de OUDERcontainer
     een eigen, expliciete hoogte heeft (bv. via "Uitrekken" naast een
     hogere buur, of via een responsieve Min. hoogte per breakpoint) —
     dan vult de foto die hoogte i.p.v. daar los van te blijven, met
     lege ruimte als gevolg. Heeft de ouder GEEN eigen hoogte (normale
     widget-plaatsing), dan resolvet height:100% naar auto en bepaalt de
     aspect-ratio alsnog de hoogte, zoals voorheen. */
  height: 100%;
}
.cvc-single-image,
.cvc-carousel,
.cvc-carousel-track {
  width: 100%;
  height: 100%;
}
.cvc-single-image {
  object-fit: cover;
  display: block;
}
.cvc-carousel {
  position: relative;
}
.cvc-carousel-track {
  position: relative;
}
.cvc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  transform: translateX(0);
}
.cvc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cvc-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
/* schuif-overgang */
.cvc-carousel[data-transition="slide"] .cvc-slide {
  transition: transform 0.6s ease, opacity 0s;
  opacity: 1;
  visibility: visible;
  transform: translateX(100%);
  z-index: 0;
}
.cvc-carousel[data-transition="slide"] .cvc-slide.is-active {
  transform: translateX(0);
  z-index: 1;
}
.cvc-carousel[data-transition="slide"] .cvc-slide.is-prev {
  transform: translateX(-100%);
}

button.cvc-playpause {
  position: absolute;
  z-index: 5;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.45);
  padding: 0;
}
button.cvc-playpause:hover,
button.cvc-playpause:focus {
  border: none;
}
.cvc-playpause svg {
  fill: #ffffff;
}
.cvc-pos-bottom-right {
  right: 16px;
  bottom: 16px;
}
.cvc-pos-bottom-left {
  left: 16px;
  bottom: 16px;
}

/* ---- Vormscheiding — links/rechts ----
   Statische CSS, geen server-side generatie: laadt daardoor altijd meteen,
   ook live in de Elementor-editor. Kleur/kant/vorm-stijl komen via
   Elementor's `selectors`/`prefix_class` (zie class-container-shape.php). */
.cvc-shape-active-yes {
  position: relative;
}
/* div.cvc-shape-active-yes (i.p.v. .cvc-shape-active-yes) — hogere
   specificiteit dan Elementor's eigen `.e-con::before { content:
   var(--background-overlay); }`, die anders (bij gelijke specificiteit,
   later geladen) content:none afdwingt en de vorm onzichtbaar maakt. */
div.cvc-shape-active-yes::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  /* 2px breder dan de 35% bleed en overeenkomstig verschoven (zie
     .cvc-side-left/.cvc-side-right) — zodat het vormvlak een fractie
     overlapt met de eigen container i.p.v. 'm precies te raken. Exact
     raken laat op sommige schermen een dun naadje/lijntje zien
     (subpixel-afronding tussen twee losse kleurvlakken). */
  width: calc(35% + 2px);
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
div.cvc-shape-active-yes.cvc-side-left::before {
  left: -35%;
  right: auto;
}
div.cvc-shape-active-yes.cvc-side-right::before {
  right: -35%;
  left: auto;
}
.cvc-shape-active-yes > .e-con-inner,
.cvc-shape-active-yes > .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}
/* Op mobiel stapelen Elementor-containers onder elkaar, dus geen buur meer
   om de bleed op te laten landen — steekt anders voorbij de schermrand uit
   (horizontale scrollbar). Vormscheiding heeft daar geen functie, dus uit. */
@media (max-width: 767px) {
  div.cvc-shape-active-yes::before {
    content: none;
  }
}