/**
 * Skin Basic 1.5.0 — Product Card primary visual previews.
 * Presentation only: these controls never select a purchasable variation.
 */

.skin-basic-card-swatches {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: .4375rem;
	width: 100%;
	min-height: 1.5rem;
	margin-top: .125rem;
}

/* Small circular preview, matching the compact storefront reference. */
.skin-basic-card-swatches .skin-basic-card-swatch {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	min-height: 1.5rem;
	border-radius: 50%;
	cursor: pointer;
}

.skin-basic-card-swatches .skin-basic-card-swatch .wapu-swatch__media {
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 .5px var(--wtds-separator, var(--wtds-shadow-color-soft));
}

.skin-basic-card-swatches .skin-basic-card-swatch:hover .wapu-swatch__media,
.skin-basic-card-swatches .skin-basic-card-swatch:focus-visible .wapu-swatch__media {
	transform: scale(1.06);
}

.skin-basic-card-swatches .skin-basic-card-swatch:focus-visible {
	outline: none;
}

.skin-basic-card-swatches .skin-basic-card-swatch.is-active .wapu-swatch__media,
.skin-basic-card-swatches .skin-basic-card-swatch[aria-pressed="true"] .wapu-swatch__media {
	box-shadow:
		0 0 0 .09375rem var(--wtds-surface),
		0 0 0 .1875rem var(--wtds-ink);
}

.skin-basic-card-swatches__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding-inline: .125rem;
	color: var(--wtds-ink-3);
	font-family: var(--wtds-font-text);
	font-size: var(--wtds-fs-caption-2);
	font-weight: var(--wtds-fw-medium);
	line-height: 1;
	user-select: none;
}

/* When visual swatches are present, their chosen image owns the card preview.
 * Disable the generic second-gallery hover layer so it cannot cover that preview. */
.wapu-product-card.skin-basic-has-card-swatches .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--hover {
	display: none !important;
	opacity: 0 !important;
}

.wapu-product-card.skin-basic-has-card-swatches .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--featured,
.wapu-product-card.skin-basic-has-card-swatches:hover .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--featured,
.wapu-product-card.skin-basic-has-card-swatches:focus-within .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--featured {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.skin-basic-card-swatches .skin-basic-card-swatch .wapu-swatch__media {
		transition: none !important;
	}
	.skin-basic-card-swatches .skin-basic-card-swatch:hover .wapu-swatch__media,
	.skin-basic-card-swatches .skin-basic-card-swatch:focus-visible .wapu-swatch__media {
		transform: none;
	}
}