/* Higher specificity also covers retained styles from older open WebViews. */
html[data-storefront-bootstrap] .mini-app:not([hidden]) { display: block !important; }
html[data-storefront-bootstrap] .web-login { display: none !important; }
html[data-storefront-preview='home'][data-startup-state='loading'] .mini-app > .section-screens {
  opacity: 1 !important; visibility: visible !important;
}
html[data-storefront-bootstrap][data-startup-state='loading'] .mini-app > .startup-loading { display: none; }
html[data-storefront-preview='home'][data-startup-state='loading'] .section-screen:not(#screen-shop) { visibility: hidden !important; }
html[data-storefront-bootstrap][data-startup-state='loading'] .section-screens,
html[data-storefront-bootstrap][data-startup-state='loading'] .bottom-nav { pointer-events: none; }
html[data-storefront-preview='home'][data-startup-state='loading'] .web-navbar {
  opacity: 1 !important; visibility: visible !important; pointer-events: none;
}
.storefront-bootstrap.storefront-bootstrap--recovery {
  box-sizing: border-box; position: fixed; z-index: 1500;
  inset: var(--web-navbar-height, 0px) auto 0 50%;
  width: 100%; max-width: var(--app-max-width, 450px);
  height: auto; min-height: 0; max-height: none; margin: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0 16px max(16px, env(safe-area-inset-bottom, 0px));
  overflow: auto; border: 0; border-radius: 0; box-shadow: none;
  background: var(--color-bg, #191B1E); color: #F4F5F7;
  font: 14px/20px Inter, system-ui, sans-serif; text-align: center;
  pointer-events: auto; transform: translateX(-50%);
  animation: storefront-error-in 180ms ease-out both;
}
.storefront-bootstrap--recovery .storefront-bootstrap__content {
  flex: 1 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 32px 0;
}
.storefront-bootstrap--recovery .storefront-bootstrap__title {
  display: block; width: 100%; margin: 0; color: #F4F5F7;
  font-size: 22px; line-height: 28px; font-weight: 700; text-wrap: balance;
}
.storefront-bootstrap--recovery .storefront-bootstrap__message {
  display: block; width: 100%; max-width: 300px; margin: 0;
  color: #A4ABB7; font-size: 14px; line-height: 20px; text-wrap: balance;
}
.storefront-bootstrap--recovery .storefront-bootstrap__retry {
  box-sizing: border-box; flex: 0 0 auto; display: block;
  width: 100%; min-height: 54px; margin: 0; padding: 14px 20px;
  border: 0; border-radius: 27px; background: var(--color-accent, #48AEF2);
  color: #FFFFFF; font: inherit; font-size: 16px; line-height: 24px;
  font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.storefront-bootstrap--recovery[hidden],
.storefront-bootstrap--recovery .storefront-bootstrap__retry[hidden] { display: none !important; }
.storefront-bootstrap--recovery .storefront-bootstrap__retry:focus-visible { outline: 2px solid #B9E6FF; outline-offset: 3px; }
@keyframes storefront-error-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .storefront-bootstrap.storefront-bootstrap--recovery { animation: none; } }

/* Failed navigation retains ScreenTransition's original prepare/commit pair.
 * Only its recovery view covers the shop; ordinary pending navigation keeps
 * the existing route skeleton and cancellable bottom navigation. */
.screen-loading[data-state='error'] {
  position: fixed; inset: var(--web-navbar-height, 0px) auto 0 50%;
  top: var(--web-navbar-height, 0px) !important;
  z-index: 1500; width: 100%; max-width: var(--app-max-width, 450px);
  height: auto; transform: translateX(-50%);
}
.screen-loading[data-state='error'] > .screen-loading__view { display: none; }
.screen-loading[data-state='error'] .screen-loading__content {
  box-sizing: border-box; position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  padding: 0 16px max(16px, env(safe-area-inset-bottom, 0px)); overflow: auto;
  background: var(--color-bg, #191B1E); color: #F4F5F7; text-align: center;
}
.screen-loading[data-state='error'] .screen-loading__content[hidden] { display: none; }
.screen-loading[data-state='error'] .screen-loading__copy {
  flex: 1 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 56px 0;
}
.screen-loading[data-state='error'] .screen-loading__title {
  width: 100%; margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; text-wrap: balance;
}
.screen-loading[data-state='error'] .screen-loading__description {
  width: 100%; max-width: 300px; margin: 0; color: #A4ABB7;
  font-size: 14px; line-height: 20px; text-wrap: balance;
}
.screen-loading[data-state='error'] .screen-loading__actions { flex: 0 0 auto; display: block; }
.screen-loading[data-state='error'] .screen-loading__retry {
  box-sizing: border-box; display: block; width: 100%; min-height: 54px; margin: 0; padding: 14px 20px;
  border: 0; border-radius: 27px; background: var(--color-accent, #48AEF2); color: #FFFFFF;
  font: 600 16px/24px Inter, system-ui, sans-serif; cursor: pointer;
}
.screen-loading[data-state='error'] .screen-loading__cancel {
  box-sizing: border-box; position: absolute; top: 16px; left: 16px;
  display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 1px solid #FFFFFF1F; border-radius: 50%; background: #34393F; color: #D8DCE1;
  font: 400 25px/28px system-ui, sans-serif; cursor: pointer;
}