/**
 * Colour dots. Markup: inc/product-swatches.php, behaviour: js/product-swatches.js.
 * No inline styles: every dot colour is a modifier class picked from the
 * option name.
 */

/* The real WooCommerce select stays in the page (it drives price/stock/image)
   but is visually hidden; the dots set it. */
select[data-ec-swatch-select] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	border: 0 !important;
}

/* Stacked: label, then the selected colour, then the dots, then Clear. */
.ec-swatches__current {
	margin-bottom: 10px;
	line-height: 1.3;
	color: #333e48;
}

.ec-swatches__label {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 600;
	color: #333e48;
}

.ec-swatches__name {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #6b7580;
}

/* Dot rows: drop WooCommerce's separate label column (the label is inline
   above the dots) so everything lines up with the price above.
   :has() styles it before the JS runs; .ec-swatch-row (added by the JS) is
   the fallback for older browsers. */
table.variations tr:has(.ec-swatches) > th,
table.variations tr.ec-swatch-row > th {
	display: none;
}

table.variations tr:has(.ec-swatches) > td,
table.variations tr.ec-swatch-row > td {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Clear sits under the dots and reads as an action (an x and an underline),
   not as a colour name. WooCommerce still controls when it is visible. */
table.variations tr:has(.ec-swatches) .reset_variations,
table.variations tr.ec-swatch-row .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	color: #6b7580;
	text-decoration: underline;
	text-underline-offset: 2px;
}

table.variations tr:has(.ec-swatches) .reset_variations::before,
table.variations tr.ec-swatch-row .reset_variations::before {
	content: "\00d7";
	display: inline-block;
	margin-right: 4px;
	text-decoration: none;
}

table.variations tr:has(.ec-swatches) .reset_variations:hover,
table.variations tr.ec-swatch-row .reset_variations:hover {
	color: #ce1d76;
}

.ec-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Electro styles every <button>; reset hard so the dot is all that shows. */
.ec-swatches .ec-swatch,
.ec-swatches .ec-swatch:hover,
.ec-swatches .ec-swatch:focus {
	position: relative;
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 3px !important;
	border: 2px solid transparent !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0;
}

.ec-swatches .ec-swatch:hover {
	border-color: #d5d9de !important;
}

.ec-swatches .ec-swatch.is-selected {
	border-color: #ce1d76 !important;
}

.ec-swatches .ec-swatch:focus-visible {
	outline: 2px solid #ce1d76;
	outline-offset: 2px;
}

.ec-swatch__dot {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	background: #c8cdd2;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Base colours */
.ec-swatch__dot--black  { background: #1b1b1d; }
.ec-swatch__dot--smoke  { background: #3a3d42; }
.ec-swatch__dot--white  { background: #f7f7f5; box-shadow: inset 0 0 0 1px #d5d9de; }
.ec-swatch__dot--grey   { background: #8d939a; }
.ec-swatch__dot--silver { background: linear-gradient(135deg, #e6e8ea, #a9afb5); }
.ec-swatch__dot--blue   { background: #2457c5; }
.ec-swatch__dot--purple { background: #7b4bc4; }
.ec-swatch__dot--pink   { background: #e86aa6; }
.ec-swatch__dot--red    { background: #d32f2f; }
.ec-swatch__dot--orange { background: #f07d1a; }
.ec-swatch__dot--yellow { background: #f2c919; }
.ec-swatch__dot--gold   { background: linear-gradient(135deg, #f3d77a, #b8892c); }
.ec-swatch__dot--green  { background: #2f9e5b; }
.ec-swatch__dot--teal   { background: #1aa3a3; }
.ec-swatch__dot--clear  { background: #eef3f7; }

/* See-through shells (transparent / clear / smoke): a faint checkerboard
   shows through a tinted, semi-transparent layer of the base colour. */
.ec-swatch__dot.is-see-through {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
		repeating-conic-gradient(#d9dde1 0% 25%, #ffffff 0% 50%);
	background-size: auto, 10px 10px;
}

.ec-swatch__dot.is-see-through::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0.72;
	background: inherit;
}

.ec-swatch__dot--black.is-see-through::after  { background: #1b1b1d; }
.ec-swatch__dot--smoke.is-see-through::after  { background: #3a3d42; }
.ec-swatch__dot--blue.is-see-through::after   { background: #2457c5; }
.ec-swatch__dot--purple.is-see-through::after { background: #7b4bc4; }
.ec-swatch__dot--pink.is-see-through::after   { background: #e86aa6; }
.ec-swatch__dot--red.is-see-through::after    { background: #d32f2f; }
.ec-swatch__dot--green.is-see-through::after  { background: #2f9e5b; }
.ec-swatch__dot--teal.is-see-through::after   { background: #1aa3a3; }
.ec-swatch__dot--orange.is-see-through::after { background: #f07d1a; }
.ec-swatch__dot--yellow.is-see-through::after { background: #f2c919; }
.ec-swatch__dot--grey.is-see-through::after   { background: #8d939a; }
.ec-swatch__dot--clear.is-see-through::after  { background: #ffffff; opacity: 0.35; }

/* Fallback: the colour's own photo, shrunk to fit (never cropped). */
.ec-swatch__dot--photo {
	object-fit: contain;
	background: #f2f2f2;
}

.ec-swatch__dot--unknown {
	background: repeating-linear-gradient(45deg, #e3e6ea 0 4px, #f4f5f7 4px 8px);
}