.sn-products {display:flex;flex-direction:column;gap:20px}
.sn-products-hero {display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:28px 30px;border:1px solid var(--sn-line);border-radius:18px;background:radial-gradient(420px 220px at 96% 0,rgba(125,242,168,.14),transparent 72%),linear-gradient(145deg,var(--sn-grad-a),var(--sn-grad-b))}
.sn-products-hero>div {max-width:720px}.sn-products-hero h1 {margin-top:7px}.sn-products-hero p:last-child {color:var(--sn-muted);font-size:17px;max-width:650px}
.sn-products-badge {flex:none;padding:7px 11px;border:1px solid rgba(125,242,168,.32);border-radius:999px;color:var(--sn-green);background:rgba(125,242,168,.07);font-size:12px;font-weight:700;white-space:nowrap}
.sn-products-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sn-products-card {min-height:270px;padding:22px;border:1px solid var(--sn-line);border-radius:16px;background:var(--sn-surface);display:flex;flex-direction:column}
.sn-products-card h2 {font-size:21px;letter-spacing:-.3px;margin-top:10px}.sn-products-card>p {color:var(--sn-muted);font-size:15px}
.sn-products-number {display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--sn-line);color:var(--sn-gold);background:var(--sn-soft);font-size:12px;font-weight:800}
.sn-products-slot {margin-top:auto;padding:14px;border:1px dashed var(--sn-line);border-radius:12px;background:var(--sn-soft)}
.sn-products-slot strong,.sn-products-slot span {display:block}.sn-products-slot strong {font-size:14px}.sn-products-slot span {margin-top:5px;color:var(--sn-muted);font-size:12px;line-height:1.4}
.sn-products-actions {margin-top:auto}.sn-products-account {width:100%;padding:12px 14px;border:1px solid rgba(125,242,168,.35);border-radius:10px;background:transparent;color:var(--sn-green);font-weight:800;cursor:pointer}
.sn-products-account:hover {background:rgba(125,242,168,.07)}
.sn-products-flow {padding:25px 28px;border:1px solid var(--sn-line);border-radius:17px;background:linear-gradient(155deg,var(--sn-grad-a),var(--sn-grad-b))}
.sn-products-flow h2 {font-size:22px;margin-top:8px}.sn-products-flow ol {list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sn-products-flow li {position:relative;min-height:100px;padding:15px;border:1px solid var(--sn-line);border-radius:12px;background:var(--sn-soft)}
.sn-products-flow li>span {display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--sn-ink);color:var(--sn-bg);font-size:11px;font-weight:800}
.sn-products-flow strong,.sn-products-flow small {display:block}.sn-products-flow strong {margin-top:10px;font-size:14px}.sn-products-flow small {margin-top:3px;color:var(--sn-muted);font-size:12px}
.sn-products-status {margin-top:18px;color:var(--sn-muted);font-size:13px}
.sn-products-disabled {margin-top:13px;padding:11px 15px;border:1px solid var(--sn-line);border-radius:10px;background:var(--sn-soft);color:var(--sn-muted);cursor:not-allowed;opacity:.7}
.sn-products-note {margin:0;color:var(--sn-muted);font-size:12px;text-align:center}
@media(max-width:900px){.sn-products-grid {grid-template-columns:1fr}.sn-products-card {min-height:0}.sn-products-flow ol {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sn-products-hero {padding:21px;flex-direction:column}.sn-products-badge {order:-1}.sn-products-flow {padding:21px}.sn-products-flow ol {grid-template-columns:1fr}.sn-products-flow li {min-height:0}}