/* =====================================================================
   Product card (Prompt 30; Figma set 2407:7: Breakpoint=Desktop 2387:11348, Breakpoint=Mobile 2407:2; docs 2408:299).
   Macro: productCard(o, breakpoint, url) in _includes/components/marketing.njk. One link per card, no price.
   Container: card/background/default, 1px border/subtle, radius 8 (radius/md, as drawn in 2387:11348 and as built), Elevation/Card rest.
   Image 1:1, cover, fills the width. Content: Desktop 12 / 16 / 16 (top / sides / bottom, as drawn), gap 4; Mobile 12, gap 4.
   Category = athlete: Desktop 13/18 (Mobile/12 style), Mobile 12/16 (Mobile/13); card/text/secondary.
   Title: Desktop/09 (20/28) or Mobile/09 (16/20), Storica SemiBold (uppercase face), text/primary, clamped to 4 lines.
   Hover: the Story Card treatment (soft drop shadow, transparent border, content on card/background/hover). Focus: --shadow-focus-ring-accent.
   ===================================================================== */
.product-card{display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-width:0;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--card-bg-default);box-shadow:var(--shadow-card-rest);color:var(--text-primary);text-align:left;text-decoration:none;transition:filter .2s var(--ease-out),border-color .2s var(--ease-out)}
.product-card__image{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--image-placeholder)}
.product-card__content{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-12) var(--space-16) var(--space-16);transition:background .2s var(--ease-out)}
.product-card__category{font:var(--text-mobile-sm);color:var(--card-text-secondary)}
.product-card__title{font:var(--text-xl);color:var(--text-primary);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:anywhere}
.product-card:hover{filter:drop-shadow(0 8px 10px rgba(0,0,0,.08));border-color:transparent}   /* same as Story Card hover */
.product-card:hover .product-card__content{background:var(--card-bg-hover)}
.product-card:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-accent)}   /* accent ring: --shadow-focus-ring has no Dark value and the Market page is dark */
/* Mobile variant: under 744 (auto) or forced */
.product-card--mobile .product-card__content{padding:var(--space-12)}
.product-card--mobile .product-card__category{font:var(--text-mobile-xs)}
.product-card--mobile .product-card__title{font:var(--text-mobile-xl)}
@media (max-width:743px){
  .product-card:not(.product-card--desktop) .product-card__content{padding:var(--space-12)}
  .product-card:not(.product-card--desktop) .product-card__category{font:var(--text-mobile-xs)}
  .product-card:not(.product-card--desktop) .product-card__title{font:var(--text-mobile-xl)}
}
@media (prefers-reduced-motion:reduce){.product-card,.product-card__content{transition:none}}