/**
 * Reusable product card (template-parts/product/product-card.php). Shared
 * by the homepage "Most worn" grid and every Shop/category grid, so this
 * loads wherever that template part can render (see includes/class-assets.php)
 * rather than being duplicated per page.
 */

.k-product-card {
	position: relative;
}

.k-product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--k-color-surface-light);
}

.k-product-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.k-product-card__placeholder {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--k-color-surface-light-alt);
}

.k-product-card__image--hover {
	opacity: 0;
	transition: opacity 600ms var(--k-ease);
}

.k-product-card:hover .k-product-card__image--hover,
.k-product-card:focus-within .k-product-card__image--hover {
	opacity: 1;
}

/* Wishlist toggle (Phase 10B) — a real, working button; assets/js/
 * wishlist.js flips aria-pressed (guest: from localStorage, logged in: from
 * the karataki_wishlist_add/remove admin-ajax response) and this file only
 * styles the two resulting states. */
.k-product-card__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 9, 0.4);
	border: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: var(--k-color-text);
	cursor: pointer;
	transition: color 200ms;
}

.k-product-card__wishlist span::before {
	content: "\2661"; /* ♡ outline — not saved. */
}

.k-product-card__wishlist[aria-pressed="true"] {
	color: var(--k-color-accent);
}

.k-product-card__wishlist[aria-pressed="true"] span::before {
	content: "\2665"; /* ♥ filled — saved. */
}

.k-product-card__quick-add {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 74px;
	z-index: 3;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 380ms ease, transform 380ms var(--k-ease);
}

.k-product-card:hover .k-product-card__quick-add,
.k-product-card:focus-within .k-product-card__quick-add {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.k-product-card__quick-add .button,
.k-product-card__quick-add a {
	display: block;
	width: 100%;
	padding: 13px;
	background: var(--k-color-bg);
	color: var(--k-color-text);
	border: 1px solid var(--k-border-cta);
	font-size: var(--k-text-label);
	letter-spacing: var(--k-tracking-label);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background 300ms, color 300ms;
}

.k-product-card__quick-add .button:hover,
.k-product-card__quick-add a:hover {
	background: var(--k-color-text);
	color: var(--k-color-bg);
}

.k-product-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 14px;
}

.k-product-card__name {
	font-size: 14px;
}

.k-product-card__price {
	font-size: 14px;
	color: var(--k-color-muted-2);
	font-variant-numeric: tabular-nums;
}

.k-product-card__meta {
	margin-top: 5px;
	font-size: var(--k-text-label);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--k-color-muted-3);
}

/* On touch devices there's no hover — always show quick add so it's
   reachable. The wishlist placeholder stays dimmed/disabled on every
   device; it was never a hover-reveal control. */
@media (hover: none) {
	.k-product-card__quick-add {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		position: static;
		margin-top: 10px;
	}
}