/**
 * Atelier — Category Grid (T4). Composes .atl-header/.atl-footer,
 * .atl-breadcrumbs, .atl-filters, .atl-toolbar, .atl-pagination,
 * .atl-product-card/.atl-product-grid.
 * Source of truth: design/store-theme/01-atelier-fashion/pages/T4 Category Grid.dc.html
 */
.atl-category-head {
  padding: 16px 48px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.atl-category-title { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 400; margin: 0; }
.atl-category-desc { font-size: 15px; font-weight: 300; margin: 0; max-width: 60ch; color: var(--atl-text-subtle); }

.atl-category-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  padding: 32px 48px 64px;
  align-items: start;
}
.atl-category-results { display: flex; flex-direction: column; gap: 28px; }

.atl-category-info {
  border-top: 1px solid var(--atl-border);
  padding-top: 28px;
  max-width: 72ch;
}
.atl-category-info-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; margin: 0 0 10px; }
.atl-category-info-body { font-size: 14px; font-weight: 300; line-height: 1.75; margin: 0; color: var(--atl-text-muted); }

@media (max-width: 1024px) {
  .atl-category-head { padding: 12px 20px 4px; }
  .atl-category-title { font-size: 32px; }
  /* minmax(0,1fr) + min-width:0 children: a plain 1fr track is minmax(auto,1fr)
   * and cannot shrink below its content's min-content, so any wide child (a
   * long pagination row, a wide facet label) forced the single mobile column
   * past the viewport (R3-01). This lets the track shrink and keeps children
   * contained. */
  .atl-category-layout { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 24px; }
  .atl-category-layout > .atl-filters,
  .atl-category-layout > .atl-category-results { min-width: 0; }
}