/* v2.9.25.661 — DREAMY THEME behind product detail (Sohan 11/9: "i want that bg and effects behind the info when
   they click on an item and the expanded item info comes up … it shd be the main theme of our website").
   The kiosk/menu effect stack, as tuned for the alert popups (sr-alert.js render()):
     dark green radial gradient · grey ₿ pattern .065 · mint ₿ glyph tide (canvas, sr-dreamy-v1.js) ·
     footer smoke drift · shooting stars · breathing camel · see-through glass cards with green edges.
   Surfaces: the product popup (#sr-modal-overlay — menu/home, opened from cart lines + items without a page),
   the kiosk fallback detail (#sr-kiosk-detail) and every /item/ page (body.sr-dreamy-page, seo-router shell).
   Everything is scoped to .sr-dreamy / .sr-dreamy-page, which sr-dreamy-v1.js (popups) and the item shell add,
   so ?srdreamy=0 (sticky per tab) puts every surface back the way it was. Age gate untouched.
   Keyframes carry their own names (srDr*) so this file never fights mkBreathe / mkFtrSmk / srKioskShootingStar. */

/* ================= the backdrop layer (same markup everywhere) ================= */
.sr-dreamy-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0f2a17 0%, #0a140d 45%, #070b08 100%) #070b08; }
.sr-dreamy-bg > * { position: absolute; pointer-events: none; }
.sr-dreamy-bg .sr-dr-pat { inset: 0; background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat;
  opacity: .065; filter: grayscale(1) brightness(1.6); }
.sr-dreamy-bg .sr-dr-tide { inset: 0; width: 100%; height: 100%; display: block; }
.sr-dreamy-bg .sr-dr-smk { left: 0; bottom: 0; height: 38vh; width: 200%;
  background: url(../brand/hero-v2/smoke.webp) repeat-x 0 100% / 50% 100%; opacity: .55;
  -webkit-mask-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,.35) 70%, transparent);
  mask-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,.35) 70%, transparent);
  animation: srDrSmk 70s linear infinite; will-change: transform; }
.sr-dreamy-bg .sr-dr-star { left: 0; top: 0; width: clamp(94px, 12vw, 168px); height: 2px; border-radius: 999px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), rgba(126,217,87,.58), transparent);
  box-shadow: 0 0 16px rgba(126,217,87,.18); transform: translate3d(-18vw, -8vh, 0) rotate(-28deg);
  animation: srDrStar 15s linear infinite; }
.sr-dreamy-bg .sr-dr-star.a { top: 8%; animation-delay: .5s; }
.sr-dreamy-bg .sr-dr-star.b { top: 30%; animation-delay: 7s; animation-duration: 18s; }
.sr-dreamy-bg .sr-dr-star.c { top: 56%; animation-delay: 12s; animation-duration: 20s; }
@keyframes srDrSmk { to { transform: translate3d(-50%, 0, 0); } }
@keyframes srDrStar { 0%, 68%, 100% { opacity: 0; transform: translate3d(-18vw, -8vh, 0) rotate(-28deg); } 72% { opacity: .86; } 82% { opacity: 0; transform: translate3d(118vw, 54vh, 0) rotate(-28deg); } }
@keyframes srDrBreathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(126,217,87,.55)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 24px rgba(126,217,87,.95)); } }
@media (prefers-reduced-motion: reduce) { .sr-dreamy-bg .sr-dr-smk, .sr-dr-camel, .sr-dreamy-page .sr-lockup-camel { animation: none !important; } .sr-dreamy-bg .sr-dr-star { display: none; } }
/* store Surface Pros: CSS motion stays (compositor-only), the canvas runs at kiosk weight in JS, no glass blur */
html.sr-dreamy-kiosk .sr-dreamy-bg .sr-dr-star.c { display: none; }

/* ================= product popup (menu / home) ================= */
html:root body #sr-modal-overlay.sr-dreamy.sr-modal-open { background: #070b08 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root body #sr-modal-overlay.sr-dreamy > .sr-dreamy-bg { position: absolute; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal::before { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal { background: transparent !important; z-index: 2 !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-close { display: none !important; } /* the Back bar replaces the bare × */

/* glass card */
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-content { background: rgba(10,20,13,.74) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important; backdrop-filter: blur(8px) saturate(120%) !important;
  border: 1px solid rgba(126,217,87,.30) !important; border-radius: 18px !important; color: #e8f3ea !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important; text-align: left; }
html.sr-dreamy-kiosk body #sr-modal-overlay.sr-dreamy .sr-modal-content { background: rgba(10,20,13,.88) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-info-col { background: transparent !important; }
/* the photo keeps its light tile (product-card DNA: product shots sit on light) */
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-img-col { background: #f3f4f3 !important; border-right: 1px solid rgba(126,217,87,.22) !important; border-radius: 0 !important; }
/* one full-page link (the bar's) — the old inline text link duplicated it; Copy link stays */
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-permalink a { display: none !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-permalink #sr-modal-copylink { margin-left: 0 !important; }
/* text on the glass: light ink, green accents (no dark-on-dark, no thin green on white) */
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-info-col :is(h1,h2,h3,h4,p,li,span,div,strong,b,label,small,dt,dd,td,th,em),
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-desc :is(h1,h2,h3,h4,p,li,span,div,strong,b,label,small,dt,dd,td,th,em) { color: #e8f3ea !important; -webkit-text-fill-color: #e8f3ea !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-name { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:root body #sr-modal-overlay.sr-dreamy :is(.sr-modal-brand, .sr-modal-price, .sr-modal-price *) { color: #7ED957 !important; -webkit-text-fill-color: #7ED957 !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-price :is(s, del, .sr-was, [class*=was]) { color: #b9c7bc !important; -webkit-text-fill-color: #b9c7bc !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-content a:not(.sr-dr-full):not([class*=btn]):not([class*=cta]) { color: #7ED957 !important; -webkit-text-fill-color: #7ED957 !important; }
/* light sub-panels → glass tiles */
html:root body #sr-modal-overlay.sr-dreamy :is(.sr-badge-thc, .sr-badge-cat, .sr-badge-cbd, .sr-lvl-card, .sr-nerd-effect-card, .sr-modal-info-panel, .sr-modal-info-panel > div) {
  background: rgba(255,255,255,.06) !important; border-color: rgba(126,217,87,.30) !important; color: #e8f3ea !important; -webkit-text-fill-color: #e8f3ea !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-qty-btn { background: rgba(255,255,255,.08) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1px solid rgba(126,217,87,.45) !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-qty-val { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-variant-btn { background: rgba(255,255,255,.06) !important; color: #e8f3ea !important; -webkit-text-fill-color: #e8f3ea !important; border: 1.5px solid rgba(126,217,87,.40) !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-variant-btn * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-variant-btn.sr-variant-active { background: #7ED957 !important; color: #08200f !important; -webkit-text-fill-color: #08200f !important; border-color: #7ED957 !important; }
/* things that sit ON green keep dark ink (#08200f on #7ED957 rule) */
html:root body #sr-modal-overlay.sr-dreamy :is(.sr-badge-sativa, .sr-badge-indica, .sr-badge-hybrid, em.sr-lvl-badge),
html:root body #sr-modal-overlay.sr-dreamy :is(.sr-badge-sativa, .sr-badge-indica, .sr-badge-hybrid, em.sr-lvl-badge) * { color: #08200f !important; -webkit-text-fill-color: #08200f !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-add-btn { background: #7ED957 !important; color: #08200f !important; -webkit-text-fill-color: #08200f !important; box-shadow: 0 10px 28px rgba(126,217,87,.28) !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-add-btn * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
html:root body #sr-modal-overlay.sr-dreamy .sr-modal-add-btn:hover { background: #93e370 !important; }

/* Back / full-page bar: sticky at the top of the card so it is always one tap away */
.sr-dr-bar { position: sticky; top: 0; z-index: 6; grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: rgba(7,13,9,.86); border-bottom: 1px solid rgba(126,217,87,.30);
  border-radius: 18px 18px 0 0; font-family: Poppins, system-ui, sans-serif; }
.sr-dr-bar .sr-dr-back, .sr-dr-bar .sr-dr-full { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; font: 700 14px/1 Poppins, system-ui, sans-serif; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.sr-dr-bar .sr-dr-back { background: rgba(255,255,255,.08); color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1.5px solid rgba(126,217,87,.55); }
.sr-dr-bar .sr-dr-back:hover, .sr-dr-bar .sr-dr-back:focus-visible { background: rgba(126,217,87,.16); }
.sr-dr-bar .sr-dr-full { margin-left: auto; background: #7ED957; color: #08200f !important; -webkit-text-fill-color: #08200f !important; border: 0; }
.sr-dr-bar .sr-dr-full:hover, .sr-dr-bar .sr-dr-full:focus-visible { background: #93e370; }
.sr-dr-camel { height: 62px; width: auto; margin: -12px 0; flex: 0 0 auto; transform-origin: center; animation: srDrBreathe 2.8s ease-in-out infinite; }
.sr-dr-bar .sr-dr-back, .sr-dr-bar .sr-dr-full { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sr-dr-bar .sr-dr-s { display: none; }
@media (max-width: 560px) { .sr-dr-bar { gap: 8px; padding: 8px 10px; } .sr-dr-bar .sr-dr-back, .sr-dr-bar .sr-dr-full { padding: 0 13px; font-size: 13px; } .sr-dr-camel { height: 52px; margin: -10px 0; }
  .sr-dr-bar .sr-dr-l { display: none; } .sr-dr-bar .sr-dr-s { display: inline; } }
@media (max-width: 340px) { .sr-dr-camel { display: none; } }

/* ================= kiosk fallback detail (products with no /item/ page) ================= */
#sr-kiosk-detail.sr-dreamy { background: #070b08 !important; }
#sr-kiosk-detail.sr-dreamy > .sr-dreamy-bg { position: absolute; }
#sr-kiosk-detail.sr-dreamy > :not(.sr-dreamy-bg) { position: relative; z-index: 1; }

/* ================= /item/ pages (seo-router shell adds body.sr-dreamy-page + the layer) ================= */
html body.sr-dreamy-page { background: #070b08 !important; }
body.sr-dreamy-page .sr-seo-announce, body.sr-dreamy-page .sr-seo-wrap { position: relative; z-index: 1; }
/* one page-wide tide replaces the per-band ones (display:none also stops their canvases via IntersectionObserver) */
body.sr-dreamy-page .sr-seo-nav > .sr-tide, body.sr-dreamy-page section.sr-seo-hero > .sr-tide { display: none !important; }
body.sr-dreamy-page .sr-seo-nav { background: rgba(7,12,9,.72) !important; border-bottom: 1px solid rgba(126,217,87,.30) !important; }
body.sr-dreamy-page .sr-lockup-camel { animation: srDrBreathe 2.8s ease-in-out infinite; transform-origin: center; }
/* hero = the main glass card */
body.sr-dreamy-page section.sr-seo-hero { background: rgba(10,20,13,.52) !important; border: 1px solid rgba(126,217,87,.30) !important; border-radius: 18px !important;
  -webkit-backdrop-filter: blur(6px) saturate(125%); backdrop-filter: blur(6px) saturate(125%); box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
body.sr-dreamy-page :is(.sr-item-lab, .sr-item-ful div) { background: rgba(255,255,255,.05) !important; border-color: rgba(126,217,87,.30) !important; }
/* long-form copy sits on a quieter glass lane so the tide never fights the text (no blur: cheap on phones) */
body.sr-dreamy-page .sr-item-glass { background: rgba(7,12,9,.58); border: 1px solid rgba(126,217,87,.22); border-radius: 18px; padding: clamp(18px, 3.5vw, 32px); margin: 0 0 28px; }
body.sr-dreamy-page .sr-item-glass > :first-child { margin-top: 0; }
/* Back to menu pill (kiosk tabs already have the big kiosk bar) */
.sr-item-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; margin: 14px 0 0; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(126,217,87,.55); color: #fff !important; -webkit-text-fill-color: #fff !important;
  font: 700 14px/1 Poppins, system-ui, sans-serif; text-decoration: none !important; }
.sr-item-back:hover, .sr-item-back:focus-visible { background: rgba(126,217,87,.16); }
body.sr-dreamy-page .sr-item-back + section.sr-seo-hero { margin-top: 12px; }
html.sr-kiosk-mode .sr-item-back { display: none !important; }
html.sr-dreamy-kiosk body.sr-dreamy-page section.sr-seo-hero { background: rgba(10,20,13,.86) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.sr-kiosk-mode .sr-kbar { background: rgba(7,13,9,.90) !important; border-bottom: 1px solid rgba(126,217,87,.45) !important; }