.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:8px}.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:6px}.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;
    border-bottom: 0 !important;
    align-items: center !important;
}
body .ozs-tabs__bar-start {
    grid-area: heading !important;
    min-width: 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !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: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body .ozs-tabs__bar-end .ozs-tabs__nav {
    grid-area: nav !important;
    padding-top: 8px !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: flex-start !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 — Estilo Tema (tabs pill centrados, azul #302F93)
   ========================================================================== */

/* Nav centrado */
body .ozs-tabs__bar-end .ozs-tabs__nav {
    justify-content: center !important;
}

/* Pestañas (los labels): estilo pill con fondo #E8ECFC */
body .ozs-tabs__tab {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #302F93 !important;
    background: #E8ECFC !important;
    padding: 8px 20px !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
body .ozs-tabs__tab:hover,
body .ozs-tabs__tab:focus-visible {
    background: #302F93 !important;
    color: #ffffff !important;
    border-bottom: none !important;
    outline: none !important;
}
body .ozs-tabs__tab.is-active {
    background: #302F93 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: none !important;
}

/* ============================================================================
   Cards de productos — Marca arriba, botón "Ver detalles" azul #302F93
   ========================================================================== */

/* Marca (brand badge) en la parte superior de la card */
html body .ozs--wc-tabs .oz-wc-card__brand,
html body .oz-wc-tabs-theme .oz-wc-card__brand,
html body .ozs--wc-tabs ul.products li.product .oz-wc-card__brand,
html body .oz-wc-tabs-theme ul.products li.product .oz-wc-card__brand {
    display: block !important;
    position: static !important;
    padding: 8px 12px 0 !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #302F93 !important;
    background: transparent !important;
    border-radius: 0 !important;
    order: -1;
}

/* Contenedor de la card: flex column para que la marca quede arriba */
html body .ozs--wc-tabs .oz-wc-card,
html body .oz-wc-tabs-theme .oz-wc-card {
    display: flex !important;
    flex-direction: column !important;
}

/* Botón "Ver detalles" — azul #302F93 con hover */
html body .ozs--wc-tabs .oz-wc-card__button,
html body .oz-wc-tabs-theme .oz-wc-card__button,
html body .ozs--wc-tabs ul.products li.product .button,
html body .oz-wc-tabs-theme ul.products li.product .button,
html body .ozs--wc-tabs ul.products li.product a.button,
html body .oz-wc-tabs-theme ul.products li.product a.button,
html body .ozs--wc-tabs ul.products li.product .woocommerce-loop-product__link ~ .button,
html body .oz-wc-tabs-theme ul.products li.product .woocommerce-loop-product__link ~ .button {
    display: inline-block !important;
    background: #302F93 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}
html body .ozs--wc-tabs .oz-wc-card__button:hover,
html body .oz-wc-tabs-theme .oz-wc-card__button:hover,
html body .ozs--wc-tabs ul.products li.product .button:hover,
html body .oz-wc-tabs-theme ul.products li.product .button:hover,
html body .ozs--wc-tabs ul.products li.product a.button:hover,
html body .oz-wc-tabs-theme ul.products li.product a.button:hover {
    background: #201F6E !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    text-decoration: none !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). */

@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;
        justify-content: flex-start !important;
    }
    body .ozs-tabs__tab {
        font-size: 0.85rem !important;
        padding: 7px 16px !important;
    }
}