/* Shared product backdrops: soft neutral gradients, with no decorative lines.
   Keep the product artwork, its transparent frame, and the page background separate.
   Explicit light defaults also cover a first render before the theme script loads. */
[data-product-backdrop] {
  --product-base: #d8d9d8;
  --product-warm: rgb(197 142 132 / 23%);
  --product-cool: rgb(170 182 189 / 16%);
  --product-mist: rgb(240 237 230 / 24%);
  --product-warm-position: 12% 10%;
  --product-cool-position: 95% 95%;
  --product-wash-angle: 135deg;
}

html[data-ds-theme="dark"] [data-product-backdrop] {
  --product-base: #434445;
  --product-warm: rgb(166 107 93 / 19%);
  --product-cool: rgb(111 130 146 / 13%);
  --product-mist: rgb(79 80 83 / 10%);
}

/* Membership: a gentle warm blush around the upper left of the devices. */
[data-product-backdrop="membership"] {
  --product-warm-position: 10% 12%;
  --product-cool-position: 95% 92%;
}

/* Rentals: a broad warm glow from the opposite side. */
[data-product-backdrop="rentals"] {
  --product-warm: rgb(198 159 128 / 25%);
  --product-cool: rgb(161 175 185 / 19%);
  --product-warm-position: 94% 22%;
  --product-cool-position: 5% 92%;
  --product-wash-angle: 225deg;
}
html[data-ds-theme="dark"] [data-product-backdrop="rentals"] {
  --product-warm: rgb(160 123 90 / 20%);
  --product-cool: rgb(105 127 145 / 14%);
}

/* Programming: muted sage and warm stone, still in the same neutral family. */
[data-product-backdrop="programming"] {
  --product-warm: rgb(157 177 162 / 25%);
  --product-cool: rgb(201 168 155 / 17%);
  --product-warm-position: 12% 88%;
  --product-cool-position: 85% 8%;
  --product-wash-angle: 35deg;
}
html[data-ds-theme="dark"] [data-product-backdrop="programming"] {
  --product-warm: rgb(107 141 120 / 18%);
  --product-cool: rgb(166 122 108 / 14%);
}

/* Bridge: the original coral/charcoal reference, softly feathered into gray. */
[data-product-backdrop="bridge"] {
  --product-warm: rgb(190 133 124 / 22%);
  --product-cool: rgb(180 183 190 / 12%);
  --product-warm-position: 0% 0%;
  --product-cool-position: 100% 100%;
}
html[data-ds-theme="dark"] [data-product-backdrop="bridge"] {
  --product-warm: rgb(159 103 91 / 18%);
  --product-cool: rgb(126 126 139 / 10%);
}

/* Operations: a cooler stone variant for the administrative interfaces. */
[data-product-backdrop="operations"] {
  --product-warm: rgb(155 171 188 / 23%);
  --product-cool: rgb(202 171 148 / 16%);
  --product-warm-position: 95% 10%;
  --product-cool-position: 10% 90%;
  --product-wash-angle: 210deg;
}
html[data-ds-theme="dark"] [data-product-backdrop="operations"] {
  --product-warm: rgb(105 125 151 / 18%);
  --product-cool: rgb(159 126 102 / 13%);
}

/* Specificity beats the old stage presets; inline editor overrides still work. */
html [data-product-backdrop]:is(.slide-shot, .home-rec-stage, .home-bridge-preview,
  .product-screenshot-well, .product-member-stage, .ai-orbit, .vision-art) {
  background-color: var(--product-base);
  background-image:
    radial-gradient(ellipse at var(--product-warm-position), var(--product-warm) 0%, transparent 72%),
    radial-gradient(ellipse at var(--product-cool-position), var(--product-cool) 0%, transparent 76%),
    linear-gradient(var(--product-wash-angle), transparent 15%, var(--product-mist) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Preserve old DOM positions for saved editor drafts, but retire photo plates. */
html .slide-shot[data-product-backdrop] > .plate { display: none !important; }
.product-member-stage[data-product-backdrop] > .product-member-orbit { display: none; }
.ai-orbit[data-product-backdrop]::before,
.ai-orbit[data-product-backdrop]::after { content: none; }
html[data-ds-theme] body .vision-art[data-product-backdrop] > .vision-plate { display: none !important; }
.vision-art[data-product-backdrop] > b {
  position: relative;
  bottom: auto;
  max-width: 100%;
  padding: 28px;
  color: var(--ds-text, #000c1f);
  font: 400 clamp(28px, 4vw, 56px)/1.2 var(--serif, Georgia, serif);
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
}
.ai-orbit[data-product-backdrop] i {
  background: var(--ds-background, #fff);
  color: var(--ds-text, #000c1f);
  border-color: var(--ds-line, #e1e4e8);
}