/* "All products": sidebar filters, toolbar and product grid. */
.shop { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }

/* Sticky while the products scroll; if the filters are taller than the screen they scroll on their own,
   so every group (Price, Offers, Wishlist…) stays reachable. */
.filters {
  position: sticky; top: calc(var(--header-offset) + 16px); display: grid; gap: 8px;
  max-height: calc(100dvh - var(--header-offset) - 32px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 6px;
}
@media (min-width: 901px) {
  .filters__group .filter-option { padding: 6px 0; } /* a little tighter so all groups fit on most laptops */
}
.filters__group { padding-bottom: 16px; border-bottom: 1px solid var(--color-line); }
.filters__group + .filters__group { padding-top: 16px; }
.filters__group legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); }

.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 20px; }
.toolbar__sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-muted); }
.toolbar__sort select {
  height: 40px; padding: 0 38px 0 14px;
  border: 1px solid var(--color-line-strong); border-radius: 999px; background-color: #fff;
  font-size: 14px; font-weight: 600; color: var(--color-ink);
}

/* minmax(0, 1fr): a long price or name can never push a column wider than its share of the row */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }

.empty-state {
  grid-column: 1 / -1;
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 64px 24px; background: var(--color-surface); border-radius: var(--radius-lg);
}
.empty-state__icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 50%; background: #fff; color: var(--color-ink);
}
.empty-state h3 { font-size: 20px; }
.empty-state p { color: var(--color-muted); margin-bottom: 12px; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; } /* sidebar is gone: room for three */
  /* minmax(0, 1fr): let the chip rows scroll instead of stretching the column past the screen */
  .shop { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .filters, .shop__main { min-width: 0; }
  /* filters become chip rows: categories, then ages (each swipes sideways), then deals + saved */
  .filters { position: static; display: flex; flex-wrap: wrap; gap: 10px 8px; max-height: none; overflow: visible; padding-right: 0; }
  .filters__group, .filters__group + .filters__group { min-width: 0; padding: 0; border: 0; }
  .filters__group:nth-child(-n + 3) { flex: 0 0 100%; } /* categories, ages and prices get a row each */
  .filters__group legend { display: none; }
  .filters__group > div {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  }
  .filters__group > div::-webkit-scrollbar { display: none; }
  .filters__group > .filter-option { width: max-content; }
  .filter-option {
    padding: 0 14px; height: 38px; border: 1px solid var(--color-line-strong); border-radius: 999px;
    white-space: nowrap; font-size: 14px;
  }
  .filter-option:has(input:checked) { background: var(--color-ink); border-color: var(--color-ink); }
  .filter-option:has(input:checked) .filter-option__label,
  .filter-option:has(input:checked) small { color: #fff; }
  .filter-option input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
  .filter-option__label small { display: none; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
}