/* PlayBoom «Спин 2» — демонстрационный дизайн главной.
   Светлая основа магазина (ориентир iCloud34) и тёмная сцена-спиннер,
   фирменный акцент из логотипа, вращающиеся приёмы по разделам.
   Мобильная версия — первой. */

@font-face { font-family: 'Onest'; src: url("../../spin/fonts/onest.7df81dd31ee4.woff2") format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Golos'; src: url("../../spin/fonts/golos.1a305d6386f1.woff2") format('woff2'); font-weight: 400 900; font-display: swap; }
@property --pa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --bg: #f5f5f7;
  --paper: #ffffff;
  --ink: #101014;
  --ink-2: #4a4a57;
  --ink-3: #6e6e7b;
  --line: rgba(16, 16, 20, .09);
  --violet: #6a2bb0;
  --indigo: #2e3192;
  --accent: #5b2db5;
  --grad: linear-gradient(135deg, #7a35d0 0%, #3b35b8 100%);
  --stage: #06060b;
  --display: 'Onest', 'Golos', system-ui, -apple-system, sans-serif;
  --ui: 'Golos', 'Onest', system-ui, -apple-system, sans-serif;
  --pad: clamp(16px, 4.6vw, 64px);
  --hdr: 60px;
  --tabbar: calc(58px + env(safe-area-inset-bottom));
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 1024px) { :root { --hdr: 72px; --tabbar: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.5 var(--ui);
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  padding-bottom: var(--tabbar);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
p { margin: 0; }
:focus-visible { outline: 3px solid #8f5cff; outline-offset: 3px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

/* ---------- типографика ---------- */
.kicker { font: 600 12px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.kicker--light { color: rgba(226, 212, 255, .85); }
.h2 { font: 800 clamp(34px, 6.4vw, 78px)/.95 var(--display); letter-spacing: -.045em; margin: 0; }
.h2--light { color: #fff; }
.h3 { font: 800 clamp(28px, 4.2vw, 52px)/1 var(--display); letter-spacing: -.04em; margin: 4px 0 14px; }
.h3--ink { color: var(--ink); }
.lead { font-size: clamp(15px, 1.35vw, 19px); color: var(--ink-2); margin-top: 14px; max-width: 38ch; }
.lead--light { color: rgba(255, 255, 255, .74); }
.note { color: var(--ink-2); font-size: 14px; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  font: 600 15px/1 var(--ui); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn:active { transform: scale(.97); }
.btn--primary { color: #fff; background: var(--grad); box-shadow: 0 10px 28px -12px rgba(122, 53, 208, .95); }
.btn--primary:hover { box-shadow: 0 14px 34px -12px rgba(122, 53, 208, 1); transform: translateY(-1px); }
.btn--ghost { background: rgba(16, 16, 20, .07); color: var(--ink); }
.btn--ghost:hover { background: rgba(16, 16, 20, .11); }
.btn--light { background: #fff; color: var(--ink); }
.btn--ghost-light { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .18); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.icon-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  transition: background-color .2s, transform .3s var(--ease);
}
.icon-btn:hover { background: rgba(16, 16, 20, .06); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn--soft { background: rgba(16, 16, 20, .06); flex: 0 0 44px; }
.icon-btn[aria-pressed="true"] svg { fill: #e0245e; stroke: #e0245e; }
.icon-btn.is-bump svg { animation: bump .7s var(--ease); }
@keyframes bump { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(200deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
.badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--violet); color: #fff; font: 700 11px/18px var(--ui); text-align: center; }

/* ---------- полоса демо и шапка ---------- */
.demo-strip { font-size: 12px; line-height: 1.3; text-align: center; padding: 7px 16px; background: #101014; color: #d9d9e3; }
.demo-strip__long { display: none; }
@media (min-width: 700px) { .demo-strip__long { display: inline; } .demo-strip__short { display: none; } }
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 247, .86);
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: transform .4s var(--ease);
}
.hdr.is-hidden { transform: translateY(-110%); }
.hdr__in { height: var(--hdr); display: flex; align-items: center; gap: 12px; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }
.hdr__logo { display: block; flex: 0 0 auto; margin-right: auto; }
.hdr__logo img { height: 28px; width: auto; }
.hdr__catalog { display: none; }
.hdr__search { display: none; }
.hdr__icons { display: flex; align-items: center; gap: 2px; }
.hdr.is-search .hdr__search {
  display: flex; position: absolute; left: 0; right: 0; top: 100%;
  padding: 10px var(--pad) 12px; background: rgba(245, 245, 247, .97); border-bottom: 1px solid var(--line);
}
.hdr__search { align-items: center; gap: 10px; }
.hdr__search svg { position: absolute; margin-left: 14px; width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; pointer-events: none; }
.hdr__search input {
  width: 100%; min-height: 46px; padding: 0 16px 0 44px; border-radius: 14px;
  border: 1.5px solid transparent; background: #fff; font: 400 16px var(--ui); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hdr__search input:focus { outline: none; border-color: #7b3fe4; }
@media (min-width: 1024px) {
  .hdr__logo { margin-right: 8px; }
  .hdr__logo img { height: 34px; }
  .hdr__catalog {
    display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px;
    border: 0; border-radius: 14px; background: var(--grad); color: #fff; font: 600 15px var(--ui); cursor: pointer;
  }
  .hdr__catalog-ico { display: grid; grid-template-columns: 6px 6px; gap: 3px; transition: transform .5s var(--ease); }
  .hdr__catalog-ico i { width: 6px; height: 6px; border-radius: 2px; background: #fff; }
  .hdr__catalog.is-open .hdr__catalog-ico { transform: rotate(135deg); }
  .hdr__search { display: flex; position: relative; flex: 1; max-width: 640px; }
  .hdr__search-btn { display: none; }
  .hdr__icons { margin-left: auto; }
}
.catalog-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(16, 16, 20, .35); }
.catalog-panel ul { list-style: none; margin: 0 auto; max-width: 1440px; padding: 16px var(--pad) 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; }
.catalog-panel a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 10px; }
.catalog-panel a:hover { color: var(--violet); }

/* ---------- категории ---------- */
.cats { padding: 14px 0 4px; }
.cats__list { list-style: none; margin: 0 auto; max-width: 1440px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--pad) 12px; scrollbar-width: none; }
.cats__list::-webkit-scrollbar { display: none; }
.chip { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 74px; color: inherit; text-decoration: none; scroll-snap-align: start; perspective: 520px; border-radius: 16px; }
.chip__img { width: 66px; height: 66px; border-radius: 22px; background: #ebebf0; display: flex; align-items: center; justify-content: center; transition: background-color .3s, box-shadow .3s; }
.chip__img img { width: 78%; height: 78%; min-width: 0; object-fit: contain; transition: transform .9s var(--ease); }
.chip:hover .chip__img, .chip.is-spin .chip__img { background: #e4dcf6; box-shadow: 0 10px 24px -14px rgba(106, 43, 176, .7); }
.chip:hover .chip__img img, .chip.is-spin .chip__img img { transform: rotateY(360deg) scale(1.08); }
.chip__txt { font: 500 12.5px/1.2 var(--ui); text-align: center; }
@media (min-width: 1024px) {
  .cats__list { justify-content: space-between; overflow: visible; }
  .chip { width: 100px; }
  .chip__img { width: 80px; height: 80px; border-radius: 26px; }
  .chip__txt { font-size: 14px; }
}

/* ---------- 1. спиннер ---------- */
.spin { padding: 6px var(--pad) 26px; max-width: 1440px; margin-inline: auto; }
.spin__card {
  position: relative; overflow: hidden; border-radius: 30px; background: var(--stage); color: #fff;
  isolation: isolate; padding: 24px 0 14px; display: flex; flex-direction: column;
}
.spin__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.spin__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 48%, transparent 42%, rgba(0, 0, 0, .72)); }
.spin__halo {
  position: absolute; left: 50%; top: 66%; width: max(120vmin, 880px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg); will-change: transform; opacity: .42; filter: blur(70px); mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(123, 63, 228, .7) 55deg, rgba(0, 179, 255, .42) 125deg, transparent 185deg, rgba(200, 107, 255, .55) 255deg, transparent 330deg);
}
.spin__tone { position: absolute; inset: 0; will-change: opacity; transition: none;
  background: radial-gradient(75% 70% at 50% 64%, rgb(var(--tc, 90 50 160) / .95), rgb(var(--tc, 90 50 160) / .32) 46%, transparent 74%), radial-gradient(60% 50% at 88% 8%, rgb(var(--tc, 90 50 160) / .35), transparent 70%); }
.spin__tone--b { opacity: 0; }
.spin__stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.spin__head { position: relative; z-index: 2; text-align: center; padding: 0 20px; order: 1; }
.spin__title { margin: 0; font: 800 clamp(44px, 12.5vw, 78px)/.95 var(--display); letter-spacing: -.05em; display: flex; flex-direction: column; align-items: center; }
.spin__lead { margin-inline: auto; font-size: 15px; }
.drum { position: relative; display: block; height: 1.1em; width: var(--drum-w, 7ch); max-width: 100%; perspective: 800px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.drum__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--dz, 1.7em))) rotateX(var(--dr, 0deg)); will-change: transform; }
.drum__face {
  position: absolute; left: 0; right: 0; top: 0; height: 1.1em; line-height: 1.1em; text-align: center; white-space: nowrap;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateX(var(--fa)) translateZ(var(--dz));
  background: linear-gradient(95deg, #e2c9ff 0%, #a98bff 40%, #7fd7ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pick { position: relative; z-index: 2; display: grid; gap: 12px; padding: 6px 20px 2px; text-align: center; order: 3; }
.pick__badge { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #eadcff; font: 600 12px/1 var(--ui); }
.pick__badge[hidden] { display: none; }
.pick__name { font: 800 clamp(22px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.03em; margin-top: 8px; }
.pick__meta { color: rgba(255, 255, 255, .66); font-size: 14px; margin-top: 4px; }
.pick__price { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.pick__price b { font: 800 26px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pick__price span { color: rgba(255, 255, 255, .62); font-size: 13px; }
.pick__act { display: flex; gap: 10px; justify-content: center; }

.stage { position: relative; height: clamp(300px, 44vh, 470px); margin-top: 6px; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -8px; z-index: 1; order: 2; }
.stage.is-3d { cursor: grab; }
.stage.is-drag { cursor: grabbing; }
.stage__spot {
  position: absolute; left: 50%; top: -22%; width: min(66%, 600px); height: 122%; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 158deg, rgba(170, 140, 255, .16) 170deg, rgba(255, 255, 255, .24) 180deg, rgba(170, 140, 255, .16) 190deg, transparent 202deg);
  filter: blur(16px); mix-blend-mode: screen;
}
.stage__floor {
  position: absolute; left: 4%; right: 4%; bottom: 2%; height: 36%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(123, 63, 228, .26), rgba(20, 16, 40, 0) 72%), repeating-radial-gradient(closest-side, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16px);
}
.stage__orbit { position: absolute; left: 7%; width: 86%; bottom: 6%; height: 30%; overflow: visible; pointer-events: none; }
.stage__orbit ellipse { fill: none; stroke: rgba(190, 160, 255, .4); stroke-width: 1.5; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stage__podium {
  position: absolute; left: 50%; bottom: 4%; width: min(40%, 380px); aspect-ratio: 3.8 / 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(160, 120, 255, .5), rgba(123, 63, 228, .12) 62%, transparent);
}
.stage__podium::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--pa), #7b3fe4, #00b3ff, #c86bff, #ffffff, #7b3fe4);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 99%, transparent 100%);
  filter: drop-shadow(0 0 8px rgba(170, 130, 255, .95)); animation: podium 5s linear infinite;
}
@keyframes podium { to { --pa: 360deg; } }
.stage.is-arrive .stage__podium { animation: pulse .9s var(--ease); }
@keyframes pulse { 0% { transform: translateX(-50%) scale(1); filter: brightness(1); } 35% { transform: translateX(-50%) scale(1.14); filter: brightness(1.9); } 100% { transform: translateX(-50%) scale(1); filter: brightness(1); } }

.ring { list-style: none; margin: 0; padding: 0 16px; display: flex; gap: 16px; overflow-x: auto; height: 100%; align-items: center; }
.stage.is-3d .ring { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; transform: scale(var(--rs, 1)); transform-origin: 50% 60%; }
.ring__item { --ih: 200px; --iw: calc(var(--ih) * var(--ar, .7)); position: relative; flex: 0 0 var(--iw); width: var(--iw); height: var(--ih); }
.ring__item--wide { --iw: 236px; }
.stage.is-3d .ring__item { position: absolute; left: 50%; top: 50%; margin: calc(var(--ih) / -2 - 10px) 0 0 calc(var(--iw) / -2); will-change: transform, opacity; }
@media (max-width: 699px) { .stage.is-3d .ring__item { top: 58%; } } /* на телефоне товар стоит ближе к подиуму */
.ring__btn { all: unset; display: block; position: relative; width: 100%; height: 100%; cursor: pointer; transition: transform 1s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--k, 0) * 60ms); }
.stage.is-intro .ring__btn { transform: translateY(60px) scale(.15) rotate(-30deg); opacity: 0; }
.ring__cv {
  display: block; width: 100%; height: 100%; pointer-events: none; user-select: none;
  -webkit-box-reflect: below 2px linear-gradient(transparent 78%, rgba(255, 255, 255, .2));
}
.ring__shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .85) 50%, transparent 64%); background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: var(--m) 50% 100% / contain no-repeat; mask: var(--m) 50% 100% / contain no-repeat;
}
.ring__item.is-arrive .ring__shine { animation: sweep 1.2s var(--ease) .12s both; }
@keyframes sweep { 0% { opacity: 1; background-position: 130% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } }
.ring__badge { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 11px/1 var(--ui); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.ring__item.is-front .ring__badge { opacity: 1; }
.stage__label { position: absolute; left: 0; right: 0; bottom: -2px; margin: 0; z-index: 260; display: none; justify-content: center; align-items: baseline; gap: 10px; pointer-events: none; font-size: 13px; color: rgba(255, 255, 255, .72); }
.stage__label b { font: 800 16px var(--display); color: #fff; letter-spacing: -.02em; }
.stage__nav {
  position: absolute; top: 50%; z-index: 300; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s var(--ease), background-color .25s;
}
.stage__nav:hover { transform: scale(1.08); background: rgba(255, 255, 255, .18); }
.stage__nav svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage__nav--prev { left: 10px; }
.stage__nav--next { right: 10px; }
.stage:not(.is-3d) .stage__nav, .stage:not(.is-3d) .stage__orbit, .stage:not(.is-3d) .stage__podium, .stage:not(.is-3d) .stage__label { display: none; }

.spin__foot { position: relative; z-index: 2; order: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px 0; color: rgba(255, 255, 255, .56); font: 600 13px var(--display); letter-spacing: .06em; }
.spin__count { font-variant-numeric: tabular-nums; }
.spin__hint { display: none; }
.stage__pause { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); cursor: pointer; }
.stage__pause svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stage__ico-play { display: none; fill: #fff !important; }
.stage__pause[aria-pressed="true"] .stage__ico-pause { display: none; }
.stage__pause[aria-pressed="true"] .stage__ico-play { display: block; }

@media (min-width: 700px) {
  .ring__item { --ih: 246px; }
  .ring__item--wide { --iw: 290px; }
  .spin__hint { display: block; }
}
@media (min-width: 1024px) {
  .spin__card { display: grid; grid-template-columns: 1.12fr .88fr; grid-template-areas: "head pick" "stage stage" "foot foot"; column-gap: 32px; padding: 34px 0 16px; }
  .spin__head { grid-area: head; text-align: left; padding: 0 0 0 56px; }
  .spin__title { flex-direction: row; align-items: baseline; gap: .22em; font-size: clamp(58px, 5.6vw, 100px); }
  .drum__face { text-align: left; }
  .spin__lead { margin-inline: 0; }
  .pick { grid-area: pick; align-self: end; text-align: left; padding: 0 56px 4px 0; }
  .pick__price, .pick__act { justify-content: flex-start; }
  .stage { grid-area: stage; height: clamp(380px, 50vh, 600px); margin-top: -64px; }
  .pick { gap: 10px; }
  .pick__price { flex-wrap: nowrap; gap: 22px; }
  .pick__name { margin-top: 6px; }
  .spin__foot { position: absolute; left: 56px; right: 56px; bottom: 18px; padding: 0; z-index: 320; pointer-events: none; }
  .spin__foot .stage__pause { pointer-events: auto; }
  .spin__card { grid-template-areas: "head pick" "stage stage"; padding-top: 26px; padding-bottom: 8px; }
  .ring__item { --ih: 310px; }
  .ring__item--wide { --iw: 370px; }
  .stage__nav--prev { left: 32px; }
  .stage__nav--next { right: 32px; }
  .stage__label { display: none; }
}

/* ---------- 2. популярное ---------- */
.rail { padding: 34px 0 18px; }
.rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.rail__view { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 0 30px; }
.rail__view::-webkit-scrollbar { display: none; }
.rail__view.is-grab { cursor: grab; }
.rail__view.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__track { position: relative; list-style: none; margin: 0; display: flex; gap: 14px; padding: 0 var(--pad); width: max-content; }
.pcard {
  width: 252px; scroll-snap-align: center; background: #fff; border-radius: 26px; padding: 14px 14px 16px;
  display: flex; flex-direction: column; transform-origin: 50% 50%; will-change: transform;
  box-shadow: 0 1px 0 rgba(16, 16, 20, .04), 0 22px 44px -30px rgba(16, 16, 20, .4);
}
.pcard__img { height: 200px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #ffffff, #ecebf2 72%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard__img img { width: 84%; height: 84%; object-fit: contain; transition: transform .8s var(--ease); -webkit-user-drag: none; }
.pcard:hover .pcard__img img { transform: scale(1.07) rotate(-3deg); }
.pcard__tag { align-self: flex-start; margin-top: 12px; padding: 4px 8px; border-radius: 8px; font: 600 11px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--violet); background: rgba(106, 43, 176, .09); }
.pcard__tag--muted { color: var(--ink-2); background: rgba(16, 16, 20, .05); }
.pcard__name { font: 800 18px/1.2 var(--display); letter-spacing: -.02em; margin: 8px 0 0; }
.pcard__meta { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.pcard__price { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.pcard__price b { font: 800 23px/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-right: 4px; }
.pcard__price2 { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.pcard__act { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 14px; }
.pcard__act .btn { flex: 1; }
@media (min-width: 1024px) { .pcard { width: 300px; } .pcard__img { height: 240px; } }

/* ---------- 3. цвет: переворот ---------- */
.colors { background: #f7f4f1; overflow: clip; }
.colors__pin { min-height: 100vh; display: flex; align-items: center; padding: 56px 0; }
.colors__in { display: grid; gap: 18px; align-items: center; }
.colors__name { position: relative; height: 1.1em; font: 800 clamp(34px, 9.4vw, 64px)/1.05 var(--display); letter-spacing: -.05em; margin: 14px 0 16px; overflow: hidden; }
.colors__name span { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.colors__name span.is-on { transform: none; opacity: 1; }
[data-cname="amber"] { color: #8f5212; }
[data-cname="pink"] { color: #a8435a; }
[data-cname="plum"] { color: #5b2442; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px 0 7px; border-radius: 999px; border: 1.5px solid rgba(16, 16, 20, .14); background: #fff; font: 500 14px var(--ui); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.swatch i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.swatch.is-on { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.swatch.is-on span::after { content: " ✓"; }
.colors__price { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin: 14px 0 16px; color: var(--ink-2); font-size: 14px; }
.colors__price b { font: 800 26px/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.colors__act { display: flex; gap: 10px; flex-wrap: wrap; }
.colors__stage { position: relative; width: min(88vw, 520px); aspect-ratio: .84; margin-inline: auto; perspective: 1500px; order: -1; }
.colors__glow { position: absolute; inset: 30% 2% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow-rgb, 236 150 110) / .42), transparent 72%); filter: blur(34px); pointer-events: none; }
.colors__count { position: absolute; right: 4px; top: 4px; z-index: 2; font: 700 13px var(--display); color: var(--ink-3); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.colors__cv { position: absolute; left: 6%; right: 6%; top: 4%; bottom: 12%; width: 88%; height: 84%; }
.colors__note { margin: -6px 0 16px; }
.colors__floor { position: absolute; left: 22%; right: 22%; bottom: 8%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 30, 20, .28), transparent); filter: blur(5px); pointer-events: none; }
@media (min-width: 1024px) {
  .colors__name { font-size: clamp(48px, 4.6vw, 76px); }
  .colors__in { grid-template-columns: minmax(380px, 1fr) 1.1fr; gap: 56px; }
  .colors__stage { width: min(40vw, 580px); order: 0; }
}

/* ---------- 4. окно новинки ---------- */
.xwin { background: var(--bg); }
.xwin__pin { position: relative; height: 100vh; overflow: hidden; }
.xwin__frame { position: absolute; inset: 0; background: #07070c; clip-path: inset(var(--it, 27%) var(--ix, 7%) var(--it, 27%) var(--ix, 7%) round var(--ir, 28px)); -webkit-clip-path: inset(var(--it, 27%) var(--ix, 7%) var(--it, 27%) var(--ix, 7%) round var(--ir, 28px)); }
.xwin__bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 58%, rgba(123, 63, 228, .42), transparent 70%), radial-gradient(40% 40% at 16% 18%, rgba(46, 49, 146, .55), transparent 70%), radial-gradient(40% 40% at 86% 84%, rgba(0, 150, 255, .22), transparent 70%); }
.xwin__lineup { position: absolute; left: 50%; top: 44%; width: min(78vw, 820px); max-height: 58vh; object-fit: contain; transform: translate(-50%, -52%) scale(var(--ls, .74)); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)); }
.xwin__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: linear-gradient(to top, rgba(7, 7, 12, .92) 8%, rgba(7, 7, 12, .55) 45%, transparent); opacity: var(--co, 0); }
.xwin__cap { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); bottom: calc(var(--tabbar) + max(20px, 4vh)); color: #fff; opacity: var(--co, 0); transform: translateY(calc((1 - var(--co, 0)) * 26px)); }
.xwin__cap .h2 { font-size: clamp(38px, 6vw, 84px); }
.xwin__act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.xwin__word { position: absolute; left: 0; right: 0; z-index: 2; margin: 0; text-align: center; font: 800 clamp(54px, 16vw, 230px)/.85 var(--display); letter-spacing: -.055em; text-transform: uppercase; color: var(--ink); pointer-events: none; will-change: transform, opacity; }
.xwin__word--top { top: 7vh; }
.xwin__word--bot { bottom: 7vh; }
@media (min-width: 1024px) { .xwin__word--top { top: 4vh; } .xwin__word--bot { bottom: 4vh; } .xwin__cap { max-width: 660px; } }

/* ---------- 5. trade-in ---------- */
.tradein { padding: 72px 0; overflow: clip; }
.tradein__in { display: grid; gap: 26px; align-items: center; }
.steps { list-style: none; padding: 0; margin: 22px 0 16px; display: grid; gap: 12px; }
.steps li { display: flex; gap: 14px; align-items: baseline; font-size: 16px; }
.steps b { font: 800 14px var(--display); color: var(--violet); min-width: 26px; }
.tradein__act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.gyro { position: relative; width: min(88vw, 540px); aspect-ratio: 1; margin-inline: auto; perspective: 1300px; }
.gyro__scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.gyro__ring { position: absolute; inset: 2%; transform-style: preserve-3d; filter: drop-shadow(0 0 14px rgba(123, 63, 228, .45)); will-change: transform; }
.gyro__ring--2 { inset: 11%; }
.gyro__ring--3 { inset: 20%; }
.gyro__ring i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #7b3fe4, #2e3192, #00b3ff, #c86bff, #7b3fe4);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: spin 14s linear infinite;
}
.gyro__ring--2 i { animation-duration: 10s; animation-direction: reverse; }
.gyro__ring--3 i { animation-duration: 7s; }
@keyframes spin { to { transform: rotate(360deg); } }
.tradein__cv { position: absolute; left: 30%; top: 14%; width: 40%; height: 68%; }
.gyro__cap { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font: 600 13px var(--ui); color: var(--ink-2); }
@media (min-width: 1024px) { .tradein { padding: 110px 0; } .tradein__in { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ---------- 6. наезжающие карточки ---------- */
.services { padding: 54px 0 36px; }
.stack { list-style: none; margin: 26px auto 0; display: grid; gap: 18px; }
.scard {
  position: sticky; top: calc(14px + var(--i) * 14px);
  min-height: 64vh; border-radius: 30px; padding: 28px 24px 24px;
  display: grid; align-content: space-between; gap: 18px; overflow: hidden;
  transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 -18px 40px -28px rgba(16, 16, 20, .55);
}
.scard p:not(.kicker) { max-width: 48ch; opacity: .88; }
.scard--violet { background: linear-gradient(150deg, #7433bf, #3b1f7a); color: #fff; }
.scard--ink { background: #121218; color: #fff; }
.scard--indigo { background: linear-gradient(150deg, #3438a8, #1b1d5e); color: #fff; }
.scard--light { background: #fff; color: var(--ink); box-shadow: 0 -18px 40px -28px rgba(16, 16, 20, .45), inset 0 0 0 1px var(--line); }
.obj { position: relative; height: 200px; display: grid; place-items: center; perspective: 900px; }
@media (min-width: 1024px) {
  .scard { grid-template-columns: 1.25fr 1fr; align-items: center; padding: 52px 60px; min-height: 66vh; }
  .obj { height: 340px; }
}
.obj__cv { position: relative; display: block; height: 100%; width: auto; aspect-ratio: var(--ar, 1.15); max-width: 100%; }
.obj--coin .obj__cv { --ar: 1.18; height: 82%; }
.obj--box .obj__cv { --ar: 1.16; height: 84%; }
.obj--gears .obj__cv { --ar: 1.18; height: 90%; }
.obj--pin { grid-template-rows: 1fr auto; }
.obj--pin .obj__cv { --ar: .68; height: 100%; max-height: 250px; }
.pin__shadow { display: block; width: 92px; height: 16px; border-radius: 50%; margin: 4px auto 0; background: radial-gradient(closest-side, rgba(16, 16, 20, .26), transparent); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.7); opacity: .6; } }
@media (min-width: 1024px) { .obj--pin .obj__cv { max-height: 300px; } }

/* ---------- 7. бренды ---------- */
.brands { padding: 64px 0 96px; }
.brands__in { display: grid; gap: 30px; align-items: center; }
.brands__txt .btn { margin-top: 22px; }
.brands__ring { position: relative; width: min(84vw, 460px); aspect-ratio: 1; margin-inline: auto; }
.brands__svg { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; overflow: visible; }
.brands__svg text { font: 800 19px var(--display); letter-spacing: 3px; fill: var(--ink); }
.brands__mark { position: absolute; left: 50%; top: 50%; width: 30%; height: auto; transform: translate(-50%, -50%); }
@media (min-width: 1024px) { .brands__in { grid-template-columns: 1fr 1fr; } }

/* ---------- подвал и нижняя навигация ---------- */
.ftr { background: #0b0b12; color: #c9c9d6; padding: 46px 0 36px; }
.ftr__logo { height: 34px; width: auto; }
.ftr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; max-width: 520px; }
.ftr__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ftr__cols a { display: flex; align-items: center; min-height: 40px; color: #fff; text-decoration: none; }
.ftr__bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: 13px; color: #a9a9b8; }
.motion-toggle { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font: 600 13px var(--ui); cursor: pointer; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; font: 500 11px/1 var(--ui); color: var(--ink-2); text-decoration: none; }
.tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .badge { top: 5px; right: calc(50% - 22px); }
@media (min-width: 1024px) { .tabbar { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar) + 14px); z-index: 120;
  transform: translate(-50%, 12px); opacity: 0; transition: opacity .25s, transform .25s var(--ease);
  max-width: min(92vw, 480px); padding: 12px 18px; border-radius: 14px;
  background: #101014; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 28px; } }

/* сбой изображения: название вместо картинки */
.img-missing { position: relative; }
.img-missing::after { content: attr(data-alt); position: absolute; inset: 12%; display: grid; place-items: center; text-align: center; font-size: 13px; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 16px; }

/* ---------- спокойный режим ---------- */
.calm .chip:hover .chip__img img, .calm .chip.is-spin .chip__img img, .calm .pcard:hover .pcard__img img { transform: none; }
.calm .gyro__ring i, .calm .pin__shadow, .calm .stage__podium::before { animation: none; }
.calm .stage.is-intro .ring__btn { transform: none; opacity: 1; }
.calm .ring__item.is-arrive .ring__shine, .calm .stage.is-arrive .stage__podium { animation: none; }
.calm .stage__pause { display: none; }
.calm .scard { position: relative; top: auto; }
.calm .colors__pin { min-height: 0; }
.calm .colors__name span, .calm .hdr, .calm .btn { transition: none; }
.calm .xwin__pin { height: auto; padding: 40px var(--pad); }
.calm .xwin__frame { position: relative; inset: auto; min-height: 76vh; clip-path: inset(0 round 28px); -webkit-clip-path: inset(0 round 28px); }
.calm .xwin__word { display: none; }
.calm .xwin__lineup { --ls: 1; }
.calm .xwin__frame, .calm .xwin__cap { --co: 1; }
@media (prefers-reduced-motion: reduce) { .toast, .icon-btn.is-bump svg { transition: none; animation: none; } }

/* ---------- «Спин 4»: сцена как фотостудия ----------
   Отзыв на «Спин 3»: «модели игрушечные, фон тоже». Товары перерисованы в Blender Cycles
   с настоящими отражениями и тенью на полу; с фона убраны неон, звёзды, пунктир орбиты и цветной туман. */
.spin__card { background: #0b0b0e; }
.spin__halo, .spin__stars, .stage__orbit, .stage__podium, .stage__floor, .stage__spot, .ring__shine { display: none; }
.spin__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(52% 58% at 50% -8%, rgba(255, 255, 255, .11), transparent 72%),
    radial-gradient(44% 20% at 50% 86%, rgba(255, 255, 255, .07), transparent 74%),
    linear-gradient(to bottom, transparent 55%, rgba(255, 255, 255, .025) 80%, rgba(255, 255, 255, .018));
}
.spin__bg::after { z-index: 2; background: radial-gradient(125% 95% at 50% 45%, transparent 52%, rgba(0, 0, 0, .62)); }
/* цвет товара впереди — лёгкий цветной свет на заднике, а не заливка */
.spin__tone { background: radial-gradient(58% 52% at 50% 38%, rgb(var(--tc, 90 50 160) / .26), rgb(var(--tc, 90 50 160) / .08) 55%, transparent 76%); }
/* тень уже в кадре, зеркальное отражение не нужно */
.ring__cv { -webkit-box-reflect: unset; }
.ring__item { --ih: 222px; }
.ring__item--wide { --iw: 262px; }
@media (min-width: 700px) { .ring__item { --ih: 272px; } .ring__item--wide { --iw: 322px; } }
@media (min-width: 1024px) { .ring__item { --ih: 344px; } .ring__item--wide { --iw: 410px; } }

/* цвет: светлая студия, тень — из кадра */
.colors { background: radial-gradient(70% 70% at 72% 46%, #ffffff, #f1f1f4 72%); }
.colors__glow, .colors__floor { display: none; }

/* trade-in: кольца — матовый металл вместо неона */
.gyro__ring { filter: none; opacity: .6; }
.gyro__ring i { background: conic-gradient(from 0deg, #c9ccd6, #7c8092, #e4e6ec, #9a9eae, #c9ccd6); }

/* сервисы: тень объекта в кадре */
.pin__shadow { display: none; }

/* ---------- «Спин 5»: официальные фото на фоне фотостудии ----------
   Отзыв на «Спин 4»: «цвета не те, как будто муляжи». Товары — официальные фото производителей,
   задник — фото пустой студии, сгенерированное в Higgsfield (без техники, по ТЗ устройства не генерируются). */
.spin__card { background: #09090b url("../../spin/bg/studio-dark.2ce7d4b66d72.webp") 50% 72% / cover no-repeat; }
.spin__bg::before { background: none; }
.spin__bg::after { background: radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)); }
/* цвет товара впереди — мягкий цветной свет на заднике */
.spin__tone { mix-blend-mode: soft-light; background: radial-gradient(62% 62% at 50% 42%, rgb(var(--tc, 90 50 160) / .7), rgb(var(--tc, 90 50 160) / .18) 55%, transparent 76%); }
/* на телефоне в кадр попадает только светлая середина студии — приглушаем, чтобы текст читался */
@media (max-width: 1023px) {
  .spin__card { background: linear-gradient(rgba(9, 9, 11, .62), rgba(9, 9, 11, .3) 45%, rgba(9, 9, 11, .66)), url("../../spin/bg/studio-dark.2ce7d4b66d72.webp") 50% 100% / auto 100% no-repeat #09090b; }
}
/* десять настоящих фото: товары мельче, круг шире, чтобы не налезали друг на друга */
.ring__item { --ih: 200px; }
.ring__item--wide { --iw: 228px; }
@media (min-width: 700px) { .ring__item { --ih: 238px; } .ring__item--wide { --iw: 276px; } }
@media (min-width: 1024px) { .ring__item { --ih: 290px; } .ring__item--wide { --iw: 336px; } }
/* trade-in: два телефона разной ширины — полотно шире, чтобы оба стояли целиком */
.tradein__cv { left: 22%; width: 56%; top: 12%; height: 72%; }

/* ---------- Проход 24.09: витрина без рывков, мельканий и размытия ----------
   Товар — слой с фото в размер переднего товара (остальные только уменьшаются — без размытия),
   тень на полу, тёмный слой той же формы для дальних товаров. Плашки «Новинка/Хит» только в панели. */
.ring__item { --bh: 230px; --bw: 280px; }
@media (min-width: 700px) { .ring__item { --bh: 270px; --bw: 330px; } }
@media (min-width: 1024px) { .ring__item { --bh: 320px; --bw: 390px; } }
.stage.is-3d .ring__item { width: var(--bw); height: var(--bh); top: calc(84% - var(--bh)); margin: 0 0 0 calc(var(--bw) / -2); transform-origin: 50% 100%; }
@media (max-width: 699px) { .stage.is-3d .ring__item { top: calc(86% - var(--bh)); } }
.ring__btn { all: unset; position: relative; display: block; width: 100%; height: 100%; cursor: pointer;
  transition: transform .9s var(--ease), opacity .9s var(--ease); transition-delay: calc(var(--k, 0) * 45ms); }
.stage.is-intro .ring__btn { transform: translateY(28px); opacity: 0; }
.ring__img, .ring__dim { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 93%; }
.ring__img { object-fit: contain; object-position: 50% 100%; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.ring__dim { background: #07060b; opacity: 0; pointer-events: none; will-change: opacity;
  -webkit-mask: var(--m) 50% 100% / contain no-repeat; mask: var(--m) 50% 100% / contain no-repeat; }
.ring__shadow { position: absolute; left: 50%; bottom: 3.5%; height: 7%; width: calc(min(100%, var(--bh) * .93 * var(--ar)) * .9);
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .26) 55%, transparent); }
.ring__cv, .ring__shine, .ring__badge, .spin__stars { display: none; }

/* цвет задника: ровная смена двух слоёв, без режима наложения (он заставлял перерисовывать весь блок) */
.spin__tone { mix-blend-mode: normal; transition: opacity .6s ease; will-change: opacity;
  background: radial-gradient(64% 60% at 50% 44%, rgb(var(--tc, 90 50 160) / .30), rgb(var(--tc, 90 50 160) / .1) 52%, transparent 76%); }

/* барабан поворачивается на слово выбранного товара одним плавным движением */
.drum__in { transition: transform .55s cubic-bezier(.22, .8, .24, 1); }

/* панель цены: при быстром вращении приглушена и ждёт, при смене товара мягко проявляется */
.pick__txt, .pick__price { transition: opacity .18s ease; }
.pick.is-busy .pick__txt, .pick.is-busy .pick__price { opacity: .28; }
.pick.is-in .pick__txt, .pick.is-in .pick__price { animation: pickIn .32s var(--ease) both; }
@keyframes pickIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* лента популярного: плоские карточки, как в магазине; мягкий подъём при наведении */
.pcard { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard__img img { transition: transform .5s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
@media (hover: hover) { .pcard:hover { box-shadow: 0 1px 0 rgba(16, 16, 20, .04), 0 28px 50px -30px rgba(16, 16, 20, .5); } }

/* категории без переворотов */
.chip.is-spin .chip__img img, .chip:hover .chip__img img { transform: none; }
.chip__img img { transition: transform .35s var(--ease); }
@media (hover: hover) { .chip:hover .chip__img img { transform: translateY(-3px); } }

.calm .spin__tone, .calm .drum__in, .calm .ring__btn { transition: none; }
.calm .pick.is-in .pick__txt, .calm .pick.is-in .pick__price { animation: none; }
html:not(.calm) { scroll-behavior: smooth; }
.rail__nav { display: none; gap: 8px; }
@media (min-width: 1024px) { .rail__nav { display: flex; } }
.rail__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: background .2s, opacity .2s; }
.rail__btn:hover:not(:disabled) { background: #f0eef6; }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* слово в заголовке: плавная смена вместо вращающегося барабана */
.drum { perspective: none; }
.drum__in { transform: none; transition: none; }
.drum__face { transform: translateY(70%); opacity: 0; transition: transform .45s var(--ease), opacity .3s ease; backface-visibility: visible; -webkit-backface-visibility: visible; }
.drum__face.is-on { transform: none; opacity: 1; }
.drum__face.is-out { transform: translateY(-70%); opacity: 0; }
.calm .drum__face { transition: none; }
/* телефон: витрина плотнее, без пустоты над товаром */
@media (max-width: 699px) {
  .stage { height: clamp(290px, 38vh, 400px); }
  .ring__item { --bh: 250px; --bw: 290px; }
  .stage.is-3d .ring__item { top: calc(92% - var(--bh)); }
  .stage__nav { top: 58%; }
}
/* размер товаров зависит и от высоты экрана: на невысоких ноутбуках витрина не упирается в панель цены */
@media (min-width: 1024px) {
  .ring__item { --bh: clamp(230px, 34vh, 320px); --bw: calc(var(--bh) * 1.22); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .ring__item { --bh: clamp(220px, 32vh, 290px); --bw: calc(var(--bh) * 1.22); }
}

/* ---------- Исправления по независимому аудиту 24.09 (SPIN5_FIX_RESULT_RU.md) ---------- */
/* №1 области нажатия не меньше 44 точек */
.hdr__logo { display: flex; align-items: center; min-height: 44px; }
.ftr__cols a { min-height: 44px; }
/* №2 первая категория стоит по общему полю страницы */
.cats__list { scroll-padding-inline: var(--pad); }
/* №3 слово в барабане на одной базовой линии с «Покрути»: невидимое слово в потоке даёт базовую линию */
.drum { overflow: clip; }
.drum__sizer { display: block; height: 1.1em; line-height: 1.1em; white-space: nowrap; visibility: hidden; }
/* №4 панель цены постоянной высоты: место плашки держится, название и описание в одну строку,
   колонки заголовка и панели не зависят от длины текста */
.pick__badge[hidden] { display: inline-block; visibility: hidden; }
.pick__name, .pick__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick { align-content: start; }
@media (min-width: 1024px) {
  .spin__card { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .pick { align-content: end; }
}
/* №9 лента «Популярное» и подпись новинки начинаются по общей сетке и на широком экране */
.rail__track { padding-inline: max(var(--pad), calc((100% - 1440px) / 2 + var(--pad))); }
.rail__view { scroll-padding-inline: max(var(--pad), calc((100% - 1440px) / 2 + var(--pad))); }
.xwin__cap { left: max(var(--pad), calc((100% - 1440px) / 2 + var(--pad))); }
/* №11 спокойный режим: фото новинки и подпись друг под другом, без наложения */
.calm .xwin__frame { display: flex; flex-direction: column; min-height: 0; padding-top: clamp(20px, 4vh, 40px); }
.calm .xwin__frame::after { display: none; }
.calm .xwin__lineup { position: relative; left: auto; top: auto; transform: none; width: min(100%, 820px); max-height: 52vh; margin: 0 auto; object-fit: contain; }
.calm .xwin__cap { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: none; padding: 24px clamp(20px, 4vw, 48px) 32px; }
/* №12 кнопки новинки видны сразу, как только на них попадает фокус клавиатуры */
.xwin__cap:focus-within { --co: 1; }
/* №13 предметы сервисов внутри своей области: строка сетки не растёт от размера холста */
.obj { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.obj--pin { grid-template-rows: minmax(0, 1fr) auto; }
.obj__cv { max-height: 100%; }
/* планшет: предметы сервисов крупнее в широких карточках */
@media (min-width: 700px) and (max-width: 1023px) { .obj { height: 280px; } }
/* барабан не сжимается: заголовок подгоняется шрифтом целиком (см. measureDrum) */
.drum { flex-shrink: 0; }

/* ---------- Исправления по независимому аудиту Claude 25.09 (SPIN5_CLAUDE_FIX_RU.md) ---------- */
/* витрина на ноутбуках: высота сцены и товаров считается от высоты окна. Карточка помещается в первый экран,
   передний товар не подходит к кнопкам панели ближе 16 точек */
@media (min-width: 1024px) {
  .spin__card { --sh: clamp(300px, calc(100vh - var(--hero-top, 247px) - 173px), 600px); --sh: clamp(300px, calc(100svh - var(--hero-top, 247px) - 173px), 600px); }
  .stage { height: var(--sh); }
  .ring__item { --bh: min(320px, calc(var(--sh) * .84 - 80px)); --bw: calc(var(--bh) * 1.22); }
  /* рамка фокуса витрины — ниже заголовка, не перечёркивает подводку */
  .stage:focus-visible { outline: none; }
  .stage:focus-visible::after { content: ""; position: absolute; inset: 72px 8px 8px; border: 3px solid #8f5cff; border-radius: 22px; pointer-events: none; z-index: 330; }
}
/* цены в панели: число и подпись не разрываются; на узких ноутбуках цифры чуть мельче */
.pick__price p { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .pick__price { gap: 14px; }
  .pick__price b { font-size: 22px; }
}
/* «Популярное»: стрелки всегда справа; лента листается ровно на одну карточку от поля страницы */
.rail__nav { margin-left: auto; }
.pcard { scroll-snap-align: start; }
/* каталог в шапке на компьютере: 4 колонки, 8 пунктов ровно в два ряда */
@media (min-width: 1024px) { .catalog-panel ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Dyson: счётчик внизу фото — вернувшаяся шапка его не закрывает; на узких ноутбуках заголовок и кнопки компактнее */
.colors__count { top: auto; bottom: 4px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .colors .h2 { font-size: 50px; }
  .colors__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; }
  .swatch { padding: 0 11px 0 6px; gap: 6px; font-size: 13px; }
  .swatch i { width: 24px; height: 24px; }
}
/* окно новинки: слова заставки по высоте экрана не заходят на окно; фото в конце поднимается над подписью */
.xwin__word { font-size: clamp(54px, min(16vw, 24vh), 230px); }
@media (min-width: 1024px) {
  .xwin__lineup { max-height: min(58vh, calc(100vh - 400px)); top: calc(44% - var(--co, 0) * 4%); }
}
/* Trade-in: кнопка не чернеет от прокрутки, кольца сжимаются вместе с колонкой */
.btn--primary[data-flip-toggle][aria-pressed="true"] { background: var(--grad); color: #fff; }
@media (min-width: 1024px) { .tradein__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gyro { width: min(88vw, 540px, 100%); }
/* подвал: адрес магазина рядом с разделами */
.ftr__contact { margin: 0 0 26px; max-width: 380px; }
.ftr__contact p { margin: 0; }
.ftr__h { font: 700 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #a9a9b8; margin-bottom: 10px !important; }
.ftr__addr { color: #fff; font-size: 17px; line-height: 1.35; }
.ftr__muted { color: #a9a9b8; font-size: 13px; line-height: 1.5; margin-top: 6px !important; }
.ftr__more { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35); }
@media (min-width: 1024px) {
  .ftr__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  .ftr__logo, .ftr__cols { grid-column: 1; }
  .ftr__contact { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; margin: 0; }
  .ftr__bottom { grid-column: 1 / -1; }
}
/* панель цены: проявление без удержания прозрачности — приглушение на быстром ходу работает и после первой смены */
.pick.is-in .pick__txt, .pick.is-in .pick__price { animation: pickIn .32s var(--ease) backwards; }
/* слово в заголовке: неактивные слова сразу скрыты — при двух сменах подряд не видно трёх слов */
.drum__face:not(.is-on):not(.is-out) { transition: none; }
/* Dyson: место под «✓» есть у всех цветов — кнопки не сдвигаются при выборе */
.swatch span::after { content: " ✓"; visibility: hidden; }
.swatch.is-on span::after { visibility: visible; }
/* телефон и планшет: студия стоит под товарами — пол под витриной, а не за ценой; фото не растягивается.
   Положение витрины в карточке задаёт скрипт (--stage-top, --stage-h) */
@media (max-width: 1023px) {
  .spin__card { background: #09090b; }
  .spin__bg::before { content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
    top: calc(var(--stage-top, 300px) - var(--stage-h, 320px) * .12); height: calc(var(--stage-h, 320px) * 1.3);
    background: url("../../spin/bg/studio-dark.2ce7d4b66d72.webp") 50% 0 / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 82%, transparent); }
}
/* уведомление по ширине текста (до 92% экрана); на телефоне — сверху, не закрывает нажатую кнопку */
.toast { width: max-content; }
@media (max-width: 1023px) {
  .toast { top: calc(10px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -12px); }
  .toast.is-on { transform: translate(-50%, 0); }
}
/* узкий телефон: две кнопки панели помещаются в карточку */
@media (max-width: 400px) {
  .pick__act { gap: 8px; }
  .pick__act .btn { padding: 0 14px; font-size: 14px; }
}
/* ряд категорий: у правого края мягкое затемнение, пока есть что листать */
.cats__list.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
/* карточка, к которой привела категория, на миг подсвечивается */
.pcard { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard.is-picked { box-shadow: 0 0 0 3px #8f5cff, 0 24px 44px -28px rgba(106, 43, 176, .7); }
/* сенсорные экраны: после касания кнопки не остаются в состоянии наведения */
@media (hover: none) {
  .stage__nav:hover { transform: none; background: rgba(255, 255, 255, .1); }
  .btn--primary:hover { transform: none; box-shadow: 0 10px 28px -12px rgba(122, 53, 208, .95); }
  .btn--ghost:hover { background: rgba(16, 16, 20, .07); }
  .btn--ghost-light:hover { background: rgba(255, 255, 255, .12); }
  .icon-btn:hover { background: transparent; }
  .icon-btn--soft:hover { background: rgba(16, 16, 20, .06); }
  .rail__btn:hover:not(:disabled) { background: #fff; }
  .chip:hover .chip__img { background: #ebebf0; box-shadow: none; }
  .pcard:hover .pcard__img img { transform: none; }
}
/* окно новинки на телефоне: нижнее слово не уезжает под нижнее меню */
@media (max-width: 1023px) { .xwin__word--bot { bottom: calc(var(--tabbar) + 5vh); } }
/* невысокий экран (телефон боком): окно новинки без закрепления, фото и подпись рядом */
.xwin--static .xwin__pin { height: auto; padding: 24px var(--pad); }
.xwin--static .xwin__frame { position: relative; inset: auto; min-height: 0; display: flex; align-items: center; gap: 20px; padding: 20px 28px;
  clip-path: inset(0 round 28px); -webkit-clip-path: inset(0 round 28px); --co: 1; --ls: 1; }
.xwin--static .xwin__frame::after, .xwin--static .xwin__word { display: none; }
.xwin--static .xwin__lineup { position: relative; left: auto; top: auto; transform: none; flex: 0 0 46%; width: 46%; max-height: 78vh; object-fit: contain; }
.xwin--static .xwin__cap { position: relative; left: auto; right: auto; bottom: auto; transform: none; opacity: 1; max-width: none; padding: 0; }
.xwin--static .xwin__cap .h2 { font-size: 34px; }
/* телефон боком: витрина слева, заголовок и панель цены справа — товар, цена и кнопки видны вместе;
   Dyson, Trade-in и сервисы в две колонки — результат нажатия на экране */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .cats { padding-top: 8px; }
  .chip__img { width: 52px; height: 52px; border-radius: 18px; }
  .spin__card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "stage head" "stage pick" "foot foot"; align-items: center; column-gap: 8px; padding: 14px 0 10px; }
  .spin__head { grid-area: head; text-align: left; padding: 0 20px 0 0; align-self: end; }
  .spin__title { flex-direction: row; align-items: baseline; gap: .22em; font-size: 34px; }
  .drum__face { text-align: left; }
  .spin__lead { display: none; }
  .pick { grid-area: pick; text-align: left; padding: 8px 20px 0 0; align-self: start; gap: 8px; }
  .pick__price, .pick__act { justify-content: flex-start; }
  .pick__price { gap: 12px; }
  .pick__price b { font-size: 21px; }
  .pick__act .btn { padding: 0 14px; font-size: 14px; min-height: 44px; }
  .stage { grid-area: stage; height: min(300px, calc(100svh - 70px)); margin: 0; }
  .spin__foot { grid-area: foot; }
  .pcard__img { height: 140px; }
  .colors__pin { padding: 24px 0; }
  .colors__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; }
  .colors__stage { order: 0; width: min(100%, calc((100svh - 60px) * .84)); }
  .colors .h2, .tradein .h2 { font-size: 34px; }
  .colors__name { font-size: 34px; margin: 8px 0 10px; }
  .tradein { padding: 32px 0; }
  .tradein__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .gyro { width: min(100%, calc(100svh - 70px)); }
  .scard { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; min-height: 0; padding: 22px 28px; }
  .obj { height: min(200px, calc(100svh - 150px)); }
}
/* планшет: карточки сервисов и бренды в две колонки, в ленте видна часть следующей карточки */
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 501px) {
  .scard { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; min-height: 0; padding: 36px 40px; }
  .brands__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcard { width: calc((100vw - 2 * var(--pad) - 3 * 14px) / 3.35); }
}
/* фокус с клавиатуры и переходы по якорям: элемент не уходит под липкую шапку и нижнее меню */
html { scroll-padding-top: calc(var(--hdr, 64px) + 16px); scroll-padding-bottom: calc(var(--tabbar, 0px) + 16px); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
/* на быстром ходу витрины кнопки панели не нажимаются */
.pick.is-busy .pick__act { pointer-events: none; }
/* карточка ленты открывается по фото и названию; кнопки «В корзину» и сердечко — поверх ссылки */
.pcard { position: relative; }
.pcard__link { color: inherit; text-decoration: none; }
.pcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.pcard__link:focus-visible { outline: none; }
.pcard:has(.pcard__link:focus-visible) { box-shadow: 0 0 0 3px #8f5cff; }
.pcard__act { position: relative; z-index: 1; }
/* понятное состояние при наведении у всех нажимаемых мест */
@media (hover: hover) {
  .hdr__catalog:hover { filter: brightness(1.08); box-shadow: 0 10px 24px -12px rgba(122, 53, 208, .9); }
  .stage__pause:hover { background: rgba(255, 255, 255, .18); }
  .stage.is-3d .ring__btn:hover .ring__img { filter: brightness(1.06); }
  .icon-btn--soft:hover { background: rgba(16, 16, 20, .11); }
  .swatch:hover { border-color: rgba(16, 16, 20, .4); }
  .btn--light:hover { background: #f1eefa; }
  .ftr__cols a:hover, .ftr__more:hover { color: #cbb8ff; }
  .motion-toggle:hover { background: rgba(255, 255, 255, .1); }
  .pcard:hover .pcard__name { color: var(--violet); }
}
/* карточки сервисов на больших экранах: без пустого низа, предмет крупнее */
@media (min-width: 1024px) {
  .scard { min-height: clamp(420px, 50vh, 560px); }
  .obj { height: clamp(300px, 34vh, 440px); }
}
/* очень широкий экран: крупные блоки растут вместе с экраном */
@media (min-width: 1800px) {
  .colors__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .colors__stage { width: min(100%, 760px, 64vh); }
  .xwin__lineup { width: min(78vw, 1100px); }
}
/* окно новинки: в начале фото по центру окна (верх не срезан), к концу поднимается над подписью.
   Сдвиг — через transform: при прокрутке меняется только слой, без перерасчёта вёрстки */
.xwin__lineup { top: 51%; transform: translate(-50%, calc(-52% - (var(--ls, 1) - .74) / .26 * 7vh)) scale(var(--ls, .74)); }
@media (min-width: 1024px) { .xwin__lineup { transform: translate(-50%, calc(-52% - (var(--ls, 1) - .74) / .26 * 11vh)) scale(var(--ls, .74)); } }

/* ---------- 25.09, вечер: крупные категории и варианты фона (SPIN5_LOOKS_RU.md) ---------- */
/* категории: на компьютере все 8 в ряд на всю ширину, квадрат до 140 точек, товар почти во весь квадрат.
   Квадрат не растягивается высоким фото (PlayStation, колонка): у него нет минимальной высоты по содержимому */
.chip__img { min-height: 0; overflow: hidden; }
.chip__img img { width: 84%; height: 84%; max-width: 84%; max-height: 84%; }
@media (min-width: 700px) {
  .cats__list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; overflow: visible; justify-content: stretch; }
  .chip { width: auto; }
  .chip__img { width: min(100%, 140px); height: auto; aspect-ratio: 1; border-radius: 24px; }
  .chip__txt { font: 600 14px/1.2 var(--ui); }
}
@media (min-width: 1024px) {
  .cats { padding: 18px 0 8px; }
  .cats__list { gap: 16px; }
  .chip { gap: 10px; }
  .chip__img { border-radius: 30px; }
  .chip__txt { font-size: 15px; }
}
/* телефон: видно четыре с половиной квадрата — понятно, что ряд листается */
@media (max-width: 699px) {
  .chip { width: calc((100vw - var(--pad)) / 4.5 - 10px); }
  .chip__img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 22px; }
  .chip__txt { font-weight: 600; }
}
/* телефон боком: ряд компактный, чтобы витрина помещалась */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .chip__img { width: 52px; height: 52px; aspect-ratio: auto; border-radius: 18px; }
  .chip__txt { font-size: 12px; }
}

/* фон квадратов категорий: белый с тенью / оттенок товара / серый */
.cats-white .chip__img { background: #fff; box-shadow: 0 1px 0 rgba(16, 16, 20, .04), 0 12px 26px -18px rgba(16, 16, 20, .45); }
.cats-tint .chip__img { background: radial-gradient(120% 120% at 50% 30%, #fff 0%, rgb(var(--tint, 123 63 228) / .16) 60%, rgb(var(--tint, 123 63 228) / .30) 100%); }
.cats-gray .chip__img { background: #ebebf0; }
@media (hover: hover) {
  .cats-white .chip:hover .chip__img { background: #fff; box-shadow: 0 1px 0 rgba(16, 16, 20, .04), 0 18px 30px -18px rgba(106, 43, 176, .55); }
  .cats-tint .chip:hover .chip__img { box-shadow: 0 16px 30px -18px rgb(var(--tint, 123 63 228) / .9); }
}

/* фон витрины, вариант «светлая студия»: светлый бесшовный фон, пол с мягкой тенью, тёмный текст */
.stage-light .spin__card { background: radial-gradient(70% 34% at 50% 90%, rgba(16, 16, 20, .10), transparent 70%), radial-gradient(120% 100% at 50% 18%, #ffffff 0%, #f3f2f7 55%, #e2e1ea 100%); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .06); }
.stage-light .spin__bg::after, .stage-light .spin__bg::before, .stage-light .spin__halo, .stage-light .stage__spot { display: none; }
.stage-light .spin__tone { opacity: 0 !important; }
.stage-light .kicker--light { color: var(--violet); }
.stage-light .spin__lead, .stage-light .pick__meta, .stage-light .pick__price span, .stage-light .spin__foot { color: #5b5b66; }
.stage-light .drum__face { background: linear-gradient(95deg, #7b3fe4 0%, #5a45e0 45%, #0f8fd0 100%); -webkit-background-clip: text; background-clip: text; }
.stage-light .pick__badge { background: rgba(123, 63, 228, .1); color: #5b2bb5; }
.stage-light .btn--ghost-light { background: rgba(16, 16, 20, .07); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); }
.stage-light .ring__dim { background: #ecebf1; }
.stage-light .ring__shadow { background: radial-gradient(closest-side, rgba(20, 16, 40, .34), rgba(20, 16, 40, .12) 55%, transparent); }
.stage-light .stage__floor { background: radial-gradient(closest-side, rgba(123, 63, 228, .10), transparent 72%); }
.stage-light .stage__orbit ellipse { stroke: rgba(123, 63, 228, .28); }
.stage-light .stage__podium { background: radial-gradient(closest-side, rgba(123, 63, 228, .16), transparent 72%); }
.stage-light .stage__nav, .stage-light .stage__pause { background: rgba(255, 255, 255, .75); border-color: rgba(16, 16, 20, .12); }
.stage-light .stage__nav svg, .stage-light .stage__pause svg { stroke: var(--ink); }
.stage-light .stage__ico-play { fill: var(--ink) !important; }
@media (hover: hover) { .stage-light .stage__nav:hover, .stage-light .stage__pause:hover { background: #fff; } }

/* вариант «фирменный фиолетовый»: глубокий фиолетовый PlayBoom, подсвеченный пол */
.stage-violet .spin__card { background: radial-gradient(52% 24% at 50% 88%, rgba(210, 170, 255, .38), transparent 72%), radial-gradient(95% 80% at 50% 92%, #6d35d6 0%, #3a1c86 42%, #170b38 78%, #0e0724 100%); }
.stage-violet .spin__bg::before { display: none; }
.stage-violet .spin__bg::after { opacity: .55; }
.stage-violet .spin__tone { opacity: .35 !important; }
.stage-violet .ring__dim { background: #1b0f40; }

/* вариант «тёмная студия поярче»: та же студия, сильнее верхний свет и пятно света на полу */
.stage-bright .spin__card { background: radial-gradient(42% 26% at 50% 84%, rgba(255, 255, 255, .20), transparent 72%), radial-gradient(46% 70% at 50% -6%, rgba(255, 255, 255, .16), transparent 72%), #101016 url("../../spin/bg/studio-dark.2ce7d4b66d72.webp") 50% 72% / cover no-repeat; }
.stage-bright .spin__bg::after { opacity: .45; }
@media (max-width: 1023px) {
  .stage-light .spin__card { background: radial-gradient(90% 26% at 50% 62%, rgba(16, 16, 20, .08), transparent 70%), radial-gradient(130% 100% at 50% 20%, #ffffff 0%, #f3f2f7 60%, #e4e3ec 100%); }
  .stage-violet .spin__card { background: radial-gradient(80% 22% at 50% 58%, rgba(210, 170, 255, .34), transparent 72%), radial-gradient(140% 90% at 50% 60%, #6d35d6 0%, #3a1c86 45%, #170b38 80%, #0e0724 100%); }
  .stage-bright .spin__card { background: #101016; }
  .stage-bright .spin__bg::before { filter: brightness(1.45); }
}

/* ---------- 25.09, вечер: шрифты и цвета как на apple.com (SPIN5_LOOKS_RU.md) ----------
   Шрифт — системный шрифт Apple (SF Pro на Mac и iPhone, файлы шрифта не скачиваются; на Windows — Segoe UI/Helvetica/Arial).
   Цвета сняты с живого apple.com: текст #1d1d1f, второстепенный #6e6e73, фон #f5f5f7, линии #d2d2d7,
   кнопки #0071e3 (наведение #0077ed), ссылки #0066cc, «Новинка» #bf4800. Кнопки — «таблетки», без цветной тени.
   Логотип PlayBoom не меняется. */
:root {
  --bg: #f5f5f7;
  --paper: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --violet: #0071e3;
  --accent: #0071e3;
  --indigo: #0071e3;
  --grad: linear-gradient(#0071e3, #0071e3);
  --apple-blue-hover: #0077ed;
  --apple-link: #0066cc;
  --apple-new: #bf4800;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body { font: 400 17px/1.47 var(--ui); letter-spacing: -.022em; }
:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
/* заголовки: полужирный, почти без сжатия букв, как у Apple */
.h2 { font-weight: 600; font-size: clamp(32px, 5vw, 56px); line-height: 1.07; letter-spacing: -.005em; }
.h3 { font-weight: 600; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: 0; }
.spin__title { font-weight: 600; letter-spacing: -.015em; }
.pick__name, .colors__name { font-weight: 600; letter-spacing: -.005em; }
.pick__price b, .colors__price b, .pcard__price b { font-weight: 600; letter-spacing: -.01em; }
.pcard__name { font-weight: 600; font-size: 19px; letter-spacing: .012em; }
.xwin__word { font-weight: 600; letter-spacing: -.02em; }
.xwin__cap .h2 { font-weight: 600; letter-spacing: -.005em; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.38; letter-spacing: .011em; color: var(--ink-2); }
.note { font-size: 14px; letter-spacing: -.016em; }
.kicker { font: 600 14px/1.43 var(--ui); letter-spacing: -.016em; text-transform: none; color: var(--ink-2); }
.kicker--light { color: #86868b; }
.steps b { font-weight: 600; color: var(--ink-2); }
.brands__svg text { font-weight: 600; }
.pcard__tag { text-transform: none; letter-spacing: -.01em; font: 600 12px/1.33 var(--ui); color: var(--apple-new); background: transparent; padding: 0; }
.pcard__tag--muted { color: var(--ink-2); background: transparent; }
.pick__badge { background: transparent !important; padding: 0; color: var(--apple-new) !important; font: 600 14px/1.43 var(--ui); letter-spacing: -.016em; }
html:not(.stage-light) .pick__badge { color: #ff9f0a !important; }   /* на тёмном фоне — оранжевый Apple для тёмной темы */
.drum__face { background: linear-gradient(95deg, #2997ff 0%, #6fc3ff 100%); -webkit-background-clip: text; background-clip: text; }
/* кнопки-«таблетки»: синяя главная, светло-серая второстепенная */
.btn { border-radius: 980px; font: 400 17px/1.18 var(--ui); letter-spacing: -.022em; min-height: 44px; padding: 0 22px; }
.btn--sm { font-size: 14px; letter-spacing: -.016em; min-height: 36px; padding: 0 16px; }
.btn--primary { background: #0071e3; color: #fff; box-shadow: none; }
.btn--ghost { background: #e8e8ed; color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--ghost-light { background: rgba(255, 255, 255, .16); color: #f5f5f7; box-shadow: none; }
.btn--primary[data-flip-toggle][aria-pressed="true"] { background: #0071e3; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--apple-blue-hover); box-shadow: none; transform: none; }
  .btn--ghost:hover { background: #dcdce1; }
  .btn--light:hover { background: #f5f5f7; }
  .btn--ghost-light:hover { background: rgba(255, 255, 255, .24); }
  .hdr__catalog:hover { filter: none; box-shadow: none; background: var(--apple-blue-hover); }
  .pcard:hover .pcard__name { color: var(--ink); }
  .catalog-panel a:hover { color: var(--apple-link); }
  .rail__btn:hover:not(:disabled) { background: #e8e8ed; }
}
@media (hover: none) { .btn--primary:hover { box-shadow: none; } }
/* шапка и каталог */
.hdr { background: rgba(245, 245, 247, .8); border-bottom-color: rgba(0, 0, 0, .08); }
.hdr__catalog { border-radius: 980px; background: #0071e3; font: 400 15px var(--ui); letter-spacing: -.016em; }
.hdr__search input:focus { border-color: #0071e3; }
.badge { background: #0071e3; }
.demo-strip { background: #1d1d1f; color: #d2d2d7; }
/* карточки ленты: белые на сером фоне страницы, без цветной подсветки */
.pcard.is-picked, .pcard:has(.pcard__link:focus-visible) { box-shadow: 0 0 0 2px #0071e3, 0 24px 44px -30px rgba(0, 0, 0, .35); }
.rail__btn { border-color: transparent; background: #e8e8ed; }
.rail__btn svg { stroke: var(--ink); }
/* категории: белые квадраты, при наведении — лёгкая тень без цвета */
@media (hover: hover) { .cats-white .chip:hover .chip__img { box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 30px -18px rgba(0, 0, 0, .35); } }
/* витрина на светлой студии: синий акцент вместо фиолетового */
.stage-light .kicker--light { color: var(--ink-2); }
.stage-light .drum__face { background: linear-gradient(95deg, #0071e3 0%, #2997ff 100%); -webkit-background-clip: text; background-clip: text; }
.stage-light .stage__floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .05), transparent 72%); }
.stage-light .stage__orbit ellipse { stroke: rgba(0, 0, 0, .12); }
.stage-light .stage__podium { background: radial-gradient(closest-side, rgba(0, 0, 0, .06), transparent 72%); }
.stage-light .btn--ghost-light { background: #e8e8ed; color: var(--ink); box-shadow: none; }
@media (min-width: 1024px) { .stage:focus-visible::after { border: 2px solid #0071e3; } }
/* Dyson */
.swatch.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* окно новинки: чёрный фон, как у страниц Pro на apple.com */
.xwin__frame { background: #000; }
.xwin__bg { background: radial-gradient(60% 50% at 50% 58%, rgba(255, 255, 255, .07), transparent 70%); }
.xwin__frame::after { background: linear-gradient(to top, rgba(0, 0, 0, .92) 8%, rgba(0, 0, 0, .5) 45%, transparent); }
.xwin__cap .lead--light { color: #86868b; }
/* Trade-in: кольца в синих тонах Apple */
.gyro__ring i { background: conic-gradient(from 0deg, #0071e3, #2997ff, #d2d2d7, #0071e3); }
/* сервисы: плитки Apple — белая, чёрная, белая, чёрная */
.scard--violet, .scard--indigo { background: #fff; color: var(--ink); box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .3); }
.scard--ink, .scard--light { background: #000; color: #f5f5f7; box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .45); }
.scard--violet .kicker--light, .scard--indigo .kicker--light { color: var(--ink-2); }
.scard--light .kicker { color: #86868b; }
.scard--light p:not(.kicker) { color: #d2d2d7; }
/* подвал: светло-серый, как у Apple */
.ftr { background: #f5f5f7; color: var(--ink-2); border-top: 1px solid #d2d2d7; }
.ftr__cols a { color: #424245; }
.ftr__bottom { border-top-color: #d2d2d7; color: var(--ink-2); }
.ftr__h { color: var(--ink-2); font: 600 12px/1.33 var(--ui); letter-spacing: -.01em; text-transform: none; }
.ftr__addr { color: var(--ink); }
.ftr__muted { color: var(--ink-2); }
.ftr__more { color: var(--apple-link); text-decoration: none; }
.motion-toggle { border-color: #d2d2d7; color: var(--ink); }
@media (hover: hover) {
  .ftr__cols a:hover, .ftr__more:hover { color: var(--apple-link); text-decoration: underline; }
  .motion-toggle:hover { background: #e8e8ed; }
}
/* нижнее меню телефона */
.tabbar { background: rgba(250, 250, 252, .9); border-top-color: rgba(0, 0, 0, .08); }
.tabbar a { color: #6e6e73; }

/* ноутбук с невысоким окном: квадраты категорий компактнее, витрине остаётся больше места */
@media (min-width: 1024px) and (max-height: 760px) {
  .cats { padding: 12px 0 4px; }
  .chip__img { width: min(100%, 96px); }
  .chip { gap: 6px; }
  .chip__txt { font-size: 14px; }
}
/* телефон боком: Trade-in компактнее, телефон стоит на уровне кнопки «Сменить модель» */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .tradein__in { align-items: end; }
  .tradein .h2 { font-size: 30px; }
  .steps { margin: 12px 0 8px; gap: 6px; }
  .steps li { font-size: 14px; }
  .tradein .note { display: none; }
  .tradein__act { margin-top: 12px; }
}

/* ---------- 25.09, поздний вечер: страница короче (SPIN5_LOOKS_RU.md) ----------
   Раздел цветов — лента товаров с выбором цвета; окно новинки — плитки, как на apple.com;
   сервисы — четыре плитки в ряд; ничего не «залипает» при прокрутке */
/* 3. лента цветов */
.crail { padding: 40px 0 16px; }
.crail__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: max(var(--pad), calc((100% - 1440px) / 2 + var(--pad))); }
.crail__view::-webkit-scrollbar { display: none; }
.crail__view.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.crail__track { list-style: none; margin: 0; display: flex; gap: 16px; padding: 10px max(var(--pad), calc((100% - 1440px) / 2 + var(--pad))) 26px; }
.ccard { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; background: #fff; border-radius: 24px; padding: 18px 22px 22px; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 18px 40px -32px rgba(0, 0, 0, .35); }
@media (min-width: 1024px) { .ccard { flex-basis: calc((min(100vw, 1440px) - 2 * var(--pad) - 48px) / 3.4); } }
.ccard__stage { position: relative; aspect-ratio: 1 / .92; margin-bottom: 12px; }
.ccard__img { position: absolute; left: 6%; top: 3%; width: 88%; height: 94%; object-fit: contain; opacity: 0; transition: opacity .2s ease; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ccard__img.is-on { opacity: 1; z-index: 2; transition: opacity .45s ease; }
.ccard__img.is-under { opacity: 1; z-index: 1; transition: none; }
.ccard__brand { font: 600 12px/1.33 var(--ui); color: var(--ink-2); letter-spacing: -.01em; }
.ccard__name { font: 600 21px/1.19 var(--display); letter-spacing: .011em; margin: 2px 0 0; }
.ccard__color { color: var(--ink-2); font-size: 14px; letter-spacing: -.016em; margin-top: 4px; min-height: 20px; }
.ccard__dots { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 14px; }
.dot { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); cursor: pointer; }
.dot::after { content: ""; position: absolute; inset: -9px; }
.dot.is-on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4px #0071e3; }
.ccard__price { font-size: 14px; color: var(--ink-2); letter-spacing: -.016em; }
.ccard__price b { font: 600 19px var(--display); color: var(--ink); letter-spacing: -.01em; }
.ccard__price2 { font-size: 14px; color: var(--ink-2); letter-spacing: -.016em; margin-top: 2px; }
.ccard__note { font-size: inherit; }
.ccard__act { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.ccard__act .btn { flex: 1; }
.crail .rail__nav { display: none; }
@media (min-width: 700px) { .crail .rail__nav { display: flex; } }
.calm .ccard__img { transition: none; }

/* 4. новинки — плитки */
.tiles { padding: 36px 0 40px; }
.tiles__grid { display: grid; gap: 16px; margin-top: 18px; }
.tile { position: relative; overflow: hidden; border-radius: 24px; background: #fff; text-align: center; padding: 34px 24px 0; display: flex; flex-direction: column; align-items: center; min-height: 430px; }
.tile--dark { background: #000; color: #f5f5f7; }
.tile__eyebrow { font: 600 14px/1.43 var(--ui); letter-spacing: -.016em; color: var(--apple-new); }
.tile--dark .tile__eyebrow { color: #ff9f0a; }
.tile__title { font: 600 clamp(28px, 3vw, 40px)/1.1 var(--display); margin: 4px 0 6px; }
.tile__sub { font-size: 17px; line-height: 1.38; color: var(--ink-2); max-width: 32ch; }
.tile--dark .tile__sub { color: #a1a1a6; }
.tile__act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 18px; }
.tile__buy { background: transparent; color: #0071e3; box-shadow: inset 0 0 0 1px #0071e3; }
.tile--dark .tile__buy { color: #2997ff; box-shadow: inset 0 0 0 1px #2997ff; }
@media (hover: hover) { .tile__buy:hover { background: rgba(0, 113, 227, .08); } .tile--dark .tile__buy:hover { background: rgba(41, 151, 255, .12); } }
.tile__img { width: auto; max-width: 88%; height: 210px; object-fit: contain; margin: auto 0 20px; }
@media (min-width: 760px) { .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tile { min-height: 450px; } .tile__img { height: 230px; } }
@media (max-width: 759px) {
  .tiles__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--pad); }
  .tiles__grid::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 82vw; scroll-snap-align: start; min-height: 390px; }
}

/* 5. Trade-in и бренды компактнее */
.tradein { padding: 44px 0; }
@media (min-width: 1024px) { .tradein { padding: 56px 0; } .gyro { width: min(88vw, 420px, 100%); } }
.brands { padding: 36px 0 52px; }
.brands__ring { width: min(62vw, 300px); }

/* 6. сервисы — четыре плитки в ряд, без «наезда» */
.services { padding: 40px 0 32px; }
.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.services .scard { position: relative; top: auto; min-height: 0; padding: 24px 22px 18px; border-radius: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.services .scard .h3 { font-size: 21px; line-height: 1.19; letter-spacing: .011em; margin: 2px 0 6px; }
.services .scard p:not(.kicker) { font-size: 14px; line-height: 1.43; letter-spacing: -.016em; }
.services .obj { height: 150px; margin-top: auto; }
.services .obj--pin .obj__cv { max-height: 140px; }
@media (max-width: 1023px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .stack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--pad); }
  .stack::-webkit-scrollbar { display: none; }
  .services .scard { flex: 0 0 74vw; scroll-snap-align: start; }
}
/* чёрная плитка «Магазин»: заголовок светлый */
.services .scard--light .h3--ink { color: #f5f5f7; }
/* плитки новинок чуть ниже — страница короче */
.tile { min-height: 400px; padding-top: 30px; }
.tile__img { height: 190px; }
@media (min-width: 1024px) { .tile { min-height: 410px; } .tile__img { height: 200px; } }
/* телефон: Trade-in, бренды и подвал компактнее */
@media (max-width: 699px) {
  .tradein { padding: 36px 0 28px; }
  .gyro { width: min(66vw, 280px); }
  .steps { margin: 14px 0 10px; gap: 8px; }
  .steps li { font-size: 15px; }
  .brands { padding: 28px 0 40px; }
  .brands__in { grid-template-columns: minmax(0, 1fr) 38vw; gap: 16px; }
  .brands__ring { width: 38vw; }
  .brands .lead { font-size: 15px; }
  .ftr { padding: 32px 0 28px; }
  .ftr__cols { margin: 18px 0; gap: 0 16px; }
  .ftr__contact { margin-bottom: 18px; }
}
/* широкий экран: четыре плитки новинок в один ряд */
@media (min-width: 1200px) {
  .tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { min-height: 400px; padding: 28px 18px 0; }
  .tile__title { font-size: clamp(24px, 2vw, 30px); }
  .tile__sub { font-size: 15px; }
  .tile__act { gap: 8px; margin: 14px 0 16px; }
  .tile__img { height: 180px; max-width: 92%; }
}

/* ---------- 25.09, ночь: движение как на apple.com (SPIN5_LOOKS_RU.md) ----------
   Одна кривая для всех появлений — как у Apple: быстрый старт, долгое мягкое торможение.
   Появление при загрузке — чистым CSS с первого кадра (без мигания до скриптов);
   появление при прокрутке и параллакс — скриптом. В спокойном режиме всё выключено. */
:root { --ease-apple: cubic-bezier(.28, .11, .32, 1); }
@keyframes pbFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pbFadeIn { from { opacity: 0; } to { opacity: 1; } }
html:not(.calm) .spin__head > * { animation: pbFadeUp 1s var(--ease-apple) both; }
html:not(.calm) .spin__head > :nth-child(2) { animation-delay: .08s; }
html:not(.calm) .spin__head > :nth-child(3) { animation-delay: .16s; }
html:not(.calm) .pick { animation: pbFadeUp 1s var(--ease-apple) .22s both; }
html:not(.calm) .spin__card { animation: pbFadeIn .9s var(--ease-apple) both; }
html:not(.calm) .cats__list > li { animation: pbFadeUp .8s var(--ease-apple) both; }
html:not(.calm) .cats__list > li:nth-child(2) { animation-delay: .04s; }
html:not(.calm) .cats__list > li:nth-child(3) { animation-delay: .08s; }
html:not(.calm) .cats__list > li:nth-child(4) { animation-delay: .12s; }
html:not(.calm) .cats__list > li:nth-child(5) { animation-delay: .16s; }
html:not(.calm) .cats__list > li:nth-child(6) { animation-delay: .2s; }
html:not(.calm) .cats__list > li:nth-child(7) { animation-delay: .24s; }
html:not(.calm) .cats__list > li:nth-child(8) { animation-delay: .28s; }
/* наведение: карточки приподнимаются, фото чуть приближается (отдельные свойства translate/scale
   складываются с движением от прокрутки и не спорят с ним) */
@media (hover: hover) {
  html:not(.calm) .pcard, html:not(.calm) .ccard, html:not(.calm) .tile, html:not(.calm) .services .scard {
    transition: translate .6s var(--ease-apple), box-shadow .6s var(--ease-apple), scale .6s var(--ease-apple);
  }
  html:not(.calm) .pcard:hover, html:not(.calm) .ccard:hover, html:not(.calm) .tile:hover, html:not(.calm) .services .scard:hover {
    translate: 0 -6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 34px 60px -38px rgba(0, 0, 0, .42);
  }
  html:not(.calm) .tile__img, html:not(.calm) .ccard__stage { transition: scale .8s var(--ease-apple); }
  html:not(.calm) .tile:hover .tile__img, html:not(.calm) .ccard:hover .ccard__stage { scale: 1.04; }
  html:not(.calm) .chip__img { transition: translate .5s var(--ease-apple), box-shadow .5s var(--ease-apple), background-color .3s; }
  html:not(.calm) .chip:hover .chip__img { translate: 0 -4px; }
  html:not(.calm) .chip:hover .chip__img img { transform: none; }
}
/* смена цвета: новое фото проявляется мягко и чуть «подплывает» */
html:not(.calm) .ccard__img.is-on { transition: opacity .6s var(--ease-apple); }
/* кнопки и точки цветов — мягкие переходы */
.btn, .dot, .rail__btn, .stage__nav { transition: background-color .3s var(--ease-apple), box-shadow .3s var(--ease-apple), color .3s, transform .4s var(--ease-apple), scale .4s var(--ease-apple); }
@media (hover: hover) { html:not(.calm) .dot:hover { scale: 1.12; } }

/* ---------- 25.09, ночь: исправления по третьему независимому аудиту (SPIN5_AUDIT3_FIX_RU.md) ---------- */
/* шрифт: на Windows и Android — системный шрифт (Segoe UI, Roboto) с полужирным начертанием, а не Arial.
   Поля страницы учитывают вырез экрана iPhone, повёрнутого боком */
:root {
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Icons", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: max(clamp(16px, 4.6vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
.tabbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* шапка ниже (60 точек), поиск тянется до значков, кнопка «Каталог» и поле поиска одной высоты */
@media (min-width: 1024px) {
  :root { --hdr: 60px; }
  .hdr__catalog { min-height: 40px; padding: 0 16px; gap: 8px; }
  .hdr__search { max-width: none; }
  .hdr__search input { min-height: 40px; border-radius: 12px; }
  .hdr__icons { margin-left: 8px; }
}

/* категории: крайние квадраты стоят ровно по краям сетки; на ноутбуках с невысоким окном квадраты компактнее —
   витрине в первом экране остаётся место для крупных товаров */
@media (min-width: 1024px) {
  .cats__list { grid-template-columns: repeat(8, minmax(0, var(--chip-max, 140px))); justify-content: space-between; }
  .chip__img { width: min(100%, var(--chip-max, 140px)); }
}
@media (min-width: 1024px) and (max-height: 860px) {
  :root { --chip-max: 108px; }
  .cats { padding: 10px 0 2px; }
  .chip { gap: 6px; }
  .chip__txt { font-size: 14px; }
  .demo-strip { padding-block: 5px; }
  .spin__card { padding-top: 18px; }
  .pick { gap: 6px; }
  .pick__name { font-size: 26px; }
  .pick__price b { font-size: 22px; }
}
@media (min-width: 1024px) and (max-height: 800px) { :root { --chip-max: 96px; } }
@media (min-width: 1024px) and (max-height: 700px) { :root { --chip-max: 84px; } }

/* витрина: на больших экранах товары крупнее, пустой полосы над ними нет */
@media (min-width: 1024px) {
  .ring__item { --bh: min(430px, calc(var(--sh) * .84 - 80px)); }
}
/* главный заголовок заметно крупнее заголовков разделов и на узком ноутбуке */
.h2 { font-size: clamp(32px, 4vw, 56px); }
/* стрелки и пауза витрины — как стрелки лент: светло-серые круги без рамки */
.stage-light .stage__nav, .stage-light .stage__pause { background: rgba(232, 232, 237, .86); border-color: transparent; }
@media (hover: hover) { .stage-light .stage__nav:hover, .stage-light .stage__pause:hover { background: #dcdce1; } }

/* подводка витрины: на телефоне короче, в одну строку */
.spin__lead-short { display: none; }
/* телефон: заголовок в одну строку, витрина без пустоты над товаром — цена и кнопки в первом экране.
   Стрелки — в верхних углах витрины: широкие товары (MacBook, Steam Deck) ниже, стрелки их не закрывают */
@media (max-width: 699px) {
  .spin__title { flex-direction: row; justify-content: center; align-items: baseline; gap: .22em; font-size: clamp(34px, 10.4vw, 46px); }
  .spin__lead-long { display: none; }
  .spin__lead-short { display: inline; }
  .drum__face { text-align: left; }
  .spin__lead { margin-top: 8px; font-size: 15px; }
  .spin__head { padding-inline: 14px; }
  .spin__head .kicker { display: none; }
  .spin__card { padding-top: 18px; }
  .pick__price { flex-direction: column; align-items: center; gap: 2px; }
  .pick__price p + p b { font-size: 15px; font-weight: 400; letter-spacing: -.016em; }
  .pick__price b { font-size: 24px; }
  /* плашка «Новинка / Хит» в строке с названием: панель на строку ниже */
  .pick__txt { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 8px; }
  .pick__badge { order: 2; }
  .pick__name { order: 1; margin-top: 0; max-width: 100%; }
  .pick__meta { order: 3; flex-basis: 100%; }
  .pick__badge[hidden] { display: none; }
  .stage { height: 262px; margin-top: 2px; }
  .stage.is-3d .ring__item { top: calc(94% - var(--bh)); }
  .stage__nav { top: 4px; margin-top: 0; width: 40px; height: 40px; }
  .stage__nav--prev { left: 8px; }
  .stage__nav--next { right: 8px; }
  .stage__nav::after { content: ""; position: absolute; inset: -2px; }
  .pick { padding-top: 2px; gap: 10px; }
}
/* планшет: витрина по размеру товаров, товары крупнее — кнопки панели выше нижнего меню */
/* узкий телефон: витрина чуть ниже — кнопки панели над нижним меню */
@media (max-width: 380px) {
  .stage { height: 236px; }
  .ring__item { --bh: 226px; --bw: 268px; }
}
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 501px) {
  .ring__item { --bh: clamp(240px, 30vh, 340px); --bw: calc(var(--bh) * 1.22); }
  .stage { height: calc(clamp(240px, 30vh, 340px) + 64px); }
}

/* ленты: тень карточек не обрезается ровной линией — у ленты запас снизу, высота раздела та же */
.rail__view { padding-bottom: 64px; margin-bottom: -34px; }
.crail__track { width: max-content; padding-bottom: 64px; }
.crail__view { margin-bottom: -38px; container-type: inline-size; }
/* одна карточка товара для обеих лент: название 19, цена 21, подписи 14; скругление 24 */
.pcard { border-radius: 24px; }
.pcard__name, .ccard__name { font: 600 19px/1.21 var(--display); letter-spacing: .012em; }
.pcard__price b, .ccard__price b { font: 600 21px/1.19 var(--display); letter-spacing: .011em; margin-right: 4px; }
.pcard__price, .pcard__price2, .ccard__price, .ccard__price2 { font-size: 14px; letter-spacing: -.016em; color: var(--ink-2); }
/* фото на белом, без сиреневой подложки прежней темы */
.pcard__img { background: #fff; }
/* над названием — всегда категория; «Хит» — отдельной оранжевой меткой */
.pcard__hot { color: var(--apple-new); margin-right: 4px; }
/* «В корзину» и сердечко одной высоты (36); зона нажатия у обеих — 44 точки */
.pcard .icon-btn--soft { width: 36px; height: 36px; flex: 0 0 36px; }
.pcard .icon-btn--soft svg { width: 19px; height: 19px; }
.pcard .icon-btn--soft::before { content: ""; position: absolute; inset: -4px; }
.btn--sm { position: relative; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }
/* подпись раздела — под заголовком, стрелки — в строке заголовка; стрелки видны и на планшете */
.rail__head .note { order: 3; flex-basis: 100%; }
@media (min-width: 700px) { .rail__nav { display: flex; } }
/* планшет: карточки «Популярного» не уже, чем на телефоне */
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 501px) {
  .pcard { width: clamp(240px, calc((100vw - 2 * var(--pad) - 28px) / 2.6), 280px); }
}
/* точки цветов: у каждой своя зона нажатия 44×44, соседние не перекрываются */
.ccard__dots { gap: 18px; }
/* лента цветов на широком экране: все четыре карточки ровно по сетке страницы, стрелки не нужны */
@media (min-width: 1280px) {
  .ccard { flex-basis: calc((min(100vw, 1440px) - 2 * var(--pad) - 48px) / 4); }
  @supports (width: 1cqw) { .ccard { flex-basis: calc((min(100cqw, 1440px) - 2 * var(--pad) - 48px) / 4); } }
}
.crail.is-static .rail__nav { display: none; }

/* новинки: место под подпись в две строки у всех плиток — кнопки стоят на одной высоте */
.tile__sub { min-height: calc(2em * 1.38); }

/* Trade-in: кольца — отдельный слой за телефоном, тоньше; телефон всегда поверх колец */
.gyro { perspective: none; }
.gyro__float { position: absolute; inset: 0; }
.gyro__scene, .gyro__ring { transform-style: flat; }
.gyro__ring i { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }

/* сервисы: простые значки в цветах Apple вместо объёмных картинок; до 1200 — по две плитки в ряд */
.services .scard { gap: 6px; }
.scard__ico { display: block; width: 44px; height: 44px; margin-bottom: 8px; color: #0071e3; }
.scard--ink .scard__ico, .scard--light .scard__ico { color: #2997ff; }
.scard__ico svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1199px) and (min-width: 600px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* подписи на чёрных плитках одного цвета и читаются (контраст 5,8:1); на белых — серый Apple */
.stage-light .services .kicker--light, .services .scard--ink .kicker--light, .services .scard--light .kicker { color: #86868b; }
.stage-light .services .scard--violet .kicker--light, .stage-light .services .scard--indigo .kicker--light { color: var(--ink-2); }

/* бренды: читаемые плитки вместо вращающегося кольца */
.brands__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brands__grid a { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 0 10px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; font: 600 19px/1.2 var(--display); letter-spacing: .012em; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 14px 30px -24px rgba(0, 0, 0, .35); }
@media (hover: hover) {
  html:not(.calm) .brands__grid a { transition: translate .5s var(--ease-apple), box-shadow .5s var(--ease-apple), color .3s; }
  .brands__grid a:hover { color: var(--apple-link); }
  html:not(.calm) .brands__grid a:hover { translate: 0 -3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 22px 40px -26px rgba(0, 0, 0, .4); }
}
@media (max-width: 699px) {
  .brands__in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .brands__grid a { min-height: 52px; padding: 0 4px; border-radius: 14px; font-size: clamp(13px, 3.8vw, 16px); }
}

/* подвал плотнее, как у Apple: ссылки 14 точек; зона нажатия на телефоне — 44 */
.ftr__cols a { font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .ftr__cols a { min-height: 32px; } }
.motion-toggle { position: relative; min-height: 36px; padding: 0 16px; border: 0; background: #e8e8ed; font: 400 14px/1.2 var(--ui); letter-spacing: -.016em; }
.motion-toggle::after { content: ""; position: absolute; inset: -4px 0; }
@media (hover: hover) { .motion-toggle:hover { background: #dcdce1; } }

/* каталог на телефоне: кнопка «Закрыть» в углу списка */
.catalog-panel__close { display: none; }
@media (max-width: 1023px) {
  .catalog-panel ul { padding-right: calc(var(--pad) + 44px); }
  .catalog-panel__close { position: absolute; top: 8px; right: calc(var(--pad) - 10px); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
  .catalog-panel__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
}
.tabbar a.is-open { color: #0071e3; }

/* телефон боком: нижнее меню уходит вместе с шапкой при прокрутке вниз — видно больше; фото в карточках ниже */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .tabbar { transition: transform .4s var(--ease); }
  .hdr.is-hidden ~ .tabbar { transform: translateY(100%); }
  .ccard__stage { aspect-ratio: auto; height: 150px; }
  .tile { min-height: 0; }
  .tile__img { height: 140px; }
}

/* ---------- движение: правки по проверке анимации (SPIN5_AUDIT3/motion.md) ---------- */
/* ленты: на время плавного хода стрелкой и доезда после перетаскивания привязка к карточкам выключена */
.rail__view.is-gliding, .crail__view.is-gliding { scroll-snap-type: none; }
/* панель цены приглушается фильтром, а не прозрачностью: не спорит с проявлением текста при смене товара */
.pick__txt, .pick__price { transition: filter .22s ease; }
.pick.is-busy .pick__txt, .pick.is-busy .pick__price { opacity: 1; filter: opacity(.3); }
.calm .pick__txt, .calm .pick__price { transition: none; }
/* стрелки витрины появляются мягко, когда витрина готова */
html:not(.calm) .stage.is-3d .stage__nav { animation: pbFadeIn .6s var(--ease-apple) both; }
/* высота витрины в стилях — как её потом считает скрипт: при загрузке низ карточки не подпрыгивает */
@media (min-width: 1024px) {
  .spin__card { --sh: clamp(260px, calc(100vh - var(--hero-top, 307px) - var(--hero-rest, 159px) - 12px), 600px); --sh: clamp(260px, calc(100svh - var(--hero-top, 307px) - var(--hero-rest, 159px) - 12px), 600px); }
}
@media (min-width: 1024px) and (max-height: 860px) { .spin__card { --hero-top: 252px; --hero-rest: 142px; } }
@media (min-width: 1024px) and (max-height: 800px) { .spin__card { --hero-top: 240px; } }
@media (min-width: 1024px) and (max-height: 700px) { .spin__card { --hero-top: 228px; } }
/* карточки лент на телефоне: без старого перехода движения — не «ватные» */
.pcard { transition: box-shadow .35s var(--ease); }
/* наведение мягче и быстрее, как у Apple: подъём 4 точки за 0,4 с, фото +2,5% */
@media (hover: hover) {
  html:not(.calm) .pcard, html:not(.calm) .ccard, html:not(.calm) .tile, html:not(.calm) .services .scard {
    transition: translate .4s var(--ease-apple), box-shadow .4s var(--ease-apple), scale .4s var(--ease-apple);
  }
  html:not(.calm) .pcard:hover, html:not(.calm) .ccard:hover, html:not(.calm) .tile:hover, html:not(.calm) .services .scard:hover {
    translate: 0 -4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 26px 50px -32px rgba(0, 0, 0, .4);
  }
  html:not(.calm) .tile__img, html:not(.calm) .ccard__stage { transition: scale .5s var(--ease-apple); }
  html:not(.calm) .tile:hover .tile__img, html:not(.calm) .ccard:hover .ccard__stage { scale: 1.025; }
  .pcard:hover .pcard__img img { transform: scale(1.025); }
}
/* плитки новинок: параллакс двигает обёртку, наведение приближает само фото — одно не отменяет другое */
.tile__media { margin: auto 0 20px; width: 100%; display: flex; justify-content: center; }
.tile__img { margin: 0; }
/* смена цвета: чистый перелив 0,6 с. Dyson (фото в разной раскладке): прежнее гаснет за 0,16 с, новое проявляется */
.ccard[data-swap="through"] .ccard__img { transition: opacity .16s ease; }
html:not(.calm) .ccard[data-swap="through"] .ccard__img.is-on { transition: opacity .34s var(--ease-apple) .12s; }

/* ---------- один шаг между разделами и от заголовка до содержимого ----------
   --gs — расстояние от низа содержимого раздела до верха следующего (80 / 64 / 52),
   --gh — от заголовка раздела до карточек (24 / 20 / 18). У лент снизу запас под тень — он вычитается */
:root { --gs: 52px; --gh: 18px; }
@media (min-width: 700px) { :root { --gs: 64px; --gh: 20px; } }
@media (min-width: 1024px) { :root { --gs: 80px; --gh: 24px; } }
.spin { padding-bottom: calc(var(--gs) / 2); }
.rail { padding: calc(var(--gs) / 2) 0 max(0px, calc(var(--gs) / 2 - 30px)); }
.rail__head { margin-bottom: max(0px, calc(var(--gh) - 16px)); }
.crail { padding: calc(var(--gs) / 2) 0 max(0px, calc(var(--gs) / 2 - 26px)); }
.crail .rail__head { margin-bottom: max(0px, calc(var(--gh) - 10px)); }
.tiles, .services, .brands, .tradein { padding: calc(var(--gs) / 2) 0; }
.tiles__grid, .stack { margin-top: var(--gh); }
.ftr { padding-top: 36px; }
/* Trade-in: подпись под телефоном стоит ниже его рамки — запас снизу раздела на её высоту */
.tradein { padding-bottom: calc(var(--gs) / 2 + 30px); }
.ftr { padding-top: calc(var(--gs) / 2); }

/* ---------- кнопки и клавиатура: правки по проверке (SPIN5_AUDIT3/controls.md) ---------- */
/* стрелки лент у края гаснут, но остаются в порядке Tab — фокус не пропадает */
.rail__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (hover: hover) { .rail__btn[aria-disabled="true"]:hover { background: #e8e8ed; } }
/* уведомление не перехватывает щелчки по кнопкам под ним */
.toast { pointer-events: none; }
/* лента цветов тянется мышью, как «Популярное»; во время протяжки текст не выделяется */
.crail__view.is-grab { cursor: grab; }
.crail.is-static .crail__view { cursor: auto; }
.rail__view.is-dragging, .crail__view.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
/* фокус на точке цвета отличается от отметки выбранного цвета: тёмная рамка на расстоянии */
.dot:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 6px; border-radius: 50%; }
/* поле поиска: рамка фокуса заметная, как у остальных элементов */
.hdr__search input:focus { border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0, 113, 227, .3); }
/* плитки новинок и карточки цветов открываются по названию и фото — как карточки «Популярного» */
.ccard { position: relative; }
.tile__link, .ccard__link { color: inherit; text-decoration: none; }
.tile__link::after, .ccard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.tile__act, .ccard__dots, .ccard__act { position: relative; z-index: 1; }
.tile__link:focus-visible, .ccard__link:focus-visible { outline: none; }
.tile:has(.tile__link:focus-visible), .ccard:has(.ccard__link:focus-visible) { box-shadow: 0 0 0 2px #0071e3; }
/* плитки сервисов — это текст, а не ссылки: при наведении не приподнимаются */
@media (hover: hover) {
  html:not(.calm) .services .scard--violet:hover, html:not(.calm) .services .scard--indigo:hover { translate: none; box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .3); }
  html:not(.calm) .services .scard--ink:hover, html:not(.calm) .services .scard--light:hover { translate: none; box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .45); }
}
/* панель цены: верх на одной линии с надписью над заголовком (раньше была на 4 точки ниже) */
@media (min-width: 1024px) { .pick { align-self: start; } }
/* витрина на медленном интернете: фото дальнего товара, пришедшее позже, проявляется за 0,5 с */
html:not(.calm) .ring__img:not(.is-ready) { opacity: 0; }
html:not(.calm) .ring__img { transition: opacity .5s var(--ease-apple); }