/* Keuzehulp (keuzehulp.js, window.ShopAdvisor): de zes vragen en het advies in het brede venster van de winkel.
   Gedeeld door Komodo Hardware en Referbo. Alleen de variabelen van de winkels, zodat elke winkel zijn eigen kleuren en
   knoppen houdt: --paper, --ink, --muted, --line, --bg, --orange (accent: Komodo groen, Referbo paars), --orange-soft en
   --brand-300/400. De ingang op de pagina (.keuzehulp-teaser) staat in de winkel-CSS. */

.keuzehulp { color: var(--ink); font-size: 14px; line-height: 1.55; }
.keuzehulp h3, .keuzehulp h4, .keuzehulp h5, .keuzehulp p, .keuzehulp ul, .keuzehulp dl { margin-top: 0; }
.keuzehulp-kop { margin: 0 0 4px; color: var(--ink); font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.3px; }
.keuzehulp-kop:focus { outline: none; }
.keuzehulp-kop:focus-visible { outline: 3px solid var(--brand-400, var(--orange)); outline-offset: 4px; }
.keuzehulp-hint { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---- Voortgang ----------------------------------------------------------------------------------------------------- */
.keuzehulp-voortgang { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.keuzehulp-voortgang-tekst { flex: none; margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .2px; }
.keuzehulp-voortgang .keuzehulp-voortgang-tekst { margin: 0; }
.keuzehulp-balk { display: grid; flex: 1 1 auto; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; max-width: 320px; margin: 0; padding: 0; list-style: none; }
.keuzehulp-balk li { height: 4px; border-radius: 2px; background: var(--line); }
.keuzehulp-balk li.gedaan { background: var(--orange); }

/* ---- Vraag en tegels ------------------------------------------------------------------------------------------------- */
.keuzehulp-veld, .keuzehulp-extra { min-width: 0; margin: 0; padding: 0; border: 0; }
.keuzehulp-veld > legend { float: left; width: 100%; margin: 0; padding: 0; }
.keuzehulp-veld > legend + * { clear: left; }
.keuzehulp-fout { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid #b3261e; border-radius: 3px; background: #fdf1f0; color: #8c1d18; font-size: 13px; font-weight: 700; }
.keuzehulp-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin: 0; }
.keuzehulp-tegels.breed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.keuzehulp-tegels.chips { display: flex; flex-wrap: wrap; }
.keuzehulp-tegel {
  display: flex; align-items: flex-start; gap: 11px; min-width: 0; min-height: 54px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fff); color: var(--ink);
  line-height: 1.4; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.keuzehulp-tegel:hover { border-color: var(--brand-300, var(--orange)); }
.keuzehulp-tegel:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); }
.keuzehulp-tegel:has(input:disabled) { cursor: default; opacity: .55; }
.keuzehulp-tegel:has(input:disabled):hover { border-color: var(--line); }
.keuzehulp-tegel:has(input:focus-visible) { outline: 3px solid var(--brand-400, var(--orange)); outline-offset: 2px; }
.keuzehulp-tegel input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); cursor: inherit; }
.keuzehulp-tegel input:focus-visible { outline: none; }
.keuzehulp-tegel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.keuzehulp-tegel strong { font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.keuzehulp-tegel small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.keuzehulp-tegel:has(input:checked) strong { color: var(--orange); }
.keuzehulp-tegel.klein { min-height: 44px; padding: 9px 14px; align-items: center; }
.keuzehulp-tegel.klein strong { font-size: 13px; }
.keuzehulp-tegel.klein input { margin: 0; }
.keuzehulp-telling { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.keuzehulp-extra { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.keuzehulp-extra > legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; color: var(--ink); font-size: 15px; font-weight: 800; }
.keuzehulp-extra > legend span { color: var(--muted); font-size: 13px; font-weight: 600; }
.keuzehulp-extra > legend + * { clear: left; }
.keuzehulp-extra .keuzehulp-hint { margin-bottom: 10px; }

/* Vorige / Volgende: blijft onderin het venster zichtbaar, ook bij een lange lijst tegels. */
.keuzehulp-navigatie {
  position: sticky; bottom: -30px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 22px -30px -30px; padding: 14px 30px 18px; border-top: 1px solid var(--line); background: var(--bg);
}
.keuzehulp-navigatie .button { min-height: 44px; padding: 10px 18px; font-size: 13px; font-weight: 800; gap: 10px; }
.keuzehulp-navigatie .button i { width: 15px; height: 15px; }
.keuzehulp-volgende { margin-left: auto; }

/* ---- Advies ---------------------------------------------------------------------------------------------------------- */
.keuzehulp-advies-kop { margin: 0 0 20px; }
.keuzehulp-advies-kop .keuzehulp-hint { margin: 6px 0 0; }
.keuzehulp-advies { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.keuzehulp-profiel { padding: 18px 18px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fff); }
.keuzehulp-profiel h4, .keuzehulp-groep h4 { margin: 0 0 10px; color: var(--ink); font-size: 15px; font-weight: 800; line-height: 1.4; }
.keuzehulp-profiel h4 + .keuzehulp-redenen { margin-top: -2px; }
.keuzehulp-specs { margin: 0 0 16px; }
.keuzehulp-specs > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.keuzehulp-specs dt { color: var(--muted); font-size: 13px; line-height: 1.5; }
.keuzehulp-specs dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.keuzehulp-specs dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.keuzehulp-schakels { display: grid; gap: 8px; margin: 0 0 18px; }
.keuzehulp-schakel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 6px; background: var(--orange-soft); cursor: pointer; line-height: 1.4; }
.keuzehulp-schakel input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); cursor: pointer; }
.keuzehulp-schakel strong { display: block; font-size: 13px; font-weight: 800; }
.keuzehulp-schakel small { display: block; color: var(--muted); font-size: 12px; }
.keuzehulp-redenen { margin: 0 0 16px; padding: 0 0 0 18px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.keuzehulp-redenen li + li { margin-top: 6px; }
.keuzehulp-noten { color: var(--muted); }

/* Artikelen bij het advies. */
.keuzehulp-artikelen { display: grid; gap: 22px; min-width: 0; }
.keuzehulp-groep h4 span { color: var(--muted); font-weight: 650; }
.keuzehulp-groep-intro { margin: -6px 0 10px; color: var(--muted); font-size: 13px; }
.keuzehulp-lijst { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.keuzehulp-artikel {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: start; min-width: 0;
  padding: 12px 14px 12px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fff);
}
.keuzehulp-artikel-foto { display: block; width: 76px; }
.keuzehulp-artikel-foto img { display: block; width: 76px; height: 57px; object-fit: contain; }
.keuzehulp-artikel-tekst { min-width: 0; }
.keuzehulp-artikel-naam { margin: 0 0 3px; font-size: 14px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.keuzehulp-artikel-naam a { color: var(--ink); }
.keuzehulp-artikel-naam a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.keuzehulp-artikel-specs { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.keuzehulp-ombouw { margin: 6px 0 0; color: var(--orange); font-size: 12px; font-weight: 700; line-height: 1.45; }
.keuzehulp-artikel .uitvoering-chips { margin-top: 6px; }
.keuzehulp-verschillen { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.5; }
.keuzehulp-verschillen li { position: relative; padding-left: 14px; color: var(--ink); }
.keuzehulp-verschillen li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.keuzehulp-verschillen li + li { margin-top: 3px; }
.keuzehulp-artikel-prijs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; }
.keuzehulp-artikel-prijs .price { font-size: 18px; line-height: 1.25; }
.keuzehulp-artikel-prijs .tax-note { margin-top: 1px; font-size: 11px; }
.keuzehulp-voorraad { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.keuzehulp-voorraad.uit { color: #8c4f2b; }
.keuzehulp-artikel-prijs .vergelijk-toggle { margin-top: 2px; }
.keuzehulp-leeg { padding: 16px 18px; border: 1px dashed var(--line); border-radius: 6px; background: var(--paper, #fff); }
.keuzehulp-leeg p { margin: 0; font-size: 13px; line-height: 1.65; }
.keuzehulp-leeg strong { color: var(--ink); }

/* Knoppen onder het advies. */
.keuzehulp-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.keuzehulp-acties .button { min-height: 44px; padding: 10px 18px; font-size: 13px; font-weight: 800; gap: 10px; }
.keuzehulp-acties .button i { width: 15px; height: 15px; }
.keuzehulp-link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--orange); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.keuzehulp-link:hover { color: var(--ink); }
.keuzehulp-acties .keuzehulp-link { min-height: 44px; }
.keuzehulp-verschillen .keuzehulp-link { min-height: 0; font-size: 12px; }
.keuzehulp-voetnoot { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---- Smalle schermen --------------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .keuzehulp-advies { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
  .keuzehulp-kop { font-size: 19px; }
  .keuzehulp-navigatie { bottom: -22px; margin: 20px -18px -22px; padding: 12px 18px 14px; }
  .keuzehulp-tegels.doelen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .keuzehulp-tegel { padding: 10px 11px; gap: 9px; }
  .keuzehulp-tegel strong { font-size: 13px; }
}
@media (max-width: 560px) {
  .keuzehulp-artikel { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; }
  .keuzehulp-artikel-foto, .keuzehulp-artikel-foto img { width: 64px; }
  .keuzehulp-artikel-foto img { height: 48px; }
  .keuzehulp-artikel-prijs { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: left; }
  .keuzehulp-artikel-prijs .tax-note { flex-basis: 100%; }
  .keuzehulp-voorraad { margin-top: 0; }
  .keuzehulp-acties .button { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .keuzehulp-specs > div { grid-template-columns: minmax(0, 1fr); }
  .keuzehulp-voortgang { flex-wrap: wrap; gap: 8px; }
  .keuzehulp-balk { flex-basis: 100%; max-width: none; }
}
@media (forced-colors: active) {
  .keuzehulp-tegel:has(input:checked) { border-width: 3px; }
  .keuzehulp-balk li { border: 1px solid CanvasText; }
  .keuzehulp-balk li.gedaan { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .keuzehulp-tegel { transition: none; }
}