.oculta{
	display:none !important;
}

.semioculta{
	visibility:hidden;
}



.product-swatches {
	position:relative;
}

.product-swatches-in{
	position:relative;
}

/* CAPA 1: El contenedor que recorta y tiene el scroll */
.product-swatches.color {
    width: 100%;
    overflow-x: auto;          /* Habilita el scroll horizontal */
    overflow-y: hidden;
    white-space: nowrap;       /* Evita que los hijos bajen de línea */

	 -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}


/* CAPA 2: El carril que contiene los swatches */
.product-swatches.color .product-swatches-in{
	 scroll-snap-type: x mandatory; /* Hace que el scroll "imante" a cada color */
}



.product-swatches.color .product-swatch{
	display:inline-block;
	margin-left:2px;
	
	/*padding:2px;*/
	/*width:20%;*/
	width:70px;
	box-sizing:border-box;
	vertical-align: top;
	border:1px solid #ccc;
}

.product-swatches.color .product-swatch:first-child{
	margin-left:0px;
}

.product-swatches.color .product-swatch:last-child{
	margin-right:1px;
}




.product-swatches.color .product-swatch-img{
	
	width:100%;
	height:auto;
	display:block;
	vertical-align: top;
}

.product-swatches.color .product-swatch.selected{
	border:1px solid #0F0;
}








.product-swatches.size{
    display: flex;
    flex-wrap: wrap;       /* Permite saltar de línea */
    width: 100%;           /* Ocupa todo el contenedor padre */
    gap: 3px;                /* Sin espacios entre ellos (puedes poner 2px si quieres separación) */
}


.product-swatches.size .product-swatch{
    /* 100% / 6 = 16.666% */
    flex: 0 0 calc((100% / 6) - (3px * 5 / 6));
    max-width: calc((100% / 6) - (3px * 5 / 6));
    
    /* Mantiene el cuadrado perfecto */
    aspect-ratio: 1 / 1;   
    
    /* Centrado total del contenido (texto o imagen) */
    display: flex;
    justify-content: center; /* Centro horizontal */
    align-items: center;     /* Centro vertical */
    
    /* Reset de estilos */
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #ccc; /* Ejemplo de borde para ver los límites */
    overflow: hidden;
    text-align: center;
}

.product-swatches.size .product-swatch .product-swatch-txt{
    display: block;
    line-height: normal;
}

.product-swatches.size .product-swatch.selected{
	border:1px solid #0F0;
}