/*
 * Deskrune — kit-cover styling layer (v2.6, 2026-05-08).
 * Last-loaded so its rules win over the base v2-buy + v2-bundles cascade.
 *
 * Why this exists:
 *   The /buy/ funnel auditor flagged "no visual representation per kit" as the
 *   #1 conversion miss. Each of the 7 product cards (5 kits + 2 bundles) now
 *   gets a 2:3 SVG cover above the title. This file scopes how they render
 *   inside the live-product-grid and dr-bundles-grid containers.
 *
 *   Strategy: cover renders as a quiet, brand-aligned visual anchor — not a
 *   full hero image. Hairline border, gentle hover lift, intrinsic ratio
 *   reserved via width/height attrs to prevent CLS. Mobile drops the cover
 *   to ~140px wide (still readable, no scroll cost).
 */

/* ─── Shared cover element ──────────────────────────────────────────────── */
.live-product .kit-cover,
.dr-bundle-card .kit-cover {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 2 / 3;
  margin: 0 auto 18px;
  background: #faf9f5;
  border: 1px solid rgba(20, 20, 14, 0.08);
  border-radius: 4px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  /* prevent stretched img */
  object-fit: contain;
}

/* Featured card (SelfHealer) gets a slightly larger cover */
.live-product.featured .kit-cover {
  max-width: 220px;
}

/* Hover lift — only on devices that actually have hover */
@media (hover: hover) {
  .live-product:hover .kit-cover,
  .dr-bundle-card:hover .kit-cover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -16px rgba(20, 20, 14, 0.18);
    border-color: rgba(201, 97, 63, 0.25);
  }
}

/* Reduced-motion users — no transform animation */
@media (prefers-reduced-motion: reduce) {
  .live-product .kit-cover,
  .dr-bundle-card .kit-cover {
    transition: none;
  }
  .live-product:hover .kit-cover,
  .dr-bundle-card:hover .kit-cover {
    transform: none;
  }
}

/* Dark theme — covers are intentionally cream and stay cream.
   Add a soft outer glow to keep them from feeling "stuck on" against dark. */
[data-theme="dark"] .live-product .kit-cover,
[data-theme="dark"] .dr-bundle-card .kit-cover {
  border-color: rgba(250, 249, 245, 0.12);
  box-shadow: 0 0 0 1px rgba(250, 249, 245, 0.04);
}

[data-theme="dark"] .live-product:hover .kit-cover,
[data-theme="dark"] .dr-bundle-card:hover .kit-cover {
  border-color: rgba(201, 97, 63, 0.4);
}

/* ─── Mobile rules ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .live-product .kit-cover,
  .dr-bundle-card .kit-cover {
    max-width: 140px;
    margin-bottom: 14px;
  }
  .live-product.featured .kit-cover {
    max-width: 160px;
  }
}

/* ─── Bundle card override — covers feel airier centered above the price ── */
.dr-bundle-card {
  text-align: left;
}
.dr-bundle-card .kit-cover {
  margin-left: 0;
  margin-right: 0;
}

/* ─── Live-product-grid: keep cover left-aligned with the rest of the card ─ */
.live-product .kit-cover {
  margin-left: 0;
  margin-right: 0;
}