/* ==========================================================================
   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)
   ========================================================================== */
/* Paleta fiel al mockup Claude Design "Filtro PRIDO - Redesign" (2026-07-09):
   teal #1FB6B0 (tinta #0E7E7A), superficies/bordes/neutros del design system
   Prido (colors_and_type.css) y tipografía Manrope + JetBrains Mono (ya
   encoladas por prido-collhead-fonts en páginas de catálogo). */
.prido-filters-panel {
    --pf-accent:        #1FB6B0;
    --pf-accent-ink:    #0E7E7A;
    --pf-accent-soft:   #E7F6F5;
    --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:            #FFFFFF;
    --pf-ink:           #1B232C;
    --pf-fg2:           #4D5866;
    --pf-muted:         #6B7785;
    --pf-ph:            #97A2AE;
    --pf-bd-sub:        #ECEFF3;
    --pf-border:        #DDE2E8;
    --pf-border-strong: #C2CAD3;
    --pf-chip:          #F5F7F9;
    --pf-track:         #DDE2E8;
    --pf-danger:        #C0392B;
    --pf-shadow:        0 12px 30px -18px rgba(15, 30, 45, 0.28), 0 1px 3px rgba(15, 30, 45, 0.06);
    --pf-font:          'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pf-font-heading:  var(--prido-font-heading, 'Outfit', sans-serif);
    --pf-mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --pf-tap:           44px;     /* tap target mínimo accesible */
    --pf-item-h:        40px;
    --pf-check-size:    18px;
    --pf-radius:        16px;
    --pf-radius-pill:   999px;
    --pf-ease:          cubic-bezier(0.2, 0, 0.2, 1);
    --pf-duration:      0.14s;
}

/* Dark mode — tokens del frame oscuro del mockup */
:root[data-theme="dark"] .prido-filters-panel,
body.woodmart-dark .prido-filters-panel {
    --pf-bg:            #111A24;
    --pf-ink:           #E7EDF2;
    --pf-fg2:           #AEBCC8;
    --pf-muted:         #7E8C99;
    --pf-ph:            #5A6875;
    --pf-bd-sub:        rgba(255, 255, 255, 0.06);
    --pf-border:        rgba(255, 255, 255, 0.11);
    --pf-border-strong: rgba(255, 255, 255, 0.20);
    --pf-chip:          #16212C;
    --pf-track:         rgba(255, 255, 255, 0.14);
    --pf-accent-ink:    #5BC9C4;
    --pf-accent-soft:   rgba(31, 182, 176, 0.16);
    --pf-danger:        #E58E81;
    --pf-shadow:        0 18px 40px -20px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
    --pf-accent-chip:   color-mix(in srgb, var(--pf-accent) 18%, #16212C);
}

/* ==========================================================================
   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. */
    /* El sticky se pega casi al borde superior (top = 8+8 = 16px). Es seguro porque
       en catálogo el header NO reaparece en scroll-up mientras la columna está sticky
       (bloque v6.1 al final): una vez oculto, queda oculto hasta volver al tope
       (y<18), donde el sidebar ya está en flujo natural bajo el hero. Este var
       también dimensiona la altura del panel (100dvh − offset − márgenes). */
    .prido-shop-layout { --pf-hs-offset: 8px; }

    .prido-catalog-archive .prido-shop-sidebar,
    .prido-shop-layout .prido-shop-sidebar {
        position: sticky;
        top: calc(var(--pf-hs-offset, 72px) + 8px);
        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(--pf-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(--pf-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(--pf-hs-offset, 72px) + 8px + 32px);
    }
    body.admin-bar .prido-filters-panel {
        height: calc(100dvh - var(--pf-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(--pf-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) {
    /* TIENDA V1 (2026-06-11): el toolbar de la grilla VUELVE en desktop (sticky, con
       Ordenar/Mostrar/densidad — ver prido-grilla.r2.css seccion 16). Los controles
       duplicados del sidebar (v4) se retiran; el markup sigue en el DOM por si se revierte. */
    .prido-sidebar-controls { 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; }




/* ==========================================================================
   v6 — FILTRO REDESIGN (mockup Claude Design "Filtro PRIDO - Redesign",
   adaptación fiel 2026-07-09). Reemplaza la capa v5 (acordeón plano):
   el sidebar desktop vuelve a ser PANEL EN CAJA — surface blanca/ink,
   radius 16, sombra suave — con cabecera (ícono + Filtrar + Borrar todo +
   conteo "N productos"), franja de chips con fondo, secciones con badge
   teal, árbol de categorías con línea guía, swatches de 34px y precio con
   slider arriba + campos Desde/Hasta. Tipografía Manrope + JetBrains Mono
   (tokens --pf-font/--pf-mono, ya encoladas vía prido-collhead-fonts).
   Se conserva la maquinaria v5: curaduría de secciones, "Más filtros (N)"
   (JS), swatches .pf-sw-grid (JS) y el contrato AJAX (filters_html/chips).
   Tablet/mobile (<1024) conservan píldoras + sheet (re-tinteados por los
   tokens nuevos).
   ========================================================================== */
.prido-fhead { display: none; }

/* Partes del chip (visibles también en el chip mobile) */
.prido-filter-chip .k { color: var(--pf-muted); font-weight: 700; }
.prido-filter-chip .sw-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
:root[data-theme="dark"] .prido-filter-chip .sw-dot,
body.woodmart-dark .prido-filter-chip .sw-dot { border-color: rgba(255, 255, 255, 0.2); }
.prido-filter-chip .x {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--pf-chip);
    color: var(--pf-muted);
    flex-shrink: 0;
    transition: background 120ms, color 120ms;
}
.prido-filter-chip:hover .x { background: var(--pf-danger); color: #fff; }
.prido-filter-chip .x svg { display: block; opacity: 1; }

@media (min-width: 1024px) {

    /* Ancho de columna fiel al mockup (320px; la var la lee prido-catalog.r7.css) */
    .prido-catalog-archive { --prido-filters-width: 320px; }

    /* Panel en caja: la caja base (sección 4: surface, borde, radius --pf-radius=16,
       sombra, alto 100dvh−offset y scroll interno) vuelve al retirarse la capa v5. */

    /* --- Cabecera (mockup .f-top) --- */
    .prido-fhead {
        display: block;
        padding: 18px 20px 15px;
        border-bottom: 1px solid var(--pf-border);
        flex-shrink: 0;
    }
    .prido-fhead-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .prido-fhead-title {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        font-family: var(--pf-font);
        font-size: 15.5px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--pf-ink);
    }
    .prido-fhead-ico {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: var(--pf-accent-soft);
        color: var(--pf-accent-ink);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }
    .prido-fhead-ico svg { display: block; }
    .prido-fhead-clear {
        background: none;
        border: none;
        font-family: var(--pf-font);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pf-accent-ink);
        cursor: pointer;
        padding: 5px 6px;
        margin: -5px -6px;
        border-radius: 7px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms, background 120ms;
    }
    /* Visible solo con filtros activos (mockup .f-clear.show) */
    .prido-filters-panel:has(.prido-filter-chip) .prido-fhead-clear {
        opacity: 1;
        pointer-events: auto;
    }
    .prido-fhead-clear:hover { background: var(--pf-chip); text-decoration: none; }
    .prido-fhead-count {
        margin-top: 13px;
        font-size: 13px;
        color: var(--pf-muted);
        display: flex;
        align-items: baseline;
        gap: 6px;
    }
    .prido-fhead-count[hidden] { display: none; }
    .prido-fhead-count .num {
        font-size: 19px;
        font-weight: 800;
        color: var(--pf-ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }

    /* --- Chips activos: franja con fondo (mockup .f-active/.achip) --- */
    .prido-filters-active-chips {
        gap: 8px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--pf-border);
        background: var(--pf-chip);
    }
    .prido-filter-chip {
        gap: 8px;
        padding: 6px 7px 6px 11px;
        border-radius: 999px;
        background: var(--pf-bg);
        border: 1px solid var(--pf-border);
        font-size: 12px;
        font-weight: 600;
        color: var(--pf-ink);
        line-height: 1;
        min-height: 0;
    }
    .prido-filter-chip:hover { background: var(--pf-bg); border-color: var(--pf-border-strong); }
    .prido-filters-clear-all-chips {
        border: none;
        background: none;
        padding: 5px 6px;
        min-height: 0;
        border-radius: 7px;
        color: var(--pf-accent-ink);
        font-size: 12.5px;
        font-weight: 700;
    }
    .prido-filters-clear-all-chips:hover { background: var(--pf-bg); color: var(--pf-accent-ink); }

    /* --- Secciones (mockup .fg) --- */
    .prido-filters-body { padding: 0 0 6px; }
    .prido-filter-section {
        padding: 0 20px;
        border-bottom: 1px solid var(--pf-bd-sub);
    }
    .prido-filter-section-toggle {
        padding: 17px 0;
        gap: 10px;
        min-height: 0;
    }
    .prido-filter-section-toggle:hover { background: transparent; }
    .prido-filter-section-label {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--pf-ink);
    }
    .prido-filter-section-count {
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        font-size: 10.5px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    :root[data-theme="dark"] .prido-filter-section-count,
    body.woodmart-dark .prido-filter-section-count { color: #06232C; }
    .prido-filter-chevron { width: 13px; height: 13px; }
    .prido-filter-section-body { padding: 0 0 20px; }

    /* --- Filas checkbox (mockup .chk) --- */
    .prido-filter-label {
        min-height: 0;
        padding: 8px 0;
        gap: 11px;
        border-radius: 0;
    }
    .prido-filter-label:hover { background: transparent; }
    .prido-filter-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--pf-fg2);
    }
    .prido-filter-label:hover .prido-filter-name { color: var(--pf-ink); }
    .prido-filter-item.is-active .prido-filter-name {
        color: var(--pf-ink);
        font-weight: 600;
    }
    .prido-filter-check-icon {
        border-radius: 5px;
        background: var(--pf-bg);
        border-color: var(--pf-border-strong);
    }
    .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);
    }
    .prido-filter-count {
        font-family: var(--pf-mono);
        font-size: 11px;
        padding-left: 8px;
        font-variant-numeric: tabular-nums;
    }

    /* --- Árbol de categorías (mockup .tree: línea guía en hijos) --- */
    .prido-filter-cat-row { gap: 0; padding-left: 0; }
    .prido-cat-toggle {
        width: 24px;
        height: 36px;
        margin-left: -4px;
        border-radius: 6px;
    }
    .prido-cat-toggle:hover { background: transparent; color: var(--pf-ink); }
    .prido-cat-depth-0 > .prido-filter-cat-row .prido-filter-name {
        font-weight: 600;
        color: var(--pf-ink);
    }
    .prido-cat-children.is-visible {
        margin: 2px 0 4px 11px;
        padding-left: 12px;
        border-left: 1px solid var(--pf-border);
    }
    .prido-cat-children .prido-filter-name { font-size: 13.5px; }

    /* --- Precio (mockup .rs + .price-ins): slider arriba, Desde/Hasta abajo --- */
    .prido-price-slider { height: 26px; margin: 4px 3px 0; }
    .prido-price-slider-track { background: var(--pf-track); }
    .prido-price-range-min::-webkit-slider-thumb,
    .prido-price-range-max::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        border: 2px solid var(--pf-accent-ink);
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    }
    .prido-price-range-min::-moz-range-thumb,
    .prido-price-range-max::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 2px solid var(--pf-accent-ink);
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    }
    .prido-price-inputs {
        align-items: flex-end;
        gap: 10px;
        margin: 16px 0 0;
    }
    .prido-price-field {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .prido-price-lab {
        display: block;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--pf-muted);
        margin: 0 0 6px 2px;
    }
    .prido-price-input-group {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 40px;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        background: var(--pf-chip);
        border: 1px solid var(--pf-border);
    }
    .prido-price-input-group:focus-within {
        border-color: var(--pf-accent);
        box-shadow: 0 0 0 3px var(--pf-accent-soft);
    }
    .prido-price-currency { font-size: 13px; font-weight: 600; color: var(--pf-muted); }
    .prido-price-input {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--pf-ink);
        font-variant-numeric: tabular-nums;
    }
    .prido-price-separator { color: var(--pf-muted); padding-bottom: 11px; }

    /* --- Curaduría: orden del mockup; cola oculta hasta "Más filtros" (JS) --- */
    .prido-filters-body > .prido-filter-section { order: 60; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="price_range"]      { order: 1; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="product_cat"]      { order: 2; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_color"]         { order: 3; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_cabecero"]      { order: 4; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_brazo"]         { order: 5; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_soporte"]       { order: 6; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_mecanismo"]     { order: 7; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_garantia"]      { order: 8; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_certificacion"] { order: 9; }
    .prido-filters-body > .prido-filter-section[data-taxonomy="pa_procedencia"]   { order: 10; }

    .prido-filters-panel:not(.pf-show-xtra) .prido-filters-body > .prido-filter-section:not(
        [data-taxonomy="price_range"]):not(
        [data-taxonomy="product_cat"]):not(
        [data-taxonomy="pa_color"]):not(
        [data-taxonomy="pa_cabecero"]):not(
        [data-taxonomy="pa_brazo"]):not(
        [data-taxonomy="pa_soporte"]):not(
        [data-taxonomy="pa_mecanismo"]):not(
        [data-taxonomy="pa_garantia"]):not(
        [data-taxonomy="pa_certificacion"]):not(
        [data-taxonomy="pa_procedencia"]) {
        display: none;
    }
    /* Una sección de cola con filtros ACTIVOS dentro siempre se muestra */
    .prido-filters-panel:not(.pf-show-xtra) .prido-filters-body > .prido-filter-section:has(.prido-filter-checkbox:checked) {
        display: block;
    }

    /* --- "Más filtros (N)" (JS) → link estilo .more del mockup --- */
    .prido-fmore-btn {
        order: 90;
        align-self: flex-start;
        margin: 14px 20px 16px;
        padding: 0;
        border: none;
        background: none;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--pf-font);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pf-accent-ink);
        cursor: pointer;
        transition: color 0.15s ease;
    }
    .prido-fmore-btn .lbl {
        border-bottom: 1px solid transparent;
        transition: border-color 120ms;
    }
    .prido-fmore-btn:hover .lbl { border-bottom-color: currentColor; }
    .prido-fmore-btn .chev { transition: transform 0.18s ease; }
    .prido-filters-panel.pf-show-xtra .prido-fmore-btn .chev { transform: rotate(180deg); }

    /* --- "Ver más (+N)" (mockup .more) --- */
    .prido-filter-show-more {
        margin-top: 16px;
        padding: 0;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pf-accent-ink);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 120ms;
    }
    .prido-filter-show-more:hover {
        color: var(--pf-accent-ink);
        border-bottom-color: currentColor;
    }

    /* --- Swatches Color de Tapiz (mockup .swatches/.sw; JS añade .pf-sw*) --- */
    .pf-sw-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, 34px);
        column-gap: 18px;
        row-gap: 20px;
        padding: 8px 8px 4px;
    }
    .pf-sw-grid .prido-filter-item { margin: 0 !important; padding: 0 !important; }
    .pf-sw-grid .prido-filter-item .prido-filter-check-icon { display: none !important; }
    .pf-sw-grid .prido-filter-item.pf-sw .prido-filter-name,
    .pf-sw-grid .prido-filter-item .prido-filter-count { display: none !important; }
    .pf-sw-grid .prido-filter-item.pf-sw .prido-filter-label {
        position: relative;
        display: block;
        width: 34px !important;
        height: 34px !important;
        min-height: 0 !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        flex: none !important;
        padding: 0 !important;
        border-radius: 50% !important;   /* vence .prido-filter-label{border-radius} de capas previas */
        background: var(--sw, #ccc);
        border: 1px solid rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: transform 120ms;
    }
    :root[data-theme="dark"] .pf-sw-grid .prido-filter-item.pf-sw .prido-filter-label,
    body.woodmart-dark .pf-sw-grid .prido-filter-item.pf-sw .prido-filter-label {
        border-color: rgba(255, 255, 255, 0.16);
    }
    .pf-sw-grid .prido-filter-item.pf-sw .prido-filter-label:hover { transform: scale(1.1); }
    /* Seleccionado: doble anillo (mockup .sw.on) */
    .pf-sw-grid .prido-filter-item.pf-sw .prido-filter-label:has(input:checked) {
        box-shadow: 0 0 0 2px var(--pf-bg), 0 0 0 4px var(--pf-accent);
    }
    /* Términos sin color mapeable: cápsula con el nombre */
    .pf-sw-grid .prido-filter-item.pf-sw-text { grid-column: 1 / -1; }
    .pf-sw-grid .prido-filter-item.pf-sw-text .prido-filter-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto;
        min-height: 27px;
        padding: 3px 10px !important;
        border-radius: 999px;
        background: var(--pf-chip);
        border: 1px solid var(--pf-border);
        font-size: 11px;
        cursor: pointer;
    }
    .pf-sw-grid .prido-filter-item.pf-sw-text .prido-filter-label:has(input:checked) {
        border-color: var(--pf-accent);
        background: color-mix(in srgb, var(--pf-accent) 12%, transparent);
    }

    /* --- Select "Ordenar" y canvas suaves → tokens nuevos --- */
    .prido-sidebar-orderby-select { background-color: var(--pf-chip); }
}

/* ==========================================================================
   v6.1 — Columna de filtros al tope + header sin reaparición (2026-07-09)
   1) En catálogo desktop, mientras la página está scrolleada (body
      .prido-hs-condensed, y>18) el header NO reaparece en scroll-up: queda
      oculto hasta volver al tope. Así la columna sticky puede pegarse al
      borde superior (top 16px, ver --pf-hs-offset: 8px) sin que el header
      fixed la tape. Se revela con foco de teclado (a11y) y con overlays
      (búsqueda/offcanvas ponen scroll-lock, no scroll-up, así que no les
      afecta). Solo páginas con .prido-shop-layout (gate :has) y ≥1024.
   2) ≥1200 el panel se EXPANDE hacia la IZQUIERDA ocupando el gutter IKEA
      libre, con tope en ~20% visual del viewport (22.222vw nominal por el
      zoom 0.9), SIN tocar la columna flex (312px, §17d de grilla.r20) → la
      grilla de productos no se mueve ni cambia de ancho. El sticky vive en
      el sidebar (intacto); el panel solo crece con margin-left negativo.
      @1440: 288px visual (20% exacto) · @1920: ~378px (~19.7%) ·
      @2560: ~426px (~16.6%, límite del gutter disponible).
   ========================================================================== */
@media (min-width: 1024px) {
    body.prido-hs-condensed:has(.prido-shop-layout) .prido-hs:not(:focus-within) {
        transform: translateY(-102%);
        pointer-events: none;
    }
}
/* Con movimiento reducido el header-system fuerza el header visible; respetarlo. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    body.prido-hs-condensed:has(.prido-shop-layout) .prido-hs:not(:focus-within) {
        transform: none;
        pointer-events: auto;
    }
}

@media (min-width: 1200px) {
    /* Expansión disponible (px nominales, dentro del zoom 0.9):
       min( 22.222vw − 312px  ← lo que falta para llegar a 20% visual,
            gutter/0.9 − 16px ← gutter IKEA menos respiro mínimo ).
       v6.2: el CUERPO (panel expandido + grilla) queda CENTRADO: el panel se
       expande `e` hacia la izquierda del shell, así que el shell corre e/2 a la
       derecha (margen izq = gutter + e/2, margen der = gutter − e/2) → mismo
       aire visual a ambos lados. Pisa el margin-inline simétrico de §17d de
       grilla.r20 (mismo selector+!important; este archivo carga después).
       Anchos de panel y grilla INTACTOS. Las vars viven en el shell para que
       el panel (descendiente) herede --pf-expand. */
    .prido-catalog-shell__inner:has(.prido-shop-layout) {
        --pf-gutter: calc(clamp(32px, 13.333vw - 144px, 160px) / 0.9);
        --pf-expand: clamp(0px, calc(22.222vw - 312px), calc(var(--pf-gutter) - 16px));
        margin-left: calc(var(--pf-gutter) + (var(--pf-expand) / 2)) !important;
        margin-right: calc(var(--pf-gutter) - (var(--pf-expand) / 2)) !important;
    }
    .prido-catalog-archive .prido-shop-sidebar { overflow: visible; }
    .prido-catalog-archive .prido-filters-panel {
        width: calc(100% + var(--pf-expand, 0px));
        margin-left: calc(-1 * var(--pf-expand, 0px));
    }
}