.oz-wc-products-theme,.oz-wc-products-theme .ozs__viewport{width:100%;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}html body .oz-wc-products-theme .oz-wc-products-theme__track,html body .oz-wc-products-theme .ozs__track,html body .ozs.ozs--wc-products ul.products.ozs__track,html body .woocommerce-page .ozs--wc-products ul.products.ozs__track{display:flex;flex-wrap:nowrap;grid-template-columns:none;grid-auto-flow:row;align-items:stretch;width:100%;max-width:100%;min-width:0;margin:0;padding-left:0;list-style:none;box-sizing:border-box;overflow-x:clip;overflow-y:hidden}html body .oz-wc-products-theme .ozs__slide,html body .ozs.ozs--wc-products ul.products .ozs__slide,html body .woocommerce-page .ozs--wc-products ul.products .ozs__slide{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)));flex-shrink:0;flex-grow:0;min-width:0;box-sizing:border-box;overflow:hidden;max-width:none;width:auto}html body .ozs.ozs--wc-products ul.products li.product,html body .woocommerce .oz-wc-products-theme ul.products li.product,html body .woocommerce-page .oz-wc-products-theme ul.products li.product,html body .woocommerce-page .ozs--wc-products ul.products li.product{float:none;clear:none;margin:0;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)));flex-shrink:0;flex-grow:0;min-width:0;width:auto;max-width:none}.oz-wc-products-theme .ozs__slide>*,.ozs.ozs--wc-products ul.products .ozs__slide>*,.woocommerce-page .ozs--wc-products ul.products .ozs__slide>*{min-width:0;max-width:100%}.oz-wc-products-theme.ozs--equal-height .ozs__track,.ozs.ozs--wc-products.ozs--equal-height ul.products.ozs__track,.woocommerce-page .ozs--wc-products.ozs--equal-height ul.products.ozs__track{align-items:stretch}.oz-wc-products-theme.ozs--equal-height .ozs__slide,.ozs.ozs--wc-products.ozs--equal-height ul.products .ozs__slide,.woocommerce-page .ozs--wc-products.ozs--equal-height ul.products .ozs__slide{height:auto}.oz-wc-products-theme .ozs__slide .ozl-card,.ozs.ozs--wc-products ul.products .ozs__slide .ozl-card,.woocommerce-page .ozs--wc-products ul.products .ozs__slide .ozl-card{height:100%;box-sizing:border-box}

/* Cabecera (título / subtítulo): misma apariencia que carruseles de marcas y categorías */
.ozs--wc-products {
    --ozs-cat-border: #e2e5eb;
    --ozs-cat-title: #14527d;
    --ozs-cat-active-bg: #003a60;
    --ozs-cat-active-accent: #f99f00;
}

.ozs--wc-products .ozs__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 20px;
    margin-bottom: 0;
    gap: 12px;
    flex-wrap: nowrap;
}

.oz-wc-products-grid.ozs--wc-products .ozs__header {
    margin-bottom: 1rem;
}

.ozs--wc-products .ozs__header-text {
    position: relative;
    padding-left: 20px;
    flex: 1 1 auto;
    min-width: 0;
}

.ozs--wc-products .ozs__header-text::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 6px;
    height: calc(100% - 8px);
    background: var(--ozs-cat-active-accent);
    box-shadow: 6px 0 0 var(--ozs-cat-title);
    border-radius: 0;
}

.ozs--wc-products .ozs__title {
    margin: 0;
    font-size: clamp(1.6rem, 1.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ozs-cat-title);
    letter-spacing: -0.01em;
}

.ozs--wc-products .ozs__title::after {
    display: none;
}

.ozs--wc-products .ozs__subtitle {
    margin: 4px 0 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #202020;
    font-family: inherit;
}
/* =========================================================
   Plantilla custom para [oz_wc_products]:
   - oz-wc-products-custom--horizontal_2rows  → 2 filas, imagen izq (solo para el preset "Guantes de Seguridad" 759)
   ========================================================= */

.oz-wc-products-custom .ozs__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 18px;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: nowrap;
}
.oz-wc-products-custom .ozs__header-text {
    position: relative;
    padding-left: 20px;
    flex: 1 1 auto;
    min-width: 0;
}
.oz-wc-products-custom .ozs__header-text::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 6px;
    height: calc(100% - 8px);
    background: #F5A623;
    box-shadow: 6px 0 0 #14527d;
    border-radius: 0;
}

/* ---------- Horizontal 2 filas ---------- */
.oz-wc-products-custom--horizontal_2rows .ozs__track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-columns: calc((100% - (var(--ozs-gap, 22px) * (var(--ozs-cols, 3) - 1))) / var(--ozs-cols, 3));
    gap: var(--ozs-gap, 22px);
    align-items: stretch;
    padding: 0;
    list-style: none;
}
.oz-wc-products-custom--horizontal_2rows .ozs__slide {
    min-width: 0;
    scroll-snap-align: start;
    list-style: none;
}
.oz-wc-products-custom--horizontal_2rows .ozs__dots {
    display: none !important;
}

.oz-wcp-h2 {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 20px rgba(0, 24, 50, 0.08);
    height: 100%;
    box-sizing: border-box;
}
.oz-wcp-h2__media {
    flex: 0 0 42%;
    max-width: 42%;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.oz-wcp-h2__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #ffffff;
    padding: 6px;
    box-sizing: border-box;
}
.oz-wcp-h2__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}
.oz-wcp-h2__chip {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #1f2937;
    background: #f3f4f6;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
}
.oz-wcp-h2__title {
    margin: 0;
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    font-weight: 600;
    line-height: 1.2;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oz-wcp-h2__btn {
    margin-top: 4px;
    padding: 9px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    background: #ffffff;
    color: #0b243d;
    border: 1.5px solid #d1d5db;
    text-decoration: none;
    text-align: center;
    align-self: flex-start;
    transition: background .2s, border-color .2s, color .2s;
}
.oz-wcp-h2__btn:hover {
    background: #0b243d;
    color: #ffffff;
    border-color: #0b243d;
}

/* ---------- Responsive (solo horizontal_2rows) ---------- */
@media (max-width: 1024px) {
    .oz-wc-products-custom--horizontal_2rows .ozs__track {
        grid-auto-columns: calc((100% - (var(--ozs-gap, 18px) * (var(--ozs-cols, 2) - 1))) / var(--ozs-cols, 2));
        gap: var(--ozs-gap, 18px);
    }
}
@media (max-width: 768px) {
    .oz-wc-products-custom--horizontal_2rows .ozs__track {
        grid-template-rows: repeat(1, minmax(0, 1fr));
        grid-auto-columns: calc(100% - 24px);
        gap: 12px;
    }
    .oz-wcp-h2 {
        gap: 12px;
        padding: 12px;
    }
    .oz-wcp-h2__media {
        flex-basis: 40%;
        max-width: 40%;
    }
    .oz-wcp-h2__btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

/* Variante sobre fondo oscuro (feature con sectionBgColor #0B243D) */
.myg-home-feature--gloves .oz-wc-products-custom .ozs__title {
    color: #ffffff;
}
.myg-home-feature--gloves .oz-wc-products-custom .ozs__subtitle {
    color: rgba(255,255,255,0.82);
}

/* Antes se ocultaba el header de TODOS los sliders de productos, lo que también
   escondía los títulos que sí se configuran en el preset. Ahora solo se oculta
   cuando el header NO tiene título (p. ej. el carrusel del inicio sin encabezado);
   si configuras un título en el slider, se muestra. */
.ozs--wc-products .ozs__header:not(:has(.ozs__title)) {
    display: none !important;
}

/* =========================================================================
   SKIN "prod-spilltek" (opt-in) — header VISIBLE estilo Spilltek:
   título azul marino #1d386f con resaltado VERDE #16a13d (usa *asteriscos*
   en el título del admin), subrayado; botón "Ver tienda" azul; flechas
   circulares azul-outline. Las CARDS ya las estila el pack spilltek.
   Se activa agregando la clase "prod-spilltek" al slider:
   Admin del slider -> pestaña "Avanzado" -> campo "Clase".
   Especificidad .ozs--wc-products.prod-spilltek (0,3,0) > base, sin tocar
   otros sliders. No afecta a otros carruseles de productos.
   ========================================================================= */

/* Mostrar el header (el base lo oculta para wc-products) + línea full-width
   debajo que cruza todo el ancho (como la captura). */
.ozs--wc-products.prod-spilltek .ozs__header {
    position: relative;             /* ancla la línea inferior (::before / ::after) */
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 14px;
    margin-bottom: 26px;
}
/* Línea GRIS fina: cruza TODO el ancho, al borde inferior del header
   (queda por debajo del botón, no lo choca). */
.ozs--wc-products.prod-spilltek .ozs__header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #d7dce3;            /* gris suave */
    pointer-events: none;
}
/* Acento AZUL grueso y corto bajo el título, sobre la misma línea gris
   (continúan como una sola línea). Ancho fijo ≈ texto "Productos Destacados". */
.ozs--wc-products.prod-spilltek .ozs__header::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;                  /* alinea su base con la gris */
    width: 258px;
    height: 3px;
    background: #1d386f;            /* azul marino de marca */
    z-index: 1;
    pointer-events: none;
}

/* Quitar la barra naranja lateral del base; título con subrayado. */
.ozs--wc-products.prod-spilltek .ozs__header-text {
    padding-left: 0;
    flex: 0 1 auto;
}
.ozs--wc-products.prod-spilltek .ozs__header-text::before {
    display: none;
}
.ozs--wc-products.prod-spilltek .ozs__title {
    color: #000000;                 /* "Productos" negro; "Destacados" verde via span */
    font-weight: 800;
    font-size: 24px !important;     /* tamaño solicitado (gana a var(--oz-title-size)) */
    line-height: 1.15 !important;
    margin: 0;
    display: inline-block;
}
/* El subrayado ya NO va en el título: la línea (azul + gris) se dibuja en el
   borde inferior del header para quedar POR DEBAJO del botón "Ver tienda". */
html body .ozs.ozs--wc-products.prod-spilltek .ozs__title::after {
    display: none !important;
}
/* El botón "Ver tienda" tapa la línea gris al cruzarla (queda por delante). */
.ozs--wc-products.prod-spilltek .ozs__cta {
    position: relative;
    z-index: 1;
}
/* El diseño de esta franja NO lleva subtítulo: si se rellenó el campo Subtítulo
   por error, se oculta. El botón de la derecha es el campo "Botón" (ozs__cta). */
.ozs--wc-products.prod-spilltek .ozs__subtitle {
    display: none !important;
}
.ozs--wc-products.prod-spilltek .ozs__title-hl {
    color: #16a13d;                 /* "*Destacados*" en verde */
}

/* Botón "Ver tienda": azul marino, texto blanco; hover verde. */
.ozs--wc-products.prod-spilltek .ozs__cta {
    flex: 0 0 auto;
    align-self: center;
    padding: 12px 28px;
    background: #1d386f;
    color: #ffffff;
    border: 1px solid #1d386f;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.ozs--wc-products.prod-spilltek .ozs__cta:hover,
.ozs--wc-products.prod-spilltek .ozs__cta:focus-visible {
    background: #16a13d;
    border-color: #16a13d;
    color: #ffffff;
}

/* Flechas: circulares, blancas con borde azul marino y chevron azul; hover
   relleno azul con chevron blanco. Prefijo html body .ozs… para ganar al base. */
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn,
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn--prev,
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn--next {
    background: #ffffff !important;
    border: 1.5px solid #1d386f !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(29, 56, 111, 0.12) !important;
}
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn:hover,
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn:focus-visible {
    background: #1d386f !important;
}
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn--prev::before,
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn--next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7' stroke='%231d386f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn:hover::before,
html body .ozs.ozs--wc-products.prod-spilltek .ozs__nav-btn:focus-visible::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

@media (max-width: 768px) {
    .ozs--wc-products.prod-spilltek .ozs__header {
        margin-bottom: 18px;
    }
    .ozs--wc-products.prod-spilltek .ozs__cta {
        padding: 9px 18px;
    }
}

/* =========================================================================
   SKIN "pro-epp-dark" (opt-in) — encabezado para [oz_wc_products] estilo EPP,
   a juego con el carrusel de categorías "cat-epp":
   - título azul de marca,
   - acento CIAN corto bajo el título + línea tenue que cruza todo el ancho,
   - botón "VER MÁS" tipo pill a la derecha.
   IMPORTANTE: el CSS base oculta el header de wc-products; este skin lo
   vuelve a mostrar. Requiere que en el preset esté activado el encabezado y
   rellenados el Título y el Botón (texto + URL).
   Se activa agregando la clase "pro-epp-dark" al slider, ya sea:
     - en el shortcode:  [oz_wc_products id="3157" class="pro-epp-dark"]
     - o en el Admin del slider -> pestaña "Avanzado" -> campo "Clase".
   Especificidad .ozs--wc-products.pro-epp-dark (0,3,0) > base, sin !important
   salvo donde el base lo usa. No afecta a otros sliders de productos.
   ========================================================================= */

/* Vuelve a mostrar el header (el base lo oculta) y ancla las líneas inferiores. */
.ozs--wc-products.pro-epp-dark .ozs__header {
    position: relative;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 14px;
    margin-bottom: 26px;
}
/* Línea tenue que cruza TODO el ancho, al borde inferior del header. */
.ozs--wc-products.pro-epp-dark .ozs__header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);   /* línea tenue sobre fondo azul */
    pointer-events: none;
}
/* Acento CIAN corto bajo el título, montado sobre la misma línea tenue
   (las dos se leen como una sola línea continua). */
.ozs--wc-products.pro-epp-dark .ozs__header::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 180px;
    height: 3px;
    background: #15b6c9;
    z-index: 1;
    pointer-events: none;
}

/* Quita la barra naranja lateral del base. */
.ozs--wc-products.pro-epp-dark .ozs__header-text {
    padding-left: 0;
    flex: 0 1 auto;
}
.ozs--wc-products.pro-epp-dark .ozs__header-text::before {
    display: none;
}
/* Título BLANCO, más chico y peso medio (igual que el de categorías cat-epp).
   Prefijo html body + !important para vencer al tamaño/color base y del tema. */
html body .ozs.ozs--wc-products.pro-epp-dark .ozs__title,
html body .ozs.ozs--wc-products.pro-epp-dark .ozs__title .ozs__title-hl {
    margin: 0;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.ozs--wc-products.pro-epp-dark .ozs__title::after {
    display: none !important;
}
/* Esta franja no usa subtítulo; si se rellenó por error, se oculta. */
.ozs--wc-products.pro-epp-dark .ozs__subtitle {
    display: none !important;
}

/* Botón "VER MÁS" tipo pill: contorno claro y texto azul; hover relleno azul.
   z-index para quedar por delante de la línea tenue al cruzarla. */
.ozs--wc-products.pro-epp-dark .ozs__cta {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: center;
    padding: 9px 22px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ozs--wc-products.pro-epp-dark .ozs__cta:hover,
.ozs--wc-products.pro-epp-dark .ozs__cta:focus-visible {
    background: #ffffff;
    color: #0a3d7a;
    border-color: #ffffff;
}

@media (max-width: 768px) {
    .ozs--wc-products.pro-epp-dark .ozs__header {
        margin-bottom: 18px;
    }
    .ozs--wc-products.pro-epp-dark .ozs__header::before {
        width: 120px;
    }
    html body .ozs.ozs--wc-products.pro-epp-dark .ozs__title,
    html body .ozs.ozs--wc-products.pro-epp-dark .ozs__title .ozs__title-hl {
        font-size: 19px !important;
    }
    .ozs--wc-products.pro-epp-dark .ozs__cta {
        padding: 8px 16px;
    }
}

/* =========================================================================
   SKIN "pro-epp" (opt-in) — IGUAL que "pro-epp-dark" pero para sliders sobre
   FONDO CLARO: el título y el botón "VER MÁS" van en AZUL #0a6798 (sobre claro
   el blanco no se vería). Misma estructura: acento cian + línea gris tenue.
   Se activa con la clase "pro-epp":
     [oz_wc_products id="3157" class="pro-epp"]
     [oz_wc_products id="3158" class="pro-epp"]
   ========================================================================= */
.ozs--wc-products.pro-epp .ozs__header {
    position: relative;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 14px;
    margin-bottom: 26px;
}
/* Línea gris tenue (visible sobre fondo claro), todo el ancho. */
.ozs--wc-products.pro-epp .ozs__header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #d7dce3;
    pointer-events: none;
}
/* Acento cian corto bajo el título. */
.ozs--wc-products.pro-epp .ozs__header::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 180px;
    height: 3px;
    background: #15b6c9;
    z-index: 1;
    pointer-events: none;
}
.ozs--wc-products.pro-epp .ozs__header-text {
    padding-left: 0;
    flex: 0 1 auto;
}
.ozs--wc-products.pro-epp .ozs__header-text::before {
    display: none;
}
/* Título AZUL #0a6798 (en vez de blanco). */
html body .ozs.ozs--wc-products.pro-epp .ozs__title,
html body .ozs.ozs--wc-products.pro-epp .ozs__title .ozs__title-hl {
    margin: 0;
    color: #0a6798 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.ozs--wc-products.pro-epp .ozs__title::after {
    display: none !important;
}
.ozs--wc-products.pro-epp .ozs__subtitle {
    display: none !important;
}
/* Botón "VER MÁS": borde y texto AZUL #0a6798; hover se rellena de ese azul. */
.ozs--wc-products.pro-epp .ozs__cta {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: center;
    padding: 9px 22px;
    background: transparent;
    color: #0a6798;
    border: 1px solid #0a6798;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ozs--wc-products.pro-epp .ozs__cta:hover,
.ozs--wc-products.pro-epp .ozs__cta:focus-visible {
    background: #0a6798;
    color: #ffffff;
    border-color: #0a6798;
}

@media (max-width: 768px) {
    .ozs--wc-products.pro-epp .ozs__header {
        margin-bottom: 18px;
    }
    .ozs--wc-products.pro-epp .ozs__header::before {
        width: 120px;
    }
    html body .ozs.ozs--wc-products.pro-epp .ozs__title,
    html body .ozs.ozs--wc-products.pro-epp .ozs__title .ozs__title-hl {
        font-size: 19px !important;
    }
    .ozs--wc-products.pro-epp .ozs__cta {
        padding: 8px 16px;
    }
}
/* pro-epp: fuera las flechas de navegación (verdes) y separa cada slider del siguiente. */
.ozs--wc-products.pro-epp .ozs__nav,
.ozs--wc-products.pro-epp .ozs__nav-btn { display: none !important; }
.ozs.ozs--wc-products.pro-epp { margin-bottom: 56px; }

/* =========================================================================
   SKIN "prod-proinval" (opt-in) — header con » rojo + línea roja y flechas
   grises circulares a los lados. Las CARDS ya las estila el design pack
   "proinval" del cotizador (categoría roja + botón "Agregar Pedido").
   Activar: Admin del slider -> Avanzado -> Clase = prod-proinval
   (o [oz_wc_products id="14304" class="prod-proinval"]).
   ========================================================================= */

.ozs--wc-products.prod-proinval {
    position: relative;
    padding: 0 64px;
    --ozs-peek: 0px;
}

/* Header: » rojo + título negro + línea roja al ancho del contenido. */
.ozs--wc-products.prod-proinval .ozs__header {
    position: relative;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 14px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(226, 35, 26, 0.4);
}
.ozs--wc-products.prod-proinval .ozs__header-text {
    padding-left: 26px;
    flex: 1 1 auto;
}
.ozs--wc-products.prod-proinval .ozs__header-text::before {
    content: "\00BB";
    top: 50%;
    left: 0;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    background: none;
    box-shadow: none;
    color: var(--ph-red, #e2231a);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__title {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #1a1a1a !important;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__title::after { display: none !important; }
.ozs--wc-products.prod-proinval .ozs__subtitle { display: none !important; }

/* Título de las CARDS igual que en la tienda (dentro del slider salía más
   grande porque la regla de shop-archive.css solo aplica en el archivo). */
html body .ozs.ozs--wc-products.prod-proinval .ozc-product-card__title,
html body .ozs.ozs--wc-products.prod-proinval .ozc-product-card__title a {
    font-size: clamp(0.9rem, 1.2vw, 1.05rem) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Botón "Agregar Pedido" de las CARDS igual que en la tienda (160×34). */
html body .ozs.ozs--wc-products.prod-proinval .ozc-product-card__actions .ozc-product-card__btn--primary {
    min-height: 34px !important;
    height: auto !important;
    padding: 10px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Flechas grises circulares a los lados (centradas sobre las cards). */
html body .ozs.ozs--wc-products.prod-proinval > .ozs__nav {
    position: absolute !important;
    top: calc(50% + 24px);
    left: 0;
    right: 0;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none;
    z-index: 6;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    pointer-events: auto;
    background: #b3b7bd !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn::before {
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn:hover,
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn:focus-visible {
    background: var(--ph-red, #e2231a) !important;
    transform: none !important;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn--prev::before,
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn--next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn[disabled],
html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn.is-disabled {
    opacity: 0.4 !important;
}

/* Encaje en columnas al navegar (evita medias cards cortadas). */
html body .ozs.ozs--wc-products.prod-proinval .ozs__track {
    scroll-snap-type: x mandatory;
}

@media (max-width: 768px) {
    .ozs--wc-products.prod-proinval { padding: 0 34px; }
    html body .ozs.ozs--wc-products.prod-proinval > .ozs__nav { top: calc(50% + 20px); left: 0; right: 0; }
    html body .ozs.ozs--wc-products.prod-proinval .ozs__nav-btn { width: 32px !important; height: 32px !important; }
}