/* ============================================================================
 * Global Data — Back-to-Top button  ( #gd-backtotop )
 * A single, site-wide floating button for the redesigned product pages.
 *
 *  • Appears after the user scrolls past a threshold (.is-visible added by JS).
 *  • A thin progress ring tracks how far down the page you are.
 *  • SCROLL-SPY: the button samples whichever section sits under it and flips
 *    its own colours so it always has contrast — a LIGHT button on dark bands
 *    (.is-on-dark, set by JS) and a DARK button on light sections (default).
 *
 * Brand tokens: Manrope, #13ec80 primary green, navy ink #0b1220.
 * No icon font — the arrow + ring are inline SVG inside the button.
 * ========================================================================== */

#gd-backtotop{
  --gd-bt-green:#13ec80;
  --gd-bt-ink:#0b1220;
  --gd-bt-size:54px;

  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,20px); z-index:1000;
  width:var(--gd-bt-size); height:var(--gd-bt-size);
  display:grid; place-items:center;
  padding:0; border:none; border-radius:9999px; cursor:pointer;
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-appearance:none; appearance:none;

  /* hidden until scrolled */
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.92);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1),
             visibility .3s, background-color .35s ease, color .35s ease, box-shadow .35s ease;

  /* DEFAULT theme = on a LIGHT section → dark button */
  background:var(--gd-bt-ink);
  color:#fff;
  box-shadow:0 10px 26px -10px rgba(11,18,32,.55), 0 2px 6px rgba(11,18,32,.18);
}
#gd-backtotop *{ box-sizing:border-box; }

#gd-backtotop.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

#gd-backtotop:hover{ transform:translateY(-3px) scale(1.04); }
#gd-backtotop:active{ transform:translateY(-1px) scale(.99); }
#gd-backtotop:focus-visible{ outline:3px solid var(--gd-bt-green); outline-offset:3px; }

/* ON A DARK section → light button with green ink */
#gd-backtotop.is-on-dark{
  background:#fff;
  color:var(--gd-bt-ink);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
}

/* ---- the arrow glyph ---- */
#gd-backtotop .gd-bt-arrow{
  position:relative; z-index:2; width:20px; height:20px; display:block;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
#gd-backtotop:hover .gd-bt-arrow{ transform:translateY(-2px); }

/* ---- progress ring (SVG) ---- */
#gd-backtotop .gd-bt-ring{
  position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);
  pointer-events:none;
}
#gd-backtotop .gd-bt-ring circle{
  fill:none; stroke-width:2.5; cx:50%; cy:50%;
  r:calc(var(--gd-bt-size)/2 - 3px);
}
#gd-backtotop .gd-bt-ring .gd-bt-track{ stroke:currentColor; opacity:.18; }
#gd-backtotop .gd-bt-ring .gd-bt-prog{
  stroke:var(--gd-bt-green);
  stroke-linecap:round;
  /* dasharray/offset are set in JS from the live circumference + scroll % */
  transition:stroke-dashoffset .12s linear;
}

/* on the dark sections the green ring reads beautifully against white;
   on light sections it also sits well against the navy fill */

/* respect reduced motion: keep the show/hide but drop the springy transform */
@media (prefers-reduced-motion: reduce){
  #gd-backtotop{ transition:opacity .2s ease, background-color .35s, color .35s; transform:none; }
  #gd-backtotop.is-visible{ transform:none; }
  #gd-backtotop:hover{ transform:none; }
  #gd-backtotop .gd-bt-arrow{ transition:none; }
}

/* small screens: a touch smaller, hugged into the corner */
@media (max-width:560px){
  #gd-backtotop{ --gd-bt-size:48px; }
  #gd-backtotop .gd-bt-arrow{ width:18px; height:18px; }
}