/* theme.css — тумблер тёмной/светлой темы в правом нижнем углу.
   Взят с pointpixel.ru вместе с анимацией смены. Цвета — переменные
   магазина из app.css и ref.css: своей палитры здесь нет, иначе витрина
   в светлой теме перекрасилась бы под главную. Подключать после ref.css. */

:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* во время подмены темы живой DOM спрятан за снимками: любой transition
   стартует в замороженном поддереве и застывает на старом цвете — глушим их */
html.theme-swap, html.theme-swap body, html.theme-swap *,
html.theme-swap *::before, html.theme-swap *::after {
  transition: none !important;
}

/* мягкая смена: класс висит только на время переключения */
html.theming, html.theming body, html.theming *,
html.theming *::before, html.theming *::after {
  transition: background-color .62s cubic-bezier(.4,0,.2,1),
              border-color .62s cubic-bezier(.4,0,.2,1),
              color .62s cubic-bezier(.4,0,.2,1),
              box-shadow .62s cubic-bezier(.4,0,.2,1),
              fill .62s cubic-bezier(.4,0,.2,1) !important;
}
/* ползунок тумблера ездит своим ходом и во время переливания */
html.theming .theme-toggle .knob { transition: transform .5s cubic-bezier(.34,1.2,.4,1) !important; }

/* Под окнами товара (z-index 90): иначе тумблер висел бы поверх них. */
.theme-toggle {
  --knob: 20px;
  position: fixed; right: 20px; bottom: 20px; z-index: 60; flex: none; cursor: pointer;
  width: 52px; height: 26px; min-height: 0; padding: 0; margin: 0; line-height: 0;
  background: var(--chip); border: 1px solid var(--border-2); border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: border-color .2s, background-color .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .knob {
  position: absolute; top: 2px; left: 2px;
  width: var(--knob); height: var(--knob);
  background: var(--accent);
  transition: transform .5s cubic-bezier(.34,1.2,.4,1);
  display: grid; place-items: center;
}
html[data-knob="light"] .theme-toggle .knob { transform: translateX(26px); }
.theme-toggle .knob svg { width: 13px; height: 13px; display: block; color: #fff; }
.theme-toggle .knob .sun { display: none; }
html[data-knob="light"] .theme-toggle .knob .sun { display: block; }
html[data-knob="light"] .theme-toggle .knob .moon { display: none; }

@media (max-width: 560px) {
  .theme-toggle { right: 14px; bottom: 14px; }
}

/* круговая развёртка новой темы из точки тумблера */
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { opacity: 1; z-index: 0; }
::view-transition-new(root) { opacity: 1; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  html.theming, html.theming body, html.theming * { transition: none !important; }
  .theme-toggle .knob { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}