/* ============================================
   BUILDER — configurator UI
   ============================================ */

.builder {
  position: relative;
  padding-top: var(--s-7);
  padding-bottom: var(--s-9);
  min-height: 100vh;
}

/* ============================================
   PHOTO UPLOAD SLOTS (stap 5 — optioneel)
   ============================================ */
.photo-slot {
  position: relative;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.photo-slot:hover { border-color: var(--c-red); background: rgba(255, 0, 0,.05); }
.photo-slot.has-file { border-style: solid; border-color: var(--c-red); }
.photo-slot__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  cursor: pointer;
  padding: 8px 0;
}
.photo-slot__preview {
  display: none;
  margin-top: 8px;
  position: relative;
}
.photo-slot__preview img {
  max-width: 100%;
  max-height: 140px;
  border-radius: var(--r-sm);
  object-fit: cover;
}
.photo-slot.has-file .photo-slot__preview { display: block; }
.photo-slot__remove {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.photo-slot__msg {
  font-size: 11px;
  margin-top: 6px;
  min-height: 14px;
}
.photo-slot__msg.is-err { color: #ff8a8a; }
.photo-slot__msg.is-ok  { color: var(--apex-green); }

/* ============================================
   STEP-ERROR - inline foutmelding boven nav-knoppen
   ============================================ */
.builder__step-error {
  margin-top: var(--s-4);
  padding: 10px 14px;
  background: rgba(239, 68, 68, .10);
  border: 1px solid rgba(239, 68, 68, .35);
  border-left: 3px solid var(--c-error);
  border-radius: var(--r-sm);
  color: #ffd0d0;
  font-size: 13.5px;
  line-height: 1.45;
  animation: stepErrorIn .18s var(--ease-out);
}

/* Onderling uitsluitende opties (fase 2, deel A).
   De botsende optie wordt wazig en onselecteerbaar, met een scherpe note
   "Niet te combineren met X". Geen banner bovenaan → geen layout-sprong. */
.option--blocked { cursor: not-allowed; }
.option--blocked .option__thumb,
.option--blocked .option__box,
.option--blocked .option__title,
.option--blocked .option__desc,
.option--blocked .option__price,
.option--blocked .opt-stock {
  opacity: .42;
  filter: grayscale(.7);
  transition: opacity var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out);
}
/* De uitleg blijft juist scherp en leesbaar
   ("Niet op voorraad" of "Niet te combineren met X"). */
.option__block-note {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--c-red-bright, #ff3333);
}
.option--blocked:hover {
  transform: none;
  border-color: var(--c-border);
}
@media (prefers-reduced-motion: reduce) {
  .option--blocked .option__thumb,
  .option--blocked .option__box,
  .option--blocked .option__title,
  .option--blocked .option__desc,
  .option--blocked .option__price,
  .option--blocked .opt-stock { transition: none; }
}

/* Uitgeschakelde knoppen in de stapnavigatie.
   Dit gold eerst alleen voor [data-submit] ("Ga naar kassa"). De knop
   "Volgende" in stap 1 viel erbuiten en was daardoor visueel NIET van een
   werkende knop te onderscheiden: gemeten op 06-08-2026 had hij in beide
   toestanden background rgb(204,0,0), color #fff, opacity 1 én cursor
   pointer. Wie klikte zonder controller te kiezen, kreeg geen beweging en
   geen melding. De selector pakt nu elke uitgeschakelde knop in de nav. */
.builder__nav button:disabled,
.builder__nav button.is-disabled,
.builder__nav [data-submit]:disabled,
.builder__nav [data-submit].is-disabled {
  opacity: .45;
  filter: grayscale(.85);
  cursor: not-allowed;
  pointer-events: none;
}

/* Toelichting náást de uitgeschakelde knop, zodat de bezoeker weet wát er nog
   moet gebeuren in plaats van te moeten raden. builder.js vult de tekst. */
.builder__nav-hint {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  align-self: center;
  margin-right: auto;
  max-width: 34ch;
  line-height: 1.4;
}
.builder__nav-hint[hidden] { display: none !important; }

/* Toetsenbordbediening. De keuzevakjes staan op opacity:0 en er bestond
   nergens een focusregel voor .option — vóór en ná het focussen was de opmaak
   van het label identiek (outline none, box-shadow none, zelfde randkleur).
   Wie met Tab door de builder liep, zag dus helemaal niets. */
.option:has(input:focus-visible) {
  outline: 2px solid var(--c-silver);
  outline-offset: 2px;
  border-color: var(--c-border-strong);
}
/* Terugval voor browsers zonder :has() — dan tenminste een omlijning op het
   vakje zelf, in plaats van helemaal geen aanwijzing. */
@supports not selector(:has(*)) {
  .option input:focus-visible {
    opacity: 1;
    outline: 2px solid var(--c-silver);
  }
}
@keyframes stepErrorIn {
  0% { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ============================================
   OFFERTE-MELDING — 'op aanvraag'-product in de build
   Toont dat er niet direct betaald wordt maar een prijs wordt aangevraagd.
   ============================================ */
.summary__quote-note {
  margin-top: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(245, 158, 11, .10);
  border: 1px solid rgba(245, 158, 11, .35);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-dim);
}
.summary__quote-note[hidden] { display: none; }
.summary__quote-note strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-warning);
  margin-bottom: 3px;
}

/* ============================================
   MOBIELE ACTIEBALK — vaste onderbalk (alleen mobiel)
   Toont totaal + hoofdknop, altijd in beeld. Wordt via JS geïnjecteerd en
   spiegelt de nav-knoppen. Op desktop volledig verborgen.
   ============================================ */
.builder-mobilebar { display: none; }

/* ============================================
   TABLET (max 960) - builder compact-medium
   ============================================ */
@media (max-width: 960px) {
  .builder__layout { gap: var(--s-5); }
  .summary {
    position: static;
    margin-top: var(--s-5);
  }
  .ctrl-preview {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   MOBIEL (max 640) - builder full-rebuild voor touch
   ============================================ */
@media (max-width: 640px) {
  .builder {
    padding-top: var(--s-4);
    padding-bottom: var(--s-5);
  }
  .builder-banner { height: clamp(120px, 32vw, 200px); margin-top: var(--nav-h, 64px); }
  .container { padding-left: 14px; padding-right: 14px; }

  .builder__layout { grid-template-columns: 1fr; gap: var(--s-4); }

  .builder__steps-nav {
    gap: 4px;
    overflow: hidden;
    margin-bottom: var(--s-4);
  }
  .builder__steps-nav::-webkit-scrollbar { display: none; }
  .step-pill {
    flex: 0 0 auto;
    padding: 7px 11px !important;
    font-size: 10.5px;
    min-width: max-content;
  }
  .step-pill__copy > span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .step-pill__status { display: none; }
  .step-connector { flex-basis: 20px; min-width: 10px; }
  .step-pill__num { width: 20px !important; height: 20px !important; font-size: 10px; }

  .builder__panel { padding: var(--s-4) !important; border-radius: var(--r-md); }
  .builder__panel-head h2 { font-size: 1.25rem !important; line-height: 1.15; }
  .builder__panel-head p  { font-size: 0.85rem; }

  .options-grid { grid-template-columns: 1fr; gap: 10px; }
  .option { padding: 12px !important; gap: 10px; min-height: 56px; }
  .option__title { font-size: 14px; }
  .option__desc  { font-size: 12.5px; line-height: 1.4; }
  .option__price { font-size: 14px; white-space: nowrap; }

  /* De inline nav-knoppen worden op mobiel vervangen door de vaste
     actiebalk (.builder-mobilebar). Verbergen voorkomt twee sets knoppen. */
  .builder__nav { display: none !important; }

  .summary {
    position: static;
    margin-top: var(--s-5);
    padding: var(--s-4);
  }
  .summary__total { gap: 6px; }
  .summary__total-amount { font-size: 1.3rem !important; }
  .ctrl-preview { max-width: 100%; margin: 0 0 var(--s-4); }

  .photo-upload-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  .vcheck-modal__panel,
  .welcome-modal__panel { width: calc(100vw - 24px); max-height: 92vh; }

  .builder__step-error { font-size: 12.5px; padding: 9px 12px; }

  /* ---- Vaste mobiele actiebalk ---- */
  :root { --mobilebar-h: 66px; }

  .builder-mobilebar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 8, 10, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
  }
  .builder-mobilebar__back {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text);
    cursor: pointer;
  }
  .builder-mobilebar__back svg { width: 22px; height: 22px; }
  .builder-mobilebar__total {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    line-height: 1.1; min-width: 0;
  }
  .builder-mobilebar__total-label {
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--c-text-muted);
  }
  .builder-mobilebar__total-amount {
    font-family: var(--font-mono);
    font-size: 1.15rem; font-weight: var(--fw-bold);
    color: var(--c-text); white-space: nowrap;
  }
  .builder-mobilebar__cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 18px;
    border: none; border-radius: var(--r-sm);
    background: var(--c-red); color: #fff;
    font-weight: var(--fw-bold); font-size: 14px; letter-spacing: .02em;
    cursor: pointer;
    transition: opacity var(--t-base), transform var(--t-fast);
  }
  .builder-mobilebar__cta svg { width: 18px; height: 18px; }
  .builder-mobilebar__cta:active { transform: scale(.97); }
  .builder-mobilebar__cta.is-disabled,
  .builder-mobilebar__cta:disabled {
    opacity: .45; cursor: not-allowed; pointer-events: none;
  }

  /* Ruimte onder de pagina zodat de vaste balk de footer nooit afdekt. */
  body.page-builder {
    padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px) + 10px);
  }
  /* WhatsApp-bubble boven de actiebalk tillen. */
  body.page-builder .fab-stack {
    bottom: calc(var(--mobilebar-h) + 16px) !important;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .builder-mobilebar__cta { transition: none; }
}

/* Extra-smal (max 380px, oude iPhone SE) */
@media (max-width: 380px) {
  .step-pill__copy > span { max-width: 60px; }
  .builder__panel-head h2 { font-size: 1.15rem !important; }
  .summary__total-amount { font-size: 1.2rem !important; }
}

/* ============================================
   MOTION — subtiele feedback (week 3 premium-pass)
   Alleen transform/opacity, geen layout-props. Reduced-motion safe.
   ============================================ */

/* 1. Selectie-glow: 1x korte pulse op de gekozen optie-kaart.
   :has(:checked) triggert de animatie opnieuw bij elke selectie. */
@keyframes optSelectPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, .45); }
  100% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
}
.option:has(input:checked) {
  animation: optSelectPulse .5s var(--ease-out) 1;
}

/* 2. Stap-overgang: nieuw paneel glijdt subtiel in. */
@keyframes stepPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.step-panel.is-active {
  animation: stepPanelIn .28s var(--ease-out) 1;
}

/* 3. Prijs-tick: totaal knippert kort bij wijziging (class via JS). */
@keyframes totalTick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.summary__total-amount.is-ticking {
  animation: totalTick .3s var(--ease-out) 1;
}

@media (prefers-reduced-motion: reduce) {
  .option:has(input:checked),
  .step-panel.is-active,
  .summary__total-amount.is-ticking { animation: none; }
}

.builder__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 1100px) {
  .builder__layout { grid-template-columns: 1fr; }
}

.builder__steps-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--s-6);
  background: rgba(14, 14, 17, .88);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 4px;
  min-width: 0;
  overflow: hidden;
}
.step-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: transparent;
  transition: background var(--t-base), color var(--t-base);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
}
.step-pill__num {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-surface-3);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-text-dim);
}
.step-pill__num svg {
  display: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}
.step-pill__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.step-pill__status {
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--fw-med);
  letter-spacing: .03em;
  line-height: 1;
  text-transform: none;
}
.step-connector {
  position: relative;
  flex: 0 1 34px;
  min-width: 14px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
}
.step-connector i {
  position: absolute;
  inset: 0;
  background: #5f8b75;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease-out);
}
.step-connector.is-filled i { transform: scaleX(1); }
.step-pill.is-active {
  background: var(--c-red-soft);
  color: var(--c-red);
}
.step-pill.is-active .step-pill__num {
  background: var(--c-red);
  color: #fff;
}
.step-pill.is-done .step-pill__num {
  background: #4f7864;
  color: #fff;
}
.step-pill.is-done .step-pill__number { display: none; }
.step-pill.is-done .step-pill__num svg { display: block; }
.step-pill.is-done .step-pill__status { color: #7da48f; }

/* Houd de voortgang als één compacte balk in beeld, zonder geneste scroll. */
@media (max-width: 860px) {
  .builder__steps-nav {
    gap: 0;
    padding: 5px 6px;
  }
  .step-pill {
    flex: 0 1 auto;
    padding: 7px 6px !important;
    gap: 6px;
  }
  .step-pill__status { display: none; }
  .step-connector {
    flex: 1 1 24px;
    min-width: 6px;
    margin-inline: 2px;
  }
}

@media (max-width: 640px) {
  .step-pill {
    flex: 0 0 28px;
    justify-content: center;
    padding: 4px 3px !important;
  }
  .step-pill__copy { display: none; }
  .step-pill__num {
    flex-basis: 22px;
    width: 22px !important;
    height: 22px !important;
  }
  .step-connector {
    flex: 1 1 auto;
    min-width: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-connector i { transition: none; }
}

.builder__panel {
  background: var(--grad-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.builder__panel-head {
  margin-bottom: var(--s-5);
}
.builder__panel-head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: var(--s-2);
}
.builder__panel-head p {
  color: var(--c-text-dim);
  margin-top: var(--s-2);
  max-width: 60ch;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.options-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .options-grid { grid-template-columns: 1fr; }
}

/* Compacte premium kaarten voor Mods en Reparaties. Productgegevens en
   prijzen blijven uit STORE/CMS komen; alleen de presentatie verandert. */
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option {
  min-height: 150px;
  height: 100%;
  padding: 14px 100px 14px 14px;
  gap: 12px;
  background: linear-gradient(145deg, rgba(23, 23, 27, .94), rgba(10, 10, 12, .97));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__thumb {
  width: 70px;
  height: 70px;
  align-self: flex-start;
}
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__body {
  min-width: 0;
  gap: 5px;
}
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__title {
  padding-right: 4px;
  font-size: 1rem;
  line-height: 1.05;
}
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__desc {
  font-size: 12.5px;
  line-height: 1.45;
}
:is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__price {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--c-text);
  font-size: 14px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.option__price small {
  color: var(--c-text-muted);
  font-size: 8px;
  font-weight: var(--fw-med);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.option__compat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 2px;
  color: #8fae9c;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .03em;
  line-height: 1.35;
}
.option__compat > span { color: #668d78; }
.option__details {
  margin-top: 3px;
  color: var(--c-text-dim);
  font-size: 11px;
}
.option__details summary {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.option__details summary:focus-visible { outline: 2px solid var(--c-silver); outline-offset: 2px; }
.option__details p { margin: 5px 0 0; line-height: 1.45; }
.option.option--conflict {
  border-color: rgba(214, 92, 92, .72);
  box-shadow: 0 0 0 1px rgba(214, 92, 92, .18);
}

@media (max-width: 640px) {
  :is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option {
    display: grid;
    grid-template-columns: 22px 52px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 12px !important;
  }
  :is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__thumb { width: 52px; height: 52px; }
  :is(.options-grid[data-options="repairs"], .options-grid[data-options="mods"]) .option__price {
    position: static;
    grid-column: 3;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-self: start;
    gap: 7px;
    margin-top: 2px;
  }
}

/* Stap 1: eerst een duidelijk controllermodel kiezen, daarna pas de revisie. */
.controller-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.controller-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  color: var(--c-text);
  background: linear-gradient(155deg, rgba(25, 25, 29, .96), rgba(7, 7, 9, .98));
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  isolation: isolate;
  transition: opacity var(--t-base), filter var(--t-base), border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.controller-card:hover {
  border-color: var(--c-border-red);
  transform: translateY(-2px);
}
.controller-card input,
.controller-revision__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.controller-card__visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #050505;
  border-bottom: 1px solid var(--c-border);
}
.controller-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(4, 4, 6, .7));
  pointer-events: none;
}
.controller-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s var(--ease-out), filter var(--t-base);
}
.controller-card:hover .controller-card__visual img { transform: scale(1.025); }
.controller-card__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-4);
}
.controller-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.controller-card__desc {
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.controller-card__status {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(139, 0, 0, .94);
  border: 1px solid rgba(255, 70, 70, .42);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.controller-card__status svg { width: 14px; height: 14px; }
.controller-card.is-selected {
  border-color: var(--c-red);
  box-shadow: 0 0 0 1px rgba(255, 0, 0, .22), 0 18px 42px rgba(96, 0, 0, .2);
}
.controller-card.is-selected .controller-card__status {
  opacity: 1;
  transform: none;
}
.controller-options.has-selection .controller-card.is-dimmed {
  opacity: .34;
  filter: saturate(.22) brightness(.62);
}
.controller-options.has-selection .controller-card.is-dimmed:hover {
  opacity: .72;
  filter: saturate(.6) brightness(.82);
}
.controller-card:has(input:focus-visible),
.controller-revision__option:has(input:focus-visible) {
  outline: 2px solid var(--c-silver);
  outline-offset: 3px;
}

.controller-revision {
  min-width: 0;
  margin: var(--s-5) 0 0;
  padding: var(--s-5);
  background: linear-gradient(145deg, rgba(139, 0, 0, .1), rgba(8, 8, 10, .92) 56%);
  border: 1px solid var(--c-border-red);
  border-radius: var(--r-md);
}
.controller-revision[hidden] { display: none; }
.controller-revision legend {
  width: auto;
  max-width: 100%;
  padding: 0 var(--s-2);
  color: var(--c-text);
}
.controller-revision legend span,
.controller-revision legend strong { display: block; }
.controller-revision legend strong {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.controller-revision > p {
  max-width: 70ch;
  margin: 0 0 var(--s-4);
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.controller-revision__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.controller-revision__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 13px 14px;
  color: var(--c-text);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.controller-revision__option:hover {
  border-color: var(--c-border-red);
  transform: translateY(-1px);
}
.controller-revision__option.is-selected {
  background: var(--c-red-soft);
  border-color: var(--c-red);
}
.controller-revision__check {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
}
.controller-revision__check::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--t-base) var(--ease-spring);
}
.controller-revision__option.is-selected .controller-revision__check {
  background: var(--c-red);
  border-color: var(--c-red);
}
.controller-revision__option.is-selected .controller-revision__check::after { transform: scale(1); }
.controller-revision__option strong,
.controller-revision__option small { display: block; }
.controller-revision__option strong {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1;
  text-transform: uppercase;
}
.controller-revision__option small {
  margin-top: 5px;
  color: var(--c-text-dim);
  font-size: 11px;
}
.controller-revision__help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.controller-revision__help .btn { flex-shrink: 0; min-height: 44px; }

@media (max-width: 900px) {
  .controller-options { grid-template-columns: 1fr; }
  .controller-card { display: grid; grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); }
  .controller-card__visual { aspect-ratio: 4 / 3; border-right: 1px solid var(--c-border); border-bottom: 0; }
  .controller-revision__grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .controller-card { grid-template-columns: 118px minmax(0, 1fr); }
  .controller-card__visual { min-height: 132px; aspect-ratio: auto; }
  .controller-card__body { justify-content: center; padding: 14px; }
  .controller-card__desc { font-size: 12px; }
  .controller-card__status { top: 8px; right: 8px; padding: 5px 7px; }
  .controller-revision { padding: var(--s-4); }
  .controller-revision__help { align-items: stretch; flex-direction: column; }
  .controller-revision__help .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .controller-card,
  .controller-card__visual img,
  .controller-card__status,
  .controller-revision__option { transition: none; }
}

.page-builder .vcheck-modal__panel { max-width: 640px; }
.page-builder .vcheck-scan { padding: clamp(20px, 5vw, 36px); }
.page-builder .vcheck-scan__cta .btn { min-height: 48px; }
.page-builder .vcheck-scan__result { min-height: 154px; }
.page-builder .vcheck-scan__card { margin-top: var(--s-4); }
.page-builder .vcheck-scan__card .btn { align-self: flex-start; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .page-builder .vcheck-modal__backdrop,
  .page-builder .vcheck-modal__panel { animation: none; }
}

.builder__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}

/* Skip option ("Geen [reparaties/mods] nodig") */
.skip-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  background: linear-gradient(135deg, rgba(40, 40, 45, 0.55), rgba(14, 14, 16, 0.85));
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--c-text);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.skip-option:hover {
  border-color: var(--c-red);
  border-style: solid;
  background: linear-gradient(135deg, rgba(60, 60, 65, 0.6), rgba(20, 20, 22, 0.9));
  transform: translateX(2px);
}
.skip-option__body { display: flex; flex-direction: column; gap: 2px; }
.skip-option__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  line-height: 1;
}
.skip-option__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.skip-option__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-red);
  flex-shrink: 0;
}
.skip-option__arrow svg { width: 16px; height: 16px; }

/* Step transitions */
.step-panel {
  display: none;
  animation: fadeIn 0.4s var(--ease-out);
}
.step-panel.is-active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Summary sidebar ---- */
.summary {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-4));
  background: var(--grad-surface);
  border: 1px solid var(--c-border-red);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: var(--shadow-lg);
}
.summary__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.summary__title svg { width: 18px; height: 18px; color: var(--c-red); }

.summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 50px;
}
.summary__empty {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-5) 0;
}
.summary__conflict {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  color: var(--c-text-dim);
  background: rgba(139, 0, 0, .12);
  border: 1px solid rgba(201, 78, 78, .38);
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.4;
}
.summary__conflict strong {
  color: #efb3b3;
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
}
.summary__conflict button {
  min-height: 38px;
  padding: 7px 10px;
  color: var(--c-text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}
.summary__conflict button:hover,
.summary__conflict button:focus-visible { border-color: var(--c-red); outline: none; }
/* Build-overzicht rij: grid (label | bedrag | verwijderknop)
   met fixed amount-kolom + tabular-nums voor strakke uitlijning. */
.summary__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 22px;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--c-border);
  animation: fadeIn 0.3s var(--ease-out);
}
.summary__item-name { color: var(--c-text); min-width: 0; word-break: break-word; }
.summary__item-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.summary__item-price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: #ffffff;                              /* builder-summary bedragen wit */
  font-weight: var(--fw-med);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.summary__gift {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--apex-green-soft);
  color: var(--apex-green);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.summary__item--gift .summary__item-name { color: var(--c-text-dim); }
.summary__item--shipping { border-bottom: 1px dashed var(--c-border); }

/* Drempel-tip onder de cart */
.summary__threshold-tip {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: rgba(255, 255, 255, .03);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  line-height: 1.5;
}
.summary__threshold-tip strong { color: var(--apex-green); }
.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  gap: 8px;
}
.summary__total-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
/* Totaalbedrag - subtiel maar zichtbaar.
   Was --fs-2xl (36px) en oogde te overheersend.
   In builder-summary (checkout-context) tonen we het bedrag wit,
   niet rood — komt rustiger over op het kassa-overzicht. */
.summary__total-amount {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: #ffffff;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.summary__total-amount small {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  font-weight: var(--fw-med);
}
.summary__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--c-text-muted);
  letter-spacing: var(--ls-wide);
  line-height: 1.5;
}

/* Submission state */
.builder__success {
  text-align: center;
  padding: var(--s-9) var(--s-5);
}
.builder__success-icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--c-red-soft);
  color: var(--c-red);
  display: grid; place-items: center;
  margin: 0 auto var(--s-5);
  border: 1px solid var(--c-border-red);
  animation: pop .34s var(--ease-out);
}
.builder__success-icon svg { width: 44px; height: 44px; }
/* Kort en afremmend, niet stuiterend: het icoon komt aan in plaats van
   uit het niets te springen. */
@keyframes pop {
  0%   { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .builder__success-icon { animation: none; }
}
.builder__success h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.builder__success p {
  color: var(--c-text-dim);
  max-width: 50ch;
  margin: 0 auto var(--s-5);
}

/* Mobile sticky summary */
@media (max-width: 1100px) {
  .summary { position: static; }
}

/* ===== Builder banner (boven configurator) ===== */
.builder-banner {
  position: relative;
  width: 100%;
  margin-top: var(--nav-h, 72px);
  overflow: hidden;
  height: clamp(180px, 32vw, 360px);
  background: #050505;
}
.builder-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.72) saturate(1.05);
}
.builder-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.15) 0%, rgba(5,5,5,0.55) 70%, rgba(5,5,5,0.95) 100%),
    radial-gradient(ellipse at center top, rgba(255, 0, 0,0.18), transparent 60%);
  pointer-events: none;
}


/* Toegankelijke statusmelding (combo toegepast, overgeslagen build-onderdeel,
   voorraadmelding). Wordt voorgelezen via role="status" + aria-live. */
.builder__live { display: none; }
.builder__live.is-visible {
  display: block;
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  z-index: 5;
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text);
  background: rgba(20, 20, 24, .96);
  /* Alleen opacity/transform animeren — geen hoogte, dus geen layout-thrash. */
  animation: builder-live-in var(--t-base) var(--ease-out) both;
}
.builder__live.is-warn {
  border-color: var(--c-border-red);
  background: rgba(40, 12, 14, .96);
}
@keyframes builder-live-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .builder__live.is-visible { animation: none; }
}

/* ===== Controller-preview in summary sidebar ===== */
.ctrl-preview {
  position: relative;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  background: transparent;
  border: none;
  overflow: visible;
}
.ctrl-preview__legend {
  text-align: center;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted, rgba(255,255,255,.45));
}
/* Foto-wrapper houdt aspect ratio + serveert als anker voor hotspots */
.ctrl-image-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 16 / 11;
}
.ctrl-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* Glow overlays — pre-designed PNG's met juiste plek erin gebakken.
   Liggen exact over de controller-foto en faden in/uit op .is-active. */
.ctrl-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.16,1,.3,1);
  /* Lighten: alleen pixels die LICHTER zijn dan de onderliggende laag tellen mee.
     Donkere controller-silhouetten uit de glow-webp's vallen weg → alleen de
     lichte glow-delen komen door, ook bij meerdere geselecteerde mods. */
  mix-blend-mode: lighten;
}
.ctrl-glow.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ===== Summary cart: remove + clear buttons =====
   Belangrijk: .summary__item is nu een GRID (zie boven), de
   verwijderknop is de 3e kolom — niet meer position: absolute.
   De oude absolute regel veroorzaakte mobiele overflow met right: -2px. */
.summary__remove {
  background: transparent;
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text-muted, rgba(255,255,255,.4));
  cursor: pointer;
  opacity: .55;
  padding: 0;
  transition: opacity .2s, color .2s, background .2s, transform .15s;
}
.summary__item:hover .summary__remove { opacity: 1; }
.summary__remove:hover {
  color: rgb(255,120,120);
  background: rgba(255,80,80,.12);
  transform: scale(1.1);
}
.summary__remove svg { width: 12px; height: 12px; }
@media (hover: none) {
  .summary__remove { opacity: .85; }
}

.summary__clear {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-end;
  margin-top: -8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted, rgba(255,255,255,.4));
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.summary__clear:hover {
  color: rgb(255,120,120);
  border-color: rgba(255,80,80,.3);
  background: rgba(255,80,80,.06);
}
.summary__clear[hidden] { display: none; }

/* ===== Discount code input in summary — Apex style ===== */
.summary__discount {
  position: relative;
  margin-top: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: linear-gradient(180deg, rgba(255, 0, 0,0.08), rgba(0,0,0,0.25));
  border: 1px solid var(--c-border-red, rgba(255, 0, 0,.35));
  border-radius: var(--r-sm);
  transition: border-color var(--t-base), background var(--t-base);
}
.summary__discount:has(.summary__discount-input:focus) {
  border-color: var(--c-red, #ff0000);
  background: linear-gradient(180deg, rgba(255, 0, 0,0.14), rgba(0,0,0,0.30));
}
.summary__discount-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-red, #ff0000);
  margin-bottom: var(--s-2);
}
.summary__discount-label::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--c-red, #ff0000);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><circle cx='7' cy='7' r='1.4' fill='currentColor'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><circle cx='7' cy='7' r='1.4' fill='currentColor'/></svg>") center / contain no-repeat;
}
.summary__discount-row {
  display: flex; gap: 0;
  background: var(--c-surface-2, rgba(0,0,0,.45));
  border: 1px solid var(--c-border, rgba(255,255,255,.10));
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.summary__discount:has(.summary__discount-input:focus) .summary__discount-row {
  border-color: var(--c-red, #ff0000);
  box-shadow: 0 0 0 1px var(--c-red, #ff0000), 0 4px 14px rgba(255, 0, 0,.25);
}
.summary__discount-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.summary__discount-input::placeholder {
  color: var(--c-text-muted, rgba(255,255,255,.32));
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-wide);
}
.summary__discount-input:focus { outline: none; }
.summary__discount-input:disabled {
  color: var(--c-text-dim);
  cursor: not-allowed;
  letter-spacing: .14em;
}
.summary__discount-btn {
  padding: 10px 14px;
  /* Wit op #ff0000 haalt 4,00:1 en zakt daarmee onder de WCAG AA-eis van
     4,5:1 voor tekst van deze grootte. Op #cc0000 is het 5,89:1. De knoppen
     elders op de site gebruiken al het verloop dat op #cc0000 eindigt; deze
     ene knop stond nog op puur rood. */
  background: var(--c-red-dark, #cc0000);
  color: #fff;
  border: none;
  border-left: 1px solid rgba(0,0,0,.35);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  transition: background var(--t-base), color var(--t-base);
  flex-shrink: 0;
}
.summary__discount-btn:hover {
  /* Niet var(--c-red-bright): dat is #ff3333 en daarmee zakt wit naar 3,6:1. */
  background: #e00000;
}
.summary__discount-btn:active { transform: translateY(1px); }
.summary__discount-btn[data-applied="1"] {
  background: transparent;
  color: var(--c-text-dim);
}
.summary__discount-btn[data-applied="1"]:hover {
  color: rgb(255,120,120);
  background: rgba(255,80,80,.08);
}
.summary__discount-msg {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  min-height: 14px;
  line-height: 1.4;
}
.summary__discount-msg.is-ok {
  color: rgb(140,235,180);
}
.summary__discount-msg.is-err {
  color: rgb(255,140,140);
}

/* Korting-regel binnen items-lijst — subtiel groen accent */
.summary__item--discount {
  background: rgba(80,200,120,.04);
  border-bottom-color: rgba(80,200,120,.18) !important;
  padding-left: var(--s-2);
  padding-right: var(--s-2);
  border-radius: 3px;
}
.summary__item--discount .summary__item-name {
  color: rgb(140,235,180);
  font-weight: var(--fw-semi);
}
.summary__item--discount .summary__item-name small {
  color: rgba(140,235,180,.6);
}
.summary__item--discount .summary__item-price {
  color: rgb(140,235,180);
  font-weight: var(--fw-bold);
}

/* ============================================
   Stap 5 form — fieldset-groepering
   ============================================ */
.step5-form { gap: var(--s-5); }

.step5-group {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md, 10px);
  padding: var(--s-5) var(--s-4) var(--s-4);
  margin: 0;
  background: rgba(255,255,255,.015);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.step5-group > legend {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-red);
  background: var(--c-bg, #0a0a0b);
  border: 1px solid rgba(255, 0, 0,.35);
  border-radius: 4px;
}
.step5-group--agreements {
  background: rgba(255, 0, 0,.06);
  border-color: rgba(255, 0, 0,.25);
}
.step5-group--agreements > legend {
  color: #fff;
  background: var(--c-red, #ff0000);
  border-color: var(--c-red, #ff0000);
}

.grid-2col      { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.grid-postcode  { grid-template-columns: 160px 1fr; gap: var(--s-4); }

.accessoires-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2) var(--s-4);
}

.check--block {
  align-items: flex-start;
  gap: 10px;
}
.check--block a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  transition: color .15s ease;
}
.check--block a:hover {
  color: #ff8a8a;
  text-decoration-thickness: 2px;
}

@media (max-width: 720px) {
  .grid-2col,
  .grid-postcode { grid-template-columns: 1fr; gap: var(--s-3); }
  .step5-group { padding: var(--s-4) var(--s-3) var(--s-3); }
  .accessoires-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBIELE OVERFLOW-VANGNET (max-width: 768px)
   ============================================================
   Echte oorzaak: grid-children kregen geen min-width: 0,
   waardoor lange labels of nowrap-content de cel breder maken
   dan de viewport. Hier expliciet aanpakken plus algemene
   responsive sizing voor headings, padding en afbeeldingen.
   Komt als laatste in builder.css zodat alle eerdere selectors
   zonder !important blijven werken op desktop. */

/* Grid-children mogen krimpen tot tekst-content; lange items
   krijgen ellipsis ipv de hele layout op te rekken. */
.builder__layout > *,
.summary > *,
.summary__item > *,
.summary__total > * {
  min-width: 0;
}

/* Voorkomt dat lange product-namen de cel oprekken */
.summary__item-name,
.option__title,
.option__desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Afbeeldingen + SVG nooit groter dan hun container */
.builder img,
.builder svg,
.summary img,
.ctrl-preview img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* Container nooit breder dan viewport */
  .builder,
  .builder__layout,
  .builder__panel,
  .summary,
  .step5-form,
  .builder__nav,
  .builder__steps-nav { max-width: 100%; box-sizing: border-box; }

  /* Headings proportioneel op mobiel — niet meer overheersend */
  .builder__panel-head h2 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }
  .builder__panel-head p  { font-size: clamp(0.8rem, 3vw, 0.9rem); }
  .summary__title { font-size: clamp(0.95rem, 3.5vw, 1.15rem); }
  .display.h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); }

  /* Controller preview kleiner — was 300px hard, nu 240px */
  .ctrl-image-wrap { max-width: 240px; }

  /* Banner image-hoogte beperkt */
  .builder-banner { height: clamp(110px, 30vw, 180px); }

}

@media (max-width: 480px) {
  /* Extra-smal: 16px gutter wordt 12px voor wat meer ruimte */
  .builder .container { padding-left: 12px; padding-right: 12px; }
  .builder__panel { padding: 14px !important; }
  .ctrl-image-wrap { max-width: 200px; }
  .summary { padding: 16px !important; }
  /* Stap-pillen alleen nummers tonen op super-smal scherm */
  .step-pill__copy > span { max-width: 50px; }
}

/* Compacte WhatsApp-hulpkaart op de plek van de oude gele infobalk. */
.builder-help {
  width: min(1160px, calc(100% - 32px));
  margin: 18px auto 0;
}
.builder-help__link {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 11px 13px;
  color: var(--c-text);
  background: linear-gradient(145deg, rgba(19, 20, 23, .96), rgba(8, 8, 10, .98));
  border: 1px solid rgba(95, 139, 117, .32);
  border-radius: var(--r-md);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.builder-help__link:hover {
  color: var(--c-text);
  border-color: rgba(95, 139, 117, .66);
  box-shadow: 0 19px 44px rgba(0, 0, 0, .38);
  transform: translateY(-2px);
}
.builder-help__link:focus-visible { outline: 2px solid var(--c-silver); outline-offset: 3px; }
.builder-help__avatar {
  width: 52px;
  height: 52px;
  overflow: hidden;
  background: var(--c-surface-2);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.builder-help__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.builder-help__copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.builder-help__copy strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.builder-help__copy > span { color: var(--c-text-dim); font-size: 12.5px; line-height: 1.45; }
.builder-help__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  color: #d7eee1;
  background: rgba(95, 139, 117, .14);
  border: 1px solid rgba(95, 139, 117, .38);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.builder-help__cta svg { width: 17px; height: 17px; color: #7da48f; }

@media (max-width: 640px) {
  .builder-help { width: calc(100% - 28px); margin-top: 12px; }
  .builder-help__link {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 10px;
  }
  .builder-help__avatar { width: 42px; height: 42px; }
  .builder-help__copy strong { font-size: 13px; }
  .builder-help__copy > span { font-size: 11.5px; }
  .builder-help__cta {
    grid-column: 2;
    justify-self: start;
    min-height: 40px;
    padding: 0 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-help__link { transition: none; }
}

/* in3-hint onder het totaalbedrag (toont vanaf €100) */
.summary__in3-hint {
  font-size: 11px;
  color: var(--c-text-dim);
  margin-top: 2px;
}
.summary__in3-hint[hidden] { display: none !important; }