/* ==========================================================================
   VISTA DE PRODUCTO: Layout Principal (Grid)
   ========================================================================== */

/* Fondo general de la página y márgenes superior/inferior */
.single-product-content-area {
    background-color: #f4f6f9; 
    padding: 50px 0 80px 0; 
    width: 100%;
    
    /* BLOQUEO MAESTRO ANTI-DESBORDES: */
    box-sizing: border-box; 
    overflow-x: hidden; 
}

/* El contenedor que centra todo a 1440px */
.single-product-grid-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px;
    
    /* EL SALVAVIDAS: Hace que los 50px de padding no sumen ancho extra */
    box-sizing: border-box; 
    
    /* La Magia del Grid */
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 50px;
    align-items: start;
}
/* ==========================================================================
   Protección Anti-Desbordes para CSS Grid (Grid Blowout Fix)
   ========================================================================== */
.single-product-left-column,
.single-product-right-column {
    min-width: 0; /* ESTA ES LA CLAVE: Permite que el 1fr se encoja correctamente */
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Responsive (Adaptación a Móvil y Tablet)
   ========================================================================== */
@media screen and (max-width: 991px) {
    .single-product-grid-container {
        grid-template-columns: 1fr; 
        padding: 0 20px; 
        gap: 30px; 
        
        /* ESCUDO ANTI-DESBORDES: */
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden; /* Corta cualquier elemento rebelde */
    }

    .single-product-content-area {
    
    padding: 50px 0 0px 0; 

}


    /* Aseguramos que ambas columnas no superen el 100% */
    .single-product-left-column,
    .single-product-right-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}