/*
 * Éclore Aesthetics — Product card (SHOP-DESIGN-SPEC §3)
 * ─────────────────────────────────────────────────────────────────────────────
 * [ image — Stone ground, 4:5, hairline frame, badge caps inside top-left ]
 * [ hairline underline, full card width ]
 * CATEGORY LABEL / Product Name / $48
 * Whole card is one link; hover = image scale(1.03) + name → Terracotta.
 * Out of stock: image 60%, SOLD OUT badge, price → NOTIFY ME text CTA.
 */

.product-card {
  margin: 0;
}

.product-card__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

/* ─── Image frame ────────────────────────────────────────────────────────────── */

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;              /* CLS: frame reserves space (§3) */
  background: var(--color-stone);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Editorial grayscale framing; hover reveals the product's true colour so the
   shelf stays shoppable while matching the gallery language. */
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--img-filter);
  transition: transform var(--dur-medium) var(--ease-reveal),
              filter var(--dur-short) var(--ease-standard);
}

.product-card__link:hover .product-card__media img,
.product-card__link:focus-visible .product-card__media img {
  transform: scale(1.03);
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .product-card__media img { transition: filter var(--dur-short) var(--ease-standard); }
  .product-card__link:hover .product-card__media img { transform: none; }
}

/* Badge — text only, no pills, no fills (§3) */
.product-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ─── Underline + text stack ─────────────────────────────────────────────────── */

.product-card__rule {
  display: block;
  height: 1px;
  background: var(--color-hairline);
  margin-top: var(--space-sm);
}

.product-card__category {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-card__name {
  margin: var(--space-3xs) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem; /* H3 scale on cards */
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-heading);
  transition: color var(--dur-micro) var(--ease-standard);
}

.product-card__link:hover .product-card__name,
.product-card__link:focus-visible .product-card__name {
  color: var(--color-terracotta);
}

.product-card__price {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-ink);
}

/* Woo prints <del>/<ins> for sales — keep it quiet */
.product-card__price del {
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-right: var(--space-2xs);
}

.product-card__price ins {
  text-decoration: none;
}

/* ─── Out of stock (§3) ──────────────────────────────────────────────────────── */

.product-card--soldout .product-card__media img {
  opacity: 0.6;
}

.product-card__notify {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
}