/* ============================================================================
   Selector de tallas — estilo pill
   ----------------------------------------------------------------------------
   Reemplaza el <select> nativo por una rejilla de pastillas, como el sitio de
   referencia: rectangulo redondeado, borde fino, FONDO BLANCO y texto oscuro.

   Nada de grises de relleno: el gris solo aparece en el borde y en las tallas
   no disponibles.
   ========================================================================= */

/* El select original se oculta pero sigue en el DOM: es el que WooCommerce lee
   para resolver la variacion. Nunca se elimina. */
.wctt-select-oculto {
	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;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Contenedor: sin fondo gris heredado de la tabla de variaciones. */
.wctt-tallas-wrap {
	background: #fff;
	margin: 0 0 16px;
}

.wctt-tallas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Columnas anchas: con celdas angostas y radio 100px la pastilla
	   se ve como un circulo. La referencia usa ~87px de ancho. */
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
}

/* La pastilla. Delgada: 40px de alto, no un circulo.
   ----------------------------------------------------------------------------
   POR QUE HAY !important ACA
   La pastilla es un <button> dentro de .cart, y Elementor imprime CSS por
   widget para el boton de compra:

     .elementor-208 .elementor-element.elementor-element-224a654 .cart button
     { background: #0E00AA; border-radius: 0 }

   Eso es especificidad (0,4,1). Competirle sin !important obligaria a repetir
   el hash del widget (elementor-element-224a654), que cambia si se rehace la
   ficha. El !important esta acotado a las propiedades que Elementor pisa:
   fondo, color, borde, radio y padding. Nada mas.
   -------------------------------------------------------------------------- */
.wctt-tallas .wctt-talla {
	display: flex;
	align-items: center;
	justify-content: center;

	/* Valores tomados del CSS de joma-sport.com:
	   padding 3px 8px · alto 31.73px · radio 100px · borde 1px #999
	   fuente 15.83px / 23.745px · peso 400 · texto negro
	   El radio de 100px es lo que la convierte en pill; con 4px se veia como
	   un cuadrado redondeado. */
	width: 100% !important;
	min-width: 0 !important;
	min-height: 32px !important;
	height: 32px !important;
	padding: 3px 8px !important;
	margin: 0 !important;

	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid #999 !important;
	border-radius: 100px !important;
	box-shadow: none !important;

	font-family: inherit !important;
	font-size: 15.83px !important;
	font-weight: 400 !important;
	line-height: 23.745px !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-transform: none !important;
	color: #000 !important;

	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.wctt-tallas .wctt-talla:hover {
	border-color: #222 !important;
	background: #fff !important;
	color: #222 !important;
}

/* Seleccionada: se marca con el borde, no rellenando de color, para que el
   fondo siga siendo blanco. */
.wctt-tallas .wctt-talla.is-activa {
	border-color: #0d00aa !important;
	box-shadow: inset 0 0 0 1px #0d00aa !important;
	color: #0d00aa !important;
	font-weight: 600 !important;
	background: #fff !important;
}

.wctt-tallas .wctt-talla:focus-visible {
	outline: 2px solid #0d00aa;
	outline-offset: 2px;
}

/* No disponible: visible pero apagada, como en la referencia. */
.wctt-tallas .wctt-talla[disabled],
.wctt-tallas .wctt-talla.is-agotada {
	background: #fff !important;
	border-color: #e6e6e6 !important;
	color: #b0b0b0 !important;
	cursor: not-allowed;
}

.wctt-tallas .wctt-talla[disabled]:hover {
	border-color: #e6e6e6 !important;
	color: #b0b0b0 !important;
}

/* Quitar el gris de la tabla de variaciones.
   Medido en el navegador: td.value trae background rgba(128,128,128,0.07), un
   gris al 7% que se ve como una banda detras del titulo y de las pastillas.
   Lleva !important por lo mismo que las pastillas: la regla que lo pinta viene
   del CSS por-widget de Elementor y gana por especificidad. */
.variations td.value,
.variations td.label,
.variations,
.variations tr,
.variations td,
.variations th,
.woocommerce-variation-price,
.single_variation_wrap {
	background: transparent !important;
}

.variations td,
.variations th {
	border: 0;
	padding: 0;
}

@media (max-width: 480px) {
	.wctt-tallas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.wctt-talla { transition: none; }
}

/* ── Correccion de ancho ──────────────────────────────────────────────────
   El <span class="wctt-tallas-datos"> que envuelve al select para llevar el
   data-todas es un elemento INLINE, y hacia que el contenedor de pastillas
   colapsara a 78px (el ancho de una) dentro de un td de 359px. Pasa a block.

   Y la rejilla pasa de grid a flex con wrap, que es lo que usa la referencia:
   las pastillas se acomodan solas segun el ancho disponible, sin depender de
   calcular columnas contra un contenedor de ancho variable.
   ---------------------------------------------------------------------- */
.wctt-tallas-datos {
	display: block;
	width: 100%;
}

.wctt-tallas-wrap {
	width: 100%;
}

.wctt-tallas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wctt-tallas li {
	flex: 0 0 auto;
	list-style: none;
}

/* Ancho por contenido con un minimo, como la referencia (~87px). */
.wctt-tallas .wctt-talla {
	width: auto !important;
	min-width: 78px !important;
}

/* ── Ajuste pedido: borde negro y numero en 600 ────────────────────────────
   Se aparta de la referencia a proposito: alla el borde es #999 y el peso 400.
   Va al final del archivo para que gane por orden, sin subir especificidad.
   ---------------------------------------------------------------------- */
.wctt-tallas .wctt-talla {
	border-color: #000 !important;
	color: #000 !important;
	font-weight: 600 !important;
}

/* Seleccionada: se refuerza con un anillo interior, no con color, para que el
   borde siga siendo negro como se pidio. */
.wctt-tallas .wctt-talla.is-activa {
	border-color: #000 !important;
	box-shadow: inset 0 0 0 1px #000 !important;
	color: #000 !important;
	font-weight: 600 !important;
}

.wctt-tallas .wctt-talla:hover:not([disabled]) {
	border-color: #000 !important;
	box-shadow: inset 0 0 0 1px #000 !important;
}

/* Las agotadas se reafirman DESPUES, para que el negro de arriba no las pise:
   siguen apagadas, que es lo que comunica que no hay stock. */
.wctt-tallas .wctt-talla[disabled],
.wctt-tallas .wctt-talla.is-agotada {
	border-color: #e0e0e0 !important;
	color: #b0b0b0 !important;
	font-weight: 400 !important;
	box-shadow: none !important;
}