/* ==========================================================================
   1. OCULTACIÓN SELECTIVA EN ESCRITORIO (Pantallas a partir de 992px)
   ========================================================================== */
@media (min-width: 992px) {
    
    /* Fulmina el precio original central */
    .product-prices,
    #main .product-prices {
        display: none !important;
    }

    /* EN LUGAR DE OCULTAR .product-actions ENTERO, OCULTAMOS SOLO EL CARRITO Y CANTIDADES */
    .product-actions .product-add-to-cart,
    .product-actions .product-quantity,
    .product-actions .add {
        display: none !important;
    }

    /* Nos aseguramos de que las variantes/combinaciones SÍ se muestren */
    .product-actions .product-variants,
    .product-variants {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ocultamos ÚNICAMENTE la descripción corta superior */
    #product-description-short-container,
    .product-description-short,
    .description-short,
    [id^="product-description-short-"] {
        display: none !important;
    }

    /* Activamos tu bloque de compra clonado de la barra lateral */
    .bloque-compra-sidebar-exclusivo {
        display: block !important;
    }
}

/* ==========================================================================
   2. VISIBILIDAD EN MÓVIL (Pantallas hasta 991px)
   ========================================================================== */
@media (max-width: 991px) {
    /* Ocultamos el bloque clonado para que el móvil mantenga el flujo nativo */
    .bloque-compra-sidebar-exclusivo {
        display: none !important;
    }

    /* Neutralizamos cualquier comportamiento extraño del bloque de confianza en móvil */
    .block-reassurance-contenedor-nativo,
    #block-reassurance {
        position: relative !important;
        float: none !important;
        clear: both !important;
        display: block !important;
    }
}

/* ==========================================================================
   3. ANULACIÓN PERMANENTE DEL MODULO "RECENT ORDERS"
   ========================================================================== */
.pos-recent-orders,
div[class*="pos-recent-orders"],
.pos-recent-orders.animated {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(300px) !important;
}

/* ==========================================================================
   4. DESESTRUCTURACIÓN DE TABS NATIVAS A DOS COLUMNAS (AL 50% / 50%)
   ========================================================================== */

/* 1. Forzamos visibilidad total de todo el contenedor inferior */
.contenedor-pestanas-50-50,
.contenedor-pestanas-50-50 * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Ocultamos los botones de las pestañas nativas (ya no hacen falta porque se verá todo del tirón) */
.contenedor-pestanas-50-50 .nav-tabs,
.contenedor-pestanas-50-50 ul.nav-tabs {
    display: none !important;
}

/* 3. Forzamos a que los bloques ocultos de Bootstrap (tab-pane) se muestren siempre */
.contenedor-pestanas-50-50 .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Estructura en paralelo para ordenadores y pantallas grandes */
@media (min-width: 992px) {
    .contenedor-pestanas-50-50 {
        width: 100% !important;
        max-width: 1200px !important; /* Ajuste perfecto al ancho de tu web */
        margin: 60px auto !important;
        padding: 0 15px !important;
        clear: both !important;
    }

    /* Convertimos el contenedor de las pestañas en un entorno flexible */
    .contenedor-pestanas-50-50 .tab-content {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* COLUMNA IZQUIERDA: Descripción larga (Suele ser el primer bloque, id #description) */
    .contenedor-pestanas-50-50 .tab-content #description,
    .contenedor-pestanas-50-50 .tab-content > div:first-child,
    .contenedor-pestanas-50-50 .tab-content > section:first-child {
        width: 50% !important;
        flex: 0 0 50% !important;
        padding-right: 40px !important;
        float: left !important;
        box-sizing: border-box !important;
    }

    /* COLUMNA DERECHA: Ficha técnica / Detalles (Suele ser el id #product-details) */
    .contenedor-pestanas-50-50 .tab-content #product-details,
    .contenedor-pestanas-50-50 .tab-content > div:nth-child(2),
    .contenedor-pestanas-50-50 .tab-content > section:nth-child(2) {
        width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 40px !important;
        border-left: 1px solid #e2e8f0 !important; /* Separador gris elegante */
        float: left !important;
        box-sizing: border-box !important;
    }
    
    /* Forzar visualización de las tablas de características */
    .contenedor-pestanas-50-50 .product-features,
    .contenedor-pestanas-50-50 .data-sheet {
        display: block !important;
    }
}

/* 5. Adaptación responsiva para pantallas móviles (Se apilan en vertical) */
@media (max-width: 991px) {
    .contenedor-pestanas-50-50 {
        width: 100% !important;
        padding: 0 15px !important;
        margin-top: 30px !important;
    }
    
    .contenedor-pestanas-50-50 .tab-content {
        display: block !important;
    }

    .contenedor-pestanas-50-50 .tab-content #description,
    .contenedor-pestanas-50-50 .tab-content #product-details,
    .contenedor-pestanas-50-50 .tab-content > div {
        width: 100% !important;
        padding: 0 !important;
        border-left: none !important;
        margin-bottom: 35px !important;
        float: none !important;
    }
}

/* ==========================================================================
   5. DISEÑO DE COMBINACIONES: TARJETAS LIMPIAS CON TEXTO SECUNDARIO
   ========================================================================== */

.product-variants > .product-variants-item .radio-label {
  height: 100px;}

.product-variants-item {
    margin-bottom: 25px !important;
    display: block !important;
}

.product-variants-item .control-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.variants-cards-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* TARJETA BASE (Blanca, limpia y nítida) */
.variant-card-item {
    width: 100% !important;
    border: 1px solid #e2e8f0 !important; /* Borde gris muy suave */
    border-radius: 8px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    display: block !important;
}

.variant-card-item .radio-label {
    display: block !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
}

.variant-card-item .input-radio {
    display: none !important;
}

/* Alineación interna en paralelo */
.card-content-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Bloque Izquierdo: Textos alineados */
.card-left-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
}

.variant-card-item .variant-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a202c !important;
}

/* Texto estático secundario debajo del título */
.variant-subtext-static {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 400 !important;
}

/* Bloque Derecho: Precio / Estado */
.card-right-price {
    text-align: right !important;
}

.variant-mini-price {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
}

/* Marcador verde suave para la opción activa en la derecha */
.badge-activo {
    color: #10b981 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Efecto suave al pasar el ratón por encima (Hover) */
.variant-card-item:hover {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
}

/* ==========================================================================
   TARJETA SELECCIONADA: BORDE NARANJA Y FONDO AL 90% DE TRANSPARENCIA
   ========================================================================== */
.variant-card-item.variant-selected {
    border: 2px solid #f97316 !important; /* Borde naranja de tu marca */
    background-color: rgba(249, 115, 22, 0.08) !important; /* Fondo con un 92% de transparencia (ultra sutil) */
}

.variant-card-item.variant-selected .variant-name {
    color: #1a202c !important; /* Mantenemos el título oscuro para máxima legibilidad */
}

.variant-card-item.variant-selected .variant-subtext-static {
    color: #f97316 !important; /* El subtítulo pasa a tono naranja suave para acompañar la selección */
}