.retailLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg, #f5f6f8) 90%, transparent);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.retailLoadingOverlay.visible { opacity: 1; visibility: visible; }
.retailLoadingBox {
  width: min(72vw, 250px);
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--text, #111827);
  text-align: center;
}
.retailLoadingMark { position: relative; width: 154px; height: 154px; }
.retailLoadingLogo {
  position: absolute;
  inset: 17px;
  width: 120px;
  height: 120px;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.retailLoadingDot {
  position: absolute;
  left: 68px;
  top: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #48c7ff;
  box-shadow: 0 0 7px #55d0ff, 0 0 15px #178eff, 0 0 25px #0b69ff;
  offset-path: path("M 8 48 C 8 8 72 4 77 47 C 82 89 146 91 146 48 C 146 8 82 4 77 47 C 72 89 8 91 8 48");
  animation: retailLogoWait 2.8s linear infinite;
}
.retailLoadingText { font-size: 16px; line-height: 1.3; font-weight: 750; }
.retailLoadingRetry {
  border: 0;
  border-radius: 13px;
  padding: 10px 18px;
  background: var(--accent, #0796d2);
  color: #fff;
  font: inherit;
  font-weight: 800;
}
.retailLoadingRetry.hidden { display: none !important; }
@keyframes retailLogoWait { to { offset-distance: 100%; } }
html[data-native-theme="dark"] .retailLoadingOverlay {
  background: rgba(15, 23, 42, .92);
}
html[data-native-theme="dark"] .retailLoadingBox { color: #f8fafc; }
.retailLoadingFrame {
  width:154px;
  height:154px;
  display:block;
  border:0;
  background:transparent;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce) {
  .retailLoadingDot { animation-duration: 5.5s; }
}