/* ==========================================================================
   Component: Product grid + Load more
   A paged grid of product cards — used on the home page in place of a rail.
   Requires: common.css, product-carousel.css (card styles)
   ========================================================================== */

.di-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.di-grid > li[hidden] { display: none; }

.di-grid__more {
  margin-top: 28px;
  text-align: center;
}

.di-grid__more[hidden] { display: none; }

.di-grid__more .di-btn { min-width: 190px; }

.di-grid__progress {
  margin: 10px 0 0;
  font-size: var(--di-fs-xs);
  color: var(--di-text-muted);
}

/* --------------------------------------------------------------------------
   Responsive — the "two rows" step follows the column count
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .di-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .di-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
}

@media (max-width: 400px) {
  .di-grid { grid-template-columns: 1fr; }
}