@keyframes sp-in   { from { transform: translateX(-20px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-out  { from { opacity: 1; } to { opacity: 0; transform: translateX(-12px) scale(.96); } }
@keyframes sp-prog { from { width: 100%; } to { width: 0%; } }
@keyframes sp-dot  { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.6); } }

#mp-sales-popup {
    position: fixed;
    bottom: 80px;   /* clears fixed footer menubar */
    left: 14px;
    z-index: 1200;
    max-width: min(310px, calc(100vw - 28px));
    opacity: 0;
    pointer-events: none;
}
#mp-sales-popup.sp-show { pointer-events: all; animation: sp-in  .42s cubic-bezier(.34,1.56,.64,1) forwards; }
#mp-sales-popup.sp-hide {                       animation: sp-out .3s ease forwards; }

.sp-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    display: flex; align-items: stretch; position: relative;
    box-shadow: 0 8px 32px rgba(26,10,6,.15), 0 2px 8px rgba(26,10,6,.07);
    border: 1px solid #e8ddd6;
}
.sp-stripe {
    width: 5px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--accent,#d4546a), var(--accent-dk,#b8394f));
}

/* ── Thumbnail ───────────────────────────────────────────────── */
/* Emoji is always the background. Image fades in on top if it loads. */
.sp-thumb {
    width: 56px; height: 56px; flex-shrink: 0;
    margin: 11px 0 11px 10px;
    border-radius: 10px; overflow: hidden;
    background: #f7f1eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    position: relative;
}
.sp-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    display: block; opacity: 0; transition: opacity .28s;
}
.sp-thumb img.sp-img-ok  { opacity: 1; }   /* loaded → fade in */
.sp-thumb img.sp-img-err { display: none; } /* 404  → emoji shows */

/* ── Text ───────────────────────────────────────────────────── */
.sp-content { padding: 10px 28px 10px 10px; flex: 1; min-width: 0; }
.sp-eyebrow {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--accent,#d4546a);
    margin-bottom: 3px; display: flex; align-items: center; gap: 5px;
}
.sp-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent,#d4546a); animation: sp-dot 1.8s ease infinite;
}
.sp-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px; font-weight: 700; color: #1a0a06; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.sp-meta {
    font-size: 11px; color: #9b7c73; font-weight: 500;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.sp-city {
    display: inline-flex; align-items: center; gap: 3px;
    background: #f7f1eb; border-radius: 99px;
    padding: 2px 8px; font-size: 10.5px; font-weight: 700; color: #1a0a06;
}

/* ── Close button ───────────────────────────────────────────── */
.sp-close {
    position: absolute; top: 8px; right: 9px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #f2ece6; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #9b7c73; line-height: 1;
    -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.sp-close:hover { background: #e8ddd6; }

/* ── Progress bar ───────────────────────────────────────────── */
.sp-bar  { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #f2ece6; }
.sp-fill { height: 100%; background: var(--accent,#d4546a); opacity: .45; animation: sp-prog linear forwards; }