/* --- ESTE BLOQUE UNE LA IMAGEN Y LA INFO EN UNA FILA --- */

.product-info-row { 
    background: #fff; 
    margin: 0 !important; 
    padding: 1rem !important; 
    border: 1px solid #f0f0f0; 
    /* El borde y padding ayudan a que visualmente parezca un solo bloque unido */
}

@media (min-width: 992px) {
    .product-info-row { 
        display: flex !important;           /* Hace que imagen e info se pongan de lado */
        align-items: flex-start;            /* Alinea ambos al inicio superior */
    }
    
    .product-info-row .col-product-image,
    .product-info-row .col-product-info {
        flex: 0 0 50% !important;           /* Divide el espacio 50/50 para que encajen */
        max-width: 50% !important;
    }
    
    .product-sidebar { 
        display: none !important;           /* Elimina la barra lateral para dar más aire */
    }
}

/* --- ESTE BLOQUE AJUSTA EL ESPACIO CON LAS TABS (DETALLES) --- */

#product-names-update + .product-tabs, .product-tabs {
    margin-top: 5px !important;             /* Reduce el hueco entre el bloque superior y las pestañas */
    padding-top: 0px !important;
}

.nav-tabs { 
    margin-bottom: 10px !important;         /* Compacta el menú de las pestañas */
}

/* Ocultar logos vacios */
.product-manufacturer img[src*='/es-default'], 
.product-manufacturer img[src*='img/m/no.jpg'] {
    display: none !important;
}

/* 1. Contenedor principal: Alineación base y limpieza de espacios */
#payment-option-3-container {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 2. El círculo (Radio button): Ajustamos su separación */
#payment-option-3-container .custom-radio, 
#payment-option-3-container input[type="radio"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 10px !important; /* Espacio exacto entre el círculo y el texto */
    flex-shrink: 0; /* Evita que el círculo se aplaste */
}

/* 3. El texto y el Logo: Controlamos el desplazamiento */
#payment-option-3-container label {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important; /* Eliminamos el padding que lo desplazaba a la derecha */
    cursor: pointer;
    line-height: 1;
}

/* 4. El Logo: Posicionado después del texto */
#payment-option-3-container label::after {
    content: "";
    display: inline-block;
    width: 87px; 
    height: 49px;
    margin-left: 15px; 
    background-image: url('/img/bank-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Contenedor para hacer el video responsive */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 20px;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* --- AJUSTES DE TAMAÑO Y POSICIÓN PARA EL BOLETÍN DE WAREHOUSE --- */

/* Forzar que la fila contenedora ocupe todo el ancho horizontal arriba */
#footer .elementor-widget-theme-global-newsletter,
#footer .ps-emailsubscription-block {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    clear: both !important;
}

/* Forzar que el formulario interno se comporte como un bloque centrado completo */
.ps-emailsubscription-block form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important; /* Centra todos los elementos de texto internos del formulario */
}

/* Inserción del Título Superior en Negrita mediante CSS */
.ps-emailsubscription-block form::before {
    content: "Suscripción al boletín informativo" !important;
    display: block !important;
    font-weight: 700 !important; /* Negrita fuerte */
    font-size: 16px !important;  /* Tamaño del encabezado */
    color: #333 !important;      /* Color oscuro del texto */
    margin-bottom: 15px !important; /* Espacio entre el título y la caja del correo */
    text-align: center !important;  /* Forzar centrado absoluto del título */
}

/* Centrar y reducir únicamente la barra de entrada del correo y el botón */
.ps-emailsubscription-block .newsletter-input-group {
    max-width: 450px !important;
    width: 100% !important;
    margin: 0 auto !important; /* Centra la barra horizontalmente */
}

/* Estilo y alineación forzada para el texto de las condiciones inferiores */
.ps-emailsubscription-block .ps-emailsubscription-conditions {
    margin-top: 15px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #6c757d !important;
    display: inline-block !important; /* Permite alineación en bloque de texto */
    width: 100% !important;
    max-width: 450px !important;       /* Mismo ancho que la caja para que no se desmadre */
    text-align: center !important;     /* Centra el texto de las condiciones */
    margin-left: auto !important;
    margin-right: auto !important;
}