/**
 * Tabs pill navigation compartidos (Cuenta, ficha producto, etc.).
 * Cargar con <link> en Twig antes del CSS de vista.
 * Markup: .tab-product-navigation (+ modificador opcional, p. ej. --account, --product-desc).
 */
.tab-product-navigation {
    margin-bottom: 42.5px;
}

.tab-product-navigation .nav-tabs {
    border-bottom: 1px solid #E1E4E7 !important;
}

.tab-product-navigation .nav-tabs a,
.tab-product-navigation .nav-tabs .nav-link {
    color: #717171 !important;
    font: normal normal 600 14px/16px 'Work Sans', sans-serif !important;
    letter-spacing: 2.8px !important;
    padding: 0 0 21.5px 0 !important;
    margin-right: 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none;
}

.tab-product-navigation .nav-tabs a:last-child,
.tab-product-navigation .nav-tabs .nav-link:last-child {
    margin-right: 0 !important;
}

.tab-product-navigation .nav-tabs a:not(.active):hover,
.tab-product-navigation .nav-tabs a:not(.active):focus,
.tab-product-navigation .nav-tabs .nav-link:not(.active):hover,
.tab-product-navigation .nav-tabs .nav-link:not(.active):focus {
    color: #E5007E !important;
    border-bottom: 3px solid #E5007E !important;
}

.tab-product-navigation .nav-tabs a.active,
.tab-product-navigation .nav-tabs .nav-link.active {
    color: #E5007E !important;
    border-bottom: 3px solid #E5007E !important;
    background: transparent !important;
}

/* Ficha producto: fila + wrap (lado a lado mientras quepan) */
.tab-product-navigation--product-desc .nav-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 0;
}

.tab-product-navigation--product-desc .nav-tabs .nav-link {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Cuenta (y cualquier nav en columna): más aire entre tabs apilados */
.tab-product-navigation .nav-tabs.flex-column {
    row-gap: 16px;
}

/* .tab-product-navigation .nav-tabs.flex-column > .nav-link,
.tab-product-navigation .nav-tabs.flex-column > .nav-item {
    margin-right: 0 !important;
    padding-bottom: 8px !important;
} */

@media (max-width: 991.98px) {
    .tab-product-navigation {
        margin-bottom: 24px;
    }

    .tab-product-navigation .nav-tabs a,
    .tab-product-navigation .nav-tabs .nav-link {
        margin-right: 20px !important;
        padding-bottom: 16px !important;
    }

    .tab-product-navigation .nav-tabs.flex-column {
        row-gap: 20px;
    }

    /* .tab-product-navigation .nav-tabs.flex-column > .nav-link,
    .tab-product-navigation .nav-tabs.flex-column > .nav-item {
        margin-right: 0 !important;
        padding-bottom: 10px !important;
    } */
}

@media (min-width: 768px) {
    /* En md+ Cuenta pasa a fila: sin gap vertical extra */
    .tab-product-navigation .nav-tabs.flex-md-row {
        row-gap: 0;
    }
}

@media (max-width: 575.98px) {
    .tab-product-navigation .nav-tabs a,
    .tab-product-navigation .nav-tabs .nav-link {
        margin-right: 12px !important;
    }

    /* Producto: wrap vertical (segunda fila) — más espacio entre filas */
    .tab-product-navigation--product-desc .nav-tabs {
        row-gap: 16px;
    }
}

@media (max-width: 249.98px) {
    .tab-product-navigation .nav-tabs a,
    .tab-product-navigation .nav-tabs .nav-link {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }
}