/*
 * wavePRESS — filters.css
 *
 * Product filters (inc/product-filters.php): only loaded on the shop, product
 * category / tag pages and product search, when the filters are switched on.
 *
 *  1. Layout: sidebar or top bar on computers
 *  2. Filter groups and options
 *  3. Price slider and boxes
 *  4. Bar above the products: count, sorting, chips
 *  5. Top bar dropdowns (computers)
 *  6. Phones and tablets: the Filters panel
 *
 * html.wavepress-js is set by a one-line script in <head> (inc/product-filters.php),
 * so the JavaScript layout (the phone panel off-screen, the price slider) is in
 * place from the first paint and nothing slides or jumps as the page loads.
 * Without it (no JavaScript) the
 * filters are a plain form above the products on phones, with an Apply button.
 */

/* ── 1. Layout ────────────────────────────────────────────────────────────── */

.shop-filters-layout {
  --filters-gap: var(--space-2xl);
  --filters-option-height: 2.75rem; /* 44px tap targets */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 1025px) {
  .shop-filters-layout--sidebar {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--filters-gap);
  }
}

.shop-filters-results {
  min-width: 0;
  scroll-margin-top: calc(var(--header-height) + var(--admin-bar-offset, 0px) + var(--space-md));
  transition: opacity 0.2s ease;
}

.shop-filters-results[aria-busy="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.shop-filters {
  min-width: 0;
}

.shop-filters__form {
  margin: 0;
}

.shop-filters__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.shop-filters__title {
  margin: 0;
  font-size: 1.25rem;
}

.shop-filters__clear-link {
  margin-left: auto;
  font-size: var(--font-size-sm);
}

.shop-filters__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 -0.6rem 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.shop-filters__close:hover,
.shop-filters__close:focus-visible {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.shop-filters__close .wavepress-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.shop-filters__foot {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

#page .shop-filters__foot .button {
  margin: 0;
  padding-inline: 0.75em;
  text-align: center;
  white-space: nowrap;
}

#page .shop-filters__reset {
  flex: 1;
}

#page .shop-filters__apply {
  flex: 2;
}

/* With JavaScript the products update as you tick, so no Apply button on computers */
.wavepress-js .shop-filters-layout .shop-filters__foot {
  display: none;
}

/* ── 2. Filter groups and options ─────────────────────────────────────────── */

.shop-filter {
  border-bottom: 1px solid var(--color-border);
}

.shop-filter__summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  list-style: none;
}

.shop-filter__summary::-webkit-details-marker {
  display: none;
}

.shop-filter__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.shop-filter__name {
  flex: none;
}

/* What's picked, e.g. "Apparel": shown in the top bar and the phone panel */
.shop-filter__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-body);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-filter__summary .wavepress-icon {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.shop-filter[open] > .shop-filter__summary .wavepress-icon {
  transform: rotate(180deg);
}

/* Sidebar: what's picked shows beside a folded group's name, and hides once it's open */
@media (min-width: 1025px) {
  .shop-filters-layout--sidebar .shop-filter[open] > .shop-filter__summary .shop-filter__value {
    display: none;
  }
}

.shop-filter__content {
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--space-md);
  border: 0;
}

.shop-filter__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--filters-option-height);
  padding-left: calc(var(--depth, 0) * 1.25rem);
  cursor: pointer;
  line-height: 1.3;
}

.shop-filter__option input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0.25rem 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.shop-filter__label {
  flex: 1;
  min-width: 0;
}

.shop-filter__count {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── 3. Price slider and boxes ────────────────────────────────────────────── */

.price-slider {
  --from: 0%;
  --to: 100%;
  position: relative;
  height: var(--filters-option-height);
  margin: 0 0.7rem;
}

html:not(.wavepress-js) .price-slider {
  display: none;
}

.price-slider__track {
  position: absolute;
  inset: 50% 0 auto;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--color-border);
}

.price-slider__range {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from);
  right: calc(100% - var(--to));
  border-radius: inherit;
  background: var(--color-primary);
}

/* Two range inputs stacked on one track: only their thumbs take clicks */
.price-slider__thumb {
  position: absolute;
  inset: 0 -0.7rem;
  width: calc(100% + 1.4rem);
  height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-slider__thumb::-webkit-slider-runnable-track {
  height: 100%;
  background: none;
}

.price-slider__thumb::-moz-range-track {
  background: none;
}

.price-slider__thumb::-webkit-slider-thumb {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: calc((var(--filters-option-height) - 1.4rem) / 2);
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-bg);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.price-slider__thumb::-moz-range-thumb {
  box-sizing: border-box;
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-bg);
  cursor: grab;
  pointer-events: auto;
}

.price-slider__thumb:focus-visible {
  outline: none;
}

.price-slider__thumb:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.price-slider__thumb:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.price-inputs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* min-width: 0 all the way down, or number boxes keep their default width and
   spill out of narrow sidebars */
.price-inputs__field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.price-inputs__box {
  position: relative;
  display: block;
  min-width: 0;
}

.price-inputs__symbol {
  position: absolute;
  top: 50%;
  left: 0.75em;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  pointer-events: none;
}

#page .price-inputs input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--filters-option-height);
  padding: 0.5em 0.5em 0.5em 1.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: max(16px, var(--font-size-base)); /* 16px+ stops iOS zooming in */
  -moz-appearance: textfield;
}

#page .price-inputs input::-webkit-inner-spin-button,
#page .price-inputs input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.price-inputs__sep {
  padding-bottom: 0.7rem;
}

/* ── 4. Bar above the products ────────────────────────────────────────────── */

.shop-filters-bar {
  display: flex;
  flex-direction: column-reverse; /* chips first on computers */
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.shop-filters-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

/* Computers: just more items in the row (phones: a line of their own, below) */
.shop-filters-bar__meta {
  display: contents;
}

#page .shop-filters-bar :is(.woocommerce-result-count, .woocommerce-ordering) {
  float: none;
  margin: 0;
}

#page .shop-filters-bar .woocommerce-result-count {
  padding-top: 0;
}

#page .shop-filters-bar .woocommerce-ordering {
  margin-left: auto;
}

.shop-filters-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--color-text);
  border-radius: var(--button-radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
}

.shop-filters-toggle .wavepress-icon {
  width: 1rem;
  height: 1rem;
}

.shop-filters-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 0.7rem;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.8rem;
  line-height: 1;
}

.shop-filters-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-filters-chips li {
  margin: 0;
}

.shop-filters-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.9rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  text-decoration: none;
}

.shop-filters-chip:hover,
.shop-filters-chip:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
  color: var(--color-text);
}

.shop-filters-chip .wavepress-icon {
  width: 0.7rem;
  height: 0.7rem;
}

.shop-filters-clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-left: var(--space-xs);
  font-size: var(--font-size-sm);
}

/* No matches: the bar and WooCommerce's notice sit together */
.shop-filters-results .woocommerce-info + .shop-filters-bar,
.shop-filters-results .shop-filters-bar:has(+ .woocommerce-info) {
  margin-bottom: var(--space-md);
}

/* ── 5. Top bar dropdowns (computers) ─────────────────────────────────────── */

@media (min-width: 1025px) {
  .shop-filters-layout--top .shop-filters__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .shop-filters-layout--top .shop-filters__body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .shop-filters-layout--top .shop-filter {
    position: relative;
    border: 0;
  }

  .shop-filters-layout--top .shop-filter__summary {
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    font-family: var(--font-body);
    font-weight: 700;
  }

  .shop-filters-layout--top .shop-filter[open] > .shop-filter__summary,
  .shop-filters-layout--top .shop-filter__summary:hover {
    border-color: var(--color-text);
  }

  .shop-filters-layout--top .shop-filter__value {
    max-width: 10rem;
    text-align: left;
  }

  .shop-filters-layout--top .shop-filter__value:not(:empty)::before {
    content: "· ";
  }

  .shop-filters-layout--top .shop-filter__content {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    width: max-content;
    min-width: 16rem;
    max-width: 22rem;
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  }

  .shop-filters-layout--top .shop-filter__price {
    width: 18rem;
    padding-bottom: var(--space-md);
  }

  /* No JavaScript: the Apply button sits at the end of the row */
  html:not(.wavepress-js) .shop-filters-layout--top .shop-filters__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  html:not(.wavepress-js) .shop-filters-layout--top .shop-filters__foot {
    margin: 0;
  }
}

/* ── 6. Phones and tablets: the Filters panel ─────────────────────────────── */

@media (max-width: 1024px) {
  .shop-filters-layout {
    gap: 0;
  }

  /* No JavaScript: the form sits above the products */
  html:not(.wavepress-js) .shop-filters-layout .shop-filters {
    margin-bottom: var(--space-xl);
  }

  .wavepress-js .shop-filters-layout .shop-filters-toggle {
    display: inline-flex;
  }

  .shop-filters-bar {
    flex-direction: column;
  }

  /* The count (and the grid / list buttons beside it) on a line of their own */
  .shop-filters-bar__meta {
    display: flex;
    order: 3;
    flex-basis: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  /* Filters button and sorting share the row equally */
  #page .shop-filters-bar .woocommerce-ordering {
    flex: 1 1 0;
    min-width: 0;
  }

  #page .shop-filters-bar .woocommerce-ordering select {
    width: 100%;
    padding-left: 0.75em;
    padding-right: 1.75em;
    text-overflow: ellipsis;
  }

  .wavepress-js .shop-filters-toggle {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.75rem;
  }

  /* Chips scroll sideways in one line instead of pushing the products down */
  .shop-filters-chips {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .shop-filters-chips::-webkit-scrollbar {
    display: none;
  }

  .shop-filters-chip,
  .shop-filters-clear {
    white-space: nowrap;
  }

  /* The panel */
  .wavepress-js .shop-filters {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    width: min(380px, 88vw);
    max-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
  }

  .wavepress-js .shop-filters-panel--bottom .shop-filters {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 85dvh;
    border-radius: 1.1rem 1.1rem 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
  }

  .wavepress-js .shop-filters-layout.is-open .shop-filters {
    visibility: visible;
    transform: none;
    transition: transform 0.25s ease-out, visibility 0s;
  }

  .wavepress-js .shop-filters__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .wavepress-js .shop-filters__head {
    position: relative;
    flex: none;
    margin: 0;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
  }

  /* Bottom sheet: a grab handle to swipe it down */
  .wavepress-js .shop-filters-panel--bottom .shop-filters__head {
    padding-top: 1.1rem;
    touch-action: none;
  }

  .wavepress-js .shop-filters-panel--bottom .shop-filters__head::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 2.5rem;
    height: 0.3rem;
    margin-left: -1.25rem;
    border-radius: 0.15rem;
    background: var(--color-border);
  }

  .wavepress-js .shop-filters__clear-link {
    display: none;
  }

  .wavepress-js .shop-filters__close {
    display: inline-flex;
  }

  .wavepress-js .shop-filters__body {
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-lg) var(--space-md);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .wavepress-js .shop-filters-layout .shop-filters__foot {
    display: flex;
    flex: none;
    margin: 0;
    padding: var(--space-md) var(--space-lg) max(var(--space-md), env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .shop-filters-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .is-open > .shop-filters-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
  }

  html.shop-filters-open {
    overflow: hidden;
  }
}

/* Computers never show the panel's overlay */
@media (min-width: 1025px) {
  .shop-filters-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-filters,
  .shop-filters-overlay,
  .shop-filters-results,
  .shop-filter__summary .wavepress-icon {
    transition: none !important;
  }

  .wavepress-js .shop-filters {
    transform: none !important;
  }

  .wavepress-js .shop-filters-layout.is-open .shop-filters {
    animation: wavepress-fade-in 0.2s ease-out;
  }
}

/* Cartoon button style: chunky outlines, same as the mini cart */
.wavepress-btn-cartoon .shop-filters-chip,
.wavepress-btn-cartoon .shop-filters-toggle {
  border-width: 2px;
  border-color: var(--ink);
}