/**
 * Estilos para mejorar las transiciones de imágenes en variaciones
 */

/* Transición suave para imágenes de variaciones */
.woocommerce-product-gallery__image img,
.product-thumbnail img,
.woocommerce-loop-product__link img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Ocultar imagen principal en página individual del producto */
.single-product .woocommerce-product-gallery__image:first-child {
    display: none !important;
}

/* Asegurar que solo se muestren imágenes de variaciones en página individual */
.single-product .woocommerce-product-gallery__image:not(:first-child) {
    display: block !important;
}

/* Mantener imagen principal visible en páginas de tienda y catálogo */
.woocommerce-page:not(.single-product) .woocommerce-product-gallery__image:first-child,
.woocommerce-page:not(.single-product) .product-thumbnail,
.woocommerce-page:not(.single-product) .woocommerce-loop-product__link img {
    display: block !important;
}

/* Efecto de hover para elementos de variación */
.product-variation-item {
    transition: all 0.3s ease;
}

.product-variation-item:hover {
    transform: scale(1.05);
}

.product-variation-item.selected {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Mejorar la visibilidad de las imágenes de variación */
.product-variation-item--image img {
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Transición para el cambio de imagen principal */
.woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
}

.woocommerce-product-gallery__image img {
    transition: opacity 0.4s ease;
}

/* Efecto de carga para imágenes */
.woocommerce-product-gallery__image img[data-loading="true"] {
    opacity: 0.7;
    filter: blur(1px);
}

/* Mejorar la apariencia de los elementos de variación */
.product-variation-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.product-variation-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 4px;
    transition: all 0.3s ease;
}

.product-variation-item:hover {
    border-color: #333;
}

.product-variation-item.selected {
    border-color: #333;
    background-color: #f5f5f5;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .product-variation-items {
        gap: 6px;
    }
    
    .product-variation-item {
        padding: 3px;
    }
}