/**
 * Layout v3 de la tienda (rediseño rail de categorías). Se encola SOLO cuando el
 * admin activó v3 (ver store-layout.php) → no toca el resto del sitio.
 * Dirección: racing/técnico. Rojo de acento restringido, amarillo Malossi solo
 * para chip activo, condensada en mayúsculas para labels, mono para números.
 * PENDIENTE: unificar rojo con theme.css (#d10e10 vs #e11414) al cerrar tokens;
 * match fino contra el artifact (compilado, requiere screenshot de referencia).
 */

.mhw-v3 {
    /* T4 (R3): tokens --v3-* MOVIDOS a card-v2.css (fuente única compartida con el home).
       Se declaran allí en `.mhw-v3, .mhw-v3-grid` y card-v2.css se encola como dependencia
       de este archivo, así que aquí siguen disponibles (mismo elemento .mhw-v3). */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 28px 64px;
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--v3-ink);
}

/* ---- Hero strip (título grande + contador) ---- */
.mhw-v3-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 0 18px;
}
.mhw-v3-hero::before { /* acento diagonal, guiño al header racing */
    content: "";
    width: 8px;
    align-self: stretch;
    background: var(--v3-red);
    transform: skewX(-12deg);
    flex: none;
    border-radius: 1px;
}
.mhw-v3-title {
    font-family: var(--v3-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.02;
    margin: 0;
}
.mhw-v3-count {
    font-family: var(--v3-mono);
    font-size: 13px;
    color: var(--v3-muted);
    white-space: nowrap;
    padding-bottom: 3px;
}

/* ---- Rail sticky de grupos (categorías madre) ---- */
.mhw-v3-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    background: var(--v3-surface);
    border-bottom: 2px solid var(--v3-line);
    margin: 0 -28px 20px;
    padding: 0 28px;
    scrollbar-width: none;
}
.mhw-v3-rail::-webkit-scrollbar { display: none; }
.mhw-v3-rail-item {
    flex: none;
    position: relative;
    padding: 15px 18px 14px;
    font-family: var(--v3-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .045em;
    font-size: 15px;
    color: var(--v3-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s ease;
}
.mhw-v3-rail-item::after { /* subrayado rojo */
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: -2px;
    height: 3px;
    background: transparent;
    transition: background .12s ease;
}
.mhw-v3-rail-item:hover { color: var(--v3-ink); }
.mhw-v3-rail-item.is-active { color: var(--v3-ink); }
.mhw-v3-rail-item.is-active::after { background: var(--v3-red); }

/* ---- Chips de subcategoría (amarillo Malossi al activar) ---- */
.mhw-v3-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 22px;
}
/* Chip racing (delta CP-L2, feedback de Rafael): condensada en MAYÚSCULAS igual al
   rail, radio reducido (nada de píldora genérica), hover con el token rojo. El
   ACTIVO sigue amarillo Malossi (regla .is-on de abajo, intacta). */
.mhw-v3-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 7px;
    border: 1.5px solid var(--v3-line);
    background: var(--v3-surface);
    color: var(--v3-ink);
    font-family: var(--v3-cond);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.mhw-v3-chip:hover { border-color: var(--v3-red); color: var(--v3-red); }
.mhw-v3-chip.is-on {
    background: var(--v3-yellow);
    border-color: var(--v3-yellow);
    color: var(--v3-ink);
    box-shadow: 0 2px 8px -2px rgba(255, 222, 0, .6);
}

/* ===== Modo fitment (archivo de modelo): filtro client-side + contadores ===== */
/* Hero — tokens EXACTOS del standalone "Tienda v3" (leídos de sus estilos inline). */
.mhw-v3-fit .mhw-v3-hero,
.mhw-v2-nofit .mhw-v3-hero {
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}
.mhw-v3-fit .mhw-v3-hero::before,
.mhw-v2-nofit .mhw-v3-hero::before { content: none; }   /* el mockup no lleva barra roja */
.mhw-v3-hero-main { display: flex; flex-direction: column; }
.mhw-v3-fit .mhw-v3-eyebrow,
.mhw-v2-nofit .mhw-v3-eyebrow {
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12.5px;
    font-weight: 400;
    color: #9a9aa2;
}
/* CP-HOME v2 (S5): eyebrow interactivo "CAMBIAR DE MODELO" del fitment (reemplaza el
   texto estático "Catálogo de repuestos" solo en modo fitment; el eyebrow de
   layout-v2.php no fitment sigue siendo texto). */
.mhw-v3-eyebrow-swap {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #9a9aa2; transition: color .12s ease;
}
.mhw-v3-eyebrow-swap:hover { color: var(--v3-red); }
.mhw-v3-eyebrow-swap svg { flex: none; }
.mhw-v3-fit .mhw-v3-title,
.mhw-v2-nofit .mhw-v3-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 52px;
    letter-spacing: .5px;
    line-height: .9;
    margin-top: 8px;
    text-transform: uppercase;
    color: #17171a;
}
.mhw-v3-hero-count { text-align: right; flex: none; }
.mhw-v3-count-num {
    display: block;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: var(--v3-red);
}
.mhw-v3-count-lbl {
    display: block;
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    font-weight: 400;
    color: #8a8a93;
}

/* Toggle Cuadrícula/Lista — etiquetado, activo en rojo (como el mockup). */
.mhw-v3-fit .mhw-v3-viewtoggle button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--v3-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    line-height: 1;
    padding: 9px 15px;
}
.mhw-v3-fit .mhw-v3-viewtoggle button svg { width: 15px; height: 15px; flex: none; }
.mhw-v3-fit .mhw-v3-viewtoggle button.is-active { background: var(--v3-red); color: #fff; }

/* Rail — tokens exactos del standalone: sticky translúcido con blur, bordes 1px, gap 4px. */
.mhw-v3-fit .mhw-v3-rail {
    gap: 4px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e7e7ea;
    border-bottom: 1px solid #e7e7ea;
}
/* Rail y chips son <button> en fitment: reset sobre el estilo existente.
   CP-FILTRO-MOVIL-MARCA: los chips del PANEL también son <button>, y en el archivo de marca
   la raíz no es .mhw-v3-fit, así que este reset no les llegaba: el chip salía en
   «Barlow Semi Condensed» (la condensada de los rótulos) en vez de heredar la del panel del
   modelo — medido por estilos computados, no a ojo. Se AÑADE el ámbito del panel en vez de
   re-scopear la regla, para que en el fitment siga aplicando exactamente lo que aplicaba.
   El reset de .mhw-v3-rail-item se queda como estaba a propósito: ahí las reglas ≤760px del
   panel ya fijan fondo y borde, y la comparación marca-vs-modelo sale idéntica. */
.mhw-v3-fit .mhw-v3-rail-item { background: none; border: 0; cursor: pointer; }
.mhw-v3-fit .mhw-v3-chip,
.mhw-panelhost .mhw-v3-filterpanel .mhw-v3-chip { cursor: pointer; font-family: inherit; }

/* Contadores en tabs y chips (mono, discreto; rojo/oscuro cuando activo). */
.mhw-v3-railcount {
    margin-left: 7px;
    font-family: var(--v3-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--v3-faint);
}
.mhw-v3-rail-item.is-active .mhw-v3-railcount { color: var(--v3-red); }
.mhw-v3-chipcount {
    margin-left: 6px;
    font-family: var(--v3-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--v3-faint);
}
.mhw-v3-chip.is-on .mhw-v3-chipcount { color: var(--v3-ink); }

/* [hidden] debe ganarle a `.mhw-v3-chip{display:inline-flex}`. */
.mhw-v3-fit .mhw-v3-rail-item[hidden],
.mhw-v3-fit .mhw-v3-chip[hidden] { display: none; }

/* La fila de chips solo ocupa espacio cuando hay un grupo activo. */
.mhw-v3-fit .mhw-v3-chips { margin-bottom: 0; }
.mhw-v3-fit .mhw-v3-chips.is-on { margin-bottom: 22px; }

/* ---- Fila de controles compactos: MARCA (CP-L2; ORDENAR salió por veto) ----
   Desktop: fila discreta bajo los chips, dentro del panel (display:contents).
   Móvil: se apila dentro de la hoja FILTRAR. Select re-poblado por JS desde
   res.data.controls.brands (la marca activa nunca desaparece: anti-fantasma). */
.mhw-v3-ctlrow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 18px;
}
.mhw-v3-ctl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mhw-v3-ctl-lbl {
    font-family: var(--v3-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
    color: var(--v3-muted);
}
.mhw-v3-ctl-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--v3-line);
    border-radius: 9px;
    background: var(--v3-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a90' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
    font-family: var(--v3-cond);
    font-weight: 600;
    font-size: 13px;
    color: var(--v3-ink);
    cursor: pointer;
    max-width: 200px;
}
.mhw-v3-ctl-select:focus-visible { outline: 2px solid var(--v3-red); outline-offset: 1px; }

/* ---- Toolbar (toggle cuadrícula/lista; sin Ordenar — veto de Rafael) ---- */
.mhw-v3-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.mhw-v3-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--v3-line);
    border-radius: 9px;
    overflow: hidden;
    background: var(--v3-surface);
}
.mhw-v3-viewtoggle button {
    border: 0;
    background: transparent;
    color: var(--v3-muted);
    font-size: 17px;
    line-height: 1;
    padding: 7px 13px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.mhw-v3-viewtoggle button:hover { color: var(--v3-ink); }
.mhw-v3-viewtoggle button.is-active { background: var(--v3-ink); color: #fff; }

/* ---- Grid full-width + CARD v2/v3 (grid, overrides WooCommerce, .product-card-wrapper,
   badge -N%, cabecera marca/COMPATIBLE) MOVIDOS a card-v2.css (T4/R3, fuente única
   compartida con el home). card-v2.css se encola como dependencia de este archivo. ---- */

/* Auto-scroll (JS lleva aquí al elegir categoría/chip): deja libre la altura de
   lo que queda pegado arriba — sub-barra del header (~46px) + rail (~46px) — para
   que la primera fila no quede tapada. En móvil solo pina el rail. */
.mhw-v3-results { scroll-margin-top: 96px; }
@media (max-width: 900px) { .mhw-v3-results { scroll-margin-top: 56px; } }

/* Vista lista: card horizontal */
.mhw-v3-results.is-list .mhw-v3-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}
.mhw-v3-results.is-list .product-card-wrapper {
    flex-direction: row;
    align-items: center;
}
.mhw-v3-results.is-list .product-card-wrapper .left-panel { flex: 0 0 30%; max-width: 220px; }

.mhw-v3-empty {
    color: var(--v3-muted);
    padding: 56px 0;
    text-align: center;
    font-size: 16px;
}

/* Grilla por AJAX: leve fade mientras carga el fragmento. */
.mhw-v3-gridhost { transition: opacity .12s ease; }
.mhw-v3-gridhost.is-loading { opacity: .45; pointer-events: none; }

/* RONDA 1.5 (FLASH): al recargar una página de fitment con hash de estado (#g/#c/#m/#p),
   el server pinta la grilla SIN filtrar (el fragmento no viaja al server) y el motor la
   filtra recién tras el fetch → un frame de productos sin filtro. La marca pre-paint del
   <head> (html.mhw-hash-pending) oculta los productos y muestra un skeleton de CARDS
   (espejo 2-col de la grilla real) hasta que store-v3-fitment.js aplica el estado y quita
   la clase (o el timeout de seguridad de 6s lo hace). La clase la setea SOLO JS → sin JS
   nunca aparece: grilla visible por defecto (equivale al noscript pedido).
   El skeleton (.mhw-v3-skel) es markup estático display:none por defecto → CERO efecto de
   layout y CLS 0; es un overlay absoluto, así los productos ocultos no lo empujan. */
.mhw-v3-skel { display: none; }
html.mhw-hash-pending .mhw-v3-gridhost { position: relative; min-height: 70vh; }
html.mhw-hash-pending .mhw-v3-gridhost > *:not(.mhw-v3-skel) { visibility: hidden; }
html.mhw-hash-pending .mhw-v3-skel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    position: absolute; inset: 0; overflow: hidden; z-index: 1;
    grid-auto-rows: 240px; align-content: start;
    /* Fondo OPACO: ocluye por completo lo que haya detrás (grilla sin filtrar), sin
       depender del visibility:hidden de los productos. Necesario porque .btn-ver-recambios
       tiene `transition: all .6s` que incluye visibility → al pasar a hidden tarda .6s y
       se colaría por los gaps. Con el overlay opaco no hay fuga posible. */
    background: #fff;
}
.mhw-v3-skel-card {
    border-radius: 14px; background: #eeedeb;
    position: relative; overflow: hidden;
}
.mhw-v3-skel-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: mhw-skel-shimmer 1.15s ease-in-out infinite;
}
/* Reveal: al quitar la marca, la grilla real entra con un fade corto (~120ms). Lo dispara
   una clase transitoria que pone el JS del motor; el path del timeout de seguridad revela
   sin fade (caso raro, no molesta). */
.mhw-v3-gridhost.mhw-just-revealed > .products { animation: mhw-grid-fadein .12s ease both; }
@keyframes mhw-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes mhw-grid-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mhw-v3-skel-card::after { animation: none; }
    .mhw-v3-gridhost.mhw-just-revealed > .products { animation: none; }
}

/* Paginación (fragmento AJAX del motor demoníaco). */
.mhw-v3-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
}
/* CP-PERF E: el no-fitment usa woocommerce_pagination() (.page-numbers, sin el JS que en
   fitment los reescribe a .mhw-v3-page). Se espeja el look racing REUSANDO las mismas
   reglas vía selector compartido (cero duplicación de cuerpo); solo se resetea la lista
   que trae WooCommerce. Los <a>/<span>.page-numbers son los números; el <ul> es la lista. */
.mhw-v3-pagination .woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}
.mhw-v3-pagination .woocommerce-pagination ul li { list-style: none; margin: 0; border: 0; }
/* Los selectores no-fitment llevan la cadena completa (.mhw-v3-pagination .woocommerce-
   pagination ul li …) a propósito: así SUPERAN en especificidad a las reglas propias de
   WooCommerce (.woocommerce nav.woocommerce-pagination ul li span.current, etc.), que si
   no ganaban el estado activo. El cuerpo se COMPARTE con .mhw-v3-page (cero duplicación);
   cada selector aplica con SU especificidad. */
.mhw-v3-page,
.mhw-v3-pagination .woocommerce-pagination ul li a.page-numbers,
.mhw-v3-pagination .woocommerce-pagination ul li span.page-numbers {
    min-width: 40px;
    padding: 9px 12px;
    border: 1px solid var(--v3-line);
    border-radius: 8px;
    background: var(--v3-surface);
    color: var(--v3-ink);
    font-family: var(--v3-cond);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.mhw-v3-page:hover,
.mhw-v3-pagination .woocommerce-pagination ul li a.page-numbers:hover { border-color: var(--v3-faint); }
.mhw-v3-page.is-current,
.mhw-v3-pagination .woocommerce-pagination ul li span.page-numbers.current {
    background: var(--v3-red);
    border-color: var(--v3-red);
    color: #fff;
    cursor: default;
}
/* el "…" de WooCommerce no es un botón navegable: sin borde ni fondo */
.mhw-v3-pagination .woocommerce-pagination ul li span.page-numbers.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* ---- Responsive: rail scrolleable, hero compacto ---- */
@media (max-width: 640px) {
    .mhw-v3 { padding: 0 16px 48px; }
    .mhw-v3-rail { margin: 0 -16px 16px; padding: 0 16px; }
    .mhw-v3-hero { padding: 18px 0 14px; }
}

/* ===== Fitment móvil: botón FILTRAR + hoja inferior ===== */
/* En desktop los controles de la hoja no existen; el panel es "transparente"
   (display:contents) para no alterar el layout del rail/chips inline. */
.mhw-v3-filterpanel { display: contents; }
.mhw-v3-mobilebar { display: contents; }  /* la barra solo cobra forma en ≤760px (M1b) */
.mhw-v3-filter-toggle,
.mhw-v3-backdrop,
.mhw-v3-sheet-head,
.mhw-v3-sheet-apply,
.mhw-v3-fitstrip,
.mhw-v3-mobilebar-title,
.mhw-v3-mobilebar-count,
.mhw-v3-filterchip { display: none; }
.mhw-v3-filter-tag[hidden] { display: none; }

/* ============================================================================
   CP-LD — FIDELIDAD MÓVIL AL MOCKUP (Buscador Tienda v2, bloque MOBILE v2).
   Alcance: fitment COMPARTIDO v2/v3 en ≤760px (el breakpoint del tema; el .dc
   nominaba 768 pero 761 es donde arranca el sidebar v2 — usar 760 evita una
   franja muerta 761–768 con ambos activos). Valores exactos del .dc; tipografías
   mapeadas a --v3-cond (Barlow Semi Condensed) y --v3-mono (JetBrains Mono), YA
   cargadas por el tema. Desktop y el clásico NO se tocan (todo va scoped a
   .mhw-v3-fit / .mhw-v3-grid, clases que solo existen en el rediseño).
   ========================================================================== */
@media (max-width: 760px) {
    /* Contenedor a 16px (como ≤640) para que franja y barra sangren a los bordes. */
    .mhw-v3 { padding-left: 16px; padding-right: 16px; }

    /* ---- M1a: hero gigante fuera; franja fitment compacta en su lugar ---- */
    .mhw-v3-fit .mhw-v3-hero { display: none; }
    /* Espeja el hero de desktop: SIN fondo, sobre el blanco de la página (eyebrow gris
       + modelo en condensada itálica oscura), en versión compacta. */
    .mhw-v3-fit .mhw-v3-fitstrip {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin: 0;
        padding: 16px 0 4px;
        background: none;
    }
    /* CP-HOME v2 (S5): ya no es un <span> decorativo, es el trigger "Cambiar de
       modelo" (mismo botón/comportamiento que el eyebrow de escritorio). */
    .mhw-v3-fitstrip-lbl {
        display: inline-flex; align-items: center; gap: 5px;
        background: none; border: 0; padding: 0; cursor: pointer;
        font-family: 'Barlow', sans-serif;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--v3-faint);
        white-space: nowrap;
        transition: color .12s ease;
    }
    .mhw-v3-fitstrip-lbl:hover { color: var(--v3-red); }
    .mhw-v3-fitstrip-lbl svg { flex: none; }
    .mhw-v3-fitstrip-model {
        max-width: 100%;
        font-family: 'Barlow Condensed', sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 28px;
        letter-spacing: .5px;
        line-height: .95;
        text-transform: uppercase;
        color: var(--v3-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- M1b: filter bar blanca STICKY (pill FILTRAR + título activo + count) ---- */
    .mhw-v3-fit .mhw-v3-toolbar { display: none; }  /* toggle grid/lista fuera en móvil */
    .mhw-panelhost .mhw-v3-mobilebar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 -16px 16px;
        padding: 11px 16px;
        background: #fff;
        border-bottom: 1px solid #ededf0;
        position: sticky;
        top: 0;
        z-index: 61;
        transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
    }
    /* RONDA 1 (SEL-4, supersede F1): al abrir la hoja "Filtrar repuestos" la barra sticky
       SE OCULTA (estado/visibilidad, NO z-index) y reaparece al cerrar. Sale del
       hit-testing con pointer-events:none + opacity:0 y se desliza fuera con translateY,
       así elementFromPoint en su zona devuelve la hoja/backdrop, nunca la barra. Antes
       (F1) la barra quedaba por encima del backdrop para que el chip siguiera tappable
       con la hoja abierta; Rafael invirtió la regla. */
    .mhw-panelhost.is-filtering-open .mhw-v3-mobilebar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(120%);
    }
    .mhw-panelhost .mhw-v3-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 9px 15px;
        background: #17171a;
        color: #fff;
        border: 0;
        border-radius: 9px;
        font-family: var(--v3-cond);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        font-size: 13.5px;
        cursor: pointer;
    }
    .mhw-v3-filter-toggle svg { width: 15px; height: 15px; }
    /* badge = Nº de filtros activos (amarillo Malossi), no la etiqueta descriptiva */
    .mhw-v3-filter-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border-radius: 10px;
        background: var(--v3-yellow);
        color: #17171a;
        font-family: var(--v3-mono);
        font-size: 11px;
        font-weight: 700;
    }
    .mhw-v3-filter-tag[hidden] { display: none; }
    .mhw-v3-mobilebar-title {
        display: block;   /* la regla base los oculta (desktop): reactivarlos aquí */
        flex: 1;
        min-width: 0;
        font-family: var(--v3-cond);
        font-weight: 700;
        font-size: 15px;
        text-transform: uppercase;
        color: #17171a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mhw-v3-mobilebar-title[hidden] { display: none; }
    /* CP-HOME v2 (S5, ex-CP-CLEAR): chip removible — píldora tinte rojo con el nombre
       del filtro activo + ✕ en circulito; tap en cualquier parte limpia TODOS los
       filtros. Ocupa el mismo lugar que el eyebrow estático (nunca los dos a la vez). */
    .mhw-v3-filterchip {
        display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
        padding: 6px 8px 6px 13px; background: rgba(225, 20, 20, .1);
        border: 1px solid rgba(225, 20, 20, .25); border-radius: 999px; cursor: pointer;
    }
    .mhw-v3-filterchip[hidden] { display: none; }
    .mhw-v3-filterchip-lbl {
        flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-family: var(--v3-cond); font-weight: 700; font-size: 13.5px;
        text-transform: uppercase; letter-spacing: .02em; color: var(--v3-red);
    }
    .mhw-v3-filterchip-x {
        flex: none; display: flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; border-radius: 50%;
        background: var(--v3-red); color: #fff;
    }
    .mhw-v3-mobilebar-count {
        display: block;
        flex: none;
        font-family: var(--v3-mono);
        font-weight: 700;
        font-size: 12px;
        color: #9a9aa2;
    }

    /* ---- M2: la hoja inferior (bottom sheet) ---- */
    .mhw-panelhost .mhw-v3-filterpanel {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 82vh;
        overflow-y: auto;
        padding: 0 12px 12px;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .35);
        transform: translateY(100%);
        transition: transform .22s cubic-bezier(.2, .7, .3, 1);
        z-index: 60;
    }
    .mhw-panelhost.is-filtering-open .mhw-v3-filterpanel { transform: translateY(0); }

    .mhw-panelhost .mhw-v3-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        background: #fff;
        padding: 16px 6px 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid #ededf0;
    }
    .mhw-v3-sheet-title {
        font-family: var(--v3-cond);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        font-size: 17px;
        color: #17171a;
    }
    /* botón cierre circular (spec M2) */
    .mhw-v3-sheet-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
        background: #f1f1f3;
        color: #77777f;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }
    .mhw-panelhost .mhw-v3-sheet-apply {
        display: block;
        width: 100%;
        position: sticky;
        bottom: 0;
        margin-top: 12px;
        height: 48px;
        border: 0;
        border-radius: 11px;
        background: var(--v3-red);
        color: #fff;
        font-family: var(--v3-cond);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: 15px;
        cursor: pointer;
    }

    /* El partial mete su rail dentro de un .mhw-v2-side propio. En el archivo de marca eso
       cae bajo `.mhw-v2-nofit .mhw-v2-side { display: none }` (bloque nofit de más abajo,
       que oculta el sidebar de escritorio en móvil) y el rail del panel se quedaba en el
       DOM sin pintarse: medido el 2026-07-29, la fila «Todos» existía con su count y su
       is-active pero visible=false, y los clicks del panel morían con «la fila no se ve».
       Se le devuelve su display por especificidad.

       FIX-CPFM-2 F7: acotada al NO-fitment, con el mismo :not(.mhw-v3-fit) de la regla D7
       de más abajo. Sin acotar, esta era la única regla del CP que alcanzaba a /modelos/, y
       allí el envoltorio NO «ya era block»: la regla global le da `display: contents` (sin
       caja), así que el CP le nacía una de 366x482. Medido en /modelos/ a 390 con la hoja
       abierta, 16 piezas: el resto —hoja, rail, filas, chips, barra, velo— no se movía ni
       un píxel, pero era un cambio en una vista que este CP no puede tocar. La pieza
       `side-panel` del baseline absoluto lo vigila desde aquí en adelante. */
    .mhw-panelhost:not(.mhw-v3-fit) .mhw-v3-filterpanel .mhw-v2-side { display: block; }

    /* filas de grupo: pill redondeada, nombre y count en spans separados, activa ROJA */
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-rail {
        position: static;
        flex-direction: column;
        overflow: visible;
        border: 0; margin: 0; padding: 0; gap: 2px;
        background: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-rail-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        border: 0;
        border-radius: 9px;
        background: none;
        font-family: var(--v3-cond);
        font-weight: 700;
        font-size: 14.5px;
        letter-spacing: .03em;
        color: #3a3a40;
    }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-rail-item::after { display: none; }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-rail-item.is-active { background: var(--v3-red); color: #fff; }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-railcount {
        margin-left: auto;
        font-family: var(--v3-mono);
        font-size: 12px;
        color: #a4a4ac;
    }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-rail-item.is-active .mhw-v3-railcount { color: rgba(255, 255, 255, .82); }

    /* ---- M3 (3b ACORDEÓN, DELTA CP-LD): el JS mueve este contenedor JUSTO DEBAJO del
       grupo activo dentro de la lista; se indenta para leerse anidado bajo el grupo.
       Mismos pills (999px, activo amarillo). ---- */
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-chips,
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-chips.is-on {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 4px 6px 12px 14px;
    }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-chip {
        padding: 9px 16px;
        border: 1px solid #dcdce0;
        border-radius: 999px;
        background: #fff;
        color: #55555c;
        font-size: 13.5px;
        letter-spacing: .02em;
        text-transform: none;
    }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-chip.is-on {
        background: var(--v3-yellow);
        border-color: var(--v3-yellow);
        color: #17171a;
        box-shadow: 0 2px 8px rgba(255, 222, 0, .4);
    }

    /* MARCA al final de la hoja */
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-ctlrow { flex-direction: column; gap: 10px; margin: 14px 6px 0; }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .mhw-panelhost .mhw-v3-filterpanel .mhw-v3-ctl-select { max-width: 60%; flex: 1; }

    /* backdrop */
    .mhw-panelhost .mhw-v3-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 15, 18, .5);
        z-index: 59;
    }
    .mhw-panelhost .mhw-v3-backdrop[hidden] { display: none; }

    /* ---- M4: card móvil horizontal MOVIDA a card-v2.css (@media max-width:760px). ---- */
}

/* ============================================================================
   CAPA v2 (CP-L3) — mismo DOM y JS que v3; esta capa convierte el rail en
   SIDEBAR sticky "CATEGORÍAS" (prototipo Buscador Tienda v2: card blanca,
   fila activa en ROJO con texto blanco, counts mono a la derecha) y coloca
   chips/controles/grilla en la columna derecha. Un solo archivo porque cards,
   chips y tokens son idénticos entre v2 y v3 — separarlo duplicaría el sistema.
   ========================================================================== */

/* El wrapper de columnas no altera nada fuera de v2 (v3 y móvil lo atraviesan). */
.mhw-fit-cols { display: contents; }
.mhw-v2-side { display: contents; }
.mhw-v2-sidehead { display: none; }

@media (min-width: 761px) {
    /* CP-FILTRO-MOVIL-MARCA (D7) — EL PANEL FUERA DEL FITMENT ES SOLO MÓVIL.
       El bloque de arriba (≤760px) ya no se scopea a .mhw-v3-fit sino a la clase neutra
       .mhw-panelhost, que llevan las DOS vistas que montan el panel: el fitment y el
       archivo de marca. En escritorio, sin embargo, no son lo mismo: el fitment ES su
       propio layout y quiere el panel transparente (.mhw-v3-filterpanel{display:contents}
       de la base) para que su .mhw-v2-side sea EL sidebar; el archivo de marca ya tiene su
       sidebar por URLs, así que ese display:contents le soltaría un SEGUNDO .mhw-v2-side
       dentro de .mhw-fit-cols. Aquí se corta: en un host de panel que no sea el fitment,
       las tres piezas móviles no existen en escritorio.
       No cambia nada de lo que ya se veía: solo oculta nodos que antes no estaban. */
    .mhw-panelhost:not(.mhw-v3-fit) .mhw-v3-mobilebar,
    .mhw-panelhost:not(.mhw-v3-fit) .mhw-v3-backdrop,
    .mhw-panelhost:not(.mhw-v3-fit) .mhw-v3-filterpanel { display: none; }

    .mhw-l-v2 .mhw-fit-cols {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        column-gap: 30px;
        align-items: start;
    }
    /* Sidebar card sticky (tokens del prototipo: borde #e7e7ea≈--v3-line, radio 14,
       sombra suave). Ocupa la columna 1 a lo largo de las 4 filas de la derecha. */
    .mhw-l-v2 .mhw-v2-side {
        display: block;
        grid-column: 1;
        grid-row: 1 / span 4;
        position: sticky;
        top: 86px; /* deja libre la sub-barra del header (~46px) + aire */
        background: var(--v3-surface);
        border: 1px solid var(--v3-line);
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
    }
    .mhw-l-v2 .mhw-v2-sidehead {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 6px 12px;
        font-family: var(--v3-cond);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--v3-ink);
    }
    .mhw-v2-mark {
        width: 13px;
        height: 13px;
        background: var(--v3-red);
        transform: skewX(-12deg);
        flex: none;
    }
    /* Rail → lista vertical dentro de la card (anula el rail horizontal sticky). */
    .mhw-l-v2 .mhw-v3-rail,
    .mhw-l-v2.mhw-v3-fit .mhw-v3-rail {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        overflow: visible;
    }
    .mhw-l-v2 .mhw-v3-rail-item,
    .mhw-l-v2.mhw-v3-fit .mhw-v3-rail-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        border-radius: 9px;
        text-align: left;
        text-decoration: none;
        font-family: var(--v3-cond);
        font-weight: 700;
        font-size: 14.5px;
        letter-spacing: .03em;
        color: #3a3a40;
        transition: background .12s ease, color .12s ease;
    }
    .mhw-l-v2 .mhw-v3-rail-item::after { display: none; } /* sin subrayado v3 */
    .mhw-l-v2 .mhw-v3-rail-item:hover { background: var(--v3-bg); color: var(--v3-ink); }
    /* ACTIVA EN ROJO (prototipo): fondo token, texto blanco, count translúcido. */
    .mhw-l-v2 .mhw-v3-rail-item.is-active {
        background: var(--v3-red);
        color: #fff;
    }
    .mhw-l-v2 .mhw-v3-rail-item.is-active .mhw-v3-railcount { color: rgba(255, 255, 255, .82); }
    .mhw-l-v2 .mhw-v3-railcount { margin-left: auto; }

    /* Columna derecha: chips, controles, toolbar y resultados. */
    .mhw-l-v2 .mhw-fit-cols > .mhw-v3-chips,
    .mhw-l-v2 .mhw-fit-cols > .mhw-v3-ctlrow,
    .mhw-l-v2 .mhw-fit-cols > .mhw-v3-toolbar,
    .mhw-l-v2 .mhw-fit-cols > .mhw-v3-results,
    .mhw-l-v2 .mhw-v3-filterpanel + .mhw-v3-toolbar { grid-column: 2; }
    /* filterpanel sigue display:contents → sus hijos (chips/ctlrow) son items del grid */
    .mhw-l-v2 .mhw-v3-chips,
    .mhw-l-v2 .mhw-v3-ctlrow,
    .mhw-l-v2 .mhw-v3-toolbar,
    .mhw-l-v2 .mhw-v3-results { grid-column: 2; }

    /* La grilla pierde una columna por el sidebar: 3 en desktop ancho. */
    .mhw-l-v2 .mhw-v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Hero v2 algo más compacto (prototipo: 44px). */
    .mhw-l-v2 .mhw-v3-title { font-size: 44px; }
}

/* ============================================================================
   CP-ANCHO — MONITORES GRANDES (≥1920px). Una cuarta columna de productos SIN
   agrandar la tarjeta.

   El problema medido: de 1600px en adelante el contenedor se planta en 1440 y la
   grilla en 3 columnas de 344.7px, así que a 1920 y a 2560 se ve exactamente lo
   mismo y el resto de la pantalla se queda en blanco.

   La aritmética del 1806, que no es un número redondo por capricho — sale de
   exigir que la tarjeta NO cambie de tamaño:

       contenedor 1806 − padding 2×28          = 1750  (.mhw-fit-cols)
       1750 − sidebar 280 − column-gap 30      = 1440  (columna de resultados)
       (1440 − 3 huecos de 20) / 4 columnas    =  345  por tarjeta

   y 345 es, al píxel, lo que mide hoy con 3 columnas (medido: 344.66px). Por eso
   tampoco hay que regenerar imágenes: el `sizes` de la card (customizations.php,
   MHW_CARD_SIZES) es un literal que cuelga del VIEWPORT, no del ancho de la
   tarjeta, y de 1440 para arriba vale 256px pase lo que pase aquí.

   El corte en 1920 deja 1905px de área útil (la barra de scroll se lleva ~15):
   1905 − 1806 = 99, o sea ~50px de margen a cada lado. Discreto, no pegado al
   borde. Por debajo de 1920 NADA cambia: sigue 1440 y 3 columnas.

   Acotado a .mhw-l-v2 A PROPÓSITO. El layout v3 usa el MISMO .mhw-v3 pero sin
   sidebar y ya viene con 4 columnas de card-v2.css: ensancharle el contenedor le
   agrandaría las tarjetas de 331 a 421px, que es justo lo prohibido. v3 no está en
   producción, así que se queda como está.
   ========================================================================== */
@media (min-width: 1920px) {
    .mhw-v3.mhw-l-v2 { max-width: 1806px; }
    .mhw-l-v2 .mhw-v3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* CP-HOME v2: entrada móvil de /tienda/ no-fitment. En DESKTOP la entrada y su hoja se
   ocultan (sigue el sidebar del grid, byte-intacto). */
.mhw-home-entry,
.mhw-v2-nofit .mhw-home-catsheet,
.mhw-v2-nofit .mhw-home-backdrop { display: none; }

/* Móvil v2 no-fitment (≤760px): en vez del sidebar apilado, una entrada de dos
   acciones — CTA "Selecciona tu moto" (S4: SOLO sin moto activa; con activa el icono
   del header es el acceso) + "Buscar por categorías" (hoja de ENLACES, sin AJAX). */
@media (max-width: 760px) {
    .mhw-v2-nofit .mhw-v2-side { display: none; }
    .mhw-v2-nofit .mhw-v3-toolbar { display: none; }

    .mhw-v2-nofit .mhw-v3-hero { padding: 14px 0 12px; align-items: flex-end; }
    .mhw-v2-nofit .mhw-v3-title { font-size: 28px; letter-spacing: .3px; line-height: .95; }
    .mhw-v2-nofit .mhw-v3-count-num { font-size: 24px; }
    .mhw-v2-nofit .mhw-v3-eyebrow { font-size: 10px; }
    .mhw-v2-nofit .mhw-v3-count-lbl { font-size: 10px; }

    .mhw-v2-nofit .mhw-home-entry { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
    /* html.mh-fit-active (S4): con moto activa el CTA desaparece — el icono del
       header (S2) es el único acceso a partir de ahí. */
    html.mh-fit-active .mhw-home-moto { display: none; }
    /* v3f: tratamiento SOBRIO idéntico al CTA del home (.mh-home-selmoto): gris muy suave
       #f4f3f0, SIN borde ni relleno rojo ni sombra, tinta #141410, lupa a la izquierda, sin
       flecha. Misma fuente condensada de títulos ya en uso aquí (var(--v3-cond)). */
    .mhw-home-moto {
        display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
        min-height: 56px; padding: 0 20px; background: #f4f3f0; color: #141410;
        border: 0; border-radius: 12px; cursor: pointer;
    }
    .mhw-home-moto:active { background: #eceae5; }
    .mhw-home-moto svg { flex: none; }
    .mhw-home-moto-lbl { font-family: var(--v3-cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .6px; line-height: 1; }
    .mhw-home-cats {
        display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
        padding: 13px 16px; background: var(--v3-surface); color: var(--v3-ink);
        border: 1px solid var(--v3-line); border-radius: 12px; cursor: pointer;
        font-family: var(--v3-cond); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
    }
    .mhw-home-cats svg { flex: none; }

    /* Hoja de categorías — mismo patrón que .mhw-v3-filterpanel del fitment. */
    .mhw-v2-nofit .mhw-home-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 15, 18, .5); z-index: 79; }
    .mhw-v2-nofit .mhw-home-backdrop[hidden] { display: none; }
    .mhw-v2-nofit .mhw-home-catsheet {
        display: block; position: fixed; left: 0; right: 0; bottom: 0;
        max-height: 82vh; overflow-y: auto; padding: 0 12px 14px;
        background: #fff; border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .35);
        transform: translateY(100%);
        transition: transform .22s cubic-bezier(.2, .7, .3, 1);
        z-index: 80;
    }
    .mhw-v2-nofit .mhw-home-catsheet.is-open { transform: translateY(0); }
    .mhw-v2-nofit .mhw-home-catsheet .mhw-v3-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; background: #fff;
        padding: 16px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid #ededf0;
    }

    .mhw-home-catsheet-body { padding-top: 6px; }
    .mhw-home-catrow {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 13px 14px; border-radius: 9px; margin-bottom: 2px;
        border: 0; background: none; cursor: pointer; text-decoration: none; text-align: left;
        font-family: var(--v3-cond); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: #3a3a40;
    }
    .mhw-home-catrow .lbl { flex: 1; min-width: 0; }
    .mhw-home-catrow .n { font-family: var(--v3-mono); font-size: 12px; color: #a4a4ac; }
    .mhw-home-allrow { background: var(--v3-bg); }
    .mhw-home-catrow.is-active { background: var(--v3-red); color: #fff; }
    .mhw-home-catrow.is-active .n { color: rgba(255, 255, 255, .82); }
    .mhw-home-grouprow .chev { flex: none; font-size: 20px; color: #b6b6bc; transition: transform .15s ease; }
    .mhw-home-group.is-open > .mhw-home-grouprow .chev { transform: rotate(90deg); }

    .mhw-home-subcats { display: none; padding: 2px 0 8px 12px; }
    .mhw-home-group.is-open > .mhw-home-subcats { display: block; }
    .mhw-home-subcat {
        display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
        text-decoration: none; color: #55555c; font-size: 14px; font-weight: 600;
    }
    .mhw-home-subcat .n { margin-left: auto; font-family: var(--v3-mono); font-size: 11.5px; color: #a4a4ac; }
    .mhw-home-subcat.is-active { color: var(--v3-red); }
    .mhw-home-subcat-all { color: var(--v3-red); font-family: var(--v3-cond); text-transform: uppercase; letter-spacing: .03em; font-size: 13px; }

    html.mhw-home-locked, html.mhw-home-locked body { overflow: hidden; }
}