/* =========================================================================
   Jewelry Virtual Try-On — page-specific overrides
   v1 / 2026-04-30
   Loads after ai-jewelry-retoucher.css and ai-jewelry-retoucher-dark.css
   so it can override anything that needs to differ for this 8-card page.
   ========================================================================= */

/* Try-On has 8 product cards (vs Retoucher's 3). 2-col grid keeps each
   card wide enough for the (now much shorter) content. Tablet stays 2-col,
   mobile collapses to 1-col. */
.products-grid-2col {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .products-grid-2col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .products-grid-2col { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* Compact card image — Try-On page strips the long-form description and
   pro-tip blocks, so cards are short. A shorter image (180 vs 220px) keeps
   each card balanced and reduces the total scroll length on mobile. */
.products-grid-2col .product-image { height: 180px; }
.products-grid-2col .product-content { padding: 22px 24px 24px; }
.products-grid-2col .product-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
.products-grid-2col .product-tagline { font-size: 0.95rem; margin-bottom: 14px; }
.products-grid-2col .product-best-for { padding-top: 12px; margin-bottom: 14px; }
.products-grid-2col .product-credits { margin-bottom: 14px; }