.site-editor-preview-banner {
  position: sticky;
  top: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: #fff3bf;
  color: #4d3a00;
  border-bottom: 1px solid #e7cc63;
  font: 800 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

[data-site-editor-hidden="1"] {
  display: none !important;
}

.site-editor-preline {
  white-space: pre-line;
}

[data-site-editor-background="color"] {
  background: var(--site-editor-bg-color) !important;
}

[data-site-editor-background="image"] {
  background-color: #07110f !important;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, var(--site-editor-bg-darkness)),
      rgba(0, 0, 0, var(--site-editor-bg-darkness))
    ),
    var(--site-editor-bg-desktop) !important;
  background-position: var(--site-editor-bg-position) !important;
  background-repeat: no-repeat !important;
  background-size: var(--site-editor-bg-fit) !important;
}

[data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index]:not([data-synced-hero-index="0"]) {
  background-image: none !important;
}

[data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"] {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, var(--site-editor-bg-darkness)) 0%,
      rgba(0, 0, 0, var(--site-editor-bg-darkness)) 54%,
      rgba(0, 0, 0, calc(var(--site-editor-bg-darkness) * 0.72)) 74%,
      rgba(0, 0, 0, calc(var(--site-editor-bg-darkness) * 0.55)) 100%
    ),
    linear-gradient(
      90deg,
      rgba(210, 235, 228, 0) 54%,
      rgba(210, 235, 228, 0.02) 72%,
      rgba(210, 235, 228, 0.045) 100%
    ),
    var(--site-editor-bg-desktop) !important;
}

[data-site-editor-image][data-site-editor-fit] img {
  object-fit: var(--site-editor-image-fit, cover) !important;
  object-position: var(--site-editor-image-x, center) var(--site-editor-image-y, center) !important;
  transform: scale(var(--site-editor-image-scale, 1));
  transform-origin: var(--site-editor-image-x, center) var(--site-editor-image-y, center);
}

[data-site-editor-fit="contain"] {
  --site-editor-image-fit: contain;
}

[data-site-editor-fit="cover"] {
  --site-editor-image-fit: cover;
}

[data-site-editor-position^="left-"] {
  --site-editor-image-x: left;
}

[data-site-editor-position^="center-"] {
  --site-editor-image-x: center;
}

[data-site-editor-position^="right-"] {
  --site-editor-image-x: right;
}

[data-site-editor-position$="-top"] {
  --site-editor-image-y: top;
}

[data-site-editor-position$="-center"] {
  --site-editor-image-y: center;
}

[data-site-editor-position$="-bottom"] {
  --site-editor-image-y: bottom;
}

[data-site-editor-scale="small"] {
  --site-editor-image-scale: .9;
}

[data-site-editor-scale="normal"] {
  --site-editor-image-scale: 1;
}

[data-site-editor-scale="large"] {
  --site-editor-image-scale: 1.1;
}

@media (max-width: 860px) {
  /*
   * Mobile already has the persistent two-button consultation bar.
   * Keep the hero actions in the document for desktop and analytics,
   * but do not render the duplicate pair above the hero image.
   */
  .public-site .v3-hero-actions {
    display: none !important;
  }

  [data-site-editor-background="image"] {
    background-image:
      linear-gradient(
        rgba(0, 0, 0, var(--site-editor-bg-darkness)),
        rgba(0, 0, 0, var(--site-editor-bg-darkness))
      ),
      var(--site-editor-bg-mobile) !important;
  }

  [data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"] {
    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, var(--site-editor-bg-darkness)) 0%,
        rgba(0, 0, 0, var(--site-editor-bg-darkness)) 54%,
        rgba(0, 0, 0, calc(var(--site-editor-bg-darkness) * 0.72)) 74%,
        rgba(0, 0, 0, calc(var(--site-editor-bg-darkness) * 0.55)) 100%
      ),
      linear-gradient(
        90deg,
        rgba(210, 235, 228, 0) 54%,
        rgba(210, 235, 228, 0.02) 72%,
        rgba(210, 235, 228, 0.045) 100%
      ),
      var(--site-editor-bg-mobile) !important;
    background-position: 72% calc(100% - 82px) !important;
    background-size: auto 49% !important;
  }
}
