/* KickUp — bottom-left controls: white/black slider + animation-mode slider.
   Written to also work on old phones (every env()/calc() has a plain fallback line before it). */
.theme-toggle{
  position:fixed; z-index:2000;
  left:14px; left:calc(14px + env(safe-area-inset-left, 0px));
  bottom:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  width:68px; height:36px; padding:0; margin:0;
  border-radius:999px; border:1.5px solid rgba(10,10,10,.14);
  background:#fff; color:#0A0A0A;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.theme-toggle:focus-visible{ outline:3px solid #E50910; outline-offset:3px; }
.theme-toggle__icon{
  position:absolute; top:50%; width:16px; height:16px; margin-top:-8px;
  stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.55; pointer-events:none;
}
.theme-toggle__icon--sun{ left:9px; }
.theme-toggle__icon--moon{ right:9px; }
.theme-toggle__knob{
  position:absolute; top:3px; left:3px; width:27px; height:27px; border-radius:50%;
  background:#0A0A0A; box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .3s cubic-bezier(.4,0,.2,1), background-color .3s ease;
  pointer-events:none;
}
html[data-theme="dark"] .theme-toggle{
  background:#1C1C20; color:#F4F4F5; border-color:rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
html[data-theme="dark"] .theme-toggle__knob{ background:#fff; -webkit-transform:translateX(32px); transform:translateX(32px); }

/* smooth colour fade, only during the switch */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}
@media (prefers-reduced-motion: reduce){
  .theme-toggle, .theme-toggle__knob{ transition:none; }
  html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition:none !important; }
}

/* ===== bigger + clearer on laptop / desktop ===== */
@media (min-width:900px){
  .theme-toggle{ left:24px; bottom:24px; width:82px; height:44px; }
  .theme-toggle__icon{ width:19px; height:19px; margin-top:-9.5px; }
  .theme-toggle__icon--sun{ left:11px; } .theme-toggle__icon--moon{ right:11px; }
  .theme-toggle__knob{ top:4px; left:4px; width:32px; height:32px; }
  html[data-theme="dark"] .theme-toggle__knob{ -webkit-transform:translateX(38px); transform:translateX(38px); }
}

/* ===== extra: thin red scroll-progress line (High mode, landing page) ===== */
.ku-progress{ position:fixed; z-index:1500; left:0; top:0; width:100%; height:3px; background:#E50910;
  -webkit-transform-origin:0 50%; transform-origin:0 50%; -webkit-transform:scaleX(0); transform:scaleX(0); pointer-events:none; }

/* ===== what Low / Very low do on shop + product pages (no blur, no fades) ===== */
.perf .sh-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--header-solid); }
.lite *, .lite *::before, .lite *::after{ transition-duration:0s !important; animation-duration:0s !important; }
.lite .theme-toggle, .lite .theme-toggle *{ transition-duration:.2s !important; }