/* TIC2026 plp — RUTA 2.0 v2.3 (r3 CARDS declutter) — 2026-07-13 — bloque D (LISTADO/BUSQUEDA)
   Re-skin de listados/busqueda del tema hummingbird-tic2026 (Trekktic shop 6 + Cubiertas shop 7).
   r3: tarjetas .cardProducto LIMPIAS (jerarquia pcard del mockup). Cambios clave:
     - anti-duplicado de disponibilidad: se deja SOLO el badge .cardProducto__flag
       sobre la foto y se oculta el bloque .cardProducto__delivery del cuerpo (misma
       info repetida) -> 1 solo indicador "Envio/disponibilidad" por tarjeta.
     - logo de marca PLANO (sin caja: fondo/borde/sombra/padding retirados).
     - se oculta la fila de iconos apps/caracteristicas (.cardProducto__badges): morralla.
     - tipografia/espaciado del cuerpo segun mockup (aire); sin divisoria interna.
   Se conservan intactos el flip 3D (.tic-flip) y el boton tactil .tic-turn.
   NO redefine tokens (tic2026-tokens.css). Usa var(--accent/--ink/--line/--card...).
   Fichero cargado SOLO por el tema tic2026 (via header.tpl), por lo que NO afecta
   a las tiendas con tema viejo.

   Dos sistemas de tarjeta, un mismo lenguaje visual RUTA:
     A) .cardProducto  -> HTML SSR del modulo buscadorkits (categoria/fabricante).
        NO puedo tocar su markup (PHP). Re-skin por CSS con !important donde el
        modulo (estilosBuscadorKits.css, que carga DESPUES) impone reglas.
        Hover = zoom + lift (como #view-catalog del mockup). Sin flip 3D: la
        tarjeta del modulo tiene UNA sola imagen y no puedo inyectar 2a cara.
     B) .pcard         -> miniatura nativa PS (busqueda y listados no interceptados).
        Markup mio (miniatures/product.tpl). Incluye flip-espejo + morph "Anadido".

   Animaciones: solo transform/opacity/filter. prefers-reduced-motion real al final.
*/

/* =========================================================================
   1. Contenedor de resultados + rejilla
   ========================================================================= */
.contenedor-productos,
#js-product-list .contenedor-productos,
.products.contenedor-productos{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr)) !important;
  gap:16px !important;
  align-items:stretch;
}
/* FIX QA-D: a <=480px el auto-fill minmax(178px) solo cabia 1 columna (contenedor
   ~360px con gap 16). Forzamos 2 columnas como el mockup movil (L1317). */
@media (max-width:480px){
  .contenedor-productos,
  #js-product-list .contenedor-productos,
  .products.contenedor-productos{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
}

/* =========================================================================
   1-bis. MODELO FINAL DE LA COLUMNA DE FILTROS (RUTA r7 — determinista).

   - CATEGORIA / FABRICANTE / BUSQUEDA: SIEMPRE columna de filtros SSR
     (#left-column + aside.sidebar via hookDisplayLeftColumn). Categorias y
     fabricantes la tienen por theme.yml del parent (layout-left-column);
     la BUSQUEDA la tiene desde r7 por el override del tema
     templates/catalog/listing/search.tpl (fuerza layout-left-column).
     Con la columna presente, buscadorkits.js toma SIEMPRE su camino "sidebar"
     (resultados en #center-column) y NUNCA el fallback a ancho completo, en
     cualquier camino de entrada (directo, SPA, atras/bfcache, filtro AJAX).
   - HOME (page-index): NUNCA columna (peticion del usuario, full-width).
     Buscar desde home/PDP/CMS navega a /busqueda (interceptor r7 en
     tic2026-plp.js) en vez del render SPA in-place sin filtros.
   - La copia .buscadorkits-sidebar-wrap (hookDisplayBeforeBodyClosingTag) solo
     existe como proveedor de DOM para el JS del modulo en paginas sin columna;
     en las paginas CON columna es un duplicado y se oculta (ver bloque 9-bis).
   - El fix anterior "un-hide de .columns-container.bk-hidden-by-results" (r2)
     queda RETIRADO: con el camino sidebar el modulo ya no marca ese contenedor
     en /busqueda (solo #right-column y el anchor vacio #main-content).
   ========================================================================= */
/* El controlador nativo de PS devuelve 0 resultados (la busqueda real la hace
   buscadorkits) y pinta un h1 "No hay resultados": anti-flash hasta que el JS
   del modulo lo reemplaza por los resultados reales. */
body#search h1.page-title-section,
body.page-search h1.page-title-section{display:none !important}

/* =========================================================================
   2. .cardProducto (SSR buscadorkits) -> look RUTA compacto + flip
   El modulo (tarjetasProducto.css) impone min-height:430px, media 205px y un
   CTA absoluto que se desliza (translateY). Aqui re-owneamos el layout con
   especificidad (0,2,0)+ para ganar sus reglas (0,1,0)/(0,2,0) y hacer la
   tarjeta COMPACTA sin bandas vacias. El flip 3D lo monta tic2026-plp.js
   (realce progresivo): envuelve SOLO la <img.cardProducto__media> en
   .tic-flip; badges/flag/logo/oferta quedan FUERA del recorte -> sus tooltips
   no se amputan. La tarjeta entera es un <a>; el boton .tic-turn (tactil)
   frena la navegacion via JS.
   ========================================================================= */
.contenedor-productos .cardProducto{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  text-decoration:none;
  color:var(--ink);
  position:relative;
  min-height:0;                 /* mata el min-height:430px del modulo -> compacto */
  cursor:pointer;
  transition:box-shadow var(--d-base) var(--e-out),transform var(--d-base) var(--e-settle);
}
@media (hover:hover){
  .contenedor-productos .cardProducto:hover{
    box-shadow:var(--shadow-2);
    transform:translateY(-3px);
    z-index:5;
  }
}
/* media: cuadrado, SIN overflow:hidden (los tooltips de badges deben salir),
   con perspective para el flip. */
.contenedor-productos .cardProducto__media-wrap{
  position:relative;
  aspect-ratio:1;
  width:100%;
  background:#fff;
  padding:0;                    /* mata el padding:30px del modulo */
  overflow:visible;             /* CLAVE anti-amputacion de tooltips */
  border-radius:0;
  perspective:900px;
}
/* imagen de portada (front) — vale con o sin envoltura de flip (progresivo) */
.contenedor-productos .cardProducto__media{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  padding:9%;
  box-sizing:border-box;
  transition:transform var(--d-base) var(--e-out);
}
/* --- flip 3D (estructura inyectada por tic2026-plp.js) --- */
.contenedor-productos .cardProducto .tic-flip{position:absolute;inset:0;z-index:1}
.contenedor-productos .cardProducto .tic-flip-in{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .55s var(--e-settle);
}
.contenedor-productos .cardProducto .tic-flip-face{
  position:absolute;inset:0;background:#fff;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
}
.contenedor-productos .cardProducto .tic-flip-front .cardProducto__media,
.contenedor-productos .cardProducto .tic-flip-back img{
  width:100%;height:100%;object-fit:contain;padding:9%;box-sizing:border-box;
}
.contenedor-productos .cardProducto .tic-flip-back{transform:rotateY(180deg)}
/* espejo SOLO cuando no hay 2a imagen real (data-img2 ausente): la clase --mirror la pone
   tic2026-plp.js. Con 2a imagen real NO se espeja (se ve la foto tal cual). */
.contenedor-productos .cardProducto .tic-flip-back--mirror img{transform:scaleX(-1)}
@media (hover:hover){
  .contenedor-productos .cardProducto:hover .tic-flip-in{transform:rotateY(180deg)}
  /* el flip sustituye al zoom en hover (mockup #view-search L604): sin zoom del front */
  .contenedor-productos .cardProducto:hover .cardProducto__media{transform:none}
}
.contenedor-productos .cardProducto .tic-flip.is-flipped .tic-flip-in{transform:rotateY(180deg)}
/* boton tactil de giro (solo sin hover) — abajo-dcha (la oferta va abajo-izq) */
.contenedor-productos .cardProducto .tic-turn{
  position:absolute;right:9px;bottom:9px;z-index:16;
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-1);color:var(--ink-soft);
  display:none;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--d-base) var(--e-settle);
}
.contenedor-productos .cardProducto .tic-turn:active{transform:scale(.92)}
@media (hover:none){.contenedor-productos .cardProducto .tic-turn{display:inline-flex}}
/* logo de marca (arriba-izq) — RUTA r3: PLANO, SIN caja. El modulo entrega un JPG
   de fondo blanco: mix-blend-mode:multiply lo funde sobre el media (blanco) y queda
   limpio, como el nombre-marca del mockup. !important en las props de caja para
   ganar por si el CSS del modulo (carga despues) intentara re-pintar la cajita. */
.contenedor-productos .logo_marca{
  position:absolute;top:10px;left:11px;z-index:8;
  max-width:66px;height:20px;display:flex;align-items:center;
  background:none !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;box-shadow:none !important;
}
.contenedor-productos .cardProducto__marca-image{
  max-width:66px;max-height:20px;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;opacity:.9;
}
/* flag disponibilidad -> badge RUTA (arriba-dcha). RUTA r4: UNICO elemento flotante en
   la banda superior de la foto (la marca se reubica al cuerpo via tic2026-plp.js), asi que
   ya no compite con el logo. Compacto (un punto menos que r3). */
.contenedor-productos .cardProducto__flag{
  position:absolute;top:8px;right:8px;z-index:8;
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;line-height:1;clip-path:none;
  max-width:calc(100% - 16px);
  background:#E7F5EC;color:var(--ok);
  box-shadow:var(--shadow-1);
}
.contenedor-productos .cardProducto__flag--express{
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--accent-dark);
}
.contenedor-productos .cardProducto__flag--no{background:#FDEBE9;color:var(--sale)}
/* RUTA r4 — en movil (rejilla de 2 columnas estrechas) el badge de disponibilidad es el
   unico flotante arriba; la marca ya vive en el cuerpo (la mueve tic2026-plp.js). El
   sizing del logo-sobre-foto solo aplicaria en el instante previo a que corra el JS. */
@media (max-width:480px){
  .contenedor-productos .cardProducto__flag{
    font-size:9px;letter-spacing:.02em;padding:3px 6px;gap:3px;top:7px;right:7px;
  }
  .contenedor-productos .cardProducto__content .cardProducto__marca-image{max-height:15px;max-width:92px}
  .contenedor-productos .cardProducto__offer-image{height:38px}
}
/* RUTA r3 DECLUTTER: la fila de iconos apps/caracteristicas (🛵/⚙️) flotando sobre
   la foto sobrecarga la tarjeta y el mockup no la lleva. La ocultamos (la info sigue
   integra en la ficha de producto). Solo aparecia en /busqueda; en categoria ni se
   emitia. !important por si el CSS del modulo la reexpone. */
.contenedor-productos .cardProducto__badges{display:none !important}
/* imagen "oferta" -> badge abajo-IZQ de la foto. RUTA r4: contenido (~42px), no toca el
   centro de la foto ni el boton de giro .tic-turn (que vive abajo-DCHA, esquina opuesta). */
.contenedor-productos .cardProducto__offer-image{
  position:absolute;left:8px;bottom:8px;z-index:7;
  width:auto;height:42px;max-width:52%;object-fit:contain;right:auto;top:auto;
  filter:drop-shadow(0 2px 5px rgba(19,26,42,.25));
}
/* =========================================================================
   RUTA r4 — MARCA reubicada al cuerpo (tic2026-plp.js saca .logo_marca de la foto
   y la inserta al principio de .cardProducto__content, como linea de marca sobre el
   titulo). Estas reglas ganan a la version absoluta (mas especificas) SOLO cuando el
   nodo ya cuelga del cuerpo. Antes de que corra el JS, sigue valiendo la absoluta. */
.contenedor-productos .cardProducto__content .logo_marca{
  position:static;top:auto;left:auto;right:auto;bottom:auto;z-index:auto;
  max-width:100%;height:16px;margin:0 0 1px;padding:0 !important;
  display:flex;align-items:center;justify-content:flex-start;
}
.contenedor-productos .cardProducto__content .cardProducto__marca-image{
  max-width:104px;max-height:16px;width:auto;height:auto;object-fit:contain;
  object-position:left center;opacity:.9;mix-blend-mode:multiply;
}
/* fallback texto (tic2026-plp.js lo inserta si el logo de marca no carga) */
.contenedor-productos .cardProducto__brandtxt{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;
}
/* contenido — RUTA r3: LIMPIO y con aire (mockup p-body). Sin el bloque de entrega
   (oculto mas abajo) el cuerpo respira: titulo 2 lineas -> precio destacado abajo ->
   CTA. Sin divisoria interna: media+cuerpo son un continuo blanco como el mockup. */
.contenedor-productos .cardProducto__content{
  padding:12px 14px 4px;
  display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0;
  background:var(--card);
  border-top:0;
}
.contenedor-productos .cardProducto__title{
  font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink);
  margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;
}
.contenedor-productos .cardProducto__pvp-ref{margin-top:auto;padding-top:2px}
.contenedor-productos .cardProducto__price{
  font-size:18px;font-weight:800;color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.1;
}
/* RUTA r3 — ANTI-DUPLICADO de disponibilidad: el modulo pinta la MISMA info DOS
   veces -> (1) badge .cardProducto__flag sobre la foto ("⚡ Inmediato"/"Disponible"…)
   y (2) este bloque .cardProducto__delivery en el cuerpo (dot + texto + icono express
   + leyenda). El mockup lleva UN solo badge y sobre la imagen (patron pcard). Dejamos
   el flag (encaja con el mockup) y ocultamos el bloque de entrega, que es el que peor
   encaja y mas satura. Resultado: 1 solo indicador de "Envio/disponibilidad" por
   tarjeta. !important por el orden de carga del CSS del modulo. */
.contenedor-productos .cardProducto__delivery{display:none !important}
/* CTA -> boton suave RUTA, inline (mata el CTA absoluto/deslizante del modulo) */
.contenedor-productos .cardProducto__cta{
  position:static !important;transform:none !important;
  left:auto;right:auto;bottom:auto;
  margin:8px 14px 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  color:var(--accent-dark);
  font-size:12.5px;font-weight:700;
  padding:9px 12px;border-radius:10px;
  border:1.5px solid color-mix(in srgb,var(--accent) 24%,transparent);
  transition:background-color var(--d-fast) ease,color var(--d-fast) ease;
}
@media (hover:hover){
  .contenedor-productos .cardProducto:hover .cardProducto__cta{background:var(--accent);color:var(--on-accent)}
}
/* (RUTA r3) Los indicadores apps/caracteristicas se ocultan (declutter, ver arriba):
   el CSS de sus tooltips ya no aplica y se ha retirado. Si en el futuro se decide
   reexponer una version discreta, restaurar aqui el posicionamiento del tooltip. */

/* =========================================================================
   3. .pcard (miniatura nativa PS: busqueda + listados no interceptados)
   Puerto directo del mockup RUTA (L500-583) adaptado a markup real.
   ========================================================================= */
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-1);position:relative;
  transition:box-shadow var(--d-base) var(--e-out),transform var(--d-base) var(--e-settle);
  transform-style:preserve-3d;
  display:flex;flex-direction:column;
}
@media (hover:hover){.pcard:hover{box-shadow:var(--shadow-2)}}
.pcard .p-media{position:relative;aspect-ratio:1;background:#fff;perspective:900px}
.pcard .flip{position:absolute;inset:0}
.pcard .flip-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s var(--e-settle)}
.pcard .flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pcard .flip-front{display:flex;align-items:center;justify-content:center}
.pcard .flip-front img{width:100%;height:100%;object-fit:contain;padding:10%;transition:transform var(--d-base) var(--e-out)}
/* cara trasera: 2a imagen REAL si el producto la tiene (images[1]); si no, ESPEJO de la
   portada (fallback: ~19% tiene 2a imagen). El espejo se aplica solo con .flip-back--mirror. */
.pcard .flip-back--img{transform:rotateY(180deg);background:#fff;display:block}
.pcard .flip-back--img img{width:100%;height:100%;object-fit:contain;padding:10%}
.pcard .flip-back--img.flip-back--mirror img{transform:scaleX(-1)}
@media (hover:hover){
  .pcard:hover .flip-in{transform:rotateY(180deg)}
}
/* modo tactil: boton p-turn alterna el flip */
.pcard .flip.is-flipped .flip-in{transform:rotateY(180deg)}
.pcard .p-turn{
  position:absolute;right:9px;bottom:9px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-1);color:var(--ink-soft);
  display:none;align-items:center;justify-content:center;
  transition:transform var(--d-base) var(--e-settle),color var(--d-fast) ease;
}
.pcard .p-turn:active{transform:scale(.94)}
@media (hover:none){.pcard .p-turn{display:inline-flex}}
.pcard .p-badges{position:absolute;top:9px;left:9px;z-index:3;display:grid;gap:5px;justify-items:start}
/* (r8) .p-fav (corazon favoritos) RETIRADO: era CSS muerto portado del mockup — la
   miniatura .pcard (miniatures/product.tpl) NUNCA renderiza ese boton y ningun JS lo
   togglea (is-on/beat). Si se reintroduce favoritos, restaurar aqui + su keyframe. */
.pcard .p-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1 1 auto}
.pcard .p-brand{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pcard .p-name{font-size:14px;font-weight:600;line-height:1.3;min-height:2.6em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .p-price-row{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:4px}
.pcard .p-price{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.pcard .price-old{font-size:13px;color:var(--ink-soft);text-decoration:line-through;font-variant-numeric:tabular-nums}
.pcard .btn-add{
  margin-top:8px;display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;
  background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark);
  font-size:13.5px;font-weight:700;padding:10px;border-radius:11px;cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--accent) 25%,transparent);
  transition:background-color var(--d-fast) ease,color var(--d-fast) ease,transform var(--d-fast) var(--e-settle);
  position:relative;overflow:hidden;
}
.pcard .btn-add:active{transform:scale(.97)}
@media (hover:hover){.pcard .btn-add:hover{background:var(--accent);color:var(--on-accent)}}
/* morph "Anadido" */
.pcard .ba-label,.pcard .ba-done{display:inline-flex;align-items:center;gap:7px;
  transition:opacity var(--d-fast) ease,filter var(--d-fast) ease,transform var(--d-base) var(--e-settle)}
.pcard .ba-done{position:absolute;inset:0;justify-content:center;opacity:0;filter:blur(4px);transform:scale(.85);color:inherit}
.pcard .btn-add.is-added .ba-label{opacity:0;filter:blur(4px)}
.pcard .btn-add.is-added .ba-done{opacity:1;filter:none;transform:none}
/* boton "ver detalles" cuando no hay add-to-cart */
.pcard .p-details{
  margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;padding:10px;border-radius:11px;
  text-decoration:none;transition:transform var(--d-fast) var(--e-settle),box-shadow var(--d-fast) var(--e-out);
}
@media (hover:hover){.pcard .p-details:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}}
/* qty-input nativo escondido en la miniatura (add rapido = cantidad 1) */
.pcard .quantity-button{display:none}

/* =========================================================================
   4. Toolbar (categoria/fabricante SSR: .barra_control_busqueda es markup mio)
   ========================================================================= */
.barra_control_busqueda{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin-bottom:14px;padding:0;background:none;border:0;
}
.barra_control_busqueda .barra_control_info#textoResultadoBusqueda{
  font-size:14px;font-weight:800;color:var(--ink);
}
.barra_control_busqueda .barra_orden_busqueda{
  display:flex;align-items:center;gap:8px;margin-left:auto;
}
.barra_control_busqueda .barra_orden_busqueda .barra_control_info{
  font-size:13px;color:var(--ink-soft);font-weight:600;
}
.barra_control_busqueda select#ordenBusquedaCmb{
  border:1.5px solid var(--line);border-radius:10px;padding:8px 30px 8px 12px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--d-fast) ease,box-shadow var(--d-base) var(--e-settle);
}
.barra_control_busqueda select#ordenBusquedaCmb:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
/* NOTA: toggle de vista (grid/lista) omitido en el path SSR: buscadorkits reconstruye
   toda la barra en cada AJAX (funcionesApi.js:479) y borraria el control. Pendiente
   si se quiere; requeriria re-inyeccion post-rebuild. Ver informe. */

/* =========================================================================
   5. Facetas / sidebar (buscadorkits SSR - re-skin CSS, markup del modulo)
   FIX QA-D: el sidebar VISIBLE lo pinta hookDisplayLeftColumn SIN wrapper:
   es aside.sidebar dentro de #left-column/.left-column. El wrapper
   .buscadorkits-sidebar-wrap (hookDisplayBeforeBodyClosingTag) es una copia
   oculta (display:none en tdc-critical). Scope DUAL via :is() cubriendo ambos.
   Hay IDs duplicados por la copia (#slider-distance, #idshop) => selectores por
   clase/atributo, nunca por ID. El CSS critico inline (tdc-critical) usa
   !important a especificidad (0,2,1) tipo aside.sidebar .filter_group; con
   :is(...) .sidebar X con #left-column dentro del :is() quedamos en (1,2,0)+ y
   ganamos tambien a las reglas runtime-inyectadas #left-column X (1,1,0)!important.
   ========================================================================= */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar{background:none;border:0;padding:0;display:block}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .buscadorkits_titulo{
  font-weight:900 !important;font-style:italic;letter-spacing:-.01em !important;text-transform:uppercase;
  font-size:18px !important;color:var(--ink) !important;margin:0 0 12px !important;padding:0;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .buscadorkits_titulo::before{content:"/ ";color:var(--accent);font-style:normal}
/* cada filter_group -> tarjeta facet RUTA */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group,
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .sidebar-caracteristicas-section:not([style*="display:none"]){
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-top:1px solid var(--line) !important;
  border-radius:var(--r-card) !important;
  box-shadow:var(--shadow-1);
  padding:14px 16px !important;
  margin:0 0 12px !important;
}
/* titulos de facet */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .buscadorkits_disponibilidad_titulo,
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .buscadorkits_precio_titulo,
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .buscadorkits_tienda_titulo,
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .buscadorkits_matricula_titulo,
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .sidebar-caracteristicas-header{
  font-weight:800 !important;font-size:14px !important;color:var(--ink) !important;
  margin:0 0 10px !important;padding:0 !important;text-transform:none !important;letter-spacing:0 !important;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .sidebar-caracteristicas-header{cursor:pointer;margin-bottom:0 !important}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .sidebar-caracteristicas-body{margin-top:10px}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .collapsible-arrow{color:var(--ink-soft);font-size:12px;transition:transform var(--d-base) var(--e-settle)}
/* ---- 2026-07-21: sección "¡Elige tu moto/bicicleta/coche!" (shops 2/4/5) ----
   ANTES el selector [class*="titulokits"] de la regla de títulos matcheaba la SECCIÓN
   entera (filter_group_titulokits) y la ponía en display:flex → el título quedaba en
   una columna estrecha JUNTO a los selects ("se ve muy mal"). Ahora: la sección es una
   tarjeta facet normal, el título es CABECERA horizontal (como Disponibilidad) y los
   .filter_group interiores pierden el estilo tarjeta (quedaban tarjetas anidadas). */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits{
  display:block;
  background:#fff !important;border:1px solid var(--line) !important;
  border-radius:var(--r-card) !important;box-shadow:var(--shadow-1);
  padding:14px 16px !important;margin:0 0 12px !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .collapsible-header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .buscadorkits_titulo{
  font-size:14px !important;font-style:normal !important;font-weight:800 !important;
  text-transform:none !important;letter-spacing:0 !important;color:var(--ink) !important;
  margin:0 !important;padding:0 !important;border-bottom:0 !important;flex:1;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .buscadorkits_titulo::before{content:none}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .collapsible-body{margin-top:10px}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .collapsible-body .filter_group{
  background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;margin:0 0 10px !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .collapsible-body .filter_group:last-child{margin-bottom:0 !important}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_titulokits .collapsible-body [class*="_titulo"]{
  font-size:12.5px !important;font-weight:700 !important;color:var(--ink-soft) !important;
  margin:0 0 4px !important;padding:0 !important;background:none !important;border:0 !important;text-transform:none !important;
}
/* buscador de texto */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filtro_texto{
  width:100% !important;border:1.5px solid var(--line) !important;border-radius:10px !important;
  padding:9px 12px !important;font-size:13.5px;color:var(--ink);background:#fff;
  transition:border-color var(--d-fast) ease,box-shadow var(--d-base) var(--e-settle);
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filtro_texto:focus{
  outline:none;border-color:var(--accent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
/* checkboxes (disponibilidad / marcas / caracteristicas) */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group label{
  display:flex !important;align-items:center;gap:9px !important;
  font-size:13.5px !important;font-weight:600 !important;color:var(--ink) !important;cursor:pointer;
  min-height:26px;margin:2px 0 !important;padding:0;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group label input[type="checkbox"]{
  width:17px;height:17px;accent-color:var(--accent);flex:none;margin:0;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .checkbox_image{height:16px !important;width:auto !important;margin-left:auto !important}
/* selects (tienda etc.) */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group select{
  width:100%;border:1.5px solid var(--line) !important;border-radius:10px !important;padding:8px 10px;
  background:#fff;font-size:13.5px !important;font-weight:600;color:var(--ink);
}
/* listas de marcas/caracteristicas: UN solo scroll — el interior
   (.filtro_lista_contenedor, 320px en tudetic-overrides-v3). El tope exterior de
   230px creaba DOS scrolls anidados que se pisaban (fix 2026-07-21). */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filtro_lista_scroll{max-height:none;overflow:visible;margin-top:4px}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filtro_lista_contenedor::-webkit-scrollbar{width:8px}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filtro_lista_contenedor::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* ---- slider de precio (dual-range real del modulo; slider.css usa [slider]/[range]/
   [thumb]/[sign] sin !important) -> acento RUTA. Solo COLORES: la geometria nativa
   (alturas/margenes) se respeta para no descolocar los thumbs. ---- */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar [slider] > div > [inverse-left],
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar [slider] > div > [inverse-right]{
  background-color:var(--line) !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar [slider] > div > [range]{
  background-color:var(--accent) !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar [slider] > div > [thumb]{
  background-color:#fff !important;
  border:2.5px solid var(--accent) !important;
  box-shadow:var(--shadow-1) !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar [slider] > div > [sign]{
  background-color:var(--ink) !important;color:#fff !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar [slider] > div > [sign]:after{
  border-top-color:var(--ink) !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filtros_texto_rango_precios{
  font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
}

/* ---- filter_group_matricula -> widget g-plate (MOTUL por matricula).
   No testeable en esta tienda (el modulo no emite el widget aqui) - CSS listo. ---- */
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_matricula{
  border:1px solid var(--line) !important;
  border-radius:var(--r-card) !important;overflow:hidden;
  padding:0 !important;background:#fff !important;box-shadow:var(--shadow-1);
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_matricula .buscadorkits_matricula_titulo{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)) !important;
  color:var(--on-accent) !important;
  padding:13px 16px !important;margin:0 !important;font-size:15px !important;
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_matricula > *:not(.buscadorkits_matricula_titulo){padding-inline:16px}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_matricula input[type="text"]{
  width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:9px 12px;margin:10px 0;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--ink);background:#fff;
  transition:border-color var(--d-fast) ease,box-shadow var(--d-base) var(--e-settle);
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_matricula input[type="text"]:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
:is(#left-column,.left-column,.buscadorkits-sidebar-wrap) .sidebar .filter_group_matricula button{
  border-radius:10px;font-weight:700;margin-bottom:14px;
}

/* =========================================================================
   6. Chips de filtros activos (buscadorkits inyecta en #contenedorFiltros por JS)
   Re-skin generico: cualquier hijo directo pasa a ser chip RUTA eliminable.
   ========================================================================= */
#contenedorFiltros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
#contenedorFiltros:empty{display:none}
#contenedorFiltros>*{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink);
  padding:6px 12px;line-height:1;
  transition:transform var(--d-base) var(--e-settle),border-color var(--d-fast) ease;
}
@media (hover:hover){#contenedorFiltros>*:hover{border-color:var(--accent)}}
/* boton/aspa de quitar dentro del chip */
#contenedorFiltros>* a,
#contenedorFiltros>* button,
#contenedorFiltros>* .quitar,
#contenedorFiltros>* span[onclick]{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:#F0F2F6;color:var(--ink-soft);
  font-size:12px;line-height:1;cursor:pointer;text-decoration:none;
  transition:background-color var(--d-fast) ease,color var(--d-fast) ease;
}
@media (hover:hover){
  #contenedorFiltros>* a:hover,
  #contenedorFiltros>* button:hover,
  #contenedorFiltros>* .quitar:hover,
  #contenedorFiltros>* span[onclick]:hover{background:var(--sale);color:#fff}
}

/* FIX QA-D: el chip REAL del modulo es div.filtroItem con aspa div.filtroClose
   (manejadorUrls.js:806/1070). estilosBuscadorKits.css lo pinta naranja-calido con
   !important a (1,2,0)/(1,2,0) y carga DESPUES: subimos especificidad repitiendo
   clase -> (1,2,0+1)/(1,3,0). */
#contenedorFiltros .filtroItem.filtroItem{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff !important;color:var(--ink) !important;
  border:1.5px solid var(--line) !important;
  border-left:1.5px solid var(--line) !important;
  border-radius:999px !important;
  font-size:13px;font-weight:600;
  padding:6px 8px 6px 13px !important;line-height:1;cursor:default;
  transition:transform var(--d-base) var(--e-settle),border-color var(--d-fast) ease;
}
#contenedorFiltros .filtroItem.filtroItem span{
  color:var(--ink) !important;margin-right:0 !important;
}
@media (hover:hover){
  #contenedorFiltros .filtroItem.filtroItem:hover{
    background:#fff !important;border-color:var(--accent) !important;
  }
}
#contenedorFiltros .filtroItem .filtroClose.filtroClose{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:18px !important;height:18px !important;border-radius:50% !important;
  background:#F0F2F6 !important;color:var(--ink-soft) !important;
  font-size:11px !important;font-weight:700;line-height:1 !important;cursor:pointer;
  transition:background-color var(--d-fast) ease,color var(--d-fast) ease;
}
@media (hover:hover){
  #contenedorFiltros .filtroItem .filtroClose.filtroClose:hover{
    background:var(--sale) !important;color:#fff !important;
  }
}
/* chip de categoria base: mismo look, acento de tienda en el aro */
#contenedorFiltros .filtroItem.filtroItem.filtroItem--catbase{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) !important;
  border-left-color:color-mix(in srgb,var(--accent) 45%,var(--line)) !important;
}

/* =========================================================================
   7. Skeleton shimmer al filtrar/paginar.
   IMPORTANTE: buscadorkits (funcionesApi.js:479) reemplaza TODO el innerHTML de
   #js-product-list en cada busqueda AJAX, por lo que NO se puede inyectar markup
   de skeleton persistente. El estado va como clase .loading en el PROPIO elemento
   #js-product-list (persiste al reemplazar innerHTML) y el shimmer es un overlay
   por pseudo-elemento (sin markup). Mismo patron para busqueda nativa PS.
   ========================================================================= */
#js-product-list{position:relative}
#js-product-list.loading > .contenedor-productos,
#js-product-list.loading #contenedor-productos,
#js-product-list.loading .products.contenedor-productos{
  opacity:0;filter:blur(5px);pointer-events:none;
  transition:opacity var(--d-base) ease,filter var(--d-base) ease;
}
#js-product-list #contenedor-productos,
#js-product-list .products.contenedor-productos{transition:opacity var(--d-base) ease,filter var(--d-base) ease}
/* Skeleton sin nodos DOM (el modulo reemplaza el innerHTML):
   ::before = fondo skeleton en columnas; ::after = brillo que barre.
   Animacion SOLO por transform (compositor-friendly). */
#js-product-list.loading::before,
#js-product-list.loading::after{
  content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;
  height:min(70vh,760px);border-radius:var(--r-card);
  -webkit-mask-image:repeating-linear-gradient(to right,#000 0 168px,transparent 168px 194px);
  mask-image:repeating-linear-gradient(to right,#000 0 168px,transparent 168px 194px);
}
#js-product-list.loading::before{z-index:4;background:#EDF0F4}
#js-product-list.loading::after{
  z-index:5;overflow:hidden;
  background:linear-gradient(100deg,transparent 38%,color-mix(in srgb,var(--accent) 12%,#fff) 50%,transparent 62%);
  transform:translateX(-100%);
  animation:ticShimmer 1.15s var(--e-out) infinite;
}
@keyframes ticShimmer{to{transform:translateX(100%)}}

/* =========================================================================
   8. Paginacion (SSR .buscadorkits-ssr-pagination [markup mio] + nativa .pagination)
   ========================================================================= */
.buscadorkits-ssr-pagination,
#js-product-list .pagination{
  margin-top:26px;
}
.buscadorkits-ssr-pagination .pagination-list,
#js-product-list .pagination .pagination-list,
#js-product-list .pagination .page-list ul{
  display:flex;justify-content:center;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0;
}
.buscadorkits-ssr-pagination .page-link,
#js-product-list .pagination .page-link{
  min-width:38px;height:38px;padding:0 10px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-weight:700;font-size:13.5px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  transition:border-color var(--d-fast) ease,background-color var(--d-fast) ease,color var(--d-fast) ease,transform var(--d-fast) var(--e-settle);
}
.buscadorkits-ssr-pagination .page-item.current .page-link,
.buscadorkits-ssr-pagination .page-item.active .page-link,
#js-product-list .pagination .page-item.current .page-link,
#js-product-list .pagination .page-item.active .page-link{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.buscadorkits-ssr-pagination .page-item.disabled .page-link,
#js-product-list .pagination .page-item.disabled .page-link{
  opacity:.45;border-color:transparent;background:none;pointer-events:none;
}
.buscadorkits-ssr-pagination .page-link:active,
#js-product-list .pagination .page-link:active{transform:scale(.94)}
@media (hover:hover){
  .buscadorkits-ssr-pagination .page-item:not(.current):not(.active):not(.disabled) .page-link:hover,
  #js-product-list .pagination .page-item:not(.current):not(.active):not(.disabled) .page-link:hover{
    border-color:var(--accent);color:var(--accent-dark);
  }
}
.buscadorkits-ssr-pagination .col-page-summary{
  text-align:center;margin-top:12px;font-size:13px;color:var(--ink-soft);font-weight:600;
}
.buscadorkits-ssr-pagination .page-link .material-icons{font-size:18px}

/* =========================================================================
   9. Movil — trigger de filtros + bottom-sheet (mockup L1258-1280)
   FIX QA-D: el sheet es el sidebar REAL (.left-column aside.sidebar), no la copia
   del wrapper. El boton del modulo (#menu_filtros_movil, en el header) toggle-a
   body.bk-sidebar-open via MeterPanelAVistaMovilUOrdenador (<992px). Aqui SOLO
   presentacion: cerrado = translateY(105%); abierto = translateY(0). El backdrop
   .tic-sheet-back lo crea el JS inline minimo de category/manufacturer.tpl.
   ========================================================================= */
@media (max-width:991px){
  /* skin RUTA del trigger (tdc-critical lo pinta con !important a (1,0,1);
     nosotros (1,1,0)+!important) */
  .mobile-filter-menu #menu_filtros_movil{
    display:inline-flex !important;align-items:center;gap:8px;
    border:1.5px solid var(--line) !important;border-radius:11px !important;
    background:#fff !important;color:var(--ink) !important;
    font-weight:700;font-size:13.5px !important;padding:0 14px !important;
    cursor:pointer;box-shadow:var(--shadow-1);
    transition:transform var(--d-fast) var(--e-settle),box-shadow var(--d-fast) var(--e-out);
  }
  .mobile-filter-menu #menu_filtros_movil:active{transform:scale(.97)}

  /* Neutraliza la maquinaria legacy que rompe el sheet (verificado con CDP):
     1) el critico convierte #left-column en DRAWER lateral en movil
        (position:fixed + translateX(-320px) + z-index:9990) — lo devolvemos a flow;
     2) main#wrapper{contain:layout} lo hacia containing block de position:fixed;
     3) contain/min-height del CLS-guard dejarian hueco. Solo paginas de listado.
     4) el critico del drawer trae padding:56px 16px 24px (hueco vertical de 80px) y
        border-right:1px (linea vertical fantasma) — el reset los omitia y quedaban
        colgando sobre la columna vacia en movil (verificado Playwright biketic). */
  html body#category #left-column,
  html body#search #left-column,
  html body#manufacturer #left-column,
  html body.page-category #left-column,
  html body.page-search #left-column,
  html body.page-manufacturer #left-column{
    position:static !important;transform:none !important;z-index:auto !important;
    width:auto !important;height:auto !important;inset:auto !important;
    overflow:visible !important;background:none !important;box-shadow:none !important;
    contain:none !important;min-height:0 !important;visibility:visible !important;
    display:block !important;transition:none !important;
    padding:0 !important;border:0 !important;
  }
  html body#category main#wrapper,
  html body#search main#wrapper,
  html body#manufacturer main#wrapper,
  html body.page-category main#wrapper,
  html body.page-search main#wrapper,
  html body.page-manufacturer main#wrapper{
    contain:none !important;
  }

  /* bottom-sheet.
     El critico legacy fuerza el sidebar inline en movil con !important a (1,0,3)
     (`html body #left-column > aside.sidebar{position:static!important;...}`) y
     (0,1,1) (`aside.sidebar{position:static!important}`). Ganamos con !important
     a (1,2,3)/(2,1,3) usando body.page-* / body#id. */
  html body#category #left-column > aside.sidebar,
  html body#search #left-column > aside.sidebar,
  html body#manufacturer #left-column > aside.sidebar,
  html body.page-category #left-column > aside.sidebar,
  html body.page-search #left-column > aside.sidebar,
  html body.page-manufacturer #left-column > aside.sidebar{
    position:fixed !important;inset:auto 0 0 0 !important;z-index:96 !important;
    background:var(--bg) !important;border-radius:20px 20px 0 0 !important;
    max-height:82vh !important;overflow:auto !important;
    padding:9px 15px calc(19px + env(safe-area-inset-bottom,0px)) !important;
    box-shadow:0 -14px 44px rgba(6,10,20,.3) !important;
    transform:translateY(105%) !important;visibility:hidden !important;
    display:block !important;
    transition:transform var(--d-base) var(--e-travel),visibility 0s linear var(--d-base) !important;
  }
  html body#category.bk-sidebar-open #left-column > aside.sidebar,
  html body#search.bk-sidebar-open #left-column > aside.sidebar,
  html body#manufacturer.bk-sidebar-open #left-column > aside.sidebar,
  html body.page-category.bk-sidebar-open #left-column > aside.sidebar,
  html body.page-search.bk-sidebar-open #left-column > aside.sidebar,
  html body.page-manufacturer.bk-sidebar-open #left-column > aside.sidebar{
    visibility:visible !important;transform:none !important;
    transition:transform var(--d-travel) var(--e-settle) !important;
  }
  /* asa de arrastre visual */
  .left-column aside.sidebar::before{
    content:"";display:block;width:44px;height:5px;border-radius:3px;
    background:var(--line);margin:4px auto 12px;
  }
  /* barra de cierre dentro del sheet (mockup .filters-close L1272; markup creado
     por el JS inline — el modulo no borra el sidebar, solo #js-product-list).
     STICKY 2026-07-21: la barra "Filtrar ✕" y el titulo "/ BUSCADOR" quedan fijos
     arriba al scrollear el sheet — la X de cerrar siempre visible. top:-9px
     compensa el padding-top del sheet; el titulo se apila justo debajo (top =
     altura de la barra - 10). Fondos opacos var(--bg) para tapar el contenido. */
  .left-column aside.sidebar .tic-sheet-close{
    display:flex;justify-content:space-between;align-items:center;
    position:sticky !important;top:-9px;z-index:210;
    margin:0 -15px !important;width:calc(100% + 30px) !important;
    background:var(--bg,#fff) !important;border:0;cursor:pointer;
    font-weight:800;font-size:15px;color:var(--ink);
    padding:12px 18px !important;
    border-radius:20px 20px 0 0 !important;
  }
  .left-column aside.sidebar .tic-sheet-close svg{color:var(--ink-soft)}
  .left-column aside.sidebar .buscadorkits_titulo{
    position:sticky !important;top:37px;z-index:209;
    margin:0 -15px 14px !important;padding:2px 18px 8px !important;
    background:var(--bg,#fff) !important;
    box-shadow:0 8px 12px -10px rgba(6,10,20,.28);
  }
  /* backdrop (creado por JS inline; click = cerrar) */
  .tic-sheet-back{
    position:fixed;inset:0;z-index:94;background:rgba(9,13,24,.5);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;
    transition:opacity var(--d-base) ease,visibility 0s linear var(--d-base);
  }
  body.bk-sidebar-open .tic-sheet-back{
    opacity:1;visibility:visible;transition:opacity var(--d-base) ease;
  }
  body.bk-sidebar-open{overflow:hidden}
}
@media (min-width:992px){
  .tic-sheet-back{display:none}
  .tic-sheet-close{display:none}
  /* en escritorio el sidebar esta siempre visible y el JS del modulo no-opea:
     el trigger seria un boton muerto -> oculto */
  .mobile-filter-menu{display:none}
}

/* 9-bis. En paginas CON columna (categoria/fabricante/busqueda — ver modelo en
   1-bis) el sidebar REAL vive en #left-column; la copia del wrapper
   (hookDisplayBeforeBodyClosingTag) es un DUPLICADO: ademas, el CSS legacy asincrono
   (tudetic-overrides) la convierte en drawer lateral cuando body.bk-sidebar-open,
   solapandose con el bottom-sheet e interceptando clicks (verificado Playwright).
   La ocultamos SOLO en esas paginas (en home/PDP/CMS no hay left-column y la copia
   es el proveedor de DOM del JS del modulo: ahi no se toca). getElementById con IDs
   duplicados resuelve al PRIMER nodo (el real, que va antes en el DOM), asi que el
   JS del modulo no se ve afectado. */
html body.page-category div.buscadorkits-sidebar-wrap,
html body.page-search div.buscadorkits-sidebar-wrap,
html body.page-manufacturer div.buscadorkits-sidebar-wrap{display:none !important}

/* =========================================================================
   10. prefers-reduced-motion (REAL en produccion)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .contenedor-productos .cardProducto,
  .contenedor-productos .cardProducto__media,
  .contenedor-productos .cardProducto__cta,
  .contenedor-productos .cardProducto .tic-flip-in,
  .contenedor-productos .cardProducto .tic-turn,
  .pcard,.pcard .flip-in,.pcard .flip-front img,.pcard .p-turn,
  .pcard .btn-add,.pcard .ba-label,.pcard .ba-done,
  #js-product-list #contenedor-productos,#js-product-list .products.contenedor-productos,
  .buscadorkits-ssr-pagination .page-link,#js-product-list .pagination .page-link,
  #contenedorFiltros>*{
    transition:none !important;animation:none !important;
  }
  .pcard:hover .flip-in{transform:none !important}
  .contenedor-productos .cardProducto:hover .cardProducto__media{transform:none !important}
  /* sin animacion de flip: el hover NO gira (queda la portada); el boton .tic-turn
     sigue alternando la 2a cara pero de forma instantanea (transition:none arriba) */
  .contenedor-productos .cardProducto:hover .tic-flip-in{transform:none !important}
  /* con motion reducido no ocultamos la rejilla ni barremos el brillo */
  #js-product-list.loading > .contenedor-productos,
  #js-product-list.loading #contenedor-productos,
  #js-product-list.loading .products.contenedor-productos{opacity:1 !important;filter:none !important}
  #js-product-list.loading::before,#js-product-list.loading::after{display:none !important}
  /* bottom-sheet y backdrop sin animacion (aparicion instantanea).
     El selector del sheet replica la especificidad (2,1,3)/(1,2,3) del bloque 9
     para ganar a su propia transition !important. */
  html body#category #left-column > aside.sidebar,
  html body#search #left-column > aside.sidebar,
  html body#manufacturer #left-column > aside.sidebar,
  html body.page-category #left-column > aside.sidebar,
  html body.page-search #left-column > aside.sidebar,
  html body.page-manufacturer #left-column > aside.sidebar,
  html body#category.bk-sidebar-open #left-column > aside.sidebar,
  html body#search.bk-sidebar-open #left-column > aside.sidebar,
  html body#manufacturer.bk-sidebar-open #left-column > aside.sidebar,
  html body.page-category.bk-sidebar-open #left-column > aside.sidebar,
  html body.page-search.bk-sidebar-open #left-column > aside.sidebar,
  html body.page-manufacturer.bk-sidebar-open #left-column > aside.sidebar,
  .tic-sheet-back,
  #contenedorFiltros .filtroItem.filtroItem,
  #contenedorFiltros .filtroItem .filtroClose.filtroClose,
  .mobile-filter-menu #menu_filtros_movil{transition:none !important}
}

/* ---------- Tudetic 2026-07-13 (QA-D re-verify): backdrop del sheet de filtros ----------
   El header sticky (z-index 1021) tapaba el backdrop (z 94) y parte del contexto del
   sheet (z 96): tap real en el backdrop devolvia el header. Se elevan ambos por encima
   del header y por debajo del modal blockcart (~1055). Mismo patron que el sheet del carrito. */
@media (max-width:1000px){
  html body#category #left-column > aside.sidebar,
  html body#search #left-column > aside.sidebar,
  html body#manufacturer #left-column > aside.sidebar,
  html body.page-category #left-column > aside.sidebar,
  html body.page-search #left-column > aside.sidebar,
  html body.page-manufacturer #left-column > aside.sidebar{z-index:1030 !important}
  .tic-sheet-back{z-index:1029}
}