/* Collection filters — client-side WatchMod */

.wm-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cats-gap, 1.2rem);
  align-items: stretch;
}

.wm-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--color-ink, #000) 14%, transparent);
  background: var(--color-glass-40, color-mix(in srgb, #fff 40%, transparent));
  border-radius: var(--radius-md, 0.4rem);
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  color: inherit;
  font: inherit;
}

.wm-chip .cat__label {
  display: block;
}

.wm-chip .cat__count {
  opacity: 0.55;
  font-size: var(--fs-eyebrow, 1.1rem);
}

.wm-chip.is-active {
  background: var(--color-ink, #000);
  border-color: var(--color-ink, #000);
  color: var(--color-bg, #fff);
}

.wm-chip.is-active .cat__count {
  opacity: 0.7;
  color: inherit;
}

.wm-filters-empty {
  grid-column: 1 / -1;
  margin: 2.4rem 0;
  opacity: 0.7;
}

.filter-drawer__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 0.8rem);
  padding: var(--space-3, 1.2rem);
  margin-block-start: auto;
  border-block-start: 1px solid color-mix(in srgb, var(--color-ink, #000) 10%, transparent);
}

.collection-filterbar__sortopt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.8rem 1.2rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.collection-filterbar__sortopt.is-active {
  font-weight: 600;
}

.collection-filterbar__sortopt:hover {
  background: color-mix(in srgb, var(--color-ink, #000) 6%, transparent);
}

[data-wm-card][hidden] {
  display: none !important;
}

/* Sort menu above grid / sticky chrome */
.collection-filterbar__sortmenu {
  z-index: 40;
  max-inline-size: min(33rem, calc(100vw - var(--page-margin, 1.6rem) * 2));
}

/*
  Theme locks scroll with:
    html:has(.drawer[open]) { overflow: hidden }
    body:has(.drawer[open]):after { pointer-events: auto; touch-action: none }
  That lock sticks when DrawerManager and close fight.
  - Intentionally open: html.is-wm-filter-open locks scroll + scrim
  - Stuck open without our class: force unlock so the page stays usable
*/
html:has(.filter-drawer[open]):not(.is-wm-filter-open),
html:has(.filter-drawer[open]):not(.is-wm-filter-open) body {
  overflow: auto !important;
  overscroll-behavior: auto !important;
}

html:not(.is-wm-filter-open) body:has(.filter-drawer[open]):after {
  opacity: 0 !important;
  pointer-events: none !important;
  touch-action: auto !important;
}

/* Owned lock — only while Filtrer is intentionally open */
html.is-wm-filter-open,
html.is-wm-filter-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.is-wm-filter-open body:after {
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}