/* Product count and page size share the left side of the catalogue toolbar. */
#js-product-list-top {
  align-items: center;
  row-gap: 12px;
}
#js-product-list-top .gs-catalog-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
#js-product-list-top .gs-catalog-summary .total-products {
  padding: 0;
  margin: 0;
}
#js-product-list-top .gs-catalog-page-size {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 0.875rem;
}
#js-product-list-top .gs-catalog-page-size label {
  margin: 0;
  white-space: nowrap;
}
#js-product-list-top .gs-catalog-page-size select {
  width: 112px;
  min-width: 112px;
  height: 40px;
  padding: 0 28px 0 12px;
}
#js-product-list-top .gs-catalog-controls .sort-by-row {
  justify-content: flex-end;
}
/* Use the controls' intrinsic width instead of Bootstrap's 5/7 column split.
   This keeps count and page size together inside a catalogue with a sidebar. */
@media (min-width: 992px) {
  #js-product-list-top.products-selection > .gs-catalog-summary {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    width: auto;
    max-width: 100%;
    min-width: 0;
    column-gap: 16px;
  }
  #js-product-list-top .gs-catalog-summary .total-products {
    white-space: nowrap;
  }
  #js-product-list-top.products-selection > .gs-catalog-controls {
    flex: 1 1 450px;
    width: auto;
    max-width: none;
    min-width: 0;
  }
}
@media (max-width: 991.98px) {
  #js-product-list-top .gs-catalog-summary {
    margin-bottom: 12px;
  }
  #js-product-list-top .gs-catalog-summary,
  #js-product-list-top .gs-catalog-controls {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

html.gs-catalog-all-mode #js-product-list .pagination { display: none !important; }
.gs-catalog-progress { clear: both; padding: 20px 15px; text-align: center; }
.gs-catalog-progress p { margin-bottom: 12px; }