/*
 * Inventory cards shown on index.html (and any page that loads marketplace-v47.js).
 * Mobile-first. Only the classes that pages still use are kept.
 */
.catalogGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
.catalogGrid > * { min-width: 0; }
.inventoryCard { min-width: 0; overflow: hidden; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: var(--tgs-white, #fff); box-shadow: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08)); transition: transform .25s var(--tgs-ease, ease), box-shadow .25s var(--tgs-ease, ease); }
.inventoryImage { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tgs-grad-dark, linear-gradient(160deg, #150A2E, #2A0F5C 60%, #4C1D95)); }
.inventoryImage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inventoryImage.empty::after,
.inventoryImage.imageFallback::after { content: 'VELORA GEM AND JEWELRY'; position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: rgba(255, 255, 255, .7); font: 500 .75rem/1.4 var(--tgs-font-body, system-ui, sans-serif); letter-spacing: .18em; text-align: center; }
.inventoryBody { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: 1.125rem; }
.inventoryTitle { margin: 0; font: 600 1.5rem/1.1 var(--tgs-font-head, 'Cormorant Garamond', Georgia, serif); overflow-wrap: anywhere; }
.inventoryTitle a { color: inherit; text-decoration: none; }
.inventoryPrice { color: var(--tgs-violet-900, #2A0F5C); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.emptyState { grid-column: 1 / -1; padding: 3rem 1.5rem; border: 1px dashed var(--tgs-violet-200, #DDD6FE); border-radius: var(--tgs-r-md, 1.25rem); background: var(--tgs-white, #fff); color: var(--tgs-muted, #6B6485); text-align: center; }
.emptyState h3 { margin: 0 0 .5rem; color: var(--tgs-ink, #1B1030); font: 500 1.75rem/1.15 var(--tgs-font-head, 'Cormorant Garamond', Georgia, serif); }
@media (hover: hover) {
  .inventoryCard:hover { transform: translateY(-4px); box-shadow: var(--tgs-shadow-md, 0 20px 60px rgba(91, 33, 182, .14)); }
}
@media (min-width: 768px) {
  .catalogGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .catalogGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .inventoryCard { transition-duration: .01ms !important; }
}