/* Shared Product Card component (assets/partials/product-card.php) — reused
 * on the homepage, PLP grid, search results and related items. Lives in its
 * own stylesheet and is loaded on every page by default
 * (assets/partials/head-meta.php): it once lived inside homepage.css only,
 * which left every other page rendering an unstyled card (build-log, Phase 5).
 * Pages needing carousel/grid-specific sizing (the homepage's flex-basis, the
 * PLP's grid override) add that on top of this base, not instead of it.
 */
.product-card {
  position: relative;
  flex: 0 0 284px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.22s var(--ease-standard), transform 0.22s var(--ease-standard), border-color 0.22s var(--ease-standard);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
@media (hover: none) { .product-card:hover { transform: none; box-shadow: none; border-color: var(--color-border); } }

/* The photo is absolutely positioned inside an overflow-clipped 4:3 box: as
   an in-flow child, a square photo's intrinsic height made the aspect-ratio
   box grow past 4:3 and every card in a row stretched to match (seen on the
   homepage, 2026-09-21). */
.product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.product-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
.product-card__image-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-section-tint);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-card__image-placeholder img { position: static; width: 56px; height: 56px; opacity: 0.32; padding: 0; }

.product-card__status {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.product-card__status.is-in-stock { background: color-mix(in srgb, var(--color-success) 12%, white); color: var(--color-success); }
.product-card__status.is-lead { background: var(--color-warning-tint); color: var(--color-warning); }

.product-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-4); }
.product-card__brand {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.product-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  margin-bottom: var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.9375rem * 1.35 * 2);
}
.product-card__title a { color: var(--color-navy); }
.product-card__title a:hover { color: var(--color-primary); }
.product-card__mpn { font-size: 0.75rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); }
.product-card__summary {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.product-card__facts {
  display: flex;
  gap: var(--space-5);
  margin-top: auto;
  padding-block: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: 0.75rem;
}
.product-card__facts dt { color: var(--color-text-muted); font-weight: 500; }
.product-card__facts dd { color: var(--color-text); font-weight: 600; }

/* Add to Quote (primary) + a datasheet icon button (only when a datasheet
   exists). Always ONE row: an earlier text-label version wrapped onto a
   second line on some cards, which pushed those cards' CTAs out of line with
   their neighbours. The full "View Datasheet" button lives on the PDP. */
.product-card__cta-row { display: flex; gap: var(--space-2); }
.product-card__cta { flex: 1 1 auto; padding-inline: var(--space-3); min-width: 0; }
.product-card__cta.is-added { background: var(--color-success); }
.product-card__cta.is-added:hover { background: var(--color-success); }
.product-card__datasheet { flex: 0 0 36px; width: 36px; padding: 0; }
.product-card__datasheet svg { width: 17px; height: 17px; }