/* ============================================================================
   Filtros del catálogo
   ----------------------------------------------------------------------------
   Dos formas para el mismo contenido, porque el gesto es distinto:

   · En escritorio, columna lateral siempre visible. Hay sitio y el usuario
     compara mientras filtra.
   · En móvil, hoja inferior. Una columna lateral en un teléfono obliga a
     hacer scroll hasta abajo del todo para volver al listado, y el pulgar
     llega a la parte de abajo de la pantalla, no a la de arriba.

   La barra de "Filtrar" va fija abajo en móvil por lo mismo: es el único
   sitio donde se alcanza sin recolocar la mano.
   ========================================================================= */

/* ── Disposición de la página de catálogo ───────────────────────────────── */

.catalog {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
}

@media (min-width: 1024px) {
    .catalog { grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-4); }
}

/* ── Panel ──────────────────────────────────────────────────────────────── */

.filters {
    /* En móvil el panel es la hoja inferior: fuera de pantalla hasta que se
       abre. `visibility` además del transform para que no reciba foco
       mientras está cerrado. */
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-modal);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -12px 40px -12px rgba(20, 33, 26, 0.35);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--transition-slow), visibility var(--transition-slow);
}

.filters.is-open { transform: translateY(0); visibility: visible; }

/* En movil, mientras el panel esta cerrado NO puede ocupar sitio ni recibir
   foco pase lo que pase. Va con !important a proposito: filters.css se carga
   por extra_css, o sea ANTES que polish.css y signature.css, y cualquier
   regla suya sobre formularios ganaria por orden de cascada. Un panel de
   filtros que se queda abierto tapa la tienda entera. */
@media (max-width: 1023px) {
    .filters:not(.is-open) {
        visibility: hidden !important;
        transform: translateY(100%) !important;
        pointer-events: none;
    }
}

/* Fuera del grid: es un elemento fijo que cubre la pantalla, no una columna
   del catalogo. Sin el position:fixed se comeria la primera columna. */
.filters__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: var(--color-bg-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.filters__backdrop.is-open { opacity: 1; visibility: visible; }

.filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex: none;
}

.filters__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0;
}

.filters__close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--color-text);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.filters__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-3);
    flex: 1 1 auto;
}

.filters__foot {
    display: flex;
    /* Apilados por defecto. Los .btn llevan white-space:nowrap, asi que
       "Limpiar" + "Ver 47 productos" + separacion piden unos 328 px cuando a
       320 solo hay 272 disponibles: el boton que APLICA el filtro se salia de
       la pantalla. En fila solo cuando cabe. */
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    flex: none;
}

.filters__foot .btn { flex: 1; white-space: normal; }

@media (min-width: 480px) {
    .filters__foot { flex-direction: row; }
}

/* ── Grupos ─────────────────────────────────────────────────────────────── */

.filter-group {
    border-bottom: 1px solid var(--color-border-soft);
    padding-block: 4px;
}

.filter-group:last-child { border-bottom: 0; }

.filter-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    /* 44px de alto para que sea cómodo de tocar. */
    padding: 13px 0;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.filter-group > summary::-webkit-details-marker { display: none; }

.filter-group > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-dim);
    border-bottom: 2px solid var(--color-text-dim);
    transform: rotate(45deg);
    transition: transform var(--transition-base);
    flex: none;
    margin-right: 4px;
}

.filter-group[open] > summary::after { transform: rotate(-135deg); }

.filter-group__count {
    font-weight: 500;
    font-size: var(--fs-xs);
    color: var(--color-brand);
}

/* Lista de opciones. Con más de nueve se limita la altura y se hace
   desplazable: 40 marcas seguidas empujan el resto de filtros fuera de la
   pantalla y el usuario ni sabe que existen. */
.filter-options {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-2);
    max-height: 288px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 2px;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.35;
}

.filter-option:hover { color: var(--color-text); }

.filter-option input {
    /* Casilla propia: la nativa mide 13px y es imposible de acertar con el
       dedo. accent-color mantiene el comportamiento y la accesibilidad
       nativos, que es lo que importa. */
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.filter-option__label { flex: 1 1 auto; min-width: 0; }

.filter-option__count {
    font-size: var(--fs-xs);
    color: var(--color-text-dim);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.filter-option input:checked + .filter-option__label {
    color: var(--color-brand-deep);
    font-weight: 700;
}

/* ── Filtros aplicados ──────────────────────────────────────────────────── */

.applied-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-2);
}

.applied-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-brand-deep);
    background: var(--color-brand-tint);
    border: 1px solid var(--color-brand-soft);
    border-radius: var(--radius-pill);
    text-decoration: none;
}

.applied-filter:hover { background: #d9ecdd; }

.applied-filter__x {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    flex: none;
}

.applied-filters__clear {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: center;
}

/* ── Barra de acciones del listado ──────────────────────────────────────── */

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.catalog-toolbar__count {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.catalog-toolbar__count strong { color: var(--color-text); }

.catalog-toolbar__sort {
    font-size: 16px; /* por debajo de 16 iOS hace zoom al enfocar */
    padding: 9px 32px 9px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    /* Un <select> se planta en el ancho de su opcion mas larga ("Precio: de
       menor a mayor") y no encoge solo: en un movil de 320 se salia 37 px por
       la derecha y arrastraba scroll lateral en toda la categoria. */
    min-width: 0;
    max-width: 100%;
}
.catalog-toolbar__form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

/* Botón fijo que abre la hoja. Solo en móvil. */
.filters-fab {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: calc(var(--z-modal) - 2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    background: var(--color-brand);
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta-hover);
    cursor: pointer;
}

.filters-fab__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    color: var(--color-brand-deep);
    background: var(--color-brand-bright);
    border-radius: var(--radius-pill);
}

/* ── A partir de escritorio: el panel deja de ser hoja y pasa a columna ── */

@media (min-width: 1024px) {
    .filters {
        position: sticky;
        top: calc(var(--header-height-desktop) + 16px);
        inset: auto;
        max-height: calc(100vh - var(--header-height-desktop) - 32px);
        transform: none;
        visibility: visible;
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        box-shadow: none;
    }

    .filters__close,
    .filters-fab,
    .filters__backdrop { display: none; }

    .filters__foot { border-top: 1px solid var(--color-border); }
}

/* Quien ha pedido menos movimiento no quiere la hoja deslizándose. */
@media (prefers-reduced-motion: reduce) {
    .filters { transition: none; }
}

/* ── Enlazado interno de la categoría ─────────────────────────────────────
   Las ramas hermanas y las marcas van arriba del listado, que es donde alguien
   que aterriza en una familia de miles de productos decide por dónde entrar.
   En móvil se desplazan en horizontal en vez de apilarse: cinco filas de
   pastillas empujarían los productos fuera de la primera pantalla.
   ───────────────────────────────────────────────────────────────────────── */

.cat-branches,
.cat-brands {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

.cat-branches { flex-wrap: nowrap; }

.cat-branch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 9px 14px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    text-decoration: none;
    white-space: nowrap;
}

.cat-branch:hover { border-color: var(--color-brand); color: var(--color-brand-deep); }

.cat-branch.is-current {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
    font-weight: 700;
}

.cat-branch__n { font-size: var(--fs-xs); opacity: 0.7; font-variant-numeric: tabular-nums; }

.cat-brands { align-items: center; }

.cat-brands__label {
    flex: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
}

.cat-brand {
    flex: none;
    padding: 5px 10px;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
}

.cat-brand span { opacity: 0.6; }
.cat-brand:hover { color: var(--color-brand-deep); background: var(--color-brand-tint); }
.cat-brand--all { font-weight: 700; color: var(--color-brand-deep); }

@media (min-width: 768px) {
    .cat-branches { flex-wrap: wrap; overflow: visible; }
}

/* ── Familia guiada ───────────────────────────────────────────────────────
   Al abrir una familia se enseñan sus ramas antes que el listado. Soltar de
   golpe 618 productos de CBD obliga a recorrer una rejilla entera para
   descubrir que hay flores, hachís, aceites y cosmética; con las ramas
   delante, dos clics llevan a lo que se venía buscando.

   Dentro de una subcategoría esto NO se enseña: allí el usuario ya ha
   elegido y lo que quiere es ver producto cuanto antes.
   ───────────────────────────────────────────────────────────────────────── */

.cat-guide { margin-bottom: var(--space-4); }

.cat-guide__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.cat-guide__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

@media (min-width: 640px)  { .cat-guide__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-guide__grid { grid-template-columns: repeat(4, 1fr); } }

.cat-guide__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: var(--space-2) 10px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.cat-guide__card:hover,
.cat-guide__card:focus-visible {
    border-color: var(--color-brand);
    transform: translateY(-2px);
}

.cat-guide__thumb {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    background: var(--color-bg-soft);
    border-radius: 50%;
    overflow: hidden;
}

.cat-guide__thumb img {
    width: 84%;
    height: 84%;
    /* `contain`, no `cover`: son fotos de producto ya recortado y volver a
       recortarlas les corta la mitad. */
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cat-guide__name {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.25;
}

.cat-guide__n { font-size: var(--fs-xs); color: var(--color-magenta); }

.cat-guide__card:hover .cat-guide__name { color: var(--color-brand-deep); }