/* Color image swatches (Variation Studio) */

body.single-product .km-var-swatches--colors {
	gap: 10px;
}

body.single-product .km-var-swatch.km-var-swatch--image {
	width: 56px;
	height: 56px;
	min-width: 56px;
	min-height: 56px;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--sf-border, #d8dee6);
	border-radius: 6px;
	background: #ffffff;
	color: transparent;
	font-size: 0;
	line-height: 0;
}

body.single-product .km-var-swatch.km-var-swatch--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.single-product .km-var-swatch.km-var-swatch--image:hover,
body.single-product .km-var-swatch.km-var-swatch--image:focus-visible {
	background: #ffffff;
	border-color: var(--sf-primary, #1a365d);
	color: transparent;
	outline: none;
}

body.single-product .km-var-swatch.km-var-swatch--image.is-selected,
body.single-product .km-var-swatch.km-var-swatch--image[aria-pressed="true"] {
	background: #ffffff;
	border-color: var(--sf-primary, #1a365d);
	box-shadow: 0 0 0 1px var(--sf-primary, #1a365d);
	color: transparent;
}

body.single-product .km-var-swatch.km-var-swatch--image.is-selected:hover,
body.single-product .km-var-swatch.km-var-swatch--image[aria-pressed="true"]:hover {
	background: #ffffff;
	border-color: var(--sf-primary-hover, #132a4a);
	color: transparent;
}

body.single-product .km-var-swatch.km-var-swatch--image.is-disabled,
body.single-product .km-var-swatch.km-var-swatch--image:disabled {
	opacity: 0.4;
	text-decoration: none;
}

/* Studio gallery images may be smaller than the frame — fill without cropping. */
body.single-product .woocommerce-product-gallery.wvs-gallery-active .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

body.single-product .woocommerce-product-gallery.wvs-gallery-active .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center;
}
