/**
 * BWOD WC Product Pages — archive/loop colour dots ([bwod_product_card_colors]).
 *
 * Self-contained: matrix.css only loads on product pages, so the dot styles are
 * defined here rather than reused.
 */

.bwod-pp-cardcolors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
}

.bwod-pp-cardswatch {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	line-height: 0;
	flex: 0 0 auto;
}

/* Theme-proof hover/focus — the theme styles button:hover globally. */
.bwod-pp-cardswatch:hover,
.bwod-pp-cardswatch:focus {
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}

.bwod-pp-carddot {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #ddd;
}

.bwod-pp-cardswatch:hover .bwod-pp-carddot {
	border-color: #1f2d3d;
}

.bwod-pp-cardswatch.is-selected .bwod-pp-carddot,
.bwod-pp-cardswatch:focus-visible .bwod-pp-carddot {
	outline: 2px solid #1f2d3d;
	outline-offset: 2px;
}

.bwod-pp-cardmore {
	font-size: 11px;
	line-height: 1;
	color: #777;
}