/* --- Botón de corazón --- */ .am-wl-toggle { background: none; border: none; padding: 6px; cursor: pointer; line-height: 0; display: inline-flex; align-items: center; gap: 6px; color: #7a1f42; transition: transform .15s ease; } .am-wl-toggle:hover { transform: scale(1.12); } /* Se apunta a CUALQUIER svg dentro del botón, no solo al de nuestro propio marcado: así también funciona con un corazón que ya exista en la plantilla del tema, sin pedirle que cambie su HTML interno. */ .am-wl-toggle svg { transition: fill .18s ease, stroke .18s ease; } .am-wl-toggle .am-wl-heart svg { fill: none; stroke: currentColor; stroke-width: 1.8; } .am-wl-toggle.is-saved svg { fill: #ee7daa; stroke: #ee7daa; } .am-wl-toggle.is-busy { opacity: .55; pointer-events: none; } .am-wl-label { font-size: 13px; line-height: 1.2; } /* --- Lista de favoritos --- */ .am-wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 16px 0; } .am-wl-item { border: 1px solid #eee; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: #fff; } .am-wl-item-image img { width: 100%; height: auto; display: block; } .am-wl-item-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .am-wl-item-title { font-weight: 600; text-decoration: none; color: inherit; line-height: 1.3; } .am-wl-item-price { color: #7a1f42; } .am-wl-item-actions { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; } .am-wl-remove { background: none; border: none; color: #b32d2e; cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; } .am-wl-outofstock { color: #787c82; font-size: 13px; } .am-wl-empty { color: #666; padding: 20px 0; } @media (max-width: 480px) { .am-wl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } } /* --- Contenedores del botón automático --- */ .am-wl-single-wrap { margin: 12px 0; } .am-wl-loop-wrap { margin-top: 6px; } /* En el catálogo el corazón va discreto, alineado a la izquierda */ .am-wl-loop-wrap .am-wl-toggle { padding: 2px; } .am-wl-loop-wrap .am-wl-heart svg { width: 18px; height: 18px; } /* --- Aviso emergente (toast) --------------------------------------- Se monta al final del y va en position:fixed a propósito: el botón del corazón suele estar dentro de contenedores con overflow oculto o posicionamiento propio (por ejemplo, superpuesto sobre la imagen del producto), donde un aviso en línea quedaría cortado o invisible. */ .am-wl-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px); z-index: 99999; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 14px 22px; background: #111; color: #fff; font-size: 14px; line-height: 1.35; text-align: left; border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .am-wl-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); /* Imprescindible: sin esto el popup se ve pero es inerte, y sus enlaces no se pueden pulsar. */ pointer-events: auto; } .am-wl-toast__icon { flex: 0 0 auto; display: inline-flex; line-height: 0; } .am-wl-toast__icon svg { width: 18px; height: 18px; fill: #ee7daa; } .am-wl-toast--removed .am-wl-toast__icon svg { fill: none; stroke: #fff; stroke-width: 1.8; } .am-wl-toast--error .am-wl-toast__icon svg { fill: none; stroke: #ff9a9a; stroke-width: 1.8; } /* Se sube la especificidad y se marca !important porque los temas suelen quitar el subrayado a todos los enlaces de forma global. */ .am-wl-toast .am-wl-toast__link, .am-wl-toast .am-wl-toast__link:link, .am-wl-toast .am-wl-toast__link:visited { color: #fff !important; text-decoration: underline !important; text-underline-offset: 2px; white-space: nowrap; margin-left: 4px; cursor: pointer; } .am-wl-toast .am-wl-toast__link:hover, .am-wl-toast .am-wl-toast__link:focus { color: #ee7daa !important; text-decoration: underline !important; } @media (max-width: 600px) { .am-wl-toast { bottom: 20px; font-size: 13px; padding: 12px 18px; } } /* Respetar a quien prefiere menos animación */ @media (prefers-reduced-motion: reduce) { .am-wl-toast { transition: opacity .01s linear; transform: translateX(-50%); } .am-wl-toast.is-visible { transform: translateX(-50%); } }