body.has-website-background {
  --website-background-base: #000;
  --website-background-scrim: 0 0 0;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background-color: var(--website-background-base);
  background-image: none;
}

[data-theme="light"] body.has-website-background {
  --website-background-base: var(--color-bg, #f7f6f3);
  --website-background-scrim: 247 246 243;
}

body.has-website-background::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  content: "";
  pointer-events: none;
  background-color: var(--website-background-base);
  background-image:
    linear-gradient(
      rgb(var(--website-background-scrim) / var(--website-background-overlay-opacity, 0.8)),
      rgb(var(--website-background-scrim) / var(--website-background-overlay-opacity, 0.8))
    ),
    var(--website-background-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

body.has-website-background .home-banner,
body.has-website-background .home-banner__track {
  background: transparent;
}