.manon-loop-swatches {
	box-sizing: border-box;
	clear: both;
	display: block;
	margin: 8px 0 0;
	min-height: 24px;
	padding: 0;
	text-align: center;
	width: 100%;
}

/* Imported Customizer rules clamp desktop titles and mobile category labels to
 * fixed boxes. Let each label use its natural height; the alignment script
 * then reserves the tallest natural category/title/price rows for its peers. */
body ul.products.products_variant_under > li.product .product-details .posted_in {
	-webkit-box-orient: initial !important;
	-webkit-line-clamp: unset !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	white-space: normal !important;
}

body ul.products.products_variant_under > li.product .product-details .woocommerce-loop-product__title {
	-webkit-box-orient: initial !important;
	-webkit-line-clamp: unset !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	white-space: normal !important;
}

body ul.products.products_variant_under > li.product .product-details .price {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.manon-loop-swatches .variations,
.manon-loop-swatches .woo-variation-items-wrapper,
.manon-loop-swatches .color-variable-items-wrapper {
	align-content: flex-start !important;
	align-items: flex-start !important;
	box-sizing: border-box;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

.manon-loop-swatches .color-variable-items-wrapper {
	gap: 4px !important;
}

.manon-loop-swatches .manon-color-swatch {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 50% !important;
	box-shadow: 0 0 0 1px #fff inset;
	box-sizing: border-box;
	cursor: pointer;
	display: block !important;
	flex: 0 0 20px;
	height: 20px !important;
	margin: 0 0 4px !important;
	min-height: 20px !important;
	min-width: 20px !important;
	outline: none;
	overflow: hidden;
	padding: 1px !important;
	transition: box-shadow .15s ease, transform .15s ease;
	width: 20px !important;
}

.manon-loop-swatches .manon-color-swatch:hover,
.manon-loop-swatches .manon-color-swatch:focus-visible {
	box-shadow: 0 0 0 2px #7c7c7c;
	transform: translateY(-1px);
}

.manon-loop-swatches .manon-color-swatch.selected,
.manon-loop-swatches .manon-color-swatch[aria-checked="true"] {
	box-shadow: 0 0 0 2px #111;
}

/* Rife reveals the variable-product CTA over the card image on hover. Touch
 * browsers can keep that hover state after a swatch tap, covering the selected
 * colour image. Keep the preview unobstructed until the swatch is deselected. */
.woocommerce ul.products.button_over li.product.manon-swatch-selected .button.product_type_variable {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

.manon-loop-swatches .variable-item-contents,
.manon-loop-swatches .variable-item-span-color {
	border-radius: 50% !important;
	box-sizing: border-box;
	display: block !important;
	height: 100% !important;
	margin: 0 !important;
	min-height: 100% !important;
	min-width: 100% !important;
	padding: 0 !important;
	width: 100% !important;
}

@media (max-width: 767px) {
	.manon-loop-swatches {
		margin-top: 4px;
		min-height: 28px;
	}

	.manon-loop-swatches .color-variable-items-wrapper {
		gap: 2px !important;
	}

	body ul.products > li.product .manon-loop-swatches ul.color-variable-items-wrapper > li.manon-color-swatch[role="radio"] {
		align-items: center;
		background: transparent;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
		block-size: 28px !important;
		display: flex !important;
		flex: 0 1 28px;
		height: 28px !important;
		justify-content: center;
		margin-bottom: 0 !important;
		min-height: 28px !important;
		min-width: 0 !important;
		max-height: none !important;
		overflow: visible;
		padding: 1px !important;
		width: 28px !important;
	}

	.manon-loop-swatches .variable-item-contents {
		aspect-ratio: 1;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .16);
		box-shadow: 0 0 0 1px #fff inset;
		height: auto !important;
		max-width: 26px;
		min-height: 0 !important;
		min-width: 0 !important;
		padding: 1px !important;
		position: relative;
		width: 100% !important;
	}

	/* The imported Customizer CSS fixes archive lists at 72px. Use the same
	 * compact, single-row card controls on home, shop, and category loops. */
	body ul.products > li.wvs-archive-product-wrapper.product.manon-variable-product-card > .wvs-archive-variations-wrapper.manon-loop-swatches > ul.variations > li.woo-variation-items-wrapper > ul.archive-variable-items.color-variable-items-wrapper {
		align-items: flex-start !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 2px !important;
		justify-content: center !important;
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	body ul.products > li.wvs-archive-product-wrapper.product.manon-variable-product-card > .wvs-archive-variations-wrapper.manon-loop-swatches > ul.variations > li.woo-variation-items-wrapper > ul.archive-variable-items.color-variable-items-wrapper > li.variable-item.manon-color-swatch[role="radio"] {
		align-items: center !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		block-size: 28px !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex: 0 1 28px !important;
		height: 28px !important;
		justify-content: center !important;
		margin: 0 !important;
		max-height: none !important;
		min-height: 28px !important;
		min-width: 0 !important;
		overflow: visible !important;
		padding: 1px !important;
		width: 28px !important;
	}

	body ul.products > li.wvs-archive-product-wrapper.product.manon-variable-product-card > .wvs-archive-variations-wrapper.manon-loop-swatches > ul.variations > li.woo-variation-items-wrapper > ul.archive-variable-items.color-variable-items-wrapper > li.variable-item.manon-color-swatch[role="radio"] > .variable-item-contents {
		aspect-ratio: 1 !important;
		background: #fff !important;
		border: 1px solid rgba(0, 0, 0, .16) !important;
		box-sizing: border-box !important;
		height: auto !important;
		max-width: 26px !important;
		min-height: 0 !important;
		min-width: 0 !important;
		padding: 1px !important;
		position: relative !important;
		width: 100% !important;
	}

	/* Keep the hit target invisible: the reference card has one clean colour
	 * circle, with a black ring and white tick only on the selected colour. */
	body ul.products > li.product .manon-loop-swatches li.manon-color-swatch.selected > .variable-item-contents,
	body ul.products > li.product .manon-loop-swatches li.manon-color-swatch[aria-checked="true"] > .variable-item-contents {
		border-color: #111 !important;
		box-shadow: 0 0 0 2px #111 !important;
	}

	body ul.products > li.product .manon-loop-swatches li.manon-color-swatch.selected > .variable-item-contents::before,
	body ul.products > li.product .manon-loop-swatches li.manon-color-swatch[aria-checked="true"] > .variable-item-contents::before {
		background-image: none !important;
		content: none !important;
	}

	body ul.products > li.product .manon-loop-swatches li.manon-color-swatch.selected > .variable-item-contents::after,
	body ul.products > li.product .manon-loop-swatches li.manon-color-swatch[aria-checked="true"] > .variable-item-contents::after {
		border: solid #fff;
		border-width: 0 2px 2px 0;
		content: "";
		display: block;
		height: 8px;
		left: 9px;
		position: absolute;
		top: 6px;
		transform: rotate(45deg);
		width: 4px;
	}

	/* Use the reference card's natural text rhythm: category, a small gap,
	 * product name, then price. Fixed-height text rows created a false empty
	 * band between the category and one-line product names. */
	body ul.products.products_variant_under > li.product .product-details {
		align-content: start !important;
		display: grid !important;
		grid-template-rows: auto auto auto !important;
		row-gap: 0 !important;
		width: 100% !important;
	}

	body ul.products.products_variant_under > li.product .posted_in {
		box-sizing: border-box !important;
		height: auto !important;
		letter-spacing: 1.6px !important;
		line-height: 14px !important;
		margin: 0 0 8px !important;
		min-height: 14px !important;
		overflow-wrap: anywhere;
		padding: 0 4px !important;
		word-break: normal;
	}

	body ul.products.products_variant_under > li.product .woocommerce-loop-product__title {
		-webkit-box-orient: initial !important;
		-webkit-line-clamp: unset !important;
		align-self: start !important;
		color: #111 !important;
		display: block !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		height: auto !important;
		line-height: 20px !important;
		margin: 0 !important;
		max-height: none !important;
		min-height: 0 !important;
		overflow: visible !important;
		overflow-wrap: anywhere;
		padding: 0 4px 1px !important;
		white-space: normal !important;
		word-break: normal;
	}

	body ul.products.products_variant_under > li.product .price {
		align-self: start !important;
		color: #111 !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		height: 24px !important;
		line-height: 24px !important;
		margin: 0 !important;
		min-height: 24px !important;
		padding: 0 !important;
		white-space: nowrap !important;
	}

	body ul.products.products_variant_under > li.product .price * {
		color: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
	}

	@media (max-width: 359px) {
		body ul.products.products_variant_under > li.product .woocommerce-loop-product__title {
			font-size: 14px !important;
			line-height: 18px !important;
			padding-left: 2px !important;
			padding-right: 2px !important;
		}

		body ul.products > li.product .manon-loop-swatches li.manon-color-swatch.selected > .variable-item-contents::after,
		body ul.products > li.product .manon-loop-swatches li.manon-color-swatch[aria-checked="true"] > .variable-item-contents::after {
			height: 38%;
			left: 50%;
			top: 45%;
			transform: translate(-50%, -50%) rotate(45deg);
			width: 20%;
		}
	}
}