/* ===================== Sale toast — "คุณ xxx*** เพิ่งสั่งซื้อ" มุมล่างซ้าย (dark glass · ใช้ token ธีมของเว็บ) =====================
   token: --bg --card --line --text --muted · สร้างโดย assets/js/sale-toast.js (ข้อความทั้งหมดใส่ด้วย textContent)
   ตำแหน่ง: ปกติชิดมุมล่างซ้าย · มือถือ → ยกขึ้นเหนือเมนูล่าง */
.st{position:fixed;z-index:2900;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));
  width:min(270px,calc(100vw - 29px));display:flex;align-items:center;gap:9px;padding:7px 7px 7px 7px;
  border:1px solid var(--line);border-radius:16px;color:var(--text);
  background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 40px rgba(0,0,0,.45);animation:st-in .38s cubic-bezier(.2,.9,.3,1.15)}
.st.out{animation:st-out .22s ease forwards}

.st-img{flex:none;display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border-radius:11px;
  font-weight:700;font-size:0.9rem;color:var(--primary);background:var(--soft);border:1px solid var(--line)}
.st-img img{width:100%;height:100%;object-fit:cover;display:block}
.st-body{flex:1;min-width:0}
.st-who,.st-prod,.st-meta{margin:0}
.st-who{display:flex;align-items:center;gap:5px;font-size:0.684rem;line-height:1.4;color:var(--muted)}
.st-who span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-who b{font-weight:600;color:var(--text)}
.st-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:st-pulse 1.8s ease-out infinite}
.st-prod{margin-top:0;font-size:0.81rem;font-weight:700;line-height:1.35;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 9px;margin-top:2px;font-size:0.63rem;line-height:1.3;color:var(--muted)}
.st-meta span{display:inline-flex;align-items:center;gap:4px}
.st-meta svg{width:11px;height:11px;flex:none}
.st-ok{color:#22c55e;font-weight:600}
.st-x{flex:none;align-self:flex-start;display:grid;place-items:center;width:23px;height:23px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.st-x svg{width:13px;height:13px}
.st-x:hover{background:var(--card);color:var(--text)}
.st-x:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

html[data-theme="light"] .st{box-shadow:0 10px 28px rgba(20,22,28,.16)}

/* มือถือ: เมนูล่างลอยอยู่ (≤760px) → ยกขึ้นเหนือเมนู */
@media(max-width:760px){
  .st,  .st-img{width:36px;height:36px;border-radius:10px}
}

@keyframes st-in{from{opacity:0;transform:translateX(-25px) scale(.97)}}
@keyframes st-out{to{opacity:0;transform:translateX(-25px) scale(.97)}}
@keyframes st-pulse{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){.st,.st.out{animation:none!important}.st-dot{animation:none}}