.ozs-tabs{margin:12px 0 28px}.ozs-tabs__bar{display:flex;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;gap:12px 20px;padding-bottom:14px;border-bottom:1px solid var(--oz-card-border,#e5e5e5)}.ozs-tabs__bar-start{flex:1 1 auto;min-width:min(200px,100%)}.ozs-tabs__heading,.ozs-tabs__heading .ozs__title{margin:0}.ozs-tabs__heading-title::after{margin-top:8px}.ozs-tabs__bar-end{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 16px;margin-left:auto}.ozs-tabs__nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0}.ozs-tabs__tab{border:none;background:0 0;padding:6px 0;margin:0;border-radius:0;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--oz-text-muted,#9a9a9a);line-height:1.2;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}.ozs-tabs__tab:focus-visible,.ozs-tabs__tab:hover{color:var(--oz-heading-color,#1a1a1a);outline:0}.ozs-tabs__tab.is-active{background:0 0;color:var(--oz-heading-color,#1a1a1a);border-bottom-color:var(--oz-heading-color,#1a1a1a)}.ozs-tabs__arrows{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}.ozs-tabs .ozs-tabs__arrows .ozs__nav-btn{position:static;top:auto;left:auto;right:auto;transform:none;width:40px;height:40px;margin:0;border-radius:4px;border:1px solid var(--oz-card-border,#d0d0d0);background:#fff;box-shadow: none}.ozs-tabs .ozs-tabs__arrows .ozs__nav-btn::before{border-color:var(--oz-nav-icon,#f95614)}.ozs-tabs .ozs-tabs__arrows .ozs__nav-btn:hover{border-color:var(--oz-heading-color,#333);background:#fafafa}.ozs-tabs__bar-cta{flex-shrink:0}.ozs-tabs__panels{margin-top:20px}.ozs-tabs__panel,html body .ozs-tabs .ozs .ozs__nav{display:none}.ozs-tabs__panel.is-active{display:block}@media (max-width:767px){.ozs-tabs[data-hide-nav-mobile=true] .ozs-tabs__arrows{display:none}.ozs-tabs{margin:8px 0 22px}.ozs-tabs__bar{flex-direction:column;align-items:stretch;gap:14px 0;padding-bottom:12px}.ozs-tabs__bar-start{min-width:0;width:100%}.ozs-tabs__bar-end{margin-left:0;width:100%;max-width:100%;justify-content:stretch;flex-direction:column;align-items:stretch;gap:12px}.ozs-tabs__nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0 14px;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;padding:2px 0 10px;margin:0;box-sizing:border-box}.ozs-tabs__nav::-webkit-scrollbar{height:4px}.ozs-tabs__nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:4px}.ozs-tabs__tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;padding:8px 0;font-size:11px}.ozs-tabs__arrows{flex-shrink:0;align-self:flex-end}.ozs-tabs__bar-cta{align-self:stretch;text-align:center;width:100%;box-sizing:border-box}.ozs-tabs__panels{margin-top:16px}.ozs-tabs--has-heading .ozs-tabs__heading-title::after{margin-top:6px}}

/* ============================================================================
   wc-tabs — FIX estructural del espaciado horizontal entre productos

   Problema:
   Los productos se renderizan con el template clásico de WooCommerce
   (<ul class="products columns-N"> → <li class="product">). Ese HTML hereda
   estilos de WooCommerce/tema que aplican margin/float y reglas con
   pseudo-clases estructurales (:first-child, :last-child, :nth-child(4n),
   .product.first, .product.last). Cuando el JS clona slides para el loop
   infinito, esas pseudo-clases se recalculan y matchean elementos DIFERENTES
   en el DOM con clones → el margin extra aparece en posiciones distintas
   entre originales y clones, rompiendo el ritmo visual.

   Solución (sin JS, sin hacks):
   Forzar flex nowrap + gap como único motor de espaciado. Anular margin,
   float y pseudo-clases estructurales en los <li>. Los clones tienen las
   mismas clases (product + ozs__slide) por cloneNode(true), así heredan las
   mismas reglas → espaciado idéntico para TODOS los slides.

   Replica el patrón ya usado por wc-products.css.
   ========================================================================== */

/* --- TRACK (`<ul class="products ozs__track">`): flex nowrap + gap ---------- */
html body .ozs--wc-tabs .ozs-tabs__panel ul.products,
html body .ozs--wc-tabs ul.products.ozs__track,
html body .oz-wc-tabs-theme ul.products.ozs__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none;
    box-sizing: border-box;
    gap: var(--ozs-gap, var(--oz-gap, 16px)) !important;
}

/* --- SLIDES (`<li class="product ozs__slide">`): sin margin, solo gap ------ */
html body .ozs--wc-tabs ul.products li.product,
html body .ozs--wc-tabs ul.products li.product.ozs__slide,
html body .ozs--wc-tabs ul.products li.ozs__slide,
html body .oz-wc-tabs-theme ul.products li.product,
html body .oz-wc-tabs-theme ul.products li.product.ozs__slide {
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    flex: 0 0 calc(
        (100% - (var(--ozs-gap, var(--oz-gap, 16px)) * (var(--ozs-cols, var(--oz-cols, 1)) - 1)))
        / var(--ozs-cols, var(--oz-cols, 1))
    ) !important;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- Neutralizar pseudo-clases estructurales que WC/tema aplican al grid
       clásico. Con el loop infinito el "primero"/"último" cambia al haber
       clones, por eso DEBEMOS homogeneizar estos selectores. ---------------- */
html body .ozs--wc-tabs ul.products li.product.first,
html body .ozs--wc-tabs ul.products li.product.last,
html body .ozs--wc-tabs ul.products li.product:first-child,
html body .ozs--wc-tabs ul.products li.product:last-child,
html body .ozs--wc-tabs ul.products li.product:nth-child(2n),
html body .ozs--wc-tabs ul.products li.product:nth-child(2n+1),
html body .ozs--wc-tabs ul.products li.product:nth-child(3n),
html body .ozs--wc-tabs ul.products li.product:nth-child(3n+1),
html body .ozs--wc-tabs ul.products li.product:nth-child(4n),
html body .ozs--wc-tabs ul.products li.product:nth-child(4n+1),
html body .ozs--wc-tabs ul.products li.product:nth-child(5n),
html body .ozs--wc-tabs ul.products li.product:nth-child(5n+1),
html body .oz-wc-tabs-theme ul.products li.product.first,
html body .oz-wc-tabs-theme ul.products li.product.last,
html body .oz-wc-tabs-theme ul.products li.product:first-child,
html body .oz-wc-tabs-theme ul.products li.product:last-child,
html body .oz-wc-tabs-theme ul.products li.product:nth-child(2n),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(2n+1),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(3n),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(3n+1),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(4n),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(4n+1),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(5n),
html body .oz-wc-tabs-theme ul.products li.product:nth-child(5n+1) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: none !important;
    float: none !important;
}

/* --- Clones del loop (red de seguridad). cloneNode(true) ya preserva todas
       las clases, así que heredan las reglas de arriba. Esta regla previene
       que un CSS externo distinga clones de originales por su clase. ------- */
html body .ozs--wc-tabs ul.products li.product.ozs__slide--clone,
html body .oz-wc-tabs-theme ul.products li.product.ozs__slide--clone {
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* --- Hijos del slide: respetar ancho sin desbordar -------------------------- */
html body .ozs--wc-tabs ul.products li.product > *,
html body .oz-wc-tabs-theme ul.products li.product > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* --- equal-height (si está activo) ----------------------------------------- */
html body .ozs--wc-tabs.ozs--equal-height ul.products.ozs__track,
html body .oz-wc-tabs-theme.ozs--equal-height ul.products.ozs__track {
    align-items: stretch;
}
html body .ozs--wc-tabs.ozs--equal-height ul.products li.product,
html body .oz-wc-tabs-theme.ozs--equal-height ul.products li.product {
    height: auto;
    display: flex;
}
html body .ozs--wc-tabs.ozs--equal-height ul.products li.product > *,
html body .oz-wc-tabs-theme.ozs--equal-height ul.products li.product > * {
    width: 100%;
}

/* Layout antiguo de bar (grid) eliminado: ahora se usa el layout "pill centered" definido abajo */

/* =========================================================
   Pestañas estilo "pill" — centradas debajo del header.
   Inactivos: texto gris, sin fondo.
   Activo:   pill amarillo #FCC62E con texto negro.
   ========================================================= */
body .ozs-tabs__bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 18px !important;
}

body .ozs-tabs__bar-start {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Si el header no tiene contenido, oculta bar-start para que no quede línea/espacio */
body .ozs-tabs:not(.ozs-tabs--has-heading) .ozs-tabs__bar-start {
    display: none !important;
}

body .ozs-tabs__heading,
body .ozs-tabs__heading.ozs__header-text {
    text-align: center !important;
    padding-left: 0 !important;
    width: 100% !important;
}
body .ozs-tabs__heading::before,
body .ozs-tabs__heading.ozs__header-text::before {
    display: none !important;
}

body .ozs-tabs__bar-end {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

body .ozs-tabs__nav {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

body .ozs-tabs__tab {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    background: transparent !important;
    padding: 10px 22px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, transform 220ms ease !important;
}

body .ozs-tabs__tab:hover,
body .ozs-tabs__tab:focus-visible {
    color: #111111 !important;
    background: rgba(252, 198, 46, 0.18) !important;
    outline: 0 !important;
}

body .ozs-tabs__tab.is-active {
    color: #111111 !important;
    background: #FCC62E !important;
    font-weight: 700 !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 4px 12px rgba(252, 198, 46, 0.35) !important;
}

body .ozs-tabs__tab.is-active:hover,
body .ozs-tabs__tab.is-active:focus-visible {
    background: #ffd24a !important;
    color: #111111 !important;
}

/* Color/tamaño/hover de las flechas: regla global en oz-sliders.css.
   Aquí SOLO mantenemos la posición (estática dentro del bar de tabs). */

/* ===== Responsive: tablet / laptop pequeño (≤1199) ===== */
@media (max-width: 1199px) {
    body .ozs-tabs__nav {
        gap: 6px 6px !important;
    }
    body .ozs-tabs__tab {
        font-size: 0.95rem !important;
        padding: 8px 16px !important;
    }
}

/* ===== Tablet (≤1023) ===== */
@media (max-width: 1023px) {
    body .ozs-tabs__bar {
        gap: 14px !important;
    }
    body .ozs-tabs__nav {
        gap: 5px 5px !important;
        padding: 0 !important;
    }
    body .ozs-tabs__tab {
        font-size: 0.9rem !important;
        padding: 7px 14px !important;
    }
}

/* ===== Mobile (≤767) ===== */
@media (max-width: 767px) {
    body .ozs-tabs__bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    body .ozs-tabs__bar-start {
        width: 100% !important;
        text-align: center !important;
    }
    body .ozs-tabs__bar-end {
        width: 100% !important;
        justify-content: center !important;
    }
    body .ozs-tabs__nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        max-width: 100% !important;
        padding: 4px 8px !important;
        gap: 4px 4px !important;
        justify-content: flex-start !important;
        scroll-snap-type: x proximity !important;
    }
    body .ozs-tabs__nav::-webkit-scrollbar {
        display: none !important;
    }
    body .ozs-tabs__tab {
        font-size: 0.85rem !important;
        padding: 7px 12px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }
}

/* ===== Mobile pequeño (≤480) ===== */
@media (max-width: 480px) {
    body .ozs-tabs__tab {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
}