/** * Category Accordion — estilos del frontend. * * Diseño portado del filtro de /tienda de SierraLibre (la variante * "plana", que es la que está en producción). Las cuatro ideas del * diseño, para no perderlas si esto se toca más adelante: * * 1. NADA de cajas. Cada categoría es una línea de texto, no una * pastilla con fondo. Lo que separa una fila de otra es el aire, * no un rectángulo gris. * 2. Letra fina y chica. Peso normal siempre — la jerarquía la dan la * sangría y el color, nunca la negrita. * 3. El contador de productos va a la derecha, en gris claro. Es dato * de apoyo: tiene que leerse sin competirle al nombre. * 4. La categoría activa no se pinta de fondo: cambia a color de * acento y sube medio peso. Es la única fila con color. * * En mobile todo esto vive detrás de un botón "Filtros" que abre un panel * deslizable desde la derecha; en escritorio (≥1024px) el panel es una * columna común y el botón no existe. Ver la sección "Panel mobile". * * Los colores salen de las variables que inyecta el plugin en * desde el panel de ajustes. Los valores de acá abajo son el fallback si * ese panel nunca se guardó. */ .wc-cat-wrap { --wc-cat-texto: #20211c; --wc-cat-cantidad: #6e6e6e; --wc-cat-activo: #616630; --wc-cat-hover: #eceae4; --wc-cat-toggle: #6e6e6e; --wc-cat-borde: #dcdad3; --wc-cat-fondo-panel: #ffffff; --wc-cat-familia: inherit; --wc-cat-font-main: 13px; --wc-cat-font-sub: 13px; --wc-cat-count-size: 12px; --wc-cat-peso: 400; --wc-cat-peso-activa: 500; --wc-cat-titulo-size: 18px; --wc-cat-titulo-peso: 500; --wc-cat-titulo-transform: none; --wc-cat-sangria: 14px; --wc-cat-radio: 4px; font-family: var(--wc-cat-familia); color: var(--wc-cat-texto); } /* --------------------------------------------------------------- Título de grupo ("Categorías") --------------------------------------------------------------- */ .wc-cat-wrap .wc-cat-grupo-titulo { margin: 0 0 12px; padding: 0; font-family: var(--wc-cat-familia); font-size: var(--wc-cat-titulo-size); font-weight: var(--wc-cat-titulo-peso); text-transform: var(--wc-cat-titulo-transform); /* Con mayúsculas y sin aire, el título se lee apretado. El letter-spacing solo aplica cuando de verdad van en mayúscula. */ letter-spacing: normal; line-height: 1.3; color: var(--wc-cat-texto); } .wc-cat-wrap[data-mayus="1"] .wc-cat-grupo-titulo { letter-spacing: .06em; } /* Bloque "Marcas": mismo título y mismas filas que las categorías, solo con aire arriba para separarlo de la lista de arriba. */ .wc-cat-wrap .wc-cat-marcas-grupo { margin-top: 24px; } /* --------------------------------------------------------------- La fila --------------------------------------------------------------- */ .wc-cat-title { display: flex; align-items: center; gap: 8px; width: 100%; /* Padding chico y horizontal casi nulo: la fila tiene que empezar alineada con el título del grupo, no indentada dentro de una caja invisible. */ padding: 6px; border-radius: var(--wc-cat-radio); background: transparent; color: var(--wc-cat-texto); font-weight: var(--wc-cat-peso); cursor: default; transition: background-color .15s ease, color .15s ease; } .wc-cat-title:hover { background: var(--wc-cat-hover); } /* Categoría en la que está parado el visitante: color de acento y medio peso más. Sin fondo — el relleno es justo lo que este diseño evita. */ .wc-cat-title.is-active { background: transparent; color: var(--wc-cat-activo); font-weight: var(--wc-cat-peso-activa); } .wc-cat-title.is-active:hover { background: var(--wc-cat-hover); } /* Doblemente calificado a propósito: los temas de WordPress pintan los con reglas del tipo ".woocommerce a" o ".widget a", que le ganarían a un selector de una sola clase y dejarían las categorías del color de link del sitio, subrayadas. */ .wc-cat-wrap .wc-cat-title.is-active .wc-cat-link { color: var(--wc-cat-activo); } /* --------------------------------------------------------------- El link y el contador --------------------------------------------------------------- */ .wc-cat-wrap .wc-cat-link { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; padding: 0; color: inherit; text-decoration: none; font-size: var(--wc-cat-font-main); font-weight: inherit; line-height: 1.45; } .wc-cat-wrap .wc-cat-link:hover, .wc-cat-wrap .wc-cat-link:focus { text-decoration: none; color: inherit; } .wc-cat-wrap .wc-cat-subtitle .wc-cat-link { font-size: var(--wc-cat-font-sub); } /* Cantidad de productos. shrink-0 + tabular-nums para que la columna de números no baile de fila en fila. */ .wc-cat-wrap .wc-cat-count { flex: 0 0 auto; color: var(--wc-cat-cantidad); font-size: var(--wc-cat-count-size); /* Peso normal fijo: aunque las categorías vayan en negrita, el contador es dato de apoyo y no tiene que engordar con ellas. */ font-weight: 400; font-variant-numeric: tabular-nums; } /* En la fila activa el nombre va de color, pero el contador se queda gris: si los dos cambian, la fila entera grita. */ .wc-cat-wrap .wc-cat-title.is-active .wc-cat-count { color: var(--wc-cat-cantidad); } /* --------------------------------------------------------------- El +/− --------------------------------------------------------------- */ /* Sin fondo ni círculo: en este diseño es un carácter gris al costado, no un botón. El ancho fijo evita que la columna de nombres se corra entre las filas que tienen hijas y las que no. */ .wc-cat-wrap .wc-cat-toggle { flex: 0 0 auto; order: -1; width: 14px; height: 18px; margin: 0; padding: 0; border: 0; background: none; color: var(--wc-cat-toggle); font-size: 13px; font-weight: 400; line-height: 18px; text-align: left; cursor: pointer; opacity: .75; transition: opacity .15s ease; } .wc-cat-wrap .wc-cat-toggle:hover { opacity: 1; } /* Las filas sin hijas no llevan botón. En vez de compensar con :has() (que no existe en navegadores algo viejos, y ahí la lista queda desalineada sin que nadie se entere), el PHP imprime un hueco del mismo ancho. Más aburrido y funciona en todos lados. */ .wc-cat-wrap .wc-cat-toggle-hueco { flex: 0 0 auto; order: -1; width: 14px; height: 18px; } /* --------------------------------------------------------------- Anidado --------------------------------------------------------------- */ .wc-cat-item { margin: 0; } .wc-subcats { padding-left: var(--wc-cat-sangria); } .wc-cat-wrap ul.wc-subcat-level { list-style: none; margin: 0; padding: 0; } .wc-cat-wrap li.wc-subcat-item { margin: 0; /* Algunos temas (Astra entre ellos) le ponen viñeta a los li de cualquier lista, incluso sin list-style propio. */ list-style: none; } .wc-cat-wrap li.wc-subcat-item::before, .wc-cat-wrap li.wc-subcat-item::marker { content: none; } /* --------------------------------------------------------------- Foco de teclado --------------------------------------------------------------- */ .wc-cat-wrap .wc-cat-link:focus, .wc-cat-wrap .wc-cat-toggle:focus { outline: none; } .wc-cat-wrap .wc-cat-link:focus-visible, .wc-cat-wrap .wc-cat-toggle:focus-visible { outline: 2px solid var(--wc-cat-activo); outline-offset: 2px; border-radius: var(--wc-cat-radio); } /* =============================================================== Panel mobile --------------------------------------------------------------- Por defecto (mobile primero) el filtro vive en un panel fijo fuera de pantalla, y se entra por el botón "Filtros". A partir de 1024px todo eso se apaga y queda una columna normal. =============================================================== */ .wc-cat-abrir { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--wc-cat-borde); border-radius: 6px; background: transparent; color: var(--wc-cat-texto); font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; } .wc-cat-abrir:hover { background: var(--wc-cat-hover); } .wc-cat-abrir svg { width: 16px; height: 16px; flex: 0 0 auto; } .wc-cat-backdrop { position: fixed; inset: 0; z-index: 99998; background: rgba(32, 33, 28, .2); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .wc-cat-wrap.is-abierto .wc-cat-backdrop { opacity: 1; pointer-events: auto; } .wc-cat-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99999; display: flex; flex-direction: column; width: 100%; max-width: 24rem; border-left: 1px solid var(--wc-cat-borde); background: var(--wc-cat-fondo-panel); transform: translateX(100%); transition: transform .3s ease; } .wc-cat-wrap.is-abierto .wc-cat-panel { transform: translateX(0); } .wc-cat-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--wc-cat-borde); } .wc-cat-panel-head h2 { margin: 0; padding: 0; font-size: 18px; font-weight: 500; color: var(--wc-cat-texto); } .wc-cat-cerrar { border: 0; background: none; padding: 0; color: var(--wc-cat-texto); cursor: pointer; line-height: 0; } .wc-cat-cerrar:hover { color: var(--wc-cat-cantidad); } .wc-cat-cerrar svg { width: 20px; height: 20px; } .wc-cat-panel-body { flex: 1; overflow-y: auto; padding: 16px; } /* Botón de salida al pie. Elegir una categoría filtra en el momento y el panel queda abierto a propósito (para poder seguir bajando de nivel), así que sin esto la única salida sería la "×" de arriba — y en una lista larga eso obliga a scrollear hasta el tope. Va fuera del área que scrollea para quedar siempre visible. */ .wc-cat-panel-foot { padding: 16px; border-top: 1px solid var(--wc-cat-borde); } .wc-cat-ver { width: 100%; padding: 12px 16px; border: 0; border-radius: 6px; background: var(--wc-cat-activo); color: #fff; font-family: inherit; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; } .wc-cat-ver:hover { opacity: .9; } /* Filtro movido arriba de la grilla (ver script.js, punto 3). Se deja aire abajo y se limpian los floats de Astra (contador a la izquierda, orden a la derecha) para que no se suban al lado del botón. */ .wc-cat-wrap.is-movido { clear: both; margin: 0 0 16px; } /* Barra lateral que quedó vacía al sacarle el filtro. Solo en mobile: en escritorio el filtro vuelve y la clase se quita, pero por las dudas. */ @media (max-width: 1023px) { .wc-cat-lateral-vacia { display: none !important; } } /* Mientras el panel está abierto, el fondo no scrollea. */ body.wc-cat-sin-scroll { overflow: hidden; } /* ----- Escritorio: columna normal ----- */ @media (min-width: 1024px) { .wc-cat-abrir, .wc-cat-backdrop, .wc-cat-panel-head, .wc-cat-panel-foot { display: none; } .wc-cat-panel { position: static; width: auto; max-width: none; border-left: 0; background: transparent; transform: none; } .wc-cat-panel-body { overflow: visible; padding: 0; } } /* =============================================================== Modo "por niveles" --------------------------------------------------------------- La lista muestra un solo nivel a la vez: tocar una categoría la reemplaza por sus subcategorías. No hay +/−, así que tampoco hace falta el hueco que lo compensa. =============================================================== */ .wc-cat-wrap[data-modo="niveles"] .wc-cat-toggle-hueco { display: none; } /* =============================================================== Barra "Filtrando por" --------------------------------------------------------------- La imprime un hook de WooCommerce arriba de la grilla, así que vive FUERA de .wc-cat-wrap y a lo ancho de la página, no dentro de la columna del filtro. =============================================================== */ .wc-cat-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; font-family: var(--wc-cat-familia); font-size: 13px; line-height: 1.4; color: var(--wc-cat-texto); } /* Sin filtro activo la barra sigue en el HTML (el JS la necesita para poder completarla sin recargar) pero no se ve. */ .wc-cat-activos.is-vacia { display: none; } .wc-cat-activos-label { color: var(--wc-cat-cantidad); } .wc-cat-activos-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--wc-cat-hover); color: var(--wc-cat-texto); } .wc-cat-activos .wc-cat-activos-x { color: var(--wc-cat-cantidad); text-decoration: none; font-size: 15px; line-height: 1; } .wc-cat-activos .wc-cat-activos-x:hover { color: var(--wc-cat-texto); text-decoration: none; } .wc-cat-activos .wc-cat-activos-limpiar { color: var(--wc-cat-texto); text-decoration: underline; } .wc-cat-activos .wc-cat-activos-limpiar:hover { text-decoration: none; }