/* ==========================================================================
   ATLETIKA — Page: Shop (product listing)
   Sticky filter bar with popovers (≥1024), sticky "Filter & sort" row and
   drawer (≤1023), applied-filter chips, skeleton, empty state.
   Tokens only. Breakpoints: 768 / 1024 / 1280.
   ========================================================================== */

.plp {
  /* Popover minimum width (spec: 240) has no token yet — derived from the
     spacing scale until --pop-min-w exists (see handoff notes).          */
  --filters-pop-w: calc(var(--s-40) + var(--s-20));
  /* Bar height — spec: one 56-high row, same as the header.           */
  --filters-h: var(--s-14);
}

/* ---- Page head ----------------------------------------------------------- */
.plp__head { padding-block: var(--s-6) var(--s-5); }
.plp__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-block-start: var(--s-3);
}
@media (min-width: 768px) {
  .plp__head { padding-block: var(--s-10) var(--s-6); }
}

/* ---- Filter bar — sticky under the header --------------------------------- */
.filters {
  position: sticky;
  top: var(--header-offset);
  transition: top var(--dur-base) var(--ease-standard);   /* same as the header */
  z-index: var(--z-sticky);
  background: var(--c-surface);
  border-block-end: var(--bw) solid var(--c-line);
}
.filters__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--filters-h);
}
.filters__groups,
.filters__sort { display: none; }

/* Mobile row: one sticky button plus the live count. */
.filters__mobile {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--filters-h);
}
.filters__mobile .btn svg { width: var(--s-4); height: var(--s-4); }
.filters__mobile p { white-space: nowrap; }

@media (min-width: 1024px) {
  .filters__mobile { display: none; }
  .filters__groups { display: flex; align-items: center; gap: var(--s-8); }
  .filters__sort   { display: flex; align-items: center; gap: var(--s-3); }
}

/* Group = trigger button + popover panel beneath it. */
.filters__group { position: relative; }
.filters__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--s-12);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--c-ink);
}
.filters__btn-n { color: var(--c-ink-muted); }
.filters__chev {
  width: var(--s-3);
  height: var(--s-3);
  transition: transform var(--dur-quick) var(--ease-standard);
}
.filters__btn[aria-expanded="true"] .filters__chev { transform: rotate(180deg); }

/* Popover: same enter/exit contract as the mega menu (quick, standard,
   visibility delayed so closed panels leave the tab order). */
.filters__pop {
  position: absolute;
  top: calc(100% + var(--s-1));
  left: 0;
  z-index: var(--z-raised);
  min-width: var(--filters-pop-w);
  padding: var(--s-4);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--s-1) * -1));
  transition: opacity    var(--dur-quick) var(--ease-standard),
              transform  var(--dur-quick) var(--ease-standard),
              visibility 0s linear var(--dur-quick);
}
.filters__pop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.filters__group--size  .filters__pop { min-width: calc(var(--filters-pop-w) + var(--s-24)); }
.filters__group--price .filters__pop { min-width: calc(var(--filters-pop-w) + var(--s-20)); }
.filters__pop-title { margin-block-end: var(--s-3); }

/* ---- Option lists (shared by popovers and the drawer) --------------------- */
.filters__n {
  color: var(--c-ink-muted);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-normal);
}
.filters__sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.filters__sizes .size-opt__label { padding-inline: var(--s-2); text-align: center; }
.size-opt__input:checked + .size-opt__label .filters__n { color: inherit; }

.filters__list { display: flex; flex-direction: column; }
.filters__opt { align-items: center; min-height: var(--s-10); }
.filters__opt .check__label { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Colour swatch. The colour itself is catalogue data, set per item as
   --swatch by filters.js; the ring keeps White and Bone visible on white. */
.swatch {
  flex: none;
  width: var(--s-3);
  height: var(--s-3);
  border-radius: var(--radius-full);
  border: var(--bw) solid var(--c-line-strong);
  background: var(--swatch, var(--c-surface-sunken));
}

/* Price: two fields plus preset chips. */
.filters__price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.filters__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}
.filters__preset[aria-pressed="true"] {
  background: var(--c-ink);
  color: var(--c-on-inverse);
  border-color: var(--c-ink);
}

/* Sort: visible label + native select, compacted to sit in the bar. */
.filters__sort-label {
  font-size: var(--t-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.filters__select {
  width: auto;
  min-height: var(--s-10);
  padding-block: var(--s-2);
  padding-inline-start: var(--s-3);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

/* ---- Applied filters ------------------------------------------------------ */
.plp__body { padding-block-start: var(--s-6); }
.plp__applied {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
}
.plp__applied .btn { flex: none; }
.chips {
  display: flex;
  gap: var(--s-2);
  min-width: 0;
  /* Room for the focus ring inside the scroll container. */
  padding: var(--s-1);
  margin: calc(var(--s-1) * -1);
}
.chips .chip { flex: none; white-space: nowrap; }
@media (max-width: 1023px) {
  .chips { overflow-x: auto; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
}
@media (min-width: 1024px) {
  .chips { flex-wrap: wrap; }
}

/* ---- Grid: skeleton, empty state spans the full grid, bar stays ---------- */
.plp__skeleton { display: flex; flex-direction: column; gap: var(--s-2); }
.plp__skeleton .media--product { aspect-ratio: var(--ratio-product); }
.plp__skeleton-line { height: var(--lh-sm); width: 70%; margin-block-start: var(--s-1); }
.plp__skeleton-line--short { width: 40%; margin-block-start: 0; }
.plp .products > .empty { grid-column: 1 / -1; grid-row: auto; }

/* ---- Mobile filter drawer ------------------------------------------------- */
.filters-drawer .drawer__body { padding-block-start: 0; }
.filters-drawer .acc:first-of-type { border-block-start: 0; }
.filters-drawer .acc__content { color: var(--c-ink); }
.filters-drawer .filters__opt { min-height: var(--s-12); }
.filters-drawer .filters__sizes { grid-template-columns: repeat(3, 1fr); }
.filters-drawer .drawer__foot .btn--ghost { align-self: center; }

/* Collapsed accordion panels leave the tab order once the collapse has
   finished, so the focus trap does not visit invisible controls. */
.filters-drawer .acc__panel {
  visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
.filters-drawer .acc__trigger[aria-expanded="true"] + .acc__panel {
  visibility: visible;
  transition-delay: 0s;
}