/*
 * Product card (Phase 3A — docs/COMPONENT-LIBRARY.md). The single standard
 * card used across homepage rails, search, category pages, related products,
 * best sellers, and deals (docs/DESIGN-SYSTEM.md §7 "Product card").
 *
 * Structure, top to bottom: media (image + optional hover image + badges +
 * wishlist) → brand eyebrow → title → spec chips (≤3, only if present) →
 * rating (omitted if zero reviews) → price block → stock line → action row
 * (Add to Cart / View Options + wishlist + compare).
 *
 * Every optional section is controlled by template logic
 * (template-parts/product/card.php), not CSS — a missing section simply
 * isn't rendered, so the card never shows an empty gap.
 */

.bholats-product-card {
	container-type: inline-size;
	container-name: bholats-product-card;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: var(--border-width-sm) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	height: 100%;
	transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}

.bholats-product-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* --- Media --- */

.bholats-product-card__media {
	position: relative;
	aspect-ratio: 1;
	background: var(--color-surface);
	overflow: hidden;
}

.bholats-product-card__media a { display: block; width: 100%; height: 100%; }

.bholats-product-card__image,
.bholats-product-card__image-hover {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--duration-slow) var(--ease-standard);
}

.bholats-product-card__image-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.bholats-product-card:hover .bholats-product-card__image-hover { opacity: 1; }
.bholats-product-card:hover .bholats-product-card__image { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.bholats-product-card__image,
	.bholats-product-card__image-hover { transition: none; }
}

/* Corner badges reuse .bholats-badge--corner-tl/tr from components/badges.css.
   Condition (top-left) and sale (top-right) never occupy the same corner. */

.bholats-product-card__wishlist {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: var(--z-raised);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: var(--border-width-sm) solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

/* If a sale or out-of-stock badge already occupies top-right, wishlist moves
   below it (docs/COMPONENT-LIBRARY.md — corner badges and wishlist must
   never overlap regardless of which badge is present). */
.bholats-product-card--badge-tr .bholats-product-card__wishlist { top: calc(var(--space-2) + 28px); }

.bholats-product-card__wishlist:hover { color: var(--color-sale); border-color: var(--color-sale); }
.bholats-product-card__wishlist[aria-pressed="true"] { color: var(--color-sale); border-color: var(--color-sale); }
.bholats-product-card__wishlist svg { width: var(--icon-sm); height: var(--icon-sm); }

/* --- Body --- */

.bholats-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	flex: 1;
}

.bholats-product-card__brand {
	font-family: var(--font-data);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-secondary);
}

.bholats-product-card__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	line-height: var(--leading-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}

.bholats-product-card__title:hover { color: var(--color-brand-deep); }

/* Spec chips / rating / price / stock reuse components/commerce.css classes
   directly (.bholats-spec-chips, .bholats-rating, .bholats-price,
   .bholats-stock) — no duplicate rules here. */

.bholats-product-card__price { margin-top: auto; padding-top: var(--space-2); }

/* --- Action row --- */

.bholats-product-card__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.bholats-product-card__actions .bholats-btn { flex: 1 1 auto; min-width: 0; }

.bholats-product-card__compare {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	flex-shrink: 0;
	/* Wraps onto its own line on narrow (2-column mobile) cards rather than
	   being clipped by the card's overflow:hidden — found in the Phase 3A
	   screenshot loop, docs/COMPONENT-LIBRARY.md. */
	flex-basis: 100%;
	justify-content: flex-start;
}

/* Responds to the card's own rendered width, not the viewport — correct
   regardless of whether the card sits in a 2-column mobile grid or a narrow
   column of a 5-column wide-desktop grid. */
@container bholats-product-card (min-width: 200px) {
	.bholats-product-card__compare { flex-basis: auto; }
}

.bholats-product-card__compare input { width: 16px; height: 16px; accent-color: var(--color-brand-blue); }

/* --- State modifiers --- */

.bholats-product-card--out-of-stock .bholats-product-card__image { opacity: 0.55; }
.bholats-product-card--out-of-stock .bholats-product-card__title { color: var(--color-text-secondary); }

/* --- Skeleton loading state (see components/feedback.css for the shimmer
   animation definition — reused here, not redefined) --- */

.bholats-product-card--skeleton .bholats-product-card__media,
.bholats-product-card--skeleton .bholats-skeleton-line {
	background: var(--color-surface-muted);
}

/* --- Grid ---
   Product-grid column counts per docs/DESIGN-SYSTEM.md §4: 2 (mobile) / 3
   (tablet ≥768px) / 4 (desktop ≥1024px) / 5 (wide ≥1440px). Gutters are
   tighter than a marketing grid per the "commercial density" objective. */

.bholats-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.bholats-product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

@media (min-width: 1024px) {
	.bholats-product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
	.bholats-product-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Mobile: spec chips drop to a max of 2 (enforced in template logic) and
   action-row buttons stack full-width if the card is narrower than ~160px. */
@media (max-width: 479px) {
	.bholats-product-card__body { padding: var(--space-3); gap: var(--space-1); }
}