/* Option C spiderweb background — PREVIEW only when body.web-bg-on
   (server-injected with ?webBg=1). Darlene #84c re-preview (Grok #87).
   Web confined to top-right margin; content blocks use solid surface so
   text never sits on the web. Upload: /img/webC_drift.svg */

body.web-bg-on {
  --text: #26302B;
  --heading: #2F3D36;
  --charcoal: #26302B;
  color: #26302B;
}

body.web-bg-on.shop-page,
body.web-bg-on.bg-page {
  color: #26302B;
}

body.web-bg-on h1,
body.web-bg-on h2,
body.web-bg-on h3,
body.web-bg-on .font-display {
  color: var(--heading, #2F3D36);
}

/*
  Fixed drifting web — TOP-RIGHT CORNER ONLY (Darlene #84c).
  Smaller than v1 (was min(100vw,520px) full bleed behind content).
  Mask fades the web left/down so it stays in the margin/hero corner.
*/
body.web-bg-on::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: min(42vw, 300px);
  height: min(48vw, 340px);
  z-index: -1; /* #153: behind solid cards; #155: keep overlays fixed */
  pointer-events: none;
  background: url(/img/webC_drift.svg) top right / 100% auto no-repeat;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 92%),
    linear-gradient(to bottom, #000 40%, transparent 95%);
  mask-image: linear-gradient(to left, #000 35%, transparent 92%),
    linear-gradient(to bottom, #000 40%, transparent 95%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/*
  Stacking only — do NOT override position on .announcement-bar / .nav
  (they stay position:fixed; Darlene #90c). Relative is for scrolling content.
*/
/* Keep fixed chrome fixed (nav/announcement/chat) — only lift scrolling content */
body.web-bg-on .announcement-bar,
body.web-bg-on .nav {
  z-index: 200;
}

body.web-bg-on .chat-widget,
body.web-bg-on .chat-launcher {
  position: fixed;
  z-index: 9999;
}

/* Scroll content above web — NEVER include fixed overlays (#155) */
body.web-bg-on main,
body.web-bg-on footer {
  position: relative;
  z-index: 1;
}

/* #155: cart drawer must stay viewport-fixed (was relative → 4px tall) */
body.web-bg-on #cart-drawer.cart-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
}
body.web-bg-on #cart-drawer .cart-drawer-backdrop {
  position: absolute !important;
  inset: 0 !important;
}
body.web-bg-on #cart-drawer .cart-drawer-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
}
body.web-bg-on .toast {
  position: fixed !important;
  z-index: 1200 !important;
}
/* Mobile hamburger panel stays viewport-fixed (#155) */
@media (max-width: 1480px) {
  body.web-bg-on .nav-links {
    position: fixed;
  }
}

/* Solid surfaces so listing/title/description never sit on the web */
body.web-bg-on #listing-root,
body.web-bg-on #listing-root article,
body.web-bg-on .listing-layout,
body.web-bg-on .listing-buy-col,
body.web-bg-on .listing-gallery-col,
body.web-bg-on .listing-desc,
body.web-bg-on .prose,
body.web-bg-on .content-layout,
body.web-bg-on .faq-list,
body.web-bg-on .container > section,
body.web-bg-on .shop-listings,
body.web-bg-on #listings-grid,
body.web-bg-on .listing-card,
body.web-bg-on .spider-card {
  background-color: var(--surface, #FDFBF7);
}

body.web-bg-on #listing-root article,
body.web-bg-on .listing-layout,
body.web-bg-on .listing-buy-col {
  border-radius: 16px;
}

/* Hero: web may show in the empty right margin; text keeps tan halo */
body.web-bg-on .hero {
  background-color: transparent;
  background-image: none;
  position: relative;
  z-index: 1;
}

body.web-bg-on .hero-content,
body.web-bg-on .hero-grid .hero-content {
  background-color: rgba(253, 251, 247, 0.92);
  border-radius: 14px;
  padding: 0.75rem 1rem;
}

body.web-bg-on .hero h1,
body.web-bg-on .hero p {
  text-shadow: 0 0 6px #D2C6B6, 0 0 12px #D2C6B6, 0 0 2px #D2C6B6;
}

/* #129 go-live item 4: larger desktop web; phone unchanged */
@media (min-width: 1025px) {
  body.web-bg-on::before {
    width: min(55vw, 900px);
    height: 100vh;
    background-size: contain;
  }
}

/* Phone: even tighter corner so body copy stays clear */
@media (max-width: 768px) {
  body.web-bg-on::before {
    width: min(55vw, 200px);
    height: min(62vw, 230px);
    opacity: 0.75;
  }
}

/* Small preview marker so outside QA can confirm the flag without View Source */
.web-bg-preview-badge {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 99999;
  pointer-events: none;
  font: 600 11px/1.2 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: #f5e663;
  border: 1px solid #c4a800;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}