/* ==========================================================================
   AtlasKeys — Search / catalog browse
   ========================================================================== */

.search-head { padding-top: calc(var(--nav-h) + var(--space-8)); }
.search-head h1 { font-size: var(--fs-3xl); }
.search-head p { color: var(--color-text-muted); }

.search-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8) var(--space-16);
}

/* ---------- Filters sidebar ---------- */
.filters {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.filters__group { display: flex; flex-direction: column; gap: var(--space-3); }
.filters__group + .filters__group { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.filters__group h3 {
  font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-dim);
}
.filter-opt { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--fs-sm); color: var(--color-text-muted); }
.filter-opt input { accent-color: var(--color-primary); width: 16px; height: 16px; flex: none; }
.filter-opt:hover { color: var(--color-text); }
.filter-opt .count { margin-left: auto; color: var(--color-text-dim); font-size: var(--fs-xs); }

.price-range { display: flex; align-items: center; gap: var(--space-2); }
.price-range .input { padding: 0.5rem 0.6rem; min-height: 40px; text-align: center; }

/* ---------- Results toolbar ---------- */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.results-bar__count { color: var(--color-text-muted); font-size: var(--fs-sm); }
.results-bar__count b { color: var(--color-text); }
.results-controls { display: flex; align-items: center; gap: var(--space-3); }
.results-controls .select { min-height: 42px; width: auto; }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.active-filters:empty { display: none; }
.filter-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.7rem; font-size: var(--fs-xs);
  background: var(--color-primary-soft); color: var(--color-primary-300);
  border-radius: var(--radius-pill);
}
.filter-tag button { color: inherit; display: grid; place-items: center; }
.filter-tag svg { width: 12px; height: 12px; }

/* ---------- Mobile filter toggle ---------- */
.filters-toggle { display: none; }

@media (max-width: 860px) {
  .search-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 340px); z-index: var(--z-modal);
    border-radius: 0; overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-out);
  }
  .filters.is-open { transform: translateX(0); }
  .filters-toggle { display: inline-flex; }
  .filters__close { align-self: flex-end; }
}
@media (min-width: 861px) { .filters__close { display: none; } }