/* ============================================================
   LovelyHair — Unified ProductCard
   Faithful port of components/product/ProductCard.jsx.
   aspect 0.82 · 10px radius · hairline border · no rest shadow ·
   hover: border→transparent + shadow-md + lift -3px + image zoom
   1.06 + 2nd-image crossfade.
   ============================================================ */
.lh-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
  transform: translateY(0);
  transition: var(--transition-base);
}
/* Keyboard focus only: a tap focuses the card link too, and :focus-within kept
   the card lifted on a phone exactly as stuck :hover did. */
.lh-product-card:has(:focus-visible) {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* Hover motion (lift, zoom, 2nd-image swap, quick-add swell) needs a real
   pointer: on touch, the tap that opens a product leaves :hover stuck, and the
   card is still lifted and zoomed when the shopper comes Back to the grid. */
@media (hover: hover) and (pointer: fine) {
  .lh-product-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
  .lh-product-card:hover .lh-product-card__img { transform: scale(1.06); }
  .lh-product-card:hover .lh-product-card__img--hover { opacity: 1; }
  .lh-product-card:hover .lh-product-card__add { transform: scale(1.05); }
}

/* ---- Media well ---- */
.lh-product-card__media {
  position: relative;
  aspect-ratio: 0.82;
  /* Muted LovelyHair lockup under the photo until it paints (base.css). */
  background: var(--lh-img-loader, none), var(--surface-image);
  overflow: hidden;
}
/* Skeleton sweep — fills the media well while the image is still fetching.
   Sits behind the image (z-index:0 vs the link's z-index:1) so it is
   automatically occluded the instant the real photo paints; no JS needed. */
.lh-product-card__media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  z-index: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  animation: lh-skeleton-sweep 1.6s ease-in-out infinite;
}
/* transform, not background-position: this runs on every card for the page's
   whole life, and a background-position animation repaints on the main thread
   each frame (Lighthouse: non-composited animation, multi-second TBT on
   phones). Same sweep: highlight enters left, exits right. */
@keyframes lh-skeleton-sweep {
  0% { transform: translateX(-80%); }
  100% { transform: translateX(30%); }
}
@media (prefers-reduced-motion: reduce) {
  .lh-product-card__media::before { animation: none; }
}
.lh-product-card__media-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.lh-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The alt text otherwise renders as fallback content while the image is
     still fetching (the reported bug) — an unloaded <img> paints its alt
     attribute using its own font styles, so collapsing them hides it and
     lets the skeleton sweep show through instead. Zero JS, zero race. */
  color: transparent;
  font-size: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}

.lh-product-card__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.lh-product-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-size: 28px;
}

/* ---- Badges (top-left, stacked) ---- */
.lh-product-card__badges {
  position: absolute;
  top: 12px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  z-index: 2;
}
/* Sale badge hugs the left edge with a diagonal radius (rounded top-right +
   bottom-left) — matches best-sellers-1.webp. */
.lh-product-card__sale {
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  padding: 5px 10px 5px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1;
}
/* Any non-sale badges (New / Sold out) keep a small inset from the edge. */
.lh-product-card__badges > .lh-badge { margin-left: 12px; }

/* ---- Wishlist heart (top-right, reveals on hover) ---- */
.lh-product-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  color: var(--text-heading);
  opacity: 0;
  transform: translateY(-4px);
  transition: var(--transition-base);
}
.lh-product-card:hover .lh-product-card__wishlist,
.lh-product-card__wishlist:focus-visible,
.lh-product-card__wishlist[aria-pressed="true"] {
  opacity: 1;
  transform: translateY(0);
}
.lh-product-card__wishlist[aria-pressed="true"] { color: var(--color-sale); }

/* Tooltip — reveals to the left on hover/focus (mirrors the quick-view tip) */
.lh-product-card__wishlist-tip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 4px 9px;
  font-family: var(--font-body);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-on-dark);
  background: var(--surface-inverse);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast) var(--ease-standard);
}
.lh-product-card__wishlist-tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--surface-inverse);
}
.lh-product-card__wishlist:hover .lh-product-card__wishlist-tip,
.lh-product-card__wishlist:focus-visible .lh-product-card__wishlist-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ---- Quick view (icon-only glass button, bottom-right, reveals on hover) ---- */
.lh-product-card__quickview {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--text-heading);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-circle);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: var(--transition-base);
}
.lh-product-card:hover .lh-product-card__quickview,
.lh-product-card:focus-within .lh-product-card__quickview {
  opacity: 1;
  transform: translateY(0);
}
.lh-product-card__quickview:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: #fff;
}
.lh-product-card__quickview .lh-icon { flex-shrink: 0; }

/* Tooltip — "Quick view" reveals to the left on hover/focus */
.lh-product-card__quickview-tip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 4px 9px;
  font-family: var(--font-body);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-on-dark);
  background: var(--surface-inverse);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast) var(--ease-standard);
}
.lh-product-card__quickview-tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--surface-inverse);
}
.lh-product-card__quickview:hover .lh-product-card__quickview-tip,
.lh-product-card__quickview:focus-visible .lh-product-card__quickview-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Touch devices have no hover — keep the trigger visible (tooltip stays hidden) */
@media (hover: none) {
  .lh-product-card__quickview { opacity: 1; transform: none; }
}

/* ---- Body ---- */
.lh-product-card__body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lh-product-card__rating { margin-bottom: 7px; text-align: center; }

.lh-product-card__title {
  font-family: var(--font-body);
  font-size: var(--font-card-title);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  line-height: 1.4;
  text-decoration: none;
  /* Single line — truncate with an ellipsis (best-sellers-1.webp). */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 8px;
}
.lh-product-card__title:hover { color: var(--color-primary); }

/* Card price — fluid and deliberately smaller than the PDP price, on every card
   in the shop (tokens.css --font-card-price / --font-card-compare). */
.lh-product-card .lh-price .lh-price__current { font-size: var(--font-card-price); }
.lh-product-card .lh-price .lh-price__compare,
.lh-product-card .lh-price .lh-price__save { font-size: var(--font-card-compare); }
.lh-product-card .lh-price { gap: 2px 6px; }

@media (min-width: 768px) {
  .lh-product-card__body { padding: 12px 14px 14px; }
  .lh-product-card__title { margin-bottom: 10px; }
}

.lh-product-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.lh-product-card__form { margin: 0; }

/* ---- Quick add (black square) — opens Quick View. Fluid: about 26px on a
   375px phone up to 34px on desktop (--card-add-size), the glyph a fixed 68%
   of the square so the padding stays tight at every size. ---- */
.lh-product-card__add {
  width: var(--card-add-size);
  height: var(--card-add-size);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--color-action);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
}
.lh-product-card__add svg { width: 68%; height: 68%; }
.lh-product-card__add:hover { background: var(--color-action-hover); }
.lh-product-card__add--disabled {
  background: var(--lh-stone-300);
  cursor: not-allowed;
  transform: none;
}