.ozs--wc-categories {
    --ozs-cat-surface: transparent;
    --ozs-cat-border: #14527d;
    --ozs-cat-title: #14527d;
    --ozs-cat-active-bg: #003a60;
    --ozs-cat-active-accent: #f99f00;
    --ozs-cat-card-bg: #ffffff;
    /* Sin sombra: las tarjetas son planas (no se corta nada en el carrusel). */
    --ozs-cat-shadow: none;
    --ozs-cat-radius: 10px;
    /* El número de tarjetas viene del editor (cols_desktop/laptop/tablet/mobile)
       y el JS lo expone en --ozs-cols. Aquí solo definimos el peek y gap. */
    --ozs-cat-peek: clamp(40px, 7vw, 120px);
    --ozs-cat-gap: clamp(12px, 1.4vw, 24px);
    /* Margen pequeño a la izquierda en la PRIMERA categoría: el primer slide no
       queda pegado al borde pero tampoco asoma el vecino (sin peek izquierdo).
       Con loop hay un clon pegado a la izquierda separado solo por el gap, así que
       el margen limpio máximo sin asomar el clon es el propio gap. */
    --ozs-cat-start-inset: var(--ozs-cat-gap);
    background: var(--ozs-cat-surface);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
}

/* Full-bleed: el carrusel se escapa del contenedor para ocupar el ancho completo del viewport */
html body .ozs.ozs--wc-categories {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    /* Recorte solo horizontal (evita scroll lateral de la página por el full-bleed);
       vertical visible para que la elevación del hover no se corte arriba. */
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
}

/* El header se mantiene centrado dentro del flujo normal */
.ozs--wc-categories .ozs__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 clamp(16px, 4vw, 64px) 20px;
    margin: 0 auto 24px;
    max-width: 1280px;
    gap: 12px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

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

.ozs--wc-categories .ozs__header-text::before {
    display: none;
}

/* Título con la tipografía del TEMA (no la serif que impone el plugin).
   font-family: inherit toma la fuente heredada del tema. Ganamos al
   'font-family ... !important' global con mayor especificidad + !important. */
html body .ozs--wc-categories .ozs__title {
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.1 !important;
}

/* Colorea parte del título en naranja: la última palabra (que el JS envuelve en
   .ozs-accent automáticamente) o lo que escribas en <strong>/<b> en el editor.
   Hereda fuente/tamaño/peso del título (la del tema); solo cambia el color.
   Usa !important para ganar al color !important del estilo global del título. */
html body .ozs--wc-categories .ozs__title strong,
html body .ozs--wc-categories .ozs__title b,
html body .ozs--wc-categories .ozs__title .ozs-accent {
    color: #f95614 !important;
    font: inherit;
    letter-spacing: inherit;
}

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

.ozs--wc-categories .ozs__subtitle {
    margin: 4px 0 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #202020;
}

/* Viewport ocupa todo el ancho. El scroll horizontal lo hace el track (no el
   viewport), así que aquí NO recortamos en vertical: el viewport recortaba el
   media alto (abajo) y la elevación del hover (translateY arriba). Recorte solo
   horizontal con overflow-x: clip; vertical visible. */
.ozs--wc-categories .ozs__viewport {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    padding: 0;
    margin: 0;
}

.ozs--wc-categories .ozs__track {
    display: flex;
    grid-auto-flow: initial;
    grid-template-rows: none;
    grid-auto-columns: initial;
    gap: var(--ozs-cat-gap);
    /* flex-start (no stretch): cada tarjeta toma la altura de su media por
       aspect-ratio. Con stretch, el media heredaba una altura mayor y cortaba
       el título del fondo. */
    align-items: flex-start;
    /* El padding lateral combina el peek visible del vecino + un gap de separación */
    padding-left: calc(var(--ozs-cat-peek) + var(--ozs-cat-gap));
    padding-right: calc(var(--ozs-cat-peek) + var(--ozs-cat-gap));
    /* Scroll-padding alinea el snap respetando el peek lateral */
    scroll-padding-left: calc(var(--ozs-cat-peek) + var(--ozs-cat-gap));
    scroll-padding-right: calc(var(--ozs-cat-peek) + var(--ozs-cat-gap));
    overflow-x: auto;
    /* El track es el scroll horizontal; un eje 'visible' junto a 'auto' se computa
       como 'auto' y recortaría la elevación del hover. Damos un pequeño aire
       vertical (la tarjeta sube 4px en hover) compensado con margen negativo.
       Sin sombra, no hace falta más. */
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: -8px;
    margin-bottom: -8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}

.ozs--wc-categories .ozs__track::-webkit-scrollbar {
    display: none;
}

/* Primera categoría: el primer slide queda con un pequeño margen a la izquierda
   (--ozs-cat-start-inset), SIN asomar el vecino/clon (sin peek izquierdo). A la
   derecha se mantiene el peek normal. Solo cambiamos scroll-padding-left (NO el
   padding físico): el snap alinea sin reflowear el ancho de los slides, así nada
   se descuadra al avanzar. El JS (scrollToRawIndex) ancla con el mismo inset.
   .ozs--at-start lo pone/quita el JS según la columna lógica actual. */
.ozs--wc-categories.ozs--at-start .ozs__track {
    scroll-padding-left: var(--ozs-cat-start-inset);
}

/* Cada slide ocupa una fracción del ancho disponible del track.
   El track ya tiene padding-lateral = peek + gap, así que el flex-basis
   100% se refiere al área de contenido (sin el peek). Solo descontamos
   los gaps internos entre las N tarjetas centrales.
   --ozs-cols viene del JS según el breakpoint configurado en el editor. */
.ozs--wc-categories .ozs__slide {
    flex: 0 0 calc((100% - (var(--ozs-cat-gap) * (var(--ozs-cols, 4) - 1))) / var(--ozs-cols, 4));
    min-width: 0;
    scroll-snap-align: start;
}

.ozs--wc-categories .ozs__dots {
    display: none !important;
}

/* Reset previo: quitamos estilos de tarjeta-marco para que la imagen sea el contenedor principal */
.ozs--wc-categories .ozs-wc-cat {
    display: block;
    /* La altura la marca el media (aspect-ratio), no el stretch del track, para
       que el título del fondo nunca quede cortado. */
    height: auto;
    text-decoration: none;
    color: inherit;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    transition: transform 320ms ease, box-shadow 320ms ease;
}

.ozs--wc-categories .ozs-wc-cat:hover,
.ozs--wc-categories .ozs-wc-cat:focus-visible,
.ozs--wc-categories .ozs-wc-cat.is-current {
    background: transparent;
    color: inherit;
    transform: translateY(-4px);
    box-shadow: none;
    outline: none;
}

/* La tarjeta es la imagen entera con overlay encima */
.ozs--wc-categories .ozs-wc-cat .ozs-card {
    position: relative;
    display: block;
    /* Se ajusta al media (aspect-ratio); sin height:100% para no estirarse de más */
    height: auto;
    min-height: 0;
    background: #0a1929;
    border: 0;
    /* !important para ganar a cualquier border-radius del tema sobre .oz-card */
    border-radius: var(--ozs-cat-radius) !important;
    overflow: hidden;
    box-shadow: var(--ozs-cat-shadow);
    transition: box-shadow 320ms ease;
}

/* El media y la imagen heredan el radio (por si el overflow:hidden no basta
   con algún render del tema) */
.ozs--wc-categories .ozs-wc-cat .ozs-card__media,
.ozs--wc-categories .ozs-wc-cat .ozs-card__img {
    border-radius: var(--ozs-cat-radius);
}

.ozs--wc-categories .ozs-wc-cat:hover .ozs-card,
.ozs--wc-categories .ozs-wc-cat:focus-visible .ozs-card {
    box-shadow: none;
}

.ozs--wc-categories .ozs-wc-cat .ozs-card__media {
    position: relative;
    /* La altura la define la relación de aspecto sobre el ancho real del slide.
       NO usamos height:100% para que el media no herede una altura mayor (del
       stretch del track) y termine cortando el título del fondo.
       4/5 (más cuadrada que 3/4) para tarjetas menos altas que quepan completas. */
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    background: #0a1929;
    display: block;
    margin: 0;
    padding: 0;
}

.ozs--wc-categories .ozs-wc-cat .ozs-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 480ms ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.ozs--wc-categories .ozs-wc-cat:hover .ozs-card__img,
.ozs--wc-categories .ozs-wc-cat:focus-visible .ozs-card__img {
    transform: scale(1.05);
    filter: none;
}

.ozs--wc-categories .ozs-wc-cat.has-svg .ozs-card__img {
    object-fit: contain;
    padding: 24px;
}

/* Overlay: gradiente oscuro de abajo hacia arriba para legibilidad */
.ozs--wc-categories .ozs-wc-cat__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: opacity 320ms ease;
}

.ozs--wc-categories .ozs-wc-cat:hover .ozs-wc-cat__overlay,
.ozs--wc-categories .ozs-wc-cat:focus-visible .ozs-wc-cat__overlay {
    opacity: 0.95;
}

/* Contenido superpuesto: solo el título (sin botón) */
.ozs--wc-categories .ozs-wc-cat__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: clamp(16px, 2vw, 28px);
    color: #ffffff;
    pointer-events: none;
}

.ozs--wc-categories .ozs-wc-cat .ozs-wc-cat__name {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.05rem, 1.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
    max-width: 100%;
    text-wrap: balance;
}

.ozs--wc-categories .ozs-wc-cat .ozs-wc-cat__count {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Sin botón "Ver Categoría": solo se muestra el título sobre la imagen. */
.ozs--wc-categories .ozs-wc-cat__cta {
    display: none !important;
}

/* Placeholder si no hay imagen */
.ozs--wc-categories .ozs-wc-cat__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: var(--ozs-cat-active-bg);
    color: var(--ozs-cat-active-accent);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
}

/* ============================ Flechas ============================
   En categorías las flechas van ARRIBA, a la derecha del título (el JS las
   monta dentro del .ozs__header). Estilo: círculos blancos con borde gris y
   chevron gris, en fila. Sobrescribimos el estilo global (que es amarillo y
   lateral) con mayor especificidad + !important.
   ================================================================ */
.ozs--wc-categories .ozs__header .ozs__nav {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    align-self: center;
    pointer-events: auto;
    z-index: auto;
}

.ozs--wc-categories .ozs__header .ozs__nav-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #d7d7d7 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease !important;
}

.ozs--wc-categories .ozs__header .ozs__nav-btn::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='%23555555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
}

.ozs--wc-categories .ozs__header .ozs__nav-btn--prev::before {
    transform: rotate(180deg) !important;
}

.ozs--wc-categories .ozs__header .ozs__nav-btn:hover,
.ozs--wc-categories .ozs__header .ozs__nav-btn:focus-visible {
    background: #f5f5f5 !important;
    border-color: #b9b9b9 !important;
    transform: none !important;
    box-shadow: none !important;
}

.ozs--wc-categories .ozs__header .ozs__nav-btn[disabled],
.ozs--wc-categories .ozs__header .ozs__nav-btn.is-disabled {
    background: #ffffff !important;
    opacity: 0.4 !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* El header en flex: título a la izquierda, flechas a la derecha, alineados */
.ozs--wc-categories .ozs__header {
    align-items: center;
}

/* ============================ Responsive ============================
   El número de tarjetas (--ozs-cols) lo controla el editor por breakpoint
   y lo aplica el JS según los breakpoints del plugin
   (desktop ≥1200, laptop ≥992, tablet ≥768, mobile <768).
   Aquí solo ajustamos peek, gap, alturas y tipografía.
   =================================================================== */

/* Laptop (992–1199) */
@media (max-width: 1199px) and (min-width: 992px) {
    .ozs--wc-categories {
        --ozs-cat-peek: clamp(40px, 4vw, 70px);
        --ozs-cat-gap: 16px;
    }

    .ozs--wc-categories .ozs-wc-cat .ozs-card__media {
        min-height: 0;
    }
}

/* Tablet (768–991) */
@media (max-width: 991px) and (min-width: 768px) {
    .ozs--wc-categories {
        --ozs-cat-peek: clamp(30px, 4vw, 56px);
        --ozs-cat-gap: 14px;
    }

    .ozs--wc-categories .ozs__header {
        padding: 0 clamp(16px, 4vw, 32px) 18px;
        margin-bottom: 20px;
    }

    .ozs--wc-categories .ozs-wc-cat .ozs-card__media {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }
}

/* Mobile (≤767) */
@media (max-width: 767px) {
    .ozs--wc-categories {
        --ozs-cat-peek: clamp(24px, 8vw, 56px);
        --ozs-cat-gap: 12px;
        --ozs-cat-radius: 14px;
    }

    .ozs--wc-categories .ozs__header {
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        padding: 0 16px 16px;
    }

    .ozs--wc-categories .ozs__title {
        font-size: clamp(1.4rem, 4.5vw, 1.8rem);
    }

    .ozs--wc-categories .ozs__subtitle {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        margin-top: 2px;
    }

    .ozs--wc-categories .ozs-wc-cat .ozs-card__media {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    .ozs--wc-categories .ozs-wc-cat .ozs-wc-cat__name {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }
}

/* Mobile pequeño (≤480) */
@media (max-width: 480px) {
    .ozs--wc-categories {
        --ozs-cat-peek: clamp(18px, 6vw, 32px);
        --ozs-cat-gap: 10px;
    }
}

@media (max-width: 360px) {
    .ozs--wc-categories {
        --ozs-cat-cols: 1.1;
        --ozs-cat-peek: 14px;
    }

    .ozs--wc-categories .ozs__title {
        font-size: 1.3rem;
    }

    .ozs--wc-categories .ozs__subtitle {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ozs--wc-categories .ozs-wc-cat,
    .ozs--wc-categories .ozs-wc-cat .ozs-card,
    .ozs--wc-categories .ozs-wc-cat .ozs-card__img,
    .ozs--wc-categories .ozs-wc-cat__cta,
    .ozs--wc-categories .ozs-wc-cat__overlay {
        transition: none;
    }
}