/* ==========================================================================
   Store — product grid
   ========================================================================== */

.store-content {
  width: 100%;
  max-width: 1600px;
  /* .hero-header is now permanently position: fixed and always solid, so
     it always covers whatever sits at the very top of the viewport. This
     needs to clear its full height (space-5 padding-top + space-6 icon
     button = 56px) plus a little breathing room, or the toolbar renders
     partly hidden underneath it. */
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  color: var(--color-black);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  text-align: left;
}

/* ---- Toolbar ---- */

.store-toolbar {
  /* Pinned directly beneath the fixed .hero-header (56px = space-5 padding
     + space-6 icon button, the header's own rendered height) so it stays
     visible while the user scrolls deep into the grid. An explicit height
     (rather than letting padding + button content set it implicitly)
     makes the toolbar's total rendered size a deterministic, token-derived
     value that .active-filters below can reference exactly. */
  position: sticky;
  top: calc(var(--space-5) + var(--space-6));
  z-index: var(--z-sticky-3);
  height: calc(var(--space-8) + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background-color: var(--color-white, #ffffff);
}

.store-toolbar__btn {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: var(--color-white, #ffffff);
  color: var(--color-black, #000000);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-grey-300);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.store-toolbar__btn:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.store-toolbar__btn:active {
  transform: scale(0.97);
}

.store-toolbar__btn:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* ---- Sort control: mobile bottom sheet / desktop dropdown ---- */

.sort-control {
  position: relative;
}

.sort-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: transparent;
  visibility: hidden;
}

.sort-backdrop.is-open {
  visibility: visible;
}

.sort-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white, #ffffff);
  color: var(--color-black);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease, visibility 0.3s ease;
}

.sort-panel.is-open {
  visibility: visible;
  transform: translateY(0);
}

.sort-option-list {
  padding: var(--space-4);
  overflow-y: auto;
}

/* Desktop: a small dropdown anchored beneath the Sort button instead of a
   full sheet — same min-width the rest of the store UI treats as "desktop". */
@media (min-width: 1100px) {
  .sort-panel {
    position: absolute;
    left: 0;
    right: auto;
    bottom: auto;
    top: calc(100% + var(--space-2));
    max-height: none;
    width: calc(var(--space-9) * 3);
    border: 1px solid var(--color-grey-200);
    transform: translateY(calc(-1 * var(--space-2)));
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  }

  .sort-panel.is-open {
    transform: translateY(0);
    opacity: 1;
  }
}

.store-toolbar__count {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-grey-500);
}

/* ---- Active filter pills ---- */

.active-filters {
  /* Pinned beneath the fixed header (56px = space-5 + space-6) plus the
     sticky toolbar directly above — same height expression as
     .store-toolbar's own explicit height, so this stays exact if that
     one ever changes. */
  position: sticky;
  top: calc(var(--space-5) + var(--space-6) + var(--space-8) + var(--space-2));
  z-index: var(--z-sticky-2);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0 var(--space-4) var(--space-4);
  background-color: var(--color-white, #ffffff);
}

.active-filters[hidden] {
  display: none;
}

.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-black);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-black);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.active-filter-pill:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.active-filter-pill__remove {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: 1;
  color: inherit;
}

.active-filter-pill__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---- Active search indicator ----
   Deliberately its own container, separate from #active-filters — that
   one is fully re-rendered by filter-sort.js on every filter change
   (renderActiveFilterPills), so anything injected into it would get wiped
   out the next time a filter pill is added/removed. Kept non-sticky
   (unlike .active-filters) since it only needs to be visible where it
   sits in the flow, not pinned while scrolling through the grid. */

.active-search {
  padding: 0 var(--space-4) var(--space-4);
}

.active-search[hidden] {
  display: none;
}

.active-search-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-black);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.active-search-pill:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.active-search-pill__query {
  font-weight: var(--font-weight-bold);
}

.active-search-pill__remove {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: 1;
  color: inherit;
}

.active-search-pill__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---- Grid ---- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-3);
  padding: 0 var(--space-4) var(--space-7);
}

@media (min-width: 700px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ultra-wide: .store-content is capped at max-width: 1600px, so beyond
   this point extra viewport width would otherwise just inflate 4 already-
   large cards rather than showing more of the catalogue — a 5th column
   keeps card size reasonable instead of looking sparse/oversized. */
@media (min-width: 1600px) {
  .product-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---- Load More ---- */

.store-load-more {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-4) var(--space-8);
}

.store-load-more[hidden] {
  display: none;
}

.store-load-more .state-retry:disabled {
  background-color: var(--color-grey-300);
  border-color: var(--color-grey-300);
  color: var(--color-white);
  cursor: not-allowed;
}

.store-status-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.store-status {
  color: var(--color-grey-500);
  font-size: var(--font-size-sm);
}

/* ---- Product card ---- */

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

.product-card:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.product-card__media {
  position: relative;
  background-color: var(--color-grey-50);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image {
  transform: scale(1.04);
}

.product-card:active .product-card__image {
  transform: scale(1.01);
}

.product-card__tag {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: var(--space-1) var(--space-2);
}

.product-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
}

.product-card__price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}

/* ---- Filter panel ---- */

.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-backdrop.is-open {
  opacity: 0.4;
  visibility: visible;
}

.filter-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  color: var(--color-black);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.filter-panel.is-open {
  visibility: visible;
  transform: translateY(0);
}

/* ---- Level viewport: Level 1 (main menu) stays put; whichever Level 2
   drill-down is active slides in from the right to cover it. Both levels
   are confined to this box, so on desktop (where .filter-panel is a
   narrower sidebar, see media query below) the drill-down naturally slides
   in within the sidebar's own bounds rather than the whole screen. ---- */

.filter-levels {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.filter-level {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  transition: transform 0.3s ease;
}

.filter-level--main {
  transform: translateX(0);
  z-index: 1;
}

.filter-level--detail {
  transform: translateX(100%);
  z-index: 2;
}

.filter-levels[data-active-level='gender_age'] .filter-level--detail[data-filter-group='gender_age'],
.filter-levels[data-active-level='price'] .filter-level--detail[data-filter-group='price'],
.filter-levels[data-active-level='style'] .filter-level--detail[data-filter-group='style'] {
  transform: translateX(0);
}

.filter-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-grey-200);
  flex-shrink: 0;
}

.filter-panel__title {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter-panel__header-spacer,
.filter-panel__icon-btn {
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
}

.filter-panel__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transition: opacity 0.15s ease;
}

.filter-panel__icon-btn:hover {
  opacity: 0.6;
}

.filter-panel__icon-btn:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.filter-panel__icon-btn svg {
  width: var(--space-4);
  height: var(--space-4);
}

.filter-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-4);
}

/* ---- Level 1: menu list ---- */

.filter-menu {
  display: flex;
  flex-direction: column;
}

.filter-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-grey-100);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  text-align: left;
  transition: opacity 0.15s ease;
}

.filter-menu__item:hover {
  opacity: 0.6;
}

.filter-menu__item:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: -2px;
}

.filter-menu__chevron {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-grey-400);
}

/* ---- Level 2: radio / checkbox option lists ---- */

.filter-option-list {
  display: flex;
  flex-direction: column;
}

.filter-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-grey-100);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.filter-option:hover {
  opacity: 0.7;
}

.filter-option__label {
  font-size: var(--font-size-base);
  color: var(--color-black);
}

.filter-option__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.filter-option__control {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  border: 1px solid var(--color-grey-300);
}

.filter-option__control--radio {
  border-radius: 50%;
}

.filter-option__control--checkbox {
  border-radius: 2px;
}

.filter-option__input:checked + .filter-option__control {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.filter-option__input:focus-visible + .filter-option__control {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* ---- Level 2: price range dual slider ---- */

.filter-price__values {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.filter-price__track-wrap {
  position: relative;
  height: var(--space-5);
  margin: 0 var(--space-2);
}

.filter-price__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background-color: var(--color-grey-200);
}

.filter-price__range {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-color: var(--color-black);
}

.filter-price__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--space-5);
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.filter-price__slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
}

.filter-price__slider::-moz-range-track {
  background: transparent;
}

.filter-price__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  cursor: pointer;
}

.filter-price__slider::-moz-range-thumb {
  pointer-events: auto;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  cursor: pointer;
  box-sizing: border-box;
}

/* min sits above max (despite coming first in DOM) so its thumb stays
   grabbable when both handles meet at the same position. */
.filter-price__slider--max {
  z-index: var(--z-base);
}

.filter-price__slider--min {
  z-index: calc(var(--z-base) + 1);
}

/* ---- Shared sticky footer ----
   A flex sibling below .filter-levels (flex: 1) rather than literal
   position: sticky — .filter-levels already owns the scrollable/sliding
   area above it, so this simply always renders pinned at the bottom of
   the panel regardless of which level is active inside it. ---- */

.filter-panel__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-grey-200);
  flex-shrink: 0;
  background-color: var(--color-white);
}

.filter-panel__clear,
.filter-panel__apply {
  flex: 1;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.filter-panel__clear:active,
.filter-panel__apply:active {
  transform: scale(0.98);
}

.filter-panel__clear:focus-visible,
.filter-panel__apply:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.filter-panel__clear {
  border: 1px solid var(--color-grey-300);
  color: var(--color-black);
  background-color: var(--color-white);
}

.filter-panel__clear:hover {
  border-color: var(--color-black);
}

.filter-panel__apply {
  border: 1px solid var(--color-black);
  color: var(--color-white);
  background-color: var(--color-black);
}

.filter-panel__apply:hover {
  opacity: 0.85;
}

/* Reuses the same min-width the product grid steps to its full 4-column
   desktop layout at, rather than the earlier 700px tablet step, since
   that's the point this design commits to a desktop-style browsing
   experience with room for a side panel + backdrop. */
@media (min-width: 1100px) {
  .filter-panel {
    right: auto;
    width: calc(var(--space-9) * 4);
    transform: translateX(-100%);
  }

  .filter-panel.is-open {
    transform: translateX(0);
  }

  .filter-backdrop.is-open {
    backdrop-filter: blur(var(--space-1));
  }
}