:root {
  --site-background-overlay: rgba(246, 248, 252, 0.62);
  --ui-bg-page: transparent !important;
}

html {
  min-height: 100%;
  background-color: #dfeaf2 !important;
  background-image:
    linear-gradient(var(--site-background-overlay), var(--site-background-overlay)),
    url("/site-custom/site-background.png") !important;
  background-repeat: no-repeat !important;
  background-position: 50% 46% !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body {
  min-height: 100vh;
  background: transparent !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
}

#app {
  min-height: 100vh;
  background-color: transparent !important;
}

/* Vue adds bg-background to #app after hydration. Keep only that page layer
   transparent so cards, navigation, dialogs and menus retain their surfaces. */
html body #app.bg-background,
html body #app .min-h-screen.bg-background {
  background-color: transparent !important;
}

/* The active storefront template loads this shell stylesheet after Vue mounts.
   Its own background shorthand is what previously hid the root canvas. */
html body .vault-scope {
  background: transparent !important;
}

html.dark,
html[data-theme="dark"] {
  --site-background-overlay: rgba(5, 12, 22, 0.7);
  --ui-bg-page: transparent !important;
  background-color: #07101c !important;
}

@media (max-width: 768px) {
  :root {
    --site-background-overlay: rgba(246, 248, 252, 0.68);
  }

  html {
    /* Keep the character's face and upper body in the narrow viewport. */
    background-position: 37% 50% !important;
  }

  html.dark,
  html[data-theme="dark"] {
    --site-background-overlay: rgba(5, 12, 22, 0.76);
  }
}

@media (min-width: 1600px) {
  html {
    background-position: 50% 43% !important;
  }
}