/**
 * Sidebar de navegación de categorías de la tienda — v2 "Acordeón premium".
 *
 * Markup (yoo-extras / category-sidebar-widget):
 *   nav.yoo-category-widget-content
 *     a.yoo-cat-all-link                      ← "Toda la tienda"
 *     ul.yoo-category-list
 *       li.yoo-category-list-item[.yoo-has-children][.is-expanded]
 *         div.yoo-category-row
 *           a.yoo-category-link               ← NOMBRE = enlace real (navega)
 *             span.yoo-category-count
 *             span.yoo-category-name
 *           button.yoo-cat-toggle             ← chevron = expandir/colapsar
 *         div.yoo-subcategory-wrapper
 *           ul.yoo-subcategory-list ...       ← cargado por AJAX / pre-render
 *
 * Cada elemento es semánticamente correcto: <a> para navegar, <button> para
 * accionar el acordeón. Estados hover / active / focus definidos.
 *
 * Paleta: azul #125bc9 (acento), texto #3a3f47, superficies #fff / #f2f4f7.
 */

/* Alias locales (scope al widget) DERIVADOS del Sistema de Diseño global
 * (yoo-extras/includes/tokens.css). Antes redefinían valores propios que
 * divergían del global (#ececf0 vs #e9ecf1, #3a3f47 vs #333…); ahora apuntan a
 * los tokens --yoo-color-* y el sidebar usa exactamente la misma paleta que el
 * resto del sitio. Cada token lleva fallback al valor real por si no cargaran. */
.widget_yoo_category_navigation_widget {
    --yoo-accent:       var(--yoo-color-primary, #125bc9);
    --yoo-accent-soft:  var(--yoo-color-primary-soft, #eaf1fd);
    --yoo-text:         var(--yoo-color-text-body, #333333);
    --yoo-text-strong:  var(--yoo-color-text, #1a1a1a);
    --yoo-muted:        var(--yoo-color-text-subtle, #8a8f98);
    --yoo-line:         var(--yoo-color-line, #e9ecf1);
    --yoo-surface:      var(--yoo-color-surface-2, #f3f5f9);
    --yoo-radius:       var(--yoo-radius-lg, 12px);
}

/* ---- Sticky de la COLUMNA del sidebar ----
 * El position:sticky va en la columna (#left-sidebar), hija directa de
 * .page-container. Scoped a tienda/categoría para no afectar otras páginas.
 *
 * El header del tema se vuelve fixed al hacer scroll (.header-sticky.is-sticky)
 * y taparía el sidebar. --yoo-header-offset lo mide el JS en tiempo real (la
 * altura del header es variable) y aquí dejamos el tope debajo de él + un aire
 * de 20px. Fallback a 20px si el JS no corre (el header solo tapa al scrollear).
 */
/* Ensanchar el sidebar de la tienda CORRECTAMENTE:
 * el tema reparte columnas con la variable --ts-sidebar-width
 * (reset.css: #left-sidebar{width:var(--ts-sidebar-width)} y
 *  .has-1-sidebar #main-content{width:calc(100% - var(--ts-sidebar-width) - gap)}).
 * Sobrescribiéndola, el tema recalcula AMBAS columnas y no se descoloca el grid.
 * El valor base del tema es 200/239px; lo subimos a 300px en escritorio. */
@media (min-width: 768px) {
    .woocommerce.archive #main > .page-container,
    .woocommerce-page.archive #main > .page-container {
        --ts-sidebar-width: 300px;
    }
}

/* Panel FIJO que encaja en pantalla (2026-07-02): la columna es sticky con
 * ALTURA FIJA bajo el header (variable --yoo-header-offset medida por JS);
 * la tarjeta ocupa todo ese alto, el título queda fijo arriba y el SCROLL va
 * DENTRO de la lista, con barra fina y discreta. Solo escritorio: en móvil el
 * sidebar es el panel deslizante del tema y no se toca. */
@media (min-width: 768px) {
    .woocommerce-shop #left-sidebar,
    .woocommerce.archive #left-sidebar,
    .woocommerce-page.archive #left-sidebar {
        position: sticky;
        top: calc(var(--yoo-header-offset, 0px) + 16px);
        align-self: flex-start;
        height: calc(100vh - var(--yoo-header-offset, 0px) - 32px);
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    .woocommerce-shop #left-sidebar > aside,
    .woocommerce.archive #left-sidebar > aside,
    .woocommerce-page.archive #left-sidebar > aside {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .woocommerce-shop #left-sidebar .widget_yoo_category_navigation_widget,
    .woocommerce.archive #left-sidebar .widget_yoo_category_navigation_widget,
    .woocommerce-page.archive #left-sidebar .widget_yoo_category_navigation_widget {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    /* La LISTA es lo único que scrollea, con barra fina dentro de la tarjeta. */
    .woocommerce-shop #left-sidebar .yoo-category-widget-content,
    .woocommerce.archive #left-sidebar .yoo-category-widget-content,
    .woocommerce-page.archive #left-sidebar .yoo-category-widget-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 6px;
        scrollbar-width: thin;
        scrollbar-color: var(--yoo-color-line-strong, #d4d8e0) transparent;
    }
    .woocommerce-shop #left-sidebar .yoo-category-widget-content::-webkit-scrollbar,
    .woocommerce.archive #left-sidebar .yoo-category-widget-content::-webkit-scrollbar,
    .woocommerce-page.archive #left-sidebar .yoo-category-widget-content::-webkit-scrollbar {
        width: 5px;
    }
    .woocommerce-shop #left-sidebar .yoo-category-widget-content::-webkit-scrollbar-thumb,
    .woocommerce.archive #left-sidebar .yoo-category-widget-content::-webkit-scrollbar-thumb,
    .woocommerce-page.archive #left-sidebar .yoo-category-widget-content::-webkit-scrollbar-thumb {
        background: var(--yoo-color-line-strong, #d4d8e0);
        border-radius: var(--yoo-radius-pill, 999px);
    }
    .woocommerce-shop #left-sidebar .yoo-category-widget-content::-webkit-scrollbar-track,
    .woocommerce.archive #left-sidebar .yoo-category-widget-content::-webkit-scrollbar-track,
    .woocommerce-page.archive #left-sidebar .yoo-category-widget-content::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ---- Contenedor del widget ---- */
.widget_yoo_category_navigation_widget {
    background: var(--yoo-color-surface, #fff);
    border: 1px solid var(--yoo-line);
    border-radius: var(--yoo-radius-lg, 12px);
    padding: 10px 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

/* ---- Título "Categorías" ----
 * El tema lo envuelve en .widget-title-wrapper > h3.widget-title.heading-title.
 */
.widget_yoo_category_navigation_widget .widget-title-wrapper {
    margin: 2px 4px 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--yoo-line);
}
.widget_yoo_category_navigation_widget .widget-title-wrapper .block-control {
    display: none; /* control de colapso del tema, no lo usamos aquí */
}
.widget_yoo_category_navigation_widget .widget-title,
.widget_yoo_category_navigation_widget .widgettitle {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--yoo-text-strong);
}

/* ====================================================================
 * Enlace "Toda la tienda"
 * ==================================================================== */
.widget_yoo_category_navigation_widget .yoo-cat-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 4px;
    border-radius: var(--yoo-radius);
    color: var(--yoo-text-strong);
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease;
}
.widget_yoo_category_navigation_widget .yoo-cat-all-link:hover {
    background: var(--yoo-accent-soft);
    color: var(--yoo-accent);
}
.widget_yoo_category_navigation_widget .yoo-cat-all-link.active {
    background: var(--yoo-accent-soft);
    color: var(--yoo-accent);
}
.widget_yoo_category_navigation_widget .yoo-cat-all-icon {
    display: inline-flex;
    color: currentColor;
}

/* ====================================================================
 * Listas
 * ==================================================================== */
.widget_yoo_category_navigation_widget .yoo-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget_yoo_category_navigation_widget .yoo-category-list-item {
    margin: 0;
    padding: 0;
    border: none;
}

/* Fila = enlace (flex) + botón chevron, en una sola línea.
 * min-width:0 es IMPRESCINDIBLE: sin él, el enlace (flex item) no puede
 * encogerse por debajo de su contenido y el nombre se desborda sin "…". */
.widget_yoo_category_navigation_widget .yoo-category-row {
    display: flex;
    align-items: stretch;
    width: 100%;      /* la fila ocupa todo el ancho del <li> → hay espacio que
                         repartir y la flecha puede caer a la derecha */
    min-width: 0;
    gap: 1px;
    border-radius: var(--yoo-radius);
}
/* El <li> y la lista también a ancho completo (por si el tema los encoge). */
.widget_yoo_category_navigation_widget .yoo-category-list,
.widget_yoo_category_navigation_widget .yoo-category-list-item {
    width: 100%;
}

/* ---- Enlace de la categoría (nombre + contador) ----
 * El <a> SIEMPRE llena la fila (flex:1 1 auto + width:100%). width:100% es la
 * clave: blinda el "crecer" frente a reglas de enlaces de widget del tema, que
 * es lo que hacía que en nombres cortos el <a> se ajustara al texto y la flecha
 * quedara pegada. Al ocupar todo, su flecha interna (margin-left:auto) o el
 * chevron hermano caen SIEMPRE a la derecha. min-width:0 permite el ellipsis. */
.widget_yoo_category_navigation_widget .yoo-category-link {
    flex: 1 1 auto !important;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--yoo-radius);
    color: var(--yoo-text);
    text-decoration: none !important;
    font-size: 13.5px;
    line-height: 1.25;
    transition: background-color .16s ease, color .16s ease;
}
.widget_yoo_category_navigation_widget .yoo-category-link:hover {
    background: var(--yoo-accent-soft);
    color: var(--yoo-accent);
}

/* Activo: pill suave + barra lateral azul + texto en negrita */
.widget_yoo_category_navigation_widget .yoo-category-link.active {
    background: var(--yoo-accent-soft);
    color: var(--yoo-accent);
    font-weight: 600;
    position: relative;
}
.widget_yoo_category_navigation_widget .yoo-category-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 58%;
    border-radius: 999px;
    background: var(--yoo-accent);
}

/* SCROLLSPY (2026-07-02): al hacer scroll por las secciones del grid, el
   sidebar marca la categoría/subcategoría que estás viendo. Mismo look que
   .active; cuando el spy señala OTRO item, el activo fijo de la página se
   atenúa para que solo destaque uno. JS en category-sidebar-widget. */
.widget_yoo_category_navigation_widget .yoo-category-link.yoo-spy-active,
.widget_yoo_category_navigation_widget .yoo-cat-all-link.yoo-spy-active {
    background: var(--yoo-accent-soft);
    color: var(--yoo-accent);
    font-weight: 600;
    position: relative;
}
.widget_yoo_category_navigation_widget .yoo-category-link.yoo-spy-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 58%;
    border-radius: 999px;
    background: var(--yoo-accent);
}
.widget_yoo_category_navigation_widget .yoo-has-spy .yoo-category-link.active:not(.yoo-spy-active) {
    background: transparent;
    font-weight: 500;
    opacity: .7;
}
.widget_yoo_category_navigation_widget .yoo-has-spy .yoo-category-link.active:not(.yoo-spy-active)::before {
    display: none;
}

/* Nombre (centro, elipsis si no cabe) */
.widget_yoo_category_navigation_widget .yoo-category-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icono Lucide delante de cada categoría (coherente con la barra horizontal). */
.widget_yoo_category_navigation_widget .yoo-category-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--yoo-muted, #8a8f98);
    transition: color .16s ease;
}
.widget_yoo_category_navigation_widget .yoo-category-icon .yoo-icon { display: block; }
.widget_yoo_category_navigation_widget .yoo-category-link:hover .yoo-category-icon,
.widget_yoo_category_navigation_widget .yoo-category-link.active .yoo-category-icon {
    color: var(--yoo-accent, #125bc9);
}
/* Subcategorías: icono algo menor y más tenue. */
.widget_yoo_category_navigation_widget .yoo-subcategory-list .yoo-category-icon {
    opacity: .9;
}

/* Contador: pill azul suave delante del nombre (coherente con las cabeceras
   del grid). En hover/activo pasa a naranja, igual que antes. */
.widget_yoo_category_navigation_widget .yoo-category-count {
    flex: 0 0 auto;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    background: var(--yoo-color-primary-soft, #eaf1fd);
    color: var(--yoo-color-primary, #125bc9);
    border-radius: 999px; /* pill: redondo con 1-2 dígitos, ovalado con 3 */
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    transition: background-color .16s ease, color .16s ease;
}
.widget_yoo_category_navigation_widget .yoo-category-link:hover .yoo-category-count,
.widget_yoo_category_navigation_widget .yoo-category-link.active .yoo-category-count {
    background: var(--yoo-accent);
    color: var(--yoo-color-primary-contrast, #fff);
}

/* ---- Botón chevron (expandir/colapsar) ----
 * Ancho fijo (--yoo-chevron) y SIEMPRE al final del row → todos los chevrons
 * quedan en la misma columna a la derecha. Las hojas (sin botón) reservan ese
 * mismo carril con padding-right para que el contenido termine alineado. */
.widget_yoo_category_navigation_widget {
    --yoo-chevron: 26px;
}
.widget_yoo_category_navigation_widget .yoo-cat-toggle {
    flex: 0 0 calc(var(--yoo-chevron) + 8px);
    width: calc(var(--yoo-chevron) + 8px);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end; /* el icono pegado al borde derecho */
    /* padding-right igual al del enlace (8px) → el chevron queda alineado en la
     * misma columna que la flecha de navegación de las hojas. */
    padding: 0 8px 0 0;
    border: 0;
    background: transparent;
    color: var(--yoo-color-text-subtle, #8a8f98);
    border-radius: var(--yoo-radius);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .16s ease, color .16s ease;
}
/* Flecha de navegación de las HOJAS (va dentro del <a>, no es un botón).
 * margin-left:auto la empuja al extremo derecho; el mismo ancho de carril que
 * el chevron (--yoo-chevron) mantiene TODAS las flechas alineadas en columna.
 * Especificidad reforzada (.yoo-category-link …) para ganar a la regla base
 * .yoo-category-arrow sin depender del orden de declaración. */
.widget_yoo_category_navigation_widget .yoo-category-link .yoo-category-arrow--nav {
    flex: 0 0 var(--yoo-chevron);
    width: var(--yoo-chevron);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--yoo-color-line-strong, #d4d8e0);
    transition: transform .16s ease, color .16s ease;
}
/* Al pasar el cursor por la fila, la flecha de hoja se desplaza un poco. */
.widget_yoo_category_navigation_widget .yoo-category-link:hover .yoo-category-arrow--nav {
    color: var(--yoo-accent);
    transform: translateX(2px);
}
.widget_yoo_category_navigation_widget .yoo-category-link.active .yoo-category-arrow--nav {
    color: var(--yoo-accent);
}
.widget_yoo_category_navigation_widget .yoo-cat-toggle:hover {
    background: var(--yoo-accent-soft);
    color: var(--yoo-accent);
}
.widget_yoo_category_navigation_widget .yoo-category-arrow {
    display: inline-flex;
    line-height: 0;
    transition: transform .2s ease;
}
.widget_yoo_category_navigation_widget .yoo-category-arrow svg {
    display: block;
}
/* Chevron apunta a la derecha en reposo, abajo cuando está expandido */
.widget_yoo_category_navigation_widget .yoo-category-list-item.is-expanded
    > .yoo-category-row > .yoo-cat-toggle .yoo-category-arrow {
    transform: rotate(90deg);
}
/* Cuando la rama está expandida, marcamos el botón con el color de acento */
.widget_yoo_category_navigation_widget .yoo-category-list-item.is-expanded
    > .yoo-category-row > .yoo-cat-toggle {
    color: var(--yoo-accent);
}

/* ====================================================================
 * Sublista (acordeón anidado)
 * ==================================================================== */
.widget_yoo_category_navigation_widget .yoo-subcategory-wrapper {
    overflow: hidden;
    height: 0;
    transition: height .26s ease;
}
.widget_yoo_category_navigation_widget .yoo-subcategory-wrapper[hidden] {
    display: none;
}
/* Rama expandida (incluye la pre-renderizada en servidor): altura natural.
 * El JS pone una altura en px puntual SOLO durante la animación y luego la
 * limpia (inline style), que prevalece sobre esta regla mientras anima. */
.widget_yoo_category_navigation_widget .yoo-category-list-item.is-expanded
    > .yoo-subcategory-wrapper {
    height: auto;
}

/* Indentación + línea guía vertical para jerarquía clara */
.widget_yoo_category_navigation_widget .yoo-subcategory-list {
    list-style: none;
    margin: 2px 0 6px;
    padding: 2px 0 2px 14px;
    position: relative;
}
.widget_yoo_category_navigation_widget .yoo-subcategory-list::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 8px;
    width: 1px;
    background: var(--yoo-line);
}
/* Subcategorías: tipografía algo menor para reforzar el nivel */
.widget_yoo_category_navigation_widget .yoo-subcategory-list .yoo-category-link {
    font-size: 13.5px;
    color: var(--yoo-color-text-muted, #6b7280);
}
.widget_yoo_category_navigation_widget .yoo-subcategory-list .yoo-category-count {
    width: 23px;
    height: 23px;
    font-size: 10.5px;
}

/* ====================================================================
 * Foco accesible (teclado) — visible y consistente
 * ==================================================================== */
.widget_yoo_category_navigation_widget .yoo-category-link:focus-visible,
.widget_yoo_category_navigation_widget .yoo-cat-toggle:focus-visible,
.widget_yoo_category_navigation_widget .yoo-cat-all-link:focus-visible {
    outline: 2px solid var(--yoo-accent);
    outline-offset: 1px;
    border-radius: var(--yoo-radius);
}
/* Fallback para navegadores sin :focus-visible (no romper el foco) */
.widget_yoo_category_navigation_widget .yoo-category-link:focus,
.widget_yoo_category_navigation_widget .yoo-cat-toggle:focus,
.widget_yoo_category_navigation_widget .yoo-cat-all-link:focus {
    outline: 2px solid var(--yoo-accent);
    outline-offset: 1px;
}
.widget_yoo_category_navigation_widget .yoo-category-link:focus:not(:focus-visible),
.widget_yoo_category_navigation_widget .yoo-cat-toggle:focus:not(:focus-visible),
.widget_yoo_category_navigation_widget .yoo-cat-all-link:focus:not(:focus-visible) {
    outline: none;
}

/* ====================================================================
 * Estados de carga / error / vacío
 * ==================================================================== */
.widget_yoo_category_navigation_widget .yoo-cat-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--yoo-muted);
    font-size: 13px;
}
.widget_yoo_category_navigation_widget .yoo-cat-loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--yoo-color-line, #e9ecf1);
    border-top-color: var(--yoo-accent);
    border-radius: var(--yoo-radius-circle, 50%);
    animation: yoo-spin 0.8s linear infinite;
}
.widget_yoo_category_navigation_widget .yoo-cat-error {
    margin: 4px 0 8px;
    padding: 8px 14px;
    color: var(--yoo-color-danger, #b42318);
    font-size: 13px;
}
.widget_yoo_category_navigation_widget .yoo-cat-empty {
    margin: 4px;
    padding: 8px 14px;
    color: var(--yoo-muted);
    font-size: 13px;
}
@keyframes yoo-spin {
    to { transform: rotate(360deg); }
}

/* Utilidad de solo-lectores (por si el tema no la define) */
.widget_yoo_category_navigation_widget .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ====================================================================
 * Movimiento reducido
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .widget_yoo_category_navigation_widget *,
    .widget_yoo_category_navigation_widget .yoo-subcategory-wrapper,
    .widget_yoo_category_navigation_widget .yoo-category-arrow {
        transition: none !important;
        animation-duration: 0.001ms !important;
    }
}

/* ====================================================================
 * Responsive
 * ==================================================================== */
@media (max-width: 768px) {
    .woocommerce-shop #left-sidebar,
    .woocommerce.archive #left-sidebar,
    .woocommerce-page.archive #left-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .widget_yoo_category_navigation_widget {
        padding: 12px 10px;
    }
    /* Target de toque algo mayor en móvil */
    .widget_yoo_category_navigation_widget .yoo-category-link {
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .widget_yoo_category_navigation_widget .yoo-cat-toggle {
        width: 40px;
    }
}

/* Hallmark · component: sidebar-nav (drill por niveles) · genre: modern-minimal · theme: tokens --yoo-* del proyecto
 * states: default · hover · focus · active(página) · pressed · loading(skeleton) · error(retry) · spy
 * contrast: pass · pre-emit critique: P4 H5 E4 S4 R5 V4
 * Revertir al acordeón: wp option update yoo_category_widget_style accordion */

/* ---- Contenedor: hereda el panel fijo; el scroll vive en cada nivel ---- */
.yoo-category-widget-content.yoo-cat-levels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
}

/* ---- Cabecera de nivel: ‹ volver + nombre. En raíz no existe (limpio). ---- */
.yoo-lvl-header {
    display: flex;
    align-items: center;
    gap: var(--yoo-space-2, 8px);
    padding: 0 2px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--yoo-color-line, #e9ecf1);
}
.yoo-cat-levels.is-root .yoo-lvl-header { display: none; }
.yoo-lvl-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-circle, 50%);
    background: var(--yoo-color-surface, #fff);
    color: var(--yoo-color-text, #1a1a1a);
    cursor: pointer;
    transition: background var(--yoo-transition-fast, .16s ease), border-color var(--yoo-transition-fast, .16s ease);
}
.yoo-lvl-back:hover { background: var(--yoo-color-surface-2, #f3f5f9); border-color: var(--yoo-color-line-strong, #d4d8e0); }
.yoo-lvl-back:focus-visible { outline: 2px solid var(--yoo-color-primary, #125bc9); outline-offset: 2px; }
.yoo-lvl-back:active { transform: translateY(1px); }
.yoo-lvl-title {
    font-size: var(--yoo-font-size-base, 14px);
    font-weight: 700;
    color: var(--yoo-color-text, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---- Viewport + paneles deslizantes (uno por nivel) ---- */
.yoo-lvl-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.yoo-lvl-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 6px 0 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--yoo-color-line-strong, #d4d8e0) transparent;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform .24s var(--yoo-ease-in-out, cubic-bezier(.4,0,.2,1)),
                opacity .24s var(--yoo-ease-in-out, cubic-bezier(.4,0,.2,1)),
                visibility 0s 0s;
}
.yoo-lvl-panel::-webkit-scrollbar { width: 5px; }
.yoo-lvl-panel::-webkit-scrollbar-thumb { background: var(--yoo-color-line-strong, #d4d8e0); border-radius: var(--yoo-radius-pill, 999px); }
.yoo-lvl-panel::-webkit-scrollbar-track { background: transparent; }
.yoo-lvl-panel.is-left  { transform: translateX(-16%); opacity: 0; visibility: hidden; transition: transform .24s var(--yoo-ease-in-out, cubic-bezier(.4,0,.2,1)), opacity .24s var(--yoo-ease-in-out, cubic-bezier(.4,0,.2,1)), visibility 0s .24s; }
.yoo-lvl-panel.is-right { transform: translateX(104%); opacity: 0; visibility: hidden; transition: transform .24s var(--yoo-ease-in-out, cubic-bezier(.4,0,.2,1)), opacity .24s var(--yoo-ease-in-out, cubic-bezier(.4,0,.2,1)), visibility 0s .24s; }
.yoo-lvl-panel li { margin: 0; list-style: none; }
.yoo-lvl-panel li::marker { content: none; }

/* ---- Fila ---- */
.yoo-lvl-row {
    display: flex;
    align-items: center;
    gap: var(--yoo-space-2, 8px);
    min-height: 36px;
    padding: 5px 8px;
    border-radius: var(--yoo-radius-md, 8px);
    color: var(--yoo-color-text, #1a1a1a);
    font-size: var(--yoo-font-size-sm, 13px);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background var(--yoo-transition-fast, .16s ease);
}
.yoo-lvl-icon svg { width: 15px; height: 15px; }
.yoo-lvl-chevron svg { width: 12px; height: 12px; }
.yoo-lvl-row:hover, .yoo-lvl-row.is-hover { background: var(--yoo-color-surface-2, #f3f5f9); color: var(--yoo-color-text, #1a1a1a); }
.yoo-lvl-row:focus-visible, .yoo-lvl-row.is-focus { outline: 2px solid var(--yoo-color-primary, #125bc9); outline-offset: 2px; }
.yoo-lvl-row:active, .yoo-lvl-row.is-active-press { background: var(--yoo-color-primary-soft, #eaf1fd); }
.yoo-lvl-icon { display: inline-flex; color: var(--yoo-color-text-muted, #6b7280); flex: none; }
.yoo-lvl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yoo-lvl-count {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--yoo-radius-pill, 999px);
    background: var(--yoo-color-surface-2, #f3f5f9);
    color: var(--yoo-color-text-muted, #6b7280);
}
.yoo-lvl-chevron { flex: none; display: inline-flex; color: var(--yoo-color-text-subtle, #8a8f98); transition: transform var(--yoo-transition-fast, .16s ease), color var(--yoo-transition-fast, .16s ease); }
.yoo-lvl-row:hover .yoo-lvl-chevron--drill { transform: translateX(2px); color: var(--yoo-color-primary, #125bc9); }

/* Página actual: pill acento + barrita (mismo lenguaje que el resto del sitio) */
.yoo-lvl-row.active {
    background: var(--yoo-accent-soft, #fff0eb);
    color: var(--yoo-accent, #ff6b35);
    font-weight: 600;
}
.yoo-lvl-row.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 58%;
    border-radius: var(--yoo-radius-pill, 999px);
    background: var(--yoo-accent, #ff6b35);
}
.yoo-lvl-row.active .yoo-lvl-count { background: var(--yoo-color-surface, #fff); color: inherit; }

/* Fila activa + enlace "Volver" al lado (sube al padre / Todo el catálogo).
   El li se vuelve flex: la fila ocupa el espacio y el volver es un botón
   cuadrado con el icono corner-up-left, en el mismo acento que la activa. */
.yoo-lvl-li-active {
    display: flex;
    align-items: stretch;
    gap: var(--yoo-space-1, 4px);
}
.yoo-lvl-li-active .yoo-lvl-row { flex: 1 1 auto; min-width: 0; }
.yoo-lvl-backlink {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 36px;
    border-radius: var(--yoo-radius-md, 8px);
    background: var(--yoo-accent-soft, #fff0eb);
    color: var(--yoo-accent, #ff6b35);
    text-decoration: none;
    transition: background var(--yoo-transition-fast, .16s ease),
                color var(--yoo-transition-fast, .16s ease);
}
.yoo-lvl-backlink svg { width: 15px; height: 15px; }
.yoo-lvl-backlink:hover {
    background: var(--yoo-accent, #ff6b35);
    color: var(--yoo-color-surface, #ffffff);
    text-decoration: none;
}
.yoo-lvl-backlink:focus-visible {
    outline: 2px solid var(--yoo-color-text, #1a1a1a);
    outline-offset: 2px;
}
.yoo-lvl-backlink:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
    .yoo-lvl-backlink { transition: none; }
    .yoo-lvl-backlink:active { transform: none; }
}

/* Scrollspy (mismas reglas que el acordeón) */
.widget_yoo_category_navigation_widget .yoo-lvl-row.yoo-spy-active {
    background: var(--yoo-accent-soft, #fff0eb);
    color: var(--yoo-accent, #ff6b35);
    font-weight: 600;
}
.widget_yoo_category_navigation_widget .yoo-has-spy .yoo-lvl-row.active:not(.yoo-spy-active) {
    background: transparent;
    font-weight: 500;
    opacity: .7;
}
.widget_yoo_category_navigation_widget .yoo-has-spy .yoo-lvl-row.active:not(.yoo-spy-active)::before { display: none; }

/* "Toda la tienda" / "Ver todo en X": fila-verbo en azul de marca */
.yoo-lvl-row.yoo-lvl-all { color: var(--yoo-color-primary, #125bc9); font-weight: 600; }
.yoo-lvl-row.yoo-lvl-all .yoo-lvl-chevron { color: currentColor; }

/* ---- Loading: skeleton shimmer ---- */
.yoo-lvl-skel {
    height: 34px;
    margin: 5px 0;
    border-radius: var(--yoo-radius-md, 8px);
    background: linear-gradient(90deg, var(--yoo-color-surface-2, #f3f5f9) 25%, var(--yoo-color-surface-3, #f5f6f8) 50%, var(--yoo-color-surface-2, #f3f5f9) 75%);
    background-size: 200% 100%;
    animation: yoo-lvl-shimmer 1.1s var(--yoo-ease-in-out, ease-in-out) infinite;
}
@keyframes yoo-lvl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Error: mensaje + reintentar ---- */
.yoo-lvl-error {
    padding: 12px 10px;
    font-size: var(--yoo-font-size-sm, 13px);
    color: var(--yoo-color-danger, #b42318);
}
.yoo-lvl-retry {
    margin-left: 6px;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: var(--yoo-radius-pill, 999px);
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}
.yoo-lvl-retry:hover { background: var(--yoo-color-danger, #b42318); color: #fff; }
.yoo-lvl-retry:focus-visible { outline: 2px solid var(--yoo-color-primary, #125bc9); outline-offset: 2px; }

/* ---- Móvil (drawer del tema): el viewport necesita alto propio ---- */
@media (max-width: 767px) {
    .yoo-lvl-viewport { height: min(62vh, 480px); }
}

/* ---- Reduced motion: crossfade corto, sin desplazamiento ---- */
@media (prefers-reduced-motion: reduce) {
    .yoo-lvl-panel,
    .yoo-lvl-panel.is-left,
    .yoo-lvl-panel.is-right { transition: opacity .15s ease, visibility 0s .15s; transform: none; }
    .yoo-lvl-panel.is-current { transition: opacity .15s ease, visibility 0s 0s; }
    .yoo-lvl-skel { animation: none; }
    .yoo-lvl-chevron { transition: none; }
}