/* Specificatiefilters (filters.js) for Komodo Hardware and Referbo.
   Wide screens: a sticky filter column next to a 3-column product grid. Up to 900 px the column is hidden and the
   "Filters" button opens the same controls in the shop's drawer. Only the shops' own variables are used
   (Komodo --orange = groen #315e45, Referbo --orange = paars #6250d8; --line, --muted, --ink, --brand-* likewise). */

.spec-filter-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.spec-filter-open { display: none; }
/* Chips can wrap once spec filters add a few. */
.active-filters { flex-wrap: wrap; }

/* ---- layout ------------------------------------------------------------------------------------------------------ */
@media (min-width: 901px) {
  .spec-filter-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .spec-filter-layout .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-filter-panel {
    position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; margin-right: -6px; padding: 2px 6px 12px 2px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .spec-filter-layout { grid-template-columns: 214px minmax(0, 1fr); column-gap: 24px; }
}

/* ---- panel head --------------------------------------------------------------------------------------------------- */
.spec-filter-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.spec-filter-titel { margin: 0; color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.2px; }
.spec-filter-titel:focus { outline: none; }
.spec-filter-titel:focus-visible { outline: 3px solid var(--brand-400, var(--orange)); outline-offset: 3px; }
.spec-filter-wis.text-link { color: var(--orange); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.spec-filter-totaal { min-height: 20px; margin: 1px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.spec-filter-leeg { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---- groups ------------------------------------------------------------------------------------------------------- */
.spec-filter-groep { border-top: 1px solid var(--line); }
.spec-filter-groepen > .spec-filter-groep:last-child { border-bottom: 1px solid var(--line); }
.spec-filter-groep > summary {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 46px; padding: 10px 2px;
  color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.35; cursor: pointer; list-style: none;
}
.spec-filter-groep > summary::-webkit-details-marker { display: none; }
.spec-filter-groep > summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 auto;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.spec-filter-groep[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.spec-filter-groep > summary:hover { color: var(--orange); }
.spec-filter-groep-naam { min-width: 0; }
.spec-filter-basis { color: var(--muted); font-size: 12px; font-weight: 600; }
.spec-filter-gekozen {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
.spec-filter-inhoud { padding: 0 0 12px; }
.spec-filter-hint { margin: -2px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.spec-filter-opties { display: grid; gap: 1px; }

/* One option: native checkbox or radio in the shop's accent colour, label, number of products. */
.spec-filter-optie {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 2px;
  color: var(--ink); font-size: 14px; line-height: 1.35; cursor: pointer;
}
.spec-filter-optie input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.spec-filter-optie input:focus-visible { outline-offset: 2px; }
.spec-filter-optie-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.spec-filter-aantal { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.spec-filter-optie:hover .spec-filter-optie-tekst { color: var(--orange); }
.spec-filter-optie.is-leeg { color: var(--muted); cursor: default; opacity: .6; }
.spec-filter-optie.is-leeg:hover .spec-filter-optie-tekst { color: inherit; }
.spec-filter-optie.is-leeg input { cursor: default; }
/* Single switches (Windows 11, op voorraad) sit between the groups without a heading. */
.spec-filter-schakel .spec-filter-optie { min-height: 46px; font-weight: 650; }

/* ---- price: two fields and a two-handle slider -------------------------------------------------------------------- */
.spec-filter-prijs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.spec-filter-prijs-veld { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.spec-filter-prijs-streep { padding-bottom: 9px; color: var(--muted); }
.spec-filter-euro {
  display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--paper, #fff); color: var(--muted); font-size: 14px; font-weight: 600;
}
.spec-filter-euro:focus-within { border-color: var(--orange); outline: 2px solid var(--brand-400, var(--orange)); outline-offset: 1px; }
.spec-filter-euro input {
  width: 100%; min-width: 0; padding: 7px 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.spec-filter-euro input:focus, .spec-filter-euro input:focus-visible { outline: none; }
.spec-filter-euro input::-webkit-outer-spin-button, .spec-filter-euro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.spec-filter-schuif { position: relative; height: 30px; margin: 10px 11px 0; }
.spec-filter-schuif::before, .spec-filter-schuif-bereik { content: ''; position: absolute; top: 13px; height: 4px; border-radius: 2px; }
.spec-filter-schuif::before { left: 0; right: 0; background: var(--line); }
.spec-filter-schuif-bereik { left: 0; right: 0; background: var(--orange); }
.spec-filter-schuif input[type="range"] {
  position: absolute; top: 0; left: -11px; width: calc(100% + 22px); height: 30px; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.spec-filter-schuif input[type="range"]:focus, .spec-filter-schuif input[type="range"]:focus-visible { outline: none; }
.spec-filter-schuif input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: transparent; border: 0; }
.spec-filter-schuif input[type="range"]::-moz-range-track { height: 30px; background: transparent; border: 0; }
.spec-filter-schuif input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; box-sizing: border-box; width: 22px; height: 22px; margin-top: 4px;
  border: 2px solid var(--orange); border-radius: 50%; background: var(--paper, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); cursor: grab;
}
.spec-filter-schuif input[type="range"]::-moz-range-thumb {
  pointer-events: auto; box-sizing: border-box; width: 22px; height: 22px;
  border: 2px solid var(--orange); border-radius: 50%; background: var(--paper, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); cursor: grab;
}
.spec-filter-schuif input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.spec-filter-schuif input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--paper, #fff), 0 0 0 5px var(--brand-400, var(--orange)); }
.spec-filter-schuif input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--paper, #fff), 0 0 0 5px var(--brand-400, var(--orange)); }

/* ---- chips in #active-filters ------------------------------------------------------------------------------------- */
.spec-filter-chip { display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; line-height: 1.4; cursor: pointer; transition: border-color .15s, color .15s; }
.spec-filter-chip:hover { border-color: var(--orange); color: var(--orange); }
.spec-filter-chip-x { font-size: 1.25em; line-height: 1; }

/* ---- narrow screens: "Filters" button and drawer ----------------------------------------------------------------- */
@media (max-width: 900px) {
  .spec-filter-panel { display: none; }
  .spec-filter-open {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--paper, #fff); color: var(--ink);
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer;
  }
  .spec-filter-open:hover { border-color: var(--orange); color: var(--orange); }
  .spec-filter-open i { width: 16px; height: 16px; }
  .spec-filter-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800;
  }
  .spec-filter-chip { min-height: 32px; }
}
@media (max-width: 400px) {
  .spec-filter-open { min-height: 38px; padding: 7px 11px; font-size: 12px; gap: 6px; }
}

.spec-filter-lade .spec-filter-totaal { margin-top: -6px; }
.spec-filter-lade .spec-filter-groep > summary { min-height: 50px; font-size: 15px; }
.spec-filter-lade .spec-filter-optie { min-height: 44px; font-size: 15px; }
.spec-filter-lade .spec-filter-schakel .spec-filter-optie { min-height: 50px; }
.spec-filter-lade .spec-filter-aantal { font-size: 13px; }
.spec-filter-lade-voet {
  position: sticky; bottom: 0; z-index: 1; display: flex; gap: 10px; margin-top: 18px; padding: 12px 0;
  border-top: 1px solid var(--line); background: var(--bg, #fff);
  /* The drawer has bottom padding: paint it too, so options do not show through below the buttons while scrolling. */
  box-shadow: 0 32px 0 var(--bg, #fff);
}
.spec-filter-lade-voet .button { flex: 1 1 auto; min-height: 46px; padding: 10px 14px; font-size: 14px; font-weight: 700; gap: 8px; }
.spec-filter-lade-voet .button-outline { flex: 0 0 auto; background: var(--paper, #fff); color: var(--ink); }
.spec-filter-lade-voet .button:disabled { opacity: .55; cursor: default; }

@media (forced-colors: active) {
  .spec-filter-schuif::before { background: CanvasText; }
  .spec-filter-schuif-bereik { background: Highlight; }
  .spec-filter-gekozen, .spec-filter-count { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-filter-groep > summary::after, .spec-filter-chip { transition: none; }
}