#ecommerceOnboarding { --eco-accent: #7367f0; --eco-line: rgba(130,130,165,.22); --eco-muted: var(--bs-secondary-color, #aaa8bf); color: var(--bs-body-color, #c5c3da); }
#ecommerceOnboarding * { box-sizing: border-box; }
#ecommerceOnboarding .eco-hero { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:32px; padding:32px; margin-bottom:28px; border:1px solid var(--eco-line); border-radius:18px; background:linear-gradient(120deg,rgba(115,103,240,.14),transparent 70%); }
#ecommerceOnboarding .eco-eyebrow { font-size:11px; font-weight:700; letter-spacing:1.3px; color:var(--eco-accent); margin:0 0 14px; }
#ecommerceOnboarding h1 { font-size:clamp(28px,3vw,40px) !important; line-height:1.15; letter-spacing:-1px; margin:0 0 18px; }
#ecommerceOnboarding h1 span { color:var(--eco-accent); }
#ecommerceOnboarding .eco-lead { max-width:660px; font-size:16px; line-height:1.65; }
#ecommerceOnboarding .eco-tags { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 24px; }
#ecommerceOnboarding .eco-tags span { border:1px solid var(--eco-line); border-radius:20px; padding:5px 10px; font-size:11px; }
#ecommerceOnboarding .eco-actions { display:flex; gap:10px; flex-wrap:wrap; }
#ecommerceOnboarding .eco-actions .btn { white-space:normal; }
#ecommerceOnboarding .eco-hero-note { align-self:center; border:1px solid var(--eco-line); border-radius:14px; padding:22px; background:rgba(115,103,240,.07); }
#ecommerceOnboarding .eco-hero-note > i { font-size:28px; color:var(--eco-accent); margin-bottom:14px; display:block; }
#ecommerceOnboarding .eco-hero-note h2 { font-size:16px !important; margin:0 0 12px; }
#ecommerceOnboarding .eco-hero-note p { font-size:13px; }
#ecommerceOnboarding .eco-hero-note small { font-size:11px; color:var(--eco-muted); line-height:1.6; display:block; }
#ecommerceOnboarding .eco-layout { display:grid; grid-template-columns:235px minmax(0,1fr); gap:24px; align-items:start; }
#ecommerceOnboarding .eco-rail { position:sticky; top:92px; padding:20px 0; }
#ecommerceOnboarding .eco-rail nav { display:flex; flex-direction:column; gap:8px; }
#ecommerceOnboarding .eco-rail nav a { display:flex; gap:12px; padding:12px; border:1px solid transparent; border-radius:10px; color:inherit; text-decoration:none; }
#ecommerceOnboarding .eco-rail nav a:hover, #ecommerceOnboarding .eco-rail nav a:focus-visible, #ecommerceOnboarding .eco-rail nav a[aria-current="step"] { background:rgba(115,103,240,.09); border-color:rgba(115,103,240,.3); }
#ecommerceOnboarding .eco-step-number { flex:0 0 30px; height:30px; display:grid; place-items:center; color:var(--eco-accent); background:rgba(115,103,240,.12); border-radius:8px; font-size:11px; font-weight:700; }
#ecommerceOnboarding .eco-rail strong { display:block; font-size:12px; margin-bottom:4px; }
#ecommerceOnboarding .eco-rail small { display:block; font-size:11px; color:var(--eco-muted); }
#ecommerceOnboarding .eco-rail-links { border-top:1px solid var(--eco-line); margin:22px 12px 0; padding-top:18px; }
#ecommerceOnboarding .eco-rail-links a { display:block; font-size:12px; margin-top:12px; }
#ecommerceOnboarding .eco-content { min-width:0; }
#ecommerceOnboarding section { padding:28px !important; border:1px solid var(--eco-line); border-radius:14px; box-shadow:none; scroll-margin-top:100px; }
#ecommerceOnboarding section h2 { font-size:23px !important; line-height:1.3; margin:0 0 18px; letter-spacing:-.35px; }
#ecommerceOnboarding section p, #ecommerceOnboarding section li { font-size:14px; line-height:1.75; }
#ecommerceOnboarding section li { margin-bottom:12px; padding-left:5px; }
#ecommerceOnboarding section ol, #ecommerceOnboarding section ul { padding-left:22px; }
#ecommerceOnboarding .alert { font-size:12px; line-height:1.8; border-radius:10px; }
#ecommerceOnboarding pre { background:#181925 !important; color:#e2def8 !important; border:1px solid var(--eco-line); font-size:12px; line-height:1.7; padding:20px !important; max-width:100%; tab-size:2; }
#ecommerceOnboarding pre code { color:inherit !important; background:transparent; }
#ecommerceOnboarding .eco-code-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 8px; font-size:11px; color:var(--eco-muted); }
#ecommerceOnboarding .eco-code-header button { padding:4px 10px; font-size:11px; }
#ecommerceOnboarding .eco-endpoint { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--eco-line); border-radius:10px; padding:12px 14px; margin:0 0 18px; }
#ecommerceOnboarding .eco-endpoint > span { color:#28c76f; font-size:11px; font-weight:700; }
#ecommerceOnboarding .eco-endpoint small { margin-left:auto; font-size:11px; color:var(--eco-muted); }
@media (max-width:1100px) {
    #ecommerceOnboarding .eco-hero { grid-template-columns:minmax(0,1fr); }
    #ecommerceOnboarding .eco-hero-note { max-width:100%; }
    #ecommerceOnboarding .eco-layout { grid-template-columns:200px minmax(0,1fr); gap:16px; }
}
@media (max-width:767px) {
    #ecommerceOnboarding .eco-hero { padding:22px; }
    #ecommerceOnboarding .eco-layout { grid-template-columns:minmax(0,1fr); }
    #ecommerceOnboarding .eco-rail { position:static; padding:0; }
    #ecommerceOnboarding .eco-rail nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    #ecommerceOnboarding .eco-rail-links { display:none; }
    #ecommerceOnboarding section { padding:20px !important; }
    #ecommerceOnboarding section h2 { font-size:20px !important; }
    #ecommerceOnboarding .eco-endpoint small { width:100%; margin-left:0; }
}
@media (max-width:400px) { #ecommerceOnboarding .eco-rail nav { grid-template-columns:minmax(0,1fr); } }