.clc-product-swatches {
	position: relative;
	z-index: 2;
	margin: 0.75rem 1.25rem 0;
}

/* En pantallas grandes manda la muestra de color; el resumen textual no se ve. */
.clc-product-swatches__summary {
	display: none;
}

.clc-product-swatches__legend {
	display: block;
	margin-bottom: 0.5rem;
	color: #667066;
	font-size: 0.75rem;
	font-weight: 650;
}

.clc-product-swatches__pages {
	min-height: 34px;
}

.clc-product-swatches__page {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: repeat(5, 34px);
	align-items: center;
	justify-content: space-between;
	padding: 2px 2px;
}

.clc-product-swatches__page[hidden] {
	display: none;
}

.clc-product-swatches__navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.clc-product-swatches__arrow {
	display: inline-grid;
	min-width: 40px;
	height: 40px;
	place-items: center;
	padding: 0;
	border: 1px solid #d9dfd7;
	border-radius: 50%;
	background: #fff;
	color: #123d22;
	cursor: pointer;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 750;
	line-height: 1;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.clc-product-swatches__arrow:hover:not([aria-disabled="true"]),
.clc-product-swatches__arrow:focus-visible:not([aria-disabled="true"]) {
	border-color: #21722d;
	background: #21722d;
	color: #fff;
}

.clc-product-swatches__arrow:focus-visible {
	outline: 2px solid #21722d;
	outline-offset: 3px;
}

.clc-product-swatches__arrow[aria-disabled="true"] {
	cursor: default;
	opacity: 0.35;
}

.clc-product-swatches__page-status {
	min-width: 2.8rem;
	color: #667066;
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
}

.clc-product-swatch {
	position: relative;
	display: inline-flex;
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2px;
	overflow: visible;
	border: 2px solid transparent;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(32, 35, 31, 0.2);
	cursor: pointer;
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease,
		transform 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.clc-product-swatch:hover,
.clc-product-swatch:focus-visible {
	z-index: 3;
	border-color: #21722d;
	box-shadow:
		0 0 0 1px #21722d,
		0 4px 10px rgba(18, 61, 34, 0.2);
	outline: none;
	transform: translateY(-1px);
}

.clc-product-swatch[aria-pressed="true"] {
	border-color: #21722d;
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px #21722d;
}

.clc-product-swatch__surface {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	object-fit: cover;
	pointer-events: none;
}

.clc-product-swatch::after {
	position: absolute;
	right: 50%;
	bottom: calc(100% + 8px);
	width: max-content;
	max-width: 150px;
	padding: 0.25rem 0.5rem;
	border-radius: 5px;
	background: #123d22;
	color: #fff;
	content: attr(data-label);
	font-family: inherit;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.2;
	opacity: 0;
	pointer-events: none;
	text-align: center;
	transform: translate(50%, 4px);
	transition:
		opacity 120ms ease,
		transform 120ms ease;
	visibility: hidden;
	white-space: normal;
}

.clc-product-swatch:hover::after,
.clc-product-swatch:focus-visible::after {
	opacity: 1;
	transform: translate(50%, 0);
	visibility: visible;
}

.clc-product-swatch.is-unavailable {
	cursor: not-allowed;
	opacity: 0.48;
}

.clc-product-swatch.is-unavailable::before {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 2px;
	width: calc(100% - 4px);
	height: 1.5px;
	background: #8c2f23;
	content: "";
	pointer-events: none;
	transform: rotate(-45deg);
}

.clc-product-swatches--classic {
	margin-inline: 1.25rem;
}

.clc-product-swatches--editor {
	pointer-events: none;
}

.clc-product-swatch--editor {
	box-shadow: 0 0 0 1px rgba(32, 35, 31, 0.2);
}

/* En móvil ninguna tarjeta muestra las muestras de color: se reemplazan por el
   resumen textual, en todos los contextos donde aparezca el bloque —catálogo,
   destacados de la portada y los relacionados de la ficha, que usan la grilla
   clásica—. Elegir un color a este ancho no es cómodo y las filas de muestras
   descuadran el alto de las tarjetas; el detalle queda en la ficha del producto.

   La regla vive acá, en el bloque, y no en el tema: así cualquier contexto nuevo
   la hereda sin que haya que acordarse de agregar un selector. El corte en 520 px
   es el mismo que usa el tema para pasar la tarjeta a dos columnas.

   El `screen-reader-text` se calla porque el resumen ya nombra lo mismo y con la
   lista oculta quedaría anunciando muestras que no existen. */
@media (max-width: 520px) {
	.clc-product-swatches__list,
	.clc-product-swatches__pages,
	.clc-product-swatches__legend,
	.clc-product-swatches__navigation {
		display: none;
	}

	.clc-product-swatches__summary {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clc-product-swatch {
		transition: none;
	}
}