/* =============================================================
   LIQUID GLASS theme (experimental)
   Remove the <link> to this file to switch it off completely.
   ============================================================= */
:root {
  --muted: #b3b7bf;
  --glass: rgba(255,255,255,.055);
  --glass-strong: rgba(22,23,28,.55);
  --glass-edge: rgba(255,255,255,.14);
  --glass-hi: rgba(255,255,255,.22);
  --glass-blur: blur(22px) saturate(170%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.03), 0 18px 50px -20px rgba(0,0,0,.65);
}
:root[data-theme="light"] {
  --muted: #4b5058;
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.72);
  --glass-edge: rgba(1,1,3,.10);
  --glass-hi: rgba(255,255,255,.9);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -22px rgba(1,1,3,.28);
}

/* ---- ambient light behind the glass (the v1.0.0 look) ---- */
body { background: var(--bg); isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(210,253,95,.20), transparent 70%),
    radial-gradient(34% 30% at 92% 18%, rgba(124,92,255,.22), transparent 70%),
    radial-gradient(40% 36% at 78% 88%, rgba(42,171,238,.14), transparent 70%),
    radial-gradient(30% 28% at 18% 78%, rgba(210,253,95,.10), transparent 70%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(210,253,95,.55), transparent 70%),
    radial-gradient(34% 30% at 92% 18%, rgba(124,92,255,.22), transparent 70%),
    radial-gradient(40% 36% at 78% 88%, rgba(42,171,238,.18), transparent 70%);
}
/* Phones and tablets: iOS Safari 26 clips position:fixed layers to the area between its status bar and toolbar,
   so a fixed glow never reaches behind them and the bars show as flat black bands. Here the glow is part of the
   page instead (it scrolls, one glow set per screen), so Safari shows it through its bars like any other content.
   Each set fades out inside its own 1000px tile, so there are no seams. */
@media (max-width: 900px) {
  body { position: relative; }
  body::before {
    position: absolute; inset: 0;
    background-size: 100% 1000px; background-repeat: repeat-y;
    /* the very top and the very end of the page settle into the page colour, which is what Safari shows past them */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 420px), transparent calc(100% - 80px));
            mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 420px), transparent calc(100% - 80px));
    background-image:
      radial-gradient(48% 30% at 12% 22%, rgba(210,253,95,.20), transparent 70%),
      radial-gradient(44% 28% at 92% 36%, rgba(124,92,255,.22), transparent 70%),
      radial-gradient(50% 30% at 78% 74%, rgba(42,171,238,.14), transparent 70%),
      radial-gradient(40% 26% at 18% 62%, rgba(210,253,95,.10), transparent 70%);
  }
  :root[data-theme="light"] body::before {
    background-size: 100% 1000px; background-repeat: repeat-y;
    background-image:
      radial-gradient(48% 30% at 12% 22%, rgba(210,253,95,.55), transparent 70%),
      radial-gradient(44% 28% at 92% 36%, rgba(124,92,255,.22), transparent 70%),
      radial-gradient(50% 30% at 78% 74%, rgba(42,171,238,.18), transparent 70%);
  }
}

/* ---- the glass material ---- */
.card, .bento-main, .bento-dark, .buybox, .faq-wrap, .area, .line-card:not(.lime), .spec-card, .facts,
.table-wrap, .foot-card, .band, .filters, .seo-card, .assure-row > div, .flow .step, .how-steps li, .line-item,
.drawer-panel, .cart-pop-panel, .summary, .pdp-media .pimg, .brand-strip {
  background: var(--glass) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-shadow);
}
/* live blur is expensive – only floating surfaces that sit over moving content get it */
header.site .nav, .drawer-panel, .cart-pop-panel, .ptabs nav, .catalog-jump .group-nav {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* elements that need a positioning context for the rim (never override sticky/absolute ones) */
.card:not(.summary), .bento-dark, .buybox, .faq-wrap, .area, .line-card, .spec-card, .table-wrap, .foot-card, .band, .seo-card, .brand-strip { position: relative; }

/* specular rim: brighter top-left edge, fading around the shape */
.card::before, .bento-main::before, .bento-dark::before, .buybox::before, .faq-wrap::before, .area::before,
.line-card:not(.lime)::before, .spec-card::before, .table-wrap::before, .foot-card::before, .band::before,
.drawer-panel::before, .cart-pop-panel::before, .summary::before, .seo-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(145deg, var(--glass-hi), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.band { background: rgba(1,1,3,.45) !important; }
.brand-strip { border-radius: var(--r-lg); padding-inline: 20px; }
.drawer-panel, .cart-pop-panel { background: var(--glass-strong) !important; }
.pcard .pimg { background: rgba(255,255,255,.04); }
a.card:hover, .area:hover { background: rgba(255,255,255,.085) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 60px -24px rgba(0,0,0,.75); }

/* ---- floating glass header ---- */
header.site { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 0; }
header.site .nav { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: 999px; box-shadow: var(--glass-shadow); padding: 0 8px 0 18px; height: 60px; }
@media (max-width: 980px) { header.site .nav { padding: 0 8px; } }
.nav-links { background: rgba(255,255,255,.04); border-color: var(--glass-edge); }

/* ---- pills, chips, tabs, inputs ---- */
.icon-btn, .chip:not(.on), .eyebrow, .hero-badges li, .group-nav, .area-tabs, .ptabs nav, .qty, .btn-ghost, .stats-link,
.page-head .stats span, .drawer-close, .drawer-back, .drawer-theme, .pack {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--glass-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.pack.on { background: rgba(210,253,95,.12) !important; border-color: var(--accent-text) !important; }
.chip.on, .nav-links a.active, .group-nav .chip.on, .area-tabs .chip.on, .ptabs a.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 14px -4px rgba(210,253,95,.55); }
.ptabs, .catalog-jump { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ptabs nav, .catalog-jump .group-nav { background: var(--glass-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.input, .hero-search, .drawer-search { background-color: rgba(255,255,255,.05) !important; border-color: var(--glass-edge) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }

/* ---- lime surfaces: solid, with a glossy sheen ---- */
.btn-primary, .cart-btn .badge, .bento-lime, .line-card.lime, .final-cta, .toast, .drawer-all, .tag-new {
  background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 55%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(1,1,3,.08), 0 10px 30px -12px rgba(210,253,95,.45);
}
.bento-lime, .line-card.lime, .final-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 30px 70px -30px rgba(210,253,95,.55); }

/* ---- sticky mobile buy bar ----
   backdrop-filter on an ancestor traps position:fixed children, so the buy box drops its blur on phones */
@media (max-width: 900px) {
  .buybox { background: rgba(22,23,28,.72) !important; }
  :root[data-theme="light"] .buybox { background: rgba(255,255,255,.75) !important; }
  .buy-bar { background: var(--glass-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -12px 30px rgba(0,0,0,.35); }
}

/* ---- light theme tweaks ---- */
:root[data-theme="light"] .band:not(.band-soft) { background: rgba(1,1,3,.84) !important; }
:root[data-theme="light"] .band.band-soft { background: var(--glass) !important; color: var(--text); }
:root[data-theme="light"] .icon-btn, :root[data-theme="light"] .chip, :root[data-theme="light"] .pack,
:root[data-theme="light"] .qty, :root[data-theme="light"] .btn-ghost { background: rgba(255,255,255,.55) !important; }

/* ---- accessibility / performance ---- */
@media (prefers-reduced-transparency: reduce) {
  .card, .bento-main, .bento-dark, .buybox, .faq-wrap, .area, .line-card:not(.lime), .spec-card, .table-wrap, .foot-card,
  .drawer-panel, .cart-pop-panel, header.site .nav { background: var(--card) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .bento-main, .bento-dark, .buybox, .faq-wrap, .area, header.site .nav, .drawer-panel, .cart-pop-panel { background: var(--card) !important; }
}

/* ================= refinements ================= */
/* 1. header floats with a gap from the screen edges */
header.site { padding: 10px 12px; }
@media (min-width: 981px) { header.site { padding: 12px 20px; } }

/* 2. sticky bars sit clearly below the floating header */
.ptabs { top: 80px; padding-top: 6px; }
.catalog-jump { top: 80px; padding-top: 6px; }
.psec { scroll-margin-top: 170px; }
.catalog-jump ~ section { scroll-margin-top: 170px; }
@media (max-width: 560px) { .ptabs, .catalog-jump { top: 74px; } .psec { scroll-margin-top: 150px; } }

/* 3. light theme: footer stays a dark panel, soft band is light glass */
.foot-card { background: rgba(1,1,3,.86) !important; }
.band.band-soft { background: var(--glass) !important; color: var(--text); }
.band.band-soft .eyebrow { color: var(--text); }
:root[data-theme="light"] .band:not(.band-soft) { background: rgba(1,1,3,.84) !important; }
:root[data-theme="light"] .card::before, :root[data-theme="light"] .bento-main::before, :root[data-theme="light"] .area::before {
  background: linear-gradient(145deg, rgba(255,255,255,1), rgba(255,255,255,0) 40%); }
:root[data-theme="light"] .nav-links a:not(.active) { color: #3f434a; }

/* 5. floating glass dock for Add to cart (phones) */
@media (max-width: 900px) {
  .buy-bar {
    left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    padding: 8px 8px 8px 18px !important; gap: 10px !important; border-radius: 28px;
    background: rgba(18,19,24,.62) !important; -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.25) !important;
  }
  :root[data-theme="light"] .buy-bar { background: rgba(255,255,255,.72) !important; border-color: rgba(1,1,3,.10) !important; box-shadow: inset 0 1px 0 #fff, 0 20px 50px -16px rgba(1,1,3,.35) !important; }
  .buy-bar .buy-bar-price b { font-size: 19px; }
  .buy-bar .qty { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none; height: 44px; }
  :root[data-theme="light"] .buy-bar .qty { background: rgba(1,1,3,.05) !important; border-color: rgba(1,1,3,.08) !important; }
  .buy-bar .qty button { width: 32px; height: 44px; font-size: 17px; }
  .buy-bar .qty input { width: 22px; font-size: 15px; }
  .buy-bar #add { height: 48px; border-radius: 22px; padding: 0 18px !important; font-size: 15px; }
  body[data-page="product"] { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Add to cart: lime with the glass sheen */
#add { background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 55%) !important; }
#add:disabled { background-image: none !important; }
/* lighter tinted glass stands in for blur on cards */
.pcard, .area, .card { background: rgba(255,255,255,.045) !important; }
:root[data-theme="light"] .pcard, :root[data-theme="light"] .area, :root[data-theme="light"] .card { background: rgba(255,255,255,.66) !important; }

/* modern menu on glass */
.dm-search, .dm-line:not(.lime), .dm-tile, .dm-chip, .dm-rows, .dm-help { background: rgba(255,255,255,.055) !important; border-color: var(--glass-edge) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
:root[data-theme="light"] .dm-search, :root[data-theme="light"] .dm-line:not(.lime), :root[data-theme="light"] .dm-tile, :root[data-theme="light"] .dm-chip, :root[data-theme="light"] .dm-rows, :root[data-theme="light"] .dm-help { background: rgba(255,255,255,.7) !important; }
.dm-line.lime { background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 30px -14px rgba(210,253,95,.6); }
/* full-screen menu on glass */
.drawer.fm .drawer-panel { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }
.page-scrim.menu { background: rgba(6,7,10,.72); }
:root[data-theme="light"] .page-scrim.menu { background: rgba(245,245,239,.78); }
.fm-top { background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 999px; box-shadow: var(--glass-shadow); }
.fm-search { background: rgba(255,255,255,.06) !important; border-color: var(--glass-edge) !important; }
:root[data-theme="light"] .fm-search { background: rgba(255,255,255,.75) !important; }

/* account + bulk */
.bulk-points li, .acct-tabs, .acct-status { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
:root[data-theme="light"] .bulk-points li, :root[data-theme="light"] .acct-tabs { background: rgba(255,255,255,.66); border-color: rgba(1,1,3,.1); }
.acct-tabs .chip.on, .acct-status.shipped, .acct-status.delivered { background: var(--lime); }
:root[data-theme="light"] .acct-tabs .chip { background: transparent !important; color: var(--muted); }
:root[data-theme="light"] .acct-tabs .chip.on { background: var(--lime) !important; color: var(--ink); font-weight: 600; }
:root[data-theme="light"] .acct-filters .chip.on, :root[data-theme="light"] .acct-views .chip.on { background: var(--lime) !important; color: var(--ink); }
:root[data-theme="light"] .acct-views .chip:not(.on) { background: transparent !important; }
:root[data-theme="light"] .acct-status:not(.shipped):not(.delivered) { background: rgba(1,1,3,.06); border-color: rgba(1,1,3,.12); }


/* ================= edge-to-edge on iPhone (viewport-fit=cover) =================
   Safari 26 lets the page run under its status bar and toolbar (like native apps). Nothing fixed/sticky with a
   background may touch the screen edges, or Safari paints a solid band in that colour. So: the header sticks just
   below the status bar (transparent wrapper, glass pill inside), and content stays clear of the notch/home bar. */
body { padding-top: env(safe-area-inset-top); }
header.site { top: env(safe-area-inset-top); }
.ptabs, .catalog-jump { top: calc(80px + env(safe-area-inset-top)); }
@media (max-width: 560px) { .ptabs, .catalog-jump { top: calc(74px + env(safe-area-inset-top)); } }
.filters, .pdp-media, .summary { top: calc(90px + env(safe-area-inset-top)); }
html { scroll-padding-top: calc(112px + env(safe-area-inset-top)); }
footer.site { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) and (orientation: landscape) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
/* stacked layouts on phones/tablets: nothing sticky that could reach a screen edge */
/* relative, not static: .summary draws its glass rim with an absolute ::before that must stay inside the box */
@media (max-width: 900px) { .summary, .pdp-media, .filters, .bulk-intro, .faq-aside { position: relative; top: auto; } }

/* Phones: the floating "Add to cart" dock. iOS Safari 26 tints its bottom toolbar from the background-color or
   backdrop-filter of a fixed element near the bottom edge, so the fixed .buy-bar itself stays transparent and its
   glass is drawn by an absolute ::before layer behind the contents. */
@media (max-width: 900px) {
  .buy-bar { isolation: isolate; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-color: transparent !important; box-shadow: none !important; }
  .buy-bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: rgba(18,19,24,.62); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  }
  :root[data-theme="light"] .buy-bar::before { background: rgba(255,255,255,.72); border-color: rgba(1,1,3,.10); box-shadow: inset 0 1px 0 #fff; }
  :root[data-theme="light"] .buy-bar { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
  /* Safari colours its toolbar from the fixed element it finds just inside the bottom edge, unless that element is
     visibility:hidden with pointer-events:none, which WebKit deliberately skips. So the fixed wrapper is "invisible" to
     Safari, while its glass layer and contents stay visible and tappable. */
  .buy-bar { visibility: hidden; pointer-events: none; }
  .buy-bar::before, .buy-bar > * { visibility: visible; }
  .buy-bar > * { pointer-events: auto; }
}

/* ---- Safari 26 toolbar colour, the rule that matters (WebKit fixedContainerEdges) ----
   Safari only takes its status bar / toolbar colour from a fixed or sticky element that is at least 90% as wide as
   the screen. So the sticky/fixed wrappers are kept narrower than that, and their visible glass reaches back out to
   the usual width with negative margins: nothing looks different, but Safari never treats them as a coloured bar. */
.ptabs, .catalog-jump { margin-inline: 24px; }
.ptabs nav, .catalog-jump .group-nav { margin-inline: -24px; }
@media (max-width: 900px) {
  .buy-bar { --bx: max(32px, 6vw); left: var(--bx) !important; right: var(--bx) !important; }
  .buy-bar::before { inset: 0 calc(12px - var(--bx)); }
  .buy-bar > :first-child { margin-left: calc(12px - var(--bx)); }
  .buy-bar > :last-child { margin-right: calc(12px - var(--bx)); }
}

/* Tables scroll sideways (overflow:auto). iPhone Safari draws the masked rim layer wrongly inside a scrolling box
   (a half-transparent panel across the table), so tables get the rim as a plain inset highlight instead. */
.table-wrap::before { content: none; }
.table-wrap { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,.04), var(--glass-shadow) !important; }

/* ---- product page closing panel: crisp, no glow ----
   Flat lime with a fine edge; black pill buttons with the brand colour on the icon only. */
.final-cta {
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(1,1,3,.06) !important;
}
.final-cta h2 { letter-spacing: -.02em; }
.final-cta-btns { gap: 8px; }
.final-cta .btn-wa, .final-cta .btn-tg {
  height: 48px; padding: 0 20px; gap: 10px; border-radius: 999px; font-weight: 600; font-size: 15px;
  box-shadow: none !important; background-image: none !important; transition: background-color .15s, transform .15s;
}
.final-cta .btn-wa { background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink); }
.final-cta .btn-tg { background: transparent !important; color: var(--ink) !important; border: 1.5px solid rgba(1,1,3,.85); }
.final-cta .btn-wa .brand-ico { color: #25d366 !important; width: 20px; height: 20px; }
.final-cta .btn-tg .brand-ico { color: #1d93d2 !important; width: 20px; height: 20px; }
@media (hover: hover) {
  .final-cta .btn-wa:hover { background: #1c1d22 !important; }
  .final-cta .btn-tg:hover { background: rgba(1,1,3,.07) !important; }
}
.final-cta .btn-wa:active, .final-cta .btn-tg:active { transform: scale(.98); }

/* ---- product & brand pages: background glow in the brand's colours ----
   The two green glows stay; the other two take the brand's colour (Admin → Brands → Colour, set as --brand-glow).
   Every glow is a true circle (radius in vmax / px, not stretched to the page) with a soft, many-step falloff.
   Browsers without color-mix() keep the normal glow. */
body[data-page="product"], body[data-page="brand"] {
  --gl: 210, 253, 95;
  --b1: color-mix(in srgb, var(--brand-glow, #7c5cff) 24%, transparent);
  --b1m: color-mix(in srgb, var(--brand-glow, #7c5cff) 13%, transparent);
  --b1s: color-mix(in srgb, var(--brand-glow, #7c5cff) 5%, transparent);
  --b2: color-mix(in srgb, var(--brand-glow, #7c5cff) 17%, transparent);
  --b2m: color-mix(in srgb, var(--brand-glow, #7c5cff) 9%, transparent);
  --b2s: color-mix(in srgb, var(--brand-glow, #7c5cff) 3%, transparent);
}
:root[data-theme="light"] body[data-page="product"], :root[data-theme="light"] body[data-page="brand"] {
  --b1: color-mix(in srgb, var(--brand-glow, #7c5cff) 26%, transparent);
  --b1m: color-mix(in srgb, var(--brand-glow, #7c5cff) 14%, transparent);
  --b1s: color-mix(in srgb, var(--brand-glow, #7c5cff) 5%, transparent);
  --b2: color-mix(in srgb, var(--brand-glow, #7c5cff) 20%, transparent);
  --b2m: color-mix(in srgb, var(--brand-glow, #7c5cff) 10%, transparent);
  --b2s: color-mix(in srgb, var(--brand-glow, #7c5cff) 4%, transparent);
}
body[data-page="product"]::before, body[data-page="brand"]::before {
  background:
    radial-gradient(circle 34vmax at 12% 8%, rgba(var(--gl), .20), rgba(var(--gl), .12) 35%, rgba(var(--gl), .04) 68%, transparent 100%),
    radial-gradient(circle 32vmax at 90% 18%, var(--b1), var(--b1m) 35%, var(--b1s) 68%, transparent 100%),
    radial-gradient(circle 36vmax at 80% 88%, var(--b2), var(--b2m) 35%, var(--b2s) 68%, transparent 100%),
    radial-gradient(circle 26vmax at 16% 80%, rgba(var(--gl), .10), rgba(var(--gl), .06) 35%, rgba(var(--gl), .02) 68%, transparent 100%);
}
:root[data-theme="light"] body[data-page="product"]::before, :root[data-theme="light"] body[data-page="brand"]::before {
  background:
    radial-gradient(circle 34vmax at 12% 8%, rgba(var(--gl), .55), rgba(var(--gl), .32) 35%, rgba(var(--gl), .10) 68%, transparent 100%),
    radial-gradient(circle 32vmax at 90% 18%, var(--b1), var(--b1m) 35%, var(--b1s) 68%, transparent 100%),
    radial-gradient(circle 36vmax at 80% 88%, var(--b2), var(--b2m) 35%, var(--b2s) 68%, transparent 100%);
}
@media (max-width: 900px) {
  body[data-page="product"]::before, body[data-page="brand"]::before {
    background-size: 100% 1000px; background-repeat: repeat-y;
    background-image:
      radial-gradient(circle 230px at 14% 24%, rgba(var(--gl), .20), rgba(var(--gl), .12) 35%, rgba(var(--gl), .04) 68%, transparent 100%),
      radial-gradient(circle 220px at 90% 38%, var(--b1), var(--b1m) 35%, var(--b1s) 68%, transparent 100%),
      radial-gradient(circle 240px at 80% 74%, var(--b2), var(--b2m) 35%, var(--b2s) 68%, transparent 100%),
      radial-gradient(circle 190px at 16% 60%, rgba(var(--gl), .10), rgba(var(--gl), .06) 35%, rgba(var(--gl), .02) 68%, transparent 100%);
  }
  :root[data-theme="light"] body[data-page="product"]::before, :root[data-theme="light"] body[data-page="brand"]::before {
    background-size: 100% 1000px; background-repeat: repeat-y;
    background-image:
      radial-gradient(circle 230px at 14% 24%, rgba(var(--gl), .55), rgba(var(--gl), .32) 35%, rgba(var(--gl), .10) 68%, transparent 100%),
      radial-gradient(circle 220px at 90% 38%, var(--b1), var(--b1m) 35%, var(--b1s) 68%, transparent 100%),
      radial-gradient(circle 240px at 80% 74%, var(--b2), var(--b2m) 35%, var(--b2s) 68%, transparent 100%);
  }
}