/**
 * products.css — styles specific to the products page (products.html).
 *
 * Just the reusable product-card treatment; layout is handled by Tailwind
 * utilities in the markup. Global rules live in base.css.
 */

.product-card {
  display: block;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1.75rem;
  box-shadow: 0 10px 30px -10px rgba(17, 17, 17, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: #FDE4DF;
  box-shadow: 0 20px 45px -15px rgba(234, 67, 37, 0.25);
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #EA4325;
}

.product-card:hover .product-link span[aria-hidden="true"] {
  transform: translateX(3px);
}

.product-link span[aria-hidden="true"] {
  transition: transform 0.2s ease;
}