/* MoveVolt — rijke secties + slider-mechaniek (Janus). Laadt NA theme/components/integration.
   De design-agent stylet de LOOK van vw-uspband/stats/reviews/split/steps/marquee; dit dekt
   de slider-MECHANIEK en de nieuwe elementen (pslider, payband, step-icoon/-nummer, iconen). */

/* inline-iconen op icoongrootte, kleuren mee via currentColor */
.vw-ico{ width:1.2em; height:1.2em; display:inline-block; vertical-align:middle; flex:none; }
.vw-ico--ph{ width:1.05em; height:1.05em; background:currentColor; opacity:.22; border-radius:4px; }

/* ---- carousel-mechaniek (product- + reviews-slider) ---- */
.vw-pslider,.vw-reviews{ position:relative; display:block; }
.vw-pslider__track,.vw-reviews__track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:6px 2px 12px; margin:0; scrollbar-width:none; list-style:none;
}
.vw-pslider__track::-webkit-scrollbar,.vw-reviews__track::-webkit-scrollbar{ display:none; }
.vw-pslider__track>*{ scroll-snap-align:start; flex:0 0 clamp(238px,26%,292px); }
.vw-reviews__track>*{ scroll-snap-align:start; flex:0 0 clamp(280px,32%,372px); }

.vw-slider__nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:8px; }
.vw-slider__btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none; transition:transform .15s,background .18s,box-shadow .18s; }
.vw-slider__btn:hover{ background:var(--volt); border-color:var(--volt); color:#06231d; box-shadow:var(--sh-cta); transform:translateY(-1px); }
.vw-slider__btn .vw-ico{ width:20px; height:20px; }
.vw-slider__dots{ display:flex; gap:8px; }
.vw-slider__dot{ width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:.2s; }
.vw-slider__dot.is-active{ background:var(--volt); transform:scale(1.35); }

/* reviews-score-badge naast de titel */
.vw-reviews__score{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-size:14px; margin-top:6px; }
.vw-reviews__score strong{ color:var(--ink); font-size:16px; }
.vw-reviews__score .vw-ico{ color:#f5a623; width:18px; height:18px; }
.vw-reviews__score em{ font-style:normal; opacity:.7; }

/* ---- "zo werkt het" stappen ---- */
.vw-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vw-step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 20px; }
.vw-step__ico{ width:48px; height:48px; border-radius:13px; background:var(--night); color:var(--volt-300); display:grid; place-items:center; margin-bottom:14px; }
.vw-step__ico .vw-ico{ width:24px; height:24px; }
.vw-step__n{ position:absolute; top:16px; right:20px; font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--line); line-height:1; }
.vw-step h3{ font-size:16px; margin:0 0 6px; }
.vw-step p{ font-size:14px; color:var(--ink-2); margin:0; line-height:1.5; }

/* ---- betaal-strip ---- */
.vw-payband{ padding-top:8px; padding-bottom:8px; }
.vw-payband__in{ display:flex; align-items:center; justify-content:center; gap:14px 26px; flex-wrap:wrap; }
.vw-payband__t{ font-weight:600; color:var(--ink-2); font-size:14px; }
.vw-pay{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.vw-pay__logo{ display:inline-flex; align-items:center; color:var(--ink-2); }
.vw-pay__logo svg{ height:26px; width:auto; max-width:54px; }

/* USP-icoon-vangnet (alleen als components.css geen achtergrond zet) */
.vw-usp__ico .vw-ico{ width:21px; height:21px; }

@media (max-width:900px){
  .vw-steps{ grid-template-columns:1fr 1fr; }
  .vw-reviews__track>*{ flex-basis:80%; }
  .vw-pslider__track>*{ flex-basis:62%; }
}
@media (max-width:560px){
  .vw-steps{ grid-template-columns:1fr; }
}