/* -- Filter Sidebar (website · Search & Navigation) -----------------------
   Groups detailed filtering controls beside a collection - categories with counts, a price range, colors, rating and availability, each group collapsible. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-filter-sidebar, .mk-filter-sidebar *, .mk-filter-sidebar ::before, .mk-filter-sidebar ::after) { box-sizing: border-box; }

  .mk-filter-sidebar { width: 100%; max-width: 17rem;
    & form { display: grid; }
  }
  .mk-filter-sidebar-head { display: flex; align-items: baseline; justify-content: space-between; padding-block-end: 0.75rem;
    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & a { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-filter-sidebar-group { padding-block: 0.875rem; border-block-start: 1px solid var(--border);
    & > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 0.875rem; font-weight: 600; list-style: none; }
    & > summary::-webkit-details-marker { display: none; }
    & > summary::after { content: "+"; color: var(--muted-foreground); font-weight: 400; }
    &[open] > summary::after { content: "−"; }
    & > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & > div { display: grid; gap: 0.5rem; padding-block-start: 0.75rem; }
    & fieldset { display: contents; }
    & legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  .mk-filter-sidebar-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer;
    & small { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
  }
  .mk-filter-sidebar-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & .input { height: 2rem; font-size: 0.8125rem; }
  }
  .mk-filter-sidebar-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mk-filter-sidebar-swatch { --mk-swatch: var(--muted); position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--mk-swatch); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15); cursor: pointer;
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    &:has(:checked) { outline: 2px solid var(--foreground); outline-offset: 2px; }
    &:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-filter-sidebar-stars { color: oklch(0.78 0.16 75); letter-spacing: 0.0625rem; }
  .mk-filter-sidebar-apply { margin-block-start: 1rem; }

  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-filter-sidebar-swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
    .mk-filter-sidebar-swatch:has(:checked) { outline-color: Highlight; }
  }
}