#store-page-preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#store-page-preloader .store-preloader {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}

#store-page-preloader .store-preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--focus-ring, rgba(49, 94, 251, 0.22));
  border-top-color: var(--primary-color, #163db8);
  border-right-color: var(--accent-color, #0ea5e9);
  animation: storePreloaderSpin 0.9s linear infinite;
}

#store-page-preloader .store-preloader-ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: storePreloaderSpinReverse 1.4s linear infinite;
}

#store-page-preloader .store-preloader-icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  font-size: 20px;
  background: var(--theme-gradient, linear-gradient(135deg, var(--primary-color, #163db8), var(--secondary-color, #315efb)));
  box-shadow: var(--theme-shadow, 0 12px 32px rgba(22, 61, 184, 0.15)), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: storePreloaderPulse 1.4s ease-in-out infinite;
}

#store-page-preloader svg {
  width: 70%;
  height: 70%;
  display: block;
  overflow: visible;
}

@keyframes storePreloaderSpin {
  to { transform: rotate(360deg); }
}

@keyframes storePreloaderSpinReverse {
  to { transform: rotate(-360deg); }
}

@keyframes storePreloaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  #store-page-preloader .store-preloader-ring,
  #store-page-preloader .store-preloader-ring::after,
  #store-page-preloader .store-preloader-icon {
    animation-duration: 2s;
  }
}

/* Shared storefront loading, retaining its readiness lifecycle. */
#store-page-preloader{background:var(--surface-color,#fff)}
#store-page-preloader .store-preloader{width:64px;height:64px}
#store-page-preloader .store-preloader-ring{border-width:3px;border-right-color:var(--focus-ring,#e2e8f0);animation-duration:.8s}
#store-page-preloader .store-preloader-ring::after{display:none}
#store-page-preloader .store-preloader-icon{width:36px;height:36px;color:var(--primary-color,#163db8);background:none;box-shadow:none;border-radius:0;animation:none}
@media(prefers-reduced-motion:reduce){#store-page-preloader .store-preloader-ring{animation:none}}