/* Círculos de color — KRM Fit */

.krm-color-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.krm-swatch {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	cursor: pointer;
	padding: 0;
	box-sizing: border-box;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	flex: 0 0 auto;
}

.krm-swatch:hover {
	transform: scale(1.12);
}

.krm-swatch.is-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1a1a1a;
}

.krm-swatch--borde-marcado {
	border-color: rgba(0, 0, 0, 0.3);
}

.krm-swatch--extra {
	/* Colores que no caben en la fila: se quedan ocultos siempre. El botón
	   "+N" no los despliega aquí — lleva a la ficha del producto, donde sí
	   se ven y se pueden elegir todos. */
	display: none;
}

.krm-swatch-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	padding: 0 7px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #f2f2f2;
	color: #444;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.krm-swatch-more:hover {
	background: #e6e6e6;
}

/* Nota: a propósito no hay estilos aquí para la ficha de producto
   individual — ese selector de color lo maneja Variations XT, no este
   plugin. Estos estilos solo aplican a las cuadrículas (tienda,
   categorías, relacionados, etc.). */

/* Desde la v1.0.8 los círculos se enganchan por PHP en
   "woocommerce_after_shop_loop_item" (después del título y el precio) en
   vez de justo antes del título, para que queden totalmente fuera del
   enlace <a> que envuelve la foto — así un toque en el celular nunca
   navega por accidente a la ficha del producto en vez de cambiar el color
   (ver el comentario largo junto al add_action en el archivo .php).
   Como eso cambia el ORDEN en el HTML (ahora los círculos imprimen
   últimos), estas reglas usan flexbox para que sigan viéndose exactamente
   donde siempre: debajo de la foto, encima del título y el precio. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product > .astra-shop-thumbnail-wrap {
	order: 1;
}
.woocommerce ul.products li.product > .krm-color-swatches {
	order: 2;
}
.woocommerce ul.products li.product > .astra-shop-summary-wrap {
	order: 3;
}
/* Cualquier otro elemento directo de la tarjeta que no sea uno de los tres
   de arriba (por ejemplo si algún día vuelve a aparecer algún botón)
   queda al final, para no interponerse entre la foto y los círculos. */
.woocommerce ul.products li.product > * {
	order: 4;
}

/* Respaldo: el botón "Elegir Mi Talla" ya se quita por PHP
   (krm_quitar_boton_talla_cuadricula). Esta regla es solo un seguro por si
   algún tema/plugin lo vuelve a imprimir por otra vía en la cuadrícula. */
.woocommerce ul.products li.product .woocommerce-loop-product__buttons,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_simple {
	display: none !important;
}