/* OneScene UX13: React Suspense preloader only. No DOM mutations, app CSS or React changes.
   This selector targets the canonical 100dvh loading fallback only. */
#root > main[role="status"][aria-live="polite"][style*="100dvh"] {
  background: radial-gradient(ellipse 420px 270px at 50% 43%, rgba(88,51,22,.11), transparent 80%), #0b0b0d !important;
  color: #f2e9df !important;
  text-align: center !important;
}
#root > main[role="status"][aria-live="polite"][style*="100dvh"] > div {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
}
/* Real approved square OneScene lockup from the product repository. Text remains
   in the DOM for accessibility; the image replaces only its visual appearance. */
#root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > div:first-child {
  box-sizing: border-box !important;
  display: block !important;
  width: 164px !important;
  height: 164px !important;
  margin: 0 auto 21px !important;
  padding: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  background: url('/assets/onescene-ux13-preloader-logo.webp') center / contain no-repeat !important;
}
#root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > h1 {
  margin: 0 !important;
  font: 500 clamp(18px, 2.5vw, 21px)/1.35 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: .005em !important;
  color: #eaded2 !important;
}
/* No redundant description beneath the loading status. The delayed error/retry
   panel is deliberately untouched so users can recover from a slow or failed load. */
#root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > p {
  display: none !important;
}
#root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > h1::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin: 19px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(197,146,48,.12), #d8ad50, rgba(197,146,48,.12));
  animation: onescene-ux13-load 1.7s ease-in-out infinite;
}
@keyframes onescene-ux13-load {
  0%, 100% { opacity: .3; transform: scaleX(.78); }
  50% { opacity: .9; transform: scaleX(1); }
}
@media (max-width: 600px) {
  #root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > div:first-child {
    width: 142px !important;
    height: 142px !important;
    margin-bottom: 20px !important;
  }
  #root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > h1 {
    font-size: 18px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #root > main[role="status"][aria-live="polite"][style*="100dvh"] > div > h1::after { animation: none !important; }
}

/* Loading chain (verified from active UX7/UX9 bundles):
   React lazy-Suspense downloads the app, then pv3-loading waits for route data.
   Preloading the app module reduces the first stage; a small presentation delay
   prevents an imperceptible fallback from flashing before the route loader. */
@keyframes onescene-ux13-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
#root > main[role="status"][aria-live="polite"][style*="100dvh"] > div {
  animation: onescene-ux13-enter .22s ease-out .26s both !important;
}
/* Section-level data loaders: their original font was 10px in the production
   ProductV3App CSS. Keep them inside the page shell, at a readable scale. */
#root .pv3-loading {
  min-height: clamp(180px, 29dvh, 310px) !important;
  gap: 9px !important;
  font-size: clamp(16px, 1.15vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #e4d6c5 !important;
  text-align: center !important;
  animation: onescene-ux13-enter .18s ease-out .15s both;
}
#root .pv3-loading span {
  margin-left: 9px !important;
  letter-spacing: .004em;
}
#root .pv3-loading i {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
}
@media (max-width: 600px) {
  #root .pv3-loading {
    min-height: 180px !important;
    font-size: 16px !important;
    padding-inline: 15px !important;
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  #root > main[role="status"][aria-live="polite"][style*="100dvh"] > div,
  #root .pv3-loading {
    animation: none !important;
  }
}