/* ═══════════════════════════════════════════════════════════════════════
 * likes.css — botón de «me gusta» (.lk-*)
 *
 * Dos variantes del mismo botón:
 *   .lk-btn            → sobre la foto de una tarjeta (abajo-derecha: las otras
 *                        tres esquinas ya las ocupan el badge de oferta, el de
 *                        tipo y el chip de categoría)
 *   .lk-btn--inline    → en la ficha del producto, en línea con los datos
 *
 * Usa SOLO los tokens de tokens.css.
 * ═══════════════════════════════════════════════════════════════════════ */

.lk-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #e4e4e7;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}

.lk-btn:hover { background: rgba(32, 32, 36, 0.88); }
.lk-btn:active { transform: scale(0.94); }
.lk-btn:focus-visible { outline: 2px solid var(--purple, #a855f7); outline-offset: 2px; }

/* Área táctil: el botón es pequeño a propósito (va encima de la foto), pero en
   un celular 31×21 px se falla al pulsar. Este anillo transparente agranda la
   zona que responde al dedo sin cambiar el aspecto ni tapar la foto. */
.lk-btn::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: inherit;
}

.lk-btn svg { width: 13px; height: 13px; display: block; flex-shrink: 0; }
.lk-btn .lk-n { min-width: 7px; text-align: center; font-variant-numeric: tabular-nums; }
/* Mientras no se sabe el número real, el hueco no se ve a medias. */
.lk-btn .lk-n:empty { display: none; }

/* Puesto: corazón relleno y en su color. */
.lk-btn.lk-on {
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.45);
  background: rgba(42, 12, 22, 0.82);
}
.lk-btn.lk-on svg { fill: currentColor; }

/* Mientras viaja la petición: sin doble clic y sin parpadeo. */
.lk-btn.lk-cargando { opacity: .55; pointer-events: none; }

/* Variante en línea (ficha del producto): sin posición absoluta. */
.lk-btn--inline {
  position: static;
  padding: 5px 11px;
  font-size: 12px;
  background: var(--white-5, rgba(255, 255, 255, 0.05));
  border-color: var(--border, #27272a);
  color: var(--text, #fafafa);
}
.lk-btn--inline:hover { background: var(--white-10, rgba(255, 255, 255, 0.1)); }
.lk-btn--inline svg { width: 15px; height: 15px; }
.lk-btn--inline.lk-on {
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.45);
  background: rgba(251, 113, 133, 0.12);
}

/* En la vista de lista la foto es una columna estrecha: el botón se estrecha
   para no tapar el título. */
.explorar-grid.list-view .lk-btn .lk-n,
.products-grid.list-view .lk-btn .lk-n { display: none; }

/* Fila del botón en la ficha del producto. */
.pd-like-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* Mientras no se sabe el número real (aún sin respuesta), el hueco no deja el
   botón a medias. */
.lk-btn[data-like-pendiente] .lk-n { display: none; }