/* ========================== */
/* == Game page: /:game/products (design system "GamePagePlain") ==
   HUD hero, tier filter chips and plain AccountCards. Components come
   from design_system.css; this file lays out the page and is scoped to
   #product-index-page because admin pages load every stylesheet. */

#product-index-page #product-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  scroll-margin-top: 80px;
}

#product-index-page #accounts { scroll-margin-top: 80px; }

/* Sold out: the card stays visible but quieter */
#product-index-page .product-box.is-sold-out .ev-card-art { opacity: 0.5; }

/* == Empty state == */
#product-index-page .empty-state {
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}

#product-index-page .empty-state-text { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
#product-index-page .empty-state-hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); }
#product-index-page .empty-state-hint a { color: var(--ki); }

@media (max-width: 1100px) {
  #product-index-page #product-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #product-index-page #product-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

@media (max-width: 420px) {
  #product-index-page #product-container { grid-template-columns: minmax(0, 1fr); }
}

/* Tier filter (tier_filter_controller.js) toggles `hidden`; .ev-card sets its
   own display, so restate it */
#product-index-page .product-box[hidden],
#product-index-page .empty-state[hidden] { display: none; }