/**
 * PCW Grid Toolbar v7 — Styles
 * v7 (lote 1 del PRD specs/PRD-offcanvas-filtros-movil-2026-10.md): §18 opciones de faceta,
 * título duplicado y acordeones del panel móvil. Lotes 2-3 añadirán estructura y footer.
 * Depends on: design-tokens.css (CSS custom properties)
 * BEM naming: .pcw-toolbar__element--modifier
 */

/* ─── 1. DESKTOP TOOLBAR ─── */
.pcw-toolbar {
    display: flex;
    flex-direction: column;
    background: var(--pcw-card);
    border: 1px solid var(--pcw-border);
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: var(--pcw-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.pcw-toolbar__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.pcw-toolbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pcw-toolbar__right {
    display: flex;
    align-items: center;
}

.pcw-toolbar__compare {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius);
    background: var(--pcw-card);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pcw-text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.pcw-toolbar__compare:hover {
    border-color: var(--pcw-primary);
    background: var(--pcw-surface);
}

/* ─── 2. SORT BUTTONS ─── */
.pcw-toolbar__sort {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pcw-sort-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius);
    background: var(--pcw-card);
    font-size: 13px;
    font-weight: 500;
    color: var(--pcw-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.pcw-sort-btn:hover {
    border-color: var(--pcw-primary) !important;
    color: var(--pcw-primary) !important;
}

.pcw-sort-btn--active {
    border-color: var(--pcw-primary) !important;
    color: var(--pcw-brand-dark) !important;
    background: #FFF5EB !important;
    font-weight: 700 !important;
}

/* ─── 3. ACTIVE FILTERS DROPDOWN ─── */
.pcw-toolbar__filters {
    position: relative;
    margin-left: 6px;
}

.pcw-toolbar__filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius);
    background: var(--pcw-card);
    font-size: 13px;
    font-weight: 500;
    color: var(--pcw-text);
    cursor: pointer;
    transition: border-color 0.2s;
}

.pcw-toolbar__filters-toggle:hover {
    border-color: var(--pcw-primary);
}

.pcw-toolbar__filters-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    min-width: 260px;
    max-width: 420px;
    background: var(--pcw-card);
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 12px;
    animation: pcwFadeIn 0.15s ease;
}

.pcw-toolbar__filters-panel--open {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── 4. PILLS ─── */
.pcw-toolbar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pcw-pill {
    display: inline-flex;
    align-items: center;
    background: var(--pcw-surface);
    border: 1px solid var(--pcw-border);
    color: var(--pcw-text);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.2s;
}

.pcw-pill:hover {
    border-color: var(--pcw-primary) !important;
}

.pcw-pill__remove {
    margin-left: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #475569;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s;
}

.pcw-pill__remove:hover {
    color: #B91C1C;
}

/* ─── 5. CLEAR ALL ─── */
.pcw-toolbar__clear {
    display: inline-block;
    background: none;
    border: none;
    color: var(--pcw-brand-dark);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.pcw-toolbar__clear:hover {
    color: var(--pcw-text);
}

/* ─── 6. PRODUCT COUNT ─── */
.pcw-toolbar__count {
    font-size: 14px;
    color: #777;
    font-weight: 500;
    white-space: nowrap;
}

.pcw-toolbar__count strong {
    font-weight: 700;
    color: var(--pcw-text);
}

/* ─── 7. MOBILE TOOLBAR ─── */
.pcw-toolbar-mobile {
    display: none; /* shown via media query */
    position: sticky;
    top: 0;
    bottom: auto;
    z-index: 80;
    background: var(--pcw-brand-dark);
    padding: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.pcw-toolbar-mobile button {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.pcw-toolbar-mobile button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pcw-toolbar-mobile button:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* Mobile Active Pills */
.pcw-toolbar-mobile__pills {
    background: var(--pcw-surface);
    padding: 10px 15px;
    border-bottom: 1px solid var(--pcw-border);
}

/* ─── 8. OFF-CANVAS FILTERS ─── */
.pcw-offcanvas {
    --pcw-sheet-w: min(88vw, 400px);
    --pcw-sheet-pad-x: 20px;
    --pcw-sheet-dur: 0.28s;
    position: fixed;
    top: 0;
    right: 0;
    width: var(--pcw-sheet-w);
    max-width: 400px;
    height: 100%;
    z-index: 10000;
    background: var(--pcw-card);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 16px 0 0 16px;
    box-shadow: -24px 0 48px -32px rgba(15, 23, 42, 0.45), -1px 0 0 var(--pcw-border);
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    transition: transform var(--pcw-sheet-dur) var(--pcw-ease),
                visibility 0s linear var(--pcw-sheet-dur);
}

@supports (height: 100dvh) {
    .pcw-offcanvas { height: 100dvh; }
}

.pcw-offcanvas--open {
    transform: none;
    visibility: visible;
    transition: transform var(--pcw-sheet-dur) var(--pcw-ease), visibility 0s;
}

.pcw-offcanvas__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pcw-sheet-pad-x) 14px;
    border-bottom: 1px solid var(--pcw-border);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pcw-offcanvas__header { background: var(--pcw-card); }
}

.pcw-offcanvas__header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pcw-brand-dark);
}

.pcw-offcanvas__close {
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--pcw-text-muted);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-right: -8px;
}

.pcw-offcanvas__close:hover {
    color: var(--pcw-text);
    background: var(--pcw-surface);
}

.pcw-offcanvas__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px var(--pcw-sheet-pad-x) 20px;
    -webkit-overflow-scrolling: touch;
    background-color: var(--pcw-card);
    background-image:
        linear-gradient(var(--pcw-card) 30%, rgba(255, 255, 255, 0)) top,
        linear-gradient(rgba(255, 255, 255, 0), var(--pcw-card) 70%) bottom,
        radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) top,
        radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) bottom;
    background-size: 100% 32px, 100% 32px, 100% 12px, 100% 12px;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Force visibility for reparented Kadence sidebar content (acotado a --open para que
   el estado cerrado visibility:hidden no sea derrotado por !important) */
.pcw-offcanvas--open .pcw-offcanvas__body > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FacetWP styling inside off-canvas
   (checkbox y contador: ver §18 — el `padding: 6px 0` que había aquí anulaba el
   padding-left de FacetWP y el PNG pisaba la primera letra) */

.pcw-offcanvas__body .facetwp-toggle {
    cursor: pointer;
    color: var(--pcw-primary);
    font-size: 13px;
    font-weight: 500;
}

/* Kadence accordion inside off-canvas */
.pcw-offcanvas__body .kt-blocks-accordion-header {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--pcw-border) !important;
}

.pcw-offcanvas__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px var(--pcw-sheet-pad-x) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pcw-border);
    background: var(--pcw-card);
    box-shadow: 0 -8px 24px -20px rgba(15, 23, 42, 0.45);
}

/* Lote 3 · RF-9: el contador sale del flujo visual (competía con el botón primario)
   pero sigue siendo una región aria-live para lectores. Patrón sr-only con clip:
   NO display:none, que silenciaría el anuncio. */
.pcw-offcanvas__info {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lote 3 · RF-10: "Limpiar" = botón fantasma de 44 px; deshabilitado sin filtros */
.pcw-offcanvas__footer .pcw-toolbar__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius);
    color: var(--pcw-brand-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pcw-offcanvas__footer .pcw-toolbar__clear:hover:not(:disabled) {
    background: var(--pcw-surface);
    border-color: var(--pcw-text-muted);
    color: var(--pcw-brand-dark);
}

.pcw-offcanvas__footer .pcw-toolbar__clear:disabled {
    color: var(--pcw-text-muted);
    border-color: var(--pcw-border);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Lote 3 · RF-11: Reset azul de FacetWP fuera del panel. Kadence
   input[type=button]{display:inline-block} (0,1,1) vence a .facetwp-hidden (0,1,0);
   este selector (0,2,1) vence a ambos sin !important. El precio se deshace con la pill. */
.pcw-offcanvas__body input.facetwp-slider-reset {
    display: none;
}

.pcw-offcanvas__apply {
    min-height: 48px;
    padding: 10px 24px;
    background: var(--pcw-primary);
    color: var(--pcw-brand-dark);
    border: none;
    border-radius: var(--pcw-radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.pcw-offcanvas__apply:hover {
    background: var(--pcw-primary-hover);
}

/* ─── 9. OVERLAY ─── */
.pcw-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.pcw-overlay--visible {
    opacity: 1;
    visibility: visible;
}

/* ─── 10. SORT BOTTOM SHEET ─── */
.pcw-bottomsheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    z-index: 10001;
    background: var(--pcw-card);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    transition: bottom 0.3s ease, visibility 0s linear 0.3s;
}

.pcw-bottomsheet--open {
    bottom: 0;
    visibility: visible;
    transition: bottom 0.3s ease, visibility 0s;
}

.pcw-bottomsheet h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pcw-brand-dark);
}

.pcw-bottomsheet__options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcw-bottomsheet__options button {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: var(--pcw-radius);
    background: transparent;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--pcw-text);
    cursor: pointer;
    transition: background 0.15s;
}

.pcw-bottomsheet__options button:hover {
    background: var(--pcw-surface);
}

.pcw-bottomsheet__options button.pcw-sort-btn--active {
    color: var(--pcw-brand-dark);
    font-weight: 600;
    background: #FFF5EB;
}

.pcw-bottomsheet__close {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: var(--pcw-surface);
    border: none;
    border-radius: var(--pcw-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--pcw-text);
    cursor: pointer;
}

/* ─── 11. PAGER ───
   Reescrito 2026-10-27 (evidence/diagnostico-paginador-a11y-diseno-20261027.md §5.1):
   `.pcw-pager` no existe en el DOM (confirmado, 0 coincidencias en vivo); FacetWP imprime
   `.facetwp-facet.facetwp-facet-pager > .facetwp-pager > a.facetwp-page`. Este bloque nunca
   se aplicaba. Doble clase en el ancestro para especificidad (0,3,0): front.css de FacetWP
   se imprime DESPUÉS en el footer (ver nota de cascada en §17/§18) y gana empates de
   especificidad por orden de aparición. min-height 40px + padding 10px 14px: AA 2.5.8
   (tap target), el número más corto mide ~42,5×40 px medido en vivo. */
.facetwp-facet.facetwp-facet-pager {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid var(--pcw-border);
    padding-top: 20px;
}

.facetwp-facet.facetwp-facet-pager .facetwp-pager {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.facetwp-facet.facetwp-facet-pager .facetwp-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid var(--pcw-border);
    border-radius: 4px;
    color: var(--pcw-text);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.facetwp-facet.facetwp-facet-pager .facetwp-page:hover {
    background: var(--pcw-surface);
    border-color: var(--pcw-primary);
}

.facetwp-facet.facetwp-facet-pager .facetwp-page.active {
    background: var(--pcw-brand-dark);
    color: #fff;
    border-color: var(--pcw-brand-dark);
    pointer-events: none;
}

/* ─── 12. RESPONSIVE ─── */
@media (max-width: 1024px) {
    .pcw-toolbar {
        display: none !important;
    }

    .pcw-toolbar-mobile {
        display: flex;
    }

    /* N12 F3: la barra se muestra bajo el header; el drawer de Kadence se mantiene */

    /* Fix Kadence layout collapse: Force main column to full width when sidebar is hidden */
    .wp-block-kadence-rowlayout .kt-row-column-wrap .kadence-column_arch_col_main,
    .wp-block-kadence-rowlayout .kt-row-column-wrap .kadence-column_arch_col_main.wp-block-kadence-column,
    .kwt-products-wrap,
    ul.products.product-archive,
    ul.products.product-archive > li.product {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        max-width: unset !important;
    }
    .wp-block-kadence-rowlayout .kt-row-column-wrap .kadence-column_arch_col_main {
        min-width: 90vw !important; /* Force open */
    }
}

@media (min-width: 1025px) {
    .pcw-toolbar-mobile,
    .pcw-toolbar-mobile__pills,
    .pcw-offcanvas,
    .pcw-overlay,
    .pcw-bottomsheet {
        display: none !important;
    }
}

/* Prevent body scroll when off-canvas open */
body.pcw-offcanvas-open {
    overflow: hidden;
}

/* ─── 13. ANIMATION ─── */
@keyframes pcwFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hide native WC pagination (pager replaces it) */
nav.woocommerce-pagination {
    display: none !important;
}

/* ─── 14. LOTE 3 — AREA TACTIL DEL PANEL (aditivo, <=1024px) ─── */
@media (max-width: 1024px) {
    .pcw-toolbar-mobile button { min-height: 48px; }

    .pcw-offcanvas__body .facetwp-checkbox,
    .pcw-offcanvas__body .facetwp-radio {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .pcw-offcanvas__body .kt-blocks-accordion-header { min-height: 44px; }
}

/* ─── 15. P0 A11Y — FOCO VISIBLE (WCAG 2.4.7, aditivo) ───
   Medido: este archivo no definia :focus-visible; los controles del panel no
   mostraban foco. #C2410C sobre blanco = 5,18:1 (>= 3:1 para componentes de UI).
   El offset de 2px cabe en el padding de 20px de .pcw-offcanvas__body.
   2026-10-27: se añade el paginador (evidence/diagnostico-paginador-a11y-diseno-20261027.md
   §5.2) — contraste ya medido en vivo contra el fondo real del paginador, 4,73:1, >= 3:1. */
.pcw-toolbar-mobile button:focus-visible,
.pcw-offcanvas button:focus-visible,
.pcw-offcanvas a:focus-visible,
.pcw-bottomsheet button:focus-visible,
.pcw-pill__remove:focus-visible,
.facetwp-checkbox:focus-visible,
.kadence-column_arch_col_side .kt-blocks-accordion-header:focus-visible,
.pcw-offcanvas__body .kt-blocks-accordion-header:focus-visible,
.facetwp-facet.facetwp-facet-pager .facetwp-page:focus-visible {
    outline: 2px solid #C2410C;
    outline-offset: 2px;
}

/* ─── 16. P1 C5 — RESERVA DE ALTURA DE FACETAS (CLS desktop, aditivo, >=1025px) ───
   Medido: FacetWP entrega los contenedores vacios y los rellena en DOMContentLoaded
   (render(preload_data)), despues del primer paint. sort (36px, encima del grid) y
   precio (99px, encima del acordeon) empujaban el layout: CLS 0,20-0,24.
   Con estas reservas: 0,034-0,064 (8/8 cargas). marca NO se reserva: su altura varia
   (~31px por opcion) y reservarla no fue estable. En <=1024px sort es display:none y
   el CLS ya cumple, por eso es solo desktop. */
@media (min-width: 1025px) {
    .facetwp-facet-sort   { min-height: 36px; }
    .facetwp-facet-precio { min-height: 99px; }
}

/* ─── 17. P1 C5/N1 — MARGEN DE FACETAS DESDE EL <head> (CLS, aditivo) ───
   Medido: front.css de FacetWP trae .facetwp-facet{margin-bottom:40px} pero su
   <link> se imprime en el footer (byte 305k de 329k), despues del primer paint.
   El margen aparecia de golpe: sort empujaba el grid +40px y precio el acordeon
   +40px. Declarado aqui (mismo valor, sin cambio visual) el CLS pasa de
   0,032-0,034 a 0,014-0,016 (4/4 cargas en experimento). */
.facetwp-facet { margin-bottom: 40px; }

/* ─── 17. N12 F3 — BARRA INFERIOR + COMPARAR (RETIRADO 2026-10-21) ───
 * Las reglas de `.pcw-compare-check` (boton `+` inyectado por JS) se retiraron: el
 * control «Comparar» ahora es una casilla nativa que pinta el mu-plugin pcw-compare
 * y se estiliza en mu-plugins/pcw-compare/compare.css con los mismos tokens.
 * Se conserva `li.product { position: relative }` porque la caja del control nuevo se
 * posiciona respecto de la tarjeta.
 * Revertir: restaurar este archivo desde ~/pcware-staging-backups/. */
body.pcw-toolbar-visible { }
li.product { position: relative; }

/* N12 F3: subir el boton flotante de Joinchat para que no tape la barra inferior */
@media (max-width: 1024px) {
    .joinchat.joinchat--right { bottom: 64px !important; }
}

/* ─── 18. LOTE 1 (PRD specs/PRD-offcanvas-filtros-movil-2026-10.md) — OPCIONES, TÍTULO Y ACORDEONES DEL PANEL ───
   Solo CSS, aditivo, acotado a .pcw-offcanvas__body y a <=1024px (en >=1025px el contenido vuelve a la
   columna lateral y estos selectores no casan: la barra lateral de escritorio no cambia).
   Cascada medida: FacetWP imprime front.css en el footer, DESPUÉS de esta hoja. Por eso el estado marcado
   necesita (0,3,0) para vencer a `.facetwp-checkbox.checked` (0,2,0) de front.css:54.
   Contraste de componentes (WCAG 1.4.11, >=3:1): borde sin marcar --pcw-text-muted 4,76:1 sobre blanco;
   marcada = borde --pcw-brand-dark sobre blanco ~17:1 y marca navy sobre --pcw-primary 6,25:1
   (la marca blanca sobre #FF6B00 daba 2,86:1 y se descartó). */
@media (max-width: 1024px) {
    .pcw-offcanvas {
        --pcw-check-size: 20px;
        --pcw-check-radius: 6px;
        --pcw-check-gap: 12px;
        --pcw-row-h: 44px;
    }

    /* El h4 de la plantilla Kadence duplica el h3 de la cabecera del panel (22px > 16px). Solo dentro del
       panel; ningún CSS/JS/PHP del tema usa .facet-title. El nivel del h4 de escritorio (N3) sigue en BD. */
    .pcw-offcanvas__body .facet-title {
        display: none;
    }

    /* 40px de FacetWP (§17) es demasiado dentro del panel; fuera de flujo de página, sin impacto en CLS */
    .pcw-offcanvas__body .facetwp-facet {
        margin-bottom: 20px;
    }

    /* Fila de opción: caja vectorial (::before) como primer ítem flex + texto + contador a la derecha */
    .pcw-offcanvas__body .facetwp-checkbox,
    .pcw-offcanvas__body .facetwp-radio {
        display: flex;
        align-items: center;
        gap: var(--pcw-check-gap);
        min-height: var(--pcw-row-h);
        margin: 0;
        padding: 6px 0;
        background-image: none;
        color: var(--pcw-text);
        font-size: 15px;
        line-height: 1.35;
        cursor: pointer;
    }

    .pcw-offcanvas__body .facetwp-checkbox.checked,
    .pcw-offcanvas__body .facetwp-radio.checked {
        background-image: none;
    }

    .pcw-offcanvas__body .facetwp-checkbox::before,
    .pcw-offcanvas__body .facetwp-radio::before {
        content: "";
        flex: 0 0 var(--pcw-check-size);
        box-sizing: border-box;
        width: var(--pcw-check-size);
        height: var(--pcw-check-size);
        border: 2px solid var(--pcw-text-muted);
        border-radius: var(--pcw-check-radius);
        background: var(--pcw-card) center / 14px 14px no-repeat;
        transition: background-color 0.15s var(--pcw-ease), border-color 0.15s var(--pcw-ease);
    }

    .pcw-offcanvas__body .facetwp-radio::before {
        border-radius: 50%;
    }

    .pcw-offcanvas__body .facetwp-checkbox:hover::before,
    .pcw-offcanvas__body .facetwp-radio:hover::before {
        border-color: var(--pcw-brand-dark);
    }

    .pcw-offcanvas__body .facetwp-checkbox.checked::before {
        border-color: var(--pcw-brand-dark);
        background-color: var(--pcw-primary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    }

    .pcw-offcanvas__body .facetwp-radio.checked::before {
        border-color: var(--pcw-brand-dark);
        background-color: var(--pcw-primary);
        box-shadow: inset 0 0 0 3px var(--pcw-card);
    }

    .pcw-offcanvas__body .facetwp-checkbox.disabled,
    .pcw-offcanvas__body .facetwp-radio.disabled {
        opacity: 0.45;
        cursor: default;
    }

    .pcw-offcanvas__body .facetwp-display-value {
        padding-right: 0;
    }

    .pcw-offcanvas__body .facetwp-counter {
        margin-left: auto;
        padding-left: 10px;
        color: var(--pcw-text-muted);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }

    /* Acordeones (Q5: CSS del hijo, sin tocar atributos de los panes). Coherente con el megamenú:
       acento naranja de var(--pcw-accent-width) en la sección abierta, en lugar del cian de fábrica. */
    .pcw-offcanvas__body .kt-blocks-accordion-header {
        min-height: 52px;
        padding: 14px 0 14px 11px !important;
    }

    .pcw-offcanvas__body .kt-blocks-accordion-header .kt-blocks-accordion-title {
        color: var(--pcw-brand-dark);
        font-size: 15px;
        font-weight: 600;
    }

    .pcw-offcanvas__body .kt-blocks-accordion-header[aria-expanded="true"] {
        box-shadow: inset var(--pcw-accent-width) 0 0 var(--pcw-primary);
    }
}

/* ─── 19. M1–M3 (PRD evidence/prd-mobile-first-catalogo-2026-10-20.md) — CATÁLOGO MÓVIL, aditivo ───
   Solo sobrescribe; no se elimina ninguna regla anterior. Acotado a body.tax-product_cat salvo el color de
   enlace (regresión de D6, global). Tokens de design-tokens.css; sin colores nuevos.
   NOTA DE ESPECIFICIDAD: "woocommerce" es una clase del PROPIO <body> (body.woocommerce), por eso se escribe
   pegada (body.tax-product_cat.woocommerce ...) y no como descendiente. */


/* M4 · HEADER STICKY (2026-10-26): el header medido en vivo tenia
   position:relative -- se iba con el scroll (confirmado tambien en
   evidence/header2-audit-sticky-cat-20261015.json: mainPosition "static"
   tras bajar 900px). Esto es la causa raiz de M2 de abajo: sin el header
   fijo, la barra de accion no tenia junto a que quedarse pegada. Se
   corrige aqui en vez de seguir parcheando el sintoma. */
@media (max-width: 1024px) {
    body .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 90 !important;                  /* por encima de .pcw-toolbar-mobile (z-index:80) */
    }
}

/* M2 · BARRA DE ACCIÓN: viaja pegada justo debajo del header (ahora sticky, M4) + estilo claro.
   Antes: top:0 a secas, porque el header no era sticky y dejaba 80px muertos. Con M4 resuelto,
   el offset correcto es la altura real del header, no el borde superior del viewport. */
@media (max-width: 1024px) {
    body .pcw-toolbar-mobile {
        /* El respaldo 80px es la altura medida del header en 320-1024px; la variable se
           re-publica con la altura real (grid-toolbar.js syncHeaderOffset) para que las dos
           capas queden fijas sin solaparse si el header cambia de alto. */
        top: var(--pcw-header-height, 80px) !important;
        background: var(--pcw-card);
        border-bottom: 1px solid var(--pcw-border);
        box-shadow: 0 4px 8px -6px rgba(15, 23, 42, 0.18);
    }
    body .pcw-toolbar-mobile button {
        min-height: 44px;
        color: var(--global-palette3);
    }
    body .pcw-toolbar-mobile button:hover { background: var(--global-palette8); }
    body .pcw-toolbar-mobile button:not(:last-child) { border-right: 1px solid var(--pcw-border); }
    body .pcw-toolbar-mobile button[aria-expanded="true"] {
        background: var(--global-palette10);
        box-shadow: inset 0 -2px 0 var(--pcw-orange-text);
    }

    /* M5 · WCAG 2.2 SC 2.4.11 (Focus Not Obscured, AA): con M4+M2 la franja superior queda
       cubierta por 80px de header + 46px de barra = 126px. Medido con Shift+Tab sobre el grid
       a 390px: sin esta reserva 2 de 14 focos aterrizaban con top -0,6/-1,8px, o sea debajo
       de las capas. scroll-padding-top hace que el navegador reserve esa franja al desplazar
       el foco o al saltar a un ancla; no cambia ninguna distancia en reposo. */
    html {
        scroll-padding-top: calc(var(--pcw-header-height, 80px) + 46px);
    }
}

/* BREADCRUMB D6 · capa visual del tema hijo; el plugin original queda intacto.
   Prototipo SSR reversible medido en local (2026-10-31): 3 repeticiones/vista,
   axe del bloque 0 hallazgos, overflow 0 y CLS sin incremento. Los enlaces usan
   --pcw-text porque --pcw-text-subdued dio 4,34:1 sobre #F1F5F9 (<4,5:1). */
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__link {
    color: var(--pcw-text);
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__item--current .pcw-breadcrumb__link {
    color: var(--pcw-brand-dark);
    font-weight: 600;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__link:hover,
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__link:focus-visible,
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-link:hover,
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-link:focus-visible {
    color: var(--pcw-orange-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__link:focus-visible,
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-link:focus-visible {
    outline: 2px solid var(--pcw-focus);
    outline-offset: 3px;
    border-radius: var(--pcw-radius-xs);
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__separator {
    color: var(--pcw-separator);
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-link {
    color: var(--pcw-orange-text);
    font-weight: 600;
}
@media (min-width: 768px) {
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb,
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb--desktop {
        min-height: 32px;
    }
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb {
        box-sizing: border-box;
        padding-inline: var(--pcw-space-4);
    }
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb--desktop {
        align-items: center;
    }
}

@media (max-width: 767px) {
    /* M1 · ESPACIO VERTICAL: dos filas de Kadence suman 24+24px de padding entre el breadcrumb y el grid. El
       breadcrumb ya trae su propio 12px superior; el H1 su margen inferior; el grid no necesita aire extra. */
    body.tax-product_cat main .kb-row-layout-wrap:has(h1.wp-block-heading) > .kt-row-column-wrap { padding-block: 0; }
    body.tax-product_cat main .kb-row-layout-id_arch_row > .kt-row-column-wrap { padding-top: 0; }

    /* M1 · BREADCRUMB (marcado y CSS originales viven en el contenido de la página): 16px lateral, 12 arriba, 6 abajo */
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__inner {
        padding: var(--pcw-space-3) var(--pcw-space-4) 6px;
    }
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-link {
        font-size: 16px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        min-height: 44px;                        /* M3: área táctil 44px ... */
        margin-block: -11px;                     /* ... sin crecer el layout (22px de texto + 2×11) */
    }

    /* M1 · H1: 16px lateral, lh 1.2 (D2), 14px abajo */
    body.tax-product_cat main h1.wp-block-heading {
        padding-inline: var(--pcw-space-4);
        margin: 0 0 14px;
        line-height: 1.2;
    }

    /* M1 · GRID: 2 columnas, padding de contenedor 12, gap 12 */
    body.tax-product_cat.woocommerce .kwt-products-wrap ul.products {
        padding-inline: var(--pcw-space-3);
        gap: var(--pcw-space-3);
    }

    /* M1 · TARJETA: radio 8 (D3), padding interno 12 (= --pcw-card-padding) */
    body.tax-product_cat.woocommerce ul.products li.entry {
        border-radius: var(--pcw-radius-md);
        overflow: hidden;
    }
    body.tax-product_cat.woocommerce ul.products li.entry .entry-content-wrap {
        padding: var(--pcw-space-3);
    }

    /* M3 · ÁREAS TÁCTILES 44×44 (Woo fuerza display:inline en .button con 4 clases: se supera con 6) */
    body.tax-product_cat.woocommerce ul.products li.product a.button.button,
    body.tax-product_cat ul.products .kt-woo-quickview-button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.tax-product_cat.woocommerce ul.products li.product a.button.button { padding-inline: var(--pcw-space-4); }
    body.tax-product_cat #masthead .menu-toggle-open { min-width: 44px; min-height: 44px; }
    body.tax-product_cat #masthead .search-field,
    body.tax-product_cat #masthead .search-submit,
    body.tax-product_cat #masthead form button { min-height: 44px; }
    body.tax-product_cat #masthead a.brand { display: inline-flex; align-items: center; min-height: 44px; }
}

/* M3 · CONTRASTE del precio tachado (TODOS los anchos; v1 lo acotó a <=767px y en escritorio seguía a 2.63:1):
   --pcw-text-muted #64748B sobre blanco = 4.76:1 (antes 2.63 por opacity .5 de Woo) */
body.tax-product_cat.woocommerce ul.products li.product .price del {
    color: var(--pcw-text-muted);
    opacity: 1;
}

/* P6 · PRECIO DE TARJETA 1.2rem (2026-10-21, decisión del operador).
   Woo fija .price a .857em (13,7 px) y ins/.amount heredan: se sube el precio ACTUAL a 1.2rem (19,2 px, negrita = texto grande WCAG)
   y el tachado queda en .875rem para no partir la línea en escritorio (medido en simulación: tarjeta +10 px en vez de +41 px).
   body.woocommerce + 4 clases supera la regla de Woo (4 clases) sin !important. No toca el color (el rojo #BF0019 del sello vive en seal.css).
   <=359px: 1.2rem NO cabe (medido: precio 118 px frente a 103 px disponibles a 320 px) -> 1rem; desviación documentada. */
body.woocommerce ul.products li.product .price ins,
body.woocommerce ul.products li.product .price ins .amount,
body.woocommerce ul.products li.product .price > .amount {
    font-size: 1.2rem;
}
body.woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del .amount {
    font-size: .875rem;
}
@media (max-width: 359px) {
    body.woocommerce ul.products li.product .price ins,
    body.woocommerce ul.products li.product .price ins .amount,
    body.woocommerce ul.products li.product .price > .amount {
        font-size: 1rem;
    }
}

/* ─── 20. TARJETA DE CATÁLOGO — badge de % de descuento + estado/entrega + retiro del botón (2026-10-21, decisión del operador) ───
   Aditivo y acotado a catálogo (body.tax-product_cat). Tokens de design-tokens.css; sin colores nuevos.
   - El botón de acción se retira por PHP (inc/card-badges.php §4); aquí se colapsa el .product-action-wrap vacío.
   - Badge: naranja --pcw-primary + navy --pcw-brand-dark ≈ 6:1 (AA). Estado: punto verde --pcw-success / rojo
     --pcw-critical / ámbar --pcw-warning sobre texto --pcw-text (17:1). Entrega: --pcw-text-muted 4,76:1. */

/* §20a · Contenedor de acción: colapsado en catálogo (tarjeta estática, sin reveal al hover) */
body.tax-product_cat .product-action-wrap {
    display: none;
}

/* §20b · Badge de % de descuento (sobre la imagen, esquina superior izquierda; li.product ya es position:relative) */
body.tax-product_cat ul.products li.product .pcw-badge-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 11;
    background: var(--pcw-primary);
    color: var(--pcw-brand-dark);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

/* §20c · Meta: estado + entrega (bajo el precio) */
body.tax-product_cat ul.products li.product .pcw-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

body.tax-product_cat ul.products li.product .pcw-card-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pcw-text);
}

body.tax-product_cat ul.products li.product .pcw-card-state::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pcw-text-muted);
}

body.tax-product_cat ul.products li.product .pcw-card-state--instock::before {
    background: var(--pcw-success);
}

body.tax-product_cat ul.products li.product .pcw-card-state--outofstock::before {
    background: var(--pcw-critical);
}

body.tax-product_cat ul.products li.product .pcw-card-state--onbackorder::before,
body.tax-product_cat ul.products li.product .pcw-card-state--lowstock::before {
    background: var(--pcw-warning);
}

body.tax-product_cat ul.products li.product .pcw-card-delivery {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pcw-text-muted);
}

/* §20d · Ajuste móvil: tarjeta de 2 columnas estrecha */
@media (max-width: 767px) {
    body.tax-product_cat ul.products li.product .pcw-card-state {
        font-size: 12px;
    }
    body.tax-product_cat ul.products li.product .pcw-card-meta {
        gap: 6px;
        margin-top: 8px;
    }
    body.tax-product_cat ul.products li.product .pcw-badge-sale {
        font-size: 12px;
        top: 8px;
        left: 8px;
    }
}


/* 20. HEADER STICKY MOVIL CON REVEAL (2026-10-27) -- decision Jev AI
   evidence/jev-decision-home-sticky-header-v2-20261022.json (a_reveal_mas_css_barra_top0, 0,83).
   Kadence (mobile_header_sticky='main' + mobile_header_reveal_scroll_up) oculta la fila del header
   al bajar (clase item-hidden-above) y la revela al subir. Sin esto la barra de accion seguia en
   top:80px y dejaba una franja muerta de 80px (medido en categoria movil). Cuando el header esta
   oculto la barra sube a top:0; al revelarse vuelve a quedar justo debajo. Solo CSS, sin JS nuevo.
   Rollback: eliminar esta seccion (restaurar desde ~/pcware-staging-backups/home-sticky-20261027/). */
@media (max-width: 1024px) {
    body .pcw-toolbar-mobile {
        transition: top 0.2s ease;
    }
    body:has(.kadence-sticky-header.item-hidden-above) .pcw-toolbar-mobile {
        top: 0 !important;
    }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    body .pcw-toolbar-mobile {
        transition: none;
    }
}

/* 21. BREADCRUMB V2 · geometría SSR sin CSS inline (2026-10-31).
   Absorbe las reglas de layout que vivían en <style id="pcw-breadcrumb-styles">
   del mu-plugin pcware-breadcrumbs-render.php. El bloque de color/tipografía D6
   de las líneas 889-936 se conserva. En v2.2.0 :is() extiende el contrato a
   tax-product_brand (/marcas/{marca}/{pilar}). Rollback = eliminar esta sección. */
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pcw-space-2);
    align-items: center;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__item {
    display: inline-flex;
    align-items: center;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__separator {
    margin: 0 var(--pcw-space-1);
    font-size: 16px;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb--mobile {
    display: none;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb--desktop {
    display: flex;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-icon {
    margin-right: 6px;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb__back-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px) {
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb--desktop {
        display: none;
    }
    body:is(.tax-product_cat, .tax-product_brand) nav.pcw-breadcrumb .pcw-breadcrumb--mobile {
        display: flex;
        align-items: center;
    }
}