/* 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;
}

/* Estilo para los botones de texto simples (variaciones sin imagen o productos nuevos) */
.swatch-btn {
    display: inline-block;
    background-color: #333;
    color: #fff;
    border: 2px solid #333;
    padding: 8px 16px;
    margin: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    text-align: center;
}

.swatch-btn:hover {
    background-color: #444;
    border-color: #444;
    transform: translateY(-1px);
}

.swatch-btn.selected {
    background-color: #ff6600; /* Color naranja */
    border-color: #ff6600;
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.4);
    transform: scale(1.03);
}

.swatch-btn:active {
    transform: translateY(0);
}