/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================
   1. RESETEO Y LIMPIEZA (CRUCIAL)
   ========================================= */
/* Eliminamos pseudo-elementos, sombras y fondos del tema */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Ocultamos específicamente los pseudo-elementos para evitar el subrayado doble */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* =========================================
   2. ESTILOS GENERALES (DESKTOP FIRST)
   ========================================= */

/* Contenedor: La línea gris base */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    /* ALIGNMENT FIXES START */
    max-width: 1170px !important;
    margin: 0 auto 0px auto !important;
    padding: 0 !important;
    /* ALIGNMENT FIXES END */

    border-bottom: 1px solid #e0e0e0 !important;
    /* Línea gris */
    position: relative;
    z-index: 1;
}

/* El ITEM (LI): Aquí va el borde en Desktop */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 0;

    /* CONFIGURACIÓN DEL BORDE ROJO (DESKTOP) */
    /* 1. Definimos un borde transparente del grosor deseado */
    border-bottom: 3px solid transparent !important;
    /* 2. Margen negativo para que pise la línea gris */
    margin-bottom: -1px !important;

    transition: border-color 0.3s ease;
}

/* El ENLACE (A): Limpieza de texto */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 15px 0 !important;
    font-weight: 600;
    font-size: 16px;
    color: #757575 !important;

    /* AQUÍ QUITAMOS EL DOBLE SUBRAYADO */
    text-decoration: none !important;
    border: none !important;
    /* Aseguramos que el 'a' no tenga borde */
}

/* ESTADO ACTIVO (DESKTOP) */
/* El borde se pinta de rojo en el LI (contenedor completo) */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: #c00 !important;
    /* Rojo */
    z-index: 10;
    /* Encima de la línea gris */
}

/* Texto activo a negro */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #000 !important;
}

/* Ajuste de la burbuja de número */
.woocommerce div.product .woocommerce-tabs ul.tabs li a span {
    margin-left: 5px;
    position: relative;
}

/* =========================================
   3. MODIFICACIONES EXCLUSIVAS MÓVIL
   ========================================= */
@media (max-width: 768px) {

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        gap: 15px;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Ocultar scrollbar */
        scrollbar-width: none;
        /* Reset padding for mobile if needed, or keep alignment */
        
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        display: none;
    }

    /* 1. Quitamos el borde del LI en móvil */
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        margin-right: 15px !important;
    }

    /* 2. Pasamos el borde al ENLACE (A) para que solo cubra texto */
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        display: inline-block !important;
        padding: 10px 0 !important;
        font-size: 14px;

        /* Borde en el enlace para móvil */
        border-bottom: 3px solid transparent !important;
        margin-bottom: -1px !important;
        /* Pisamos línea gris */
    }

    /* 3. Activamos color rojo en el ENLACE activo */
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
        border-bottom-color: #c00 !important;
    }

    /* 4. Sacamos la burbuja (0) del flujo para que no extienda el subrayado */
    .woocommerce div.product .woocommerce-tabs ul.tabs li a span {
        position: absolute !important;
        top: 50%;
        right: -25px;
        /* Lo movemos a la derecha fuera del texto */
        transform: translateY(-50%);
        margin-left: 0 !important;
    }
}

/* =========================================
   4. ESTILOS DE PRECIO DE PRODUCTO
   ========================================= */
div.product p.price {
    color: #19bd27 !important;
    font-weight: 700;
    font-size: 20px;
    margin: 0.5rem 0;
}