/* ---- Collection page: category group headings ---- */
/* The heading lives inside .product-grid so infinite scroll can append it with
   the cards; spanning every column turns it into a full-width divider. */
.collection-group-heading {
  grid-column: 1 / -1;
  margin: var(--space-6) 0 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--navy-900);
}

.collection-group-heading:first-child {
  margin-top: 0;
}

/* ---- Collection page: products-per-row control ---- */
/* No sidebar here, so the control sits above the grid, left-aligned where the
   eye lands first, and lays out in a row instead of the stacked sidebar variant. */
.collection-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.grid-cols-control--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.grid-cols-control--inline .grid-cols-control__slider {
  width: 140px;
}

.grid-cols-control--inline .grid-cols-control__value {
  min-width: 1ch;
}

/* Below 992px the grid is locked to 2 columns (and to 1 below 576px), so the
   control cannot do anything — hide it rather than show an inert slider. */
@media (max-width: 991px) {
  .collection-toolbar {
    display: none;
  }
}