/* Favorites (Saved Homes) — Phase 2 flywheel item #12. Per _research/Favorites_Design_Spec_2026-06-04.md. Convention #15 byte-symmetric across the 3 listings-feed sites. Convention #91: lives in its own external sheet (not inline _CSS). */ /* ── Card heart (bottom-right overlay; mirrors .lst-card-compare which is top-left + .ldisc hide which is top-right — bottom-right is the collision-free corner on every surface). ── */ /* Self-contained positioning context: some sites' .lst-card is position:static (Goosebay/Avalon ddf-fragment.css), which would let the absolute heart escape to and stack at the viewport corner. Establish the context here so the heart sits in the card corner regardless of host CSS. No visual offset. */ .lst-card[data-mls] { position: relative; } .lst-card-fav { position: absolute; bottom: 8px; right: 8px; z-index: 20; width: 36px; height: 36px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .lst-card-fav svg { width: 20px; height: 20px; fill: none; stroke: #ffffff; stroke-width: 2; transition: fill 0.15s ease, stroke 0.15s ease; } .lst-card-fav:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.08); } .lst-card-fav:focus-visible { outline: 2px solid #EA002A; outline-offset: 2px; } .lst-card-fav.is-fav { background: #ffffff; border-color: #EA002A; } .lst-card-fav.is-fav svg { fill: #EA002A; stroke: #EA002A; } /* ── Detail-page Save button (explicit [data-fav-toggle]) ── */ .lst-fav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: transparent; color: #1a1a1a; border: 1.5px solid rgba(0, 0, 0, 0.25); border-radius: 999px; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .lst-fav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .lst-fav-btn:hover { border-color: #EA002A; color: #EA002A; } .lst-fav-btn:focus-visible { outline: 2px solid #EA002A; outline-offset: 2px; } .lst-fav-btn.is-fav { background: #EA002A; border-color: #EA002A; color: #ffffff; } .lst-fav-btn.is-fav svg { fill: #ffffff; stroke: #ffffff; } /* ── Account "Saved listings" section ── */ .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 8px; } .fav-card { position: relative; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease; } .fav-card:hover { transform: translateY(-2px); border-color: rgba(234, 0, 42, 0.4); } .fav-card-link { display: block; text-decoration: none; color: inherit; } .fav-card-img { position: relative; aspect-ratio: 1.5 / 1; background: linear-gradient(135deg, #1f1f1f, #121212); overflow: hidden; } .fav-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fav-card-img--imgfail::after { content: 'No Photo'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.2rem; } .fav-card-body { padding: 12px 14px 14px; } .fav-card-price { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.15rem; color: #ffffff; margin: 0 0 4px; } .fav-card-addr { font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); margin: 0 0 4px; line-height: 1.35; } .fav-card-meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); margin: 0; } .fav-card-note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); margin: 0 0 10px; } .fav-card--gone { background: #161616; } .fav-card--gone .fav-card-body { padding: 16px 14px; } .fav-card-remove { position: absolute; top: 8px; right: 8px; z-index: 5; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .fav-card--gone .fav-card-remove { position: static; width: auto; height: auto; border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; } .fav-card-remove:hover { background: #EA002A; border-color: #EA002A; } .fav-empty, .fav-loading { font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); margin: 6px 0 0; line-height: 1.5; } .fav-empty-heart { display: inline-flex; vertical-align: middle; } .fav-empty-heart svg { width: 16px; height: 16px; fill: #EA002A; stroke: #EA002A; stroke-width: 2; vertical-align: middle; }