.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%;
}

/* ============================================================================
   Estilo visual del bar de tabs (imagen de referencia "Categorías Destacadas")
   LAYOUT:
     Fila 1:  [Título]                                        [flechas]
     ----- línea divisoria -----
     Fila 2:  [Pestañas de categorías]
   ========================================================================== */
body .ozs-tabs__bar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "heading arrows"
        "nav     nav" !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    border-top: 1px solid #E6E6E6 !important;
    border-bottom: 1px solid #E6E6E6 !important;
    align-items: center !important;
}
body .ozs-tabs__bar-start {
    grid-area: heading !important;
    min-width: 0 !important;
    padding-bottom: 5px !important;
    border-bottom: 0 !important;
}
body .ozs-tabs__bar-end {
    display: contents !important;
}
body .ozs-tabs__bar-end .ozs-tabs__arrows {
    grid-area: arrows !important;
    align-self: center !important;
    justify-self: end !important;
    padding-bottom: 14px !important;
    border-bottom: 0 !important;
}
body .ozs-tabs__bar-end .ozs-tabs__nav {
    grid-area: nav !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: flex-end !important;
}
body .ozs-tabs__bar-end .ozs-tabs__bar-cta {
    grid-area: arrows !important;
    justify-self: end !important;
    align-self: center !important;
    padding-bottom: 14px !important;
}

/* Pestañas (los labels) */
body .ozs-tabs__tab {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    padding: 6px 2px !important;
    border-bottom: 2px solid transparent !important;
}
body .ozs-tabs__tab:hover,
body .ozs-tabs__tab:focus-visible {
    color: #000000 !important;
}
body .ozs-tabs__tab.is-active {
    color: #000;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

/* 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). */

@media (max-width: 767px) {
    body .ozs-tabs__bar {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "heading arrows"
            "nav     nav" !important;
        flex-direction: initial !important;
    }
    body .ozs-tabs__bar-start,
    body .ozs-tabs__bar-end .ozs-tabs__arrows {
        padding-bottom: 10px !important;
        width: auto !important;
    }
    body .ozs-tabs__bar-end .ozs-tabs__nav {
        padding-top: 10px !important;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    body .ozs-tabs__tab {
        font-size: 0.9rem !important;
    }
}