/*
 * Subcategorías como pestañas bajo el título de la categoría. Sólo se carga cuando hay pestañas que mostrar.
 * Los colores salen de la piel de la tienda (--mnv-*); sin ella se ven en oscuro sobre fondo claro.
 */

.mnv-subnav { margin: 0 0 28px; }
.mnv-subnav__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* El editor del tema colorea los enlaces con un selector más específico que una clase: aquí se fijan con el id. */
#mnv-subnav .mnv-subnav__enlace {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
    border: 1px solid rgba(128, 128, 128, .5); border-radius: 999px; background: rgba(128, 128, 128, .08);
    color: var(--mnv-texto, #1a1a1a); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
#mnv-subnav .mnv-subnav__enlace:hover { background: rgba(128, 128, 128, .22); border-color: rgba(128, 128, 128, .85); color: var(--mnv-texto, #1a1a1a); }
#mnv-subnav .mnv-subnav__enlace--activa,
#mnv-subnav .mnv-subnav__enlace--activa:hover { background: var(--mnv-texto, #1a1a1a); border-color: var(--mnv-texto, #1a1a1a); color: var(--mnv-negro, #fff); }
#mnv-subnav .mnv-subnav__enlace:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Las pestañas sustituyen a la lista de categorías de la columna lateral. */
#left-column .block-categories { display: none; }
/* Si en la columna no queda nada más (filtros u otros bloques), el listado ocupa todo el ancho. */
@supports selector(:has(*)) {
    #left-column:not(:has(.facet, #search_filters, .block:not(.block-categories))) { display: none; }
    :not(:has(> #left-column .facet, > #left-column #search_filters, > #left-column .block:not(.block-categories))) > #content-wrapper.left-column { flex: 0 0 100%; max-width: 100%; }
    @media (min-width: 1200px) {
        :not(:has(> #left-column .facet, > #left-column #search_filters, > #left-column .block:not(.block-categories))) > #content-wrapper.left-column .products > [class*="col-"] { flex: 0 0 25%; max-width: 25%; }
    }
}

/* En pantallas estrechas las pestañas se recorren con el dedo en una sola fila. */
@media (max-width: 767px) {
    .mnv-subnav { margin: 0 -15px 20px; }
    .mnv-subnav__lista { flex-wrap: nowrap; justify-content: flex-start; padding: 0 15px 4px; overflow-x: auto; scrollbar-width: none; }
    .mnv-subnav__lista::-webkit-scrollbar { display: none; }
    .mnv-subnav__lista > li { flex: none; }
}