/**
 * MAIN GALLERY FIXED SIZE
 * Fija un tamaño CONSTANTE para el carrusel principal
 * El carrusel NUNCA cambia de tamaño sin importar el tamaño de las imágenes
 * Las imágenes pequeñas se centran, las imágenes grandes se ajustan
 */

/* ============================================================
   WRAPPER PRINCIPAL
   ============================================================ */

.woo-product-gallery-slider {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ============================================================
   CONTENEDOR PRINCIPAL DEL CARRUSEL - TAMAÑO FIJO
   ============================================================ */

.wpgs-for {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   SLIDES DEL CARRUSEL PRINCIPAL
   ============================================================ */

.wpgs-for .slick-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ============================================================
   CONTENEDOR DE IMAGEN PRINCIPAL
   ============================================================ */

.woocommerce-product-gallery__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff;
}

/* ============================================================
   IMAGEN PRINCIPAL
   ============================================================ */

.woocommerce-product-gallery__image img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ============================================================
   RESPONSIVE - TABLET (768px - 1024px)
   ============================================================ */

@media (max-width: 1024px) {
    .wpgs-for {
        height: 500px;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE (< 768px)
   ============================================================ */

@media (max-width: 767px) {
    .wpgs-for {
        height: 400px;
    }
}