.shop-hero { background: linear-gradient(135deg, #0f172a, #111827); color: #fff; padding: 64px 0; }
.shop-hero__title { text-align: center; font-size: 36px; margin: 0 0 12px; }
.shop-hero__subtitle { text-align: center; color: #cbd5e1; max-width: 760px; margin: 0 auto; }

.shop-filters { position: sticky; top: 72px; background: #fff; border-bottom: 1px solid var(--color-border); padding: 14px 0; z-index: 20; }
.shop-filters__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-filter { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-border); background: #f8fafc; color: var(--color-text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.shop-filter.is-active { background: var(--color-accent); color: #0f0f0f; border-color: var(--color-accent); }
.shop-filter:hover { background: #e2e8f0; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 32px 0 64px; }

@media (max-width: 1024px) {
  .shop-filters { top: 62px; }
}
@media (max-width: 640px) {
  .shop-hero { padding: 48px 0; }
  .shop-hero__title { font-size: 30px; }
  .shop-filters__row { gap: 10px; }
}