/* The product collection: ONE class, .pgrid, holding .pgrid-item cards.
   THE FLOW IS NOT DECIDED HERE. It is decided by the page layout layer in
   public/css/layouts/<id>.css (config/layouts.js), exactly as bandsaas decides
   `.container` in its layout files. This sheet owns the card and the default
   only, so there is one place to change how a tile looks and a different place
   to change how tiles are arranged.

   What used to be here: six .pgrid-<flow> classes that differed only in column
   count (4/5/6/flex/4/4). They are gone. A layout that changes nothing but the
   number of columns is a density slider, and calling six of them "layouts" is
   how the picker ended up with no visible effect. */

.pgrid { margin: 0 0 8px; }
.pgrid-item { margin-bottom: 16px; }

/* Default flow for any page not carrying a layout-<id> class (search results,
   category listings, a shop that never chose). Deliberately the same as
   olympus so the unconfigured case is a named layout and not a seventh,
   nameless one. */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pgrid > .pgrid-item { margin-bottom: 0; }

/* ── Game-capsule card variant (partials/marketplace/game-card.ejs) ──
   Dark Steam-style capsule that fills a .pgrid-item, so games marketplaces
   flow the SAME six layouts above. The white product-card washes out on the
   cherry hub chrome; this variant is dark and image-forward instead. */
.pgrid-game .pgrid-item { margin-bottom: 0; }
.pg-capsule {
  display: block; background: #16202d; border-radius: 8px; overflow: hidden;
  text-decoration: none; color: #c7d5e0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pg-capsule:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.5); color: #fff; }
.pg-capsule-art { position: relative; aspect-ratio: 1/1; background: #0b1118; }
.pg-capsule-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pg-capsule-body { padding: 10px 12px 12px; }
.pg-capsule-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: 2px; }
.pg-capsule-studio { font-size: 11px; color: #7a8b99; margin-bottom: 4px; }
.pg-capsule-rating { font-size: 11px; color: #f5c518; margin-bottom: 6px; }
.pg-capsule-rating .pg-muted { color: #7a8b99; }
.pg-capsule-price { display: flex; align-items: baseline; gap: 8px; }
.pg-now { font-size: 15px; font-weight: 700; color: #a4d007; }
.pg-was { font-size: 12px; color: #67707b; }
.pg-free { font-size: 15px; font-weight: 700; color: #66c0f4; }
.pg-badge {
  position: absolute; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 7px; border-radius: 4px; color: #fff; text-transform: uppercase;
}
.pg-badge--off { right: 8px; background: #4c6b22; color: #a4d007; }
.pg-badge--pre { left: 8px; background: #1387b8; }
.pg-badge--feat { left: 8px; background: #c1443f; }
.pg-badge--play { left: 8px; background: #c0ff47; color: #10131a; }
/* text-truncate-2 also used by the platform card; safe to re-declare */
.pgrid-game .text-truncate-2 {
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* empty state */
.pgrid-empty { text-align: center; padding: 60px 20px; color: #9aa0ad; }
.pgrid-empty i { font-size: 44px; opacity: .5; display: block; margin-bottom: 8px; }

/* Responsive fallback for the default flow. Each layout ships its own
   breakpoints alongside the flow it defines. */
@media (max-width: 1199.98px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}