/* ================================================================
   Add to public/css/styles.css (or a new listing.css, linked after it)
   Reuses your existing .product / .p-img-wrap / .name / .sub / .price /
   .per / .buy / .popular-tag classes from the home page product cards —
   only the CONTAINER changes from a horizontal carousel to a full grid.
================================================================ */

/* Full grid for /buy-gold and /buy-silver (not a carousel) */
.products-grid-full{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  margin-top:2rem;
}
@media (max-width:1100px){ .products-grid-full{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:768px) { .products-grid-full{ grid-template-columns:repeat(2, 1fr); gap:1rem; } }
@media (max-width:480px) { .products-grid-full{ grid-template-columns:1fr; } }

/* Live price banner row (reuses .trust / .trust-card wrapper) */
.listing-price-row{
  display:flex; align-items:center; justify-content:center; gap:3rem;
  padding:.5rem 0; flex-wrap:wrap;
}
.listing-price-item{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.listing-price-label{ font-size:.68rem; font-weight:700; letter-spacing:1px; color:var(--gold, #C9A84C); }
.listing-price-val{ font-size:1.2rem; font-weight:700; }
.listing-price-val--sm{ font-size:.95rem; color:#6b7280; font-weight:600; }

/* Unavailable notice */
.listing-unavailable{
  display:flex; align-items:center; gap:.6rem; justify-content:center;
  background:#fff3cd; color:#856404; border-radius:8px;
  padding:.75rem 1.25rem; font-size:.85rem; margin:1.5rem 0;
}
.listing-unavailable a{ color:#856404; font-weight:700; text-decoration:underline; }

/* Empty state */
.listing-empty{
  grid-column:1/-1; text-align:center; padding:4rem 1rem; color:#6b7280;
}
.listing-empty-ico{ font-size:2.5rem; margin-bottom:.75rem; opacity:.5; }
.listing-empty p{ margin-bottom:1rem; font-size:.9rem; }