.sspu-wrap{--sspu:#374151;--sspu-text:#374151;--sspu-bg:#ffffff;--sspu-brd:#e5e7eb;--sspu-hbg:#f3f4f6;--sspu-htxt:#111827;--sspu-hbrd:#cfd4dc;--sspu-ddbg:#ffffff;--sspu-ddbrd:#e5e7eb;margin:8px 0}
.sspu-buttons{display:flex;flex-wrap:wrap;gap:4px}
/* Botón base */
.sspu-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:2px 6px;border:1px solid var(--sspu-brd);border-radius:8px;transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;font-weight:600;line-height:1;color:var(--sspu-text);background:var(--sspu-bg)}
.sspu-btn .sspu-icn{display:inline-flex}
/* Tamaños */
.sspu-xs .sspu-btn{padding:1px 6px;font-size:12px;border-radius:7px}
.sspu-xs .sspu-icn svg{width:14px;height:14px}
.sspu-sm .sspu-btn{padding:3px 8px;font-size:13px}
.sspu-sm .sspu-icn svg{width:16px;height:16px}
.sspu-md .sspu-btn{padding:6px 10px;font-size:14px}
.sspu-lg .sspu-btn{padding:8px 12px;font-size:15px}
/* Estilos discretos */
.sspu-simple .sspu-btn{background:var(--sspu-bg);border-color:var(--sspu-brd);color:var(--sspu-text)}
.sspu-simple .sspu-btn:hover{border-color:var(--sspu-hbrd);background:var(--sspu-hbg);color:var(--sspu-htxt)}
.sspu-outline .sspu-btn{background:var(--sspu-bg);border-color:var(--sspu);color:var(--sspu)}
.sspu-outline .sspu-btn:hover{background:var(--sspu);color:#fff;border-color:var(--sspu)}
.sspu-filled .sspu-btn{background:var(--sspu);color:#fff;border-color:var(--sspu)}
/* Formas */
.sspu-square .sspu-btn{border-radius:5px}
.sspu-pill .sspu-btn{border-radius:999px}
/* Contador */
.sspu-cnt{background:#f3f4f6;color:var(--sspu-text);padding:.05rem .35rem;border-radius:999px;font-size:10px}
/* Alineación */
.sspu-align-center .sspu-buttons{justify-content:center}
.sspu-align-right .sspu-buttons{justify-content:flex-end}
/* Dropdown "Más" */
.sspu-more{position:relative}
.sspu-more-btn{display:inline-flex;align-items:center;gap:6px;padding:2px 6px;border:1px solid var(--sspu-brd);background:var(--sspu-bg);border-radius:8px;cursor:pointer;font-weight:600}
.sspu-xs .sspu-more-btn{padding:1px 6px;font-size:12px;border-radius:7px}
.sspu-dropdown{position:absolute;top:110%;left:0;min-width:160px;background:var(--sspu-ddbg);border:1px solid var(--sspu-ddbrd);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:6px;display:none;z-index:9999}
.sspu-dropdown .sspu-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;color:#374151;text-decoration:none}
.sspu-dropdown .sspu-item:hover{background:#f9fafb}
/* Barra flotante (vertical y visible en móvil) */
.sspu-float{position:fixed;z-index:9999;top:50%;transform:translateY(-50%);}
.sspu-float-top{top:20%}.sspu-float-bottom{top:auto;bottom:20%;transform:none}
.sspu-float-left{left:8px}.sspu-float-right{right:8px}
.sspu-float .sspu-buttons{flex-direction:column;gap:6px}
.sspu-float .sspu-wrap{margin:0}
/* Total badge */
.sspu-total-wrap{display:inline-flex;align-items:center;margin:0 6px 6px 0}
.sspu-total-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:999px;background:var(--sspu);color:#fff;font-size:12px;font-weight:700}