/*
 * Product Filters block — styles.
 *
 * Layout note: the filter panel is COLLAPSED by default at every screen size,
 * revealed by the "Search & Filter" toggle. There are no breakpoints — the
 * same collapsible, inline-wrapping layout applies everywhere. (Earlier
 * versions had a desktop sidebar vs. mobile toggle split; that's been unified.)
 *
 * CLASS REFERENCE
 * ───────────────
 * .epg-filters                Block wrapper (sticky, frosted bar).
 * .epg-filters-header         Always-visible bar: toggle + count + clear.
 * .epg-filters-toggle         "Search & Filter" open/close button.
 * .epg-filters-toggle-icon    Chevron (rotates when open).
 * .epg-filters-header-actions Count + clear grouping.
 * .epg-filters-body           Collapsible panel: search + groups. Hidden until open.
 * .epg-filters--open          Modifier on .epg-filters when the panel is open.
 * .epg-filters-search         Search field row.
 * .epg-filter-search          The <input type="search">.
 * .epg-filters-groups         Inline, wrapping row of taxonomy groups.
 * .epg-filter-group           One taxonomy <fieldset>.
 * .epg-filter-group-title     Taxonomy <legend>.
 * .epg-filter-terms           Term <ul> — inline wrapping (nested for children).
 * .epg-filter-term            Term <li>.
 * .epg-filter-term-label      Checkbox <label>.
 * .epg-filter-checkbox        The checkbox input.
 * .epg-filter-term-name       Term name text.
 * .epg-filter-term-count      Live product count badge.
 * .epg-filter-count           aria-live result count / no-results message.
 * .epg-filter-clear           "Clear all" button.
 *
 * .epg-hidden                 Applied to loop items filtered out.
 */

.product-grid-wrapper {
  background: var(--bg-grey);
  padding: 3rem var(--h-spacing);
  display: grid;
  gap: 2rem;
}

.product-grid-wrapper .wc-block-product-template__responsive {
  grid-template-columns: repeat( auto-fill, minmax(300px, 1fr) ) !important;
  gap: 1rem !important;
}

.epg-hidden {
  display: none !important;
}

/* ── Filter bar (sticky, frosted) ────────────────────────────────────────── */

.epg-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 6.5rem;
  z-index: 100;
  padding: 1rem var(--h-spacing);
  margin-inline: calc( var(--h-spacing) * -1);
  margin-top: -3rem;
  margin-bottom: 1.5rem;
  background: rgba(195, 207, 212, .75);
  -webkit-backdrop-filter: saturate(250%) blur(1em);
  backdrop-filter: saturate(250%) blur(1em);
}

/* ── Header bar (always visible): toggle + count + clear ─────────────────── */

.epg-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.epg-filters-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.epg-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  height: 2.5rem;
  padding: .25rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue, #0050c8);
  background: #fff;
  border: 1px solid var(--wp--preset--color--black-40);
  border-radius: 2rem;
  box-shadow: var(--component-box-shadow);
}

/* Chevron that rotates when open. */
.epg-filters-toggle-icon {
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -.25rem;
}
.epg-filters--open .epg-filters-toggle-icon {
  transform: rotate(-135deg);
  margin-top: .15rem;
}

/* ── Collapsible body ────────────────────────────────────────────────────── */
/* Hidden by default at every size; shown when .epg-filters--open is set. */

.epg-filters-body {
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.epg-filters--open .epg-filters-body {
  display: flex;
}

/* ── Search ──────────────────────────────────────────────────────────────── */

.epg-filter-search {
  width: 100%;
  box-sizing: border-box;
  height: 2.5rem;
  padding: .5rem .75rem;
  font-size: 16px;
  line-height: 1.5rem;
  color: black;
  background-color: #fff;
  border: 1px solid var(--wp--preset--color--black-40);
  border-radius: .25rem;
  box-shadow: var(--component-box-shadow);
}

/* ── Taxonomy groups (inline, wrapping) ──────────────────────────────────── */

.epg-filters-groups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.epg-filter-group {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}

.epg-filter-group-title {
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: .875em;
}

/* Terms flow inline and wrap rather than stacking in a column. */
.epg-filter-terms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0;
  padding: 0;
}
.epg-filter-term {
  flex: 0 0 auto;   /* size to content so multiple fit per row */
}
/* Keep nested (child) terms grouped with their parent on their own line. */
.epg-filter-terms .epg-filter-terms {
  flex-basis: 100%;
  padding-left: 1rem;
}

.epg-filter-term-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0;
  font-size: .75em;
  cursor: pointer;
}

.epg-filter-checkbox {
  cursor: pointer;
}

.epg-filter-term-count {
  font-size: .75em;
  opacity: .6;
}
.epg-filter-term-count:not(:empty)::before { content: "("; }
.epg-filter-term-count:not(:empty)::after  { content: ")"; }

/* ── Count + clear (in the header bar) ───────────────────────────────────── */

.epg-filter-count {
  font-size: .875em;
}

.epg-filter-clear {
  cursor: pointer;
  height: 2rem;
  padding: .25rem .75rem;
  line-height: 1.5rem;
  font-size: .75rem;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 2rem;
  box-shadow: var(--component-box-shadow);
}
.epg-filter-clear[hidden] {
  display: none !important;
}
.epg-filter-clear:not([hidden]) {
  display: inline-flex;
}