/* Bottles for Earth shop colour groups: the swatch row on a product card.
   Sits under the price. Dots are 16px with a 24px touch target; a white swatch gets a light ring. */

body.bfe-cards.bfe-cards ul.products li.product .bfe-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 6px 0 2px;
	padding: 0;
	touch-action: pan-y; /* a finger can slide across swatches sideways; vertical drags still scroll the page */
	-webkit-tap-highlight-color: transparent;
}

body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--bfe-sw, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease;
}

body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 0.2s ease;
}

body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch.is-active::after {
	box-shadow: 0 0 0 1.5px #1d1d1b;
}

body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch:focus-visible {
	outline: 2px solid #2bb573;
	outline-offset: 1px;
}

@media (hover: hover) {
	body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch:hover::before {
		transform: scale(1.12);
	}
}

/* A colour that cannot be bought right now keeps the card honest. */
body.bfe-cards.bfe-cards ul.products li.product a.button.is-unavailable {
	opacity: 0.5;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch::before,
	body.bfe-cards.bfe-cards ul.products li.product .bfe-swatch::after {
		transition: none;
	}
}

/* Cards without swatches keep the same height, so prices line up across a row. */
body.bfe-grouped.bfe-cards.bfe-cards ul.products li.product:not(.bfe-has-swatches) .mk-product-warp::after {
	content: "";
	flex: 0 0 32px;
}

/* While a swatch is in use the theme's hover photo (second image) stays hidden, so the first photo of the colour shows. */
body.bfe-cards.bfe-cards ul.products li.product.bfe-no-hover-img .mk-product-thumbnail-hover {
	opacity: 0 !important;
}

/* The title changes when a swatch is hovered ("Audrey" -> "Audrey White"), and a longer name can wrap to a second
   line. Without a fixed height the swatch row would jump away from the pointer, end the hover, and flicker back.
   Two lines are always reserved on cards with swatches (the theme already clamps titles to two lines). */
body.bfe-cards.bfe-cards ul.products li.product.bfe-has-swatches .woocommerce-loop-product__title {
	min-height: calc(2 * 1.5em);
}