/* SuppVerse BD — header controls: animated day/night toggle + identical header geometry.
   Dark state = JS-synced .svtg-on (lags the page's .dark by ~2 frames so the animation
   starts AFTER the theme repaint and never stutters). Before JS runs, .dark is used. */

/* ── identical header geometry on every page (was 20px / 16px / 12px side insets, 56px / 58px height) ── */
html:root{--header-h:59px;--nav-h:59px}
.header.header,.s-header.s-header,.pv-header.pv-header{padding-left:16px;padding-right:16px}
.header-right{gap:8px}
.header-right .hcart,
.header-right #headerAccountBtn,
.header-right .theme-toggle.svtg{width:44px;height:44px}
.header-right .hcart svg{width:21px;height:21px;stroke:rgba(255,255,255,.85);stroke-width:2}

/* ── toggle ── */
.theme-toggle.svtg{
  --size:44px;--sun:#F4A922;--moon:#fff;--spark:#38b6ff;
  --dur:600ms;--ease:cubic-bezier(.65,0,.25,1);
  position:relative;overflow:visible;padding:0;
  background:transparent;border:1px solid transparent;
  color:var(--sun);box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease;
}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)){color:var(--moon)}
.theme-toggle.svtg:focus-visible{outline:2px solid #7c6ff7;outline-offset:3px}

/* border + glow live on two crossfading layers (opacity only = smooth) */
.theme-toggle.svtg::before,.theme-toggle.svtg::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  will-change:opacity;transition:opacity var(--dur) var(--ease);
}
.theme-toggle.svtg::before{
  border:1px solid rgba(244,169,34,.4);
  box-shadow:0 0 calc(var(--size)*.45) calc(var(--size)*-.08) rgba(244,169,34,.38);
  opacity:1;
}
.theme-toggle.svtg::after{
  border:1px solid rgba(56,182,255,.35);
  box-shadow:0 0 calc(var(--size)*.45) calc(var(--size)*-.08) rgba(56,182,255,.32);
  opacity:0;
}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js))::before{opacity:0}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js))::after{opacity:1}

/* wobble */
.theme-toggle.svtg.svtg-pop{animation:svtgPop var(--dur) var(--ease)}
@keyframes svtgPop{
  0%{transform:rotate(0) scale(1)}
  30%{transform:rotate(-8deg) scale(.94)}
  65%{transform:rotate(5deg) scale(1.05)}
  100%{transform:rotate(0) scale(1)}
}

/* icon */
.theme-toggle.svtg svg.svtg-i{
  position:static;width:calc(var(--size) - 16px);height:calc(var(--size) - 16px);stroke:none;fill:none;overflow:visible;display:block;
  opacity:1;transform:none;
  filter:none;
  transition:filter 0s linear calc(var(--dur)*.25);   /* halo swaps at mid-morph, no animated blur */
}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) svg.svtg-i{
  filter:drop-shadow(0 0 calc(var(--size)*.028) rgba(110,200,255,.7));
  transition-delay:calc(var(--dur)*.45);   /* night timing unchanged */
}
.svtg-i .core,.svtg-i .cut,.svtg-i .ray,.svtg-i .rays,.svtg-i .spark{
  transform-box:fill-box;transform-origin:center;
  transition:transform var(--dur) var(--ease),opacity calc(var(--dur)*.6) var(--ease);
}
.svtg-i .core{fill:currentColor}
.svtg-i .cut{transform:translate(14px,-14px)}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .core{transform:scale(1.444)}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .cut{transform:translate(3.3px,-1px)}

.svtg-i .rays{transform-box:view-box;transform-origin:12px 12px;transition-duration:calc(var(--dur)*.85);transition-delay:calc(var(--dur)*.25)}
.svtg-i .ray{
  stroke:currentColor;stroke-width:2.1;stroke-linecap:round;fill:none;
  transform-box:view-box;transform-origin:12px 12px;
  transition-duration:calc(var(--dur)*.85);
  transition-delay:calc(var(--dur)*.25 + var(--i)*18ms);   /* day: rays return a touch sooner */
}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .rays{transform:rotate(60deg);transition-duration:var(--dur);transition-delay:0s}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .ray{transform:scale(.15);opacity:0;transition-duration:var(--dur);transition-delay:calc(var(--i)*22ms)}

.svtg-i .spark{fill:var(--spark);stroke:none;transform:scale(0) rotate(-90deg);opacity:0;transition-delay:0s}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .spark{
  transform:scale(1) rotate(0);opacity:1;
  transition-timing-function:cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--dur)*.55);
}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .spark.b{transition-delay:calc(var(--dur)*.68)}
:is(.theme-toggle.svtg.svtg-on,.theme-toggle.svtg.dark:not(.svtg-js),html[data-sv-theme="dark"] .theme-toggle.svtg:not(.svtg-js)) .spark.c{transition-delay:calc(var(--dur)*.8)}

/* never animate on first paint */
.theme-toggle.svtg:not(.svtg-ready),
.theme-toggle.svtg:not(.svtg-ready) *,
.theme-toggle.svtg:not(.svtg-ready)::before,
.theme-toggle.svtg:not(.svtg-ready)::after{transition:none!important;animation:none!important}

@media (prefers-reduced-motion:reduce){
  .theme-toggle.svtg,.theme-toggle.svtg *,.theme-toggle.svtg::before,.theme-toggle.svtg::after{
    transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}

/* profile page has no account button: keep the toggle exactly where it sits on every other page */
.header-right:not(:has(.hcart)) .theme-toggle.svtg{margin-right:52px}

/* titles centred on the page everywhere (cart/orders/profile/wishlist already were) */
.header .hdr-title,.pv-header .pv-header-title{
  position:absolute;left:0;right:0;top:0;bottom:0;flex:none;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 112px;pointer-events:none;text-align:center;
}
.header .hdr-title h1,.pv-header .pv-header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* very small phones: keep the same layout, slightly smaller buttons on every page */
@media (max-width:340px){
  .header-right .hcart,.header-right #headerAccountBtn,.header-right .theme-toggle.svtg{width:40px;height:40px}
  .theme-toggle.svtg{--size:40px}
  .header .hdr-title,.pv-header .pv-header-title{padding:0 104px}
  .header-right:not(:has(.hcart)) .theme-toggle.svtg{margin-right:48px}
}