/* Iconika Tienda — selector de color con foto y rejilla de tallas. */

/* --- Selector de color: miniatura de la prenda, no un circulo --- */
.woo-variation-swatches .variable-items-wrapper.image-variable-wrapper .variable-item.image-variable-item {
	width: 58px;
	height: 58px;
	padding: 2px;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 0 0 1px #dcdcdc;
}

.woo-variation-swatches .variable-items-wrapper.image-variable-wrapper .variable-item.image-variable-item:hover {
	box-shadow: 0 0 0 1px #9a9a9a;
}

.woo-variation-swatches .variable-items-wrapper.image-variable-wrapper .variable-item.image-variable-item.selected {
	box-shadow: 0 0 0 2px #111;
}

.woo-variation-swatches .variable-items-wrapper.image-variable-wrapper .variable-item.image-variable-item img.variable-item-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.woo-variation-swatches .variable-items-wrapper.image-variable-wrapper {
	gap: 8px;
}

/* --- Rejilla de tallas --- */
.iconika-size-matrix {
	flex: 1 0 100%;
	width: 100%;
	margin: 0 0 18px;
}

.iconika-size-matrix__hint {
	margin: 0;
	color: #666;
	font-size: 14px;
}

.iconika-size-matrix__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iconika-size-matrix__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 76px;
	text-align: center;
}

.iconika-size-matrix__stock {
	font-size: 12px;
	line-height: 1.2;
	color: #7a7a7a;
}

.iconika-size-matrix__size {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.iconika-size-matrix__qty {
	width: 68px;
	padding: 8px 6px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
}

.iconika-size-matrix__qty::-webkit-outer-spin-button,
.iconika-size-matrix__qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.iconika-size-matrix__price {
	font-size: 13px;
	color: #333;
}

.iconika-size-matrix__cell--out-of-stock {
	opacity: 0.45;
}

.iconika-size-matrix__summary {
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
}

.iconika-size-matrix__feedback {
	margin-top: 10px;
	font-size: 14px;
}

.iconika-size-matrix__feedback--error {
	color: #b3261e;
}

.iconika-size-matrix__feedback--ok {
	color: #1b7f3b;
}

/* Con la rejilla activa, la talla y la cantidad sueltas sobran. */
.iconika-matrix-active .variations tr.iconika-hidden-row,
.iconika-matrix-active .quantity.iconika-hidden-qty {
	display: none !important;
}

@media (max-width: 480px) {
	.iconika-size-matrix__cell {
		min-width: 64px;
	}

	.iconika-size-matrix__qty {
		width: 60px;
	}
}

/* La rejilla manda: ocupa toda la fila y el boton vuelve debajo, sin estirarse. */
form.cart.iconika-matrix-active .woocommerce-variation-add-to-cart.variations_button {
	display: flex;
	/* El widget de Elementor fija nowrap con :is() y se encola despues: hace falta el !important. */
	flex-wrap: wrap !important;
	align-items: flex-start;
	row-gap: 12px;
}

form.cart.iconika-matrix-active .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
	align-self: flex-start;
	flex: 0 0 auto;
}

/* El precio de la variación se queda visible, como estaba antes de la rejilla. Lo que se oculta
   es la descripción, que nombra una talla que el cliente no ha elegido (la rejilla manda). */
form.cart.iconika-matrix-active .woocommerce-variation-description {
	display: none !important;
}

/* El boton de personalizar vive entre "Limpiar" y el precio. Va en contorno rosa: se distingue
   sin quitarle protagonismo al de comprar, que es el relleno solido. */
.iconika-boton-personalizar,
a.iconika-boton-personalizar {
	display: inline-block;
	margin: 6px 0 20px;
	padding: 11px 26px;
	border: 2px solid #f1106c;
	border-radius: 999px;
	background: transparent;
	color: #f1106c;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.iconika-boton-personalizar:hover,
.iconika-boton-personalizar:focus {
	background: #f1106c;
	color: #fff;
}

.iconika-boton-personalizar:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}