/* =================== hc-pgrid.css =================== */
/* hc-pgrid - product grid container. Wraps .pcard children. Used on catalog,
 * search results, favorites, related-product rails, etc. Adapts column count
 * to viewport with sensible breakpoints. Strictly .hc-pgrid / .hc-pgrid__*. */

.hc-pgrid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  /* Uniform row heights — cards stretch to the row baseline. The hoverband
     is an absolute float, so only the hovered card visibly extends below
     the row (siblings stay at row height). */
  align-items: stretch;
}

/* List view toggle */
.hc-pgrid[data-view="list"] {
  grid-template-columns: 1fr;
}
.hc-pgrid[data-view="compact"] {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--hc-sp-2);
}

#cat-results .hc-pgrid[data-view="list"] {
  grid-template-columns: 1fr;
}

#cat-results .hc-pgrid[data-view="list"] .pcard {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  align-items: stretch;
}

#cat-results .hc-pgrid[data-view="list"] .pcard .pcard-shell {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  min-height: 240px;
}

#cat-results .hc-pgrid[data-view="list"] .pcard-stage {
  min-height: 100%;
}

#cat-results .hc-pgrid[data-view="compact"] .pcard-caption,
#cat-results .hc-pgrid[data-view="compact"] .pcard-props,
#cat-results .hc-pgrid[data-view="compact"] .pcard-hoverband {
  display: none;
}

#cat-results .hc-pgrid[data-view="compact"] .pcard-body {
  padding: 12px;
}

/* Inline marketing banner inside the grid spans the full row */
.hc-pgrid__banner {
  grid-column: 1 / -1;
}

/* Inside PDP cross-sell rails, gaps are tighter */
.pdp-commerce-sections .hc-pgrid,
.hc-pdp .hc-pgrid {
  gap: clamp(12px, 1.2vw, 18px);
}

.hc-pgrid > .pcard {
  min-width: 0;
}

/* Catalog page column system (single owner of hc-pgrid layout). */
.page-catalog .hc-pgrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1440px) {
  .page-catalog .hc-pgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .page-catalog .hc-pgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .page-catalog .hc-pgrid {
    grid-template-columns: 1fr;
  }
}

/* Public wishlist keeps denser card spacing but stays in hc-pgrid ownership. */
.page-wishlist-public .hc-pgrid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--hc-sp-4, 20px);
}