/* ============================================================================
   G+ Market — premium polish layer  (additive · 2026-07-23)
   Loads AFTER styles.css, so equal-specificity rules win by source order.
   Scope is deliberately narrow: only genuine, non-duplicative elevations that
   the live "amazon-ui-v3" design does not already have. Safe properties only
   (colour / border / shadow / radius / transform-on-hover / transition).
   Revert instantly: delete the <link rel="stylesheet" href="/market-refresh.css">
   line from index.html. Nothing else depends on this file.
   ============================================================================ */

/* — 1. Editorial price — the concept's signature: display serif + aligned digits.
   Keeps existing responsive font-sizes; only changes face, weight, numerics.   */
.price{
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.price .price-was,
.price-was{ font-family: var(--font-body); font-weight: 600; }

/* — 2. Product card — deeper, warmer hover elevation + a hair of gilt ring.
   (Base already lifts + borders on hover; this enriches the shadow & adds a
   1px champagne ring + faint top sheen so cards feel lit, not flat.)          */
.product-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(246,243,236,.06);
  opacity:0; transition: opacity .28s var(--ease);
}
.product-card:hover, .product-card:focus-within{
  border-color: rgba(212,184,133,.55);
  box-shadow: 0 30px 66px -34px rgba(0,0,0,.82), 0 0 0 1px rgba(212,184,133,.14);
}
.product-card:hover::after{ opacity:1; }
.product-card:hover .product-media img,
.product-card:focus-within .product-media img{ transform: scale(1.06); }

/* — 3. Save heart — clearer pink affordance on hover (active state already pink) */
.card-save:hover{ color: var(--pink-ink); border-color: rgba(255,0,107,.55); }

/* — 4. Deal badge — a touch crisper */
.deal-badge{ font-weight: 800; letter-spacing: .02em; }

/* — 5. Department tile — a champagne wash under the image so the brief
   pre-hydration moment reads as intentional, never a black flash.
   (Only the loading state; the real image covers it once hydrated.)           */
.dept-tile-media{
  background-image:
    radial-gradient(120% 120% at 72% 18%, rgba(212,184,133,.12), transparent 58%),
    linear-gradient(158deg, var(--card), var(--card-2)) !important;
  background-repeat: no-repeat;
}

/* — 6. Product-detail + variant + checkout prices — the detail price already
   uses the display serif; give every price on the site aligned (tabular)
   figures so digits line up in columns and summaries. Category pages inherit
   the card refresh above via the shared .product-card / .price classes.       */
.detail-price-row strong,
.checkout-summary strong,
.variant-thumb-price,
.detail-body h2{ font-variant-numeric: tabular-nums; }

/* — Respect reduced motion — */
@media (prefers-reduced-motion: reduce){
  .product-card, .product-card::after, .product-media img{ transition: none; }
}