.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,#ff3d00)}.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;
    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: 14px !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 (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: #14527d !important;
}
body .ozs-tabs__tab.is-active {
    color: #14527d !important;
    font-weight: 600 !important;
    border-bottom-color: #14527d !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;
    }
    body .ozs-tabs__tab {
        font-size: 0.9rem !important;
    }
}

/* ============================================================================
   [oz_rubros_tabs] — Skin "rubros": pestañas por grupo de categorías, grilla
   oscura con el card del tema. Self-contained, scopeado a .ozs-rubros.
   ========================================================================== */
.ozs-rubros .ozs-rubros__title {
    margin: 0 0 26px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.18;
    font-size: clamp(1.5rem, 3vw, 34px);
    color: #f0f0f0;
}
.ozs-rubros .ozs-rubros__title-hl { color: #ff3d00; }

/* Barra centrada (anula la grilla/bordes del tema claro) */
.ozs-rubros .ozs-tabs__bar {
    display: flex !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
}
.ozs-rubros .ozs-tabs__bar-end {
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important;
}
.ozs-rubros .ozs-tabs__nav {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Pestañas tipo píldora con ícono */
.ozs-rubros .ozs-tabs__tab {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 26px !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #cfcfcf !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
}
.ozs-rubros .ozs-tabs__tab:hover,
.ozs-rubros .ozs-tabs__tab:focus-visible {
    color: #fff !important;
    border-color: #ff3d00 !important;
    outline: 0;
}
.ozs-rubros .ozs-tabs__tab.is-active {
    background: #ff3d00 !important;
    border-color: #ff3d00 !important;
    color: #fff !important;
}
.ozs-rubros .ozs-rubros__icon { width: 20px; height: 20px; flex: 0 0 auto; color: #ff3d00; }
.ozs-rubros .ozs-tabs__tab.is-active .ozs-rubros__icon { color: #fff; }
.ozs-rubros .ozs-tabs__tab:hover .ozs-rubros__icon { color: #ff3d00; }
/* Icono subido como imagen (naranja). En la pestaña activa (fondo naranja) lo
   invertimos a blanco para que se vea. */
.ozs-rubros .ozs-rubros__icon--img { width: 22px; height: 22px; object-fit: contain; }
.ozs-rubros .ozs-tabs__tab.is-active .ozs-rubros__icon--img { filter: brightness(0) invert(1); }

/* Paneles */
.ozs-rubros .ozs-tabs__panel { display: none; }
.ozs-rubros .ozs-tabs__panel.is-active { display: block; }

/* Grilla de productos (independiente del grid del shop) */
.ozs-rubros .ozs-tabs__panel ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.ozs-rubros .ozs-tabs__panel ul.products::before,
.ozs-rubros .ozs-tabs__panel ul.products::after { content: none !important; display: none !important; }
.ozs-rubros .ozs-tabs__panel ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .ozs-rubros .ozs-tabs__panel ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1024px) {
    .ozs-rubros .ozs-tabs__panel ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
}
/* ===== Movil (<=768): ACCORDION + 2 columnas + solo 2 productos por rubro ===== */
@media (max-width: 768px) {
    /* 2 columnas y solo 2 productos */
    .ozs-rubros .ozs-tabs__panel ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .ozs-rubros .ozs-tabs__panel ul.products li.product:nth-child(n+3) {
        display: none !important;
    }
    .ozs-rubros .ozs-rubros__title { font-size: clamp(1.25rem, 6vw, 1.7rem); margin-bottom: 16px; }

    /* Accordion: barra/nav en columna full-width (pildora por rubro + su panel debajo) */
    .ozs-rubros--accordion .ozs-tabs__bar,
    .ozs-rubros--accordion .ozs-tabs__bar-end {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ozs-rubros--accordion .ozs-tabs__nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    /* Pildora a todo el ancho */
    .ozs-rubros--accordion .ozs-tabs__tab {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 0 12px !important;
        font-size: 14px !important;
        padding: 13px 18px !important;
    }
    /* Panel debajo de su pildora; solo el activo se ve */
    .ozs-rubros--accordion .ozs-tabs__panel { width: 100%; }
    .ozs-rubros--accordion .ozs-tabs__panel.is-active {
        display: block !important;
        margin: 0 0 16px !important;
    }
    /* El contenedor original de paneles queda vacio en accordion */
    .ozs-rubros--accordion .ozs-tabs__panels { display: none !important; }
}