/* scorpi.css — minimal, restyle into your crystal aesthetic. Include after your main CSS. */
.scorpi-title{font-weight:700;margin:18px 0 10px;font-size:16px}
.scorpi-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.scorpi-card{flex:0 0 128px;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:8px;background:#fff;transition:.15s}
.scorpi-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.scorpi-card img{width:100%;height:96px;object-fit:contain;margin-bottom:6px}
.scorpi-name{font-size:12px;line-height:1.3;height:32px;overflow:hidden}
.scorpi-price{font-weight:800;margin-top:4px}

/* Scorpi nudge — floating card, bottom corner (RTL: bottom-left) */
.scorpi-nudge{position:fixed;bottom:20px;inset-inline-start:20px;z-index:9999;max-width:340px;
  background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;gap:10px;animation:scorpiIn .3s ease}
@keyframes scorpiIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.scorpi-avatar{font-size:26px;line-height:1}
.scorpi-msg{font-weight:600;margin-bottom:10px;line-height:1.4}
.scorpi-close{position:absolute;top:8px;inset-inline-end:10px;border:0;background:none;
  font-size:20px;cursor:pointer;color:#888;line-height:1}
.scorpi-coupon{margin-top:10px;padding:10px;border-radius:10px;background:#fff7ed;
  border:1px dashed #f59e0b;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scorpi-apply{margin-inline-start:auto;border:0;border-radius:8px;padding:6px 12px;
  background:#f59e0b;color:#fff;font-weight:700;cursor:pointer}
.scorpi-apply:disabled{opacity:.6;cursor:default}