/* Ajusta el contenedor de los swatches */
.swatch-container {
    display: flex;
    margin-bottom: 10px; /* Espacio inferior para separar del siguiente elemento */
    flex-wrap: wrap;
}


/*desktop*/
@media only screen and (min-width: 1025px) {
    .swatch-container {
        margin-right: 20%;
    }
}

/* Ajusta cada swatch para que tengan un tamaño consistente */
.swatch {
    width: 30%; 
    height: auto;
    margin: 1.5%;
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    border: 2px solid #ddd; /* Borde ligero para mejor visibilidad */
    transition: border 0.3s ease, transform 0.2s ease; /* Transición para el cambio de borde y un ligero zoom */
    box-sizing: border-box; /* Asegura que el borde no afecte el tamaño del swatch */
    border-radius: 5px; /* Esquinas redondeadas para un diseño más moderno */
}

.swatch:hover {
    border-color: #555; /* Cambia el color del borde al pasar el mouse */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al hacer hover para un efecto visual */
}

/* Ajusta la imagen dentro del swatch */
.swatch img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Asegura que la imagen se ajuste bien dentro del contenedor */
    display: block; /* Asegura que la imagen se comporte como un bloque y no tenga espacio extra */
    border-radius: 5px; /* Esquinas redondeadas para que coincida con el contenedor */
}

/* Estilo para el swatch seleccionado */
.swatch.selected {
    border-color: #0071a1; /* Cambia el color del borde para indicar que está seleccionado */
    box-shadow: 0 0 10px rgba(0, 113, 161, 0.5); /* Añade un sombreado para dar más énfasis */
}

/* Ajusta el estilo del texto debajo de cada swatch */
.swatch-label {
    display: block; /* Asegura que el texto ocupe toda la línea debajo de la imagen */
    text-align: center; /* Centra el texto */
    font-size: 13px; /* Ajusta el tamaño de la fuente */
    color: #333; /* Color del texto */
    font-weight: normal; /* Peso de la fuente para un texto más visible */
}

a.reset_variations {
    display: none !important;
}

.woocommerce-js div.product form.cart .variations {
    padding-bottom: 2rem;
}