/* ==========================================================================
   PRIDO Filter System — prido-filtros.css
   --------------------------------------------------------------------------
   Layouts MUTUAMENTE EXCLUYENTES vía @media queries (viewport real):
     @media (min-width: 1024px)  →  sidebar vertical desktop
     @media (max-width: 1023px)  →  barra horizontal de pills + sheet modal

   Decisión arquitectónica: usamos @media en lugar de un atributo
   data-prido-layout porque LiteSpeed defiere scripts inline y el atributo
   no estaría seteado a tiempo para el primer paint. @media es 100%
   server-rendered y basado en viewport real (no UA).
   ========================================================================== */

/* ==========================================================================
   1. TOKENS LOCALES (componente)
   ========================================================================== */
.prido-filters-panel {
    --pf-accent:        var(--prido-secondary, #2dc6c1);
    --pf-accent-tint:   color-mix(in srgb, var(--pf-accent) 10%, transparent);
    --pf-accent-mid:    color-mix(in srgb, var(--pf-accent) 28%, var(--prido-theme-border));
    --pf-accent-chip:   color-mix(in srgb, var(--pf-accent) 12%, var(--prido-theme-canvas-soft));
    --pf-bg:            var(--prido-theme-surface-strong, #ffffff);
    --pf-ink:           var(--prido-theme-ink, #1a2a3a);
    --pf-muted:         var(--prido-theme-muted, #66788d);
    --pf-border:        var(--prido-theme-border, rgba(201, 212, 221, 0.74));
    --pf-border-strong: var(--prido-theme-border-strong, rgba(188, 201, 212, 0.9));
    --pf-shadow:        var(--prido-theme-shadow-soft, 0 12px 24px rgba(18,29,42,0.05));
    --pf-font:          var(--prido-font-ui, 'Noto Sans', sans-serif);
    --pf-font-heading:  var(--prido-font-heading, 'Outfit', sans-serif);
    --pf-tap:           44px;     /* tap target mínimo accesible */
    --pf-item-h:        40px;
    --pf-check-size:    18px;
    --pf-radius:        14px;
    --pf-radius-pill:   999px;
    --pf-ease:          cubic-bezier(0.22, 0.8, 0.44, 1);
    --pf-duration:      0.18s;
}

/* Dark mode — overrides de los tokens locales para mejor contraste */
:root[data-theme="dark"] .prido-filters-panel,
body.woodmart-dark .prido-filters-panel {
    --pf-bg:            #1e2a38;
    --pf-border:        rgba(255, 255, 255, 0.12);
    --pf-border-strong: rgba(255, 255, 255, 0.22);
    --pf-shadow:        0 8px 24px rgba(0, 0, 0, 0.4);
    --pf-ink:           #edf4f8;
    --pf-muted:         #9fb0bf;
    --pf-accent-chip:   color-mix(in srgb, var(--pf-accent) 18%, #1e2a38);
}

/* ==========================================================================
   2. ESTILOS COMUNES (ambos layouts)
   ========================================================================== */
.prido-filters-panel {
    font-family: var(--pf-font);
    color: var(--pf-ink);
    box-sizing: border-box;
}
.prido-filters-panel *,
.prido-filters-panel *::before,
.prido-filters-panel *::after { box-sizing: inherit; }

/* Custom checkbox — input visualmente oculto, accesible para teclado */
.prido-filter-checkbox {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 0 !important;
}

.prido-filter-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--pf-check-size);
    height: var(--pf-check-size);
    border: 1.5px solid var(--pf-border-strong);
    border-radius: 4px;
    background: var(--prido-theme-canvas-soft, #f2f6f9);
    color: transparent;
    transition: background var(--pf-duration), border-color var(--pf-duration), color var(--pf-duration);
}
.prido-filter-check-icon svg { display: block; }

.prido-filter-item.is-active .prido-filter-check-icon,
.prido-filter-checkbox:checked + .prido-filter-check-icon {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: #fff;
}
.prido-filter-label:hover .prido-filter-check-icon { border-color: var(--pf-accent); }
.prido-filter-checkbox:focus-visible + .prido-filter-check-icon {
    outline: 2px solid var(--pf-accent);
    outline-offset: 2px;
}

.prido-filter-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--pf-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}
.prido-filter-item.is-active .prido-filter-name {
    font-weight: var(--prido-weight-semibold, 600);
    color: var(--pf-accent);
}

.prido-filter-count {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--pf-muted);
    font-weight: var(--prido-weight-regular, 400);
}

.prido-filter-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.prido-filter-item { display: flex; }
.prido-filter-item.prido-filter-hidden { display: none; }

.prido-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--pf-item-h);
    width: 100%;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--pf-duration);
    user-select: none;
}
.prido-filter-label:hover { background: var(--pf-accent-tint); }

/* Chips */
.prido-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 12px;
    border: 1px solid var(--pf-accent-mid);
    border-radius: var(--pf-radius-pill);
    background: var(--pf-accent-chip);
    color: var(--pf-ink);
    font-family: var(--pf-font);
    font-size: 12px;
    font-weight: var(--prido-weight-medium, 500);
    line-height: 1;
    cursor: pointer;
    transition: background var(--pf-duration), border-color var(--pf-duration);
    white-space: nowrap;
    min-height: 28px;
}
.prido-filter-chip:hover {
    background: color-mix(in srgb, var(--pf-accent) 18%, var(--prido-theme-canvas-soft));
    border-color: color-mix(in srgb, var(--pf-accent) 38%, transparent);
}
.prido-filter-chip svg { display: block; flex-shrink: 0; opacity: 0.7; }

.prido-filters-clear-all-chips {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-pill);
    background: transparent;
    color: var(--pf-muted);
    font-family: var(--pf-font);
    font-size: 12px;
    font-weight: var(--prido-weight-medium, 500);
    cursor: pointer;
    transition: background var(--pf-duration), color var(--pf-duration);
    white-space: nowrap;
    min-height: 28px;
}
.prido-filters-clear-all-chips:hover {
    background: var(--pf-accent-tint);
    color: var(--pf-ink);
}

/* "Ver más" link */
.prido-filter-show-more {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--pf-accent);
    font-family: var(--pf-font);
    font-size: 12.5px;
    font-weight: var(--prido-weight-medium, 500);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--pf-duration);
}
.prido-filter-show-more:hover {
    color: color-mix(in srgb, var(--pf-accent) 80%, var(--pf-ink) 20%);
}

/* Sort select */
.prido-sidebar-orderby-select,
.prido-filters-panel select {
    color: var(--pf-ink);
    font-family: var(--pf-font);
    font-weight: var(--prido-weight-medium, 500);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
}

/* Sort pill label */
.prido-filter-sort-pill-label {
    font-size: 12px;
    font-weight: var(--prido-weight-medium, 500);
    color: var(--pf-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Section count badge (next to label) */
.prido-filter-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--pf-radius-pill);
    background: var(--pf-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: var(--prido-weight-bold, 700);
    line-height: 1;
    flex-shrink: 0;
}

.prido-filter-chevron {
    flex-shrink: 0;
    color: var(--pf-muted);
    transition: transform var(--pf-duration) var(--pf-ease);
}

/* Categories tree */
.prido-filter-cat-tree { display: flex; flex-direction: column; }
.prido-filter-cat-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: calc(var(--cat-depth, 0) * 16px);
}
.prido-cat-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--pf-muted);
    cursor: pointer;
    transition: background var(--pf-duration), color var(--pf-duration);
}
.prido-cat-toggle:hover { background: var(--pf-accent-tint); color: var(--pf-ink); }
.prido-cat-toggle svg {
    display: block;
    transition: transform var(--pf-duration) var(--pf-ease);
}
.prido-cat-toggle.is-expanded svg { transform: rotate(90deg); }
.prido-cat-toggle-spacer { display: inline-block; flex-shrink: 0; width: 24px; }
.prido-cat-children {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.prido-cat-children.is-visible {
    display: flex;
    flex-direction: column;
}

/* Price filter inputs */
.prido-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.prido-price-input-group {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    background: var(--prido-theme-canvas-soft);
    transition: border-color var(--pf-duration), box-shadow var(--pf-duration);
    min-height: 36px;
}
.prido-price-input-group:focus-within {
    border-color: var(--pf-accent);
    box-shadow: 0 0 0 3px var(--pf-accent-tint);
}
.prido-price-currency {
    font-size: 12px;
    font-weight: var(--prido-weight-medium, 500);
    color: var(--pf-muted);
    flex-shrink: 0;
}
.prido-price-input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--pf-ink);
    font-family: var(--pf-font);
    font-size: 13px;
    font-weight: var(--prido-weight-medium, 500);
    outline: none;
    -moz-appearance: textfield;
}
.prido-price-input::-webkit-inner-spin-button,
.prido-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prido-price-separator {
    font-size: 13px;
    color: var(--pf-muted);
    flex-shrink: 0;
    user-select: none;
}
.prido-price-slider {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}
.prido-price-slider-track,
.prido-price-slider-range {
    position: absolute;
    height: 4px;
    border-radius: var(--pf-radius-pill);
    pointer-events: none;
}
.prido-price-slider-track {
    left: 0; right: 0;
    background: var(--prido-theme-border, rgba(201, 212, 221, 0.74));
}
.prido-price-slider-range { background: var(--pf-accent) !important; }
.prido-price-range-min,
.prido-price-range-max {
    position: absolute !important;
    width: 100% !important;
    height: 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    pointer-events: none;
    outline: none;
    accent-color: var(--pf-accent) !important;
}
.prido-price-range-min::-webkit-slider-thumb,
.prido-price-range-max::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--pf-accent);
    border-radius: 50%;
    background: var(--prido-theme-surface-strong, #fff);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--pf-accent) 25%, transparent);
    cursor: pointer;
    pointer-events: auto;
    transition: transform var(--pf-duration), box-shadow var(--pf-duration);
}
.prido-price-range-min::-moz-range-thumb,
.prido-price-range-max::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--pf-accent);
    border-radius: 50%;
    background: var(--prido-theme-surface-strong, #fff);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--pf-accent) 25%, transparent);
    cursor: pointer;
    pointer-events: auto;
}

/* Active count badge on "Todos los filtros" pill (mobile) and on chips section */
.prido-filters-all-trigger .prido-filters-all-count,
.prido-filter-section-toggle .prido-filter-section-count {
    margin-left: auto;
}
.prido-filters-all-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--pf-radius-pill);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 10.5px;
    font-weight: var(--prido-weight-bold, 700);
    line-height: 1;
}
.prido-filters-all-trigger[data-active-count]:not([data-active-count="0"]) .prido-filters-all-count {
    display: inline-flex;
}

/* Sheet view button result count (mobile sheet footer) */
.prido-filters-sheet-view-count {
    margin-left: 4px;
    opacity: 0.95;
    font-weight: var(--prido-weight-regular, 400);
}

/* Sheet header title + close */
.prido-filters-sheet-title {
    margin: 0;
    font-family: var(--pf-font-heading);
    font-size: 18px;
    font-weight: var(--prido-weight-semibold, 600);
    color: var(--pf-ink);
    line-height: 1.2;
}
.prido-filters-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pf-tap);
    height: var(--pf-tap);
    padding: 0;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-pill);
    background: transparent;
    color: var(--pf-muted);
    cursor: pointer;
    transition: background var(--pf-duration), color var(--pf-duration);
    font-size: 22px;
    line-height: 1;
}
.prido-filters-sheet-close:hover {
    background: var(--pf-accent-tint);
    color: var(--pf-ink);
}
.prido-filters-sheet-close svg { display: block; width: 18px; height: 18px; }

/* ==========================================================================
   3. POR DEFECTO: ocultar elementos que pertenecen al "otro" layout
   --------------------------------------------------------------------------
   Esto garantiza que si JS no corre o el atributo no se setea, no se ven
   restos de un layout incorrecto.
   ========================================================================== */
.prido-filters-sheet-header,
.prido-filters-sheet-footer,
.prido-filters-scroll-btn,
.prido-filters-sheet-backdrop {
    display: none;
}

/* ==========================================================================
   4. LAYOUT DESKTOP  (data-prido-layout="desktop", ≥ 1024 px)
   --------------------------------------------------------------------------
   Sidebar vertical sticky con todas las secciones expandidas.
   "Todos los filtros" + sheet header/footer/backdrop OCULTOS.
   ========================================================================== */
@media (min-width: 1024px) {

    /* El STICKY es el .prido-shop-sidebar (no el panel). Dentro del flex
       .prido-shop-layout, su columna mide lo que mide .prido-shop-main, que CRECE con
       el infinite scroll → la columna sticky se extiende sola y se libera en el fondo
       de la grilla (último producto), sin solapar el footer. Sin medición JS. */
    .prido-catalog-archive .prido-shop-sidebar,
    .prido-shop-layout .prido-shop-sidebar {
        position: sticky;
        top: calc(var(--prido-hs-offset, 72px) + 16px);
        align-self: flex-start;   /* evita que el flex lo estire e ignore el sticky */
    }

    /* El panel ya no es sticky (lo es el sidebar); queda estático y OCUPA TODO el alto
       del viewport (bajo el header), con scroll interno si los filtros lo superan.
       height (no max-height) para que la caja llene el viewport aunque el contenido
       sea más corto. El bloque @media (min-width:1025px) corrige el zoom:0.9. */
    .prido-filters-panel {
        position: static;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(100dvh - var(--prido-hs-offset, 72px) - 32px);
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--pf-bg);
        border: 1px solid var(--pf-border-strong);
        border-radius: var(--pf-radius);
        box-shadow: var(--pf-shadow);
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--pf-muted) 30%, transparent) transparent;
    }
}

/* zoom:0.9 del shell (≥1025) hace que un height en dvh se RENDERICE 10% más corto y
   deje un hueco abajo. Compensar dividiendo por el factor de zoom para que la caja
   llene el viewport real. (En el borde exacto 1024px no hay zoom → usa el height base.) */
@media (min-width: 1025px) {
    .prido-filters-panel {
        height: calc((100dvh - 16px) / 0.9 - var(--prido-hs-offset, 72px) - 16px);
    }
}


/* WP Admin bar (logged-in users) — compensa los 32px/46px que <html> recibe
   de margin-top para que el sticky no quede tapado por el prido header */
@media (min-width: 1024px) {
    body.admin-bar .prido-catalog-archive .prido-shop-sidebar,
    body.admin-bar .prido-shop-layout .prido-shop-sidebar {
        top: calc(var(--prido-hs-offset, 72px) + 16px + 32px);
    }
    body.admin-bar .prido-filters-panel {
        height: calc(100dvh - var(--prido-hs-offset, 72px) - 64px);
        max-height: none;
    }
}

/* admin-bar (32px fijos, sin zoom) + zoom:0.9 del shell */
@media (min-width: 1025px) {
    body.admin-bar .prido-filters-panel {
        height: calc((100dvh - 48px) / 0.9 - var(--prido-hs-offset, 72px) - 16px);
    }
}

@media (min-width: 1024px) {

    .prido-filters-panel::-webkit-scrollbar { width: 6px; }
    .prido-filters-panel::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--pf-muted) 30%, transparent);
        border-radius: var(--pf-radius-pill);
    }
}


/* Desktop oculta TODO el sistema de pills/sheet — más sort pill y top-sales
   (esos viven solo en la barra horizontal mobile/tablet; en desktop el sort
   lo tiene el toolbar de la grilla y Top ventas no aplica). */
@media (min-width: 1024px) {

    .prido-filters-sheet-header,
    .prido-filters-sheet-footer,
    .prido-filters-scroll-btn,
    .prido-filters-sheet-backdrop,
    .prido-filters-all-trigger,
    .prido-filter-sort-pill,
    .prido-filters-body .prido-top-sales-trigger {
        display: none !important;
    }
}


/* Active chips bar */
@media (min-width: 1024px) {

    .prido-filters-active-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--pf-border);
        flex-shrink: 0;
    }
}


/* Body — vertical stack */
@media (min-width: 1024px) {

    .prido-filters-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding: 6px 0;
    }
}


/* Sort pill — full-width row at top */
@media (min-width: 1024px) {

    .prido-filter-sort-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--pf-border);
        margin: 0 0 4px;
        flex-shrink: 0;
    }
    .prido-sidebar-orderby-select {
        flex: 1 1 auto;
        min-width: 0;
        padding: 7px 26px 7px 10px;
        border: 1px solid var(--pf-border);
        border-radius: 8px;
        background-color: var(--prido-theme-canvas-soft);
        background-image: var(--prido-theme-arrow-url);
        background-repeat: no-repeat;
        background-position: right 8px center;
        font-size: 12.5px;
        min-height: 36px;
        transition: border-color var(--pf-duration), box-shadow var(--pf-duration);
    }
    .prido-sidebar-orderby-select:hover { border-color: var(--pf-accent); }
    .prido-sidebar-orderby-select:focus-visible {
        border-color: var(--pf-accent);
        box-shadow: 0 0 0 3px var(--pf-accent-tint);
    }
}


/* Sections — vertical accordion */
@media (min-width: 1024px) {

    .prido-filter-section {
        border-bottom: 1px solid var(--pf-border);
    }
    .prido-filter-section:last-of-type {
        border-bottom: none;
    }
    .prido-filter-section-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: var(--pf-tap);
        padding: 12px 14px;
        border: none;
        background: transparent;
        color: var(--pf-ink);
        font-family: var(--pf-font);
        font-size: 13px;
        font-weight: var(--prido-weight-semibold, 600);
        text-align: left;
        cursor: pointer;
        transition: background var(--pf-duration);
    }
    .prido-filter-section-toggle:hover { background: var(--pf-accent-tint); }
    .prido-filter-section-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* Títulos de filtro: mayor tamaño y peso (solo el título, no el contenido) */
        font-size: 15px !important;
        font-weight: var(--prido-weight-bold, 700) !important;
    }
    /* Chevron: ABAJO cuando colapsado (el SVG base ya apunta abajo, sin rotación),
       ARRIBA cuando desplegado (rotar 180°). */
    .prido-filter-section.is-collapsed .prido-filter-chevron,
    .prido-filter-section-toggle[aria-expanded="false"] .prido-filter-chevron {
        transform: none;
    }
    .prido-filter-section:not(.is-collapsed) .prido-filter-chevron,
    .prido-filter-section-toggle[aria-expanded="true"] .prido-filter-chevron {
        transform: rotate(180deg);
    }
    .prido-filter-section-body {
        display: block;
        padding: 0 14px 12px;
    }
    .prido-filter-section.is-collapsed .prido-filter-section-body {
        display: none;
    }
}


/* "Top ventas" + special triggers as full-width rows */
@media (min-width: 1024px) {

    .prido-filters-body .prido-top-sales-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: var(--pf-tap);
        padding: 12px 14px;
        border: none;
        border-top: 1px solid var(--pf-border);
        border-radius: 0;
        background: transparent;
        color: var(--pf-ink);
        font-family: var(--pf-font);
        font-size: 13px;
        font-weight: var(--prido-weight-semibold, 600);
        text-align: left;
        cursor: pointer;
        justify-content: space-between;
        transition: background var(--pf-duration);
    }
    .prido-filters-body .prido-top-sales-trigger:hover { background: var(--pf-accent-tint); }
    .prido-filters-body .prido-top-sales-trigger.is-active {
        background: color-mix(in srgb, var(--pf-accent) 10%, transparent);
        color: var(--pf-accent);
    }
}


/* ==========================================================================
   5. LAYOUT MOBILE  (data-prido-layout="mobile", < 1024 px)
   --------------------------------------------------------------------------
   Barra horizontal scrollable de pills + sheet modal con "Todos los filtros".
   El sidebar (vertical) NO se aplica.
   ========================================================================== */

/* Toolbar de la grilla (Mostrando X de Y + orderby + per-page) — oculto en mobile/tablet.
   El sort en mobile vive en el pill bar; per-page se asume default. */
@media (max-width: 1023px) {

    .prido-grilla-toolbar {
        display: none !important;
    }
}


@media (max-width: 1023px) {

    .prido-filters-panel {
        position: relative;
        display: grid;
        grid-template-areas:
            "chips chips chips"
            "prev  bar   next";
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        width: 100%;
        /* Sin shell: pills directamente sobre el fondo de la página. */
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        align-items: stretch;
    }
}


/* Chips row — solo aparece si hay chips activos (el shortcode pone display:none cuando vacío) */
@media (max-width: 1023px) {

    .prido-filters-active-chips {
        grid-area: chips;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 8px 12px 4px;
        border-top: none;
        flex-shrink: 0;
    }
}


/* Bar row — solo el cuerpo scrollable (los botones viven en cells aparte) */
@media (max-width: 1023px) {

    .prido-filters-body {
        grid-area: bar;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 8px 4px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        min-width: 0;   /* esencial: permite shrink dentro del grid */
    }
    .prido-filters-body::-webkit-scrollbar { display: none; }
}


/* Scroll buttons — grid cells (NO absolute), bien alineados con el bar */
@media (max-width: 1023px) {

    .prido-filters-scroll-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: var(--pf-bg);
        color: var(--pf-muted);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        transition: color var(--pf-duration), background var(--pf-duration);
        /* Reset de cualquier resto del position:absolute anterior */
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        z-index: auto;
    }
    .prido-filters-scroll-prev { grid-area: prev; }
    .prido-filters-scroll-next { grid-area: next; }
    .prido-filters-scroll-btn:hover {
        color: var(--pf-ink);
        background: var(--pf-accent-tint);
    }
    .prido-filters-scroll-btn:disabled {
        opacity: 0.3;
        cursor: default;
    }
}


/* Fade gradient en los edges del scroll para indicar continuidad */
@media (max-width: 1023px) {

    .prido-filters-body::before,
    .prido-filters-body::after {
        content: '';
        position: sticky;
        top: 0;
        width: 12px;
        height: 100%;
        pointer-events: none;
        flex-shrink: 0;
        z-index: 1;
    }
    .prido-filters-body::before {
        left: 0;
        background: linear-gradient(to right, var(--pf-bg), transparent);
        margin-right: -12px;
    }
    .prido-filters-body::after {
        right: 0;
        background: linear-gradient(to left, var(--pf-bg), transparent);
        margin-left: -12px;
    }
}


/* Sort pill — inline compact pill */
@media (max-width: 1023px) {

    .prido-filter-sort-pill {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        gap: 2px;
        padding: 0 4px 0 10px;
        border: 1px solid var(--pf-border);
        border-radius: var(--pf-radius-pill);
        background: var(--prido-theme-canvas-soft);
        margin: 0;
        min-height: 36px;
    }
    .prido-filter-sort-pill-label {
        font-size: 11.5px;
        color: var(--pf-muted);
    }
    .prido-sidebar-orderby-select {
        flex: 0 0 auto;
        max-width: 100px;
        padding: 0 18px 0 4px;
        background-color: transparent;
        background-image: var(--prido-theme-arrow-url);
        background-repeat: no-repeat;
        background-position: right 2px center;
        background-size: 10px;
        border: none;
        border-radius: 0;
        font-size: 12px;
        min-height: 32px;
    }
}


/* Pill bar: Top ventas vive solo en el modal; "Ordenar" SÍ es píldora fijada */
@media (max-width: 1023px) {

    .prido-filters-body .prido-top-sales-trigger {
        display: none;
    }
    .prido-filter-sort-pill.prido-filter-pill--pinned {
        display: inline-flex !important;
        order: var(--pill-order, 0);
    }
}


/* Each section = inline pill */
@media (max-width: 1023px) {

    .prido-filter-section {
        display: inline-flex;
        flex-shrink: 0;
        border-bottom: none;
        scroll-snap-align: start;
    }
}


/* Pill bar: solo las secciones FIJADAS (.prido-filter-pill--pinned) se ven en la barra.
   El resto se renderiza en el DOM y aparece solo dentro del drawer/modal "Todos los filtros". */
@media (max-width: 1023px) {

    body:not(.prido-filters-sheet-open) .prido-filters-body > .prido-filter-section:not(.prido-filter-pill--pinned) {
        display: none;
    }
    .prido-filters-body > .prido-filter-section.prido-filter-pill--pinned { order: var(--pill-order, 5); }
    .prido-filter-section-toggle {
        display: inline-flex;
        align-items: center;
        width: auto;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--pf-border);
        border-radius: var(--pf-radius-pill);
        background: var(--prido-theme-canvas-soft);
        color: var(--pf-ink);
        font-family: var(--pf-font);
        font-size: 12px;
        font-weight: var(--prido-weight-medium, 500);
        white-space: nowrap;
        gap: 5px;
        cursor: pointer;
        transition: background var(--pf-duration), border-color var(--pf-duration);
    }
    .prido-filter-section-toggle:hover {
        background: var(--pf-accent-tint);
        border-color: var(--pf-accent);
    }
}

/* Section with active filters — highlighted pill */
@media (max-width: 1023px) {

    .prido-filter-section.has-active .prido-filter-section-toggle,
    .prido-filter-section:has(.prido-filter-checkbox:checked) .prido-filter-section-toggle {
        background: var(--pf-accent-chip);
        border-color: var(--pf-accent-mid);
        color: var(--pf-ink);
    }
}


/* Hide chevron in pill bar */
@media (max-width: 1023px) {

    .prido-filter-section-toggle .prido-filter-chevron { display: none; }
}


/* Section bodies hidden in pill bar (only accessible via sheet) */
@media (max-width: 1023px) {

    .prido-filter-section-body { display: none; }
}


/* Inline action triggers (Top ventas) — oculto en la barra: solo vive en el modal/drawer */
@media (max-width: 1023px) {

    .prido-filters-body .prido-top-sales-trigger {
        display: none;
        align-items: center;
        width: auto;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--pf-border);
        border-radius: var(--pf-radius-pill);
        background: var(--prido-theme-canvas-soft);
        font-size: 12px;
        font-weight: var(--prido-weight-medium, 500);
        white-space: nowrap;
        color: var(--pf-ink);
        flex-shrink: 0;
        cursor: pointer;
    }
    .prido-filters-body .prido-top-sales-trigger.is-active {
        background: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 14%, var(--prido-theme-canvas-soft));
        border-color: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 38%, transparent);
    }
}


/* "Todos los filtros" — CTA pill */
@media (max-width: 1023px) {

    .prido-filters-body .prido-filters-all-trigger {
        display: inline-flex;
        align-items: center;
        width: auto;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid var(--pf-accent);
        border-radius: var(--pf-radius-pill);
        background: var(--pf-accent);
        color: #fff;
        font-family: var(--pf-font);
        font-size: 12px;
        font-weight: var(--prido-weight-semibold, 600);
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
        gap: 5px;
        transition: background var(--pf-duration);
    }
    .prido-filters-body .prido-filters-all-trigger svg {
        color: rgba(255, 255, 255, 0.85);
        width: 12px;
        height: 12px;
    }
    .prido-filters-body .prido-filters-all-trigger:hover {
        background: color-mix(in srgb, var(--pf-accent) 88%, #000 12%);
    }
}


/* ==========================================================================
   6. SHEET MODE  — .is-all-filters-open + body.prido-filters-sheet-open
   --------------------------------------------------------------------------
   Modal de pantalla completa (mobile) / centrado (tablet) con TODOS los
   filtros expandibles. Solo aplicable en mobile layout.
   ========================================================================== */
@media (max-width: 1023px) {

    .prido-filters-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(10, 18, 30, 0.54);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
}

@media (max-width: 1023px) {
    :root[data-theme="dark"] .prido-filters-sheet-backdrop,
    body.woodmart-dark .prido-filters-sheet-backdrop {
        background: rgba(4, 8, 16, 0.72);
    }
    body.prido-filters-sheet-open .prido-filters-sheet-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Body scroll lock when sheet open */
body.prido-filters-sheet-open {
    overflow: hidden !important;
    touch-action: none;
}

/* Modal fullscreen — cubre toda la pantalla en mobile y tablet */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open {
        position: fixed !important;
        inset: 0;
        z-index: 100001;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        background: var(--pf-bg);
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        animation: pf-sheet-up 0.28s var(--pf-ease) forwards;
    }
}


/* WP admin bar (logueado): empujar el modal debajo de la barra */
@media (max-width: 1023px) and (min-width: 783px) {
    body.admin-bar .prido-filters-panel.is-all-filters-open {
        top: 32px;
        height: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
}
@media (max-width: 782px) {
    body.admin-bar .prido-filters-panel.is-all-filters-open {
        top: 46px;
        height: calc(100% - 46px);
        max-height: calc(100vh - 46px);
        max-height: calc(100dvh - 46px);
    }
}

@keyframes pf-sheet-up {
    from { transform: translateY(100%); opacity: 0.7; }
    to   { transform: translateY(0);    opacity: 1;   }
}

/* Header + footer visible in sheet */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px 14px;
        border-bottom: 1px solid var(--pf-border);
        flex-shrink: 0;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-sheet-footer {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--pf-border);
        flex-shrink: 0;
        background: var(--pf-bg);
    }
}


.prido-filters-sheet-view {
    flex: 1 1 auto;
    min-height: var(--pf-tap);
    padding: 0 16px;
    border: none;
    border-radius: var(--pf-radius-pill);
    background: var(--pf-accent);
    color: #fff;
    font-family: var(--pf-font);
    font-size: 13.5px;
    font-weight: var(--prido-weight-semibold, 600);
    cursor: pointer;
    transition: background var(--pf-duration);
}
.prido-filters-sheet-view:hover {
    background: color-mix(in srgb, var(--pf-accent) 88%, #000 12%);
}

.prido-filters-clear-all {
    min-height: var(--pf-tap);
    padding: 0 16px;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-pill);
    background: transparent;
    color: var(--pf-muted);
    font-family: var(--pf-font);
    font-size: 12.5px;
    font-weight: var(--prido-weight-medium, 500);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pf-duration), color var(--pf-duration);
}
.prido-filters-clear-all:hover {
    background: var(--pf-accent-tint);
    color: var(--pf-ink);
}

/* Sheet body — restore vertical layout for sections */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-active-chips {
        grid-area: auto;
        border-top: none;
        border-bottom: 1px solid var(--pf-border);
        padding: 10px 16px 8px;
    }
}


@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body {
        grid-area: auto;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px 0;
        gap: 0;
        min-height: 0;
        scrollbar-width: thin;
        position: static;
    }
}


/* Hide pill-mode scroll buttons inside the sheet */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-scroll-btn {
        display: none;
    }
}


/* Sections become vertical accordions inside sheet */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section {
        display: block;
        border-bottom: 1px solid var(--pf-border);
        scroll-snap-align: none;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section:last-of-type {
        border-bottom: none;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section-toggle {
        display: flex;
        width: 100%;
        min-height: var(--pf-tap);
        padding: 12px 18px;
        border: none;
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        font-weight: var(--prido-weight-semibold, 600);
        white-space: normal;
        gap: 8px;
        text-align: left;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section-toggle .prido-filter-chevron {
        display: block;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section.is-collapsed .prido-filter-chevron {
        transform: none;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section:not(.is-collapsed) .prido-filter-chevron {
        transform: rotate(180deg);
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section-body {
        display: block;
        padding: 2px 18px 14px;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section.is-collapsed .prido-filter-section-body {
        display: none;
    }
}


/* Sort pill restored as row inside sheet */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-sort-pill {
        display: flex;
        padding: 12px 18px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--pf-border);
        background: transparent;
        margin: 0;
        min-height: 56px;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-sidebar-orderby-select {
        flex: 1;
        max-width: none;
        padding: 8px 26px 8px 10px;
        border: 1px solid var(--pf-border);
        border-radius: 8px;
        background-color: var(--prido-theme-canvas-soft);
        background-image: var(--prido-theme-arrow-url);
        background-repeat: no-repeat;
        background-position: right 8px center;
    }
}


/* Action triggers as rows in sheet */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body .prido-top-sales-trigger,
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body .prido-filters-all-trigger {
        display: flex;
        width: 100%;
        min-height: var(--pf-tap);
        padding: 14px 18px;
        border: none;
        border-top: 1px solid var(--pf-border);
        border-radius: 0;
        background: transparent;
        color: var(--pf-ink);
        font-family: var(--pf-font);
        font-size: 14px;
        font-weight: var(--prido-weight-semibold, 600);
        justify-content: space-between;
    }
}

/* "Todos los filtros" inside sheet is redundant — hide it */
@media (max-width: 1023px) {

    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body .prido-filters-all-trigger {
        display: none;
    }
}


/* ==========================================================================
   7. LOADING OVERLAY — feedback visual durante fetch AJAX
   --------------------------------------------------------------------------
   El JS toggle .is-loading en .prido-grilla-wrapper. CSS dibuja overlay
   semi-transparente sobre la grilla con spinner + mensaje. NO cubre el
   panel de filtros (queda interactivo).
   ========================================================================== */
.prido-grilla-wrapper {
    position: relative;
}

/* Mensaje que el JS inyecta en init y monta en <body>: pill fijo y centrado
   en el viewport para que SIEMPRE quede visible, sin importar el scroll ni la
   altura de la grilla (antes era sticky como último hijo del wrapper, por lo
   que su posición natural quedaba al fondo y caía fuera del viewport).
   z-index alto: por encima del sheet de filtros móvil (9999). */
.prido-grilla-loading-msg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 10px 18px;
    background: var(--prido-theme-surface-strong, #fff);
    border: 1px solid var(--prido-theme-border, rgba(201,212,221,0.74));
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(18, 29, 42, 0.12);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px));
    transition: opacity 0.18s ease, transform 0.18s ease;
    font-family: var(--prido-font-ui, 'Noto Sans', sans-serif);
    font-size: 13px;
    font-weight: var(--prido-weight-semibold, 600);
    color: var(--prido-theme-ink, #1a2a3a);
}

/* Spinner via ::before del mensaje */
.prido-grilla-loading-msg::before {
    content: '';
    width: 22px;
    height: 22px;
    border: 2.5px solid color-mix(in srgb, var(--prido-secondary, #2dc6c1) 25%, transparent);
    border-top-color: var(--prido-secondary, #2dc6c1);
    border-radius: 50%;
    animation: prido-filter-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes prido-filter-spin {
    to { transform: rotate(360deg); }
}

/* Overlay sobre los productos cuando is-loading.
   :not(:has(.prido-grilla-skeleton)) → si hay skeletons, NO atenuar/difuminar (deben
   verse nítidos; los skeletons SON el indicador de carga). */
.prido-grilla-wrapper.is-loading:not(:has(.prido-grilla-skeleton))::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--prido-theme-canvas, #f8fafc) 75%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;       /* bloquea clicks sobre productos */
    cursor: progress;
    transition: opacity 0.18s ease;
}

body.prido-grilla-is-loading .prido-grilla-loading-msg {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Dark mode — pill del loading message */
:root[data-theme="dark"] .prido-grilla-loading-msg,
body.woodmart-dark .prido-grilla-loading-msg {
    background: #1e2a38;
    border-color: rgba(255, 255, 255, 0.18);
    color: #edf4f8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Cuando loading: bajar opacidad de los productos para énfasis visual (salvo si hay
   skeletons → se ven nítidos). */
.prido-grilla-wrapper.is-loading:not(:has(.prido-grilla-skeleton)) .prido-grilla-products {
    opacity: 0.4;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Dark mode — colores del overlay y mensaje */
:root[data-theme="dark"] .prido-grilla-wrapper.is-loading:not(:has(.prido-grilla-skeleton))::before,
body.woodmart-dark .prido-grilla-wrapper.is-loading:not(:has(.prido-grilla-skeleton))::before {
    background: rgba(17, 24, 33, 0.78);
}

/* Reduce motion: spinner sin animación, mensaje sin slide (pero conserva el
   centrado translate(-50%,-50%); solo se anima la opacidad). */
@media (prefers-reduced-motion: reduce) {
    .prido-grilla-loading-msg::before { animation-duration: 2s; }
    .prido-grilla-loading-msg,
    body.prido-grilla-is-loading .prido-grilla-loading-msg {
        transition: opacity 0.1s ease;
        transform: translate(-50%, -50%);
    }
}

/* ==========================================================================
   8. ACCESIBILIDAD — focus visible
   ========================================================================== */
.prido-filters-panel button:focus-visible,
.prido-filters-panel select:focus-visible,
.prido-filter-chip:focus-visible {
    outline: 2px solid var(--pf-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .prido-filter-chevron,
    .prido-cat-toggle svg,
    .prido-filter-label,
    .prido-filter-section-toggle,
    .prido-filter-chip,
    .prido-filters-sheet-backdrop,
    .prido-price-range-min::-webkit-slider-thumb,
    .prido-price-range-max::-webkit-slider-thumb {
        transition: none !important;
    }
    @keyframes pf-sheet-up   { from { transform: translateY(0); opacity: 1; } to { transform: translateY(0); opacity: 1; } }
    @keyframes pf-sheet-fade { from { opacity: 1; } to { opacity: 1; } }
}

/* ==========================================================================
   MIGRACIÓN CARRITO/CHECKOUT — de-round filtro + Noto Sans + pesos 600
   Panel 12px · chips/toggle 8px · inputs/selects/labels 6px · sin pastillas.
   ========================================================================== */
.prido-filters-panel { --pf-radius: 12px; }
.prido-filters-sheet-title { font-family: var(--pf-font) !important; }
.prido-filter-chip,
.prido-filters-clear-all-chips,
.prido-filter-section-toggle { border-radius: 8px !important; }
.prido-price-input-group,
.prido-sidebar-orderby-select,
.prido-filter-label { border-radius: 6px !important; }
.prido-filter-chip,
.prido-filter-section-toggle,
.prido-sidebar-orderby-select,
.prido-filter-show-more,
.prido-filters-clear-all-chips { font-weight: 600 !important; }

/* ==========================================================================
   ACCESIBILIDAD TÁCTIL — objetivos de toque cómodos en dispositivos touch
   (QA UX 2026-05-30). Solo afecta punteros gruesos (móvil/tablet/táctil);
   NO cambia el desktop con ratón. Sube chips (28→40px), toggle de categoría
   (24→40px, conservando alineación con el spacer) y thumbs de precio (22→28px).
   ========================================================================== */
@media (pointer: coarse) {
    .prido-filter-chip,
    .prido-filters-clear-all-chips {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .prido-cat-toggle,
    .prido-cat-toggle-spacer {
        width: 40px;
    }
    .prido-cat-toggle {
        height: 40px;
    }
    .prido-price-range-min::-webkit-slider-thumb,
    .prido-price-range-max::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }
    .prido-price-range-min::-moz-range-thumb,
    .prido-price-range-max::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }
}

/* PRIDO Filtros · rediseño de píldoras (2026-05-30)
   Tablet 768-1023 + mobile <=767: barra de píldoras cuadradas/minimal.
   Solo las píldoras fijadas (.prido-filter-pill--pinned) se muestran; el resto
   vive en el drawer (tablet) / modal (mobile) "Todos los filtros". */
@media (max-width: 1023px) {
    .prido-filters-body { gap: 8px; padding: 10px 4px; }

    /* Píldora de sección: cuadrada, minimal, label centrado */
    .prido-filters-body > .prido-filter-section.prido-filter-pill--pinned .prido-filter-section-toggle {
        justify-content: center;
        min-height: 42px;
        padding: 0 16px;
        border: 1px solid var(--pf-border);
        background: var(--pf-bg);
        color: var(--pf-ink);
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(18,29,42,0.04);
    }
    .prido-filters-body > .prido-filter-section.prido-filter-pill--pinned .prido-filter-section-toggle:hover {
        border-color: var(--pf-accent);
    }
    .prido-filters-body > .prido-filter-section.prido-filter-pill--pinned.has-active .prido-filter-section-toggle,
    .prido-filters-body > .prido-filter-section.prido-filter-pill--pinned:has(.prido-filter-checkbox:checked) .prido-filter-section-toggle {
        border-color: var(--pf-accent);
        background: var(--pf-accent-chip);
        color: var(--pf-accent);
    }

    /* "Ordenar": píldora cuadrada que envuelve el select nativo */
    .prido-filter-sort-pill.prido-filter-pill--pinned {
        align-items: center;
        gap: 2px;
        min-height: 42px;
        padding: 0 8px 0 14px;
        border: 1px solid var(--pf-border);
        border-radius: 8px;
        background: var(--pf-bg);
        box-shadow: 0 1px 2px rgba(18,29,42,0.04);
    }
    .prido-filter-sort-pill.prido-filter-pill--pinned .prido-filter-sort-pill-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--pf-ink);
    }

    /* "Todos los filtros": minimal, outline accent (cuadrada en tablet) */
    .prido-filters-body .prido-filters-all-trigger {
        order: 100;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 8px;
        border: 1px solid var(--pf-accent);
        background: var(--pf-accent-chip);
        color: var(--pf-accent);
        font-weight: 600;
        box-shadow: none;
    }
    .prido-filters-body .prido-filters-all-trigger svg { color: var(--pf-accent); opacity: 1; }
    .prido-filters-body .prido-filters-all-trigger:hover {
        background: color-mix(in srgb, var(--pf-accent) 16%, var(--pf-bg));
        border-color: var(--pf-accent);
    }
}

/* Mobile (<=767): "Todos los filtros" RECTANGULAR y destacado (gateway al modal) */
@media (max-width: 767px) {
    .prido-filters-body .prido-filters-all-trigger {
        padding: 0 20px;
        background: var(--pf-accent);
        color: #fff;
        border-color: var(--pf-accent);
    }
    .prido-filters-body .prido-filters-all-trigger svg { color: rgba(255,255,255,0.92); }
    .prido-filters-body .prido-filters-all-trigger:hover {
        background: color-mix(in srgb, var(--pf-accent) 90%, #000 10%);
    }
}

/* Tablet (768-1023): "Todos los filtros" abre un DRAWER lateral derecho.
   .is-drawer lo añade el JS; gana en especificidad sobre el modal base. */
@media (min-width: 768px) and (max-width: 1023px) {
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open.is-drawer {
        inset: 0 0 0 auto;
        width: min(420px, 92vw);
        max-width: 92vw;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-left: 1px solid var(--pf-border);
        border-radius: 0;
        box-shadow: -14px 0 44px rgba(10,18,30,0.28);
        animation: pf-drawer-in 0.26s var(--pf-ease) forwards;
    }
}
@keyframes pf-drawer-in {
    from { transform: translateX(100%); opacity: 0.85; }
    to   { transform: translateX(0);    opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes pf-drawer-in { from { transform: translateX(0); opacity: 1; } to { transform: translateX(0); opacity: 1; } }
}

/* Fix drawer/modal (2026-05-30): los gradientes de fade ::before/::after de la
   barra horizontal se convierten en items flex de altura completa en el layout
   en columna del sheet y empujan las secciones fuera de vista — ocultarlos.
   Además, normalizar los toggles fijados como filas (no píldoras) dentro del sheet. */
@media (max-width: 1023px) {
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body::before,
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body::after {
        display: none !important;
    }
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filter-section.prido-filter-pill--pinned .prido-filter-section-toggle {
        justify-content: flex-start;
        border: none;
        background: transparent;
        box-shadow: none;
        min-height: var(--pf-tap);
        padding: 12px 18px;
    }
}

/* En el sheet/drawer/modal el orden es el natural del DOM; la propiedad `order`
   (Precio=1, Color=3, etc.) es SOLO para la barra de píldoras. */
@media (max-width: 1023px) {
    body.prido-filters-sheet-open .prido-filters-panel.is-all-filters-open .prido-filters-body > * {
        order: 0 !important;
    }
}

/* Popover de píldora (2026-05-30) — opciones de UN filtro ancladas a su píldora.
   Portado a <body>, así que define sus propios tokens --pf-* (light + dark). */
.prido-filter-popover {
    --pf-accent:        var(--prido-secondary, #2dc6c1);
    --pf-accent-tint:   color-mix(in srgb, var(--pf-accent) 10%, transparent);
    --pf-accent-mid:    color-mix(in srgb, var(--pf-accent) 28%, var(--prido-theme-border));
    --pf-accent-chip:   color-mix(in srgb, var(--pf-accent) 12%, var(--prido-theme-canvas-soft));
    --pf-bg:            var(--prido-theme-surface-strong, #ffffff);
    --pf-ink:           var(--prido-theme-ink, #1a2a3a);
    --pf-muted:         var(--prido-theme-muted, #66788d);
    --pf-border:        var(--prido-theme-border, rgba(201, 212, 221, 0.74));
    --pf-border-strong: var(--prido-theme-border-strong, rgba(188, 201, 212, 0.9));
    --pf-font:          var(--prido-font-ui, 'Noto Sans', sans-serif);
    --pf-check-size:    18px;
    --pf-item-h:        40px;
    --pf-duration:      0.18s;
    --pf-ease:          cubic-bezier(0.22, 0.8, 0.44, 1);
    --pf-radius-pill:   999px;
    --prido-theme-canvas-soft: var(--prido-theme-canvas-soft, #f2f6f9);
    position: fixed;
    z-index: 100010;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: min(62vh, 460px);
    background: var(--pf-bg);
    color: var(--pf-ink);
    font-family: var(--pf-font);
    border: 1px solid var(--pf-border-strong);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(10, 18, 30, 0.26);
    overflow: hidden;
    animation: pf-pop-in 0.16s var(--pf-ease);
}
:root[data-theme="dark"] .prido-filter-popover,
body.woodmart-dark .prido-filter-popover {
    --pf-bg: #1e2a38;
    --pf-border: rgba(255, 255, 255, 0.12);
    --pf-border-strong: rgba(255, 255, 255, 0.22);
    --pf-ink: #edf4f8;
    --pf-muted: #9fb0bf;
    --pf-accent-chip: color-mix(in srgb, var(--pf-accent) 18%, #1e2a38);
}
.prido-filter-popover *,
.prido-filter-popover *::before,
.prido-filter-popover *::after { box-sizing: border-box; }
.prido-filter-popover-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--pf-border); flex-shrink: 0;
}
.prido-filter-popover-title { font-family: var(--pf-font); font-size: 14px; font-weight: 600; color: var(--pf-ink); }
.prido-filter-popover-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--pf-border); border-radius: 8px; background: transparent;
    color: var(--pf-muted); cursor: pointer; transition: background var(--pf-duration), color var(--pf-duration);
}
.prido-filter-popover-close:hover { background: var(--pf-accent-tint); color: var(--pf-ink); }
.prido-filter-popover .prido-filter-section-body {
    display: block !important;
    padding: 8px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.prido-filter-popover-backdrop { position: fixed; inset: 0; z-index: 100009; background: rgba(10, 18, 30, 0.4); }
:root[data-theme="dark"] .prido-filter-popover-backdrop,
body.woodmart-dark .prido-filter-popover-backdrop { background: rgba(4, 8, 16, 0.55); }
.prido-filter-popover.is-sheet {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 74vh;
    animation: pf-sheet-up 0.24s var(--pf-ease);
}
@keyframes pf-pop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1023px) {
    .prido-filter-section.is-popover-open .prido-filter-section-toggle {
        border-color: var(--pf-accent);
        background: var(--pf-accent-chip);
        color: var(--pf-accent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .prido-filter-popover { animation: none; }
}

/* Flechas de scroll de las píldoras (2026-05-30): por TIPO DE PUNTERO.
   Touch (mobile/tablet) → sin flechas, scroll por swipe. Mouse → flechas sutiles. */
@media (max-width: 1023px) and (pointer: coarse) {
    .prido-filters-scroll-btn { display: none !important; }
}
@media (max-width: 1023px) and (pointer: fine) {
    .prido-filters-scroll-btn {
        width: 22px;
        font-size: 13px;
        opacity: 0.4;
        background: transparent;
        transition: opacity var(--pf-duration), color var(--pf-duration);
    }
    .prido-filters-scroll-btn:hover {
        opacity: 0.85;
        background: transparent;
        color: var(--pf-ink);
    }
    .prido-filters-scroll-btn:disabled { opacity: 0.15; }
}


/* ==========================================================================
   PREMIUM NEUTRAL v2 — 2026-05-31 (filters aligned to the grid)
   Neutral palette (ink, no teal), hairline borders, flat panel, lighter labels,
   same system as the product grid. Light + dark.
   ========================================================================== */
.prido-filters-panel {
    --pf-accent: var(--prido-theme-ink);
    --pf-shadow: none;
    --pf-radius: 12px;
}
:root[data-theme="dark"] .prido-filters-panel,
body.woodmart-dark .prido-filters-panel { --pf-accent: var(--prido-theme-ink); }

/* Checked checkbox: ink fill + inverse (canvas) check → legible in both themes */
.prido-filter-item.is-active .prido-filter-check-icon,
.prido-filter-checkbox:checked + .prido-filter-check-icon { color: var(--prido-theme-canvas) !important; }

/* Panel → flat hairline (matches cards) */
.prido-filters-panel { box-shadow: none !important; }
@media (min-width: 1024px) {
    .prido-filters-panel { box-shadow: none !important; border: 1px solid var(--prido-theme-border) !important; }
}

/* Labels → medium toggles, regular names (typography parity with grid) */
.prido-filter-section-toggle { font-weight: var(--prido-weight-medium) !important; }
.prido-filter-name,
.prido-filter-item.is-active .prido-filter-name { font-weight: var(--prido-weight-regular) !important; color: var(--prido-theme-ink) !important; }

/* Active-filter chips → hairline + subtle neutral tint */
.prido-filter-chip {
    border: 1px solid var(--prido-theme-border) !important;
    background: color-mix(in srgb, var(--prido-theme-ink) 7%, transparent) !important;
    color: var(--prido-theme-ink) !important;
}

/* Price inputs → hairline only */
.prido-price-input-group { background: transparent !important; border: 1px solid var(--prido-theme-border) !important; }

/* Lighter dividers */
.prido-filters-active-chips,
.prido-filter-sort-pill { border-bottom-color: var(--prido-theme-border) !important; }

/* Softer overlays */
.prido-filter-popover { box-shadow: 0 8px 24px rgba(18, 29, 42, 0.10) !important; }
.prido-filters-sheet-backdrop { background: rgba(10, 18, 30, 0.40) !important; }
.prido-filter-popover-backdrop { background: rgba(10, 18, 30, 0.34) !important; }


/* ==========================================================================
   v3 AJUSTES — 2026-06-01: bordes rectos + fix anidado del árbol de categorías
   ========================================================================== */
/* (1) Bordes rectos en panel, chips, toggles, inputs, botones */
.prido-filters-panel,
.prido-filter-chip,
.prido-filters-clear-all-chips,
.prido-filter-section-toggle,
.prido-price-input-group,
.prido-orderby-select,
.prido-sidebar-orderby-select,
.prido-filters-all-trigger,
.prido-filters-sheet-view,
.prido-filters-clear-all,
.prido-filters-sheet-close,
.prido-filter-popover { border-radius: 4px !important; }

/* (2) FIX árbol de categorías: el <li> padre es flex(row) y pone los hijos a la
   derecha (fuera del panel). Apilarlos debajo → display:block (sin romper los
   items ocultos de "Ver más"). */
.prido-filter-cat-tree .prido-filter-item:not(.prido-filter-hidden) { display: block; }


/* ==========================================================================
   v4 — 2026-06-01: "Ordenar" + "Mostrar" movidos al sidebar (desktop)
   Se ocultan los controles del toolbar de la grilla (.prido-grilla-controls)
   y se muestran arriba de los filtros. Solo desktop; en tablet/mobile siguen
   las píldoras. El bloque vive FUERA de #prido-filters-body para sobrevivir
   al reemplazo por AJAX.
   ========================================================================== */
@media (min-width: 1024px) {
    /* Ocultar TODO el toolbar superior de la grilla en desktop: el orden/cantidad ya
       viven en el sidebar (.prido-sidebar-controls) y el conteo "Mostrando X de Y" se
       retiró para una grilla más limpia (el conteo vive abajo en .prido-grilla-loadmore-count).
       Se oculta el contenedor pero .prido-grilla-result-count sigue en el DOM para que el JS
       lo siga leyendo/actualizando (seed de lastResultCount, footer del sheet móvil). */
    .prido-grilla-toolbar { display: none !important; }

    .prido-sidebar-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--pf-border);
        flex-shrink: 0;
    }
    .prido-sidebar-control {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .prido-sidebar-control-label {
        flex: 0 0 auto;
        min-width: 54px;
        font-size: 12px;
        font-weight: var(--prido-weight-medium, 500);
        color: var(--pf-muted);
        white-space: nowrap;
    }
    /* El select reutiliza el estilo de .prido-sidebar-orderby-select definido arriba */
    .prido-sidebar-control--orderby .prido-sidebar-orderby-select { flex: 1 1 auto; }

    .prido-sidebar-pp-options {
        display: flex;
        flex: 1 1 auto;
        gap: 6px;
        min-width: 0;
    }
    .prido-sidebar-pp-options .prido-pp-option {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        padding: 7px 0;
        border: 1px solid var(--pf-border);
        border-radius: 4px;
        background: var(--prido-theme-canvas-soft);
        color: var(--pf-ink);
        font-size: 12.5px;
        line-height: 1;
        text-decoration: none;
        transition: border-color var(--pf-duration), background var(--pf-duration), color var(--pf-duration);
    }
    .prido-sidebar-pp-options .prido-pp-option:hover { border-color: var(--pf-accent); }
    .prido-sidebar-pp-options .prido-pp-option.is-active {
        background: var(--pf-accent);
        border-color: var(--pf-accent);
        color: #fff;
        font-weight: var(--prido-weight-semibold, 600);
    }
}

/* Tablet/mobile (≤1023): se usan las píldoras → ocultar el bloque del sidebar */
@media (max-width: 1023px) {
    .prido-sidebar-controls { display: none !important; }
}


/* ==========================================================================
   Infinite scroll — región "Cargar más" (reemplaza la paginación)
   IMPORTANTE: vive en .prido-grilla-wrapper (columna main), FUERA de
   .prido-filters-panel → NO hereda los tokens --pf-*. Usa tokens GLOBALES del
   sitio (--prido-secondary / --prido-theme-*), que ya son theme-aware
   (claro+oscuro). Todos los breakpoints.
   ========================================================================== */
.prido-grilla-loadmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0 8px;
    min-height: 24px;
}
/* "Se muestran N de TOTAL resultados" */
.prido-grilla-loadmore-count {
    font-size: 14px;
    color: var(--prido-theme-ink, #1a2a3a);
    text-align: center;
}
/* Línea divisoria sobre el botón (theme-aware) */
.prido-grilla-loadmore-divider {
    width: 100%;
    max-width: 340px;
    height: 0;
    border-top: 2px solid var(--prido-theme-ink, #1a2a3a);
}
/* Botón RECTANGULAR delineado (no pill); neutral theme-aware vía --prido-theme-ink */
.prido-grilla-loadmore-link,
.prido-grilla-loadmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    margin-top: 6px;
    padding: 14px 40px;
    border: 1.5px solid var(--prido-theme-ink, #1a2a3a);
    border-radius: 4px;
    background: transparent;
    color: var(--prido-theme-ink, #1a2a3a);
    font-weight: var(--prido-weight-bold, 700);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.prido-grilla-loadmore-link:hover,
.prido-grilla-loadmore-btn:hover {
    background: var(--prido-theme-ink, #1a2a3a);
    color: var(--prido-theme-canvas, #f8fafc);
    box-shadow: var(--prido-theme-shadow-soft, 0 8px 24px rgba(0,0,0,0.18));
}
.prido-grilla-loadmore.is-loading .prido-grilla-loadmore-link,
.prido-grilla-loadmore-link.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}
.prido-grilla-loadmore-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
    font-size: 13px;
    color: var(--prido-theme-muted, #66788d);
}
/* Spinner (reusa @keyframes prido-filter-spin) mientras carga la tanda */
.prido-grilla-loadmore.is-loading .prido-grilla-loadmore-status::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2.5px solid color-mix(in srgb, var(--prido-secondary, #2dc6c1) 25%, transparent);
    border-top-color: var(--prido-secondary, #2dc6c1);
    border-radius: 50%;
    animation: prido-filter-spin 0.7s linear infinite;
}
.prido-grilla-loadmore-retry {
    margin-left: 6px;
    padding: 6px 14px;
    border: 1px solid var(--prido-secondary, #2dc6c1);
    border-radius: 999px;
    background: transparent;
    color: var(--prido-secondary, #2dc6c1);
    font-weight: var(--prido-weight-semibold, 600);
    font-size: 12.5px;
    cursor: pointer;
}
.prido-grilla-loadmore-retry:hover { background: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 12%, transparent); }
.prido-grilla-loadmore-errtext { color: var(--prido-theme-ink, #1a2a3a); }

/* Paginación clásica retirada (ya no se renderiza); neutralizar por si algún
   estilo combinado dejara espacio fantasma. */
.prido-grilla-pagination { display: none !important; }