/* Dutch Horizon M4: maatwerk-configurator, keuzehulp, export, diensten en aanvragen. Prefix cfg-. Eigenaar: M4.
   Bron: docs/DESIGN.md §6.5, §6.7, §6.11, §6.13, §6.14, §9 en PLAN-B2B §7 ("veel donker, lezen licht").
   Alleen --dh-*-tokens; transparantie via color-mix(). Dynamische waarden (schuifjes) via CSSOM (el.style.setProperty). */

/* ---------------------------------------------------------------- hulpklassen */
html:not(.js) .cfg-js-only { display: none !important; }
.js .cfg-nojs { display: none !important; }
.cfg-default-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ---------------------------------------------------------------- hero (donker, alle M4-pagina's) */
.cfg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dh-grad-veen);
  padding-top: var(--dh-hero-pt);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.cfg-hero::before {
  content: "";
  position: absolute;
  left: 38%;
  right: -12%;
  bottom: 0;
  height: 78%;
  background: var(--dh-glow-sunrise);
  z-index: -1;
  pointer-events: none;
}
.cfg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dh-glow-corner);
  z-index: -1;
  pointer-events: none;
}
.cfg-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dh-space-6); }
.cfg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dh-space-7); align-items: end; }
@media (min-width: 1024px) {
  .cfg-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--dh-space-8); }
}
.cfg-hero__copy { display: grid; gap: var(--dh-space-4); align-content: start; min-width: 0; }
.cfg-hero__copy--wide { max-width: 860px; }
.cfg-hero__title { font-size: var(--dh-fs-hero); line-height: var(--dh-lh-display); max-width: 16ch; }
.cfg-hero--finder .cfg-hero__title { font-size: var(--dh-fs-3xl); line-height: var(--dh-lh-heading); max-width: 24ch; }
.cfg-hero__sub { font-family: var(--dh-font-display); font-stretch: var(--dh-stretch-label); font-weight: 600; font-size: var(--dh-fs-lg); color: var(--dh-accent-text); }
.cfg-hero__lede { font-size: var(--dh-fs-md); color: var(--dh-text-2); max-width: 62ch; }
.cfg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: var(--dh-space-2); }
.cfg-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-size: var(--dh-fs-sm); color: var(--dh-text-2); }
.cfg-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.cfg-hero__facts .icon { color: var(--dh-accent-icon); }
@media (max-width: 479.98px) { .cfg-hero__actions .btn { width: 100%; } }

/* Drie stappen langs een verticale horizonlijn (configurator) */
.cfg-hero__process {
  position: relative;
  padding: var(--dh-space-5) var(--dh-space-5) var(--dh-space-5) var(--dh-space-5);
  border-radius: var(--dh-r-xl);
  background: color-mix(in srgb, var(--dh-mist-50) 4%, transparent);
  box-shadow: var(--dh-ring-shell);
}
.cfg-hero__process-title { font-size: var(--dh-fs-xs); font-weight: 600; letter-spacing: var(--dh-track-caps); text-transform: uppercase; color: var(--dh-text-subtle); margin-bottom: var(--dh-space-4); }
.cfg-process { position: relative; display: grid; gap: var(--dh-space-5); list-style: none; margin: 0; padding: 0; }
.cfg-process::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(180deg, var(--dh-goud-300), color-mix(in srgb, var(--dh-gloed-400) 30%, transparent)); }
.cfg-process__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 16px; }
.cfg-process__dot { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--dh-veen-950);
  box-shadow: inset 0 0 0 1.5px var(--dh-goud-300); color: var(--dh-goud-300); font: 500 var(--dh-fs-xs)/1 var(--dh-font-mono); }
.cfg-process__title { font-weight: 600; }
.cfg-process__text { font-size: var(--dh-fs-sm); color: var(--dh-text-2); }

/* Embleem (dienstpagina): icoon op de horizon */
.cfg-hero__emblem { position: relative; display: none; }
@media (min-width: 1024px) { .cfg-hero__emblem { display: block; } }
.cfg-emblem { display: block; width: 100%; height: auto; }
.cfg-hero__emblem-icon {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dh-veen-950); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dh-goud-300) 60%, transparent), 0 0 0 10px color-mix(in srgb, var(--dh-goud-300) 6%, transparent);
  color: var(--dh-goud-300);
}
.cfg-hero__emblem-icon .icon { width: 40px; height: 40px; stroke-width: 1.25; }

/* Sfeerbeeld (dienstpagina, fotolaag): foto in een afgerond vlak met het label "Sfeerbeeld" (.photo-label) in de hoek.
   De verhouding ligt vast, dus de hero verspringt niet tijdens het laden. Een dienst zonder foto houdt het embleem. */
.cfg-hero__photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--dh-r-xl);
  background: var(--dh-surface);
  box-shadow: var(--dh-ring-shell), var(--dh-shadow-2);
}
.cfg-hero__photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .cfg-hero__photo { aspect-ratio: 3 / 2; } }

/* Diensten langs één horizonlijn (overzicht) */
.cfg-horizon { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cfg-horizon__link { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 10px; border-radius: var(--dh-r-md); text-decoration: none; color: var(--dh-text); }
.cfg-horizon__link:hover { background: var(--dh-wash-dark); color: var(--dh-accent-text); }
.cfg-horizon__dot { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--dh-veen-950); color: var(--dh-goud-300); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dh-goud-300) 45%, transparent); }
.cfg-horizon__label { font-weight: 600; font-size: var(--dh-fs-sm); }
@media (min-width: 1024px) {
  .cfg-horizon { grid-template-columns: repeat(var(--_n, 5), minmax(0, 1fr)); gap: 0; padding-top: 6px; }
  .cfg-horizon::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--dh-grad-seam); }
  .cfg-horizon__link { flex-direction: column; text-align: center; gap: 10px; padding: 0 6px 6px; }
  .cfg-horizon__link:hover { background: transparent; }
  .cfg-horizon__dot { width: 42px; height: 42px; position: relative; }
  .cfg-horizon__link:hover .cfg-horizon__dot { box-shadow: inset 0 0 0 1.5px var(--dh-goud-300), 0 0 0 6px color-mix(in srgb, var(--dh-goud-300) 12%, transparent); }
  .cfg-horizon__label { font-size: var(--dh-fs-xs); line-height: 1.35; }
}

/* ---------------------------------------------------------------- secties (licht) */
.cfg-section { position: relative; }
.cfg-section > .seam:first-child { position: absolute; top: 0; left: 0; right: 0; }
.cfg-section--sunken { background: var(--dh-surface-sunken); }
.cfg-section__head { display: grid; gap: var(--dh-space-3); max-width: 70ch; margin-bottom: var(--dh-space-6); }
.cfg-split { display: grid; gap: var(--dh-space-6); align-items: start; }
@media (min-width: 1024px) {
  .cfg-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--dh-space-8); }
  .cfg-split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.cfg-split h2, .cfg-docs h2, .cfg-how h2 { font-size: var(--dh-fs-2xl); margin-bottom: var(--dh-space-4); }
.cfg-split__more { margin-top: var(--dh-space-4); }
.cfg-note-light { color: var(--dh-text-muted); font-size: var(--dh-fs-sm); max-width: 46ch; }

/* ---------------------------------------------------------------- configurator (donker) */
.cfg {
  position: relative;
  isolation: isolate;
  background: radial-gradient(48% 40% at 88% 100%, color-mix(in srgb, var(--dh-goud-300) 10%, transparent), transparent 70%), var(--dh-veen-950);
  padding-block: 0 var(--dh-section-y-tight);
  scroll-margin-top: calc(var(--dh-header-offset) + 8px);
}
.cfg__inner { padding-top: var(--dh-section-y-tight); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dh-space-5); }
.cfg__head { display: grid; gap: var(--dh-space-2); min-width: 0; }
.cfg__title { font-size: var(--dh-fs-2xl); }
.cfg__lede { color: var(--dh-text-2); max-width: 62ch; }
.cfg__notice { max-width: 760px; }
.cfg__form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dh-space-5); min-width: 0; }
.cfg__grid { display: grid; gap: var(--dh-gap); align-items: start; }
@media (min-width: 1024px) { .cfg__grid { grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); } }
@media (min-width: 1280px) { .cfg__grid { grid-template-columns: minmax(0, 1.35fr) minmax(400px, 1fr); gap: var(--dh-space-6); } }
.cfg__main { display: grid; gap: var(--dh-space-5); min-width: 0; }

/* Stappenbalk */
.cfg-steps { position: relative; min-width: 0; }
.cfg-steps__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.cfg-steps__link {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: var(--dh-r-md);
  color: var(--dh-text-muted); text-decoration: none; font-size: var(--dh-fs-sm); font-weight: 500;
  transition: color var(--dh-dur-fast) var(--dh-ease-out), background-color var(--dh-dur-fast) var(--dh-ease-out);
}
.cfg-steps__link:hover { color: var(--dh-text); background: var(--dh-wash-dark); }
.cfg-steps__n {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 500 var(--dh-fs-2xs)/1 var(--dh-font-mono); box-shadow: inset 0 0 0 1px var(--dh-line-strong); color: var(--dh-text-muted);
}
.cfg-steps__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-steps__item.is-done .cfg-steps__n { background: var(--dh-grad-gloed); color: var(--dh-ink-900); box-shadow: none; }
.cfg-steps__item.is-current .cfg-steps__link { color: var(--dh-text); background: color-mix(in srgb, var(--dh-mist-50) 6%, transparent); }
.cfg-steps__item.is-current .cfg-steps__n { box-shadow: inset 0 0 0 1.5px var(--dh-goud-300), 0 0 0 4px rgb(234 193 127 / 0.2); color: var(--dh-goud-300); }
.cfg-steps__bar { height: 2px; margin-top: 8px; border-radius: 2px; background: var(--dh-line); overflow: hidden; }
.cfg-steps__fill { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--_progress, 0.125)); background: linear-gradient(90deg, var(--dh-goud-300), var(--dh-gloed-500)); transition: transform var(--dh-dur-slow) var(--dh-ease-out); }
/* Vanaf 1280px staan alle acht labels er. Acht gelijke kolommen zijn op de Nederlandse en Engelse labels afgesteld; in
   het Duits en Frans zijn sommige langer ("pH- und EC-Wert", "Matières premières", "Conditionnement"). Daarom is een
   kolom minstens zo breed als het langste woord van zijn label (min-content) en loopt een label van meer woorden over
   twee regels in plaats van af te kappen. Korte labels houden gelijke kolommen op één regel. */
@media (min-width: 1280px) {
  .cfg-steps__list { grid-template-columns: repeat(8, minmax(min-content, 1fr)); }
  .cfg-steps__label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; text-wrap: balance; }
}
@media (max-width: 1279.98px) {
  .cfg-steps__item:not(.is-current) .cfg-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cfg-steps__list { display: flex; }
  .cfg-steps__item { flex: 0 0 auto; }
  .cfg-steps__item.is-current { flex: 1 1 auto; min-width: 0; }
  .cfg-steps__link { justify-content: center; padding: 6px; }
  .cfg-steps__item.is-current .cfg-steps__link { justify-content: flex-start; padding-right: 12px; }
}
/* Onder 480px (DESIGN §6.13): alleen de acht bolletjes, gelijk verdeeld over de breedte; het label van de huidige stap
   blijft voor schermlezers, de stapkop eronder ("3/8" + vraag) toont de naam. */
@media (max-width: 479.98px) {
  .cfg-steps__list { gap: 0; justify-content: space-between; }
  .cfg-steps__item, .cfg-steps__item.is-current { flex: 1 1 0; min-width: 0; }
  .cfg-steps__item.is-current .cfg-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cfg-steps__link, .cfg-steps__item.is-current .cfg-steps__link { justify-content: center; padding: 4px 0; gap: 0; }
}

/* Stappaneel */
.cfg-step {
  display: grid;
  gap: var(--dh-space-5);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border-radius: var(--dh-r-xl);
  background: color-mix(in srgb, var(--dh-mist-50) 3%, transparent);
  box-shadow: var(--dh-ring-shell);
  min-width: 0;
  scroll-margin-top: calc(var(--dh-header-offset) + 16px);
}
.cfg__form.is-stepper .cfg-step:not(.is-active) { display: none; }
.cfg__form.is-stepper .cfg-step.is-active { animation: cfg-in var(--dh-dur-slow) var(--dh-ease-out); }
@keyframes cfg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cfg-step__head { display: grid; gap: 8px; }
.cfg-step__count { font: 500 var(--dh-fs-xs)/1 var(--dh-font-mono); color: var(--dh-text-subtle); letter-spacing: 0.04em; }
.cfg-step__count span { color: var(--dh-goud-300); }
.cfg-step__title { font-size: var(--dh-fs-xl); max-width: 26ch; }
.cfg-step__title:focus { outline: none; }
.cfg-step__help { color: var(--dh-text-2); max-width: 64ch; }
.cfg-step__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: var(--dh-space-4); border-top: 1px solid var(--dh-line); flex-wrap: wrap; }
.cfg-note { font-size: var(--dh-fs-sm); color: var(--dh-text-muted); max-width: 70ch; }
.cfg-note a { color: var(--dh-accent-text); }
.cfg-note .icon { color: var(--dh-accent-icon); vertical-align: -3px; margin-right: 4px; }
.cfg-note--disclaimer { display: flex; gap: 8px; align-items: flex-start; max-width: none; padding: 12px 14px; border-radius: var(--dh-r-md); background: var(--dh-info-wash); color: var(--dh-text-2); }
.cfg-note--disclaimer .icon { margin: 3px 0 0; flex: none; }
.cfg-note--disclaimer strong { color: var(--dh-text); }
.cfg-inline-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cfg-inline-action .cfg-note { flex: 1 1 260px; }
.cfg-field-narrow { max-width: 320px; }

/* Keuzekaarten (radio), donker en licht */
.cfg-cards { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.cfg-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.cfg-card { --_sel: var(--dh-veen-900); --_sel-fg: var(--dh-mist-50); position: relative; display: block; cursor: pointer; min-width: 0; }
.dh-dark .cfg-card { --_sel: var(--dh-goud-300); --_sel-fg: var(--dh-ink-900); }
.cfg-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-card__body {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  height: 100%;
  padding: 14px 44px 14px 16px;
  border-radius: var(--dh-r-md);
  border: 1px solid var(--dh-line-strong);
  background: color-mix(in srgb, var(--dh-surface) 70%, transparent);
  transition: border-color var(--dh-dur-fast) var(--dh-ease-out), background-color var(--dh-dur-fast) var(--dh-ease-out), box-shadow var(--dh-dur-fast) var(--dh-ease-out);
}
.dh-light .cfg-card__body, .cfg-card--light .cfg-card__body { background: var(--dh-surface); border-color: var(--dh-line-field); }
.cfg-card:hover .cfg-card__body { border-color: var(--dh-text-2); }
.cfg-card__title { font-weight: 600; line-height: 1.3; }
.cfg-card__meta { font-size: var(--dh-fs-xs); color: var(--dh-text-muted); line-height: 1.45; }
.cfg-card__check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--dh-line-strong); color: transparent; }
.cfg-card__check .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.cfg-card input:checked + .cfg-card__body { border-color: var(--_sel); box-shadow: inset 0 0 0 1px var(--_sel); background: color-mix(in srgb, var(--_sel) 9%, transparent); }
.cfg-card input:checked + .cfg-card__body .cfg-card__check { background: var(--_sel); box-shadow: none; color: var(--_sel-fg); }
.cfg-card input:focus-visible + .cfg-card__body { box-shadow: var(--dh-focus-ring); }
.cfg-card input:disabled + .cfg-card__body { opacity: 0.45; cursor: not-allowed; }
.cfg-card__icon { color: var(--dh-accent-icon); margin-bottom: 6px; display: block; }
.cfg-card__icon .icon { display: block; }
.cfg-card__tag { justify-self: start; margin-top: 4px; font-size: var(--dh-fs-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dh-accent-text); }
.cfg-card__gauge { display: block; height: 6px; border-radius: 3px; background: var(--dh-line-strong); overflow: hidden; margin-bottom: 8px; }
.cfg-card__gauge span { display: block; height: 100%; background: var(--dh-mat, #5A4231); border-radius: 3px; }
.cfg-card--veenhoudend .cfg-card__gauge span { width: 75%; background: #6E5340; }
.cfg-card--veenarm .cfg-card__gauge span { width: 40%; background: #6E5340; }
.cfg-card--veenvrij .cfg-card__gauge span { width: 0; }
.cfg-card__grain { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-bottom: 6px; }
.cfg-card__grain i { display: block; border-radius: 50%; background: color-mix(in srgb, var(--dh-mist-300) 60%, transparent); }
.cfg-card__grain--fijn i { width: 5px; height: 5px; }
.cfg-card__grain--middel i { width: 9px; height: 9px; }
.cfg-card__grain--middel i:nth-child(2n) { width: 6px; height: 6px; }
.cfg-card__grain--grof i { width: 16px; height: 14px; border-radius: 40%; }
.cfg-card__grain--grof i:nth-child(2n) { width: 11px; height: 10px; }
.cfg-card__grain--grof i:nth-child(n+5) { display: none; }

/* Grondstofrijen: fotostaaltje met kleurstip (zonder foto alleen het kleurblokje), naam, getal, slot, schuif */
.cfg-mats { display: grid; gap: 2px; border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-mats:focus { outline: none; }
.cfg-mat { --dh-mat: #5A4632; padding: 12px 12px 10px; border-radius: var(--dh-r-md); transition: background-color var(--dh-dur-fast) var(--dh-ease-out); }
.cfg-mat:hover { background: color-mix(in srgb, var(--dh-mist-50) 4%, transparent); }
.cfg-mat + .cfg-mat { box-shadow: inset 0 1px 0 var(--dh-line); }
.cfg-mat:hover + .cfg-mat { box-shadow: none; }
.cfg-mat__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; }
.cfg-mat__swatch { justify-self: center; width: 14px; height: 14px; border-radius: 4px; background: var(--dh-mat); box-shadow: inset 0 0 0 1px rgb(246 239 227 / 0.12); }
.cfg-mat.is-zero .cfg-mat__swatch { opacity: 0.4; }
/* Fotostaaltje (fotolaag, vierkant 32 px) met in de hoek de kleurstip die de grondstof in de mengbalk heeft. */
.cfg-mat__swatch--photo { position: relative; width: 32px; height: 32px; border-radius: var(--dh-r-sm); background: none; box-shadow: none; }
.cfg-mat__photo { display: block; width: 32px; height: 32px; border-radius: var(--dh-r-sm); object-fit: cover; background: var(--dh-mat); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dh-mist-50) 14%, transparent); }
.cfg-mat__dot { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--dh-mat); box-shadow: 0 0 0 2px var(--dh-bg); }
.cfg-mat.is-zero .cfg-mat__swatch--photo { opacity: 0.5; }
.cfg-mat__label { display: grid; gap: 1px; min-width: 0; }
.cfg-mat__name { font-weight: 600; font-size: var(--dh-fs-sm); }
.cfg-mat.is-zero .cfg-mat__name { color: var(--dh-text-2); font-weight: 500; }
.cfg-mat__hint { font-size: var(--dh-fs-xs); color: var(--dh-text-muted); line-height: 1.4; }
.cfg-mat__nameline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cfg-mat__tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--dh-r-xs); font: 500 var(--dh-fs-2xs)/1 var(--dh-font-mono); color: var(--dh-text-muted); box-shadow: inset 0 0 0 1px var(--dh-line-strong); white-space: nowrap; }
.cfg-mat__tag--peat { color: var(--dh-goud-200); box-shadow: none; background: color-mix(in srgb, var(--dh-goud-300) 12%, transparent); }
.cfg-mat__value { display: inline-flex; align-items: center; gap: 4px; }
.cfg-mat__num { width: 4.25rem; height: 40px; padding: 0 8px; text-align: right; font-size: var(--dh-fs-base); }
.cfg-mat__unit { font-family: var(--dh-font-mono); font-size: var(--dh-fs-sm); color: var(--dh-text-muted); }
.cfg-mat__lock {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--dh-text-subtle);
  cursor: pointer; transition: background-color var(--dh-dur-fast) var(--dh-ease-out), color var(--dh-dur-fast) var(--dh-ease-out);
}
.cfg-mat__lock .icon { width: 17px; height: 17px; }
.cfg-mat__lock:hover { background: var(--dh-wash-dark); color: var(--dh-text); }
.cfg-mat__lock[aria-pressed="true"] { background: color-mix(in srgb, var(--dh-goud-300) 18%, transparent); color: var(--dh-goud-300); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dh-goud-300) 50%, transparent); }
.cfg-mat__lock:focus-visible { outline: none; box-shadow: var(--dh-focus-ring); }
.cfg-mat.is-locked .cfg-range { opacity: 0.55; }
.cfg-mat.is-disabled .cfg-mat__name::after { content: attr(data-note); }
.cfg-mat__note { display: block; font-size: var(--dh-fs-2xs); color: var(--dh-goud-200); }
@media (max-width: 479.98px) {
  .cfg-mat__head { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .cfg-mat__lock { grid-column: 3; grid-row: 1; }
  .cfg-mat__value { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  .cfg-mat__label { grid-column: 2; }
}

/* Schuifjes: .cfg-range staat in css/global/bespoke-mini.css (ook nodig voor de home-teaser). */

/* Totaal onder de grondstoffen */
.cfg-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 12px 16px; border-radius: var(--dh-r-md); background: color-mix(in srgb, var(--dh-mist-50) 5%, transparent); }
.cfg-total__sum { font-weight: 600; }
.cfg-total__sum strong { font-size: var(--dh-fs-lg); color: var(--dh-success-text); margin-left: 6px; }
.cfg-total.is-off .cfg-total__sum strong { color: var(--dh-danger-text); }
.cfg-total__status { font-size: var(--dh-fs-sm); color: var(--dh-text-2); }

/* pH en EC: getal + schuif met het teeltbereik als band */
.cfg-chem { display: grid; gap: var(--dh-space-5); }
@media (min-width: 768px) { .cfg-chem { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfg-dial { display: grid; gap: 6px; padding: 16px; border-radius: var(--dh-r-lg); background: color-mix(in srgb, var(--dh-mist-50) 4%, transparent); box-shadow: var(--dh-ring-shell); }
.cfg-dial__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-dial__label { font-weight: 600; font-size: var(--dh-fs-sm); }
.cfg-dial__value { display: inline-flex; align-items: center; gap: 6px; }
.cfg-dial__num { width: 5rem; height: 44px; text-align: right; font-size: var(--dh-fs-lg); padding: 0 10px; }
.cfg-dial__unit { font-size: var(--dh-fs-xs); color: var(--dh-text-muted); font-family: var(--dh-font-mono); }
.cfg-dial .cfg-range {
  --_lo: 0%;
  --_hi: 0%;
  --_band: color-mix(in srgb, var(--dh-dauw-300) 55%, transparent);
}
.cfg-dial .cfg-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--_track) 0 var(--_lo), var(--_band) var(--_lo) var(--_hi), var(--_track) var(--_hi) 100%); }
.cfg-dial .cfg-range::-moz-range-track { background: linear-gradient(90deg, var(--_track) 0 var(--_lo), var(--_band) var(--_lo) var(--_hi), var(--_track) var(--_hi) 100%); }
.cfg-dial .cfg-range::-moz-range-progress { background: transparent; }
.cfg-dial__scale { display: flex; justify-content: space-between; font: 400 var(--dh-fs-2xs)/1 var(--dh-font-mono); color: var(--dh-text-subtle); }
.cfg-dial__crop { font-size: var(--dh-fs-xs); color: var(--dh-info-text); min-height: 1.4em; }
.cfg-chips { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.cfg-chips__legend { font-size: var(--dh-fs-sm); font-weight: 600; padding: 0; margin-bottom: 8px; }
.dh-dark .chip input:checked + .chip__label { background: var(--dh-mist-50); border-color: var(--dh-mist-50); color: var(--dh-ink-900); }
.dh-dark .chip input:hover:not(:checked) + .chip__label { background: var(--dh-wash-dark); }
.dh-dark .chip__label { border-color: var(--dh-line-field); }

/* Bemesting */
.cfg-ferts { display: grid; gap: 2px; }
.cfg-fert { display: grid; gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--dh-line); align-items: center; }
.cfg-fert:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) { .cfg-fert { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cfg-fert__text { display: grid; gap: 4px; }
.cfg-fert__name { font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.cfg-fert__name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--dh-mat, #E8D9A8); flex: none; }
.cfg-fert__help { font-size: var(--dh-fs-sm); color: var(--dh-text-muted); }
.cfg-fert__fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cfg-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; justify-self: start; min-height: 44px; }
.cfg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-switch__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--dh-mist-50) 16%, transparent); box-shadow: inset 0 0 0 1px var(--dh-line-strong); transition: background-color var(--dh-dur-base) var(--dh-ease-out); flex: none; }
.cfg-switch__track span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--dh-mist-50); transition: transform var(--dh-dur-base) var(--dh-ease-spring); }
.cfg-switch input:checked + .cfg-switch__track { background: var(--dh-goud-300); }
.cfg-switch input:checked + .cfg-switch__track span { transform: translateX(20px); background: var(--dh-veen-950); }
.cfg-switch input:focus-visible + .cfg-switch__track { box-shadow: var(--dh-focus-ring); }
.cfg-switch__label { font-size: var(--dh-fs-sm); font-weight: 600; }

/* Verpakking en levering */
.cfg-card--pack .cfg-card__icon { color: var(--dh-goud-300); }
.cfg-delivery { margin-top: var(--dh-space-2); }
.cfg-unit-input { display: flex; align-items: center; gap: 8px; }
.cfg-unit-input .input { max-width: 10rem; }
.cfg-unit-input span { font-family: var(--dh-font-mono); color: var(--dh-text-muted); }

/* Overzicht */
.cfg-summary { display: grid; margin: 0; border-radius: var(--dh-r-lg); box-shadow: var(--dh-ring-shell); overflow: hidden; }
.cfg-summary__row { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 16px; align-items: baseline; }
.cfg-summary__row + .cfg-summary__row { border-top: 1px solid var(--dh-line); }
.cfg-summary dt { font-size: var(--dh-fs-xs); color: var(--dh-text-muted); }
.cfg-summary dd { margin: 0; font-size: var(--dh-fs-sm); }
.cfg-summary__edit a { font-size: var(--dh-fs-xs); font-weight: 600; color: var(--dh-accent-text); }
@media (max-width: 639.98px) {
  .cfg-summary__row { grid-template-columns: minmax(0, 1fr) auto; }
  .cfg-summary__row dd:not(.cfg-summary__edit) { grid-column: 1 / -1; grid-row: 2; }
}

/* Aanvraag op linnen binnen de donkere configurator */
.cfg-request {
  display: grid;
  gap: var(--dh-space-5);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border-radius: var(--dh-r-xl);
  background: var(--dh-glow-sunrise-light) center bottom / 100% 40% no-repeat, var(--dh-surface);
  box-shadow: var(--dh-shadow-3);
  scroll-margin-top: calc(var(--dh-header-offset) + 16px);
}
.cfg-request__head { display: grid; gap: 6px; }
.cfg-request__title { font-size: var(--dh-fs-xl); }
.cfg-request__intro { color: var(--dh-text-2); max-width: 62ch; }

/* Live profiel (rechts, sticky vanaf lg) */
.cfg-live { min-width: 0; }
@media (min-width: 1024px) { .cfg-live { position: sticky; top: calc(var(--dh-header-offset) + 16px); } }
.cfg-live__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--dh-space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--dh-r-xl);
  background: var(--dh-glow-corner), var(--dh-veen-900);
  box-shadow: 0 0 0 1px rgb(246 239 227 / 0.08), var(--dh-shadow-3);
}
.cfg-live__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: var(--dh-glow-sunrise); opacity: 0.55; z-index: -1; pointer-events: none; }
.cfg-live__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cfg-live__title { font-size: var(--dh-fs-xs); font-weight: 600; letter-spacing: var(--dh-track-caps); text-transform: uppercase; color: var(--dh-text-subtle); }
.cfg-live__crop { font-size: var(--dh-fs-sm); color: var(--dh-accent-text); font-weight: 600; }
.cfg-live__total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cfg-live__totalnum { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--dh-text); }
.cfg-live__total.is-off .cfg-live__totalnum { color: var(--dh-danger-text); }
.cfg-live__peat { font-size: var(--dh-fs-sm); color: var(--dh-text-2); }
.cfg-live__bar .mix-bar__svg { box-shadow: 0 0 0 1px rgb(246 239 227 / 0.08); }
.cfg-live__bar .mix-bar__svg rect { transition: x var(--dh-dur-slow) var(--dh-ease-out), width var(--dh-dur-slow) var(--dh-ease-out); }
.cfg-live__bar .mix-bar__svg text, .cfg-live__bar .mix-bar__svg line { transition: x var(--dh-dur-slow) var(--dh-ease-out), x1 var(--dh-dur-slow) var(--dh-ease-out), opacity var(--dh-dur-fast) var(--dh-ease-out); }
.cfg-live__profile .mix-profile { gap: var(--dh-space-4); }
.cfg-live__profile .meter__fill { transition: width var(--dh-dur-slow) var(--dh-ease-out); }
.cfg-live__warnings { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--dh-r-md); background: color-mix(in srgb, var(--dh-goud-300) 9%, transparent); box-shadow: inset 3px 0 0 var(--dh-gloed-500); font-size: var(--dh-fs-sm); color: var(--dh-text-2); }
.cfg-live__warnings-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--dh-goud-200); }
.cfg-live__warnings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cfg-live__note { font-size: var(--dh-fs-xs); color: var(--dh-text-subtle); }
.cfg-live__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cfg-live__actions .btn--glow { flex: 1 1 auto; }
@media (max-width: 479.98px) { .cfg-live__actions .btn { width: 100%; } }
.cfg__form.is-on-summary .cfg-live [data-cfg-request] { display: none; }

/* Toasts op de configuratorpagina: rechtsonder ligt het live-profiel met de glow-CTA, mobiel de dock. Daarom vanaf 640px
   rechtsboven onder de header en daaronder boven de dock (DESIGN §6.15). */
@media (min-width: 640px) {
  .page-configurator .toasts { top: calc(var(--dh-header-offset) + 12px); bottom: auto; }
}
@media (max-width: 639.98px) {
  .page-configurator .toasts { bottom: calc(12px + 64px + env(safe-area-inset-bottom)); }
}

/* Mobiele dock: dunne mengbalk + totaal, vast onderaan zolang de stappen in beeld zijn en het profiel niet (JS) */
.cfg-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--dh-z-sticky);
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--dh-r-lg);
  background: color-mix(in srgb, var(--dh-veen-900) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgb(246 239 227 / 0.1), var(--dh-shadow-3);
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
  transition: transform var(--dh-dur-slow) var(--dh-ease-drawer), opacity var(--dh-dur-base) var(--dh-ease-out);
}
.cfg-dock.is-visible { opacity: 1; transform: none; }
@media (min-width: 1024px) { .cfg-dock { display: none; } }
.cfg-dock__bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--dh-line); }
.cfg-dock__bar span { display: block; height: 100%; flex: 0 0 var(--_w, 0%); background: var(--_c, #5A4632); transition: flex-basis var(--dh-dur-slow) var(--dh-ease-out); }
.cfg-dock__text { display: flex; justify-content: space-between; font-size: var(--dh-fs-xs); color: var(--dh-text-2); }
.cfg-dock__text .mono { color: var(--dh-text); font-weight: 500; }

/* Uitleg onder de configurator (licht) */
.cfg-explain { background: var(--dh-surface); }
.cfg-explain__grid { display: grid; gap: var(--dh-space-6); }
@media (min-width: 1024px) { .cfg-explain__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--dh-space-8); } }
.cfg-explain__title { font-size: var(--dh-fs-2xl); margin-bottom: var(--dh-space-4); }
.cfg-explain__list { display: grid; gap: var(--dh-space-5); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .cfg-explain__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cfg-explain__item { display: grid; gap: 8px; align-content: start; padding-top: var(--dh-space-4); border-top: 1px solid var(--dh-line-strong); }
.cfg-explain__icon { color: var(--dh-accent-icon); }
.cfg-explain__item-title { font-family: var(--dh-font-display); font-stretch: var(--dh-stretch-label); font-weight: 650; font-size: var(--dh-fs-md); letter-spacing: 0; }
.cfg-explain__item p { font-size: var(--dh-fs-sm); color: var(--dh-text-2); }
.cfg-explain__disclaimer { margin-top: var(--dh-space-7); padding: 14px 18px; border-radius: var(--dh-r-md); background: var(--dh-info-wash); font-size: var(--dh-fs-sm); color: var(--dh-text-2); max-width: 90ch; }
.cfg-explain__links { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: var(--dh-space-5) 0 0; padding: 0; }

/* ---------------------------------------------------------------- export */
.cfg-calc {
  position: relative;
  display: grid;
  gap: var(--dh-space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--dh-r-xl);
  background: color-mix(in srgb, var(--dh-mist-50) 5%, transparent);
  box-shadow: 0 0 0 1px rgb(246 239 227 / 0.1), var(--dh-shadow-3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cfg-calc__head { display: flex; align-items: center; gap: 12px; }
.cfg-calc__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--dh-goud-300) 14%, transparent); color: var(--dh-goud-300); flex: none; }
.cfg-calc__title { font-size: var(--dh-fs-lg); flex: 1; }
.cfg-calc__controls { display: grid; gap: 12px; }
@media (min-width: 480px) { .cfg-calc__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfg-calc__result { display: grid; gap: 10px; padding: 16px; border-radius: var(--dh-r-lg); background: color-mix(in srgb, var(--dh-veen-950) 70%, transparent); box-shadow: inset 0 0 0 1px var(--dh-line); }
.cfg-calc__art { width: 100%; height: auto; display: block; }
.cfg-calc__box { fill: none; stroke: color-mix(in srgb, var(--dh-mist-50) 35%, transparent); stroke-width: 1.5; }
.cfg-calc__pallet { fill: color-mix(in srgb, var(--dh-goud-300) 55%, transparent); stroke: var(--dh-goud-300); stroke-width: 1; transition: opacity var(--dh-dur-base) var(--dh-ease-out); }
.cfg-calc__numbers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cfg-calc__big { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 500; color: var(--dh-goud-200); letter-spacing: -0.02em; line-height: 1.1; }
.cfg-calc__unit { color: var(--dh-text-2); font-size: var(--dh-fs-sm); }
.cfg-calc__sep { color: var(--dh-text-subtle); font-size: var(--dh-fs-lg); }
.cfg-calc__sentence { font-size: var(--dh-fs-xs); color: var(--dh-text-muted); }
.cfg-calc__note { font-size: var(--dh-fs-xs); color: var(--dh-text-subtle); }

.cfg-loads { display: grid; gap: var(--dh-gap); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cfg-load { display: grid; gap: 10px; align-content: start; padding: var(--dh-space-5); border-radius: var(--dh-r-lg); background: var(--dh-surface); box-shadow: var(--dh-ring-shell), var(--dh-shadow-1); }
.cfg-load__art { width: 100%; height: auto; max-height: 96px; display: block; margin-bottom: 4px; }
.cfg-load__ground { stroke: var(--dh-line-strong); stroke-width: 1.5; }
.cfg-load__box { fill: color-mix(in srgb, var(--dh-veen-900) 8%, transparent); stroke: var(--dh-veen-700); stroke-width: 1.5; }
.cfg-load__rib { stroke: color-mix(in srgb, var(--dh-veen-700) 45%, transparent); stroke-width: 1; }
.cfg-load__unit { fill: var(--dh-zand-100); stroke: var(--dh-veen-700); stroke-width: 1.5; }
.cfg-load__pallet { fill: #6E5A44; }
.cfg-load__title { font-size: var(--dh-fs-lg); font-family: var(--dh-font-display); font-stretch: var(--dh-stretch-label); font-weight: 650; letter-spacing: 0; }
.cfg-load__text { font-size: var(--dh-fs-sm); color: var(--dh-text-2); }
.cfg-load__fact { font-size: var(--dh-fs-xs); color: var(--dh-info-text); margin-top: auto; }

.cfg-packs { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cfg-pack { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 14px 18px; border-radius: var(--dh-r-lg); background: var(--dh-surface); box-shadow: var(--dh-ring-shell); }
.cfg-pack__icon { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: var(--dh-r-md); display: grid; place-items: center; background: var(--dh-zand-100); color: var(--dh-veen-700); }
.cfg-pack__name { font-weight: 600; }
.cfg-pack__fact { font-size: var(--dh-fs-xs); color: var(--dh-info-text); }

.cfg-inco { display: grid; margin: 0; border-top: 1px solid var(--dh-line-strong); }
.cfg-inco__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 20px; padding: 14px 4px; border-bottom: 1px solid var(--dh-line); }
.cfg-inco__row dt { font-weight: 500; font-size: var(--dh-fs-md); color: var(--dh-text); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cfg-inco__row dd { margin: 0; color: var(--dh-text-2); font-size: var(--dh-fs-sm); }
.cfg-inco__row.is-default { background: var(--dh-accent-wash); border-radius: var(--dh-r-sm); }
@media (max-width: 479.98px) { .cfg-inco__row { grid-template-columns: minmax(0, 1fr); } .cfg-inco__row dt { flex-direction: row; } }

.cfg-docs-grid { display: grid; gap: var(--dh-space-7); }
@media (min-width: 1024px) { .cfg-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dh-space-8); } }
.cfg-docs { display: grid; gap: var(--dh-space-4); align-content: start; }
.cfg-docs > p { color: var(--dh-text-2); }
.cfg-docs__list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cfg-docs__list li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--dh-r-md); background: var(--dh-surface); box-shadow: var(--dh-ring-shell); font-weight: 600; }
.cfg-how__list, .cfg-block__steps { position: relative; display: grid; gap: var(--dh-space-4); list-style: none; margin: 0; padding: 0; }
.cfg-how__list::before, .cfg-block__steps::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, var(--dh-gloed-600), color-mix(in srgb, var(--dh-gloed-600) 0%, transparent)); }
.cfg-how__list li, .cfg-block__steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg-how__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--dh-surface); box-shadow: inset 0 0 0 1.5px var(--dh-gloed-600); color: var(--dh-gloed-700); font-size: var(--dh-fs-xs); }
.cfg-how__list p, .cfg-block__steps p { color: var(--dh-text-2); font-size: var(--dh-fs-sm); margin-top: 2px; }

.cfg-lines { display: grid; gap: var(--dh-space-3); }
.cfg-lines:focus { outline: none; }
.cfg-lines__rows { display: grid; gap: 10px; }
.cfg-line { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: var(--dh-r-md); background: var(--dh-surface-sunken); }
@media (min-width: 640px) {
  .cfg-line { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.4fr) minmax(0, 0.7fr) 44px; align-items: end; padding: 0; background: transparent; }
  .cfg-line + .cfg-line .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.js) .cfg-line { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.4fr) minmax(0, 0.7fr); }
}
.cfg-line__remove { justify-self: end; }
.cfg-lines [data-exp-add] { justify-self: start; }
@media (min-width: 1024px) {
  .cfg-section .enquiry--long { align-items: start; }
  .cfg-section .enquiry--long > .enquiry__aside { position: sticky; top: calc(var(--dh-header-offset) + 16px); }
}
.cfg-exp-count[hidden] { display: none; }

/* ---------------------------------------------------------------- diensten */
.cfg-services { display: grid; gap: var(--dh-gap); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .cfg-services { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cfg-service { grid-column: span 3; } }
@media (min-width: 1024px) { .cfg-service { grid-column: span 2; } .cfg-service--lg { grid-column: span 3; } }
.cfg-service { display: grid; }
.cfg-service__core {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: var(--dh-space-6) var(--dh-space-5) var(--dh-space-5);
  border-radius: var(--dh-r-lg);
  background: var(--dh-surface);
  box-shadow: var(--dh-ring-shell), var(--dh-shadow-1);
  transition: transform var(--dh-dur-base) var(--dh-ease-out), box-shadow var(--dh-dur-base) var(--dh-ease-out);
}
.cfg-service--lg .cfg-service__core { background: var(--dh-glow-sunrise-light) center bottom / 120% 55% no-repeat, var(--dh-surface); padding-block: var(--dh-space-7) var(--dh-space-6); }
.cfg-service__core:hover { transform: translateY(-2px); box-shadow: var(--dh-ring-shell), var(--dh-shadow-2); }
.cfg-service__core:focus-within { box-shadow: var(--dh-focus-ring); }
/* Fotoband boven in de kaart (fotolaag): binnen de rand van de kaart (schaal lg, kern md), het icoon schuift er half
   overheen. Zonder foto vervalt de band en staat het icoon bovenaan. */
.cfg-service__media {
  display: block;
  height: 148px;
  margin: calc(var(--dh-bezel) - var(--dh-space-6)) calc(var(--dh-bezel) - var(--dh-space-5)) 0;
  overflow: hidden;
  border-radius: var(--dh-r-md);
  background: var(--dh-surface-sunken);
}
.cfg-service--lg .cfg-service__media { height: clamp(168px, 120px + 7vw, 224px); margin-top: calc(var(--dh-bezel) - var(--dh-space-7)); }
.cfg-service__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dh-dur-slow) var(--dh-ease-out); }
.cfg-service__core:hover .cfg-service__img { transform: scale(1.03); }
.cfg-service__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--dh-accent-wash); color: var(--dh-gloed-700); margin-bottom: 6px; }
.cfg-service__media + .cfg-service__icon { position: relative; margin-top: -36px; box-shadow: 0 0 0 4px var(--dh-surface); }
.cfg-service__title { font-size: var(--dh-fs-xl); }
.cfg-service:not(.cfg-service--lg) .cfg-service__title { font-size: var(--dh-fs-lg); }
.cfg-service__title a { text-decoration: none; color: inherit; }
.cfg-service__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cfg-service__title a:focus-visible { outline: none; }
.cfg-service__text { color: var(--dh-text-2); }
.cfg-service__more { margin-top: var(--dh-space-2); }
.cfg-services__note { display: flex; align-items: center; gap: 8px; margin-top: var(--dh-space-5); font-size: var(--dh-fs-sm); color: var(--dh-text-muted); }

.cfg-svc { display: grid; gap: var(--dh-space-7); align-items: start; }
@media (min-width: 1024px) { .cfg-svc { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--dh-space-8); } }
.cfg-svc__main { display: grid; gap: var(--dh-space-7); min-width: 0; }
.cfg-block { display: grid; gap: var(--dh-space-4); }
.cfg-block__title { font-size: var(--dh-fs-xl); }
.cfg-block__cards { display: grid; gap: var(--dh-gap); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .cfg-block__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfg-block__cards li { display: grid; gap: 8px; align-content: start; padding: var(--dh-space-5); border-radius: var(--dh-r-lg); background: var(--dh-surface); box-shadow: var(--dh-ring-shell); }
.cfg-block__cards strong { font-family: var(--dh-font-display); font-stretch: var(--dh-stretch-label); font-weight: 650; font-size: var(--dh-fs-md); }
.cfg-block__cards p { color: var(--dh-text-2); font-size: var(--dh-fs-sm); }
.cfg-block__checks { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cfg-block__checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--dh-text-2); }
.cfg-block__checks .icon { margin-top: 3px; }
.cfg-block__note { color: var(--dh-text-2); max-width: var(--dh-measure); }
.cfg-block__note a { color: var(--dh-accent-text); }
.cfg-block--notes .cfg-block__note + .cfg-block__note { padding: 12px 16px; border-radius: var(--dh-r-md); background: var(--dh-accent-wash); color: var(--dh-text); }
@media (min-width: 1024px) { .cfg-svc__aside { position: sticky; top: calc(var(--dh-header-offset) + 16px); } }
.cfg-facts { display: grid; gap: var(--dh-space-4); padding: var(--dh-space-5); border-radius: var(--dh-r-lg); background: var(--dh-surface); box-shadow: var(--dh-ring-shell), var(--dh-shadow-1); }
.cfg-facts__title { font-size: var(--dh-fs-xs); font-weight: 600; letter-spacing: var(--dh-track-caps); text-transform: uppercase; color: var(--dh-text-muted); font-family: var(--dh-font-text); font-stretch: normal; }
.cfg-facts__variants { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cfg-facts__variants li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--dh-r-sm); background: var(--dh-surface-sunken); font-weight: 600; font-size: var(--dh-fs-sm); }
.cfg-facts__variants small { font-weight: 400; color: var(--dh-text-muted); font-size: var(--dh-fs-xs); }
.cfg-facts__list { display: grid; gap: 10px; margin: 0; }
.cfg-facts__list > div { display: grid; gap: 2px; }
.cfg-facts__list dt { font-size: var(--dh-fs-xs); color: var(--dh-text-muted); }
.cfg-facts__list dd { margin: 0; font-size: var(--dh-fs-sm); font-weight: 600; }
.cfg-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-choice > legend { padding: 0; margin-bottom: 8px; }
.cfg-choice .chips { gap: 8px; }
.cfg-others__title { font-size: var(--dh-fs-xl); margin-bottom: var(--dh-space-4); }
.cfg-others { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cfg-others__link { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--dh-r-md); text-decoration: none; color: var(--dh-text); background: var(--dh-surface); box-shadow: var(--dh-ring-shell); transition: box-shadow var(--dh-dur-base) var(--dh-ease-out); }
.cfg-others__link:hover { box-shadow: var(--dh-ring-shell), var(--dh-shadow-2); color: var(--dh-text); }
.cfg-others__link > .icon { color: var(--dh-accent-icon); transition: transform var(--dh-dur-base) var(--dh-ease-spring); }
.cfg-others__link:hover > .icon { transform: translateX(3px); }
.cfg-others__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--dh-accent-wash); color: var(--dh-gloed-700); }
.cfg-others__link strong { display: block; font-size: var(--dh-fs-sm); }
.cfg-others__link small { display: block; font-size: var(--dh-fs-xs); color: var(--dh-text-muted); }

/* ---------------------------------------------------------------- keuzehulp */
.cfg-finder .container { display: grid; gap: var(--dh-space-7); }
.cfg-quiz { display: grid; gap: var(--dh-space-6); }
.cfg-quiz__steps { max-width: 720px; }
.cfg-quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--dh-space-4); }
.cfg-quiz.is-stepper .cfg-quiz__q:not(.is-active) { display: none; }
.cfg-quiz.is-stepper .cfg-quiz__q.is-active { animation: cfg-in var(--dh-dur-slow) var(--dh-ease-out); }
.cfg-quiz__legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: var(--dh-space-4); font-family: var(--dh-font-display); font-stretch: var(--dh-stretch-label); font-weight: 650; font-size: var(--dh-fs-xl); line-height: 1.2; }
.cfg-quiz__n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--dh-veen-900); color: var(--dh-goud-300); font-size: var(--dh-fs-xs); font-weight: 500; }
.cfg-quiz__options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.cfg-quiz__options--toepassing, .cfg-quiz__options--veen, .cfg-quiz__options--levering { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.cfg-quiz__nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cfg-quiz.is-stepper [data-quiz-submit][hidden] { display: none; }
.cfg-finder__quiz { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--dh-r-xl); background: var(--dh-surface); box-shadow: var(--dh-ring-shell), var(--dh-shadow-1); }
details.cfg-finder__quiz { padding: 0; }
details.cfg-finder__quiz > .cfg-quiz { padding: 0 clamp(1.25rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.cfg-finder__toggle { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 clamp(1.25rem, 1rem + 1.5vw, 2.25rem); font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--dh-r-xl); }
.cfg-finder__toggle::-webkit-details-marker { display: none; }
.cfg-finder__toggle .icon { color: var(--dh-accent-icon); }
.cfg-finder__toggle:focus-visible { outline: none; box-shadow: var(--dh-focus-ring); }
.cfg-finder__results { display: grid; gap: var(--dh-space-5); scroll-margin-top: calc(var(--dh-header-offset) + 16px); }
.cfg-finder__results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cfg-finder__results-title { font-size: var(--dh-fs-2xl); margin-bottom: var(--dh-space-3); }
.cfg-answers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cfg-answers__item { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: var(--dh-r-pill); background: var(--dh-surface-sunken); font-size: var(--dh-fs-xs); }
.cfg-answers__item span { color: var(--dh-text-muted); }
.cfg-matches { display: grid; gap: var(--dh-gap); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1024px) { .cfg-matches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cfg-match { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cfg-match__rank { font-size: var(--dh-fs-xs); color: var(--dh-gloed-700); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.cfg-match__reasons { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0 4px; font-size: var(--dh-fs-sm); color: var(--dh-text-2); }
.cfg-match__reasons li { display: flex; gap: 8px; align-items: flex-start; }
.cfg-match__reasons .icon { width: 16px; height: 16px; color: var(--dh-success-text); margin-top: 3px; }
.cfg-finder__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cfg-finder__disclaimer { display: flex; gap: 8px; align-items: flex-start; font-size: var(--dh-fs-sm); color: var(--dh-text-muted); max-width: 80ch; }
.cfg-nomatch { border-radius: var(--dh-r-xl); background: var(--dh-surface); box-shadow: var(--dh-ring-shell); }

/* ---------------------------------------------------------------- aanvraag en bedankt */
.cfg-enquiry .container { display: grid; gap: var(--dh-space-5); }
.cfg-enq-render {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  margin: var(--dh-space-2) 0 calc(-1 * var(--dh-space-5));
  display: grid;
  place-items: end center;
  min-height: 220px;
}
.cfg-enq-render::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 80%; background: var(--dh-glow-sunrise); z-index: -1; }
.cfg-enq-render img { width: auto; max-width: 78%; max-height: 340px; position: relative; top: 4px; }
@media (max-width: 1023.98px) { .cfg-enq-render { min-height: 0; } .cfg-enq-render img { max-height: 200px; } }
/* Productfoto in het paneel (fotolaag) in plaats van de tekening: een afgerond vlak in een vaste verhouding, zodat het
   wisselen van product (bespoke/request-forms.js) niets verschuift. Staat na de regels van de tekening en wint dus. */
.cfg-enq-render--photo {
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  margin: var(--dh-space-2) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--dh-r-md);
  background: var(--dh-surface);
  box-shadow: var(--dh-ring-shell);
}
.cfg-enq-render--photo::before { content: none; }
.cfg-enq-render--photo img { display: block; position: static; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.cfg-enquiry__more { font-size: var(--dh-fs-sm); color: var(--dh-text-muted); }
.cfg-enquiry__more a { color: var(--dh-accent-text); }
.cfg-enquiry .enquiry__title { font-size: var(--dh-fs-2xl); }
.cfg-thanks .container { display: grid; gap: var(--dh-space-5); }
.cfg-thanks__more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.cfg-thanks__call { display: inline-flex; align-items: center; gap: 8px; color: var(--dh-text-2); font-size: var(--dh-fs-sm); }
.cfg-thanks__call .icon { color: var(--dh-accent-icon); }
.cfg-thanks__call a { color: var(--dh-accent-text); }
.cfg-thanks__links { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- print */
@media print {
  .cfg-live, .cfg-steps, .cfg-dock, .cfg-hero__actions, .cfg-calc { display: none !important; }
  .cfg-step { display: grid !important; break-inside: avoid; }
}

/* Ruimte voor de vaste dock onder 1024px, zodat "Volgende" niet onder de dock valt */
@media (max-width: 1023.98px) { .js .cfg__form.is-stepper .cfg__main { padding-bottom: 64px; } }