/* Product tiles – compact, industry-standard look (Primary Arms / Ammo Depot style).
   Load this after category styles to override. To revert, remove this file and the link from shop pages. */

/* Grid: more tiles per row */
.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 1.25rem !important;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* Smaller image area */
.product-image {
  height: 140px !important;
  min-height: 140px !important;
  background: #f9f9f9 !important;
}

.product-image img {
  object-fit: contain !important;
}

.product-image-placeholder {
  font-size: 2rem !important;
}

/* Tighter card content */
.product-info {
  padding: 0.75rem 1rem !important;
}

.product-brand {
  font-size: 0.7rem !important;
  margin-bottom: 0.2rem !important;
}

.product-name {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin-bottom: 0.5rem !important;
}

/* Pricing: price + optional CPR/round count bar */
.product-pricing {
  margin-bottom: 0.5rem !important;
}

.product-price {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.product-price-bar {
  font-size: 0.75rem !important;
  color: #666 !important;
  margin-top: 0.2rem !important;
}

.product-sku {
  font-size: 0.7rem !important;
  color: #999 !important;
  margin-top: 0.25rem !important;
}

/* Magazines: SKU above name (Chattanooga-style) */
.product-sku-above {
  margin-top: 0 !important;
  margin-bottom: 0.2rem !important;
  font-weight: 600 !important;
  color: #555 !important;
  font-size: 0.75rem !important;
}

.product-magazine-bar {
  font-size: 0.75rem !important;
  color: #666 !important;
  margin-bottom: 0.4rem !important;
}

.product-stock {
  font-size: 0.75rem !important;
  padding: 0.2rem 0.5rem !important;
}

/* Smaller CTA button */
.product-card .product-btn {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin: 0 1rem 0.75rem !important;
  width: calc(100% - 2rem) !important;
}

.product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}