/* ============================================================
   🌍 MODO GLOBAL - MÓVIL, TABLET Y PC 
   ============================================================ */ 
/* Forzar que aparezca la X de cierre del modal (Lightbox) */
.pswp__button--close {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Fondo oscurito para que resalte */
    border-radius: 50%;
    margin: 10px;
    display: block !important;
    visibility: visible !important;
    z-index: 9999 !important;
}

/* Asegurar que el icono de la X sea blanco */
.pswp__button--close:before {
    color: #ffffff !important;
}

/* Si el modal queda detrás de algo, esto lo trae al frente */
.pswp {
    z-index: 100000 !important;
}

/* ============================================================
   📱 MODO MÓVIL Y TABLET
   ============================================================ */
@media (max-width: 1199px) {
    .grid-producto {
        display: block !important; /* Forzamos bloque */
        width: 100% !important;
    }

    .col-izq, .col-der {
        /* 👉 ESTO ES LO QUE FALTABA: Resetear el flex 👈 */
        display: block !important;
        width: 100% !important;
        flex: none !important; 
        margin-bottom: 16px;
        position: relative !important; /* Quitamos el sticky en móvil */
        top: 0 !important;
    }

    /* Aseguramos que la imagen use todo el ancho del celu */
    .woocommerce-product-gallery {
        width: 100% !important;
    }

    /* Paginas de Producto (margen a los costados) */
    .mi-contenedor-pro{ 
        margin-top: 15px;
        /* En vez de margin lateral, usamos padding */
        padding-left: 15px; /* ajustamos acá margen costados */
        padding-right: 15px; /* ajustamos acá margen costados */
        /* Esto asegura que los 20px se resten del 100% y no se sumen por fuera */
        box-sizing: border-box;
    }
}

/* ============================================================
   💻 MODO PC / ESCRITORIO
   ============================================================ */
@media (min-width: 1200px) {
    /* 1. El contenedor debe permitir que los hijos floten */
    .grid-producto {
        display: flex;
        align-items: flex-start; /* CRUCIAL para que el sticky funcione */
        gap: 5%; /* Espacio entre columnas */
    }

    /* 2. COLUMNA IZQUIERDA (La que se queda fija) */
    .col-izq {
        flex: 0 0 40%;
        position: -webkit-sticky; /* Soporte para Safari */
        position: sticky;
        top: 80px; /* Distancia desde el borde superior de la pantalla al bajar */
        margin-top: 30px;
        height: fit-content; /* Se ajusta solo al alto de la imagen */
    }

    /* 3. COLUMNA DERECHA (La que hace scroll) */
    .col-der {
        flex: 0 0 55%;
        display: flex;
        flex-direction: column; /* Todo en bloque hacia abajo */
    }

    /* Ajuste para que la galería no rompa el diseño */
    .woocommerce-product-gallery {
        width: 100% !important;
    }

    .mi-contenedor-pro{
        /* margin-top: 50px; */
        margin-left: 50px;
        margin-right: 50px;
    }

    
}

/* ============================================================
   🖼️ IMAGEN DE PRODUCTO DE BORDE A BORDE EN MÓVIL Y TABLET
   ============================================================ */

@media (max-width: 1199px) {

    /* Extender únicamente la columna de la imagen */
    .mi-contenedor-pro .col-izq {
        width: calc(100% + 30px) !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    /* La imagen y el carrusel ocupan todo el ancho disponible */
    .mi-contenedor-pro .product-viewer,
    .mi-contenedor-pro .main-display-container,
    .mi-contenedor-pro .slide-wrapper {
        width: 100% !important;
        box-sizing: border-box;
    }

}