/* Store product cards, version 2 (inc/pfp-store-cards.php).
   Everything is scoped to .cat-card--v2, so the current card is untouched.
   Adjust the variables to match the theme. */

.cat-card--v2 {
	--card-muted: #6b6f73;
	--card-line: #e3e3e3;
	--badge-bg: #1f3a5f;
	--badge-fg: #fff;
	--badge-new: #2e7d4f;
	--badge-sale: #b5262b;
	--card-swap: 300ms;
}

/* Photo + hover photo ---------------------------------------------------- */

.cat-card--v2 .cat-card__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.cat-card--v2 .cat-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.cat-card--v2 .cat-card__img--alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--card-swap) ease;
}

/* Only on devices with a real pointer; phones keep the main photo. */
@media (hover: hover) {
	.cat-card--v2.has-hover:hover .cat-card__img--alt,
	.cat-card--v2.has-hover:focus-within .cat-card__img--alt {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cat-card--v2 .cat-card__img--alt { transition: none; }
}

/* Badges ----------------------------------------------------------------- */

.cat-card--v2 .cat-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 1;
	pointer-events: none;
}

.cat-badge {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 3px;
	background: var(--badge-bg, #1f3a5f);
	color: var(--badge-fg, #fff);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.cat-badge--new { background: var(--badge-new, #2e7d4f); }
.cat-badge--clearance { background: var(--badge-sale, #b5262b); }

/* Collection + brand ------------------------------------------------------ */

.cat-card--v2 .cat-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 24px;
	margin-bottom: 4px;
}

.cat-card--v2 .cat-card__collection {
	margin: 0;
	color: var(--card-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cat-card--v2 .cat-card__brand {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--card-muted);
	font-size: 12px;
}

.cat-card--v2 .cat-card__brand-logo {
	display: block;
	width: auto;
	max-width: 90px;
	height: auto;
	max-height: 22px;
	object-fit: contain;
}

/* Colour dots -------------------------------------------------------------- */

.cat-card--v2 .cat-card__colours {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	color: var(--card-muted);
	font-size: 13px;
}

.cat-card--v2 .cat-card__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.cat-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--dot, #b9b9b9);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.cat-dot__more {
	font-size: 12px;
	color: var(--card-muted, #6b6f73);
}