/* ─────────────────────────────────────────────────────────────────────────────
   sections/main_collection_list/styles.css
   Section-scoped styles for the single collection detail page.
   Product card styles are provided by resource_card.css + product_card.css.
───────────────────────────────────────────────────────────────────────────── */

/* ── Responsive products grid ─────────────────────────────────────────────── */
.collection-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--col-mobile, 2), 1fr);
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .collection-products-grid {
    grid-template-columns: repeat(var(--col-tablet, 3), 1fr);
  }
}

@media (min-width: 1024px) {
  .collection-products-grid {
    grid-template-columns: repeat(var(--col-desktop, 4), 1fr);
  }
}

/* ── Collection header ────────────────────────────────────────────────────── */
.collection-detail-header {
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
  padding-bottom: 1.5rem;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.collection-breadcrumb {
  color: var(--color-gray-400, #9ca3af);
}

.collection-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.collection-breadcrumb a:hover {
  color: var(--color-primary);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.collection-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-gray-400, #9ca3af);
}