/* ============================================
   FlowStash — Products Catalog Page
   Spacious grid · Minimal chrome
   ============================================ */

.catalog {
  padding-top: var(--space-8);
}

.catalog__header {
  margin-bottom: var(--space-12);
}

.catalog__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--text-ghost);
  margin-bottom: var(--space-10);
  letter-spacing: var(--tracking-tighter);
}

.catalog__search {
  margin-bottom: var(--space-6);
}

.catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.catalog__results-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-10);
  letter-spacing: var(--tracking-wide);
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.catalog__empty {
  grid-column: 1 / -1;
}

/* Loading state */
.catalog__loading {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.catalog__skeleton-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.catalog__skeleton-image {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.catalog__skeleton-body {
  padding: var(--space-5);
}

@media (max-width: 768px) {
  .catalog__grid {
    grid-template-columns: 1fr;
  }

  .catalog__loading {
    grid-template-columns: 1fr;
  }

  .catalog__title {
    font-size: var(--text-4xl);
  }
}