/**
 * Estilos específicos para corregir el slider wcgs-photo
 * Oculta imagen principal y muestra solo imágenes de variaciones
 */

/* Ocultar imagen principal en el slider */
.wcgs-photo img:first-child,
.wcgs-photo > div:first-child,
.wcgs-photo > .swiper-slide:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Asegurar que las imágenes de variaciones sean visibles */
.wcgs-photo img:not(:first-child),
.wcgs-photo > div:not(:first-child),
.wcgs-photo > .swiper-slide:not(:first-child) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultar completamente la primera imagen del slider */
.single-product .wcgs-photo img:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Ocultar primer elemento del slider si es un contenedor */
.single-product .wcgs-photo > div:first-child,
.single-product .wcgs-photo > .swiper-slide:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Asegurar que las imágenes de variaciones funcionen */
.single-product .wcgs-photo img[data-large_image] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Transiciones suaves para cambios de imagen */
.wcgs-photo img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

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

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

/* Responsive para móviles */
@media (max-width: 768px) {
    .wcgs-photo img:first-child {
        display: none !important;
    }
    
    .wcgs-photo > div:first-child {
        display: none !important;
    }
}

/* Asegurar que el slider funcione correctamente */
.wcgs-photo {
    position: relative;
    overflow: hidden;
}

.wcgs-photo .swiper-wrapper {
    display: flex;
    align-items: center;
}

.wcgs-photo .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ocultar controles de navegación si solo hay una imagen */
.wcgs-photo:has(img:only-child) .swiper-button-next,
.wcgs-photo:has(img:only-child) .swiper-button-prev {
    display: none !important;
}

/* Asegurar que las imágenes se vean correctamente */
.wcgs-photo img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}