/* filters — the facet panel of a product list ---------------------------
   One form holds the facets, the sort bar and the grid. .listing frames it:
   the aside stands beside the grid from 64rem up; below that the very same
   aside is the drawer (.drawer, core) the "Filtry" button slides in, so the
   phone and the desktop never draw two panels that could disagree. The
   chips of the active filters are core (.chip). */

.listing {
  display: grid;
  gap: var(--space-6);
}

.listing__main {
  min-width: 0;
}

/* The phone: the aside is the drawer as the menu's is, and its head (title
   and close) shows. */
.listing__aside .drawer__panel {
  gap: var(--space-5);
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.filters__title {
  font-weight: 700;
  font-size: var(--text-lg);
}

.filters__actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* The bar's opener sits with the sort control; the sort bar keeps its flow. */
.filters__open {
  order: -1;
}

/* A facet is a native disclosure: the panel says which start folded, a
   click on the title unfolds, and the browser keeps the state until the
   form is swapped (client.ts puts it back after). */
.facet {
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.facet__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}

.facet__title::-webkit-details-marker {
  display: none;
}

.facet__title:hover {
  color: var(--ink);
}

.facet__title .icon {
  flex: none;
  transition: transform var(--dur-fast);
}

.facet[open] > .facet__title .icon {
  transform: rotate(180deg);
}

.facet:not([open]) > .facet__title {
  margin-bottom: 0;
}

.facet__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.facet__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.facet__option .checkbox {
  flex: 1;
  min-width: 0;
}

.facet__option .checkbox__label {
  font-weight: 500;
}

.facet__count {
  flex: none;
  margin-top: 0.15rem;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.facet__range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2);
  align-items: center;
}

.facet__bound {
  display: block;
  min-width: 0;
}

.facet__bound .field__control {
  width: 100%;
  min-height: 2.5rem;
}

.facet__dash {
  color: var(--ink-muted);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.active-filters__clear {
  margin-inline-start: var(--space-2);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .listing--filters {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  /* The same aside, unwrapped from the drawer: in flow, always visible,
     no backdrop, no head. */
  .listing__aside.drawer {
    position: static;
    inset: auto;
    visibility: visible;
    z-index: auto;
    transition: none;
  }

  .listing__aside .drawer__backdrop,
  .listing__aside .drawer__head {
    display: none;
  }

  .listing__aside .drawer__panel {
    position: static;
    inset: auto;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    overflow: visible;
  }

  .filters__open {
    display: none;
  }

  .facet:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* On a desk the facets apply themselves as they are ticked (client.js), so
   the button under them is the no-script fallback and goes with it. On a
   phone it stays: it is how the drawer is closed with the list applied. */
@media (min-width: 64rem) {
  html.js .filters__apply {
    display: none;
  }
}