.sj-steps,.sj-help,.sj-notice,.sj-payment{box-sizing:border-box;color:var(--site-fg,var(--fg));font:inherit}
.sj-steps{margin:12px 0 28px}.sj-steps ol{display:flex;flex-wrap:wrap;gap:16px 32px;list-style:none;padding:0;margin:0}.sj-steps li{display:flex;align-items:center;gap:10px;color:var(--site-muted,var(--muted))}.sj-steps li>span{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--site-border,var(--line));border-radius:50%;font-size:13px}.sj-steps [aria-current=step]{color:var(--site-primary-ink,var(--primary));font-weight:600}.sj-steps [aria-current=step]>span{background:var(--site-primary,var(--primary));color:#fff;border-color:transparent}.sj-steps a{color:inherit;text-decoration:none;min-height:44px;display:flex;align-items:center}
.sj-help{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--site-border,var(--line));border-radius:16px;padding:22px 24px;margin-block:24px;background:var(--site-surface,var(--surface))}.sj-help strong{font-size:16px}.sj-help p{font-size:14px;line-height:1.6;color:var(--site-muted,var(--muted));margin:5px 0 0;max-width:48ch}.sj-help nav,.sj-actions{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap}.sj-help a,.sj-actions a{display:inline-flex;align-items:center;min-height:44px;color:var(--site-primary-ink,var(--primary));font-size:14px;text-underline-offset:4px}
.sj-notice{border:1px solid var(--site-border,var(--line));border-radius:12px;background:var(--site-soft,var(--soft));padding:14px 16px;font-size:14px;line-height:1.7;margin-block:16px}.sj-notice:empty{display:none}.sj-notice[data-tone=error]{border-inline-start:3px solid var(--site-danger,#b42318)}
.sj-payment{border:1px solid var(--site-border,var(--line));border-radius:16px;padding:24px;margin-block:20px;background:var(--site-soft,var(--soft))}.sj-payment h2,.sj-payment h3{margin:0 0 10px;font-size:24px;line-height:1.3}.sj-payment p{line-height:1.7;margin:8px 0}.sj-payment[data-tone=success]{border-inline-start:4px solid var(--site-primary-ink,var(--primary))}.sj-payment[data-tone=error]{border-inline-start:4px solid var(--site-danger,#b42318)}.sj-ref{overflow-wrap:anywhere;font-size:13px;font-variant-numeric:tabular-nums}.sj-amount{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.sj-lookup summary{cursor:pointer;min-height:44px;align-content:center;color:var(--site-primary-ink,var(--primary))}.sj-lookup{border-bottom:1px solid var(--site-border,var(--line));padding-bottom:16px}.sj-updated{font-size:13px;color:var(--site-muted,var(--muted))}.sj-actions button{min-height:44px}.sj-steps a:focus-visible,.sj-help a:focus-visible,.sj-actions a:focus-visible,.sj-lookup summary:focus-visible{outline:3px solid var(--site-focus,var(--primary));outline-offset:4px;border-radius:4px}
.shop-checkout-summary .sj-notice{font-size:13px}.shop-checkout-summary [data-checkout-status]:not(:empty){border-inline-start:3px solid var(--site-primary,var(--primary));padding:12px 14px;background:var(--site-soft,var(--soft));border-radius:8px}.shop-checkout-summary [data-checkout-status][data-tone=error]{border-color:var(--site-danger,#b42318)}.shop-checkout-summary [data-checkout-status] a{margin-top:8px}.shop-checkout-summary .sj-review-title{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--site-primary-ink,var(--primary));font-weight:600;margin:0 0 12px}.shop-checkout-form input:focus-visible,.shop-checkout-form select:focus-visible,.shop-checkout-form textarea:focus-visible{outline:3px solid var(--site-focus,var(--primary));outline-offset:2px}.sj-field-help{font-size:13px;line-height:1.6;color:var(--site-muted,var(--muted))}.sj-refund-form{border-top:1px solid var(--site-border,var(--line));padding-top:20px}.sj-help [hidden],.sj-actions [hidden]{display:none!important}
@media(max-width:700px){.sj-help{align-items:stretch;flex-direction:column;padding:20px;gap:12px}.sj-help nav{display:grid;grid-template-columns:1fr}.sj-help a{border-top:1px solid var(--site-border,var(--line));padding-block:8px}.sj-steps ol{gap:8px;justify-content:space-between}.sj-steps li{font-size:12px;gap:6px;max-width:32%}.sj-steps li>span{flex-shrink:0;width:24px;height:24px;font-size:12px}.sj-payment{padding:20px}.sj-payment h2,.sj-payment h3{font-size:22px}.sj-actions{gap:8px}.sj-actions>*{flex:1 1 auto;text-align:center;justify-content:center}.shop-success{margin-block:16px!important}}
@media(prefers-reduced-motion:reduce){.sj-steps *,.sj-help *,.sj-payment *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.shop-success [hidden]{display:none!important}.sj-actions button:not(.button){padding:10px 16px;border:1px solid var(--site-border,var(--line));border-radius:10px;color:var(--site-fg,var(--fg));background:var(--site-surface,var(--surface));font:inherit;cursor:pointer}.sj-actions button:focus-visible{outline:3px solid var(--site-focus,var(--primary));outline-offset:3px}.sj-actions button:disabled{opacity:.55;cursor:wait}

/* Keep the checkout entry focused, with the same semantic colors as the shop. */
#shop-checkout-root {
  --checkout-ink: var(--site-fg, var(--fg, #252033));
  --checkout-muted: var(--site-muted, var(--muted-ink, #696477));
  --checkout-line: var(--site-border, var(--line, #e7e3ed));
  --checkout-surface: var(--site-surface, var(--surface, #fff));
  --checkout-soft: var(--site-soft, var(--soft, #f7f3fc));
  --checkout-accent: var(--site-primary-ink, var(--primary-ink, #7020d9));
  color: var(--checkout-ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}
#shop-checkout-root > .sj-steps { max-width: 640px; margin: 0 auto 32px; }
#shop-checkout-root > .sj-steps ol { flex-wrap: nowrap; align-items: center; gap: 0; }
#shop-checkout-root > .sj-steps li { flex: 1; min-width: 0; max-width: none; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--checkout-muted); }
#shop-checkout-root > .sj-steps li:not(:last-child)::after { content: ''; flex: 1; min-width: 12px; height: 1px; margin-inline: 8px 18px; background: var(--checkout-line); }
#shop-checkout-root > .sj-steps li:last-child { flex: 0 1 auto; }
#shop-checkout-root > .sj-steps li > span { flex-shrink: 0; width: 32px; height: 32px; background: var(--checkout-surface); border-color: var(--checkout-line); }
#shop-checkout-root > .sj-steps [aria-current=step] { color: var(--checkout-accent); }
#shop-checkout-root > .sj-steps [aria-current=step] > span { color: #fff; background: var(--site-primary, var(--purple, #8125ef)); border-color: transparent; box-shadow: 0 0 0 5px var(--checkout-soft); }
#shop-checkout-root .sj-login { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; padding: 44px 32px 36px; border: 1px solid var(--checkout-line); border-radius: 24px; background: var(--checkout-surface); box-shadow: 0 8px 32px #24133906; text-align: center; }
.sj-login-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 24px; border-radius: 24px; color: var(--checkout-accent); background: var(--checkout-soft); }
.sj-login-icon svg { width: 44px; height: 44px; }
#shop-checkout-root .sj-login h2 { margin: 0 0 14px; color: var(--checkout-ink); font-size: clamp(24px, 3vw, 28px); font-weight: 650; letter-spacing: -.025em; line-height: 1.35; }
#shop-checkout-root .sj-login-description { max-width: 390px; margin: 0; color: var(--checkout-muted); font-size: 14px; line-height: 1.9; text-wrap: pretty; }
.sj-login-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 260px); margin-top: 28px; }
#shop-checkout-root .sj-login-actions .button { box-sizing: border-box; width: 100%; min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.sj-login-back { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 16px; color: var(--checkout-muted); font-size: 13px; text-decoration: none; }
.sj-login-back:hover { color: var(--checkout-accent); text-decoration: underline; text-underline-offset: 4px; }
#shop-checkout-root > .sj-help { box-sizing: border-box; max-width: 760px; margin: 24px auto 0; padding: 20px 4px; border: 0; border-radius: 0; gap: 20px; background: transparent; }
#shop-checkout-root > .sj-help strong { color: var(--checkout-ink); font-size: 14px; font-weight: 600; }
#shop-checkout-root > .sj-help p { max-width: 36ch; color: var(--checkout-muted); font-size: 12px; }
#shop-checkout-root > .sj-help nav { flex-shrink: 0; gap: 4px; }
#shop-checkout-root > .sj-help a { padding-inline: 12px; color: var(--checkout-muted); font-size: 13px; text-decoration: none; border-radius: 8px; }
#shop-checkout-root > .sj-help a:hover { color: var(--checkout-accent); background: var(--checkout-soft); }
#shop-checkout-root > .sj-help a:last-child { color: var(--checkout-accent); }
.sj-login a:focus-visible { outline: 3px solid var(--site-focus, var(--checkout-accent)); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 700px) {
  #shop-checkout-root > .sj-steps { margin-bottom: 24px; }
  #shop-checkout-root > .sj-steps li { flex-direction: column; flex: 1; position: relative; font-size: 12px; gap: 10px; text-align: center; }
  #shop-checkout-root > .sj-steps li:last-child { flex: 1; }
  #shop-checkout-root > .sj-steps li:not(:last-child)::after { position: absolute; top: 16px; inset-inline-start: calc(50% + 24px); width: calc(100% - 48px); margin: 0; min-width: 0; }
  #shop-checkout-root > .sj-steps a { min-height: 0; }
  #shop-checkout-root .sj-login { padding: 32px 22px 24px; border-radius: 20px; }
  .sj-login-icon { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 20px; }
  #shop-checkout-root > .sj-help { align-items: center; text-align: center; padding: 0; gap: 12px; }
  #shop-checkout-root > .sj-help nav { display: flex; justify-content: center; flex-wrap: wrap; }
  #shop-checkout-root > .sj-help a { border: 0; padding: 0 10px; }
}