/* COCÓ Swatches. Las reglas visuales usan :where() (especificidad 0) para que el CSS del tema las pise sin !important. */

/* Mostrar swatches / ocultar desplegable sólo cuando el JS está presente. */
html:not(.coco-sw-js) .variations_form:not(.coco-sw-ready) .coco-sw { display: none; }
html.coco-sw-js .variations_form .coco-sw-select,
.variations_form.coco-sw-ready .coco-sw-select { display: none !important; }

.coco-sw {
	--coco-sw-size: 30px;
	--coco-sw-ink: #111;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 12px;
	margin: 6px 0 10px;
	width: 100%;
}

:where(.coco-sw) :where(.coco-sw__item) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	line-height: 1.2;
}

:where(.coco-sw) :where(.coco-sw__item:focus-visible) {
	outline: 2px solid var(--coco-sw-ink);
	outline-offset: 3px;
}

/* ---- Color: cuadrado + nombre ---- */

:where(.coco-sw--color) :where(.coco-sw__item) {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 44px;
	padding: 0;
	border: 0;
	background: none;
}

:where(.coco-sw--color) :where(.coco-sw__swatch) {
	position: relative;
	display: block;
	width: var(--coco-sw-size);
	height: var(--coco-sw-size);
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
	outline: 1px solid transparent;
	outline-offset: 3px;
	transition: outline-color .15s ease;
}

:where(.coco-sw--color) :where(.coco-sw__swatch.is-light) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
:where(.coco-sw--color) :where(.coco-sw__swatch.is-empty) { background: repeating-linear-gradient(45deg, #e6e6e6 0 4px, #fff 4px 8px); }

:where(.coco-sw--color) :where(.coco-sw__item:hover .coco-sw__swatch) { outline-color: rgba(0, 0, 0, .3); }
:where(.coco-sw--color) :where(.coco-sw__item[aria-pressed="true"] .coco-sw__swatch) { outline-color: var(--coco-sw-ink); }

:where(.coco-sw--color) :where(.coco-sw__name) {
	max-width: 76px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	overflow-wrap: anywhere;
}

:where(.coco-sw--color) :where(.coco-sw__item[aria-pressed="true"] .coco-sw__name) { font-weight: 700; }

/* Sin stock con el talle elegido: línea diagonal, sigue siendo clickeable. */
:where(.coco-sw--color) :where(.coco-sw__item.is-unavailable .coco-sw__swatch)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - .75px), rgba(0, 0, 0, .6) calc(50% - .75px), rgba(0, 0, 0, .6) calc(50% + .75px), transparent calc(50% + .75px));
}
:where(.coco-sw--color) :where(.coco-sw__item.is-unavailable .coco-sw__name) { opacity: .5; }

/* Nombre del color elegido junto a la etiqueta: "Color: Negro". */
.coco-sw-current:not(:empty)::before { content: ": "; }
.coco-sw-current { font-weight: 400; }

/* ---- Botones de texto (talles). Si el tema ya estiliza .variation-btn, eso manda. ---- */

/* Mismo contenedor que tenía el snippet (.variation-buttons). */
.coco-sw--button { gap: 8px; margin: 0 0 12px; }

:where(.coco-sw--button) :where(.coco-sw__item) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #f5f5f5;
	color: #333;
	font-size: 14px;
	font-weight: 700;
}

:where(.coco-sw--button) :where(.coco-sw__item[aria-pressed="true"]) {
	background: var(--coco-sw-ink);
	border-color: var(--coco-sw-ink);
	color: #fff;
}

:where(.coco-sw--button) :where(.coco-sw__item:disabled) {
	background: #eee;
	color: #aaa;
	cursor: not-allowed;
}