/**
 * Site-wide Rey variation swatches.
 *
 * Matches the PDP viewport visual language (round color/image chips + double ring)
 * for every catalog/loop surface that renders .rey-swatchList-itemContent —
 * Elementor Products widgets, Woo loops, Mariener cards, related products.
 *
 * PDP cart keeps a larger size via .mariener-pdp-card__cart overrides in product-page.css.
 */

.rey-swatchList.--type-color,
.rey-swatchList.--type-image {
	--components-align: start;
	--item-width: 24px !important;
	--item-height: 24px !important;
	--item-radius: 50% !important;
	--item-padding: 0px !important;
	--item-spacing: 8px !important;
	--item-border-size: 0px !important;
	--item-border-color: transparent !important;
	justify-content: flex-start !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}

.rey-swatchList.--type-color .rey-swatchList-item,
.rey-swatchList.--type-image .rey-swatchList-item {
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--link-color, var(--mariener-ink)) 15%, transparent);
	cursor: pointer;
	flex: 0 0 var(--item-width, 24px) !important;
	height: var(--item-height, 24px) !important;
	max-height: var(--item-height, 24px) !important;
	max-width: var(--item-width, 24px) !important;
	min-height: var(--item-height, 24px) !important;
	min-width: var(--item-width, 24px) !important;
	overflow: hidden;
	padding: 0 !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	width: var(--item-width, 24px) !important;
}

.rey-swatchList.--type-color .rey-swatchList-item:hover:not(.--selected),
.rey-swatchList.--type-image .rey-swatchList-item:hover:not(.--selected) {
	transform: scale(1.08);
}

.rey-swatchList.--type-color .rey-swatchList-item.--selected,
.rey-swatchList.--type-color .rey-swatchList-item.--selected:hover,
.rey-swatchList.--type-image .rey-swatchList-item.--selected,
.rey-swatchList.--type-image .rey-swatchList-item.--selected:hover {
	box-shadow:
		0 0 0 2px var(--body-bg-color, var(--mariener-surface)),
		0 0 0 4px var(--link-color, var(--mariener-ink)) !important;
	transform: none;
}

.rey-swatchList.--type-color .rey-swatchList-item .__swatch,
.rey-swatchList.--type-image .rey-swatchList-item .__swatch,
.rey-swatchList.--type-color .rey-swatchList-itemContent,
.rey-swatchList.--type-image .rey-swatchList-itemContent {
	border-radius: 50% !important;
	display: block !important;
	height: 100% !important;
	overflow: hidden;
	width: 100% !important;
}

.rey-swatchList.--type-color .rey-swatchList-itemContent img,
.rey-swatchList.--type-image .rey-swatchList-itemContent img {
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.rey-swatchList.--type-color .__tooltip,
.rey-swatchList.--type-image .__tooltip {
	display: none !important;
}