/* PayWithGuddy UI layer - every accent comes from GetHeader() theme vars (--AppColor, --AppColorRGB, --d_Color). */

:root {
  --sv-accent: var(--AppColor, #1E40AF);
  --sv-accent-rgb: var(--AppColorRGB, 30, 64, 175);
  --sv-accent-dark: var(--d_Color, #1E3A8A);
  --sv-accent-soft: rgba(var(--sv-accent-rgb), 0.08);
  --sv-accent-ring: rgba(var(--sv-accent-rgb), 0.18);
  --sv-ink: #0f172a;
  --sv-body: #334155;
  --sv-mute: #64748b;
  --sv-line: #e5e7eb;
  --sv-line-soft: #f1f5f9;
  --sv-bg: #f6f8fc;
  --sv-card: #ffffff;
  --sv-success: #16a34a;
  --sv-success-rgb: 22, 163, 74;
  --sv-danger: #dc2626;
  --sv-danger-rgb: 220, 38, 38;
  --sv-warn: #b45309;
  --sv-warn-rgb: 217, 119, 6;
  --sv-radius: 16px;
  --sv-radius-sm: 10px;
  --sv-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -14px rgba(15, 23, 42, 0.14);
  --sv-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.28);
}

html.dark-mode,
html[data-bs-theme="dark"] {
  --sv-ink: #f1f5f9;
  --sv-body: #cbd5e1;
  --sv-mute: #94a3b8;
  --sv-line: #1f2937;
  --sv-line-soft: #0f172a;
  --sv-bg: #0b1220;
  --sv-card: #111827;
  --sv-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

.storefront-body { background: var(--sv-bg); color: var(--sv-body); }

/* ===== Buttons ===== */
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem; padding: 0.7rem 1.4rem;
  font-weight: 700; font-size: 0.95rem; line-height: 1.2; letter-spacing: -0.005em;
  border-radius: var(--sv-radius-sm); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sv-btn:hover { transform: translateY(-1px); }
.sv-btn:disabled, .sv-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.sv-btn--primary { background: var(--sv-accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--sv-accent-rgb), .7); }
.sv-btn--primary:hover { background: var(--sv-accent-dark); color: #fff; }
.sv-btn--outline { background: var(--sv-card); color: var(--sv-accent); border-color: var(--sv-accent); }
.sv-btn--outline:hover { background: var(--sv-accent-soft); color: var(--sv-accent); }
.sv-btn--ghost { background: transparent; color: var(--sv-body); border-color: var(--sv-line); }
.sv-btn--ghost:hover { border-color: var(--sv-accent); color: var(--sv-accent); }
.sv-btn--success { background: var(--sv-success); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--sv-success-rgb), .7); }
.sv-btn--success:hover { background: #15803d; color: #fff; }
.sv-btn--danger { background: var(--sv-danger); color: #fff; }
.sv-btn--danger:hover { background: #b91c1c; color: #fff; }
.sv-btn--danger-outline { background: var(--sv-card); color: var(--sv-danger); border-color: rgba(var(--sv-danger-rgb), .55); }
.sv-btn--danger-outline:hover { background: rgba(var(--sv-danger-rgb), .06); color: var(--sv-danger); }
.sv-btn--white { background: #fff; color: var(--sv-accent); }
.sv-btn--white:hover { background: #f8fafc; color: var(--sv-accent-dark); }
.sv-btn--line-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.sv-btn--line-white:hover { background: rgba(255,255,255,.1); color: #fff; }
.sv-btn--lg { min-height: 3.35rem; padding: 0.85rem 1.75rem; font-size: 1rem; }
.sv-btn--sm { min-height: 2.25rem; padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.sv-btn--block { display: flex; width: 100%; }
.sv-btn--caps { text-transform: uppercase; letter-spacing: .04em; font-size: .88rem; }

/* ===== Header ===== */
.master-header { background: var(--sv-card); border-bottom: 1px solid var(--sv-line); box-shadow: none; }
.master-header-bar { min-height: 4.5rem; gap: 1.5rem; }
.master-nav-links { flex: 1 1 auto; justify-content: center; gap: .25rem !important; }
.master-nav-links .nav-link-custom { color: var(--sv-body); font-weight: 500; font-size: .95rem; padding: .5rem .85rem; border-radius: 8px; }
.master-nav-links .nav-link-custom:hover,
.master-nav-links .nav-link-custom.is-active { color: var(--sv-accent); background: transparent; }
.oa-header-login { color: var(--sv-ink); font-weight: 600; font-size: .95rem; padding: .55rem .9rem; border-radius: 8px; text-decoration: none; }
.oa-header-login:hover { color: var(--sv-accent); }
.oa-header-signup {
  display: inline-flex; align-items: center; background: var(--sv-accent); color: #fff !important;
  font-weight: 700; font-size: .92rem; padding: .6rem 1.25rem; border-radius: 8px; text-decoration: none;
}
.oa-header-signup:hover { background: var(--sv-accent-dark); }

/* ===== Footer ===== */
.sv-footer { background: var(--sv-card); border-top: 1px solid var(--sv-line); color: var(--sv-mute); padding: 3.5rem 0 1.75rem; margin-top: auto; }
.sv-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.sv-footer__brand img { height: 1.75rem; width: auto; }
/* Brand logo: navy artwork on light themes, lightened artwork (images/logo-dark.png) on dark. */
html:not(.dark-mode) .logo-on-dark, html.dark-mode .logo-on-light { display: none !important; }
.sv-footer__tagline { margin: .9rem 0 1.1rem; max-width: 20rem; line-height: 1.65; font-size: .92rem; }
.sv-footer h6 { color: var(--sv-ink); font-weight: 700; font-size: .88rem; margin: 0 0 .9rem; }
.sv-footer a.sv-footer__link { display: block; color: var(--sv-mute); text-decoration: none; font-size: .9rem; padding: .22rem 0; }
.sv-footer a.sv-footer__link:hover { color: var(--sv-accent); }
.sv-footer .social-links a, .sv-footer .footer-social a { color: var(--sv-mute); }
.sv-footer__news { display: flex; gap: .4rem; margin-top: .4rem; }
.sv-footer__news input { flex: 1; min-width: 0; height: 2.6rem; border: 1px solid var(--sv-line); border-radius: 8px; padding: 0 .8rem; background: var(--sv-bg); color: var(--sv-ink); font-size: .88rem; }
.sv-footer__news input:focus { outline: none; border-color: var(--sv-accent); box-shadow: 0 0 0 3px var(--sv-accent-ring); }
.sv-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--sv-line); margin-top: 2.5rem; padding-top: 1.4rem; font-size: .85rem; }
.sv-footer__bottom p { margin: 0; }
.sv-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.sv-footer__legal a { color: var(--sv-mute); text-decoration: none; }
.sv-footer__legal a:hover { color: var(--sv-accent); }
@media (max-width: 991.98px) { .sv-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .sv-footer__grid { grid-template-columns: 1fr; } }

/* ===== Shared primitives ===== */
.sv-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: var(--sv-accent-soft); color: var(--sv-accent);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
.sv-card { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); }
.sv-card__pad { padding: 1.5rem; }
@media (min-width: 768px) { .sv-card__pad { padding: 1.85rem; } }
.sv-card__title { display: flex; align-items: center; gap: .6rem; font-size: 1.08rem; font-weight: 800; color: var(--sv-ink); margin: 0 0 1.1rem; }
.sv-card__title .sv-num {
  width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--sv-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; flex-shrink: 0;
}
.sv-eyebrow { color: var(--sv-accent); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; }
.sv-h2 { color: var(--sv-ink); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 .6rem; }
.sv-sub { color: var(--sv-mute); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.sv-section { padding: 4.5rem 0; }
.sv-section--tight { padding: 3rem 0; }
.sv-section__head { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
.sv-section__head--left { margin-left: 0; text-align: left; }

.sv-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--sv-line-soft); color: var(--sv-body);
}
.sv-badge--verified, .sv-badge--ok { background: rgba(var(--sv-success-rgb), .1); color: var(--sv-success); }
.sv-badge--accent { background: var(--sv-accent-soft); color: var(--sv-accent); }
.sv-badge--official { background: var(--AppColor, #1e40af); color: #fff; }
.sv-badge--warn { background: rgba(var(--sv-warn-rgb), .12); color: var(--sv-warn); }
.sv-badge--danger { background: rgba(var(--sv-danger-rgb), .1); color: var(--sv-danger); }

.sv-alert { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 12px; font-size: .9rem; line-height: 1.55; }
.sv-alert i { font-size: 1.15rem; line-height: 1.2; flex-shrink: 0; }
.sv-alert strong { display: block; color: inherit; margin-bottom: .1rem; }
.sv-alert--info { background: var(--sv-accent-soft); color: var(--sv-accent-dark); border: 1px solid var(--sv-accent-ring); }
html.dark-mode .sv-alert--info { color: #bfdbfe; }
.sv-alert--warn { background: rgba(var(--sv-warn-rgb), .08); color: #92400e; border: 1px solid rgba(var(--sv-warn-rgb), .3); }
html.dark-mode .sv-alert--warn { color: #fcd34d; }
.sv-alert--ok { background: rgba(var(--sv-success-rgb), .08); color: #166534; border: 1px solid rgba(var(--sv-success-rgb), .25); }

.sv-form .form-label, .sv-label { font-weight: 600; color: var(--sv-ink); font-size: .88rem; margin-bottom: .4rem; }
.sv-form .form-control, .sv-form .form-select, .sv-input {
  min-height: 3rem; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm);
  padding: .65rem .9rem; font-size: .95rem; background-color: var(--sv-card); color: var(--sv-ink);
}
.sv-form textarea.form-control { min-height: 6.5rem; }
.sv-form .form-control:focus, .sv-form .form-select:focus, .sv-input:focus {
  border-color: var(--sv-accent); box-shadow: 0 0 0 3px var(--sv-accent-ring); outline: none;
}
.sv-prefix-group { display: flex; align-items: stretch; }
.sv-prefix-group .sv-prefix {
  display: inline-flex; align-items: center; gap: .35rem; padding: 0 .85rem;
  border: 1px solid var(--sv-line); border-right: 0; border-radius: var(--sv-radius-sm) 0 0 var(--sv-radius-sm);
  background: var(--sv-line-soft); color: var(--sv-ink); font-weight: 600; font-size: .92rem;
}
.sv-prefix-group .form-control { border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0; }

/* ===== Landing hero ===== */
.sv-hero { position: relative; overflow: hidden; padding: 4.5rem 0 3.5rem; background:
  radial-gradient(60rem 30rem at 85% 10%, rgba(var(--sv-accent-rgb), .09), transparent 60%),
  radial-gradient(40rem 20rem at 0% 100%, rgba(var(--sv-accent-rgb), .05), transparent 60%),
  var(--sv-card); }
.sv-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.sv-hero__title { color: var(--sv-ink); font-weight: 800; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.035em; margin: 1.2rem 0 1.1rem; }
.sv-hero__title .sv-accent { display: block; color: var(--sv-accent); }
.sv-hero__lead { color: var(--sv-mute); font-size: 1.12rem; line-height: 1.65; max-width: 32rem; margin: 0 0 2rem; }
.sv-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.sv-hero__proof { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; color: var(--sv-mute); font-size: .88rem; }
.sv-hero__proof span { display: inline-flex; align-items: center; gap: .4rem; }
.sv-hero__proof i { color: var(--sv-success); }
@media (max-width: 991.98px) {
  .sv-hero { padding: 3rem 0 2.5rem; }
  .sv-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Illustration: card + shield + coins */
.sv-illus { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1 / .88; margin-left: auto; }
.sv-illus__glow { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sv-accent-rgb), .16), rgba(var(--sv-accent-rgb), 0) 70%); }
.sv-illus__card {
  position: absolute; left: 8%; top: 20%; width: 62%; aspect-ratio: 1.58; border-radius: 18px;
  background: linear-gradient(135deg, var(--sv-accent) 0%, var(--sv-accent-dark) 100%);
  box-shadow: 0 30px 60px -20px rgba(var(--sv-accent-rgb), .55); transform: rotate(-9deg); overflow: hidden;
}
.sv-illus__card::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -25%; top: -45%; border-radius: 50%; background: rgba(255,255,255,.12); }
.sv-illus__card::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 16%; height: 8%; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 14%, transparent 14% 18%); }
.sv-illus__chip { position: absolute; left: 10%; top: 22%; width: 16%; aspect-ratio: 1.3; border-radius: 6px; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.sv-illus__shield {
  position: absolute; right: 12%; top: 12%; width: 44%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--sv-card);
  box-shadow: var(--sv-shadow-lg); color: var(--sv-accent); font-size: clamp(4rem, 9vw, 6.5rem);
}
.sv-illus__shield i { filter: drop-shadow(0 10px 18px rgba(var(--sv-accent-rgb), .35)); }
.sv-illus__coins { position: absolute; right: 8%; bottom: 8%; width: 30%; height: 34%; }
.sv-illus__coins span {
  position: absolute; left: 0; right: 0; height: 26%; border-radius: 50%;
  background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: inset 0 -4px 0 #d97706, 0 6px 12px -6px rgba(0,0,0,.35);
}
.sv-illus__coins span:nth-child(1) { bottom: 0; }
.sv-illus__coins span:nth-child(2) { bottom: 18%; }
.sv-illus__coins span:nth-child(3) { bottom: 36%; }
.sv-illus__coins span:nth-child(4) { bottom: 54%; }
.sv-illus__tag {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-radius: 12px;
  background: var(--sv-card); box-shadow: var(--sv-shadow); font-size: .8rem; font-weight: 700; color: var(--sv-ink);
}
.sv-illus__tag i { width: 1.8rem; height: 1.8rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.sv-illus__tag--lock { left: 0; bottom: 14%; }
.sv-illus__tag--lock i { background: rgba(var(--sv-success-rgb), .12); color: var(--sv-success); }
.sv-illus__tag--held { left: 34%; top: 0; }
.sv-illus__tag--held i { background: var(--sv-accent-soft); color: var(--sv-accent); }
@media (max-width: 991.98px) { .sv-illus { margin: 0 auto; max-width: 24rem; } }

/* Feature bar */
.sv-features { position: relative; z-index: 2; margin-top: -1.75rem; }
.sv-features__card { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); }
.sv-features__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.6rem 1.75rem; }
.sv-features__item + .sv-features__item { border-left: 1px solid var(--sv-line); }
.sv-features__ico { width: 3rem; height: 3rem; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-accent-soft); color: var(--sv-accent); font-size: 1.35rem; }
.sv-features__item strong { display: block; color: var(--sv-ink); font-size: 1rem; font-weight: 800; margin-bottom: .2rem; }
.sv-features__item span { color: var(--sv-mute); font-size: .88rem; line-height: 1.55; }
@media (max-width: 767.98px) {
  .sv-features { margin-top: 0; padding-top: 1rem; }
  .sv-features__card { grid-template-columns: 1fr; }
  .sv-features__item + .sv-features__item { border-left: 0; border-top: 1px solid var(--sv-line); }
}

/* Steps */
.sv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: svstep; }
.sv-step { position: relative; padding: 1.6rem 1.4rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); }
.sv-step__n { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-accent); color: #fff; font-weight: 800; margin-bottom: 1rem; }
.sv-step h3 { color: var(--sv-ink); font-size: 1.02rem; font-weight: 800; margin: 0 0 .35rem; }
.sv-step p { color: var(--sv-mute); font-size: .9rem; line-height: 1.6; margin: 0; }
@media (max-width: 991.98px) { .sv-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sv-steps { grid-template-columns: 1fr; } }

.sv-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.sv-trust__item { padding: 1.5rem; border-radius: var(--sv-radius); background: var(--sv-card); border: 1px solid var(--sv-line); }
.sv-trust__item i { display: inline-flex; width: 2.75rem; height: 2.75rem; border-radius: 12px; align-items: center; justify-content: center; background: var(--sv-accent-soft); color: var(--sv-accent); font-size: 1.25rem; margin-bottom: .9rem; }
.sv-trust__item strong { display: block; color: var(--sv-ink); font-weight: 800; margin-bottom: .3rem; }
.sv-trust__item span { color: var(--sv-mute); font-size: .9rem; line-height: 1.6; }
@media (max-width: 991.98px) { .sv-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sv-trust { grid-template-columns: 1fr; } }

.sv-cta { border-radius: 24px; padding: 3.25rem 2rem; text-align: center; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--sv-accent) 0%, var(--sv-accent-dark) 100%); }
.sv-cta::before { content: ""; position: absolute; width: 26rem; height: 26rem; right: -8rem; top: -12rem; border-radius: 50%; background: rgba(255,255,255,.08); }
.sv-cta h2 { color: #fff; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .6rem; position: relative; }
.sv-cta p { color: rgba(255,255,255,.85); max-width: 34rem; margin: 0 auto 1.6rem; position: relative; }
.sv-cta .sv-hero__cta { justify-content: center; position: relative; }
.sv-cta--photo { background: linear-gradient(135deg, rgba(var(--sv-accent-rgb), .92) 0%, rgba(15, 23, 42, .86) 100%), var(--sv-cta-img) center / cover no-repeat; }
.sv-cta::after { content: ""; position: absolute; width: 14rem; height: 14rem; left: -5rem; bottom: -7rem; border-radius: 50%; background: rgba(255,255,255,.06); }
.sv-cta::before, .sv-cta::after { pointer-events: none; animation: sv-drift 14s ease-in-out infinite alternate; }
.sv-cta > * { position: relative; z-index: 1; }
.sv-cta::after { animation-duration: 18s; animation-direction: alternate-reverse; }

/* Hero motion: text rises in, illustration floats */
.sv-hero__grid > div:first-child > * { animation: sv-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.sv-hero__grid > div:first-child > :nth-child(2) { animation-delay: .08s; }
.sv-hero__grid > div:first-child > :nth-child(3) { animation-delay: .16s; }
.sv-hero__grid > div:first-child > :nth-child(4) { animation-delay: .24s; }
.sv-hero__grid > div:first-child > :nth-child(5) { animation-delay: .32s; }
.sv-illus { animation: sv-rise .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
.sv-illus__card { animation: sv-float-card 7s ease-in-out infinite; }
.sv-illus__shield { animation: sv-float 6s ease-in-out infinite; }
.sv-illus__coins { animation: sv-float 5s .6s ease-in-out infinite; }
.sv-illus__tag--held { animation: sv-float 5.5s .3s ease-in-out infinite; }
.sv-illus__tag--lock { animation: sv-float 6.5s 1s ease-in-out infinite; }
.sv-illus__glow { animation: sv-pulse 6s ease-in-out infinite; }
.sv-illus--photo { aspect-ratio: 4 / 3; }
.sv-illus__photo { position: absolute; inset: 6% 4% 8% 8%; width: 88%; height: 86%; object-fit: cover; border-radius: 22px; box-shadow: var(--sv-shadow-lg); }
.sv-illus--photo .sv-illus__tag--held { left: auto; right: 0; top: 0; }

.sv-step, .sv-trust__item { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.sv-step:hover, .sv-trust__item:hover { transform: translateY(-4px); border-color: var(--sv-accent-ring); box-shadow: var(--sv-shadow-lg); }
.sv-step__n, .sv-trust__item i { transition: transform .22s ease; }
.sv-step:hover .sv-step__n, .sv-trust__item:hover i { transform: scale(1.08) rotate(-4deg); }

.oa-reveal--stagger:not(.is-in) > * { opacity: 0; }
.oa-reveal--stagger.is-in > * { animation: sv-rise .55s cubic-bezier(.2, .7, .2, 1) backwards; }
.oa-reveal--stagger.is-in > :nth-child(2) { animation-delay: .07s; }
.oa-reveal--stagger.is-in > :nth-child(3) { animation-delay: .14s; }
.oa-reveal--stagger.is-in > :nth-child(4) { animation-delay: .21s; }
.oa-reveal--stagger.is-in > :nth-child(5) { animation-delay: .28s; }
.oa-reveal--stagger.is-in > :nth-child(n+6) { animation-delay: .35s; }

/* ===== Category tiles (home + about) ===== */
.sv-cats-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.sv-cats-head .sv-sub { max-width: 36rem; }
.sv-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-auto-rows: 15rem; gap: 1rem; }
.sv-cats--n3 { grid-template-columns: 1.5fr 1fr; grid-auto-rows: 13.5rem; }
.sv-cats--n5 { grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: 13.5rem; }
.sv-cats--n3 > .sv-cat:first-child, .sv-cats--n5 > .sv-cat:first-child { grid-row: span 2; }
.sv-cat { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.25rem;
  border-radius: var(--sv-radius); color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--sv-accent) 0%, var(--sv-accent-dark) 100%);
  box-shadow: var(--sv-shadow); transition: transform .3s ease, box-shadow .3s ease; }
.sv-cat::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sv-cat-img, none) center / cover no-repeat; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.sv-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15, 23, 42, .85) 0%, rgba(15, 23, 42, .4) 42%, rgba(15, 23, 42, 0) 72%); }
.sv-cat--plain::after { background: radial-gradient(28rem 16rem at 100% 0%, rgba(255, 255, 255, .16), transparent 60%); }
.sv-cat__ico { position: absolute; right: -.5rem; top: -1rem; z-index: -1; font-size: 8rem; line-height: 1; opacity: .14; }
.sv-cat:hover, .sv-cat:focus-visible { color: #fff; transform: translateY(-4px); box-shadow: var(--sv-shadow-lg); }
.sv-cat:hover::before, .sv-cat:focus-visible::before { transform: scale(1.07); }
.sv-cat:focus-visible { outline: 3px solid rgba(var(--sv-accent-rgb), .45); outline-offset: 3px; }
.sv-cat__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sv-cat__name { font-weight: 800; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.01em; }
.sv-cats--n3 > .sv-cat:first-child .sv-cat__name, .sv-cats--n5 > .sv-cat:first-child .sv-cat__name { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.sv-cat__desc { color: rgba(255, 255, 255, .84); font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-cat__go { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(8px); transition: background .25s ease, color .25s ease, transform .25s ease; }
.sv-cat:hover .sv-cat__go, .sv-cat:focus-visible .sv-cat__go { background: #fff; color: var(--sv-accent); transform: rotate(45deg); }
@media (min-width: 576px) and (max-width: 991.98px) {
  .sv-cats--n3, .sv-cats--n5 { grid-template-columns: 1fr 1fr; grid-auto-rows: 12rem; }
  .sv-cats--n3 > .sv-cat:first-child, .sv-cats--n5 > .sv-cat:first-child { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 575.98px) {
  .sv-cats-head .sv-btn { display: none; }
  .sv-cats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; grid-auto-rows: 14rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -.75rem; padding: .25rem .75rem .75rem; scroll-padding-inline: .75rem; scrollbar-width: none; }
  .sv-cats::-webkit-scrollbar { display: none; }
  .sv-cats > .sv-cat { grid-row: auto; grid-column: auto; scroll-snap-align: start; }
}

/* ===== Public page hero (about, services, contact, faq, cart, saved, legal; --photo adds a background photo) ===== */
.storefront-body .oa-page-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.75rem, 6vw, 4.25rem); color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(70rem 26rem at 100% 0%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(135deg, var(--sv-accent) 0%, var(--sv-accent-dark) 100%); }
.storefront-body .oa-page-hero::before, .storefront-body .oa-page-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.storefront-body .oa-page-hero::before { width: 28rem; height: 28rem; right: -8rem; top: -12rem; background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); animation: sv-drift 16s ease-in-out infinite alternate; }
.storefront-body .oa-page-hero::after { width: 18rem; height: 18rem; left: -6rem; bottom: -10rem; background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); animation: sv-drift 20s ease-in-out infinite alternate-reverse; }
.storefront-body .oa-page-hero > .container > * { animation: sv-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.storefront-body .oa-page-hero > .container > :nth-child(2) { animation-delay: .08s; }
.storefront-body .oa-page-hero > .container > :nth-child(3) { animation-delay: .16s; }
.storefront-body .oa-page-hero > .container > :nth-child(4) { animation-delay: .24s; }
.storefront-body .oa-page-hero .oa-page-hero__brand { color: rgba(255, 255, 255, .78); }
.storefront-body .oa-page-hero .oa-section-title { color: #fff; }
.storefront-body .oa-page-hero .oa-section-sub { color: rgba(255, 255, 255, .86); }
.storefront-body .oa-page-hero .pg-badge { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(6px); }
.storefront-body .oa-page-hero--photo { display: flex; align-items: center; min-height: clamp(21rem, 34vw, 27rem);
  background:
    linear-gradient(95deg, rgba(var(--sv-accent-rgb), .97) 0%, rgba(var(--sv-accent-rgb), .9) 38%, rgba(var(--sv-accent-rgb), .42) 68%, rgba(var(--sv-accent-rgb), .12) 100%),
    var(--oa-hero-img) 72% 28% / cover no-repeat,
    var(--sv-accent-dark); }
.storefront-body .oa-page-hero--photo > .container { width: 100%; }
.storefront-body .oa-page-hero--photo::before { display: none; }
@media (max-width: 767.98px) {
  .storefront-body .oa-page-hero--photo { min-height: 0;
    background:
      linear-gradient(180deg, rgba(var(--sv-accent-rgb), .9) 0%, rgba(var(--sv-accent-rgb), .82) 100%),
      var(--oa-hero-img) 72% 28% / cover no-repeat,
      var(--sv-accent-dark); }
}
.storefront-body .oa-page-hero--lift { padding-bottom: clamp(5rem, 9vw, 6.5rem); }
.storefront-body .oa-page-hero--lift + .oa-section { padding-top: 0; }
.storefront-body .oa-page-hero--lift + .oa-section .oa-legal { position: relative; z-index: 2; margin-top: -3.5rem; box-shadow: var(--sv-shadow-lg); }

/* ===== Services: step timeline + rule cards ===== */
.pg-steps > .pg-trust-note, .pg-rules > .pg-trust-note { position: relative; padding: 1.1rem 1.25rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius);
  color: var(--sv-body); box-shadow: var(--sv-shadow); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pg-steps > .pg-trust-note:hover, .pg-rules > .pg-trust-note:hover { transform: translateY(-3px); border-color: var(--sv-accent-ring); box-shadow: var(--sv-shadow-lg); }
.pg-steps strong:not(.pg-steps__n), .pg-rules strong { color: var(--sv-ink); }
.pg-steps .text-muted, .pg-rules .text-muted { color: var(--sv-mute) !important; }
.pg-steps .pg-steps__n { width: 2.25rem; height: 2.25rem; background: var(--sv-accent); box-shadow: 0 0 0 5px var(--sv-accent-soft); }
.pg-steps > .pg-trust-note:not(:last-child)::after { content: ""; position: absolute; left: calc(2.375rem - 1px); top: 100%; width: 2px; height: 1rem; background: var(--sv-accent-ring); }
.pg-rules > .pg-trust-note { gap: 1rem; }
.pg-rules__ico { flex-shrink: 0; font-size: 1.4rem; line-height: 1; color: var(--sv-accent); }
.pg-rules__ico--ok { color: var(--sv-success); }
.pg-rules__ico--no { color: var(--sv-danger); }
html.dark-mode .pg-trust-note, html[data-bs-theme="dark"] .pg-trust-note { background: rgba(var(--sv-accent-rgb), .14); border-color: rgba(var(--sv-accent-rgb), .35); color: #bfdbfe; }
html.dark-mode .pg-steps > .pg-trust-note, html.dark-mode .pg-rules > .pg-trust-note,
html[data-bs-theme="dark"] .pg-steps > .pg-trust-note, html[data-bs-theme="dark"] .pg-rules > .pg-trust-note { background: var(--sv-card); border-color: var(--sv-line); color: var(--sv-body); }

@keyframes sv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sv-float-card { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-8px); } }
@keyframes sv-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes sv-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-2.5rem, 1.5rem) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .sv-hero__grid > div:first-child > *, .sv-illus, .sv-illus__card, .sv-illus__shield, .sv-illus__coins, .sv-illus__tag, .sv-illus__glow,
  .sv-cta::before, .sv-cta::after, .storefront-body .oa-page-hero::before, .storefront-body .oa-page-hero::after,
  .storefront-body .oa-page-hero > .container > * { animation: none; }
  .sv-illus__card { transform: rotate(-9deg); }
  .oa-reveal--stagger > *, .oa-reveal--stagger:not(.is-in) > * { opacity: 1; animation: none; }
  .sv-step:hover, .sv-trust__item:hover, .pg-steps > .pg-trust-note:hover, .pg-rules > .pg-trust-note:hover, .sv-cat:hover, .sv-cat:focus-visible { transform: none; }
  .sv-cat:hover::before, .sv-cat:focus-visible::before, .sv-cat:hover .sv-cat__go { transform: none; }
}

/* ===== Auth (sign up / login) ===== */
.sv-auth { padding: 3.5rem 0 4.5rem; background: var(--sv-bg); }
.sv-auth__shell { display: grid; grid-template-columns: 5fr 7fr; max-width: 64rem; margin: 0 auto; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: 24px; overflow: hidden; box-shadow: var(--sv-shadow-lg); }
.sv-auth__panel { position: relative; overflow: hidden; padding: 3rem 2.5rem; color: #fff; background: linear-gradient(160deg, var(--sv-accent) 0%, var(--sv-accent-dark) 100%); display: flex; flex-direction: column; }
.sv-auth__panel::before, .sv-auth__panel::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.sv-auth__panel::before { width: 18rem; height: 18rem; right: -7rem; top: -6rem; }
.sv-auth__panel::after { width: 12rem; height: 12rem; left: -4rem; bottom: -4rem; }
.sv-auth__panel > * { position: relative; z-index: 1; }
.sv-auth__panel img { height: 1.65rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 2.5rem; align-self: flex-start; }
.sv-auth__panel h2 { color: #fff; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .8rem; }
.sv-auth__panel p { color: rgba(255,255,255,.85); line-height: 1.65; margin: 0 0 2rem; }
.sv-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.sv-checks li { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.sv-checks i { width: 1.9rem; height: 1.9rem; border-radius: 999px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.sv-auth__panel-foot { margin-top: auto; padding-top: 2.5rem; font-size: .85rem; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .5rem; }
.sv-auth__form { padding: 2.75rem 2.75rem 2.5rem; }
.sv-auth__form h1 { color: var(--sv-ink); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.sv-auth__form .sv-sub { font-size: .95rem; margin-bottom: 1.5rem; }
.sv-auth__foot { text-align: center; color: var(--sv-mute); font-size: .92rem; margin: 1.1rem 0 0; }
.sv-auth__foot a, .sv-auth a.sv-link { color: var(--sv-accent); font-weight: 700; text-decoration: none; }
.sv-auth .form-check-input:checked { background-color: var(--sv-accent); border-color: var(--sv-accent); }
.sv-auth .input-icon-group .form-control { padding-left: 2.6rem; }
@media (max-width: 991.98px) {
  .sv-auth { padding: 1.5rem 0 3rem; }
  .sv-auth__shell { grid-template-columns: 1fr; border-radius: 18px; }
  .sv-auth__panel { padding: 2rem 1.75rem; }
  .sv-auth__panel img { margin-bottom: 1.25rem; }
  .sv-auth__panel p { margin-bottom: 1.25rem; }
  .sv-auth__panel-foot { display: none; }
  .sv-auth__form { padding: 2rem 1.5rem; }
}

.sv-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .35rem; background: var(--sv-line-soft); border: 1px solid var(--sv-line); border-radius: 12px; margin-bottom: 1.5rem; }
.sv-toggle button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; background: transparent; padding: .7rem; border-radius: 9px; font-weight: 700; color: var(--sv-mute); cursor: pointer; transition: all .18s ease; }
.sv-toggle button.is-active { background: var(--sv-accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(var(--sv-accent-rgb), .8); }

/* ===== Product page ===== */
.sv-pdp { padding: 1.75rem 0 4rem; }
.sv-pdp__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.sv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .88rem; color: var(--sv-mute); }
.sv-crumbs a { color: var(--sv-mute); text-decoration: none; }
.sv-crumbs a:hover { color: var(--sv-accent); }
.sv-crumbs > * + *::before { content: "\203A"; margin-right: .45rem; color: #cbd5e1; }
.sv-crumbs [aria-current] { color: var(--sv-ink); font-weight: 600; }
.sv-pdp__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; }
.sv-gallery__stage { position: relative; touch-action: pan-y; }
.sv-gallery__main.oa-pdp__media { width: 100%; aspect-ratio: 1 / 1; min-height: 0; border-radius: var(--sv-radius); background-color: var(--sv-line-soft); background-size: cover; background-position: center; border: 1px solid var(--sv-line); outline: none; transition: opacity .18s ease; }
.sv-gallery__main.oa-pdp__media.is-swap { animation: svGallerySwap .22s ease; }
@keyframes svGallerySwap {
  from { opacity: .55; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}
.sv-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 0;
  background: rgba(15, 23, 42, .55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2; backdrop-filter: blur(6px);
}
.sv-gallery__nav:hover, .sv-gallery__nav:focus-visible { background: rgba(15, 23, 42, .78); }
.sv-gallery__nav--prev { left: .65rem; }
.sv-gallery__nav--next { right: .65rem; }
.sv-gallery__dots {
  position: absolute; left: 0; right: 0; bottom: .7rem;
  display: flex; justify-content: center; gap: .4rem; z-index: 2; pointer-events: none;
}
.sv-gallery__dot {
  pointer-events: auto; width: .55rem; height: .55rem; border-radius: 999px; border: 0;
  padding: 0; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(15,23,42,.15);
}
.sv-gallery__dot.is-active { background: #fff; transform: scale(1.15); }
.sv-gallery__thumbs {
  display: flex; gap: .55rem; margin-top: .85rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; padding-bottom: .15rem;
}
.sv-gallery__thumb {
  flex: 0 0 auto; width: 4.25rem; height: 4.25rem; border-radius: 12px;
  border: 2px solid var(--sv-line); background-size: cover; background-position: center;
  background-color: var(--sv-line-soft); cursor: pointer; padding: 0; scroll-snap-align: start;
}
.sv-gallery__thumb.is-active, .sv-gallery__thumb:hover { border-color: var(--sv-accent); }
@media (max-width: 575.98px) {
  .sv-gallery__nav { width: 2.25rem; height: 2.25rem; }
  .sv-gallery__thumb { width: 3.75rem; height: 3.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-gallery__main.oa-pdp__media.is-swap { animation: none; }
}
.sv-pdp__info { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); padding: 1.85rem; box-shadow: var(--sv-shadow); }
.sv-pdp__brand { color: var(--sv-accent); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .4rem; }
.sv-pdp__title { font-family: inherit; color: var(--sv-ink); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .75rem; }
.sv-seller { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--sv-mute); font-size: .92rem; margin: 0 0 1rem; }
.sv-seller a { color: var(--sv-ink); font-weight: 700; text-decoration: none; }
.sv-seller a:hover { color: var(--sv-accent); }
.sv-pdp__price-row { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line); margin-bottom: 1.1rem; }
.sv-pdp__price { color: var(--sv-ink); font-size: clamp(1.7rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.02em; }
.sv-pdp__price-row .oa-pdp__compare { color: var(--sv-mute); text-decoration: line-through; font-size: 1rem; }
.sv-pdp__rating { color: var(--sv-mute); font-size: .84rem; margin-left: auto; }
.sv-pdp__lead { color: var(--sv-body); line-height: 1.65; margin: 0 0 1.25rem; }
.sv-spec { width: 100%; border: 1px solid var(--sv-line); border-radius: 12px; overflow: hidden; margin-bottom: 1.25rem; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.sv-spec th, .sv-spec td { padding: .75rem 1rem; border-bottom: 1px solid var(--sv-line); vertical-align: top; }
.sv-spec tr:last-child th, .sv-spec tr:last-child td { border-bottom: 0; }
.sv-spec th { width: 40%; color: var(--sv-mute); font-weight: 600; background: var(--sv-line-soft); }
.sv-spec td { color: var(--sv-ink); font-weight: 600; }
@media (max-width: 575.98px) {
  .sv-spec, .sv-spec tbody, .sv-spec tr, .sv-spec th, .sv-spec td { display: block; width: 100%; }
  .sv-spec th { padding-bottom: .2rem; border-bottom: 0; }
  .sv-spec td { padding-top: .2rem; }
  .sv-spec tr { border-bottom: 1px solid var(--sv-line); }
  .sv-spec tr:last-child { border-bottom: 0; }
}
.sv-pdp__opts { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.1rem; }
.sv-pdp__opts .oa-pdp__variants { flex: 1 1 100%; margin: 0; }
.sv-pdp__opts .oa-qty-input { width: 5.5rem; min-height: 2.75rem; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); text-align: center; background: var(--sv-card); color: var(--sv-ink); }
.sv-pdp__stock { font-size: .85rem; font-weight: 700; color: var(--sv-success); display: inline-flex; align-items: center; gap: .35rem; }
.sv-pdp__actions { display: grid; gap: .7rem; margin: 1.1rem 0 .85rem; }
.sv-pdp__foot { text-align: center; color: var(--sv-mute); font-size: .8rem; margin: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.sv-share { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.sv-share a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--sv-line); color: var(--sv-body); font-size: .8rem; font-weight: 600; text-decoration: none; }
.sv-share a:hover { border-color: var(--sv-accent); color: var(--sv-accent); }
.sv-pdp__desc { margin-top: 2rem; }
.sv-pdp__desc .oa-pdp__desc { color: var(--sv-body); line-height: 1.75; }
@media (min-width: 992px) { .sv-gallery { position: sticky; top: 1.5rem; } }
@media (max-width: 991.98px) { .sv-pdp__grid { grid-template-columns: 1fr; gap: 1.5rem; } .sv-pdp__info { padding: 1.35rem; } }

/* ===== Checkout ===== */
.sv-checkout { padding: 1.5rem 0 4rem; }
.sv-checkout__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; margin-bottom: 1.75rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); }
.sv-checkout__bar img { height: 1.65rem; width: auto; }
.sv-checkout__bar h1 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--sv-ink); }
.sv-checkout__bar h1 i { color: var(--sv-accent); }
.sv-checkout__bar .sv-badge { font-size: .78rem; }
.sv-checkout .oa-pay-options { display: grid; gap: .65rem; }
.sv-checkout .oa-pay-option { display: flex; align-items: center; gap: .75rem; padding: .95rem 1.1rem; border: 1.5px solid var(--sv-line); border-radius: 12px; cursor: pointer; background: var(--sv-card); font-weight: 600; color: var(--sv-ink); margin: 0; transition: border-color .15s ease, background .15s ease; }
.sv-checkout .oa-pay-option:has(input:checked) { border-color: var(--sv-accent); background: var(--sv-accent-soft); }
.sv-checkout .oa-pay-option input { accent-color: var(--sv-accent); width: 1.1rem; height: 1.1rem; }
.sv-checkout .oa-pay-option small { display: block; color: var(--sv-mute); font-weight: 500; font-size: .8rem; }
.sv-paymarks { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 0; }
.sv-paymarks span { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid var(--sv-line); border-radius: 6px; font-size: .74rem; font-weight: 800; color: var(--sv-body); background: var(--sv-card); letter-spacing: .02em; }
.sv-summary { position: sticky; top: 1.5rem; }
.sv-summary .oa-cart-lines { margin-bottom: 1rem; }
.sv-summary .oa-cart-line { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px dashed var(--sv-line); color: var(--sv-ink); font-weight: 600; font-size: .92rem; }
.sv-summary .oa-cart-line__meta { color: var(--sv-mute); font-weight: 500; font-size: .8rem; margin-top: .15rem; }
.sv-summary__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; color: var(--sv-body); font-size: .93rem; }
.sv-summary__row strong { color: var(--sv-ink); }
.sv-summary__row--fee { margin: .35rem -.75rem; padding: .7rem .75rem; border-radius: 10px; background: var(--sv-accent-soft); color: var(--sv-accent); font-weight: 600; }
.sv-summary__row--fee strong { color: var(--sv-accent); }
.sv-summary__row--total { border-top: 1px solid var(--sv-line); margin-top: .5rem; padding-top: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--sv-ink); }
.sv-summary__row--total strong { font-size: 1.4rem; font-weight: 800; }
.sv-summary__note { color: var(--sv-mute); font-size: .82rem; margin: .5rem 0 0; }
.sv-secured-by { display: flex; align-items: center; justify-content: center; gap: .45rem; color: var(--sv-mute); font-size: .82rem; margin: .9rem 0 0; }
.sv-secured-by strong { color: var(--sv-ink); }
.sv-checkout .oa-check-row { display: flex; gap: .55rem; align-items: center; font-size: .9rem; color: var(--sv-body); }
@media (max-width: 991.98px) { .sv-summary { position: static; } }
@media (max-width: 575.98px) {
  .sv-checkout { padding-top: 1rem; }
  .sv-checkout__bar { padding: .75rem 1rem; margin-bottom: 1.25rem; gap: .5rem .75rem; flex-wrap: wrap; }
  .sv-checkout__bar img { height: 1.35rem; flex-shrink: 0; }
  .sv-checkout__bar h1 { font-size: 1rem; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sv-checkout__bar .sv-badge { flex: 1 1 100%; }
  .sv-checkout .oa-pay-option { padding: .85rem .9rem; }
  .sv-summary__row--total strong { font-size: 1.25rem; }
}

/* ===== Payment success ===== */
.sv-success { max-width: 36rem; margin: 3rem auto 4rem; text-align: center; padding: 2.75rem 2rem; }
.sv-success h1, .sv-success h2.h1 { color: var(--sv-ink); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -.02em; margin: 0 0 .5rem; }

/* ===== Track order: order page (with link) and "find your order" form under a lifted hero ===== */
.sv-track { padding: 2rem 0 4.5rem; }
.storefront-body .oa-page-hero--lift + .sv-track { padding-top: 0; }
.storefront-body .oa-page-hero--lift + .sv-track .sv-track__form { position: relative; z-index: 2; margin-top: -3.5rem; box-shadow: var(--sv-shadow-lg); }
.sv-track .pwg-acct { font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; }
.sv-track .pwg-countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.sv-track .pwg-kv { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: .35rem .75rem; margin: 0; }
.sv-track .pwg-kv dt { font-weight: 600; color: var(--sv-mute); }
.sv-track .pwg-kv dd { margin: 0; word-break: break-word; }
.sv-track .pwg-timeline { list-style: none; padding: 0; margin: 0; }
.sv-track .pwg-timeline li { position: relative; padding: 0 0 .9rem 1.4rem; }
.sv-track .pwg-timeline li::before { content: ""; position: absolute; left: .3rem; top: .35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sv-accent); }
.sv-track .pwg-timeline li::after { content: ""; position: absolute; left: .53rem; top: 1rem; bottom: 0; width: 1px; background: var(--sv-line); }
.sv-track .pwg-timeline li:last-child::after { display: none; }
.sv-track .pwg-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-track .pwg-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--sv-line); }
.sv-track .pwg-stars button { background: none; border: 0; font-size: 1.6rem; color: #cbd5e1; padding: 0 .1rem; }
html.dark-mode .sv-track .pwg-stars button { color: #475569; }
.sv-track .pwg-stars button.is-on { color: #f59e0b; }
.sv-track .pwg-pin { font-size: 2rem; font-weight: 800; letter-spacing: .3em; }
.sv-track .pwg-acct, .sv-track .pwg-pin { white-space: nowrap; }
.sv-track #ptSupport { scroll-margin-top: 6rem; }
.sv-track .pwg-help__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.sv-track .pwg-help__status { font-size: .78rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; background: var(--sv-line-soft); color: var(--sv-body); }
.sv-track .pwg-help__status--open, .sv-track .pwg-help__status--in_progress { background: rgba(var(--sv-warn-rgb), .12); color: var(--sv-warn); }
.sv-track .pwg-help__status--pending_user { background: rgba(var(--sv-success-rgb), .12); color: var(--sv-success); }
.sv-track .pwg-chat { display: flex; flex-direction: column; gap: .6rem; max-height: 22rem; overflow-y: auto; margin-top: .85rem; padding: .75rem; background: var(--sv-line-soft); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); }
.sv-track .pwg-chat__msg { max-width: 85%; align-self: flex-start; padding: .55rem .8rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: 14px 14px 14px 4px; }
.sv-track .pwg-chat__msg--mine { align-self: flex-end; background: var(--sv-accent-soft); border-color: var(--sv-accent-ring); border-radius: 14px 14px 4px 14px; }
.sv-track .pwg-chat__who { margin-bottom: .15rem; font-size: .74rem; font-weight: 600; color: var(--sv-mute); }
.sv-track .pwg-chat__text { font-size: .92rem; line-height: 1.5; color: var(--sv-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-track .pwg-chips { position: relative; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; padding: 0; border: 0; }
.sv-track .pwg-chips legend { float: none; width: 100%; margin-bottom: .35rem; font-size: inherit; }
.sv-track .pwg-chips input { position: absolute; opacity: 0; pointer-events: none; }
.sv-track .pwg-chips label { cursor: pointer; padding: .4rem .85rem; font-size: .86rem; font-weight: 600; color: var(--sv-body); background: var(--sv-card); border: 1.5px solid var(--sv-line); border-radius: 999px; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.sv-track .pwg-chips label:hover { border-color: var(--sv-accent); }
.sv-track .pwg-chips input:checked + label { color: var(--sv-accent); background: var(--sv-accent-soft); border-color: var(--sv-accent); }
.sv-track .pwg-chips input:focus-visible + label { outline: 2px solid var(--sv-accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .sv-track .pwg-chat__msg { max-width: 92%; }
  .sv-track .pwg-kv { grid-template-columns: 1fr; gap: 0; }
  .sv-track .pwg-kv dd { margin-bottom: .6rem; }
  .sv-track .pwg-acct { font-size: 1.4rem; letter-spacing: .04em; white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
  .sv-track .pwg-pin { font-size: 1.7rem; letter-spacing: .2em; }
  .sv-track .pwg-thumbs img { width: 64px; height: 64px; }
}

/* ===== Signed-in shell: Seller Center + account (Users/Users.master) ===== */
.sc-body { background: var(--sv-bg); color: var(--sv-body); font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; }
.sc-top { position: sticky; top: 0; z-index: 1030; height: 4rem; display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; background: var(--sv-card); border-bottom: 1px solid var(--sv-line); }
.sc-top__menu { display: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--sv-line); border-radius: 10px; background: var(--sv-card); color: var(--sv-ink); font-size: 1.35rem; align-items: center; justify-content: center; }
.sc-top__brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.sc-top__brand img { height: 1.65rem; width: auto; }
.sc-top__tag { padding: .2rem .6rem; border-radius: 999px; background: var(--sv-accent-soft); color: var(--sv-accent); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sc-top__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.sc-top__link { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; color: var(--sv-body); font-weight: 600; font-size: .88rem; text-decoration: none; }
.sc-top__link:hover { background: var(--sv-line-soft); color: var(--sv-ink); }
.sc-top__icon { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--sv-body); font-size: 1.2rem; text-decoration: none; }
.sc-top__icon:hover { background: var(--sv-line-soft); color: var(--sv-ink); }
.sc-top__icon .oa-alert-badge { position: absolute; top: .1rem; right: .05rem; font-size: .62rem; }
.sc-top__user { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .6rem .3rem .3rem; border: 1px solid var(--sv-line); border-radius: 999px; background: var(--sv-card); color: var(--sv-ink); font-weight: 700; font-size: .88rem; }
.sc-top__user:hover { border-color: var(--sv-accent); }
.sc-top__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-avatar { width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-accent); color: #fff; font-size: .78rem; font-weight: 800; }
.sc-menu { min-width: 14rem; border-radius: 12px; }

.sc-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: calc(100vh - 4rem); }
.sc-side { position: sticky; top: 4rem; height: calc(100vh - 4rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1rem; background: var(--sv-card); border-right: 1px solid var(--sv-line); }
.sc-side__store { display: flex; align-items: center; gap: .75rem; padding: .85rem; border-radius: 12px; background: var(--sv-line-soft); }
.sc-side__store-ico { width: 2.4rem; height: 2.4rem; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-accent); color: #fff; }
.sc-side__store-name { margin: 0; color: var(--sv-ink); font-weight: 800; font-size: .9rem; }
.sc-side__store-link { color: var(--sv-accent); font-size: .78rem; font-weight: 700; text-decoration: none; }
.sc-side__store-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .85rem; margin-top: .15rem; }
.sc-side__store-copy { border: 0; background: transparent; padding: 0; color: var(--sv-accent); font-size: .78rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.sc-side__store-copy:hover { text-decoration: underline; }
.sc-share-strip { display: grid; gap: .65rem; margin-bottom: 1.25rem; padding: 1rem 1.15rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); }
.sc-share-strip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem .75rem; }
.sc-share-strip__title { margin: 0; color: var(--sv-ink); font-size: .95rem; font-weight: 800; }
.sc-share-strip__hint { margin: 0; color: var(--sv-mute); font-size: .8rem; }
.sc-share-strip__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-prod__link { margin-top: .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--sv-mute); word-break: break-all; }
.sv-copy-row--actions { flex-wrap: wrap; }
.sv-copy-row--actions .sv-btn { flex-shrink: 0; }
.sc-side__nav { display: grid; gap: .2rem; }
.sc-side__nav a, .sc-side__foot a { position: relative; display: flex; align-items: center; gap: .75rem; padding: .72rem .85rem; border-radius: 10px; color: var(--sv-body); font-weight: 600; font-size: .92rem; text-decoration: none; }
.sc-side__nav a i, .sc-side__foot a i { font-size: 1.08rem; width: 1.25rem; text-align: center; color: var(--sv-mute); }
.sc-side__nav a:hover, .sc-side__foot a:hover { background: var(--sv-line-soft); color: var(--sv-ink); }
.sc-side__nav a.is-active { background: var(--sv-accent-soft); color: var(--sv-accent); }
.sc-side__nav a.is-active i { color: var(--sv-accent); }
.sc-side__nav a.is-active::before { content: ""; position: absolute; left: -1rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--sv-accent); }
.sc-side__label { margin: 1.1rem 0 .35rem; padding: 0 .85rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-mute); }
.sc-side__foot { margin-top: auto; display: grid; gap: .2rem; padding-top: 1rem; border-top: 1px solid var(--sv-line); }
.sc-side__foot a.is-danger, .sc-side__foot a.is-danger i { color: var(--sv-danger); }
.sc-overlay { position: fixed; inset: 4rem 0 0; z-index: 1035; background: rgba(15, 23, 42, .45); }
.sc-main { min-width: 0; padding: 2rem 2.25rem 3rem; }
.sc-main > form { max-width: 76rem; margin: 0 auto; }
@media (max-width: 991.98px) {
  .sc-top { padding: 0 1rem; }
  .sc-top__menu { display: inline-flex; }
  .sc-top__link span, .sc-top__name { display: none; }
  .sc-shell { grid-template-columns: 1fr; }
  .sc-side { position: fixed; z-index: 1040; top: 4rem; left: 0; width: min(17rem, 85vw); height: calc(100dvh - 4rem); transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sv-shadow-lg); }
  .sc-side.is-open { transform: none; }
  .sc-main { padding: 1.25rem 1rem 2.5rem; }
}
@media (max-width: 575.98px) {
  .sc-top__tag { display: none; }
  .sc-top { gap: .5rem; padding: 0 .75rem; }
  .sc-top__actions { gap: .25rem; }
  .sc-top__brand img { height: 1.4rem; }
  .sc-top__user { padding: .2rem .4rem .2rem .2rem; }
  .sc-main { padding: 1rem .75rem 2rem; }
}
@media (max-width: 379.98px) { .sc-top__link { display: none; } }

.min-w-0 { min-width: 0; }
.sv-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sv-page-head h1 { margin: 0 0 .2rem; color: var(--sv-ink); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
.sv-page-head p { margin: 0; color: var(--sv-mute); }

/* Seller Center widgets */
.sc-stat-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; color: var(--sv-accent); font-size: .8rem; font-weight: 700; text-decoration: none; }
.sc-stat-link:hover { text-decoration: underline; }
.sc-thumb { width: 3rem; height: 3rem; border-radius: 10px; flex-shrink: 0; background: var(--sv-line-soft) center / cover no-repeat; display: inline-flex; align-items: center; justify-content: center; color: var(--sv-mute); font-size: 1.15rem; }
.sc-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: var(--sv-line-soft); color: var(--sv-mute); }
.sc-pill--live, .sc-pill--ok { background: rgba(var(--sv-success-rgb), .1); color: var(--sv-success); }
.sc-pill--pending, .sc-pill--warn { background: rgba(var(--sv-warn-rgb), .12); color: var(--sv-warn); }
.sc-pill--rejected, .sc-pill--danger { background: rgba(var(--sv-danger-rgb), .1); color: var(--sv-danger); }
.sc-pill--accent { background: var(--sv-accent-soft); color: var(--sv-accent); }
.sc-tabs { display: flex; flex-wrap: nowrap; gap: .4rem; margin-bottom: 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .15rem; }
.sc-tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border: 1px solid var(--sv-line); border-radius: 999px; background: var(--sv-card); color: var(--sv-body); font-weight: 700; font-size: .85rem; white-space: nowrap; flex-shrink: 0; }
.sc-tabs button span { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--sv-line-soft); color: var(--sv-mute); font-size: .72rem; line-height: 1.4rem; }
.sc-tabs button.is-active { border-color: var(--sv-accent); background: var(--sv-accent); color: #fff; }
.sc-tabs button.is-active span { background: rgba(255,255,255,.22); color: #fff; }

.sc-prod-list { display: grid; gap: .75rem; }
.sc-prod { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); }
.sc-prod__img { width: 4.5rem; height: 4.5rem; border-radius: 12px; background: var(--sv-line-soft) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--sv-mute); font-size: 1.4rem; }
.sc-prod__name { margin: 0 0 .2rem; color: var(--sv-ink); font-weight: 800; font-size: .98rem; }
.sc-prod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; color: var(--sv-mute); font-size: .82rem; }
.sc-prod__meta strong { color: var(--sv-ink); }
.sc-prod__note { margin-top: .55rem; padding: .55rem .75rem; border-radius: 10px; background: rgba(var(--sv-danger-rgb), .06); color: #991b1b; font-size: .82rem; }
.sc-prod__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
@media (max-width: 767.98px) {
  .sc-prod { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .sc-prod__img { width: 3.75rem; height: 3.75rem; }
  .sc-prod__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .sc-prod__actions .sc-act-view { display: none; }
  .sc-prod__actions .sv-btn--sm { padding-left: .65rem; padding-right: .65rem; }
  .sc-prod__actions .sc-act-label { display: none; }
  .sc-prod__actions .sv-btn--sm i { margin: 0; }
}
.sc-empty { text-align: center; padding: 3rem 1rem; color: var(--sv-mute); }
.sc-empty > i { display: block; font-size: 2.6rem; color: var(--sv-accent); margin-bottom: .75rem; }
.sc-empty h2 { color: var(--sv-ink); font-size: 1.15rem; font-weight: 800; }

/* Create / edit product */
.sc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.sc-form-grid .is-wide { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .sc-form-grid { grid-template-columns: 1fr; } }
.sc-hint { display: block; margin-top: .35rem; color: var(--sv-mute); font-size: .78rem; }
.sc-img-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.sc-img-tile { position: relative; width: 5.25rem; height: 5.25rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--sv-line); background: var(--sv-line-soft) center / cover no-repeat; }
.sc-img-tile.is-cover { outline: 2px solid var(--sv-accent); outline-offset: 2px; }
.sc-img-tile__cover { position: absolute; left: .25rem; bottom: .25rem; padding: .05rem .4rem; border-radius: 6px; background: var(--sv-accent); color: #fff; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.sc-img-tile__btn { position: absolute; top: .25rem; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .7); color: #fff; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.sc-img-tile__btn--remove { right: .25rem; }
.sc-img-tile__btn--cover { left: .25rem; }
.sc-img-add { position: relative; width: 5.25rem; height: 5.25rem; border: 2px dashed var(--sv-line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: var(--sv-accent); font-size: .72rem; font-weight: 700; cursor: pointer; background: var(--sv-card); }
.sc-img-add i { font-size: 1.3rem; }
.sc-img-add:hover { border-color: var(--sv-accent); background: var(--sv-accent-soft); }
.sc-img-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sc-review-note { margin-bottom: 1.25rem; }
.sc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.sc-actions .sv-btn--primary { flex: 1 1 16rem; }

.sv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.sv-stat { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); padding: 1.25rem 1.35rem; display: flex; gap: 1rem; align-items: center; }
.sv-stat__ico { width: 3rem; height: 3rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sv-accent-soft); color: var(--sv-accent); font-size: 1.3rem; }
.sv-stat__ico--ok { background: rgba(var(--sv-success-rgb), .1); color: var(--sv-success); }
.sv-stat__ico--warn { background: rgba(var(--sv-warn-rgb), .12); color: var(--sv-warn); }
.sv-stat__label { color: var(--sv-mute); font-size: .82rem; font-weight: 600; margin: 0 0 .15rem; }
.sv-stat__value { color: var(--sv-ink); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
@media (max-width: 1199.98px) { .sv-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sv-stats { grid-template-columns: 1fr; } }

.sv-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--sv-line); }
.sv-list-row:first-child { border-top: 0; }
a.sv-list-row--link { text-decoration: none; color: inherit; transition: background .15s ease; border-radius: 10px; margin: 0 -.35rem; padding-left: .35rem; padding-right: .35rem; }
a.sv-list-row--link:hover { background: var(--sv-line-soft); }
.sv-list-row__ico { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-line-soft); color: var(--sv-mute); flex-shrink: 0; }
.sv-list-row__main { display: flex; gap: .85rem; align-items: center; min-width: 0; }
.sv-list-row__title { color: var(--sv-ink); font-weight: 700; font-size: .93rem; margin: 0; }
.sv-list-row__meta { color: var(--sv-mute); font-size: .8rem; margin: 0; }
.sv-list-row__end { text-align: right; display: grid; gap: .3rem; justify-items: end; flex-shrink: 0; }
.sv-list-row__end strong { color: var(--sv-ink); }

.sv-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; text-align: center; padding: 1.75rem 1rem; border: 2px dashed var(--sv-line); border-radius: 14px; background: var(--sv-line-soft); color: var(--sv-mute); cursor: pointer; transition: border-color .15s ease, background .15s ease; position: relative; }
.sv-dropzone:hover, .sv-dropzone.is-over { border-color: var(--sv-accent); background: var(--sv-accent-soft); }
.sv-dropzone i { font-size: 2rem; color: var(--sv-accent); }
.sv-dropzone strong { color: var(--sv-ink); font-size: .95rem; }
.sv-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sv-dropzone img { max-width: 100%; max-height: 12rem; border-radius: 10px; object-fit: cover; }
.sv-copy-row { display: flex; gap: .5rem; }
.sv-copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

/* ===== Loading skeletons, empty states, busy feedback (storefront + Seller Center) ===== */
@keyframes sv-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sv-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--sv-line-soft) 25%, var(--sv-line) 37%, var(--sv-line-soft) 63%); background-size: 400% 100%; animation: sv-shimmer 1.2s ease-in-out infinite; }
.sv-skel--line { height: .75rem; margin-bottom: .5rem; }
.sv-skel--title { height: 1.1rem; width: 55%; margin-bottom: .75rem; }
.sv-skel--thumb { width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 12px; }
.sv-skel--btn { height: 2.4rem; width: 8rem; border-radius: 10px; }
.sv-skel--block { height: 7rem; border-radius: 12px; margin-bottom: 1rem; }
.sv-skel-row { display: flex; gap: .9rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--sv-line); }
.sv-skel-row:last-child { border-bottom: 0; }
.sv-skel-row__main { flex: 1; min-width: 0; }
.sv-skel-row__main .sv-skel--line:last-child { margin-bottom: 0; }
.sv-loading-card { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); padding: 1.25rem 1.35rem; }
.sv-loading-card + .sv-loading-card { margin-top: .75rem; }
.sv-fade-in { animation: sv-fade-in .25s ease both; }
.sv-empty { text-align: center; padding: 2.25rem 1.25rem; }
.sv-empty__icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--sv-accent-soft); color: var(--sv-accent); font-size: 1.75rem; }
.sv-empty__title { color: var(--sv-ink); font-weight: 800; font-size: 1.1rem; margin: 0 0 .35rem; }
.sv-empty__text { color: var(--sv-mute); font-size: .92rem; margin: 0 auto 1.25rem; max-width: 26rem; }
.sv-empty__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.sv-recent { margin: 1.5rem auto 0; max-width: 28rem; text-align: left; }
.sv-recent__title { color: var(--sv-mute); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .6rem; }
.sv-recent__list { display: grid; gap: .5rem; }
.sv-recent__item { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-card); color: var(--sv-ink); text-decoration: none; }
.sv-recent__item:hover { border-color: var(--sv-accent); color: var(--sv-ink); }
.sv-recent__thumb { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 10px; background: var(--sv-line-soft) center / cover no-repeat; display: inline-flex; align-items: center; justify-content: center; color: var(--sv-mute); }
.sv-recent__name { flex: 1; min-width: 0; font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-recent__price { color: var(--sv-mute); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.sv-spin { display: inline-block; width: 1em; height: 1em; border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sv-spin .7s linear infinite; vertical-align: -.125em; }
.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.sv-updating { opacity: .6; transition: opacity .15s ease; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sv-danger); }
.sv-field-err { color: var(--sv-danger); font-size: .8rem; margin-top: .3rem; }
.sv-offline { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2000; display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: #0f172a; color: #fff; font-size: .85rem; font-weight: 600; box-shadow: var(--sv-shadow-lg); max-width: calc(100vw - 2rem); }
@media (prefers-reduced-motion: reduce) {
  .sv-skel, .sv-spin { animation-duration: 0s; animation-iteration-count: 1; }
  .sv-fade-in { animation: none; }
}

/* Phones: 16px inputs stop iOS from zooming on focus; long tokens (emails, order numbers) wrap instead of widening the page. */
@media (max-width: 767.98px) and (pointer: coarse) {
  .form-control, .form-select, .form-control-sm, .form-select-sm, .sv-copy-row input, textarea { font-size: 16px; }
}
@media (max-width: 575.98px) {
  .sv-card, .sc-main, .sv-alert { overflow-wrap: anywhere; }
  .sv-list-row { flex-wrap: wrap; }
  .sv-list-row__end { text-align: left; justify-items: start; }
}

/* ===== Account pages in Users/ (Profile, EditUserProfile, Security, Alerts) ===== */
.sc-body {
  background: var(--sv-bg);
  color: var(--sv-body);
  --pg-surface: var(--sv-card);
  --pg-line: var(--sv-line);
  --pg-ink: var(--sv-ink);
  --pg-mute: var(--sv-mute);
  --pg-radius: var(--sv-radius-sm);
  --pg-blue: var(--sv-accent);
  --surface-card: var(--sv-card);
  --surface-dark: var(--sv-line-soft);
  --border-dark: var(--sv-line);
  --text-bright: var(--sv-ink);
  --text-dim: var(--sv-mute);
  --oa-display: inherit;
  --oa-ink: var(--sv-ink);
  --oa-stone: var(--sv-line);
  --oa-mist: var(--sv-line-soft);
}

/* Dark theme for the Seller Center. Bootstrap 5.2 has no built-in dark mode, so its light defaults are remapped here. */
html.dark-mode .sc-body {
  --sv-line-soft: #172033;
  --sv-accent: color-mix(in srgb, var(--AppColor, #1E40AF) 55%, #ffffff);
  --sv-accent-soft: rgba(var(--sv-accent-rgb), .2);
  --sv-accent-ring: rgba(var(--sv-accent-rgb), .4);
  --sv-success: #4ade80;
  --sv-danger: #f87171;
  --sv-warn: #fbbf24;
  --bs-body-color: var(--sv-body);
  --bs-body-bg: var(--sv-bg);
  --bs-border-color: var(--sv-line);
  --bs-secondary-color: var(--sv-mute);
  --bs-heading-color: var(--sv-ink);
  --bs-link-color: #93c5fd;
  --bs-link-hover-color: #bfdbfe;
  --bs-emphasis-color: var(--sv-ink);
  --bs-body-color-rgb: 203, 213, 225;
  --bs-secondary-rgb: 148, 163, 184;
  color-scheme: dark;
  color: var(--sv-body);
}
html.dark-mode .sc-body strong, html.dark-mode .sc-body b, html.dark-mode .sc-body label, html.dark-mode .sc-body legend,
html.dark-mode .sc-body th, html.dark-mode .sc-body dt { color: inherit; }
html.dark-mode .sc-body .fw-bold:not([class*="text-"]), html.dark-mode .sc-body .fw-semibold:not([class*="text-"]) { color: var(--sv-ink); }
html.dark-mode .sc-body .text-primary { color: var(--sv-accent) !important; }
html.dark-mode .sc-body code, html.dark-mode .sc-body .font-monospace { color: var(--sv-ink); }
html.dark-mode .sc-body select option { background: var(--sv-card); color: var(--sv-ink); }

/* SweetAlert dialogs (alertify-intercept.js) follow the theme too. */
html.dark-mode .swal2-popup, html.dark-mode .im { background: #111827 !important; color: #cbd5e1 !important; border-color: rgba(255, 255, 255, .08) !important; }
html.dark-mode .swal2-title, html.dark-mode .itl { color: #f1f5f9 !important; }
html.dark-mode .swal2-html-container, html.dark-mode .ic { color: #cbd5e1 !important; border-color: rgba(255, 255, 255, .08) !important; }
html.dark-mode .ib:active { background: rgba(255, 255, 255, .06) !important; }
html.dark-mode .ip, html.dark-mode .swal2-input { background: #0f172a !important; color: #f1f5f9 !important; border-color: rgba(255, 255, 255, .15) !important; }
html.dark-mode .it { background: rgba(17, 24, 39, .85) !important; color: #f1f5f9 !important; }
.sc-top__theme { border: 0; background: transparent; cursor: pointer; }
.sc-top__theme .bi-sun { display: none; }
html.dark-mode .sc-top__theme .bi-sun { display: inline-block; }
html.dark-mode .sc-top__theme .bi-moon-stars { display: none; }
html.dark-mode .sc-top, html.dark-mode .sc-side { background: var(--sv-card); border-color: var(--sv-line); }
html.dark-mode .sc-body .text-muted, html.dark-mode .sc-body .text-secondary, html.dark-mode .sc-body .form-text { color: var(--sv-mute) !important; }
html.dark-mode .sc-body .text-dark, html.dark-mode .sc-body .text-body, html.dark-mode .sc-body .text-black { color: var(--sv-ink) !important; }
html.dark-mode .sc-body .bg-white, html.dark-mode .sc-body .bg-light, html.dark-mode .sc-body .bg-body { background-color: var(--sv-card) !important; }
html.dark-mode .sc-body .border, html.dark-mode .sc-body .border-top, html.dark-mode .sc-body .border-bottom,
html.dark-mode .sc-body .border-start, html.dark-mode .sc-body .border-end { border-color: var(--sv-line) !important; }
html.dark-mode .sc-body h1, html.dark-mode .sc-body h2, html.dark-mode .sc-body h3, html.dark-mode .sc-body h4, html.dark-mode .sc-body h5, html.dark-mode .sc-body h6 { color: var(--sv-ink); }
html.dark-mode .sc-body a:not([class]) { color: #93c5fd; }
html.dark-mode .sc-body hr { border-color: var(--sv-line); opacity: 1; }
html.dark-mode .sc-body .form-control, html.dark-mode .sc-body .form-select, html.dark-mode .sc-body .input-group-text {
  background-color: #0f172a; border-color: var(--sv-line); color: var(--sv-ink);
}
html.dark-mode .sc-body .form-control::placeholder { color: #64748b; }
html.dark-mode .sc-body .form-control:disabled, html.dark-mode .sc-body .form-select:disabled, html.dark-mode .sc-body .form-control[readonly] { background-color: #172033; color: var(--sv-mute); }
html.dark-mode .sc-body .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html.dark-mode .sc-body .form-check-input { background-color: #0f172a; border-color: #475569; }
html.dark-mode .sc-body .form-check-input:checked { background-color: var(--sv-accent); border-color: var(--sv-accent); }
html.dark-mode .sc-body .form-label, html.dark-mode .sc-body .form-check-label { color: var(--sv-ink); }
html.dark-mode .sc-body .modal-content, html.dark-mode .sc-body .dropdown-menu, html.dark-mode .sc-body .card,
html.dark-mode .sc-body .list-group-item, html.dark-mode .sc-body .popover, html.dark-mode .sc-body .offcanvas, html.dark-mode .sc-body .accordion-item {
  background-color: var(--sv-card); border-color: var(--sv-line); color: var(--sv-body);
}
html.dark-mode .sc-body .modal-header, html.dark-mode .sc-body .modal-footer, html.dark-mode .sc-body .card-header, html.dark-mode .sc-body .card-footer { background-color: transparent; border-color: var(--sv-line); }
html.dark-mode .sc-body .accordion-button { background-color: var(--sv-card); color: var(--sv-ink); }
html.dark-mode .sc-body .accordion-button:not(.collapsed) { background-color: var(--sv-accent-soft); color: var(--sv-ink); }
html.dark-mode .sc-body .accordion-button::after, html.dark-mode .sc-body .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html.dark-mode .sc-body .dropdown-item { color: var(--sv-body); }
html.dark-mode .sc-body .dropdown-item:hover, html.dark-mode .sc-body .dropdown-item:focus { background-color: var(--sv-accent-soft); color: var(--sv-ink); }
html.dark-mode .sc-body .dropdown-divider { border-color: var(--sv-line); }
html.dark-mode .sc-body .table { --bs-table-bg: transparent; --bs-table-color: var(--sv-body); --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); color: var(--sv-body); border-color: var(--sv-line); }
html.dark-mode .sc-body .table > :not(caption) > * > * { border-bottom-color: var(--sv-line); }
html.dark-mode .sc-body .table thead th { color: var(--sv-mute); }
html.dark-mode .sc-body .btn-light, html.dark-mode .sc-body .btn-outline-secondary { background-color: #172033; border-color: var(--sv-line); color: var(--sv-body); }
html.dark-mode .sc-body .btn-outline-dark { border-color: var(--sv-line); color: var(--sv-ink); }
html.dark-mode .sc-body .badge.bg-light { color: var(--sv-ink) !important; }
html.dark-mode .sc-body .alert-warning { background-color: rgba(var(--sv-warn-rgb), .12); border-color: rgba(var(--sv-warn-rgb), .3); color: #fcd34d; }
html.dark-mode .sc-body .alert-info { background-color: var(--sv-accent-soft); border-color: var(--sv-accent-ring); color: #bfdbfe; }
html.dark-mode .sc-body .alert-success { background-color: rgba(var(--sv-success-rgb), .12); border-color: rgba(var(--sv-success-rgb), .3); color: #86efac; }
html.dark-mode .sc-body .alert-danger { background-color: rgba(var(--sv-danger-rgb), .12); border-color: rgba(var(--sv-danger-rgb), .3); color: #fca5a5; }
html.dark-mode .sc-body .sv-alert--ok { color: #86efac; }
html.dark-mode .sc-body .sc-prod__note { color: #fca5a5; background: rgba(var(--sv-danger-rgb), .12); }
html.dark-mode .sc-body .sv-card__title, html.dark-mode .sc-body .sv-list-row__title { color: var(--sv-ink); }
html.dark-mode .sc-body .oa-account-avatar { box-shadow: 0 0 0 4px var(--sv-card), 0 0 0 5px rgba(255, 255, 255, .12); }
html.dark-mode .sc-body .sv-btn--primary, html.dark-mode .sc-body .oa-btn--solid { box-shadow: none; }
.sc-body .oa-section { padding: 0; }
.sc-body .oa-section > .container { padding: 0; }
.oa-account { max-width: 52rem; margin: 0 auto; }
.oa-account--wide { max-width: 68rem; padding-top: 0 !important; }

.sc-body .oa-page-hero { position: relative; overflow: hidden; margin-bottom: 1.5rem; padding: 2rem 2rem 4.5rem; border-radius: var(--sv-radius); color: #fff;
  background: linear-gradient(135deg, var(--sv-accent) 0%, var(--sv-accent-dark) 100%); box-shadow: 0 18px 40px -22px rgba(var(--sv-accent-rgb), .8); }
.sc-body .oa-page-hero::before, .sc-body .oa-page-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.sc-body .oa-page-hero::before { width: 16rem; height: 16rem; right: -4rem; top: -6rem; }
.sc-body .oa-page-hero::after { width: 9rem; height: 9rem; right: 9rem; bottom: -5rem; }
.sc-body .oa-page-hero > .oa-account { position: relative; z-index: 1; margin: 0; max-width: none; }
.sc-body .oa-page-hero__brand { margin: 0 0 .35rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.sc-body .oa-page-hero .oa-account-hero__title { color: #fff; }
.sc-body .oa-page-hero .oa-account-hero__sub { color: rgba(255, 255, 255, .85); }
.sc-body .oa-page-hero + .oa-section { position: relative; z-index: 2; margin-top: -4rem; padding: 0 1.25rem !important; }

.oa-account-hero { margin-bottom: 1.5rem; }
.oa-account-hero__title { margin: 0 0 .25rem; color: var(--sv-ink); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
.oa-account-hero__sub { margin: 0; color: var(--sv-mute); }

.oa-account-crumb, .oa-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1rem; color: var(--sv-mute); font-size: .82rem; font-weight: 600; }
.oa-account-crumb a, .oa-breadcrumb a { color: var(--sv-accent); text-decoration: none; }
.oa-account-crumb a:hover, .oa-breadcrumb a:hover { text-decoration: underline; }
.oa-breadcrumb a::after { content: "/"; margin-left: .45rem; color: var(--sv-line); }
.oa-account-crumb__sep { color: var(--sv-line); }
.oa-account-crumb__current, .oa-breadcrumb [aria-current] { color: var(--sv-ink); }

.oa-account-identity { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); }
.oa-account-avatar { position: relative; flex-shrink: 0; width: 4.75rem; height: 4.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sv-accent-soft); color: var(--sv-accent); font-size: 1.6rem; font-weight: 800; box-shadow: 0 0 0 4px var(--sv-card), 0 0 0 5px var(--sv-accent-ring); }
.oa-account-avatar__badge { position: absolute; right: -.1rem; bottom: -.1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--sv-card); color: #fff; font-size: .8rem; }
.oa-account-avatar__badge.is-ok { background: var(--sv-success); }
.oa-account-avatar__badge.is-warn { background: var(--sv-warn); }
.oa-account-identity__meta { min-width: 0; }
.oa-account-identity__meta h1 { margin: 0 0 .2rem; color: var(--sv-ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.oa-account-identity__meta p { margin: 0 0 .5rem; color: var(--sv-mute); font-size: .9rem; overflow-wrap: anywhere; }
.oa-account-id { display: inline-flex; padding: .2rem .65rem; border-radius: 999px; background: var(--sv-line-soft); color: var(--sv-body); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700; }

.oa-account-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .25rem; }
.oa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.6rem; padding: .55rem 1.1rem; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm);
  background: var(--sv-card); color: var(--sv-body); font-weight: 700; font-size: .88rem; text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.oa-btn:hover { border-color: var(--sv-accent); color: var(--sv-accent); }
.oa-btn--solid { background: var(--sv-accent); border-color: var(--sv-accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--sv-accent-rgb), .7); }
.oa-btn--solid:hover { background: var(--sv-accent-dark); border-color: var(--sv-accent-dark); color: #fff; }
.oa-btn.btn-sm { min-height: 2.2rem; padding: .35rem .8rem; font-size: .8rem; }

.oa-account-section__label { margin: 0 0 .55rem .25rem; color: var(--sv-mute); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.oa-account-signout { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.5rem 0 .5rem; padding: .9rem; border: 1px solid rgba(var(--sv-danger-rgb), .35);
  border-radius: var(--sv-radius); background: var(--sv-card); color: var(--sv-danger); font-weight: 700; text-decoration: none; }
.oa-account-signout:hover { background: rgba(var(--sv-danger-rgb), .06); color: var(--sv-danger); }

@media (max-width: 575.98px) {
  .sc-body .oa-page-hero { padding: 1.5rem 1.25rem 4rem; }
  .sc-body .oa-page-hero + .oa-section { padding: 0 .5rem !important; }
  .oa-account-identity { flex-direction: column; text-align: center; padding: 1.25rem; }
  .oa-account-cta .oa-btn { flex: 1 1 auto; }
}

/* Saved items (browser-only list) */
.oa-product-card { position: relative; }
.oa-save-btn { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #1c1917;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); font-size: 1rem; line-height: 1; cursor: pointer; transition: transform .15s ease, color .15s ease; }
.oa-save-btn:hover { transform: scale(1.08); color: #e11d48; }
.oa-save-btn:focus-visible { outline: 2px solid var(--AppColor, #2563eb); outline-offset: 2px; }
.oa-save-btn.is-saved { color: #e11d48; }
.oa-save-pdp.is-saved { color: #e11d48; }
html.dark-mode .oa-save-btn { background: rgba(15,23,42,.85); color: #f1f5f9; }
html.dark-mode .oa-save-btn.is-saved, html.dark-mode .oa-save-btn:hover, html.dark-mode .oa-save-pdp.is-saved { color: #fb7185; }
.oa-pdp__tools { display: flex; align-items: center; gap: .5rem; }
.oa-saved__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.oa-saved__meta { color: var(--sv-mute); font-weight: 700; }
.oa-saved__note { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--sv-radius); background: rgba(251,191,36,.12); color: var(--sv-body); font-size: .9rem; }
.oa-saved__group + .oa-saved__group { margin-top: 2rem; }
.oa-saved__group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--sv-line); }
.oa-saved__store { margin: 0; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.oa-saved__visit { font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }.oa-saved__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.oa-saved__shared { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
  padding: .9rem 1rem; border: 1px solid var(--sv-line); border-left: 4px solid var(--AppColor, #2563eb); border-radius: var(--sv-radius); background: var(--sv-card); }
/* Cart grouped by store (one store selected per checkout) */
.oa-cart-multi { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .9rem; padding: .7rem .85rem; border-radius: var(--sv-radius);
  background: color-mix(in srgb, var(--AppColor, #2563eb) 8%, transparent); color: var(--sv-body); font-size: .86rem; line-height: 1.45; }
.oa-cart-multi .bi { color: var(--AppColor, #2563eb); margin-top: .1rem; }
.oa-cart-group + .oa-cart-group { margin-top: 1.1rem; }
.oa-cart-store .oa-cart-select-all span { display: inline-flex; align-items: center; gap: .35rem; }
.oa-cart-store .oa-cart-toolbar__meta { font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* Easy-reading text size (js/text-size.js): every size in this layer is rem, so the root size scales the whole page */
html.oa-text-lg { font-size: 112.5%; }
html.oa-text-xl { font-size: 125%; }
.oa-textsize-btn[data-size="lg"] .bi, .oa-textsize-btn[data-size="xl"] .bi { color: var(--AppColor, #2563eb); }
/* Skip link: hidden until focused with the keyboard */
.oa-skip { position: absolute; left: .75rem; top: -3rem; z-index: 3000; padding: .6rem 1rem; border-radius: var(--sv-radius, 10px);
  background: var(--AppColor, #2563eb); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s ease; }
.oa-skip:focus { top: .75rem; color: #fff; }
#oaMain:focus, #scMain:focus { outline: none; }
/* Back-in-stock alert on the product page */
.oa-notify { margin-top: .75rem; padding: 1rem 1.1rem; border: 1px dashed color-mix(in srgb, var(--AppColor, #2563eb) 45%, transparent);
  border-radius: var(--sv-radius, 10px); background: color-mix(in srgb, var(--AppColor, #2563eb) 6%, transparent); }
.oa-notify__title { margin: 0 0 .25rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; }
.oa-notify__title .bi { color: var(--AppColor, #2563eb); }
.oa-notify__text { margin: 0 0 .7rem; color: var(--sv-mute); font-size: .92rem; }
.oa-notify__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.oa-notify__row .form-control { flex: 1 1 12rem; min-height: 2.9rem; font-size: 1rem; }
.oa-notify__row .sv-btn { min-height: 2.9rem; }
.oa-notify__done { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #059669; }
html.dark-mode .oa-notify__done { color: #34d399; }
/* Celebration when payment lands or an order completes (skipped for reduced motion) */
.oa-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4000; }
.oa-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .95;
  animation-name: oa-confetti-fall; animation-timing-function: cubic-bezier(.25,.6,.45,1); animation-fill-mode: forwards; }
.oa-confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes oa-confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--oa-drift, 0px), 105vh, 0) rotate(720deg); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) { .oa-confetti { display: none; } }
/* Reviews (product and store pages), store tier badge and store stats */
.oa-stars { display: inline-flex; gap: .1rem; color: #f59e0b; font-size: .95em; vertical-align: -.05em; }
.oa-pdp__rating-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.oa-pdp__rating-link:hover { color: var(--sv-ink); }
.oa-store-rating { display: inline-flex; align-items: center; gap: .25rem; color: var(--sv-mute); font-size: .85rem; white-space: nowrap; }
.oa-store-rating .bi { color: #f59e0b; }
.oa-tier { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  white-space: nowrap; vertical-align: middle; background: var(--sv-line-soft, #f1f5f9); color: var(--sv-body); }
.oa-tier--top { background: rgba(245,158,11,.14); color: #b45309; }
.oa-tier--trusted { background: rgba(16,185,129,.13); color: #047857; }
html.dark-mode .oa-tier--top { color: #fbbf24; }
html.dark-mode .oa-tier--trusted { color: #34d399; }
.oa-store__stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .85rem 0 0; padding: 0; color: var(--sv-mute); font-size: .9rem; }
.oa-store__stats li { display: inline-flex; align-items: center; gap: .4rem; }
.oa-store__stats a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.oa-store__stats strong { color: var(--sv-ink); }
.oa-reviews { margin-top: 1.5rem; }
.oa-reviews__summary { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; margin-bottom: 1rem; }
.oa-reviews__score { display: grid; justify-items: start; gap: .2rem; }
.oa-reviews__avg { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--sv-ink); }
.oa-reviews__count { color: var(--sv-mute); font-size: .88rem; }
.oa-reviews__bars { list-style: none; margin: 0; padding: 0; flex: 1 1 14rem; max-width: 22rem; display: grid; gap: .3rem; }
.oa-reviews__bars li { display: grid; grid-template-columns: 2.4rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .84rem; color: var(--sv-mute); }
.oa-reviews__bars .bi { color: #f59e0b; font-size: .75rem; }
.oa-reviews__bar { height: .5rem; border-radius: 999px; background: var(--sv-line); overflow: hidden; }
.oa-reviews__bar span { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }
.oa-reviews__n { text-align: right; }
.oa-reviews__note { margin: 0 0 .5rem; color: var(--sv-mute); font-size: .84rem; display: flex; align-items: center; gap: .4rem; }
.oa-reviews__empty { margin: 0 0 .5rem; color: var(--sv-mute); }
.oa-review { padding: 1rem 0; border-top: 1px solid var(--sv-line); }
.oa-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.oa-review__name { color: var(--sv-ink); font-size: .95rem; }
.oa-review__meta { margin: .3rem 0 0; color: var(--sv-mute); font-size: .8rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.oa-review__text { margin: .5rem 0 0; color: var(--sv-body); line-height: 1.6; white-space: pre-line; }