/* D'Shop — tarjeta de producto y rejilla (inicio, colección, relacionados, deseos). */

.rejilla-productos { list-style: none; margin: 0; padding: 10px 12px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; column-gap: 10px; row-gap: 40px; }
@media (max-width: 1100px) { .rejilla-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 420px)  { .rejilla-productos { padding-inline: 8px; gap: 8px; row-gap: 24px; } }

.tarjeta { position: relative; }
.tarjeta__enlace { display: flex; flex-direction: column; color: var(--tinta); text-decoration: none; }
.tarjeta__foto { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 7; overflow: hidden; background: var(--fondo-suave); color: var(--lavanda); }
.tarjeta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.tarjeta__enlace:hover .tarjeta__foto img { transform: scale(1.03); }
.tarjeta__foto .marcador { width: min(120px, 34%); height: auto; }
.tarjeta__etiqueta { position: absolute; left: 14px; bottom: 12px; right: 14px; font-size: 11px; font-weight: 600; color: var(--tinta-suave); }

.tarjeta__datos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 22px 16px 0; }
.tarjeta__nombre { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tarjeta__enlace:hover .tarjeta__nombre { color: var(--morado); }
.tarjeta__precio { font-size: 13px; font-weight: 500; white-space: nowrap; }
.tarjeta__precio del { color: var(--tinta-suave); margin-right: var(--space-1); }
.tarjeta__precio ins { text-decoration: none; font-weight: 700; color: var(--morado); }
@media (max-width: 600px) { .tarjeta__datos { flex-direction: column; gap: 2px; padding: 14px 4px 0; } }

/* Insignias sobre la foto (Más vendido, Nuevo, -X %) */
.tarjeta__insignias { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; gap: var(--space-1); }

/* Corazón de lista de deseos */
.corazon { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--fondo); color: var(--morado); cursor: pointer; }
.corazon:hover { background: var(--lavanda-claro); }
.corazon.is-activo, .corazon[aria-pressed="true"] { background: var(--morado); color: var(--sobre-morado); }
.corazon.is-activo:hover { background: var(--morado-profundo); }
.corazon svg { pointer-events: none; }

.nota-foto { position: absolute; left: 20px; bottom: 16px; z-index: 1; font-size: 12px; font-weight: 600; }