/* ===== 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__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}

/* ===== 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}
}