/* ============================================================================
   MoveVolt — HOME "VOL & COMMERCIEEL" laag (25 jun 2026). Laadt NA redesign.css.
   Operator: homepage voelde "erg kaal". Doel: grote-winkel-dichtheid (Coolblue/
   Decathlon) — categorie-tegels MET foto, deals-sectie, koopgidsen-blok, prominente
   merkenband, dicht verticaal ritme, opgebroken SEO-tekstlap. Gebruikt bestaande
   tokens (geen herdefinitie). Echte iconen, AA-contrast.
   ============================================================================ */

/* ---- 1. Dichter, voller verticaal ritme + sterke sectie-afwisseling ---------- */
.vw-section{ padding-block:clamp(26px,3.4vw,44px); }
/* afwisselende achtergrond = diepte, secties "plakken" i.p.v. zwevende witte lap */
.vw-catsec{ background:var(--surface); }
.vw-sectionhead{ margin-bottom:clamp(14px,1.8vw,22px); }
.vw-sectionhead h2{ font-size:clamp(1.4rem,2.4vw,1.85rem); }
.vw-center{ margin-top:clamp(16px,2vw,24px); }

/* ============================================================================
   2. CATEGORIE-TEGELS MET FOTO — was leeg icoon in lege doos
   ============================================================================ */
.vw-segrow--rich{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:1080px){ .vw-segrow--rich{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .vw-segrow--rich{ grid-template-columns:repeat(2,1fr); } }

.vw-segrow--rich .vw-segcard{
  display:flex; flex-direction:column; align-items:stretch; gap:0; text-align:left;
  padding:0; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 2px 10px rgba(16,24,40,.07);
  transition:transform .16s var(--ease-out), box-shadow .16s, border-color .16s;
}
.vw-segrow--rich .vw-segcard:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(16,24,40,.14); border-color:rgba(0,181,143,.45); }

.vw-segcard__media{
  position:relative; display:block; aspect-ratio:4/3; background:var(--surface-alt);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.vw-segcard__media img{ width:100%; height:100%; object-fit:contain; padding:14px 14px 18px; transition:transform .35s var(--ease-out); }
.vw-segrow--rich .vw-segcard:hover .vw-segcard__media img{ transform:scale(1.05); }
/* gekleurd icoon-chip linksboven op de foto */
.vw-segcard__media .vw-segcard__ico{
  position:absolute; top:10px; left:10px; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; background:#fff; box-shadow:0 2px 8px rgba(16,24,40,.16);
}
.vw-segcard__media .vw-segcard__ico .vw-ico{ width:20px; height:20px; color:var(--volt-600); }
/* aantal-badge rechtsboven */
.vw-segcard__count{
  position:absolute; top:10px; right:10px; background:rgba(16,24,40,.82); color:#fff;
  font-size:.66rem; font-weight:700; padding:4px 8px; border-radius:20px; letter-spacing:.01em;
}
.vw-segcard__body{ display:flex; flex-direction:column; gap:3px; padding:11px 13px 13px; }
.vw-segrow--rich .vw-segcard__name{ font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--ink); }
.vw-segcard__tag{ font-size:.78rem; color:var(--ink-2); line-height:1.3; min-height:2.1em; }
.vw-segcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; padding-top:9px; border-top:1px solid var(--line); }
.vw-segcard__from{ font-size:.74rem; color:var(--ink-2); }
.vw-segcard__from strong{ font-family:var(--font-display); font-size:1.02rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.vw-segcard__cta{ display:inline-flex; align-items:center; gap:.3rem; color:var(--volt-600); font-weight:700; font-size:.8rem; white-space:nowrap; }
.vw-segcard__cta .vw-ico--arr{ width:15px; height:15px; transition:transform .2s var(--ease-out); }
.vw-segrow--rich .vw-segcard:hover .vw-segcard__cta .vw-ico--arr{ transform:translateX(3px); }
/* nth-child kleurkaders voor het icoon-chip (functioneel kleursysteem) */
.vw-segcard[data-seg="stad"] .vw-segcard__ico .vw-ico{ color:var(--c-new); }
.vw-segcard[data-seg="krachtig"] .vw-segcard__ico .vw-ico{ color:var(--c-sale); }
.vw-segcard[data-seg="budget"] .vw-segcard__ico .vw-ico{ color:var(--c-stock); }
.vw-segcard[data-seg="kind"] .vw-segcard__ico .vw-ico{ color:var(--c-hot); }
.vw-segcard[data-seg="hoverboard"] .vw-segcard__ico .vw-ico{ color:var(--volt-600); }

/* ============================================================================
   3. DEALS-sectie — scherp geprijsde legale toppers (warme accent, geen nep-korting)
   ============================================================================ */
.vw-deals{ background:linear-gradient(180deg, #FFF7F2 0%, var(--surface) 100%); border-top:1px solid var(--line); }
.vw-deals .vw-kicker{ color:var(--c-sale); }
.vw-deals .vw-kicker::before{ background:var(--c-sale); }
.vw-deals .vw-sectionhead{ align-items:center; }
/* kleine "voordeel"-vlag voor de titel-rij geeft commerciële spanning */
.vw-deals .vw-sectionhead h2::after{
  content:""; display:inline-block; vertical-align:middle;
}

/* ============================================================================
   4. STAPPEN — iconen ZICHTBAAR in gekleurde cirkels (was: lege groene blokjes)
   ============================================================================ */
.vw-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:860px){ .vw-steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .vw-steps{ grid-template-columns:1fr; } }
.vw-step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 18px 18px; box-shadow:0 2px 8px rgba(16,24,40,.06);
}
.vw-step__ico{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,181,143,.12); margin-bottom:12px;
}
.vw-step__ico .vw-ico{ width:25px; height:25px; color:var(--volt-600); }
.vw-step__n{
  position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:#fff !important;
  font-family:var(--font-display); font-weight:800; font-size:.82rem; opacity:1;
}
.vw-step h3{ font-size:1rem; font-weight:700; color:var(--ink); margin:0 0 4px; }
.vw-step p{ font-size:.84rem; color:var(--ink-2); line-height:1.45; margin:0; }
/* per-stap icoon-kleur (energie) */
.vw-step:nth-child(1) .vw-step__ico{ background:rgba(37,99,235,.12); } .vw-step:nth-child(1) .vw-step__ico .vw-ico{ color:var(--c-new); }
.vw-step:nth-child(2) .vw-step__ico{ background:rgba(30,158,85,.14); } .vw-step:nth-child(2) .vw-step__ico .vw-ico{ color:var(--c-stock); }
.vw-step:nth-child(3) .vw-step__ico{ background:rgba(245,158,11,.16); } .vw-step:nth-child(3) .vw-step__ico .vw-ico{ color:var(--c-hot); }
.vw-step:nth-child(4) .vw-step__ico{ background:rgba(0,181,143,.12); } .vw-step:nth-child(4) .vw-step__ico .vw-ico{ color:var(--volt-600); }

/* ============================================================================
   5. KOOPGIDSEN-blok — kennisbank-kaarten op de home
   ============================================================================ */
.vw-guides{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:820px){ .vw-guides{ grid-template-columns:1fr; } }
.vw-guidecard{
  display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:18px; box-shadow:0 2px 8px rgba(16,24,40,.06);
  transition:transform .16s var(--ease-out), box-shadow .16s, border-color .16s;
}
.vw-guidecard:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(16,24,40,.12); border-color:rgba(0,181,143,.4); }
.vw-guidecard__ico{
  flex:0 0 auto; width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:rgba(0,181,143,.12);
}
.vw-guidecard__ico .vw-ico{ width:24px; height:24px; color:var(--volt-600); }
.vw-guidecard__body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.vw-guidecard h3{ font-size:1rem; font-weight:700; color:var(--ink); margin:0; line-height:1.25; }
.vw-guidecard p{ font-size:.84rem; color:var(--ink-2); line-height:1.45; margin:0; }
.vw-guidecard .vw-textlink{ margin-top:2px; font-size:.82rem; }

/* ============================================================================
   6. MERKENBAND met kop — prominenter dan een kale marquee
   ============================================================================ */
.vw-merkband{ padding-block:clamp(22px,3vw,40px); }
.vw-merkband__head{ margin-bottom:clamp(14px,1.8vw,22px); }
.vw-merkband .vw-marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.vw-merkband .vw-marquee__item{
  display:inline-grid; place-items:center; min-width:128px; height:58px; padding:0 20px;
  margin:0 6px; background:#fff; border:1px solid var(--line); border-radius:12px;
}
.vw-brandlogo{ max-height:30px; width:auto; opacity:.92; }
.vw-brandlogo--txt{ color:var(--ink-2); font-weight:700; font-size:.92rem; white-space:nowrap; }

/* ============================================================================
   7. LEGAAL-CTA — was groot+leeg met zwevend schild → compact gekleurd paneel
   ============================================================================ */
.vw-legalcta{ padding-block:clamp(20px,2.6vw,34px); }
.vw-legalcta__inner{
  position:relative; overflow:hidden; background:linear-gradient(110deg, #06231D 0%, #0B3A30 60%, #0E4A3C 100%);
  border-radius:18px; padding:clamp(22px,3vw,38px) clamp(22px,3.4vw,46px);
}
.vw-legalcta__inner>div{ position:relative; z-index:1; max-width:640px; }
.vw-legalcta .vw-kicker{ color:var(--volt-300); }
.vw-legalcta .vw-kicker::before{ background:var(--volt-300); }
.vw-legalcta h2{ color:#fff; margin:.3rem 0 .5rem; }
.vw-legalcta p{ color:rgba(255,255,255,.82); margin:0 0 1.1rem; max-width:60ch; }
.vw-legalcta .vw-btn--cta{ background:var(--volt); color:#06231D; }
.vw-legalcta .vw-btn--cta:hover{ background:#fff; color:#06231D; }
/* groot doorzichtig schild-accent rechts (decoratief, vult de leegte) */
.vw-legalcta__inner::after{
  content:""; position:absolute; top:50%; right:-40px; transform:translateY(-50%);
  width:280px; height:280px; opacity:.10; z-index:0; background:var(--volt-300);
  -webkit-mask:url(/assets/icons/shield-check.svg) center/contain no-repeat;
  mask:url(/assets/icons/shield-check.svg) center/contain no-repeat;
}
@media(max-width:560px){ .vw-legalcta__inner::after{ display:none; } }

/* ============================================================================
   8. SEO-TEKSTLAP — muur tekst → dichte 2-koloms "magazine" + afgebakend paneel
   ============================================================================ */
.vw-seoblock{ background:var(--surface-alt); border-top:1px solid var(--line); }
.vw-seoblock .vw-prose{ max-width:1180px; }
.vw-seoblock .vw-prose>.vw-lead{ font-size:1.02rem; color:var(--ink); max-width:75ch; margin-bottom:1.4rem; }
.vw-seoblock .vw-prose{ column-count:2; column-gap:46px; }
.vw-seoblock .vw-prose>h2{ column-span:all; font-size:1.18rem; margin:1.4rem 0 .5rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.vw-seoblock .vw-prose>h2:first-of-type{ margin-top:.4rem; }
.vw-seoblock .vw-prose>.vw-lead,
.vw-seoblock .vw-prose .vw-faq,
.vw-seoblock .vw-prose details{ column-span:all; }
.vw-seoblock .vw-prose p,
.vw-seoblock .vw-prose ul{ break-inside:avoid; }
.vw-seoblock .vw-prose p{ font-size:.92rem; }
@media(max-width:760px){ .vw-seoblock .vw-prose{ column-count:1; } }

/* ============================================================================
   9. STATS-band — iets compacter tegen de buren (minder geïsoleerd)
   ============================================================================ */
.vw-stats-sec{ padding-block:clamp(18px,2.4vw,30px); background:var(--surface); }
.vw-stats-sec + .vw-section{ padding-top:clamp(20px,2.6vw,34px); }

/* ---- 10. mobiel: tegel-footer netjes stapelen bij weinig ruimte ---- */
@media(max-width:380px){
  .vw-segcard__foot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ============================================================================
   11. FIXES — mobiele header-overflow + AA-lift op functionele micro-labels
   ============================================================================ */
/* header-acties pasten net niet op smal scherm → taalwissel verhuist naar het mobiele
   menu (blijft bereikbaar), header-knoppen compacter */
@media(max-width:440px){
  .vw-header__inner{ gap:8px; }
  .vw-header__actions{ gap:1px; }
  .vw-header__actions .vw-langswitch{ display:none; }
  .vw-iconbtn{ padding:5px; }
  .vw-iconbtn .vw-ico{ width:20px; height:20px; }
}
.vw-mobilemenu__lang{ display:flex; gap:8px; margin-top:6px; padding-top:12px; border-top:1px solid var(--line); }
.vw-mobilemenu__lang .vw-lang{ padding:6px 12px; border:1px solid var(--line); border-radius:8px; font-weight:700; color:var(--ink-2); }
.vw-mobilemenu__lang .vw-lang.is-active{ background:var(--volt-600); color:#fff; border-color:transparent; }
/* functioneel kleursysteem leesbaar tot ~AA (was: legaal-chip 2.84 / voorraad 3.46) */
.vw-card__stock{ color:#0C7A3A; }
.vw-chip--is-legal,.vw-chip.is-legal{ color:#074535; background:rgba(0,181,143,.09); border-color:rgba(0,181,143,.42); }
.vw-chip--is-private{ color:#5E3900; background:rgba(255,160,40,.14); border-color:rgba(255,160,40,.5); }