.product-item-photo{
	position:relative;
}

.product-image-container{
	position:relative;
	z-index:0;
}

.swatches-div{
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:1;
    width: 100%;       /* Ocupa el ancho del contenedor padre */
}

.swatches-list {
    display: flex;
    flex-wrap: nowrap; /* Mantiene todo en una línea */
    gap: 8px;          /* Espacio entre swatches */
    margin: 10px 0;
	display:none;
}

.swatch-list{
    /* Calculamos el ancho para un máximo de 5: (100% / 5) menos el gap */
    flex: 0 1 calc(20% - 8px); 
    min-width: 0; /* Evita que el contenido desborde el flex-item */
    aspect-ratio: 1 / 1; /* Mantiene los swatches cuadrados */
	border: 1px solid #fff;
    transition: all 0.2s ease-in-out;
}

.swatch-list img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen al cuadrado sin deformar */
    display: block;
}

.swatch-list.selected,
.swatch-list:not(.more):hover {
    border-color: #0F0;
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.swatches-list-purchasenow,
.swatches-list-morecolors{
	display:inline-block;
	padding:4px 20px 4px 4px;
	border:1px solid #ccc;
}

.swatches-list-purchasenow{
	display:none;
}

@media (hover: hover){
	.product-item:hover .swatches-list{
		display: flex;
	}

	.swatches-list-morecolors{
		display:none;
	}
}

@media (hover: none) {

	.swatches-list-morecolors.visible,
	.swatches-list-purchasenow.visible,
	.swatches-list.visible{
		display: flex;
	}

	.swatches-list-morecolors.oculto{
		display:none;
	}
}