/**
 * MÓDULO «ME GUSTA».
 *
 * ⚠⚠ TODO BAJO `.mod-megusta` / `.mg-*`. Este CSS se carga DESPUÉS del tema y
 * de la capa común: una regla suelta sobre `button` o `form` descuadraría el
 * checkout de cualquier tienda que instale el módulo.
 *
 * ⚠ Y ni un color de marca cableado: el corazón hereda `currentColor` del
 * sitio donde caiga, así que se ve bien en los seis temas sin que el módulo
 * sepa de ninguno. Solo el estado MARCADO pone color propio, porque un
 * «guardado» tiene que distinguirse a un metro.
 */

/* El botón vive dentro de la tarjeta, arriba a la derecha.
   ⚠⚠ `z-index: 4` NO ES DECORATIVO. En el tema `escaparate` el nombre del
   producto se estira por todo el azulejo con un `::after` (z-index 1) para que
   se pueda pulsar en cualquier sitio, y el botón de compra rápida ya usa 3.
   Sin subir por encima, el clic en el corazón se lo lleva el enlace y navega a
   la ficha: parece que el corazón no funciona. */
.mod-megusta {
  position: absolute; top: .55rem; right: .55rem; z-index: 4; margin: 0;
}

/* ⚠ La tarjeta tiene que ser el bloque contenedor, y no todos los temas la
   declaran `relative`. Se pone aquí, con `:where()` para especificidad CERO:
   si un tema ya la posiciona (o la quiere `static`), manda el tema. */
:where(.tarjeta, .azulejo) { position: relative; }

.mg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 40 px: por debajo de 44 solo porque va sobre una foto y no puede comérsela;
     sigue por encima del mínimo de 24×24 de la WCAG 2.5.8. */
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .82);
  color: #1b1c1c;
  backdrop-filter: blur(3px);
  transition: background .15s, transform .12s;
}
.mg-btn:hover { background: #fff; }
.mg-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Marcado: relleno y color propio. El SVG lleva `stroke="currentColor"` y
   `fill="none"`, así que basta con rellenarlo aquí — nada de un segundo icono
   ni de cambiar el HTML al pulsar. */
.mg-btn.mg-puesto { color: #c0392b; }
.mg-btn.mg-puesto .mg-icono { fill: currentColor; }

/* ⚠ El salto solo al MARCAR, y nunca con `prefers-reduced-motion`. Un rebote
   al quitar celebra justo lo contrario de lo que ha pasado. */
@media (prefers-reduced-motion: no-preference) {
  .mg-btn.mg-puesto { animation: mg-late .28s ease; }
}
@keyframes mg-late {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* En la ficha el corazón NO flota sobre la foto: va en línea, al lado del
   botón de comprar, donde se lee como una acción más y no como un adorno. */
.ficha-datos .mod-megusta { position: static; margin: 0; }
.ficha-datos .mg-btn {
  width: auto; height: auto; padding: .6rem .9rem; gap: .45rem;
  border-radius: 999px; background: transparent;
  border: 1px solid currentColor; font: inherit; font-size: .9rem;
}
.ficha-datos .mg-btn::after { content: attr(data-mg-poner); }
.ficha-datos .mg-btn.mg-puesto::after { content: attr(data-mg-quitar); }
/* ⚠ Con el rótulo en el `::after`, el `.sr` de dentro se leería DOS veces con
   lector de pantalla. Se esconde solo aquí, donde hay texto visible. */
.ficha-datos .mg-btn .sr { display: none; }

/* ── La página de guardados ─────────────────────────────────────────────── */
.mod-megusta-lista .mg-aviso,
.mod-megusta-lista .mg-vacia { margin: .8rem 0 1.4rem; }
/* ⚠ `[hidden]` no puede contra un `display` declarado: si algún tema le
   pusiera uno a estos párrafos, seguirían viéndose. Se blinda. */
.mod-megusta-lista .mg-vacia[hidden] { display: none; }
.mod-megusta-lista .mg-ficha { display: contents; }