/*
 * CELLO Product Listing Grid System v2.0
 * Global scope: Category / Manufacturer / Search / Special / Tag.
 * Proven rhythm: 5 desktop / 3 tablet / 2 mobile, gaps 14 / 12 / 8px.
 *
 * Critical stability rules:
 * 1) Bootstrap .row ::before/::after MUST NOT become CSS-grid cells.
 * 2) AJAX #load-format-pagination uses display:contents so load-more products
 *    continue in the SAME grid instead of restarting a new row.
 * 3) AJAX-injected Bootstrap .col-* wrappers are fully reset (float + width),
 *    preventing the narrow-card bug after clicking "Xem thêm".
 */

.cello-product-grid-system::before,
.cello-product-grid-system::after {
  display: none !important;
  content: none !important;
}

.cello-product-grid-system {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 !important;
  padding: 4px 1px 0;
  overflow: visible;
}

/* Initial product cells. */
.cello-product-grid-system > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Category + Manufacturer AJAX load-more wrapper. */
.cello-product-grid-system > #load-format-pagination {
  display: contents !important;
}

/* AJAX children remain DOM children of #load-format-pagination, not direct grid children. */
.cello-product-grid-system > #load-format-pagination > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cello-product-grid-system .product-item {
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
  overflow: visible;
}

.cello-product-grid-system .top-item {
  overflow: visible;
}

/* Keep the -2px hover lift / orange border inside the visible paint area. */
.cello-product-grid-system {
  padding-top: 4px;
}

@media (max-width: 991px) {
  .cello-product-grid-system {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .cello-product-grid-system {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 3px;
  }
}