/**
 * 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); }
/* R11 M2: this is now the category's own merchant-authored description rendered
   as filtered HTML (a <div>), not a strip_tags()'d single line in a <p>, so the
   paragraph/list rhythm has to be set on the descendants. */
.atl-category-desc > :first-child { margin-top: 0; }
.atl-category-desc > :last-child { margin-bottom: 0; }
.atl-category-desc p { margin: 0 0 10px; }
.atl-category-desc ul,
.atl-category-desc ol { margin: 0 0 10px; padding-left: 20px; }

.atl-category-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  padding: 32px 48px 64px;
  align-items: start;
}
/* No real layered-nav facets to show (non-category context, or the facet query
   failed): the rail is not rendered at all, so the grid must collapse to a
   single column. Without this the fixed 260px track + 40px gap would remain as a
   300px dead gutter pushing the product grid right. */
.atl-category-layout--no-rail { grid-template-columns: minmax(0, 1fr); }
.atl-category-results { display: flex; flex-direction: column; gap: 28px; }

/* R11 M2: the .atl-category-info panel is GONE from category-view.phtml — it
   was a fixed "About our outerwear" claim rendered on every category, and the
   category's real description already renders as .atl-category-desc above.
   Its rules are removed with it rather than left as dead selectors. */

@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; }
}