/* Compu Single Product — diseño Claude Design (Barlow) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&family=Hanken+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

.compu-sp {
  --display: "Barlow Condensed", system-ui, sans-serif;
  --text-font: "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --paper:#fff; --paper-2:#f0f2f5;
  --ink:#16243b; --ink-2:#46536b; --ink-3:#8a93a6;
  --line:#e4e7ee; --line-2:#c9d0db;
  --red:#e0202a; --red-50:#fdeced; --cta:#e0202a; --cta-shadow:rgba(224,32,42,.3);
  --blue:#2563c9; --blue-ink:#1c4fa3; --blue-50:#eef4fd; --blue-line:#d3e2fa;
  --green:#167b4a; --green-50:#e4f3ec; --amber:#f5a623;
  --amarillo-bb:#fff200;     /* amarillo Best Buy — color universal del sitio */
  font-family: var(--text-font); color: var(--ink); font-size:15px; background:#fff;
}
.compu-sp *, .compu-sp *::before, .compu-sp *::after { box-sizing: border-box; }
.compu-sp h1,.compu-sp h2,.compu-sp h3,.compu-sp h4 { text-wrap: balance; }
.compu-sp p { text-wrap: pretty; }
.compu-sp img { max-width:100%; }

/* Layout principal */
/* Woodmart mete 40px de padding-top en su wrapper de contenido; lo recortamos
   (este CSS solo carga en la ficha nueva, no afecta otras páginas). */
.wd-content-layout { padding-top:14px !important; }
.compu-sp__main { max-width:1300px; margin:0 auto; padding:8px 24px 90px; }
.compu-sp__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(400px,452px); gap:44px; align-items:start; }
/* La columna izquierda (galería + características) acompaña el scroll y se detiene
   al llegar al final del grid (acordeón Especificaciones). El offset se calcula desde la
   altura REAL de la barra compacta site-wide #compu-headbar (variable --compu-headbar-h, la
   pone su JS) + 20px de holgura, para que la barra no pise el marco/badges de la galería.
   Fallback 92px si la variable aún no está. Antes 70px (header viejo de Woodmart). */
.compu-sp__left { position:sticky; top:calc(var(--compu-headbar-h, 72px) + 20px); align-self:start; }
.compu-sp__left > .compu-hl { margin-top:38px; }
.compu-sp__accordions { margin-top:48px; }

/* Migajas de pan */
.compu-sp .compu-breadcrumb { font-size:13px; color:var(--ink-3); margin-bottom:16px; line-height:1.5; }
.compu-sp .compu-breadcrumb a { color:var(--blue-ink); text-decoration:none; font-weight:500; }
.compu-sp .compu-breadcrumb a:hover { text-decoration:underline; }
.compu-sp .compu-breadcrumb__sep { color:var(--line-2); margin:0 8px; }
.compu-sp__related { margin-top:44px; }

/* Tablet/móvil: una columna, reordenado identidad → galería → compra → highlights */
@media (max-width:900px){
  .compu-sp__grid { display:flex; flex-direction:column; gap:26px; }
  /* Disuelve las columnas para que galería/highlights (izq) e identity/buybox (der)
     sean items DIRECTOS del flex y el `order` de abajo los reordene en móvil:
     header (identity) → galería → buybox → highlights. Sin esto, `order` no aplica
     (los bloques son nietos del flex, no items). */
  .compu-sp__left, .compu-sp__right { display:contents; }
  .compu-sp__identity { order:1; }
  .compu-sp__gallery  { order:2; max-width:480px; width:100%; margin:0 auto; }
  .compu-sp__buy      { order:3; }
  .compu-sp__left > .compu-hl { order:4; margin-top:0; }
  .compu-sp__main { padding:16px 16px 96px; }
}
@media (max-width:600px){
  .compu-sp { font-size:14px; }
  .compu-sp__gallery { max-width:none; }
}

/* Tipografía utilitaria */
.compu-display { font-family:var(--display); font-weight:800; }
.compu-mono { font-family:var(--mono); }
.compu-num { font-variant-numeric: tabular-nums; }

/* Badges */
.compu-badge { display:inline-block; white-space:nowrap; font-size:11.5px; font-weight:800; font-family:var(--display); padding:5px 11px; border-radius:6px; letter-spacing:.01em; margin-right:6px; }
/* `.compu-badge` fija display, que vence a la regla UA [hidden]{display:none}; lo restituimos
   para que el badge de descuento se oculte (server con pct=0, o JS al cambiar de almacén). */
.compu-badge[hidden], .compu-price__save[hidden], .compu-price__regular[hidden] { display:none !important; }
.compu-badge--red { background:var(--red-50); color:var(--red); }
.compu-badge--dark { background:var(--ink); color:#fff; }

/* Identidad */
.compu-id__brandline { display:flex; align-items:center; gap:10px; margin-bottom:8px; white-space:nowrap; }
.compu-id__brand { font-family:var(--text-font); font-weight:600; font-size:16px; letter-spacing:.01em; color:var(--ink-2); }
.compu-id__brandlogo { height:38px; width:auto; max-width:180px; object-fit:contain; display:block; }
.compu-id__line { font-size:13px; color:var(--ink-3); }
.compu-id__title { font-family:"Hanken Grotesk", var(--text-font); font-weight:700; font-size:25px; line-height:1.25; margin:0 0 10px; letter-spacing:-.005em; }
.compu-id__meta { font-size:12.5px; color:var(--ink-3); font-family:var(--mono); margin-bottom:14px; }
.compu-id__rating { display:flex; align-items:center; gap:9px; margin-bottom:4px; flex-wrap:wrap; }
.compu-id__sold { font-size:13px; color:var(--ink-3); }
/* Pocas piezas: el aviso pisa el gris apagado de la línea y se pone en rojo.
   El umbral lo decide identity.php (filtro compu_sp_low_stock_threshold). */
.compu-id__low { color:var(--red); font-weight:700; }
/* Agotado: mismo rojo que el aviso de pocas piezas. Solo cuando el producto de
   verdad no se puede comprar (is_in_stock), no cuando stock_total()=0 por un
   producto que no gestiona inventario — ahí la línea se queda sin sufijo. */
.compu-id__out { color:var(--red); font-weight:700; }

/* Estrellas */
.compu-stars { display:inline-flex; gap:2px; position:relative; line-height:0; }
.compu-stars__fill { position:absolute; inset:0; overflow:hidden; display:flex; gap:2px; white-space:nowrap; }

/* Galería */
.compu-gal { display:flex; gap:14px; }
.compu-gal__thumbs { display:flex; flex-direction:column; gap:8px; max-height:520px; overflow-y:auto; padding-right:2px; }
.compu-gal__thumb { padding:6px !important; border-radius:10px !important; cursor:pointer; background:#fff !important; border:1.5px solid var(--line); width:88px; height:88px; display:grid; place-items:center; overflow:hidden; flex-shrink:0; }
.compu-gal__thumb.is-active { border:2px solid var(--red); }
.compu-gal__thumb img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.compu-gal__stage { flex:1; position:relative; }
.compu-gal__main { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.compu-gal__frame { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:4px; }
.compu-gal__frame img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.compu-gal__nav { position:absolute !important; top:50%; transform:translateY(-50%); width:40px; height:40px; padding:0 !important; border-radius:999px !important; border:1px solid var(--line); background:rgba(255,255,255,.95) !important; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 10px rgba(22,36,59,.12); z-index:3; }
.compu-gal__nav--prev{ left:12px; right:auto; } .compu-gal__nav--next{ right:12px; left:auto; }
.compu-gal__badges { position:absolute; top:14px; left:14px; z-index:4; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.compu-gal__badges .compu-badge { background:var(--amarillo-bb) !important; color:var(--ink) !important; font-family:var(--text-font); font-weight:600; letter-spacing:0; box-shadow:0 1px 4px rgba(22,36,59,.18); }
@media (max-width:600px){ .compu-gal{ flex-direction:column-reverse; } .compu-gal__thumbs{ flex-direction:row; max-height:none; overflow-x:auto; } }

/* Highlights */
.compu-hl__title { font-family:var(--display); font-weight:800; font-size:22px; margin:0 0 18px; letter-spacing:-.01em; }
.compu-hl__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px; column-gap:28px; }
.compu-hl__item { display:flex; gap:13px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.compu-hl__icon { width:40px; height:40px; border-radius:10px; background:var(--paper-2); display:grid; place-items:center; flex-shrink:0; }
.compu-hl__label { font-size:12.5px; color:var(--ink-3); font-weight:600; }
.compu-hl__value { font-size:14.5px; font-weight:700; line-height:1.2; }

/* Precio / buy box */
.compu-price { margin-top:18px; }
.compu-price__row { display:flex; align-items:stretch; column-gap:18px; row-gap:8px; flex-wrap:wrap; }
.compu-price__cap { font-size:12.5px; color:var(--ink-3); font-weight:600; margin-bottom:0; }
.compu-price__amt { font-family:var(--display); font-weight:800; font-size:38px; letter-spacing:-.02em; line-height:1; }
.compu-price__sub { font-size:12.5px; color:var(--ink-3); margin-top:4px; }
.compu-price__save { color:var(--red); font-weight:800; font-size:14px; margin-top:0; }
.compu-price__regular { font-size:12.5px; color:var(--ink-3); margin-top:0; }
/* Cuenta regresiva de la oferta: entre "Ahorra" y "Precio regular".
   El texto lo escribe compu-sp.js (ver tickPromo); en PHP nace vacío y oculto. */
/* Sin margin-top: medido en la ficha, los huecos de este bloque van de -4.7 a
   -0.1px (los marca el line-height, no los márgenes). Un +2px aquí convertía a
   esta línea en el único renglón separado de la columna. */
/* tabular-nums: sin esto el contador sigue temblando aunque los números vayan a
   dos cifras, porque en las tipografías proporcionales el "1" es más angosto. */
/* La negrita volvió al acortarse el texto a "Termina en hh:mm:ss": con el texto
   largo esta línea era el elemento más ancho de la columna (229px) y su grosor
   decidía si la mensualidad cabía al lado; ya en 119px sobra espacio de sobra
   para permitírsela. */
.compu-price__promo { font-size:12.5px; color:var(--red); font-weight:700; font-variant-numeric:tabular-nums; }
.compu-price__regular .compu-num { text-decoration:line-through; }
.compu-price__mo { border-left:1px solid var(--line); margin-left:16px; padding-left:18px; display:flex; align-items:center; }
.compu-price__mo b { font-family:var(--display); font-weight:800; font-size:20px; color:var(--blue-ink); }
.compu-sp .compu-mo__link { display:block !important; max-width:160px; margin:0 !important; padding:0 !important; border:none !important; background:none !important; cursor:pointer; text-align:left !important; color:var(--ink-3) !important; font-weight:400 !important; font-size:12px !important; font-family:inherit !important; line-height:1.35 !important; letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important; box-shadow:none !important; width:auto !important; }
.compu-sp .compu-mo__link:hover { color:var(--ink-3) !important; text-decoration:underline !important; text-underline-offset:2px; }

/* Modal genérico (aviso de mensualidad estimada, etc.) */
.compu-modal { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; }
.compu-modal[hidden] { display:none; }
.compu-modal__overlay { position:absolute; inset:0; background:rgba(22,36,59,.55); animation:compu-fade .15s ease; }
.compu-modal__box { position:relative; width:100%; max-width:420px; background:#fff; border-radius:16px; padding:30px 26px 24px; box-shadow:0 18px 50px rgba(22,36,59,.3); animation:compu-pop .18s ease; }
.compu-sp .compu-modal__x { position:absolute !important; top:14px !important; right:14px !important; left:auto !important; width:34px !important; height:34px !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:none !important; background:none !important; box-shadow:none !important; cursor:pointer; color:var(--ink-3) !important; display:grid !important; place-items:center !important; border-radius:8px !important; }
.compu-sp .compu-modal__x:hover { background:var(--paper-2) !important; color:var(--ink) !important; }
.compu-sp .compu-modal__x svg { display:block; }
.compu-modal__title { font-family:var(--display); font-weight:800; font-size:19px; margin:0 0 14px; color:var(--ink); }
.compu-modal__body p { font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0 0 10px; }
.compu-modal__fine { font-size:11.5px !important; color:var(--ink-3) !important; margin-top:14px !important; margin-bottom:0 !important; }
/* Réplica del popup de Mercado Pago "meses sin tarjeta" — fuente sans neutra como la de MP */
.compu-mp-pop { text-align:center; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.compu-mp-pop__art { display:flex; justify-content:center; margin:2px 0 18px; }
.compu-mp-pop__art svg { width:200px; height:auto; }
.compu-mp-pop .compu-modal__title { font-family:inherit; text-align:center; font-weight:700; font-size:17px; line-height:1.32; margin:0 auto 22px; max-width:300px; color:#1a1a1a; }
.compu-mp-pop__steps { list-style:none; margin:0 0 20px; padding:0; text-align:left; display:grid; gap:18px; }
.compu-mp-pop__steps li { display:flex; gap:14px; align-items:flex-start; }
.compu-mp-pop__num { flex-shrink:0; width:26px; height:26px; border-radius:999px; border:1.5px solid var(--line-2); color:#666; display:grid; place-items:center; font-size:13px; font-weight:400; }
.compu-mp-pop__steps li > span:last-child { font-size:14px; line-height:1.45; color:#333; }
.compu-mp-pop__fine { font-size:13px; color:#999; line-height:1.5; margin:0 0 12px; }
.compu-mp-pop__help { font-size:13px; color:#999; margin:0; }
.compu-mp-pop__help a { color:#3483fa; text-decoration:none; }
.compu-mp-pop__help a:hover { text-decoration:underline; }
@keyframes compu-fade { from { opacity:0; } to { opacity:1; } }
@keyframes compu-pop { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.compu-mp { margin-top:14px; display:grid; gap:8px; }
.compu-mp__row { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--blue-line); background:var(--blue-50); border-radius:12px; }
.compu-mp__logo { width:36px; height:36px; display:grid; place-items:center; flex-shrink:0; }
.compu-mp__logo img { width:36px; height:36px; display:block; object-fit:contain; }

.compu-qty { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; flex-shrink:0; }
.compu-qty button { width:40px; height:44px; display:grid; place-items:center; border:none; background:none; cursor:pointer; }
.compu-qty span { min-width:32px; text-align:center; font-weight:800; font-size:16px; }

.compu-cta { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px !important; border-radius:13px !important; border:none !important; cursor:pointer; background:var(--amarillo-bb) !important; color:var(--ink) !important; font-weight:800; font-size:16px; font-family:var(--display); box-shadow:0 3px 10px rgba(22,36,59,.18) !important; width:100%; }
.compu-cta:hover { background:#ffe600 !important; color:var(--ink) !important; }
.compu-cta.is-added { background:var(--green) !important; color:#fff !important; }
.compu-cta:disabled, .compu-cta.is-disabled { background:var(--line) !important; color:var(--ink-3) !important; box-shadow:none !important; cursor:not-allowed; pointer-events:none; }
.compu-cta:disabled svg, .compu-cta.is-disabled svg { stroke:var(--ink-3) !important; }
.compu-cta.is-loading { opacity:.7; pointer-events:none; }
.compu-soldout { color:var(--red); font-weight:400; font-size:14px; }
.compu-qty.is-disabled { opacity:.5; pointer-events:none; }
.compu-cta-row { display:flex; gap:10px; margin-top:10px; }
.compu-cta-row button, .compu-cta-row .compu-action { flex:1; }
.compu-cta-row button,
.compu-cta-row .compu-action > a { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:11px; border:1.5px solid var(--line); background:#fff; color:var(--ink-2) !important; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none; line-height:1.2; }
.compu-cta-row .compu-action > a:hover { border-color:var(--line-2); color:var(--ink) !important; }
.compu-cta-row .compu-action > a.added { border-color:var(--red); color:var(--red) !important; }
.compu-cta-row .compu-action > a::before { content:none !important; }   /* sin icono del tema; usamos nuestro SVG */
.compu-cta-row .compu-action > a svg { stroke:currentColor !important; }   /* el icono hereda el color del texto (gris/hover/rojo .added) */

/* Tarjetas info */
.compu-info { margin-top:18px; display:grid; gap:10px; }
.compu-info__card { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); }
.compu-info__t { font-weight:700; font-size:14px; }
.compu-info__s { font-size:12.5px; color:var(--ink-3); }

/* Almacenes */
.compu-wh { margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.compu-wh__head { width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border:none; cursor:pointer; text-align:left; font-weight:700; font-size:14px; }
.compu-wh__row { display:flex; align-items:center; padding:11px 14px; border-top:1px solid var(--line); font-size:13.5px; cursor:pointer; }
.compu-wh__row input[type=radio] { margin:0 10px 0 0; accent-color:var(--red); flex-shrink:0; cursor:pointer; }
.compu-wh__row.is-selected { background:var(--red-50); }
.compu-qty__hint { font-size:12px; color:var(--ink-3); }
.compu-wh__name { font-weight:700; flex:1; }
.compu-wh__stock { display:inline-flex; align-items:center; gap:6px; color:var(--green); font-weight:700; margin-right:16px; }
.compu-wh__dot { width:7px; height:7px; border-radius:999px; background:var(--green); }
.compu-wh__price { font-weight:800; }

/* Acordeones */
.compu-acc { border-bottom:1px solid var(--line); scroll-margin-top:140px; }
.compu-acc__btn { width:100%; display:flex; align-items:center; gap:12px; padding:22px 2px !important; background:none !important; border:none !important; cursor:pointer; text-align:left; }
.compu-acc__btn h2 { font-family:var(--display); font-weight:800; font-size:21px; margin:0; flex:1; letter-spacing:-.01em; }
.compu-acc__count { color:var(--ink-3); font-weight:600; }
.compu-acc__body { padding-bottom:28px; }
.compu-acc__chev { transition:transform .2s; }
.compu-acc.is-open .compu-acc__chev { transform:rotate(180deg); }

/* Specs */
.compu-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.compu-specs__group { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.compu-specs__gtitle { padding:10px 16px; background:var(--paper-2); font-weight:700; font-size:13.5px; font-family:var(--display); }
.compu-specs table { width:100%; border-collapse:collapse; }
.compu-specs td { padding:9px 16px; font-size:13px; }
.compu-specs tr { border-top:1px solid var(--line); }
.compu-specs td:first-child { color:var(--ink-3); width:50%; vertical-align:top; }
.compu-specs td:last-child { font-weight:600; }

/* Features */
.compu-feat__desc { margin:0 0 22px; font-size:15px; color:var(--ink-2); line-height:1.6; max-width:760px; }
.compu-feat__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.compu-feat__card { padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.compu-feat__num { width:32px; height:32px; border-radius:8px; background:var(--red-50); color:var(--red); display:grid; place-items:center; font-family:var(--display); font-weight:800; margin-bottom:11px; }

/* Recorte "Ver más" (clamp) */
.compu-clamp__inner { position:relative; overflow:hidden; }
.compu-clamp__toggle { display:none; align-items:center; gap:6px; margin-top:14px; padding:8px 2px; background:none; border:none; cursor:pointer; color:var(--blue-ink); font-family:var(--display); font-weight:700; font-size:14px; }
.compu-clamp.is-clamped .compu-clamp__toggle { display:inline-flex; }
.compu-clamp.is-clamped:not(.is-expanded) .compu-clamp__inner::after { content:''; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events:none; }
.compu-clamp__chev { display:inline-flex; transition:transform .2s; }
.compu-clamp.is-expanded .compu-clamp__chev { transform:rotate(180deg); }

/* Reseñas */
.compu-rev { display:grid; grid-template-columns:minmax(220px,290px) 1fr; gap:32px; align-items:start; }
@media (max-width:900px){ .compu-rev{ grid-template-columns:1fr; gap:22px; } }
.compu-rev__summary { padding:22px; background:var(--paper-2); border-radius:16px; border:1px solid var(--line); }
.compu-rev__big { font-family:var(--display); font-weight:800; font-size:46px; line-height:1; }
.compu-rev__bar { flex:1; height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.compu-rev__barfill { height:100%; background:var(--amber); }
.compu-rev__empty { padding:28px; border:1px dashed var(--line-2); border-radius:16px; text-align:center; color:var(--ink-3); }

/* Q&A */
.compu-qa__item { padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:12px; }
.compu-qa__tag { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-weight:800; font-size:12px; flex-shrink:0; color:#fff; }
.compu-qa__item--pending { border-style:dashed; border-color:var(--line-2,#cdcdcd); background:var(--paper-2,#fafafa); }
.compu-qa__badge { font-size:11.5px; font-weight:700; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:999px; padding:3px 9px; white-space:nowrap; }
/* Formulario para preguntar */
.compu-qa__form { margin-top:18px; }
.compu-qa__flabel { display:block; font-weight:700; font-size:14.5px; margin-bottom:8px; }
.compu-qa__frow { display:flex; gap:10px; align-items:flex-start; }
.compu-qa__input { flex:1; min-height:46px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:14px; font-family:inherit; resize:vertical; background:#fff; }
.compu-qa__input:focus { outline:none; border-color:var(--ink); }
.compu-qa__send { display:inline-flex; align-items:center; gap:7px; padding:0 18px; height:46px; border:1px solid var(--ink); border-radius:12px; background:var(--amarillo-bb,#FFF200); color:var(--ink); font-family:var(--display); font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; }
.compu-qa__send:hover { filter:brightness(.97); }
.compu-qa__send:disabled { opacity:.55; cursor:default; }
.compu-qa__note { margin:10px 0 0; font-size:13px; }
.compu-qa__note.is-ok { color:#1a7f37; }
.compu-qa__note.is-err { color:var(--red,#c0392b); }
@media (max-width:480px){ .compu-qa__frow { flex-direction:column; } .compu-qa__send { width:100%; justify-content:center; } }

/* Relacionados */
.compu-rel__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; }
.compu-rel__title { font-family:var(--display); font-weight:800; font-size:22px; margin:0; letter-spacing:-.01em; }
.compu-rel__nav { display:flex; gap:8px; flex-shrink:0; }
.compu-rel__arrow { width:38px; height:38px; padding:0; border:1.5px solid var(--line-2) !important; border-radius:50%; background:#fff !important; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s, opacity .15s; }
.compu-rel__arrow svg { stroke:var(--ink) !important; display:block; width:18px !important; height:18px !important; flex:none; }   /* el tema pisa color y colapsa el ancho del svg → forzamos stroke y tamaño */
.compu-rel__arrow:hover { border-color:var(--ink) !important; }
.compu-rel__arrow[disabled] { opacity:.35; cursor:default; border-color:var(--line) !important; }

/* Track: 4 visibles, scroll-snap horizontal, 8 productos */
.compu-rel__track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.compu-rel__track::-webkit-scrollbar { display:none; }
.compu-rel__card { flex:0 0 calc((100% - 48px) / 4); scroll-snap-align:start; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.compu-rel__card:hover { border-color:var(--line-2); box-shadow:0 6px 18px rgba(22,36,59,.07); }

/* Espacio cuadrado garantizado (padding-bottom:100%) + imagen en absoluto.
   Usamos absoluto para que el tema (Woodmart fuerza height:auto) no pueda estirar el cuadrado. */
.compu-rel__imgwrap { position:relative; width:100%; height:0; padding-bottom:100%; }
.compu-rel__imgwrap img {
  position:absolute; top:16px; left:16px;
  width:calc(100% - 32px) !important; height:calc(100% - 32px) !important;
  max-width:none !important; max-height:none !important;
  object-fit:contain; mix-blend-mode:multiply;
}

.compu-rel__body { padding:0 16px 16px; display:flex; flex-direction:column; flex:1; gap:10px; }
.compu-rel__name { font-size:13.5px; color:var(--ink); line-height:1.4; font-weight:600; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; min-height:76px; }
.compu-rel__price { font-size:20px; margin-top:auto; }

@media (max-width:1024px){ .compu-rel__card { flex-basis:calc((100% - 32px) / 3); } }
@media (max-width:768px){ .compu-rel__card { flex-basis:calc((100% - 16px) / 2); } }
@media (max-width:480px){ .compu-rel__card { flex-basis:78%; } .compu-rel__nav { display:none; } }

/* Tarjeta rica del listado (compu-product-card) dentro del carrusel: ítem flex que mantiene
   las DIMENSIONES ORIGINALES vía min-width. Objetivo 4 por vista (flex-basis 1/4); si a ese
   ancho la tarjeta quedaría más angosta que el original, el min-width la conserva y entonces
   se ven 3 + una fracción de la 4ª (señal de que hay más). */
.compu-rel__track > .compu-card {
  flex:0 0 calc((100% - 48px) / 4); min-width:248px; scroll-snap-align:start;
  /* card.css pone height:100% (sirve en el grid del listado); en este flex track con altura
     auto haría que cada tarjeta tomara la altura de su contenido (desalineadas). height:auto
     reactiva align-items:stretch → todas a la altura de la más alta; el foot (margin-top:auto)
     alinea los botones abajo. */
  height:auto;
}
@media (max-width:480px){
  .compu-rel__track > .compu-card { flex-basis:82%; min-width:0; }
}
/* La variante mini es angosta a propósito: 196px = el mismo ancho de la Deal del Día, que
   da 6-7 por riel en escritorio. Va DESPUÉS de las reglas de arriba (misma especificidad,
   gana la última) y también después de su media query, o en móvil el 82% se la comería. */
.compu-rel__track > .compu-card--mini { flex:0 0 196px; min-width:160px; max-width:210px; }
@media (max-width:480px){
  .compu-rel__track > .compu-card--mini { flex-basis:45%; min-width:0; }
}

/* Sticky bar */
.compu-sticky { position:fixed; left:0; right:0; bottom:0; z-index:45; transform:translateY(calc(110% + var(--compu-sticky-off,0px))); transition:transform .3s ease; background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(22,36,59,.1); }
.compu-sticky.is-show { transform:translateY(0); }
.compu-sticky__inner { max-width:1300px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:16px; }

/* Disponibilidad (Pickup / Envío) */
.compu-avail { margin-top:20px; }
.compu-avail__title { font-weight:800; font-size:14px; color:var(--ink); margin-bottom:10px; }
.compu-avail__cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compu-avail__card {
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-auto-rows:min-content;
  gap:2px 10px; align-items:start; padding:14px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer; transition:border-color .15s;
}
.compu-avail__card:hover { border-color:var(--line-2); }
/* Seleccionado = mismo lenguaje azul que el globo MP y el hermano actual (compu-sib is-current):
   sombreado --blue-50 + borde --blue, para que "esto es lo elegido" se lea igual en toda la ficha. */
.compu-avail__card.is-selected { border-color:var(--blue); background:var(--blue-50); }
.compu-avail__card input { position:absolute; opacity:0; pointer-events:none; }
.compu-avail__ico { grid-row:1 / span 1; grid-column:1; color:var(--ink); }
.compu-avail__kind { grid-row:1; grid-column:2; align-self:center; font-weight:700; font-size:13.5px; color:var(--ink); }
.compu-avail__cap  { grid-column:1 / -1; font-size:12px; color:var(--ink-3); margin-top:8px; }
.compu-avail__date { grid-column:1 / -1; font-weight:800; font-size:14px; color:var(--blue); }
/* Lista desplegable de tienda de pickup (Compustar / OK.DOCK) */
.compu-avail__store-select {
  grid-column:1 / -1; margin-top:8px; width:100%; padding:7px 28px 7px 10px;
  border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:12.5px; color:var(--ink); line-height:1.2;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
.compu-avail__store-select:hover { border-color:var(--line-2); }
.compu-avail__store-select:focus { outline:none; border-color:var(--ink); }
/* Nudge "opción más rápida": texto clicable (sin fondo) bajo las tarjetas.
   !important blinda contra el CSS de <button> de Woodmart (fondo gris #f3f3f3 + MAYÚSCULAS). */
.compu-avail__faster {
  display:flex; align-items:center; gap:6px; width:100%; margin-top:10px;
  padding:2px 0 !important; border:0 !important; background:none !important;
  box-shadow:none !important; text-transform:none !important; letter-spacing:normal !important;
  font-family:inherit; font-size:13.5px !important; font-weight:600; line-height:1.3;
  color:var(--ink); text-align:left; cursor:pointer;
}
.compu-avail__faster[hidden] { display:none; }
.compu-avail__faster-ico { display:flex; color:var(--blue); flex:0 0 auto; }
.compu-avail__faster-txt { flex:1 1 auto; line-height:1.3; }
.compu-avail__faster-txt b { color:var(--blue); font-weight:800; }
.compu-avail__faster:hover .compu-avail__faster-txt b { text-decoration:underline; }
@media (max-width:480px){ .compu-avail__cards { grid-template-columns:1fr; } }

/* ---- Kueski Pay (financiamiento, bloque separado bajo MP) ---- */
.compu-kueski { margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#f7f8fa; }
.compu-kueski__row { display:flex; gap:11px; align-items:center; }
.compu-kueski__logo { width:64px; height:auto; flex:0 0 auto; }
.compu-kueski__body { flex:1; min-width:0; }
.compu-kueski__title { font-weight:800; font-size:14px; color:var(--ink); }
.compu-kueski__sub { font-size:12.5px; color:var(--ink-2); }
.compu-kueski__widget { display:block; }
/* Cuando el widget oficial ya pintó, ocultamos el fallback estático. */
.compu-kueski.is-ready .compu-kueski__fallback { display:none; }

/* ===== Compare (compu-cmp) ===== */
.compu-cmp{max-width:1180px;margin:0 auto;padding:8px 0 40px;font-family:var(--text-font)}
.compu-cmp__empty{max-width:1180px;margin:40px auto;padding:32px;text-align:center;color:var(--ink-2);
  border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.compu-cmp__bar{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.compu-cmp__toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--paper);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.compu-cmp__toggle[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.compu-cmp__count{font-size:13px;color:var(--ink-2)}
.compu-cmp__clear{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--paper);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer}
.compu-cmp__clear:hover{color:var(--red);border-color:var(--red-50);background:var(--red-50)}
/* Woodmart pisa los <button> con fondo gris + padding + position → blindar con !important. */
.compu-cmp__remove{position:absolute !important;top:6px !important;right:6px !important;left:auto !important;
  width:26px !important;height:26px !important;min-width:0 !important;display:inline-flex !important;align-items:center;
  justify-content:center;border:1px solid var(--line) !important;background:var(--paper) !important;border-radius:50% !important;
  color:var(--ink-3) !important;cursor:pointer;padding:0 !important;margin:0 !important;box-shadow:none !important;line-height:1 !important;z-index:2}
.compu-cmp__remove:hover{color:var(--red) !important;border-color:var(--red) !important;background:var(--red-50) !important}
.compu-cmp__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.compu-cmp__table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.compu-cmp__table th,.compu-cmp__table td{text-align:center;vertical-align:middle;padding:11px 12px;
  border-bottom:1px solid var(--line)}
.compu-cmp__attr{position:sticky;left:0;z-index:1;background:var(--paper);text-align:left;color:var(--ink-2);
  min-width:150px;max-width:200px}
.compu-cmp__head{min-width:160px;font-weight:400;vertical-align:top;position:relative}
.compu-cmp__img{display:block;height:84px;margin:0 auto 8px}
.compu-cmp__img img{height:84px;width:auto;object-fit:contain;margin:0 auto}
.compu-cmp__name{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  font-family:"Hanken Grotesk", var(--text-font) !important;font-weight:700;color:var(--ink);font-size:16.5px;
  line-height:1.32;letter-spacing:-.005em;margin-bottom:8px;text-decoration:none;text-transform:none !important}
.compu-cmp__name:hover{text-decoration:underline}
.compu-cmp__price{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.compu-cmp__add{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:10px;
  background:var(--cta);color:#fff;font-weight:800;font-size:12px;padding:8px 12px;cursor:pointer;width:100%;justify-content:center}
.compu-cmp__add:hover{filter:brightness(.96)}
.compu-cmp__soldout{display:inline-block;font-size:12px;font-weight:800;color:var(--red)}
.compu-cmp__grouprow td{background:var(--paper-2);text-transform:uppercase;letter-spacing:.04em;
  font-size:11px;font-weight:800;color:var(--ink-2);text-align:left;padding:8px 12px}
.compu-cmp__row.is-diff td{background:rgba(245,166,35,.09)}
.compu-cmp__row.is-diff .compu-cmp__attr{background:#fdf3df}
.compu-cmp__cell.is-winner .compu-cmp__val{font-weight:800}
.compu-cmp__best{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:11px;font-weight:800;
  color:var(--green);background:var(--green-50);border-radius:7px;padding:1px 7px;white-space:nowrap}
.compu-cmp--diffonly [data-cmp-row][data-diff="0"]{display:none}
@media(max-width:600px){
  .compu-cmp__head{min-width:130px}
  .compu-cmp__img,.compu-cmp__img img{height:60px}
}


/* ── Hermanos (familias de color/capacidad) ─────────────────────────── */
.compu-sib { margin-top:14px; }
.compu-sib__cap { font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:8px; }
.compu-sib__row { display:flex; flex-wrap:wrap; gap:8px; }
.compu-sib__item { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; width:76px; padding:6px 4px 5px; border:1.5px solid var(--line); border-radius:10px; background:#fff; text-decoration:none; }
a.compu-sib__item:hover { border-color:var(--blue); }
.compu-sib__item.is-current { border-color:var(--blue); background:var(--blue-50); }
/* grid-template 100%/100% hace DEFINIDA el área (con place-items solo, la fila implícita
   se dimensiona por contenido y max-height:100% se ignora → la imagen desbordaba la caja). */
.compu-sib__thumb { width:56px; height:56px; display:grid; grid-template:100%/100%; place-items:center; overflow:hidden; }
.compu-sib__thumb img { width:100%; height:100%; object-fit:contain; }
/* Hasta 2 renglones con … (line-clamp); el precio va aparte y siempre remata la tarjeta. */
.compu-sib__label { font-size:11px; line-height:1.15; font-weight:600; color:var(--ink-2); text-align:center; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:break-word; }
.compu-sib__price { font-size:11.5px; font-weight:800; color:var(--ink); margin-top:auto; }
.compu-sib__item.is-current .compu-sib__label, .compu-sib__item.is-current .compu-sib__price { color:var(--blue-ink); }
.compu-sib__item.is-out .compu-sib__thumb { filter:grayscale(1); opacity:.55; }
.compu-sib__soldout { position:absolute; top:2px; right:2px; font-size:9px; font-weight:700; color:#fff; background:var(--ink-3); border-radius:6px; padding:1px 4px; }

/* Crear familia (solo admins, en la barra de Comparar) */
.compu-cmp__family{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--blue-line);background:var(--blue-50);color:var(--blue-ink);border-radius:9px;padding:8px 13px;font-family:var(--display);font-weight:700;font-size:13.5px;cursor:pointer}
.compu-cmp__family:hover{border-color:var(--blue)}
.compu-cmp__family:disabled{opacity:.55;cursor:default}

/* Bandas de categorías accesorias: se apilan bajo "Productos relacionados", cada una
   con su encabezado y su riel. Heredan todo el estilo de .compu-rel__*. */
.compu-sp__bundles{display:flex;flex-direction:column;gap:28px;margin-top:28px}
/* El riel nace vacío y se llena por REST: se reserva una altura aproximada por variante
   para que al llegar el primer lote no empuje lo que está debajo. Son valores tentativos,
   se afinan midiendo el alto real de la tarjeta en staging. Si la banda no trae nada, la
   sección entera se borra y el espacio reservado se va con ella. */
[data-rel-variant="full"] .compu-rel__track{min-height:340px}
[data-rel-variant="trim"] .compu-rel__track{min-height:250px}
[data-rel-variant="mini"] .compu-rel__track{min-height:330px}
.compu-cmp__familymsg{font-size:12.5px;color:var(--blue-ink);font-weight:600}