/* CSS para asegurar que la descripción del producto se muestre correctamente */

/* Estructura de flujo en la columna de información */
#productoModal .col-lg-7 {
    display: flex !important;
    flex-direction: column !important;
}

/* Establecer orden específico para cada elemento */
#productoNombre {
    order: 0 !important;
}

#productoPrecio {
    font-size: 1.25rem !important;
    font-weight: bold !important;
    color: var(--pb-burgundy) !important;
    margin-bottom: 15px !important;
    order: 1 !important;
}

/* Contenedor de descripción del producto */
.producto-descripcion {
    order: 2 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    display: block !important;
    width: 100%;
    position: relative !important;
    z-index: 30 !important; /* Mayor z-index para estar por encima de botones */
}

/* El elemento que contiene la descripción */
#productoDescripcion {
    background-color: #f9f9f9 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    border-left: 3px solid var(--pb-burgundy) !important;
    min-height: 60px !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 30 !important; /* Mayor z-index para estar por encima de botones */
    word-wrap: break-word !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
}

/* Botones de acción */
.producto-botones {
    order: 3 !important;
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 20 !important;
}

/* Comentarios */
#productoModal .mt-4 {
    order: 4 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Para dispositivos móviles */
@media (max-width: 767px) {
    #productoDescripcion {
        min-height: 80px !important;
        margin-bottom: 20px !important;
        border-left-width: 4px !important;
    }
    
    .producto-descripcion {
        margin-bottom: 25px !important;
        border-bottom-width: 2px !important;
    }
}

/* Estilos adicionales para evitar solapamiento */
.producto-descripcion, #productoDescripcion {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.producto-botones {
    clear: both !important;
    width: 100% !important;
    display: block !important;
    margin-top: 25px !important;
}