/* Dutch Horizon M4 drop-in (altijd geladen): schuifjes van de configurator en de home-teaser bespoke/mini.js.
   Prefix cfg-. Eigenaar: M4. Klein gehouden; de rest van de configurator staat in css/bespoke.css. */

/* Schuifjes (DESIGN §6.11): track 6px, gevuld deel in de materiaalkleur, duim 22px mist-50 */
.cfg-range {
  --_pct: 0%;
  --_fill: var(--dh-mat, var(--dh-goud-300));
  --_track: color-mix(in srgb, var(--dh-mist-50) 14%, transparent);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 6px 0 0;
  background: transparent;
  cursor: pointer;
}
.cfg-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--_fill) 0 var(--_pct), var(--_track) var(--_pct) 100%); }
.cfg-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--_track); }
.cfg-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--_fill); }
.cfg-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 0;
  background: var(--dh-mist-50); box-shadow: 0 0 0 0 rgb(234 193 127 / 0), 0 2px 6px rgb(26 18 13 / 0.5);
  transition: box-shadow var(--dh-dur-base) var(--dh-ease-out), transform var(--dh-dur-fast) var(--dh-ease-spring);
}
.cfg-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--dh-mist-50); box-shadow: 0 2px 6px rgb(26 18 13 / 0.5); }
.cfg-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgb(234 193 127 / 0.18), 0 2px 6px rgb(26 18 13 / 0.5); }
.cfg-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.cfg-range:focus-visible { outline: none; }
.cfg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--dh-veen-900), 0 0 0 5px var(--dh-focus); }
.cfg-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--dh-veen-900), 0 0 0 5px var(--dh-focus); }
.cfg-range:disabled { cursor: not-allowed; opacity: 0.4; }

/* Home-teaser (bespoke/mini.js): drie schuifjes op de preset van een teelt */
.cfg-mini { display: grid; gap: 14px; }
.cfg-mini__row { display: grid; gap: 2px; }
.cfg-mini__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-mini__label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--dh-fs-sm); }
.cfg-mini__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cfg-mini__out { font-size: var(--dh-fs-sm); color: var(--dh-text); min-width: 4ch; text-align: right; }