/* ══════════════════════════════════════════════════════════════ Guest wishlist drawer (cajón de favoritos para invitados) El JS (nappy-guest-wishlist.js) mueve #_desktop_wishlist-content a y alterna la clase .show para abrir/cerrar. Replica EXACTAMENTE el comportamiento del cajón del carrito (#_desktop_blockcart-content): overlay fijo a pantalla completa con fondo difuminado + panel lateral derecho de 460px, que pasa a ancho completo en móvil/tablet (≤991px). Igual en escritorio y en móvil. ══════════════════════════════════════════════════════════════ */ /* ── Overlay: fijo a pantalla completa, oculto por defecto ── */ #_desktop_wishlist-content { --gwl-ink: #10233c; --gwl-soft: #5e738c; --gwl-accent: #0d8f8d; position: fixed; top: 0 !important; right: 0; bottom: 0; left: 0; inset: 0; width: 100vw; height: 100vh; height: 100dvh; margin: 0; background: radial-gradient(circle at 12% 18%, rgba(13, 143, 141, 0.16), transparent 38%), radial-gradient(circle at 88% 22%, rgba(255, 159, 74, 0.18), transparent 36%), rgba(10, 24, 45, 0.38); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transform: none !important; transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 10060; } #_desktop_wishlist-content.show { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Panel deslizante (lado derecho), igual que el carrito ── */ #_desktop_wishlist-content #wishlist-content { position: absolute; top: 0; right: 0; width: min(460px, 100vw); max-width: 100vw; min-width: 0; height: 100%; margin-left: auto; overflow: hidden; background: radial-gradient(circle at top right, rgba(13, 143, 141, 0.08), transparent 28%), linear-gradient(180deg, #f7fbfd 0%, #ffffff 22%, #f7f9fc 100%); border-left: 1px solid rgba(15, 33, 69, 0.1); border-radius: 28px 0 0 28px; box-shadow: -32px 0 70px rgba(15, 33, 69, 0.22); padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } /* ── Estructura interna (flex column → footer abajo) ── */ #_desktop_wishlist-content .tig-cart-drawer, #_desktop_wishlist-content .popup-fly-cart, #_desktop_wishlist-content .popup-fly-cart > .inner, #_desktop_wishlist-content .fly-cart-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; color: var(--gwl-ink); } #_desktop_wishlist-content .popup-fly-cart > .inner { position: relative; background: transparent; box-shadow: none; } #_desktop_wishlist-content .fly-cart-wrap { overflow: hidden; } #_desktop_wishlist-content .fly-cart-content { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; } /* ── Botón cerrar ── */ #_desktop_wishlist-content .btn-close-fly-cart { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 22px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #0f2145; font-size: 1.125rem; line-height: 1; box-shadow: none; cursor: pointer; } /* ── Cabecera ── */ #_desktop_wishlist-content .tig-cart-drawer__header { flex: 0 0 auto; margin: 0; padding: max(28px, env(safe-area-inset-top)) 22px 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 253, 0.94) 100%); border-bottom: 1px solid rgba(15, 33, 69, 0.08); } #_desktop_wishlist-content .tig-cart-drawer__title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--gwl-ink); } /* ── Cuerpo (única zona con scroll) ── */ #_desktop_wishlist-content .fly-cart-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 22px; } /* ── Estado vacío ── */ #_desktop_wishlist-content .tig-cart-drawer__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 16px; list-style: none; color: var(--gwl-soft); } #_desktop_wishlist-content .tig-cart-drawer__empty-icon { font-size: 40px; color: var(--gwl-accent); } #_desktop_wishlist-content .tig-cart-drawer__empty .no-items { margin: 0; font-weight: 600; color: var(--gwl-ink); } /* ── Lista de productos ── */ #_desktop_wishlist-content #nappy-gwl-items { margin: 0; padding: 0; list-style: none; } #_desktop_wishlist-content .tig-cart-drawer__product-item { padding: 14px 0; border-bottom: 1px solid rgba(15, 33, 69, 0.08); } #_desktop_wishlist-content .tig-cart-product { display: flex; gap: 12px; align-items: flex-start; } #_desktop_wishlist-content .tig-cart-product__media img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; } #_desktop_wishlist-content .tig-cart-product__name { color: var(--gwl-ink); font-weight: 600; text-decoration: none; } #_desktop_wishlist-content .tig-cart-product__remove { margin-top: 6px; padding: 0; border: 0; background: transparent; color: #cf1927; font-size: 0.875rem; cursor: pointer; } /* ── Footer ── */ #_desktop_wishlist-content .tig-cart-drawer__footer { flex: 0 0 auto; padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(15, 33, 69, 0.08); background: #fff; } #_desktop_wishlist-content .tig-cart-drawer__buttons { display: grid; gap: 10px; } #_desktop_wishlist-content .tig-cart-drawer__buttons .btn { display: block; width: 100%; text-align: center; } #_desktop_wishlist-content .nappy-gwl-share-btn { width: 100%; margin-bottom: 10px; } #_desktop_wishlist-content .nappy-gwl-share-toast { align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(13, 143, 141, 0.1); color: var(--gwl-accent); font-size: 0.875rem; } /* ── Bloqueo de scroll del fondo cuando el cajón está abierto ── */ html.is-wishlist-locked, body.is-wishlist-locked { overflow: hidden !important; overscroll-behavior: none; height: 100vh !important; height: 100dvh !important; } /* ── Móvil/tablet: el panel ocupa todo el ancho (igual que el carrito) ── */ @media (max-width: 991px) { #_desktop_wishlist-content #wishlist-content { width: 100vw; border-left: 0; border-radius: 0; box-shadow: none; } } /* ══════════════════════════════════════════════════════════════ Toast de invitado "¡No pierdas tu lista de favoritos!" Oculto por defecto; el JS añade .nappy-gwl-show para mostrarlo. Sin este CSS aparecía siempre incrustado en la página. ══════════════════════════════════════════════════════════════ */ #nappy-gwl-toast { position: fixed; left: 50%; bottom: 24px; z-index: 10080; width: min(420px, calc(100vw - 32px)); transform: translate(-50%, 24px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } #nappy-gwl-toast[hidden] { display: none !important; } #nappy-gwl-toast.nappy-gwl-show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } #nappy-gwl-toast .nappy-gwl-toast-body { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 42px 16px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(15, 33, 69, 0.08); box-shadow: 0 18px 50px rgba(15, 33, 69, 0.22); } #nappy-gwl-toast .nappy-gwl-toast-icon { flex: 0 0 auto; font-size: 22px; color: #0d8f8d; } #nappy-gwl-toast .nappy-gwl-toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #nappy-gwl-toast .nappy-gwl-toast-text strong { color: #10233c; font-size: 0.95rem; line-height: 1.2; } #nappy-gwl-toast .nappy-gwl-toast-text span { color: #5e738c; font-size: 0.82rem; line-height: 1.3; } #nappy-gwl-toast .nappy-gwl-toast-actions { display: flex; flex: 0 0 auto; gap: 8px; } #nappy-gwl-toast .nappy-gwl-btn { padding: 8px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap; } #nappy-gwl-toast .nappy-gwl-btn-primary { background: #0d8f8d; color: #fff; } #nappy-gwl-toast .nappy-gwl-btn-secondary { background: rgba(13, 143, 141, 0.1); color: #0d8f8d; } #nappy-gwl-toast .nappy-gwl-toast-close { position: absolute; top: 8px; right: 10px; padding: 0; border: 0; background: transparent; color: #9aa7b8; font-size: 20px; line-height: 1; cursor: pointer; } @media (max-width: 575.98px) { #nappy-gwl-toast .nappy-gwl-toast-body { flex-wrap: wrap; } #nappy-gwl-toast .nappy-gwl-toast-actions { width: 100%; } #nappy-gwl-toast .nappy-gwl-btn { flex: 1 1 0; text-align: center; } }