/* ===== Tarjeta de producto estilo Best Buy (compu-product-card) ===== */
.compu-card{position:relative;background:#fff;border:.5px solid #dcdcdc;border-radius:12px;
  padding:12px;display:flex;flex-direction:column;height:100%}
.compu-card__badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.compu-card__badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:4px}
.compu-card__badge--new{background:#ffe000;color:#1d1d1d}
.compu-card__badge--off{background:#c2231f;color:#fff}
.compu-card__badge--top{background:#F5A300;color:#1d1d1d}
.compu-card__fav{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;
  border:.5px solid #dcdcdc;background:#fff;display:flex;align-items:center;justify-content:center}
/* El corazón usa el wishlist nativo de Woodmart (wrapper .wd-wishlist-btn). El botón real
   (.compu-card__fav) es absolute, así que el wrapper no debe ocupar espacio en el flujo. */
.compu-card .wd-wishlist-btn{position:static;display:block;height:0;margin:0;padding:0;border:0}
/* Woodmart escribe data-added-text dentro de este span al agregar; lo ocultamos para que
   NO se vea ningún mensaje sobre el corazón (sin el span, el JS reemplaza el SVG por texto). */
.compu-card__fav-txt{display:none}
/* Producto ya en la lista: Woodmart marca .added → corazón relleno rojo. */
.compu-card__fav.added{border-color:#f3c0bd}
.compu-card__fav.added svg{fill:#e53935;stroke:#e53935}

/* overflow:hidden = red de seguridad: ninguna imagen (ni una swap de lazyload con sizing propio)
   se sale del cuadro; object-fit:contain garantiza que se vea COMPLETA (sin recorte).
   padding:7% = AIRE interno: muchas fotos (las AOC de SYSCOM) vienen "a sangre" (el producto
   toca los 4 bordes); el padding las encoge un poco para que NO toquen el marco y se vean
   igual de respiradas que las de Icecat (que ya traen margen blanco). Es % para escalar
   con el ancho de la tarjeta (2 col móvil / 3 col desktop). */
.compu-card__imgwrap{position:relative;width:100%;height:0;padding-bottom:100%;display:block;overflow:hidden}
.compu-card__imgwrap img,.compu-card__img{position:absolute;inset:0;width:100%;height:100%;
  max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;padding:5%;box-sizing:border-box}

.compu-card__brand{display:flex;justify-content:space-between;align-items:center;height:26px;margin:6px 0 8px;gap:8px}
.compu-card__brandlogo{display:inline-flex;align-items:center;min-width:0}
.compu-card__brandlogo img{max-height:22px;width:auto;max-width:90px;object-fit:contain}
.compu-card__brandlogo span{font-size:13px;font-weight:500;letter-spacing:.5px;color:#00539b;text-transform:uppercase}
.compu-card__sku{font-size:11px;color:#8a8a8a;white-space:nowrap;flex:none;letter-spacing:.2px}

.compu-card__title{font-size:14px;line-height:1.35;margin:0 0 9px;color:#2b2b2b;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:57px}
.compu-card__title:hover{color:#0046be}

.compu-card__specs{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:9px 0;
  border-top:.5px solid #e6e6e6;border-bottom:.5px solid #e6e6e6;margin-bottom:9px}
.compu-card__spec{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#2b2b2b;min-width:0}
.compu-card__spec svg{flex:none}
.compu-card__spec span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.compu-card__pricetop{font-size:11px;color:#6a6a6a;margin-bottom:1px}
.compu-card__price{font-size:22px;font-weight:500;color:#1d1d1d}
.compu-card__list{font-size:13px;color:#6a6a6a;margin-left:8px}
.compu-card__list-pre{text-decoration:none}            /* "Regular" sin tachar */
.compu-card__list-amt{text-decoration:line-through}    /* solo el monto va tachado */

/* Ahorro + reloj en el mismo renglón (reloj DESPUÉS del ahorro). */
.compu-card__saverow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px}
.compu-card__save{font-size:12px;font-weight:500;color:#c2231f}
.compu-card__countdown{display:inline-flex;align-items:center;gap:5px;color:#c2231f;font-size:12px;font-weight:500}
.compu-card__countdown[hidden]{display:none}  /* reloj solo con oferta: respeta el atributo hidden */

.compu-card__delivery{border-top:.5px solid #e6e6e6;margin-top:10px;padding-top:9px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:6px}
.compu-card__deliv-row{display:flex;align-items:center;gap:7px;font-size:12px;color:#2b2b2b}
.compu-card__deliv-row b{font-weight:700}
.compu-card__free{color:#1a7f37}

/* Footer pegado al fondo (igual alto entre tarjetas): Agregar + Comparar EN LÍNEA (lado a lado). */
.compu-card__foot{margin-top:auto;display:flex;flex-direction:row;align-items:stretch;gap:8px;
  flex-wrap:wrap;row-gap:8px;padding-top:2px}
.compu-card__cta{flex:1 1 auto;background:#ffe000;color:#1d1d1d;border:.5px solid #e6c900;
  border-radius:6px;font-size:12px;font-weight:500;padding:8px 10px;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;text-decoration:none}
.compu-card__cta:hover{background:#ffd400}

/* Comparar: botón secundario (outline) al lado del Agregar. Usa el compare nativo de Woodmart. */
.compu-card__compare{flex:0 0 auto;display:flex}
.compu-card__compare a{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:12px;font-weight:500;color:#00539b;text-decoration:none;padding:8px 12px;
  border:.5px solid #cdd6e4;border-radius:6px;background:#fff;white-space:nowrap}
.compu-card__compare a:hover{border-color:#00539b;background:#f3f7fc}
.compu-card__compare svg{flex:none}
.compu-card__compare.added a,.compu-card__compare.wd-compare-added a{color:#1a7f37;border-color:#1a7f37}
.compu-card__noprice{font-size:18px;font-weight:700;color:#8a93a6}
.compu-card__cta--out{background:#ececec !important;color:#8a8a8a;border-color:#dcdcdc;cursor:not-allowed}
.compu-card__cta--quote{background:#fff;border-color:#dcdcdc}
.compu-card__cta--quote:hover{background:#f5f5f5}
/* Botón "Agregar" como AJAX nativo de WC: feedback mientras agrega (WC pone .loading,
   luego .added). Sin spinner propio para no chocar con el del tema. */
.compu-card__cta.loading{opacity:.7;pointer-events:none}
/* El side-cart de Woodmart ya ofrece "ir al carrito"; ocultamos el enlace "Ver carrito" que
   WC inyecta tras el botón, que de otro modo entra como 3er item flex y rompe el pie. */
.compu-card__foot a.added_to_cart{display:none}

/* ── Variante trim (home okdock): sin specs/entrega, título 2 líneas ── */
.compu-card--trim .compu-card__title{-webkit-line-clamp:2;min-height:38px}
.compu-card__badge--rank{background:#066CFF;color:#fff;border-radius:4px 0 8px 0;padding:4px 10px}

/* ===== Rejilla propia (refactor limpio) =====
   Sustituimos el TEMPLATE del item (no su wrapper), así que nuestras tarjetas son hijas
   directas de .wd-products y no hay markup nativo filtrándose. Definimos NOSOTROS la
   rejilla: en search Woodmart no resuelve --wd-col y colapsa a 1 columna. Esta hoja solo
   carga en nuestras superficies (search/categorías gated), así que el override es seguro. */
.wd-products.wd-grid-g{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important; /* tarjetas de igual alto → botón al fondo alineado */
}
@media (min-width:992px){ .wd-products.wd-grid-g{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }

/* ===== Sidebar de filtros sticky (la rejilla scrollea, el sidebar se queda) =====
   Selector CONFIRMADO: nuestra clase .compu-pc-sidebar va sobre .wd-sidebar.sidebar-container
   de Woodmart. El sidebar es MUY alto (todos los facets), así que se hace sticky con scroll
   interno propio. Ajustes:
   - overflow-x:hidden → mata el scroll horizontal (había 1px de overflow que generaba la barra
     de abajo, innecesaria).
   - scrollbar-gutter:stable + barra delgada → el scroll vertical NO pisa los controles
     (reserva su carril en vez de encimarse al contenido). */
@media (min-width:992px){
  .compu-pc-sidebar{position:sticky;top:var(--compu-pc-sticky-top,90px);align-self:flex-start;
    max-height:calc(100vh - var(--compu-pc-sticky-top,90px) - 16px);
    overflow-y:auto;overflow-x:hidden;
    scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#cdcdcd transparent}
  .compu-pc-sidebar::-webkit-scrollbar{width:8px}
  .compu-pc-sidebar::-webkit-scrollbar-thumb{background:#cdcdcd;border-radius:4px}
  .compu-pc-sidebar::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
  .compu-pc-sidebar::-webkit-scrollbar-track{background:transparent}
}

/* ===== Bloque Categorías en el sidebar (sustituye la franja negra del tema) =====
   Tipografía IGUALADA a los facets (medida computada en las dos marcas): los ítems de
   FacetWP traen Barlow por CSS propio del plugin, NO heredan --wd-text-font (que en la
   piel OK Dock es Poppins) → se fija Barlow aquí para que ambos bloques hagan juego con
   los filtros en las dos marcas. El TÍTULO sí hereda (= widget-title FILTROS, 16px/400).
   Viñeta: cuadro 14px con 6px de aire = geometría del checkbox.png de FacetWP (14px + 20
   de sangría); la opción vigente va rellena con el color de marca. */
.compu-pc-cats{margin:16px 0 22px;padding:0 10px 18px 0;border-bottom:1px solid #e5e5e5}
.compu-pc-cats__title{font-family:var(--wd-text-font,inherit);font-size:16px;font-weight:400;text-transform:uppercase;margin:0 0 10px;color:#000}
.compu-pc-cats__back{display:block;font-size:14px;margin:0 0 8px;color:#555}
.compu-pc-cats__back:hover{color:var(--wd-primary-color,#111)}
.compu-pc-cats__list{list-style:none;margin:0;padding:0;font-family:Barlow,var(--wd-text-font,sans-serif)}
/* Renglón = 25px como los facets (21 de línea + 4 de margen). El !important pisa el
   margin-bottom:10px que el tema aplica a los li del sidebar. */
.compu-pc-cats__list li{display:flex;align-items:flex-start;gap:6px;margin:0 0 4px!important;padding:0;font-size:15px;line-height:1.4}
/* Viñeta calcada del checkbox.png de FacetWP (colores muestreados del propio PNG):
   borde 1px #6d6d6d y degradado interior #fff→#ededed. La vigente va rellena con el
   color de marca conservando ese marco, como hace checkbox-on.png. */
.compu-pc-cats__list li::before{content:"";flex:0 0 14px;width:14px;height:14px;margin-top:3px;border:1px solid #6d6d6d;background:linear-gradient(180deg,#fff 0%,#f5f5f5 50%,#ededed 100%)}
.compu-pc-cats__list li.is-current::before{background:var(--wd-primary-color,#111)}
.compu-pc-cats__list li a{color:#000}
.compu-pc-cats__list li a:hover{color:var(--wd-primary-color,#111)}
.compu-pc-cats__list li:hover::before{border-color:var(--wd-primary-color,#111)}
.compu-pc-cats__list li.is-current>span:first-of-type{font-weight:700;color:var(--wd-primary-color,#111)}
.compu-pc-cats__count{color:#8a8a8a;font-size:13px;margin-left:auto;padding-left:8px;flex-shrink:0}

/* Bloque "Ordenar por" (reusa el look de Categorías; el aire superior lo da el bloque previo) */
.compu-pc-sort{margin-top:0}

/* H1 discreto sobre el listado (repone el título que vivía en la franja) */
.compu-pc-archive-title{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.compu-pc-archive-title h1{font-size:24px;font-weight:700;margin:0;color:#111}
.compu-pc-archive-title__count{color:#8a8a8a;font-size:14px}

/* ── Variante mini: la Deal del Día, hecha tarjeta reutilizable ──
   Replica el lenguaje visual de .deal-card (compustar-deals-del-dia): ~196px de ancho
   —6-7 por riel—, badge, imagen, título a 2 líneas, precio anterior tachado y "Ahorras $X".
   Diferencias pedidas: SIN barra de existencias, SIN "Ver oferta"; en su lugar el botón
   "Agregar" de siempre. Precio en negro, y en rojo SOLO cuando hay oferta.
   El ANCHO no se define aquí sino en el contenedor (compu-sp.css, .compu-rel__track):
   quien decide cuántas caben por riel es el riel, no la tarjeta. */
.compu-card--mini{padding:8px;border-radius:10px}
.compu-card--mini .compu-card__imgwrap{aspect-ratio:1/1}
.compu-card--mini .compu-card__title{font-size:13px;line-height:1.3;min-height:34px}
.compu-card--mini .compu-card__price,
.compu-card--mini .compu-card__noprice{font-size:18px}
.compu-card--mini .compu-card__list{font-size:11px;margin-left:6px}
.compu-card--mini .compu-card__save{font-size:11px}
.compu-card--mini .compu-card__saverow{gap:6px;margin-top:2px}
.compu-card--mini .compu-card__foot{padding-top:8px}
.compu-card--mini .compu-card__cta{font-size:11px;padding:7px 8px;gap:4px}

/* Oferta = en rojo. El gancho es .compu-card__list, que el PHP emite EXACTAMENTE cuando
   $on_sale — no hay que inventar otra bandera ni tocar el marcado (que debe seguir
   byte-idéntico en la variante default). Si un navegador no soporta :has(), el precio se
   queda negro: se pierde el énfasis, no la información. */
.compu-card--mini:has(.compu-card__list) .compu-card__price{color:#c2231f}

/* __pricetop ("Precio" / "Precio desde") sí se oculta aquí: la Deal del Día no lo trae, y
   cuando hay oferta el tachado y el "Ahorras $X" ya dicen que ese precio es promocional
   —con cifras, que es más claro que la palabra "desde". */
.compu-card--mini .compu-card__pricetop,
.compu-card--mini .compu-card__brand,
.compu-card--mini .compu-card__brandlogo,
.compu-card--mini .compu-card__sku,
/* El contador NO se muestra por tarjeta: son timers de 1s que se reprograman solos, y a
   6-7 tarjetas por riel × varias bandas se acumulan. card.js además ni los arranca en mini. */
.compu-card--mini .compu-card__countdown,
.compu-card--mini .compu-card__delivery,
.compu-card--mini .compu-card__deliv-row,
/* Comparar se va (el pie solo lleva "Agregar"); favoritos también, no cabe a este ancho. */
.compu-card--mini .compu-card__compare,
.compu-card--mini .compu-card__fav{display:none}
/* El corazón cuelga de .wd-wishlist-btn, clase NATIVA de Woodmart que reusamos para
   enganchar su JS. A diferencia del CTA y comparar —que quedan tapados porque su padre
   .compu-card__foot es clase nuestra— aquí no hay padre propio que proteja, y Woodmart
   puede tener reglas más específicas sobre su propia clase. Se oculta el contenedor y se
   encadena .compu-card para subir a 0-3-0 y ganarle a un 0-2-1 del tema. La regla de
   .compu-card__fav de arriba se deja como defensa en profundidad por si el marcado cambia. */
.compu-card.compu-card--mini .wd-wishlist-btn{display:none}