/* Шрифт, цвета, радиусы и размеры сняты с айпарк.рф */
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-300.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-700.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff;
  --text: #000000;
  --gray: #f6f6f6;
  --dark: #111111;
  --muted: #777777;
  --label: #666667;
  --old: #bdbdbd;
  --line: #e2e2e2;
  --blue: #0077ed;
  --radius: 20px;
  --gutter: 16px;
  --bar-h: 64px;
  /* во весь экран сверху вырез телефона и кнопки Telegram «Закрыть» / «⋯»: шапка магазина встаёт под ними */
  --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'SFUIDISPLAY', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- шапка ---------- */
/* шапка сплошная белая, без размытия фона: backdrop-filter дорогой для телефона и давал подлаги при переходах */
.top { position: sticky; top: 0; z-index: 20; background: #fff; padding-top: var(--tg-top); }
/* название по центру полосы с кнопками Telegram; полоса стоит на месте, шапка магазина уезжает под неё.
   Вне полноэкранного режима полосы нет — высота 0, не видно */
.tg-title { position: fixed; z-index: 21; left: 0; right: 0; top: 0; height: var(--tg-top); padding-top: var(--tg-safe-area-inset-top, 0px); box-sizing: border-box; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; letter-spacing: .5px; color: var(--text); pointer-events: none; }
.bar { height: var(--bar-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* слева: аватар с живым кольцом, приветствие и баллы */
.who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.av-ring { position: relative; flex: none; width: 44px; height: 44px; }
/* кольцо цвета нового iPhone (Burgundy #2f5f8a) с металлическим бликом, который бежит по кругу */
.av-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: ringSpin 4.5s linear infinite;
  background: conic-gradient(from 0deg, #2f5f8a 0%, #24496b 28%, #2f5f8a 52%, #2e5880 70%, #8fb5dc 82%, #cfe2f6 87%, #8fb5dc 92%, #2f5f8a 100%); }
.av-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2c567d; opacity: 0; pointer-events: none; }
/* нажатие на аккаунт: аватар «прыгает», от кольца расходится волна */
.who.tap .av-ring { animation: avaPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.who.tap .av-ring::after { animation: avaWave .65s ease-out; }
@keyframes avaPop { 0% { transform: scale(1); } 35% { transform: scale(.8); } 70% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes avaWave { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
/* профиль: большой аватар с дышащим ореолом */
.av-ring.big { display: block; width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; }
.av-ring.big .av { inset: 3.5px; padding: 3px; }
.av-ring.big .av-letter { font-size: 34px; }
/* ореол «дышит» только масштабом и прозрачностью (это не нагружает отрисовку, в отличие от анимации тени) */
.av-ring.big::after { display: none; }
@keyframes halo { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
.av { position: absolute; inset: 2.5px; border-radius: 50%; background: #fff; padding: 2px; overflow: hidden; }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av-letter { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--gray); font-size: 15px; font-weight: 600; color: var(--label); }
.who-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-t small { font-size: 12px; font-weight: 500; color: var(--muted); }
.wave { display: inline-block; font-style: normal; transform-origin: 70% 75%; animation: wave 2.8s ease-in-out 1s infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes wave { 0%, 55%, 100% { transform: rotate(0); } 8% { transform: rotate(16deg); } 16% { transform: rotate(-8deg); } 24% { transform: rotate(16deg); } 32% { transform: rotate(-4deg); } 40% { transform: rotate(10deg); } }
/* справа: корзина — пустая сумка или чёрная таблетка со счётчиком и суммой */
.cart-pill { flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 20px; background: var(--gray); color: var(--text);
  transition: background .3s, color .3s, padding .3s; }
.cart-pill img { height: 20px; width: auto; transition: filter .3s; }
.cart-pill.full { background: var(--text); color: #fff; padding: 0 14px 0 11px; }
.cart-pill.full img { filter: invert(1); }
.cp-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--text); font-size: 12px; font-weight: 700; }
.cp-sum { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cart-pill.bump { animation: bump .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bump { 0% { transform: scale(.85); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .av-ring::before, .av-ring.big::after, .who.tap .av-ring, .who.tap .av-ring::after, .wave, .cart-pill.bump { animation: none; } }.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gray); object-fit: cover; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--label); }

/* ---------- общие блоки ---------- */
main { min-height: 70vh; }
.crumbs { padding: 18px var(--gutter) 0; font-size: 13px; color: #9a9a9a; font-weight: 500; }
.crumbs a { color: #9a9a9a; }
.crumbs span { color: var(--text); }
h1 { margin: 28px var(--gutter) 6px; text-align: center; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -.4px; }
.sub { margin: 0 var(--gutter) 22px; text-align: center; color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.5; }
h2 { margin: 56px var(--gutter) 6px; text-align: center; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.3px; }

/* ---------- плитки категорий ---------- */
.tiles { display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--gutter) 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
.tile { flex: none; width: 128px; scroll-snap-align: start; text-align: center; }
.tile .pic { height: 104px; display: grid; place-items: center; }
.tile img { max-height: 100px; max-width: 120px; object-fit: contain; }
.tile b { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; }

/* ---------- карточки брендов ---------- */
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px var(--gutter) 0; }
/* карточка как на сайте: всё считается от ширины самой карточки (cqw), поэтому пропорции не ломаются на любом экране */
.brand { position: relative; display: block; overflow: hidden; border-radius: 18px; background: #f6f6f6; container-type: inline-size; text-align: center; }
.brand b, .brand small { position: absolute; left: 0; width: 100%; line-height: 1.2; }
.brand b { font-size: 16px; font-size: calc(var(--ts) / var(--W) * 100cqw); font-weight: 600; }
.brand small { font-size: 11px; font-size: calc(var(--ss) / var(--W) * 100cqw); font-weight: var(--sw); padding: 0 2%; }
.brand .bimg { position: absolute; background-color: #d1d1d1; background-repeat: no-repeat; background-position: center; background-size: cover; }
.brand.dark { grid-column: 1 / -1; background: #121212; color: #fff; }
.brand.dark b { font-weight: 700; }
.brand.dark small { color: #737373; }
.brand.dark .bimg { background-color: #2e2e2e; }
/* как на сайте: при наведении фото увеличивается на 10% за 0,1 с, у Ray Ban ещё и опускается на 10 px (от ширины 376) */
.brand .bimg { transition: transform .1s linear; backface-visibility: hidden; }
@media (hover: hover) {
  .brand:hover .bimg { transform: scale(1.1); }
  .brand[href="#/c/rayban"]:hover .bimg { transform: translateY(calc(10 / 376 * 100cqw)) scale(1.1); }
}
@media (hover: none) {
  .brand:active .bimg { transform: scale(1.1); }
  .brand[href="#/c/rayban"]:active .bimg { transform: translateY(calc(10 / 376 * 100cqw)) scale(1.1); }
}

/* ---------- соцсети и контакты ---------- */
/* кнопки соцсетей как на сайте: плашка 250×70, иконка слева выступает за край; по краям и между кнопками оставлено место под иконки */
/* на телефоне кнопки того же размера, что на сайте (250×70), по одной в строке: так иконки не налезают на текст;
   между кнопками оставлено место под иконки, которые выступают за край */
.socials { display: grid; grid-template-columns: min(250px, 100%); justify-content: center; gap: 34px; padding: 30px var(--gutter) 6px; }
@media (min-width: 640px) { .socials { grid-template-columns: repeat(2, 250px); gap: 34px 60px; } }
.socials a { position: relative; display: grid; place-items: center; aspect-ratio: 250 / 70; container-type: inline-size; border-radius: 20px; background: #f6f6f6; color: #000; font-size: 13px; font-weight: 500; line-height: 1.2;
  transition: background-color .2s ease-in-out, color .2s ease-in-out; }
.socials a i { position: absolute; z-index: 1; background: no-repeat center / contain; pointer-events: none; }
/* при наведении плашка темнеет, текст белеет (на телефоне — пока палец на кнопке) */
@media (hover: hover) { .socials a:hover { background: #484848; color: #fff; } }
@media (hover: none) { .socials a:active { background: #484848; color: #fff; } }
.foot { margin: 24px var(--gutter) 0; display: grid; gap: 14px; }
.foot .row b { display: block; font-size: 17px; font-weight: 600; }
.foot .row span { display: block; color: var(--muted); font-weight: 300; margin-top: 2px; }
.foot a.link { display: inline-block; margin-right: 18px; font-weight: 500; }
.credit { margin: 6px var(--gutter) 8px; color: #2f5f8a; font-weight: 300; font-size: 14.85px; line-height: 1.5; }
.credit a { color: inherit; font-weight: 500; text-decoration: none; }
.foot small { color: #9a9a9a; font-weight: 300; font-size: 11px; line-height: 1.5; }

/* ---------- каталог раздела ---------- */
.models { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px var(--gutter) 0; }
.model { background: var(--gray); border-radius: var(--radius); padding: 14px 10px 18px; text-align: center; display: flex; flex-direction: column; }
/* рамка фото строго квадратная, а само фото лежит внутри неё: пока картинка не догрузилась (lazy), карточка не растёт и не прыгает */
.model .pic { position: relative; flex: none; width: 100%; aspect-ratio: 1 / 1; }
.model .pic img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; }
.model b { font-size: 15px; font-weight: 600; line-height: 1.25; margin-top: 4px; letter-spacing: -.1px; }
.model span { margin-top: 6px; font-size: 14px; font-weight: 500; }
.model s { color: var(--old); margin-left: 6px; font-weight: 500; }
.sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px var(--gutter) 0; }
.sections .model b { font-size: 17px; margin-top: 0; }
.sections .model span { color: var(--muted); font-weight: 300; font-size: 12px; }

/* ---------- товар ---------- */
.gallery { margin: 14px var(--gutter) 0; background: var(--gray); border-radius: var(--radius); position: relative; overflow: hidden; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slides > div { flex: none; width: 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 20px; }
.slides img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #c8c8c8; transition: background .15s; }
.dots i.on { background: var(--text); }
.pbody { padding: 22px var(--gutter) 0; }
.pbody h1 { margin: 0 0 18px; text-align: left; font-size: 26px; line-height: 1.35; letter-spacing: -.3px; }
.opt { margin-bottom: 16px; }
.opt .name { font-size: 13px; font-weight: 500; color: var(--label); padding-bottom: 7px; }
.opt .name em { font-style: normal; color: var(--text); }
.chips, .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
/* «жидкое стекло», как нижняя панель Telegram: капсула — матовое углубление, выбранный вариант — выпуклая стеклянная линза, которая перетекает (placeGlass).
   Объём держится на трёх вещах: яркая кромка сверху, мягкая тёмная кромка снизу и двухслойная тень (контактная + рассеянная) */
.chips { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 24px;
  border: 1px solid rgba(118, 118, 128, .32);
  background: linear-gradient(180deg, rgba(118, 118, 128, .052), rgba(118, 118, 128, .022));
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .09), inset 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(255, 255, 255, .9); }
.chip { position: relative; z-index: 1; min-height: 34px; padding: 6px 15px; border: 0; border-radius: 20px; background: transparent; font-size: 13px; font-weight: 500; color: var(--text); }
/* память и SIM/eSIM — как сегментированный переключатель iOS: одна строка на всю ширину, варианты равной ширины, линза едет между ними */
.pbody .opt .chips { display: flex; flex-wrap: nowrap; width: 100%; }
.pbody .opt .chips .chip { flex: 1 1 0; min-width: 0; padding: 6px 6px; white-space: normal; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.pbody .opt .chips:has(button:only-of-type) { display: inline-flex; width: auto; }
.pbody .opt .chips:has(button:only-of-type) .chip { flex: none; padding: 6px 22px; }
.chip.on { color: var(--blue); font-weight: 600; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.chips.has-ind .chip.on { background: transparent; box-shadow: none; }
.chips.has-ind { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.chip.near { color: var(--blue); }
.chips:has(.near) .chip.on:not(.near) { color: var(--text); font-weight: 500; }
.chip:disabled { color: #c4c4c4; }
/* линза: блик сверху, цветная дисперсия по краям (розовый слева, голубой справа), внутреннее свечение и тень под ней */
.gl-ind { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 20px; pointer-events: none;
  /* iOS 26: прозрачное стекло, а не белая плашка — сквозь линзу виден фон, края светятся (сверху-слева ярче, снизу-справа мягче) */
  background: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, .1) 58%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(220%) brightness(1.08); backdrop-filter: blur(3px) saturate(220%) brightness(1.08);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .95), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .7), inset 0 0 14px rgba(255, 255, 255, .45),
    0 0 0 .5px rgba(0, 0, 0, .09), 0 6px 16px -4px rgba(20, 30, 60, .22), 0 1px 3px rgba(0, 0, 0, .08);
  transition: translate .6s linear(0, .09 4%, .33 10%, .62 17%, .84 25%, .94 34%, .98 44%, .995 58%, 1), width .22s ease-out, height .3s, scale .45s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, background .25s; }
/* глянцевая полоса вдоль верха линзы */
.gl-ind::after { content: none; }
/* перелёт на другой вариант, как на iPhone: линза сразу «вздувается», вытягивается по ходу движения (--st растёт с расстоянием), пружинит и оседает */
.gl-ind.go { animation: glMove .68s linear(0, .09 4%, .33 10%, .62 17%, .86 25%, 1.03 34%, 1.07 40%, 1.04 48%, .99 58%, .995 70%, 1); }
@keyframes glMove {
  0% { scale: 1.1 1.1; }
  28% { scale: calc(1.14 + var(--st, .2)) calc(1.12 - var(--st, .2) * .5); }
  62% { scale: calc(1.03 - var(--st, .2) * .15) calc(1.05 + var(--st, .2) * .25); }
  100% { scale: 1 1; }
}
/* пока линзу тянут: она приподнимается, растёт и отбрасывает длинную тень, а пальцем не закрывается */
.gl-ind.drag { transition: width .25s, height .3s, scale .25s cubic-bezier(.3, 1.35, .5, 1), box-shadow .25s; scale: 1.16;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .3) 42%, rgba(255, 255, 255, .22) 58%, rgba(255, 255, 255, .66) 100%);
  box-shadow: inset 2px 2px 1px -.5px #fff, inset -2px -2px 1px -.5px rgba(255, 255, 255, .85), inset 0 0 18px rgba(255, 255, 255, .6),
    0 0 0 .5px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .1), 0 16px 26px -6px rgba(20, 20, 50, .34); }
@media (prefers-reduced-motion: reduce) { .gl-ind { transition: none; } .gl-ind.go { animation: none; } }
/* цвет — стеклянная бусина: блик сверху-слева, объём по краю, мягкая тень снизу */
/* кружок цвета лежит внутри рамки 36×36: кольцо выбранного цвета не выступает за левую линию, и вся колонка (название цвета, кружки, переключатели) стоит по одному краю */
.swatches { gap: 2px; }
.sw { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: none; position: relative; }
.sw::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 3px 7px -2px rgba(0, 0, 0, .3); }
.sw.on::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--blue); }
.sw:disabled { opacity: .3; }
.price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 14px; font-size: 22px; font-weight: 600; }
.price s { color: var(--old); }
/* со скидкой: плашка из двух равных половин (зачёркнутая цена с «!» слева, настоящая справа) и стрелка между ними */
.price.two { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 16px; background: var(--gray); }
.price .pc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.price .pc small { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 400; color: var(--muted); }
.price .pc s { display: block; font-size: 14px; font-weight: 500; }
.price .pc.new { justify-content: flex-end; text-align: right; }
.price .pc.new b { display: block; font-size: 24.9px; font-weight: 600; letter-spacing: -.3px; }
.price .parr { width: 20px; height: 20px; margin: 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); position: relative; }
.price .parr::after { content: ''; position: absolute; left: 6px; top: 7px; width: 6px; height: 6px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
/* «!» возле зачёркнутой цены — объяснение про iPack */
.ipk-i { align-self: center; position: relative; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--blue); border-radius: 50%; background: rgba(0, 122, 255, .08); color: var(--blue); font-size: 13px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.ipk-i:active { transform: scale(.9); }
/* окно iPack: синий макет с плитками (картинка нарезана на четыре части), плитки выпрыгивают по очереди */
.ipk-sheet { padding-top: 16px; }
.ipk-card { padding: 22px 14px 14px; border-radius: 22px; text-align: center; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #7399e0 0%, #5877c9 48%, #3a47a2 100%); }
.ipk-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 40% at 50% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.ipk-h { display: block; font-size: 38px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.ipk-warr { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 12px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 22px; font-size: 18px; font-weight: 300; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ipk-warr::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); }
.ipk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ipk-t { display: block; aspect-ratio: 1 / 1; border-radius: 15%; background: url(img/ipack.webp) no-repeat; background-size: 249.82% auto; box-shadow: 0 8px 18px -6px rgba(10, 20, 80, .45); }
.ipk-cmp { display: grid; gap: 6px; margin: 4px 0 16px; }
.ipk-cmp > div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; border-radius: 14px; background: var(--gray); font-size: 15px; }
.ipk-cmp span { color: var(--label); font-weight: 400; font-size: 14px; }
.ipk-cmp s { color: var(--old); font-weight: 600; }
.ipk-cmp .win { background: #e8f0ff; }
.ipk-cmp .win b { color: var(--blue); font-size: 17px; }
.ipk-cmp .save { background: #e9f8ee; }
.ipk-cmp .save b { color: #1f9d4c; }
.ipk-sheet h3 { margin-top: 18px; font-size: 19px; }
/* обе кнопки внизу одним прилипающим блоком, чтобы «Супер!» не наезжала на «Настроить под себя» */
.ipk-foot { position: sticky; bottom: 0; display: grid; gap: 8px; padding-top: 4px; background: #fff; box-shadow: 0 10px 0 10px #fff, 0 -14px 14px 0 rgba(255, 255, 255, .9); }
.ipk-foot .buy.alt { margin-top: 0; }
.ipk-sheet .sub { text-align: center; }
.ipk-bg.on .ipk-h { animation: ipkUp .7s .12s backwards cubic-bezier(.2, .9, .25, 1); }
.ipk-bg.on .ipk-warr { animation: ipkUp .7s .24s backwards cubic-bezier(.2, .9, .25, 1); }
.ipk-bg.on .ipk-warr::after { animation: ipkShine 1.1s .9s ease-in-out; }
.ipk-bg.on .ipk-t { animation: ipkPop .75s calc(.34s + var(--i) * .11s) backwards cubic-bezier(.2, 1.35, .4, 1); }
.ipk-bg.on h3, .ipk-bg.on .ipk-sheet .sub, .ipk-bg.on .ipk-cmp, .ipk-bg.on .ipk-foot { animation: ipkUp .6s .85s backwards cubic-bezier(.2, .9, .25, 1); }
@keyframes ipkUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes ipkPop { from { opacity: 0; transform: translateY(34px) scale(.7) rotate(-4deg); filter: blur(6px); } }
@keyframes ipkShine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .ipk-bg.on *{ animation: none !important; } }
.buy { width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .1px; } /* полностью круглые края, как у корзины в шапке */
.buy.alt { background: var(--gray); color: var(--text); margin-top: 8px; }
.acc { margin-top: 26px; border-top: 1px solid var(--line); }
.acc a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.acc a::after { content: '›'; color: #9a9a9a; font-size: 20px; }
/* ---------- каталог как в киоске: слева колонка разделов, справа список выбранного ---------- */
body.shelled { overflow: hidden; padding-bottom: 0; }
.shell { display: flex; height: calc(100vh - var(--bar-h) - var(--tg-top)); height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--bar-h) - var(--tg-top)); }
.rail { position: relative; flex: none; width: 88px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding: 8px 6px 70px; border-right: 1px solid var(--line); background: #fff; }
.rail::-webkit-scrollbar, .pane::-webkit-scrollbar { display: none; }
/* бегунок под активным пунктом: едет к новому с пружиной */
.rail-ind { position: absolute; left: 6px; right: 6px; top: 0; height: var(--ih, 84px); border-radius: 18px; background: var(--gray); transform: translateY(var(--iy, 8px));
  transition: transform .55s cubic-bezier(.34, 1.45, .5, 1), height .3s ease, opacity .2s; z-index: 0; }
.rail-ind::before { content: ''; position: absolute; left: -6px; top: 24%; bottom: 24%; width: 3px; border-radius: 0 3px 3px 0; background: var(--text); }
.ri { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 9px; font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; color: #8a8a8e;
  transition: color .25s; animation: railIn .65s backwards cubic-bezier(.34, 1.56, .64, 1); animation-delay: calc(var(--i, 0) * 45ms); }
.ri img { width: 46px; height: 46px; object-fit: contain; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ri.on { color: var(--text); font-weight: 600; }
.ri.on img { transform: scale(1.14); }
.ri:active img { transform: scale(.88); transition-duration: .12s; }
@keyframes railIn { from { opacity: 0; transform: translateX(-26px) scale(.9); } }
.shell.still .ri { animation: none; }  /* при возврате с другой страницы колонка появляется сразу */

.pane { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 14px 10px 90px; }
.ptitle { margin: 2px 4px 12px; }
.pt-h { font-size: 24px; font-weight: 600; letter-spacing: -.3px; line-height: 1.15; }
.ptitle p { margin: 4px 0 0; font-size: 12px; font-weight: 300; line-height: 1.4; color: var(--muted); }
.pt-sub { margin: 22px 4px 10px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.pback { display: inline-block; margin: 0 4px 8px; font-size: 13px; font-weight: 500; color: var(--blue); }
.pane .models, .pane .sections { padding: 0; gap: 8px; }
.pane .model { padding: 10px 6px 14px; border-radius: 18px; }
.pane .model b { font-size: 13px; }
.pane .model span { font-size: 12.5px; }
.pane .model s { margin-left: 4px; }
/* вход: заголовок выезжает слева, карточки встают в 3D по очереди; выход: всё уезжает влево */
.pane.entering .ptitle { animation: titleIn .55s backwards cubic-bezier(.2, .8, .2, 1); }
.pane.entering .model { animation: cardIn .8s backwards cubic-bezier(.34, 1.56, .64, 1); animation-delay: calc(min(var(--i, 0), 9) * 50ms + 80ms); }
@keyframes cardIn { from { opacity: 0; transform: perspective(700px) rotateX(22deg) translateY(46px) scale(.92); } }
@keyframes titleIn { from { opacity: 0; transform: translateX(-14px); } }
.pane .models, .pane .ptitle { transition: opacity .16s ease-in, transform .16s ease-in; }
.pane.leaving .models, .pane.leaving .ptitle { opacity: 0; transform: translateX(-18px) scale(.98); }
@media (prefers-reduced-motion: reduce) { .rail-ind { transition: none; } .ri, .pane.entering .model, .pane.entering .ptitle { animation: none; } }

/* ---------- переход «карточка ↔ товар»: общее фото плавно перелетает на новое место ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
/* перелёт аватара: старая и новая страница не смешиваются (никакого наложения двух больших снимков), летит только аватар */
.vt-ava::view-transition-old(root) { animation: none; opacity: 0; }
.vt-ava::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(hero) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .85, .2, 1); z-index: 10; }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: contain; }

/* ---------- 3D-появление карточек и полёт товара в корзину ---------- */
.rv.rv3d { transform: perspective(700px) rotateX(24deg) translateY(50px) scale(.93); transform-origin: 50% 100%;
  transition-property: opacity, transform; transition-duration: .85s; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); } /* пружина: с лёгким перелётом */
.rv.rv3d.in { transform: none; }
.fly { position: fixed; z-index: 100; pointer-events: none; object-fit: contain; transform-origin: center; will-change: transform; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .22)); }

/* ---------- эффекты прокрутки (значения ставит app.js) ---------- */
.top { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; will-change: transform; }
.top.hide { transform: translateY(calc(-1 * var(--bar-h))); }  /* шапка уезжает вверх при прокрутке вниз */
.top.scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.model .pic img { translate: 0 var(--py, 0px); }          /* отдельное свойство translate, не мешает увеличению при наведении */
.gallery .slides { transform: translateY(var(--gy, 0px)) scale(var(--gs, 1)); opacity: var(--go, 1); transform-origin: 50% 0; will-change: transform, opacity; }
.pbody { position: relative; z-index: 1; background: var(--bg); }  /* наезжает поверх уходящей галереи */
@media (prefers-reduced-motion: reduce) { .top { transition: none; } .top.hide { transform: none; } }

/* раскрывающиеся «Гарантия и возврат» и «Оплата и доставка» */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid #9a9a9a; border-bottom: 1.5px solid #9a9a9a; transform: rotate(45deg); transition: transform .25s; }
.acc-item[open] summary::after { transform: rotate(-135deg); }
.acc-body { padding: 0 0 18px; font-size: 14px; line-height: 1.55; color: #333; animation: accIn .3s ease; }
.acc-body h4 { margin: 16px 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.acc-body h4.grp { margin-top: 22px; font-size: 17px; }
.acc-body p { margin: 0 0 10px; }
.acc-body ul { margin: 6px 0 10px; padding-left: 18px; }
.acc-body li { margin-bottom: 5px; }
.acc-body .small { font-size: 12px; line-height: 1.5; color: var(--muted); }
@keyframes accIn { from { opacity: .6; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-body { animation: none; } .acc-item summary::after { transition: none; } }


/* ---------- корзина ---------- */
.line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px; margin: 0 var(--gutter) 10px; background: var(--gray); border-radius: var(--radius); }
.line .pic { height: 76px; display: grid; place-items: center; }
.line img { max-height: 76px; max-width: 76px; object-fit: contain; }
.line b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.line small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 300; line-height: 1.4; }
.line .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qty { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; }
.qty button { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; }
.qty span { min-width: 22px; text-align: center; font-weight: 600; }
.line .sum { font-weight: 600; font-size: 16px; }
.total { display: flex; justify-content: space-between; margin: 22px var(--gutter) 14px; font-size: 20px; font-weight: 600; }
.wrap { padding: 0 var(--gutter); }
.empty { text-align: center; color: var(--muted); font-weight: 300; padding: 40px var(--gutter); }
.empty .buy { margin-top: 22px; }
.done { text-align: center; padding: 70px var(--gutter) 0; }
.done .mark { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--text); display: grid; place-items: center; color: #fff; font-size: 30px; }
.done h1 { margin-top: 0; }

/* ---------- профиль ---------- */
.me { text-align: center; padding-top: 30px; }
/* значок баллов — кольцо из знака айпарка цвета Burgundy (оно шире, чем выше) */
.pt-ico { display: inline-block; width: 16px; height: auto; margin-right: 5px; vertical-align: -1.5px; }
.points .pt-ico { width: 22px; margin-right: 7px; vertical-align: -3px; }
.me h1 { margin-top: 0; }
.order.fresh { animation: freshIn .4s ease backwards; }
@keyframes freshIn { from { opacity: 0; transform: translateY(8px); } }
/* подарки: купленные товары парят вокруг аватарки, у каждого своё место, ритм и фаза */
.orbit { position: relative; width: 96px; margin: 0 auto; }
.orbit .av-ring.big { margin-bottom: 16px; }
.gifts { position: absolute; left: 48px; top: 48px; width: 0; height: 0; pointer-events: none; }
.gift { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 6px 14px -4px rgba(60, 20, 30, .3);
  translate: var(--x) var(--y); animation: giftIn .7s cubic-bezier(.3, 1.5, .5, 1) backwards, giftBob var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
.gift img { width: 28px; height: 28px; object-fit: contain; }
@keyframes giftIn { from { translate: 0 0; scale: .2; opacity: 0; } }
@keyframes giftBob { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(3px, -7px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .gift { animation: none; } }
.points { display: inline-block; margin-top: 12px; padding: 8px 18px; background: #eaf3fd; color: #24496b; border-radius: 18px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.orders { margin-top: 30px; text-align: left; }
.cashback { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: #eaf3fd; color: #24496b; }
.cashback .pt-ico { width: 26px; margin: 0; flex: none; }
.cb-t { flex: 1; min-width: 0; }
.cb-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.cb-t small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; opacity: .7; }
.cart-cb { margin: 0 var(--gutter) 14px; }
.cb-n { flex: none; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- карта клиента (QR) ---------- */
.idcard { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: calc(100% - 2 * var(--gutter)); margin: 22px var(--gutter) 0; padding: 14px 16px 14px 14px; border: 0; border-radius: var(--radius); text-align: left; color: #fff;
  background: linear-gradient(125deg, #1a0b10 0%, #1a2d40 52%, #24496b 100%); box-shadow: 0 10px 26px -8px rgba(47, 95, 138, .55), inset 0 1px 0 rgba(255, 255, 255, .16); transition: transform .15s; }
.idcard:active { transform: scale(.98); }
/* «позови друга»: светлая карточка с цифрами и кнопкой приглашения */
.refcard { margin: 14px var(--gutter) 0; padding: 16px; border-radius: var(--radius); background: var(--gray); }
.rf-top { display: flex; gap: 12px; align-items: flex-start; }
.rf-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff; font-size: 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.rf-top b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.rf-top em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.35; color: var(--label); }
.rf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; }
.rf-stats span { padding: 9px 4px; border-radius: 12px; background: #fff; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.25; }
.rf-stats b { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.rf-links { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.rf-links button { padding: 6px 0; border: 0; background: none; color: var(--blue); font-size: 13px; font-weight: 500; }
.rf-in { display: block; width: 100%; margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--gray); font-size: 18px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; outline: none; }
.rf-in.rv-in { text-transform: none; letter-spacing: 0; font-size: 17px; }
.ri .al { display: block; width: 15px; height: 15px; margin: 0 auto; }
.pt-h .al { display: block; width: 30px; height: 30px; }
.refcard.rvw .buy { margin-top: 14px; }
.refcard.rvw:empty { display: none; }
.rf-in:focus { border-color: var(--blue); }
/* «стать инфлюенсером»: аккуратная строка внутри карточки «Позови друга» и окно снизу с условиями, ступенями и своей ссылкой */
.rf-inf { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 12px 12px 10px; border: 0; border-radius: 14px; background: #eeeafc; color: #3b2a87; text-align: left; transition: transform .15s; }
.rf-inf:active { transform: scale(.98); }
.rf-inf .chev { flex: none; margin-left: auto; opacity: .7; transform: rotate(-45deg); }
.rf-inf-t { flex: 1; }
.rf-inf-t b { display: block; font-size: 15px; font-weight: 600; }
.rf-inf-t em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; opacity: .75; }
.inf-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #fff; font-size: 18px; box-shadow: 0 2px 8px rgba(59, 42, 135, .15); }
.inf-sheet { padding-top: 22px; }
.inf-hero { text-align: center; }
.inf-star { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 22px; background: linear-gradient(145deg, #f4f0ff, #ddd5fb); font-size: 34px; box-shadow: 0 8px 20px -6px rgba(59, 42, 135, .35); }
.inf-p { margin: 4px 2px 14px; font-size: 14px; line-height: 1.45; color: var(--label); text-align: center; }
.inf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inf-btns .buy.alt { margin-top: 0; }
.inf-bg.on .inf-star { animation: ipkPop .7s .1s backwards cubic-bezier(.2, 1.35, .4, 1); }
.inf-bg.on .inf-t { animation: ipkUp .55s calc(.2s + var(--i, 0) * .06s) backwards cubic-bezier(.2, .9, .25, 1); }
.inf-month { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.inf-month span { padding: 10px 6px; border-radius: 12px; background: var(--gray); text-align: center; font-size: 11px; color: var(--muted); line-height: 1.25; }
.inf-month b { display: block; font-size: 20px; font-weight: 600; color: var(--text); }
.inf-tiers { display: grid; gap: 6px; }
.inf-t { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 14px; background: var(--gray); font-size: 15px; transition: background .3s; }
.inf-t b { font-weight: 600; color: #3b2a87; font-variant-numeric: tabular-nums; }
.inf-t.next { background: #eeeafc; box-shadow: inset 0 0 0 1.5px rgba(59, 42, 135, .35); }
.inf-t.hit { background: #e9f8ee; }
.inf-t.hit b { color: #1f9d4c; }
.inf-t.hit span::after { content: ' ✓'; color: #1f9d4c; }
.inf-lt { margin: 16px 4px 6px; font-size: 13px; font-weight: 500; color: var(--label); }
.inf-link { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 12px; line-height: 1.4; word-break: break-all; color: var(--muted); user-select: all; }
.idcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .13) 50%, transparent 64%); transform: translateX(-100%); animation: tiSheen 4.2s ease-in-out infinite 1.4s; pointer-events: none; }
.id-qr { flex: none; width: 76px; height: 76px; padding: 7px; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.id-qr svg, .ids-qr svg { display: block; width: 100%; height: 100%; }
.id-t { flex: 1; min-width: 0; }
.id-t small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; opacity: .65; }
.id-t b { display: block; margin: 3px 0 2px; font-size: 20px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.id-t em { display: block; font-style: normal; font-size: 12px; font-weight: 300; line-height: 1.35; opacity: .75; }
.idcard .chev { color: #fff; transform: rotate(-45deg); margin-right: 2px; opacity: .8; }
.idsheet { text-align: center; }
.ids-k { display: block; font-size: 12px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ids-qr { width: min(72vw, 280px); aspect-ratio: 1; margin: 14px auto 12px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 34px -10px rgba(0, 0, 0, .3); }
.ids-code { display: block; margin: 0 auto 6px; padding: 8px 18px; border: 0; border-radius: 999px; background: #eaf3fd; color: #2f5f8a; font-size: 24px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.ids-code:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .idcard::after { animation: none; } }

/* ---------- Trade-In ---------- */
/* значок «обмен»: две стрелки по кругу, цвет — currentColor */
.ti-ico { flex: none; display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11a8.5 8.5 0 0 0-15-4.6'/%3E%3Cpath d='M3.5 13a8.5 8.5 0 0 0 15 4.6'/%3E%3Cpath d='M5.5 2.5v4h4'/%3E%3Cpath d='M18.5 21.5v-4h-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11a8.5 8.5 0 0 0-15-4.6'/%3E%3Cpath d='M3.5 13a8.5 8.5 0 0 0 15 4.6'/%3E%3Cpath d='M5.5 2.5v4h4'/%3E%3Cpath d='M18.5 21.5v-4h-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ti-x, .ti-close { position: relative; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); }
.ti-x::before, .ti-x::after, .ti-close::before, .ti-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.ti-x::after, .ti-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* кнопка на странице iPhone: тёмная плашка с бегущим бликом, значок медленно крутится */
.ti-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 13px 14px; border: 0; border-radius: 14px; text-align: left; color: #fff; background: linear-gradient(120deg, #141414 0%, #1c3247 55%, #2f5f8a 100%); box-shadow: 0 6px 18px rgba(47, 95, 138, .25); transition: transform .15s; }
.ti-btn:active { transform: scale(.98); }
.ti-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%); transform: translateX(-100%); animation: tiSheen 3.2s ease-in-out infinite 1s; }
@keyframes tiSheen { 45%, 100% { transform: translateX(100%); } }
.ti-btn .ti-ico { width: 30px; height: 30px; animation: tiSpin 6s linear infinite; }
@keyframes tiSpin { to { transform: rotate(360deg); } }
.ti-t { flex: 1; min-width: 0; }
.ti-t b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .1px; }
.ti-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .75; }
.ti-btn .chev { color: #fff; transform: rotate(-45deg); margin-right: 4px; }
/* применённая оценка */
.ti-on { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 14px; background: #eaf7ee; color: #12632e; animation: tiPop .45s cubic-bezier(.3, 1.4, .5, 1); }
.ti-on .ti-t b { font-size: 13.5px; }
@keyframes tiPop { from { transform: scale(.94); opacity: 0; } }
/* шторка-опрос */
.sheet.ti { padding-top: 14px; min-height: 62vh; }
.ti-top { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.ti-top b { font-size: 15px; font-weight: 700; }
.ti-back { min-width: 70px; border: 0; background: none; padding: 0; text-align: left; color: var(--blue); font-size: 14px; font-weight: 500; }
.ti-close { margin-left: 42px; }
.ti-prog { height: 4px; margin: 12px 0 18px; border-radius: 2px; background: var(--gray); overflow: hidden; }
.ti-prog i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #2f5f8a, #5b8fc0); transition: width .45s cubic-bezier(.3, 1.2, .5, 1); }
.ti-step { animation: tiStep .38s cubic-bezier(.2, .9, .25, 1) backwards; }
@keyframes tiStep { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 36px)); } }
.ti h3 { margin: 0 0 4px; text-align: center; font-size: 21px; }
.ti .opt { margin-top: 16px; }
.ti .chips { flex-wrap: wrap; }
.ti-gens { display: flex; gap: 8px; margin: 14px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
.ti-gens::-webkit-scrollbar { display: none; }
.ti-gen { flex: none; min-width: 54px; height: 54px; padding: 0 10px; border: 0; border-radius: 16px; background: var(--gray); color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -.3px; transition: transform .2s, background .2s, color .2s; }
.ti-gen.on { background: var(--text); color: #fff; transform: scale(1.06); }
.ti-ideal { margin: 22px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--gray); color: var(--muted); font-size: 13px; text-align: center; transition: background .3s, color .3s; }
.ti-ideal b { color: var(--text); font-size: 15px; }
.ti-ideal.on { background: #eaf3fd; color: #24496b; }
.ti-ideal.on b { color: #2f5f8a; }
.ti-opts { display: grid; gap: 8px; margin-bottom: 14px; }
.ti-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--gray); text-align: left; color: var(--text); box-shadow: inset 0 0 0 1.5px transparent; animation: tiStep .4s cubic-bezier(.2, .9, .25, 1) backwards; animation-delay: calc(var(--i) * .05s); transition: box-shadow .2s, background .2s, transform .15s; }
.ti-opt:active { transform: scale(.98); }
.ti-opt span { flex: 1; }
.ti-opt b { display: block; font-size: 15px; font-weight: 600; }
.ti-opt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 300; }
.ti-opt i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9c9cf; transition: box-shadow .2s, background .2s; }
.ti-opt.multi i { border-radius: 7px; }
.ti-opt.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 4px 14px rgba(0, 119, 237, .12); }
.ti-opt.on i { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
/* итог */
.ti-res { text-align: center; padding-top: 6px; }
.ti-badge { width: 74px; height: 74px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2f5f8a, #5b8fc0); box-shadow: 0 10px 30px rgba(47, 95, 138, .35); animation: tiBadge .7s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.ti-badge .ti-ico.big { width: 36px; height: 36px; animation: tiSpin 1.1s cubic-bezier(.3, 1, .5, 1) 1; }
@keyframes tiBadge { from { transform: scale(.4) rotate(-60deg); opacity: 0; } }
.ti-res > small { color: var(--muted); font-size: 13px; }
.ti-sum { margin: 2px 0 8px; font-size: 40px; font-weight: 800; letter-spacing: -1px; color: #2f5f8a; font-variant-numeric: tabular-nums; }
.ti-new { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; margin: 4px 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 13px; }
.ti-new span { width: 100%; color: var(--muted); }
.ti-new b { font-size: 20px; font-weight: 700; }
.ti-new s { color: var(--old); }
/* в корзине */
.ti-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: #eaf7ee; color: #12632e; font-size: 12px; line-height: 1.35; }
.ti-line .ti-ico { width: 16px; height: 16px; }
.ti-line > span:not(.ti-ico) { flex: 1; min-width: 0; }
.ti-line b { display: block; font-size: 13px; }
.ti-line .ti-x { width: 22px; height: 22px; background: rgba(18, 99, 46, .1); }
.ti-line .ti-x::before, .ti-line .ti-x::after { width: 9px; }
.line .sum s { margin-right: 6px; color: var(--old); font-size: 12px; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .ti-btn::after, .ti-btn .ti-ico, .ti-step, .ti-opt, .ti-badge, .ti-badge .ti-ico.big, .ti-on { animation: none; } }
.pane.prod { padding: 0 0 90px; }
.pane.prod .pbody h1 { font-size: 21px; margin-bottom: 14px; }
.pane.prod .gallery { margin: 8px 8px 0; }
.pane.prod .pbody { padding: 16px 12px 0; }
.pane.prod .price { font-size: 20px; margin: 16px 0 12px; }
.pane.prod .crumbs { padding: 12px 12px 0; font-size: 12px; }
.pane.prod .pback { margin: 12px 12px 0; }
.pane.prod .foot { margin: 24px 12px 0; }
.pane.prod .buy { height: 46px; }
.pane.entering.prod .gallery, .pane.entering.prod .pbody, .pane.entering.prod .crumbs, .pane.entering.prod .pback { animation: prodIn .55s backwards cubic-bezier(.2, .8, .2, 1); }
.pane.entering.prod .pbody { animation-delay: .08s; }
@keyframes prodIn { from { opacity: 0; transform: translateY(18px); } }
.pane.prod { transition: opacity .16s ease-in, transform .16s ease-in; }
.pane.prod.leaving, .pane.leaving.prod { opacity: 0; transform: translateX(-14px); }
.shop-wrap { margin: 36px var(--gutter) 0; }
.shop-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--radius); background: #eaf3fd; color: #24496b; text-align: left; transition: transform .15s, background .3s; }
.shop-head:active { transform: scale(.98); }
.shop-head .pt-ico { width: 30px; margin: 0; flex: none; transition: transform .6s cubic-bezier(.2,.9,.25,1); }
.sh-t { flex: 1; }
.sh-t b { display: block; font-size: 17px; font-weight: 600; }
.sh-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .7; }
.chev { flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .45s cubic-bezier(.2,.9,.25,1); }
.shop-wrap.open .chev { transform: translateY(2px) rotate(225deg); }
.shop-wrap.open .shop-head .pt-ico { transform: rotate(360deg) scale(1.12); }
.shop-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.9,.25,1); }
.shop-wrap.open .shop-body { grid-template-rows: 1fr; }
.shop-in { overflow: hidden; min-height: 0; }
.shop { display: grid; gap: 10px; padding-top: 10px; }
.cart-shop { margin-top: 26px; margin-bottom: 8px; }
.orders-wrap { margin-top: 12px; }
.orders-wrap .shop-head { background: var(--gray); color: var(--text); }
.orders-wrap #ordersBox { padding-top: 10px; }
.orders-wrap .order { margin: 0 0 10px; }
.orders-wrap .sub { margin: 4px 0 6px; }
.shop .reward { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.9,.25,1); }
.shop-wrap.open .shop .reward { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .06s); }
.shop-wrap.open .shop .reward:active { transform: scale(.98); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .shop-body, .shop .reward, .chev, .shop-head .pt-ico { transition: none; } }
.rw-bar { grid-column: 1 / -1; height: 5px; margin-top: 2px; border-radius: 3px; background: rgba(36, 73, 107, .12); overflow: hidden; }
.rw-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #6896c4, #24496b); transform-origin: left; }
.shop-wrap.open .shop .reward .rw-bar i { animation: rwFill 1s calc(.3s + var(--i) * .06s) backwards cubic-bezier(.2, .9, .25, 1); }
@keyframes rwFill { from { transform: scaleX(0); } }
.rw-cap { grid-column: 1 / -1; margin-top: -8px; font-size: 11px; color: var(--muted); }
.reward.ok .rw-cap { color: #1f9d4c; font-weight: 500; }
.reward.ok .rw-bar i { background: linear-gradient(90deg, #35c46a, #1f9d4c); }
.reward { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border: 0; border-radius: var(--radius); background: var(--gray); text-align: left; color: var(--text); transition: transform .15s, opacity .15s; }
.reward:active { transform: scale(.98); opacity: .85; }
.rw-pic { width: 64px; height: 64px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.rw-pic img { width: 100%; height: 100%; object-fit: contain; }
.rw-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.rw-t small { display: block; margin-top: 3px; color: var(--muted); font-weight: 300; font-size: 12px; }
.rw-p { font-size: 14px; font-weight: 600; color: #24496b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-p.low { color: var(--muted); }
.rw-p .pt-ico { width: 16px; margin-right: 4px; vertical-align: -1.5px; }
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0); display: flex; align-items: flex-end; transition: background .25s; }
.sheet-bg.on { background: rgba(0,0,0,.38); }
.sheet { width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px var(--gutter) calc(18px + env(safe-area-inset-bottom)); background: #fff; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.9,.25,1); }
.sheet-bg.on .sheet { transform: none; }
.sh-pic { width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 24px; background: var(--gray); display: grid; place-items: center; overflow: hidden; }
.sh-pic img { width: 100%; height: 100%; object-fit: contain; }
.sheet h3 { margin: 0 0 4px; text-align: center; font-size: 22px; font-weight: 600; }
.sheet .sub { margin: 0 0 16px; }
.sh-bal { margin: 14px 0 12px; text-align: center; font-size: 13px; color: var(--muted); }
.sh-bal b { color: #24496b; }
.buy:disabled { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-bg { transition: none; } }
.order { margin: 0 var(--gutter) 10px; padding: 16px; background: var(--gray); border-radius: var(--radius); }
.order .head { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
/* админ-панель: вход в профиле, вкладки и плитки обзора; остальные разделы пока заглушки */
.adm-link { display: flex; align-items: center; gap: 12px; margin: 16px var(--gutter) 0; padding: 12px 14px; border-radius: var(--radius); background: #1d1d1f; color: #fff; transition: transform .15s; }
.adm-link:active { transform: scale(.98); }
.adm-link b { display: block; font-size: 15px; font-weight: 600; }
.adm-link em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; opacity: .65; }
.adm-link .chev { margin-left: auto; color: #fff; opacity: .7; transform: rotate(-45deg); }
.adm-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .12); font-size: 19px; }
.adm { padding: 8px var(--gutter) 24px; }
.adm h1 { margin: 6px 0 2px; font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.adm h1, .adm .sub { text-align: left; }
.adm .sub { margin: 0 0 14px; }
.adm-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-tabs .chip { flex: 1 0 auto; padding: 6px 12px; white-space: nowrap; }
.adm-body { margin-top: 14px; }
.adm-body.in { animation: ipkUp .4s cubic-bezier(.2, .9, .25, 1); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-t { padding: 16px 14px; border-radius: var(--radius); background: var(--gray); }
.adm-t b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.adm-t span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.adm-soon { padding: 36px 20px; border-radius: var(--radius); background: var(--gray); text-align: center; }
.adm-soon i { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; background: #fff; font-size: 28px; font-style: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.adm-soon b { display: block; font-size: 18px; font-weight: 600; }
.adm-soon p { margin: 6px 0 10px; font-size: 14px; line-height: 1.45; color: var(--label); }
.adm-soon small { font-size: 11px; color: var(--muted); }
/* история баллов: строка — причина и дата слева, сумма справа (зелёная «+», красная «−») */
.pl { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--gray); }
.pl-t b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pl-t small { display: block; margin-top: 2px; font-size: 11px; font-weight: 300; color: var(--muted); }
.pl-d { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-d.up { color: #1f9d4c; }
.pl-d.down { color: #c23030; }
/* статус заказа: плашка и шкала из четырёх шагов */
.o-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 300; }
.o-st { padding: 3px 9px; border-radius: 10px; background: #e8e8ee; color: var(--label); font-size: 11px; font-weight: 600; }
.o-st.st-confirmed { background: #e3efff; color: #0a5fc4; }
.o-st.st-ready { background: #fff1d6; color: #9a5b00; }
.o-st.st-done { background: #e3f6e9; color: #1f8f47; }
.o-st.st-canceled { background: #fde6e6; color: #c23030; }
.o-steps { display: flex; margin-top: 14px; }
.o-steps i { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.o-steps i::before { content: ''; position: absolute; top: 4px; right: 50%; width: 100%; height: 2px; background: #dcdce2; }
.o-steps i:first-child::before { display: none; }
.o-steps b { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #dcdce2; }
.o-steps em { font-style: normal; font-size: 10px; color: var(--muted); }
.o-steps i.past::before, .o-steps i.now::before { background: #24496b; }
.o-steps i.past b, .o-steps i.now b { background: #24496b; }
.o-steps i.now b { box-shadow: 0 0 0 4px rgba(36, 73, 107, .18); }
.o-steps i.now em { color: var(--text); font-weight: 600; }
.o-cancel { margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: #fde6e6; color: #c23030; font-size: 12px; font-weight: 500; text-align: center; }
.order small { display: block; margin-top: 4px; color: var(--muted); font-weight: 300; font-size: 12px; line-height: 1.5; }

/* ---------- анимации (как на айпарк.рф: появление блоков при прокрутке, зум картинки) ---------- */
/* .rv вешает app.js, когда блок ещё не виден; .in — когда он вошёл в экран */
.rv { opacity: 0; transform: translateY(24px); transition-property: opacity, transform; transition-timing-function: ease; transition-duration: .5s; }
.rv.t-title { transition-duration: 1.2s; }
.rv.t-text { transition-duration: .7s; }
.rv.in { opacity: 1; transform: none; }

.pic img, .slides img { transition: transform .4s; }
.model:active, .line:active { transform: scale(.98); transition: transform .15s; }
@media (hover: hover) {
  .model:hover .pic img, .tile:hover .pic img { transform: scale(1.09); }
}
@media (hover: none) {
  .model:active .pic img, .tile:active .pic img { transform: scale(1.06); }
}
.model, .brand, .line { transition: transform .25s; }
.buy { transition: opacity .15s, transform .15s; }
.buy:active { transform: scale(.98); opacity: .85; }
.chip, .sw { transition: border-color .15s, box-shadow .15s, opacity .15s, color .25s; }
.sw.on::after { animation: pop .25s ease; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pic img, .model, .brand, .socials a, .line { transition: none; }
}

.splash { padding: 120px 24px; text-align: center; color: var(--muted); font-weight: 300; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: rgba(28, 28, 32, .78); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 28px -6px rgba(0, 0, 0, .4); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 560px) {
  body { max-width: 560px; margin: 0 auto; }
}

/* iPack PRO в корзине */
.ip-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 10px; border-radius: 10px; background: #e8f0fe; color: #1d3f8f; font-size: 12px; line-height: 1.35; }
.ip-line > span:not(.ip-ico) { flex: 1; min-width: 0; }
.ip-line b { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ip-line b em { font-style: normal; white-space: nowrap; }
.ip-line .ti-x { width: 22px; height: 22px; background: rgba(29, 63, 143, .1); }
.ip-line .ti-x::before, .ip-line .ti-x::after { width: 9px; }
.ip-ico { flex: none; width: 16px; height: 16px; border-radius: 4px; background: #1d3f8f; }
.ip-add { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px dashed rgba(29, 63, 143, .5); border-radius: 10px; background: transparent; color: #1d3f8f; font: inherit; font-size: 12px; text-align: left; }

/* Trade-In — вторая плашка, выглядывающая из-под плашки цены: уже её и сдвинута под неё, как стопка карточек */
.ti-btn + .price.two, .ti-on + .price.two { position: relative; z-index: 2; margin-top: -16px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); }
.ti-btn:has(+ .price.two), .ti-on:has(+ .price.two) { position: relative; z-index: 1; width: 100%; box-sizing: border-box; margin: 22px 0 0; padding: 10px 12px 26px; gap: 10px; border-radius: 13px; }
.ti-btn:has(+ .price.two) .ti-ico { width: 22px; height: 22px; }
.ti-btn:has(+ .price.two) .ti-t b { font-size: 13.5px; }
.ti-btn:has(+ .price.two) .ti-t small { margin-top: 1px; font-size: 11px; }

/* цена после применения Trade-In: один раз «вспыхивает» */
.ti-pop { display: inline-block; color: #12632e; animation: tiPricePop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tiPricePop { 0% { transform: scale(.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* корзина: iPack и Trade-In выглядывают из-под карточки товара стопкой плашек */
.lw { margin: 0 0 12px; }
.lw .line { margin-bottom: 0; position: relative; z-index: 5; }
.lw.has-stk .line { box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); }
.stk { position: relative; z-index: calc(4 - var(--n, 0)); display: flex; align-items: center; gap: 8px; width: auto; margin: -16px var(--gutter) 0; padding: 24px 8px 9px 12px; border: 0; border-radius: 13px; font: inherit; font-size: 12px; line-height: 1.35; text-align: left; }
.stk > span:not(.ti-ico) { flex: 1; min-width: 0; }
.stk b { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.stk b em { font-style: normal; white-space: nowrap; }
.stk .ti-x { width: 22px; height: 22px; }
.stk .ti-x::before, .stk .ti-x::after { width: 9px; }
.stk.ip { background: #e8f0fe; color: #1d3f8f; }
.stk.ip .ti-x { background: rgba(29, 63, 143, .1); }
.stk.ti { background: #eaf7ee; color: #12632e; }
.stk.ti .ti-x { background: rgba(18, 99, 46, .1); }
.stk.ti .ti-ico { width: 16px; height: 16px; flex: none; }
.stk.add { display: block; width: calc(100% - 2 * var(--gutter)); background: #eef2fb; color: #1d3f8f; }

/* Apple в левой колонке: вместо картинки — логотип, подпись текстом */
.ri-logo { display: grid; place-items: center; width: 46px; height: 46px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ri-logo .al { width: 30px; height: 30px; }
.ri.on .ri-logo { transform: scale(1.14); }
.ri:active .ri-logo { transform: scale(.88); transition-duration: .12s; }
.stk.add { display: flex; align-items: center; gap: 8px; padding: 22px 8px 8px 12px; }
.stk.add .add-go { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; }
.stk.add .ipk-i { flex: none; width: 20px; height: 20px; font-size: 12px; }

/* панель менеджера */
.mg-st { margin-bottom: 10px; }
.mg-search { display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--gray); font: inherit; font-size: 15px; outline: none; box-sizing: border-box; }
.mg-card { margin-bottom: 10px; padding: 14px; border-radius: var(--radius); background: var(--gray); }
.mg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-top b { font-size: 16px; font-weight: 600; }
.mg-sub { margin: 3px 0 8px; font-size: 12px; color: var(--muted); }
.mg-sub em { font-style: normal; color: var(--label); }
.mg-items { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
.mg-items li { padding: 3px 0; }
.mg-items small { color: var(--muted); }
.mg-tag { display: block; width: fit-content; margin-top: 3px; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 500; }
.mg-tag.ip { background: #e8f0fe; color: #1d3f8f; }
.mg-tag.ti { background: #eaf7ee; color: #12632e; }
.mg-sum { margin-top: 8px; font-size: 17px; font-weight: 600; }
.mg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.mg-acts button { padding: 10px 6px; border: 0; border-radius: 10px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.mg-acts button.on { background: #1d1d1f; color: #fff; }
.mg-acts button.bad { color: #c0392b; }
.mg-acts button:disabled { opacity: .5; }
.mg-empty { text-align: center; margin: 24px 0; }
.mg-cl { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 8px; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--gray); font: inherit; text-align: left; }
.mg-cl b { display: block; font-size: 15px; font-weight: 600; }
.mg-cl em { font-style: normal; font-weight: 400; color: var(--muted); }
.mg-cl small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.mg-cl i { flex: none; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-sheet { max-height: 88vh; overflow-y: auto; }
.mg-csub { margin: 2px 0 10px; text-align: left; }
.mg-bal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: #eaf3fd; color: #24496b; }
.mg-bal b { font-size: 24px; font-weight: 600; }
.mg-form { display: grid; gap: 8px; margin-bottom: 14px; }
.mg-form input { padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--gray); font: inherit; font-size: 15px; outline: none; box-sizing: border-box; width: 100%; }
.mg-form small { color: var(--muted); font-size: 11px; }
.mg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-sheet h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.mg-led { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.mg-led li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mg-led small { display: block; color: var(--muted); font-size: 11px; }
.mg-led b.p { color: #12632e; }
.mg-led b.m { color: #c0392b; }
.adm-tabs { flex-wrap: nowrap; }
.stk.add.tb { background: #eaf7ee; color: #12632e; }

.stk.ip { display: block; padding: 24px 12px 9px 12px; }
.stk.ip .ipr { display: flex; align-items: center; gap: 10px; }
.stk.ip .ipr em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 13px; white-space: nowrap; }
.stk.ip.off .ipr em { opacity: .55; }
.stk.ip .ck { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.6px solid rgba(29, 63, 143, .45); background: transparent; transition: background .2s, border-color .2s; }
.stk.ip .ck.on { background: #1d3f8f; border-color: #1d3f8f; }
.stk.ip .ck.on::after { content: ''; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stk.ip .ipn { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.stk.ip .ipn b { display: block; font-size: 13px; }
.stk.ip .chev { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.stk.ip.open .chev { transform: rotate(-135deg) translateY(-2px); }
.stk.ip .ipk-i { flex: none; width: 20px; height: 20px; font-size: 12px; }
.stk.ip .ipl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.stk.ip.open .ipl { grid-template-rows: 1fr; }
.stk.ip .ipl ul { overflow: hidden; margin: 0; padding: 0 0 0 32px; list-style: none; min-height: 0; }
.stk.ip.open .ipl ul { padding-top: 8px; }
.stk.ip .ipl li { position: relative; padding: 2px 0 2px 14px; font-size: 12px; }
.stk.ip .ipl li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.stk.ip .ipl ul { padding-left: 2px; }
.stk.ip { padding-right: 8px; }
.stk.ip .ipr { gap: 8px; }
.stk.ip .ck { width: 22px; height: 22px; }
.stk.ip:has(+ .stk) { padding-bottom: 24px; }

.stk.ip .ck { border: 1.6px solid rgba(29, 63, 143, .5); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(29, 63, 143, .18); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .22s, border-color .22s, box-shadow .22s; -webkit-tap-highlight-color: transparent; }
.stk.ip .ck:active { transform: scale(.86); }
.stk.ip .ck.on { border-color: transparent; background: linear-gradient(145deg, #3b72f0, #1d3f8f); box-shadow: 0 3px 9px rgba(29, 63, 143, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.stk.ip .ck.on::after { left: 7px; top: 3.4px; width: 5.5px; height: 10px; border-width: 0 2.2px 2.2px 0; animation: ckPop .32s cubic-bezier(.3, 1.6, .5, 1); }
.stk.ip .ck:not(.on) { animation: ckPulse 2.2s ease-out infinite; }
@keyframes ckPop { from { transform: rotate(45deg) scale(0); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
@keyframes ckPulse { 0% { box-shadow: 0 0 0 0 rgba(29, 63, 143, .35); } 70%, 100% { box-shadow: 0 0 0 8px rgba(29, 63, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .stk.ip .ck:not(.on), .stk.ip .ck.on::after { animation: none; } }

.stk.ip { padding: 20px 8px 6px 12px; }
.stk.ip:has(+ .stk) { padding-bottom: 20px; }
.stk.ip .ck.on::after { left: 7.2px; top: 2.9px; }

.stk.ip .ck.on::after { left: 0; top: 0; width: 100%; height: 100%; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: ckPop2 .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ckPop2 { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.stk.ip .ipl ul.ipx { padding-left: 2px; padding-right: 2px; }
.stk.ip.open .ipl ul.ipx { padding-top: 10px; }
.stk.ip .ipx li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed rgba(29, 63, 143, .18); }
.stk.ip .ipx li::before { display: none; }
.stk.ip .ipx li span { flex: 1; min-width: 0; }
.stk.ip .ipx li s { font-size: 11.5px; opacity: .5; }
.stk.ip .ipx li b { font-size: 13px; white-space: nowrap; }
.stk.ip .ipx li.gf b { padding: 2px 8px; border-radius: 99px; background: #1d3f8f; color: #fff; font-size: 11px; letter-spacing: .02em; }
.stk.ip .ipx li.sum { border: 0; padding-top: 9px; font-weight: 700; }
.stk.ip .ipx li.sum s { font-weight: 400; }
.stk.ip .ipx li.sum b { color: #0b7a3b; }
.stk.ip .ipx li.gf2 b { color: #0b7a3b; }

.stk.ip .ck, .stk.ip .ck:not(.on) { position: relative; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; animation: none; transition: none; }
.stk.ip .ck:active { transform: none; }
.stk.ip .ck::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(29, 63, 143, .45); }
.stk.ip .ck.on::before { background: #1d3f8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; box-shadow: none; }
.stk.ip .ck::after, .stk.ip .ck.on::after { content: ''; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 50%; border: 1.5px solid transparent; background: none; transform: none; animation: none; }
.stk.ip .ck.on::after { border-color: #1d3f8f; }
.stk.ip .ipx li:last-child { border-bottom: 0; }

button.points { border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.points .chev { display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 9px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(-45deg); opacity: .7; }
.pt-sheet .pt-tabs { justify-content: center; margin-bottom: 14px; }
.pt-sheet [hidden] { display: none; }
.pt-sheet .buy.alt { margin-top: 14px; }

.stk.ip .ck, .stk.ip .ck:not(.on) { width: 25px; height: 25px; margin-right: -1.5px; border: 1.6px solid rgba(29, 63, 143, .45); background: transparent; }
.stk.ip .ck.on { border-color: #1d3f8f; background: #1d3f8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.stk.ip .ck::before, .stk.ip .ck::after, .stk.ip .ck.on::before, .stk.ip .ck.on::after { content: none; }
.stk.ip .ck, .stk.ip .ck:not(.on) { box-sizing: border-box; margin-right: -2px; border-width: 2px; transform: none; }
.stk.ip .ipr { gap: 8px; }

.info-wrap { margin-top: 12px; }
.info-t { padding: 14px 4px 4px; font-size: 14px; line-height: 1.45; color: var(--text); }
.info-t h5 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.info-t h5:first-child { margin-top: 2px; }
.info-t p { margin: 0 0 6px; color: #555; }
.info-t ul { margin: 0 0 6px; padding-left: 18px; color: #555; }
.info-t li { margin: 2px 0; }
.info-t a { color: var(--blue); text-decoration: none; }
.info-t ul.ct { list-style: none; padding: 0; }
.info-t ul.ct li { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--gray); }
.info-t ul.ct b { display: block; color: var(--text); }
.info-t ul.ct a { display: block; margin-top: 2px; font-weight: 600; }
.info-t .ct-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.info-t .ct-l a { padding: 8px 14px; border-radius: 99px; background: var(--gray); color: var(--text); font-weight: 500; }
.info-t.ct-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px var(--gutter) 0; padding: 0; }
.info-t.ct-main a { flex: 1 1 calc(50% - 4px); padding: 12px 14px; border-radius: 14px; background: var(--gray); color: var(--text); text-align: center; font-size: 14px; font-weight: 500; text-decoration: none; }
.ri .ri-logo, .ri .ri-logo .al { color: var(--text); fill: var(--text); }

.co-sheet .co-f { display: block; margin: 0 0 12px; }
.co-sheet .co-f > span { display: block; margin: 0 0 6px 2px; font-size: 13px; font-weight: 500; color: #555; }
.co-sheet .co-f em { font-style: normal; font-weight: 400; color: #999; }
.co-sheet input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--gray); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.co-sheet input:focus { box-shadow: 0 0 0 2px rgba(0, 113, 227, .45); }
.co-sheet .co-st { display: flex; gap: 8px; }
.co-sheet .co-st .chip { flex: 1; padding: 13px 8px; }
.co-sheet .co-err { margin: 0 0 10px; text-align: center; color: #d12f2f; font-size: 14px; }
.co-sheet .buy.alt { margin-top: 10px; }
.co-sheet [hidden] { display: none; }

/* кабинет: «‹ айпарк» вместо маленького аватара */
.who.bk { flex: none; gap: 4px; height: 40px; margin-left: -6px; padding-right: 10px; }
.bk-ch { width: 11px; height: 11px; margin: 0 2px 0 6px; border-left: 3px solid var(--text); border-bottom: 3px solid var(--text); border-radius: 1px; transform: rotate(45deg) translate(1px, -1px); }
.bk-logo { height: 20px; width: auto; }
.who.bk:active { opacity: .5; }
.bk-logo { height: 22.1px; }

/* страница айфона: окно фото ниже на 25%, сам телефон прежнего размера (пустые края квадрата обрезаются) */
.gallery.wide .slides > div { aspect-ratio: 1 / .75; padding: 0; position: relative; overflow: hidden; }
.gallery.wide .slides img { position: absolute; left: 20px; top: 50%; width: calc(100% - 40px); max-width: none; height: auto; max-height: none; aspect-ratio: 1; margin-top: calc(-50% + 20px); }
/* iPhone: плашка цены посередине, Trade-In над ней и iPack PRO под ней — стопка из трёх */
.price.solo { position: relative; z-index: 2; display: block; margin: 22px 0 0; padding: 14px 12px; border-radius: 16px; background: var(--gray); text-align: center; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); }
.price.solo b { font-size: 30px; font-weight: 600; letter-spacing: -.4px; }
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -16px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { position: relative; z-index: 1; width: 100%; box-sizing: border-box; margin: 22px 0 0; padding: 10px 12px 26px; gap: 10px; border-radius: 13px; }
.ti-btn:has(+ .price.solo) .ti-ico { width: 22px; height: 22px; }
.ti-btn:has(+ .price.solo) .ti-t b { font-size: 13.5px; }
.ti-btn:has(+ .price.solo) .ti-t small { margin-top: 1px; font-size: 11px; }
.ip-btn { position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: -16px 0 14px; padding: 26px 12px 11px; border: 0; border-radius: 13px; text-align: left; color: #fff; font: inherit; background: linear-gradient(120deg, #0f1f4d 0%, #1d3f8f 60%, #3b63c4 100%); box-shadow: 0 6px 18px rgba(29, 63, 143, .28); transition: transform .15s; }
.ip-btn:active { transform: scale(.98); }
.ip-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%); transform: translateX(-100%); animation: tiSheen 3.2s ease-in-out infinite 1.6s; }
.ip-ico2 { flex: none; width: 24px; height: 24px; }
.ip-btn .ti-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-btn .ti-t b { font-size: 13.5px; font-weight: 600; }
.ip-btn .ti-t small { margin-top: 1px; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .78); }
.ip-btn .chev { flex: none; color: #fff; transform: rotate(-45deg); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .ip-btn::after { animation: none; } }
/* iPack PRO — тех же размеров, что Trade-In сверху */
.ip-btn { gap: 10px; padding: 26px 12px 10px; }
.ip-ico2 { width: 22px; height: 22px; }
.ip-btn .ti-t b { font-size: 13.5px; }
.ip-btn .ti-t small { margin-top: 1px; font-size: 11px; line-height: 1.3; }
.ip-btn .ti-t b, .ip-btn .ti-t small { line-height: normal; }


.price.solo { cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.price.solo:active { transform: scale(.97); }

.stk.ip { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* корзина: плашки iPack и Trade-In стопкой за карточкой, как в референсе — каждая следующая уже предыдущей и выглядывает ниже */
.stk { margin-left: calc(var(--gutter) + 14px * (var(--n, 0) + 1)); margin-right: calc(var(--gutter) + 14px * (var(--n, 0) + 1)); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); }
.stk.add { width: auto; }
/* плашка iPack PRO одной высоты с Trade-In и без него; верхние 16px скрыты под карточкой, поэтому в видимой части строка стоит ровно по центру */
.stk.ip { padding: 28px 8px 12px 12px; }
.stk.ip:has(+ .stk) { padding-bottom: 12px; }
.stk.ip .ipr { min-height: 25px; }
.co-sheet [hidden] { display: none !important; }
.co-st { flex-wrap: wrap; }
.co-st + .co-st { margin-top: 8px; }

/* AirTag: видео с сайта Apple, где сигнал расходится кругами */
.pingv { margin: 22px 0 6px; overflow: hidden; border-radius: var(--radius); background: var(--gray); }
.pingv video { display: block; width: 100%; height: auto; }
.pingv-t { padding: 4px 16px 18px; text-align: center; }
.pingv-t b { display: block; font-size: 17px; font-weight: 600; }
.pingv-t small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.pingv { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }

/* AirTag: в галерее вместо фото видео с сайта Apple (фон белый, поэтому и плашка белая) */
.gallery.vid { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.gallery.vid .slides > div { position: relative; padding: 0; }
.gallery.vid .slides video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* AirTag: без рамки, брелок с ключом по центру кадра (в самом видео он сдвинут вверх и вправо) */
.gallery.vid { background: transparent; box-shadow: none; border-radius: 0; }
.gallery.vid .slides video { transform: translate(-2.5%, 9%); }
.gallery.vid .slides { -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }

/* ---------- жидкое стекло, ещё объёмнее ---------- */
/* капсула: матовое стекло с тонкой яркой кромкой сверху и мягким углублением */
.chips { background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .1), inset 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(255, 255, 255, .95), 0 1px 0 rgba(255, 255, 255, .95), 0 8px 18px -12px rgba(20, 30, 60, .25); }
/* линза: зеркальный блик сверху-слева, дисперсия по краям (розовый слева, голубой справа), мягкое свечение внутри */
.gl-ind { overflow: hidden;
  background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .22) 38%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .08) 58%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(2.5px) saturate(250%) brightness(1.1) contrast(1.04); backdrop-filter: blur(2.5px) saturate(250%) brightness(1.1) contrast(1.04);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, 1), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .75),
    inset 0 -5px 9px -5px rgba(255, 255, 255, .85),
    inset 0 0 16px rgba(255, 255, 255, .5),
    0 0 0 .5px rgba(0, 0, 0, .1), 0 8px 20px -5px rgba(20, 30, 70, .3), 0 2px 4px rgba(0, 0, 0, .1); }
/* глянцевая полоса вдоль верха линзы */
.gl-ind::after { content: ''; position: absolute; left: 9%; right: 9%; top: 2px; height: 42%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); opacity: .85; }
.gl-ind.drag { box-shadow: inset 2px 2px 1px -.5px #fff, inset -2px -2px 1px -.5px rgba(255, 255, 255, .9),
    inset 0 0 20px rgba(255, 255, 255, .65),
    0 0 0 .5px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .1), 0 20px 30px -8px rgba(20, 20, 60, .38); }

/* ---------- линза с настоящим преломлением ---------- */
/* линза лежит поверх подписей: внутри копия подписей, искажённая у краёв фильтром; заливка почти непрозрачная, чтобы оригинал под ней не двоился */
.gl-ind { z-index: 2; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .2) 36%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, .42) 100%), #f6f6f9; }
.gl-ind.drag { background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .3) 36%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .14) 58%, rgba(255, 255, 255, .55) 100%), #f9f9fc; }
.gl-view { position: absolute; inset: 0; display: block; }
.gl-clone { position: absolute; left: 0; top: 0; display: block; pointer-events: none;
  transition: transform .6s linear(0, .09 4%, .33 10%, .62 17%, .84 25%, .94 34%, .98 44%, .995 58%, 1); }
.gl-ind.drag .gl-clone { transition: none; }
.gl-t { position: absolute; display: grid; place-items: center; box-sizing: border-box; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--text); }
.gl-t.on { color: var(--blue); font-weight: 600; }
.gl-t.dis { color: #c4c4c4; }
.gl-t.near { color: var(--blue); }
.gl-ind.drag .gl-t.on:not(.near) { color: var(--text); font-weight: 500; }
.pbody .opt .chips .gl-t { padding: 6px 6px; white-space: normal; line-height: 1.15; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .gl-clone { transition: none; } }
.gl-ind, .gl-ind * { font-style: normal; }

/* панель переключателя без теней: плоская капсула, объём остаётся только у линзы */
.chips { box-shadow: none; }
/* бусины цвета без тени под ними: остаётся только тонкая кромка, чтобы светлый цвет не терялся на фоне */
.sw::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
/* тень внутри бусины: затемнение у нижнего края, чтобы цвет выглядел объёмным, ничего снаружи */
.sw::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), inset 0 -5px 8px -2px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .3); }
/* AirTag: фото не показываем, пока играет видео не началось, и видео плавно проявляется на месте фото, без скачка; если видео не загрузилось, остаётся фото */
.gallery.vid .slides > div > img { opacity: 0; }
.gallery.vid .slides > div.nov > img { opacity: 1; }
.gallery.vid .slides video { opacity: 0; transition: opacity .6s ease; }
.gallery.vid .slides video.rdy { opacity: 1; }
/* iPack PRO на странице iPhone: тот же светло-голубой, что в корзине, без блика и тени */
.ip-btn { background: #e8f0fe; color: #1d3f8f; box-shadow: none; }
.ip-btn::after { content: none; animation: none; }
.ip-btn .ip-ico2 { stroke: #1d3f8f; }
.ip-btn .ti-t small { color: rgba(29, 63, 143, .8); }
.ip-btn .chev { color: #1d3f8f; }
/* стопка Трейд Ин / цена / iPack: там, где плашки касаются цены, углы цены прямые, иначе цвет плашки выглядывает «бугорками» из-за скруглений */
.ti-btn + .price.solo, .ti-on + .price.solo { border-top-left-radius: 0; border-top-right-radius: 0; }
.price.solo:has(+ .ip-btn) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.price.solo.sq { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* верх iPack PRO и низ Трейд Ина прямые: плашки стыкуются с ценой без скруглений */
.ip-btn { border-top-left-radius: 0; border-top-right-radius: 0; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* цена снова со скруглёнными углами */
.ti-btn + .price.solo, .ti-on + .price.solo, .price.solo:has(+ .ip-btn), .price.solo.sq, .price.solo { border-radius: 16px; }
/* iPack PRO заходит под цену так же, как Трейд Ин: плашка скруглена и уходит под карточку цены глубже её скруглений */
.ip-btn { border-radius: 13px; margin-top: -26px; padding-top: 36px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { border-radius: 13px; }
/* итог: низ Трейд Ина и верх iPack PRO прямые и уходят под цену, цена скруглена */
.ip-btn { border-top-left-radius: 0; border-top-right-radius: 0; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* плашки уходят под цену до её середины (цена ~64px, половина ~32px); видимая часть плашек не меняется */
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -32px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { padding-bottom: 42px; }
.ip-btn { margin-top: -32px; padding-top: 42px; }
/* ещё глубже под цену: 48px */
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -48px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { padding-bottom: 58px; }
.ip-btn { margin-top: -48px; padding-top: 58px; }
/* iPack PRO на 5% уже, по центру */
.ip-btn { width: 95%; margin-left: auto; margin-right: auto; }
/* iPack PRO: ширина прежняя, высота на 5% меньше (~112px -> ~106px) */
.ip-btn { width: 100%; margin-left: 0; margin-right: 0; padding-top: 55px; padding-bottom: 7.5px; }
/* iPack PRO ещё на 5% ниже (~106px -> ~101px) */
.ip-btn { padding-top: 52px; padding-bottom: 5.5px; }
/* iPack PRO ещё на 8% ниже (~101px -> ~93px) */
.ip-btn { padding-top: 47px; padding-bottom: 5px; }
/* iPack PRO ниже на ~40% видимой части: выравнивание высот отключено, отступы подобраны под текст */
.ip-btn { min-height: 0; padding-top: 44px; padding-bottom: 4px; }
.ip-btn { padding-top: 40px; padding-bottom: 3px; }
/* iPack PRO +20% к высоте (80px -> ~96px) */
.ip-btn { padding-top: 46px; padding-bottom: 13px; }
/* iPack PRO на странице iPhone: та же плашка, что в корзине, без галочки; прямой верх уходит под цену. Нажатие на цену ничего не делает */
.stk.ip.pdp { z-index: 1; width: auto; margin: -24px 0 14px; padding: 36px 8px 12px 12px; border-top-left-radius: 0; border-top-right-radius: 0; box-sizing: border-box; }
.price.solo { cursor: default; }
.price.solo:active { transform: none; }
/* плашка iPack PRO в закрытом виде на 22% ниже (~73px -> ~57px) */
.stk.ip.pdp { margin-top: -14px; padding: 22px 8px 10px 12px; }
.stk.ip.pdp:has(+ .stk) { padding-bottom: 10px; }
/* Трейд Ин и iPack PRO заходят под цену ровно до её середины (цена 75px, середина ~37px) и там стыкуются прямыми краями; видимая часть iPack ещё на 12% ниже */
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -37px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { padding-bottom: 47px; }
.stk.ip.pdp { margin-top: -38px; padding: 43px 8px 7px 12px; }
.stk.ip.pdp:has(+ .stk) { padding-bottom: 7px; }
/* текст iPack по центру видимой части: отступ сверху равен заходу под цену, а строка занимает всю видимую часть и центрирует содержимое */
.stk.ip.pdp, .stk.ip.pdp:has(+ .stk) { margin-top: -38px; padding: 38px 8px 0 12px; }
.stk.ip.pdp .ipr { min-height: 38px; align-items: center; }
.stk.ip.pdp .ipl ul.ipx { padding-bottom: 0; }
.stk.ip.pdp.open .ipl ul.ipx { padding-bottom: 10px; }
/* у цены был скрытый нижний отступ 12px: из-за него плашка iPack заходила под цену не на 38px, а на 26px, и текст стоял ниже центра */
.price.solo { margin-bottom: 0; }
.pane.prod .price.solo { margin-bottom: 0; }
/* iPack PRO на странице iPhone: без раскрывашки; слева кликабельная «i», она открывает слайд про iPack */
.stk.ip.pdp { cursor: default; }
.stk.ip.pdp .ipr { gap: 10px; }
.stk.ip.pdp .ipt { display: block; flex: 1; min-width: 0; font-size: 13px; }
.stk.ip.pdp .ipk-i { flex: none; width: 24px; height: 24px; font-size: 14px; border-color: #1d3f8f; background: rgba(29, 63, 143, .08); color: #1d3f8f; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stk.ip.pdp { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stk.ip.pdp:active { opacity: .85; }
/* длинное имя: приветствие переносится на вторую строку (дальше многоточие), а у очень длинного ещё и чуть мельче; короткое остаётся в одну строку */
.who-t b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.who-t.lg b { font-size: 13.5px; }
.who-t.xl b { font-size: 13px; line-height: 1.2; }
/* кнопка возврата в кабинете: чёрная таблетка, как корзина с товаром; логотип белый и на 11% меньше (22.1px -> 19.7px) */
.who.bk { flex: none; margin: 0 auto 0 0; height: 40px; gap: 7px; padding: 0 14px 0 12px; border-radius: 20px; background: var(--text); color: #fff; }
.who.bk .bk-ch { margin: 0 2px 0 3px; border-color: #fff; }
.who.bk .bk-logo { height: 19.7px; filter: brightness(0) invert(1); }
.who.bk:active { opacity: .8; }
/* надпись на кнопке возврата; логотип ещё на 20% меньше (19.7px -> 15.8px) */
.who.bk .bk-logo { height: 15.8px; }
.who.bk .bk-t { font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: #fff; }
.who.bk .bk-ch { display: none; }
.who.bk { padding: 0 16px 0 14px; }
/* число товаров внутри сумки, а не отдельным кружком рядом */
.cp-bag { position: relative; display: block; flex: none; line-height: 0; }
.cart-pill.full .cp-bag img { height: 23px; }
.cart-pill.full .cp-n { position: absolute; left: 0; right: 0; top: 15px; transform: translateY(-50%); display: block; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: #fff; text-align: center; font-size: 10.5px; line-height: 1; font-weight: 700; }

/* ---------- заставка при открытии (≈3 с) ---------- */
html.intro-on, html.intro-on body { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 10000; background: #0a0406; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  clip-path: circle(150% at 50% calc(46% - 50px)); color: #fff; }
#intro * { box-sizing: border-box; }
#intro.out { pointer-events: none; animation: inIris .78s cubic-bezier(.65, 0, .2, 1) forwards; }
#intro.out .in-stage { animation: inStageOut .62s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes inIris { from { clip-path: circle(150% at 50% calc(46% - 50px)); } to { clip-path: circle(0% at 50% calc(46% - 50px)); } }
@keyframes inStageOut { to { scale: .55; opacity: 0; } }
@keyframes inFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes inSpin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* фон: три мягких цветных пятна медленно плывут */
.in-bg { position: absolute; inset: 0; animation: inFade 1s both; }
.in-bg i { position: absolute; border-radius: 50%; width: 95vmax; height: 95vmax; will-change: transform; }
.in-bg .b1 { left: 50%; top: calc(46% - 50px); margin: -60vmax 0 0 -60vmax; width: 120vmax; height: 120vmax; background: radial-gradient(circle, rgba(140, 32, 56, .55), rgba(140, 32, 56, 0) 62%); animation: inDriftA 4.6s ease-in-out infinite alternate; }
.in-bg .b2 { right: -42vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(96, 20, 38, .6), rgba(96, 20, 38, 0) 62%); animation: inDriftB 5.4s ease-in-out infinite alternate; }
.in-bg .b3 { left: -10vmax; bottom: -55vmax; background: radial-gradient(circle, rgba(47, 95, 138, .7), rgba(47, 95, 138, 0) 62%); animation: inDriftC 4s ease-in-out infinite alternate; }
@keyframes inDriftA { to { transform: translate(26vmax, 18vmax) scale(1.12); } }
@keyframes inDriftB { to { transform: translate(-24vmax, -20vmax) scale(.9); } }
@keyframes inDriftC { to { transform: translate(22vmax, -14vmax) scale(1.2); } }

/* звёздная пыль */
.in-stars { position: absolute; inset: 0; }
.in-stars i { position: absolute; border-radius: 50%; background: #fff; opacity: 0; animation: inTwinkle 2s ease-in-out infinite; }
@keyframes inTwinkle { 0%, 100% { opacity: 0; scale: .5; } 50% { opacity: .85; scale: 1.25; } }

/* сцена: нулевая точка в центре, всё остальное расставлено от неё */
.in-stage { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.in-hero { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: inRise .72s 1s cubic-bezier(.3, .9, .2, 1) both; }
@keyframes inRise { from { translate: 0 0; } to { translate: 0 -50px; } }

/* кольцо: прилетает из размытия с поворотом и пружинкой, внутри крутится радужный градиент */
.in-ringbox { position: absolute; left: -85px; top: -61px; width: 170px; height: 121.6px; animation: inRingIn 1s .1s cubic-bezier(.2, 1.25, .3, 1) both; }
@keyframes inRingIn {
  0% { opacity: 0; scale: .25; rotate: -140deg; filter: blur(14px); }
  40% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); }
}
.in-ring, .in-glow { position: absolute; inset: 0; }
.in-ring { overflow: hidden; -webkit-mask: url(img/ring.svg) center / contain no-repeat; mask: url(img/ring.svg) center / contain no-repeat; }
.in-ring::before { content: ''; position: absolute; inset: -70%;
  background: conic-gradient(from 0deg, #2f5f8a, #2e5880 25%, #9cc0e3 45%, #2e5880 65%, #2f5f8a 100%);
  animation: inSpin 2.2s linear infinite; }
.in-glow { filter: blur(20px); opacity: .8; animation: inBreath 1.5s ease-in-out infinite alternate; }
@keyframes inBreath { from { opacity: .45; scale: .96; } to { opacity: .9; scale: 1.1; } }

/* волна при «приземлении» кольца */
.in-pulse { position: absolute; left: -85px; top: -61px; width: 170px; height: 121.6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); opacity: 0; animation: inPulse 1.15s .85s ease-out both; }
@keyframes inPulse { from { opacity: .75; scale: .8; } to { opacity: 0; scale: 3.4; } }

/* орбита: три точки, у первой светящийся хвост-комета */
.in-orbit { position: absolute; left: -105px; top: -105px; width: 210px; height: 210px; animation: inFade .5s .6s both, inSpin 2.6s linear infinite; }
.in-orbit::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 25%, rgba(255, 255, 255, 0) 25.1%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.in-orbit i { position: absolute; left: 50%; top: -3.5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .85); transform-origin: 3.5px 108.5px; }
.in-orbit i:nth-child(2) { transform: rotate(120deg); background: #9cc0e3; box-shadow: 0 0 10px 2px rgba(217, 120, 138, .85); }
.in-orbit i:nth-child(3) { transform: rotate(240deg); background: #4a7fb0; box-shadow: 0 0 10px 2px rgba(74, 127, 176, .9); }

/* логотип: проявляется слева направо, потом по нему пробегает блик */
.in-wordwrap { position: absolute; left: -125px; top: 24px; width: 250px; animation: inUp .8s 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inUp { from { translate: 0 16px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.in-word { width: 100%; aspect-ratio: 7654 / 1700; -webkit-mask: url(img/logo-a.svg) center / contain no-repeat; mask: url(img/logo-a.svg) center / contain no-repeat;
  background: linear-gradient(105deg, #8f8f9e 0%, #8f8f9e 30%, #fff 45%, #fff 55%, #8f8f9e 70%, #8f8f9e 100%); background-size: 280% 100%; background-position: 100% 0;
  clip-path: inset(0 100% 0 0); animation: inWipe .95s 1s cubic-bezier(.3, .7, .2, 1) forwards, inShine 1.1s 1.85s ease-in-out forwards; }
@keyframes inWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes inShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.in-tag { position: absolute; left: -150px; top: 98px; width: 300px; text-align: center; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .75); white-space: nowrap; animation: inTag .9s 1.5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inTag { from { opacity: 0; translate: 0 8px; letter-spacing: .5em; } to { opacity: 1; translate: 0 0; letter-spacing: .16em; } }

/* категории по очереди «загораются» */
.in-tick { position: absolute; left: -170px; top: 132px; width: 340px; display: flex; justify-content: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.in-tick span { opacity: .2; animation: inTickOn .45s both; }
.in-tick span:nth-child(1) { animation-delay: 1.7s; }
.in-tick span:nth-child(2) { animation-delay: 1.92s; }
.in-tick span:nth-child(3) { animation-delay: 2.14s; }
.in-tick span:nth-child(4) { animation-delay: 2.36s; }
@keyframes inTickOn { from { opacity: .2; } to { opacity: 1; text-shadow: 0 0 12px rgba(255, 255, 255, .55); } }

/* полоска-загрузка */
.in-bar { position: absolute; left: 50%; bottom: calc(9% + env(safe-area-inset-bottom)); width: 120px; height: 3px; margin-left: -60px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; animation: inFade .4s .2s both; }
.in-bar::after { content: ''; display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #2f5f8a, #6c9dcb); animation: inBar 2.6s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes inBar { to { transform: scaleX(1); } }
.in-bg .b1 { animation: inCalm 3s ease-in-out infinite alternate; }
@keyframes inCalm { to { transform: scale(1.12); } }

/* компактнее */
.in-ringbox { left: -58px; top: -41.5px; width: 116px; height: 83px; }
@keyframes inRise { from { translate: 0 0; } to { translate: 0 -34px; } }
.in-wordwrap { left: -88px; width: 176px; top: 20px; }
.in-tag { top: 70px; font-size: 11px; }
@keyframes inTag { from { opacity: 0; translate: 0 6px; letter-spacing: .4em; } to { opacity: 1; translate: 0 0; letter-spacing: .14em; } }
.in-glow { filter: blur(14px); }
#intro { clip-path: circle(150% at 50% calc(46% - 34px)); }
@keyframes inIris { from { clip-path: circle(150% at 50% calc(46% - 34px)); } to { clip-path: circle(0% at 50% calc(46% - 34px)); } }

/* кольцо влетает в значок шапки: остальное гаснет, фон растворяется и открывает магазин */
#intro.fly { pointer-events: none; background: rgba(10, 4, 6, 0); transition: background .6s .1s ease; }
#intro.fly .in-wordwrap, #intro.fly .in-bg { animation: inGone .4s forwards; }
@keyframes inGone { to { opacity: 0; } }
.stk.ip.pdp { cursor: default; }
.stk.ip.pdp:active { opacity: 1; }

/* панель цены = кнопка «Добавить в корзину» */
.price[role="button"], .price.solo { cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.price[role="button"]:active, .price.solo:active { transform: scale(.98); }
.pcta { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.price.solo .pcta { margin-top: 1px; }
.price.two .pcta { grid-column: 1 / -1; margin-top: 6px; text-align: center; }
.price.pl { align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 16px; background: var(--gray); }
.price.pl span { font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
.price.pl .pcta { text-align: right; }
/* размер панели цены остаётся прежним: надпись «Добавить в корзину» умещается внутри */
.price.solo { height: 74.5px; padding: 0 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.price.solo b { line-height: 1.1; }
.price.solo .pcta { margin-top: 3px; line-height: 1.2; }
.price.two { height: 80.6px; padding: 8px 10px 4px; align-content: center; row-gap: 0; }
.price.two .pcta { margin-top: 0; line-height: 13px; }
.price.pl { padding: 0; background: none; border-radius: 0; }
/* iPhone: цена ровно по середине панели, надпись прижата к низу */
.price.solo { justify-content: center; }
.price.solo .pcta { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; line-height: 12px; text-align: center; }

/* цена и надпись подняты на 15% высоты панели (≈11 px) */
.price.solo { padding-bottom: 22px; }
.price.solo .pcta { bottom: 17px; }

/* опущены на 6% высоты панели (≈4.5 px) */
.price.solo { padding-bottom: 13px; }
.price.solo .pcta { bottom: 12.5px; }

/* плашка цены оформлена как задник переключателя (капсула «жидкого стекла»): тонкая кромка, мягкий вертикальный градиент, размытие; без теней.
   Подложка почти белая, а не прозрачная: плашка заходит на тёмный Trade-In, и цена должна читаться */
.price.solo, .price.two { border: 1px solid rgba(118, 118, 128, .32); box-shadow: none;
  background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f8f8fa;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }

/* логотип чёрный на белой плашке: фон заставки остаётся тёмным, а чёрные буквы читаются */
.in-wordwrap { left: -98px; width: 196px; top: 22px; padding: 11px 20px; box-sizing: border-box; border-radius: 999px; background: #fff; }
.in-word { background: linear-gradient(105deg, #000 0%, #000 30%, #55555c 45%, #55555c 55%, #000 70%, #000 100%); background-size: 280% 100%; background-position: 100% 0; }
/* заставка: плашка как адресная/поисковая строка, адрес «набирается» по буквам с кареткой */
.in-wordwrap { left: -112px; width: 224px; top: 22px; display: flex; align-items: center; gap: 10px; padding: 11px 22px 11px 18px; animation: inUp .6s .85s cubic-bezier(.2, .8, .2, 1) both, inPress .26s 2.2s ease-out; }
.in-sicon { flex: none; display: block; }
.in-wordbox { position: relative; flex: none; width: 156px; }
.in-word { width: 100%; background: #000; clip-path: inset(0 100% 0 0); animation: inType 1s 1.25s step-end forwards; }
@keyframes inType {
  0% { clip-path: inset(0 100% 0 0); }
  6% { clip-path: inset(0 88% 0 0); }
  16% { clip-path: inset(0 77% 0 0); }
  25% { clip-path: inset(0 66% 0 0); }
  38% { clip-path: inset(0 54% 0 0); }
  47% { clip-path: inset(0 43% 0 0); }
  59% { clip-path: inset(0 31% 0 0); }
  70% { clip-path: inset(0 26.5% 0 0); }
  78% { clip-path: inset(0 17% 0 0); }
  90%, 100% { clip-path: inset(0 0 0 0); }
}
.in-caret { position: absolute; left: 0; top: 14%; width: 2px; height: 72%; margin-left: 1px; border-radius: 1px; background: #4a7fb0; opacity: 0;
  animation: inBlink .9s .95s step-end infinite, inCaretMove 1s 1.25s step-end forwards, inCaretOut .2s 2.4s forwards; }
@keyframes inBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes inCaretMove {
  0% { left: 0%; } 6% { left: 11.5%; } 16% { left: 22.5%; } 25% { left: 33.5%; } 38% { left: 45.5%; }
  47% { left: 56.5%; } 59% { left: 68.5%; } 70% { left: 73%; } 78% { left: 82.5%; } 90%, 100% { left: 99.5%; }
}
@keyframes inCaretOut { to { opacity: 0; } }
@keyframes inPress { 0%, 100% { scale: 1; } 45% { scale: .965; } }
/* кольцо больше не «ездит» вверх во время набора: оно сразу садится на своё место и стоит, а строка появляется под ним после */
.in-hero { animation: none; translate: 0 -34px; }
.in-wordwrap { animation: inUp .6s 1.05s cubic-bezier(.2, .8, .2, 1) both, inPress .26s 2.2s ease-out; }
/* ---------- «Мои заказы»: кнопка в профиле и окно с заказами ---------- */
.ord-btn { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gutter)); margin: 12px var(--gutter) 0; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--gray); color: var(--text); text-align: left; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.ord-btn:active { transform: scale(.98); }
.ob-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #4a7fb0, #2f5f8a); box-shadow: 0 6px 12px -6px rgba(47, 95, 138, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ob-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-t b { font-size: 16px; font-weight: 600; }
.ob-t small { margin-top: 1px; font-size: 12px; color: var(--muted); }
.ob-n { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #24496b; color: #fff; font-size: 12px; font-weight: 700; }
.ob-n[hidden] { display: none; }
.ord-btn .chev { color: var(--text); opacity: .55; transform: rotate(-45deg); margin-right: 2px; }

.ord-sheet { min-height: 62vh; max-height: 92vh; background: #f4f4f7; padding-top: 10px; }
.ord-sheet h3 { margin-top: 6px; }
.ord-sheet > .sub { text-align: center; margin-bottom: 16px; }
.os-grab { display: block; width: 38px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: rgba(0, 0, 0, .16); }
.ord-sheet #ordersBox { display: flex; flex-direction: column; gap: 12px; }
.ord-sheet .buy.alt { margin-top: 16px; background: #fff; }
.oc { padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -14px rgba(20, 20, 40, .22); animation: ocIn .5s calc(var(--i, 0) * 70ms + 120ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.oc.fresh { animation: freshIn .4s ease backwards; }
@keyframes ocIn { from { opacity: 0; translate: 0 18px; } }
.oc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.oc-id b { display: block; font-size: 16px; font-weight: 600; }
.oc-id small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--muted); }
.oc-items { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oc-items li { display: flex; align-items: center; gap: 12px; }
.oc-pic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gray); overflow: hidden; }
.oc-pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.oc-nm { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.oc-nm b { flex: 1 0 100%; font-size: 14px; font-weight: 500; line-height: 1.25; }
.oc-nm small { font-size: 12px; font-weight: 400; color: var(--muted); }
.oc-items em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--label); }
.oc-tag { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 8px; background: #e6edfb; color: #1d3f8f; font-size: 11px; font-style: normal; font-weight: 600; }
.oc-tag.ti { background: #f3e4e8; color: #24496b; }
.oc .o-steps { margin-top: 16px; }
.oc-sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.oc-sum b { font-size: 18px; font-weight: 600; color: var(--text); }
.oc-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px 24px; text-align: center; }
.oc-e-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px -14px rgba(20, 20, 40, .3); }
.oc-e-ico img { width: 34px; }
.oc-empty b { font-size: 17px; font-weight: 600; }
.oc-empty small { max-width: 240px; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .oc { animation: none; } }
/* окно заказов не заезжает под кнопки Telegram сверху (закрыть / меню) и не отдаёт свайп вниз приложению Telegram */
.ord-sheet { max-height: calc(100vh - var(--tg-top) - 14px); max-height: calc(100dvh - var(--tg-top) - 14px); overscroll-behavior: contain; }
.os-grab { position: relative; }
.os-grab::after { content: ''; position: absolute; left: -60px; right: -60px; top: -12px; bottom: -14px; }
/* ---------- окна «Гарантия» и «Доставка и оплата» ---------- */
.wd-sheet { min-height: 56vh; max-height: calc(100vh - var(--tg-top) - 14px); max-height: calc(100dvh - var(--tg-top) - 14px); overscroll-behavior: contain; background: #f4f4f7; padding-top: 10px; }
.wd-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #4a7fb0, #2f5f8a); box-shadow: 0 14px 26px -16px rgba(47, 95, 138, .8); animation: ipkUp .6s .08s backwards cubic-bezier(.2, .9, .25, 1); }
.wd-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 60% at 20% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); pointer-events: none; }
.wd-ico { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.wd-ht { position: relative; display: flex; flex-direction: column; }
.wd-ht b { font-size: 22px; font-weight: 600; line-height: 1.15; }
.wd-ht small { margin-top: 3px; font-size: 12.5px; opacity: .78; }
.wd-s { margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -16px rgba(20, 20, 40, .22); animation: ocIn .5s calc(var(--i, 0) * 70ms + 160ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.wd-s h5 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #24496b; }
.wd-s p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--label); }
.wd-s p:last-child, .wd-s ul:last-child { margin-bottom: 0; }
.wd-s ul { margin: 0 0 6px; padding: 0; list-style: none; }
.wd-s li { position: relative; padding: 3px 0 3px 18px; font-size: 14px; line-height: 1.45; color: var(--label); }
.wd-s li::before { content: ''; position: absolute; left: 3px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #4a7fb0; }
.wd-sheet #wdClose { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .wd-hero, .wd-s { animation: none; } }
/* соцсети: плитки с цветными иконками */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px var(--gutter) 0; }
.ct-tile { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px; border-radius: 18px; background: var(--gray); color: var(--text); text-decoration: none; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.ct-tile:active { transform: scale(.97); }
.ct-tile > span { display: flex; flex-direction: column; min-width: 0; }
.ct-tile b { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ct-tile small { margin-top: 1px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ct-vk { font-size: 15px; font-weight: 800; font-style: normal; letter-spacing: -.3px; }
.ct-tile.tg .ct-ic { background: linear-gradient(145deg, #4cc0f0, #1e8fc7); }
.ct-tile.wa .ct-ic { background: linear-gradient(145deg, #4ddb7a, #1b9d49); }
.ct-tile.vk .ct-ic { background: linear-gradient(145deg, #3b93ff, #0a58d0); }
.ct-tile.ml .ct-ic { background: linear-gradient(145deg, #4a7fb0, #2f5f8a); }
/* без иконок: название и подпись по центру плитки */
.ct-tile { justify-content: center; text-align: center; padding: 13px 12px; }
.ct-tile > span { align-items: center; }

/* плитки соцсетей как задник «жидкого стекла»: капсула с тонкой кромкой, мягким градиентом и размытием, без теней */
.ct-tile { min-height: 46px; padding: 0 14px; border-radius: 24px; border: 1px solid rgba(118, 118, 128, .32);
  background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f9f9fb;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: none; }
.ct-tile b { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- избранное и колокольчик на карточке товара ---------- */
.pact { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 8px; }
.pa-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(118, 118, 128, .28); color: #1d1d1f;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6)); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.pa-btn:active { transform: scale(.88); }
.pa-btn.on { color: #4a7fb0; }
.pa-btn.on svg path { fill: currentColor; }
.pa-btn.busy { opacity: .55; pointer-events: none; }
.pa-btn.on svg { animation: paPop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes paPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.fv-sheet #fvBox { display: flex; flex-direction: column; gap: 10px; }
.fv-h { margin: 8px 4px 0; font-size: 13px; font-weight: 600; color: #24496b; }
.fv-card { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -16px rgba(20, 20, 40, .22); animation: ocIn .45s calc(var(--i, 0) * 60ms + 100ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.fv-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.fv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fv-t b { font-size: 14px; font-weight: 500; line-height: 1.25; }
.fv-t small { margin-top: 2px; font-size: 12px; color: var(--muted); }
.fv-x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4a7fb0; -webkit-tap-highlight-color: transparent; }
.fv-x.on svg path { fill: currentColor; }
.fv-x:active { transform: scale(.88); }
.fv-e { color: #4a7fb0; }
.fv-e svg { width: 30px; height: 30px; }

/* ---------- пуш-панель ---------- */
.pp .pp-l { margin: 18px 2px 8px; font-size: 13px; font-weight: 600; color: #24496b; }
.pp-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(118, 118, 128, .32); background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f9f9fb; color: var(--text); font-size: 13px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.pp-chip.on { background: #2f5f8a; border-color: #2f5f8a; color: #fff; }
.pp-min { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--label); }
.pp-min input { width: 110px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(118, 118, 128, .32); background: #fff; font: inherit; font-size: 15px; color: var(--text); }
.pp-count { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 14px; color: var(--label); }
.pp-count b { color: var(--text); font-size: 17px; }
.pp-in { display: block; width: 100%; margin: 0 0 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(118, 118, 128, .32); background: #fff; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text); resize: vertical; -webkit-appearance: none; appearance: none; }
.pp-in:focus { outline: none; border-color: #4a7fb0; }
.pp-cnt { text-align: right; font-size: 11px; color: var(--muted); }
.pp-res { display: flex; flex-direction: column; gap: 6px; }
.pp-r { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--gray); color: var(--text); font-size: 13.5px; text-align: left; }
.pp-r small { flex: none; color: var(--muted); font-size: 12px; }
.pp-prev { padding: 14px; border-radius: 18px; background: #e8edf3; }
.pp-bub { max-width: 100%; padding: 10px 12px; border-radius: 16px 16px 16px 6px; background: #fff; font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); white-space: pre-wrap; word-break: break-word; }
.pp-bub b { display: block; margin-bottom: 6px; }
.pp-bub span.ph { color: var(--old); }
.pp-pbtn { margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .75); color: #2a6fd6; font-size: 14px; font-weight: 500; text-align: center; }
.pp-act { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 18px; }
.pp-act .buy.alt { margin-top: 0; }
.pp-hist { display: flex; flex-direction: column; gap: 8px; }
.pp-h { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 13px; }
.pp-h b { display: block; font-size: 14px; font-weight: 500; }
.pp-h small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.pp-h span { flex: none; font-weight: 600; }
.pp-h i { font-style: normal; font-weight: 400; color: #c23030; }
.pp-sheet { padding-top: 22px; }
.pp-sheet .pp-bub { margin: 0 0 14px; background: var(--gray); box-shadow: none; }
.pp-prog { margin-bottom: 14px; }
.pp-bar { height: 6px; border-radius: 3px; background: #ececf0; overflow: hidden; }
.pp-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2f5f8a, #6c9dcb); transition: width .4s ease; }
.pp-prog small { display: block; margin-top: 6px; text-align: center; color: var(--muted); font-size: 12px; }
.pp-min[hidden], .pp-bub b[hidden], .pp-pbtn[hidden] { display: none; }

/* сердечко и колокольчик: в одной строке с «‹ iPhone», над картинкой, а не поверх неё */
.prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prow .pback { margin-bottom: 0; }
.pane.prod .prow { padding-right: 8px; }
.pact { position: static; top: auto; right: auto; margin-top: 8px; gap: 6px; }
.pa-btn { width: 36px; height: 36px; }
.pa-btn svg { width: 19px; height: 19px; }
/* значки по центру кружков: колокольчик с язычком и сердце визуально сидели ниже середины */
#bellBtn svg { translate: 0 -1.4px; }
#favBtn svg { translate: 0 -.6px; }
.fv-x svg { translate: 0 -.5px; }


/* рассрочка */
.inst-btn { width: 100%; margin: 0 0 14px; }
.inst-row { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(0,0,0,.07); font-size: 15px; }
.inst-row:first-of-type { border-top: 0; }
.inst-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.inst-row small { font-size: 12px; font-weight: 500; color: var(--label); }
/* промокоды */
.pm-wrap.pm-me { margin: 12px var(--gutter) 0; }
.pm-wrap.pm-cart { margin: 4px var(--gutter) 0; }
.pm-box { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--radius); background: var(--gray); }
.pm-box .ob-ico { width: 38px; height: 38px; border-radius: 12px; }
.pm-in { flex: 1; min-width: 0; padding: 10px 2px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pm-in::placeholder { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pm-in:focus { outline: none; }
.pm-go { flex: none; padding: 9px 14px; border: 0; border-radius: 14px; background: #2f5f8a; color: #fff; font-size: 13px; font-weight: 600; transition: opacity .2s; }
.pm-go:disabled { opacity: .5; }
.pm-x { flex: none; position: relative; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .18); }
.pm-x::before, .pm-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; border-radius: 1px; background: var(--text); transform: rotate(45deg); }
.pm-x::after { transform: rotate(-45deg); }
.pm-msg { margin: 6px 6px 0; font-size: 13px; color: #1f7a45; }
.pm-msg.bad { color: #c23030; }
.pm-msg[hidden] { display: none; }
.pm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px var(--gutter) -8px; font-size: 15px; color: var(--label); }
.pm-row b { font-weight: 600; color: #1f7a45; text-align: right; }
.pm-miss { margin: 10px var(--gutter) -8px; font-size: 13px; color: #b26a00; }
.oc-promo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: #eaf3fd; font-size: 13px; color: #24496b; }
.oc-promo b { font-weight: 600; }
.oc-promo em { flex-basis: 100%; font-style: normal; font-weight: 500; }
/* панель промокодов */
.pm-codew { display: flex; gap: 8px; }
.pm-codew .pp-in { flex: 1; text-transform: uppercase; }
.pm-dice { flex: none; width: 48px; margin: 0 0 8px; border: 1px solid rgba(118, 118, 128, .32); border-radius: 14px; background: #fff; font-size: 20px; }
.pm-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.pm-grid label { display: block; font-size: 12px; color: var(--muted); }
.pm-grid label .pp-in { margin-top: 4px; }
#pmPick { margin-top: 8px; }
.pm-act { margin-top: 14px; }
.pm-act:has(#pmReset[hidden]) { grid-template-columns: 1fr; }
#pmReset[hidden] { display: none; }
.pm-list { display: flex; flex-direction: column; gap: 10px; }
.pm-item { padding: 14px; border-radius: 18px; background: var(--gray); }
.pm-item.off { opacity: .6; }
.pm-it-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-code { padding: 4px 10px; border: 1px dashed rgba(47, 95, 138, .55); border-radius: 10px; background: #fff; color: #2f5f8a; font-size: 15px; font-weight: 700; letter-spacing: .6px; }
.pm-st { font-size: 12px; color: var(--muted); }
.pm-item p { margin: 8px 0 2px; font-size: 14.5px; line-height: 1.4; }
.pm-item small { display: block; font-size: 12px; color: var(--muted); }
.pm-it-act { display: flex; gap: 8px; margin-top: 10px; }
.pm-it-act button { flex: 1; padding: 8px 6px; border: 0; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 500; color: var(--text); }
.pm-it-act .del { color: #c23030; }
.pm-it-act .del.ask { background: #c23030; color: #fff; }
/* панель цен */
.pr-q { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--gray); font: inherit; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pr-q:focus { outline: none; }
.pr-only { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.pr-it { padding: 0; }
.pr-it summary { display: flex; align-items: center; gap: 8px; padding: 14px; list-style: none; cursor: pointer; }
.pr-it summary::-webkit-details-marker { display: none; }
.pr-it summary span { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.pr-it summary em { flex: none; font-style: normal; font-size: 12.5px; color: var(--muted); }
.pr-n { flex: none; font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 10px; background: #2f5f8a; color: #fff; }
.pr-rows { padding: 0 14px 6px; }
.pr-row { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.pr-row b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-row.cu b::after { content: ' · своя цена'; font-weight: 500; color: #2f5f8a; }
.pr-f { display: flex; align-items: flex-end; gap: 8px; }
.pr-f label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.pr-f input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pr-f input:focus { outline: 2px solid #2f5f8a; }
.pr-s { flex: none; padding: 10px 12px; border: 0; border-radius: 12px; background: #2f5f8a; color: #fff; font-size: 13px; font-weight: 600; }
.pr-s:disabled { opacity: .35; }
.pr-row small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pr-r { color: #c23030; cursor: pointer; }
.pr-f input { flex: 1; min-width: 0; }

.pr-ph { padding: 12px 0 8px; border-top: 1px solid rgba(0, 0, 0, .07); }
.pr-ph > b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-ph small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pr-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-pic, .pr-add { position: relative; width: 64px; height: 64px; border-radius: 12px; background: #fff; overflow: hidden; }
.pr-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pr-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 22px; text-align: center; }
.pr-x.ask { background: #c23030; }
.pr-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed #2f5f8a; background: transparent; color: #2f5f8a; font-size: 26px; cursor: pointer; }
.pr-add.busy { opacity: .4; pointer-events: none; }
.pr-ph { border-top: 0; padding-top: 4px; }
.pr-ph + .pr-row { border-top: 1px solid rgba(0, 0, 0, .07); }

.pr-col { padding: 8px 0 10px; }
.pr-col > b { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-col > b em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.pr-dot { flex: none; width: 14px; height: 14px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pr-ph { padding: 4px 0 0; }
/* новые товары, категории, цвета */
.pr-tools { display: flex; gap: 8px; margin: 4px 0 10px; }
.pr-tools button { flex: 1; padding: 11px 8px; border: 0; border-radius: 14px; background: #2f5f8a; color: #fff; font-size: 14px; font-weight: 600; }
.pr-form { margin: 0 0 14px; padding: 14px; border-radius: 18px; background: var(--gray); }
.pr-form h3 { margin: 0 0 10px; font-size: 16px; }
.pr-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.pr-form input:not([type=color]):not([type=file]), .pr-form select, .pr-in { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pr-form input:focus, .pr-form select:focus, .pr-in:focus { outline: 2px solid #2f5f8a; }
.pf-grp { margin: 4px 0 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .07); }
.pf-grp > b { display: block; margin-bottom: 8px; font-size: 13.5px; }
.pf-grp > b em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.pf-grp > input { margin-bottom: 8px; }
.pf-r { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pf-r input { flex: 1; min-width: 0; }
.pf-r .pf-op { flex: 0 0 38%; }
.pf-r input[type=color], .pr-clr { flex: none; width: 46px; height: 42px; padding: 2px; border: 0; border-radius: 12px; background: #fff; }
.pf-t { flex: 1; font-size: 14px; }
.pf-t em { font-style: normal; font-size: 12px; color: var(--muted); }
.pf-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 17px; background: #fff; color: #c23030; font-size: 18px; }
.pf-add { padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; color: #2f5f8a; font-size: 13px; font-weight: 600; }
.pf-del { flex: none; padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; color: #c23030; font-size: 13px; }
.pf-del.wide { width: 100%; margin-top: 12px; }
.pf-del.ask { background: #c23030; color: #fff; }
.pr-go { width: 100%; margin-top: 10px; padding: 13px; border: 0; border-radius: 14px; background: #2f5f8a; color: #fff; font-size: 15px; font-weight: 600; }
.pr-go:disabled { opacity: .5; }
.pr-form small, .pr-addc small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pr-addc { padding: 12px 0 6px; border-top: 1px solid rgba(0, 0, 0, .07); }
.pr-addc > b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-addc .pr-in { margin-bottom: 8px; }
.pr-addc .pr-f .pr-in { margin-bottom: 0; }
.sf-file input { font-size: 13px; }
.pr-f .pr-clr { flex: none; width: 46px; height: 42px; }

.pr-it summary span { display: flex; flex-direction: column; }
.pr-it summary .pr-sec { margin: 2px 0 0; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pr-cx { margin-left: 8px; padding: 3px 9px; border: 0; border-radius: 10px; background: #fff; color: #c23030; font-size: 11.5px; font-weight: 500; }
.pr-cx.ask { background: #c23030; color: #fff; }
.pr-col > b .pr-cx + em, .pr-col > b em { margin-left: auto; }
.pr-mv { display: flex; gap: 6px; }
.pr-mv button { flex: 1; padding: 9px 4px; border: 0; border-radius: 12px; background: #fff; color: var(--text); font-size: 12.5px; font-weight: 500; }
/* панель Trade-In */
.tp-g{margin:18px 0 8px;font-size:15px}
.tp-m{margin-bottom:10px}
.tp-row{display:flex;gap:6px;margin:6px 0;align-items:center}
.tp-row input,.tp-nn{min-width:0;padding:9px 10px;border:1px solid var(--line,#ddd);border-radius:10px;font:inherit;background:transparent;color:inherit}
.tp-l{flex:0 0 78px}.tp-p,.tp-p2{flex:1}
.tp-nn{width:100%;margin:4px 0;box-sizing:border-box}
.tp-d,.tp-s,.tp-dm,.tp-add{border:0;background:none;color:inherit;opacity:.65;font:inherit;cursor:pointer;padding:6px}
.tp-dm{font-size:12px}.tp-add{display:block;margin-top:2px}
#tpSave,#tpNew{margin-top:10px;width:100%}
/* обычная цена (без скидки) — в той же плашке с окантовкой, что и у iPhone и скидок */
.price.pl { box-sizing: border-box; min-height: 74px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(118, 118, 128, .32); box-shadow: none;
  background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f8f8fa;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
/* надпись «Добавить в корзину» — под ценой по центру, как у iPhone */
.price.pl { flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 74.5px; text-align: center; }
.price.pl span { font-size: 30px; font-weight: 600; letter-spacing: -.4px; line-height: 1.1; }
.price.pl .pcta { text-align: center; line-height: 1.2; }
/* intro-v2:start */
/* заставка: строка поиска — «жидкое стекло»: прозрачная капсула с размытием, светлой кромкой и бликом сверху */
.in-wordwrap { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .15)); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(255, 255, 255, .14), inset 0 0 20px rgba(255, 255, 255, .08), 0 16px 36px -12px rgba(0, 0, 0, .6); }
.in-wordwrap::before { content: ''; position: absolute; left: 14px; right: 14px; top: 2px; height: 42%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); }
.in-sicon { stroke: rgba(255, 255, 255, .7); position: relative; }
.in-wordbox { position: relative; }
.in-word { background: #fff; }
.in-caret { background: #b9d8f5; }
/* intro-v2:end */
/* intro-hw:start */
/* заставка к Хеллоуину: те же движения, но фон угольно-фиолетовый, кольцо и свет — тыквенно-оранжевые, вместо лупы тыква */
#intro.hw { background: #08050b; }
#intro.hw .in-bg .b1 { background: radial-gradient(circle, rgba(255, 106, 0, .34), rgba(120, 40, 180, .16) 38%, rgba(120, 40, 180, 0) 64%); }
#intro.hw .in-ring::before { background: conic-gradient(from 0deg, #4a1d00, #b84a00 25%, #ffb15c 45%, #b84a00 65%, #4a1d00 100%); }
#intro.hw .in-ringbox::before { content: ''; position: absolute; inset: -70%; background: radial-gradient(circle, rgba(255, 120, 20, .24), rgba(255, 120, 20, 0) 62%); animation: inFade 1s .6s both; }
#intro.hw .in-caret { background: #ff9a3c; }
#intro.hw .in-wordwrap { border-color: rgba(255, 190, 120, .28); box-shadow: inset 0 1px 0 rgba(255, 220, 180, .55), inset 0 -1px 0 rgba(255, 170, 80, .16), inset 0 0 20px rgba(255, 150, 50, .07), 0 16px 36px -12px rgba(0, 0, 0, .7); }
#intro.hw .in-pk { position: absolute; right: 14px; top: -17px; font-size: 24px; line-height: 1; rotate: 12deg; filter: drop-shadow(0 0 10px rgba(255, 130, 20, .65)); animation: inPumpkin .7s 2.2s cubic-bezier(.2, 1.6, .4, 1) both; }
.in-pk { display: none; }
#intro.hw .in-pk { display: block; }
@keyframes inPumpkin { from { opacity: 0; scale: .2; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
#intro.hw .in-word { background: linear-gradient(90deg, #fff 0%, #ffe3c2 55%, #ffb25c 100%); }
/* intro-hw:end */
/* цена без плашки iPack (не iPhone): отступ до кешбека */
.pane.prod .price.solo:not(.sq) { margin-bottom: 14px; }
/* пять и больше вариантов (модели iPhone для стекла и чехлов): лента отдельных таблеток, листается пальцем; выбранная — чёрная, как кнопка корзины,
   по краям плавное затухание подсказывает, что есть что листать. Стеклянная капсула здесь не нужна: она рассчитана на 2-4 варианта */
.mrail { position: relative; display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
.mrail::-webkit-scrollbar { display: none; }
.mrail .chip { flex: none; scroll-snap-align: center; min-height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap; font-size: 15px; font-weight: 500;
  background: var(--gray); border: 1px solid transparent; transition: background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.mrail .chip:active { transform: scale(.96); }
.mrail .chip.on { background: #111; color: #fff; }
.mrail .chip:disabled { opacity: .35; }
/* настройка iPack: у каждого предмета таблетки с вариантами (выбранная чёрная), внизу платный третий год гарантии и итог */
.ipc-sheet { padding-top: 18px; }
.ipc-sheet h3 { margin: 0 0 4px; font-size: 20px; text-align: center; }
.ipc-sheet .sub { text-align: center; margin-bottom: 14px; }
.ipc-s { margin-bottom: 14px; }
.ipc-t { padding: 0 2px 7px; font-size: 13px; font-weight: 500; color: var(--label); }
.ipc-p { display: flex; flex-wrap: wrap; gap: 8px; }
.ipc-o { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--gray); font-size: 14.5px; font-weight: 500; color: var(--text); transition: background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ipc-o:active { transform: scale(.96); }
.ipc-o.on { background: #111; color: #fff; }
.ipc-o small { margin-left: 6px; opacity: .65; font-size: 12px; }
.ipc-w { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 13px 14px; border: 1.5px solid rgba(29, 63, 143, .22); border-radius: 18px; background: #eef3ff; text-align: left; font: inherit; color: #1d3f8f; -webkit-tap-highlight-color: transparent; transition: border-color .2s, background .2s; }
.ipc-w span { flex: 1; min-width: 0; }
.ipc-w b { display: block; font-size: 15px; font-weight: 600; }
.ipc-w small { display: block; margin-top: 2px; font-size: 12px; opacity: .75; }
.ipc-w em { font-style: normal; font-weight: 600; font-size: 15px; white-space: nowrap; }
.ipc-sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(29, 63, 143, .25); transition: background .2s; }
.ipc-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: translate .2s; }
.ipc-w.on { border-color: #1d3f8f; background: #e1eaff; }
.ipc-w.on .ipc-sw { background: #1d3f8f; }
.ipc-w.on .ipc-sw::after { translate: 18px 0; }
.ipc-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--gray); font-size: 14px; }
.ipc-sum b { font-size: 18px; }
.ipc-sheet #ipcOk { position: sticky; bottom: 0; box-shadow: 0 0 0 10px #fff, 0 -12px 14px 0 rgba(255, 255, 255, .9); }
/* кнопка в раскрытой плашке iPack в корзине */
.stk.ip .ipx li.cf b { color: #1d3f8f; font-weight: 600; font-size: 11.5px; }
.stk.ip .ipx li.cfgrow { display: block; padding: 8px 0 2px; border: 0; }
.ipk-cfgb { width: 100%; min-height: 36px; border: 1.5px solid rgba(29, 63, 143, .35); border-radius: 12px; background: transparent; color: #1d3f8f; font: inherit; font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.ipk-cfgb:active { background: rgba(29, 63, 143, .08); }
.mg-set { color: var(--muted); }
/* «Полная настройка устройства» в корзине: плашка как «В рассрочку», но ниже промокода: значок 32 px, одна строка, справа цена и стрелка (или галочка, если услуга добавлена) */
.ord-btn.su-box { width: auto; margin: 10px var(--gutter) 0; padding: 8px 12px 8px 12px; gap: 8px; min-height: 50px; cursor: pointer; }
.su-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1.6px solid rgba(36, 73, 107, .5); border-radius: 50%; background: transparent; color: #24496b; font: italic 700 14px/1 Georgia, 'Times New Roman', serif; -webkit-tap-highlight-color: transparent; }
.su-ck { flex: none; box-sizing: border-box; width: 25px; height: 25px; padding: 0; border: 2px solid rgba(36, 73, 107, .45); border-radius: 50%; background: transparent; transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.su-ck.on { border-color: #24496b; box-shadow: 0 3px 9px rgba(36, 73, 107, .45), inset 0 1px 0 rgba(255, 255, 255, .3); background: #24496b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.su-box .ob-t b { font-size: 13.5px; line-height: 1.2; white-space: nowrap; letter-spacing: -.1px; }
.su-box em { font-style: normal; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.su-box.on { background: #f6e8eb; }
.oc-su { display: flex; justify-content: space-between; margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--gray); font-size: 13px; }
.oc-su b { font-weight: 600; }
.wd-sheet #suGo { margin-top: 16px; }
.su-ck { transition: background .2s, border-color .2s, box-shadow .2s; }
/* значок «i» у iPack на карточке товара: такой же, как у «Полной настройки» в корзине (круг, курсивная «i» с засечками), цвет остаётся синим под плашку */
.stk.ip.pdp .ipk-i { width: 26px; height: 26px; border: 1.6px solid rgba(29, 63, 143, .55); background: transparent; color: #1d3f8f; font: italic 700 14px/1 Georgia, 'Times New Roman', serif; }

/* карточка товара: Trade-In, цена и iPack PRO — три отдельные плашки с отступами, а не стопка «одна под другой» (просьба владельца 05.11) */
.pane.prod .ti-btn:has(+ .price.solo), .pane.prod .ti-on:has(+ .price.solo) { margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; gap: 12px; }
.pane.prod .ti-btn:has(+ .price.solo) .ti-ico { width: 26px; height: 26px; }
.pane.prod .ti-btn + .price.solo, .pane.prod .ti-on + .price.solo { margin-top: 10px; }
.pane.prod .price.solo, .pane.prod .price.solo.sq { border-radius: 16px; }
.pane.prod .price.solo.sq { margin-top: 22px; }
.pane.prod .ti-btn + .price.solo.sq, .pane.prod .ti-on + .price.solo.sq { margin-top: 10px; }
.pane.prod .stk.ip.pdp, .pane.prod .stk.ip.pdp:has(+ .stk) { margin: 10px 0 14px; padding: 6px 8px 6px 12px; border-radius: 14px; box-shadow: none; border: 1px solid rgba(29, 63, 143, .14); }
.pane.prod .stk.ip.pdp.open .ipl ul.ipx { padding-bottom: 6px; }
/* карточка товара (06.11): Трейд Ин и iPack PRO — плашки одного размера; цена с полоской «В рассрочку» прилипает к нижнему краю экрана */
.pane.prod .ti-btn, .pane.prod .ti-on { margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; gap: 12px; min-height: 64px; box-sizing: border-box; }
.pane.prod .ti-btn .ti-ico { width: 26px; height: 26px; }
.pane.prod .stk.ip.ipk-btn { z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; margin: 10px 0 0; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid rgba(29, 63, 143, .14); box-shadow: none; font-size: 13px; cursor: default; }
.pane.prod .stk.ip.ipk-btn .ipk-i { flex: none; width: 26px; height: 26px; border: 1.6px solid rgba(29, 63, 143, .55); background: transparent; color: #1d3f8f; font: italic 700 14px/1 Georgia, 'Times New Roman', serif; cursor: pointer; }
.ipk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ipk-tx b { font-size: 15px; font-weight: 600; }
.ipk-tx small { margin-top: 2px; font-size: 12px; line-height: 1.3; opacity: .75; }
.pane.prod .stk.ip.ipk-btn > em { flex: none; font-style: normal; font-weight: 600; font-size: 14px; }
.pane.prod .stk.ip.ipk-btn.off { opacity: .6; }
.pane.prod .cashback { margin: 10px 0 0; }
.pbar { position: sticky; bottom: 0; z-index: 6; margin: 14px 0 14px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(118, 118, 128, .28); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06); }
.pane.prod .pbar .price.solo { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.pane.prod .pbar .price.solo:active { transform: none; background: #f4f4f6; }
.pinst { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-top: 1px solid rgba(118, 118, 128, .18); background: #eaf3fd; color: #24496b; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pinst:active { background: #dbe9f8; }
.pinst .chev { width: 7px; height: 7px; margin-left: 2px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.pane.prod .ti-btn .ti-t b, .pane.prod .ti-on .ti-t b { font-size: 15px; }
.pane.prod .ti-btn .ti-t small, .pane.prod .ipk-tx small { font-size: 11px; line-height: 1.3; }
.pane.prod .ipk-tx small { white-space: nowrap; }
.pane.prod .stk.ip.ipk-btn { gap: 10px; }
/* 06.11: Трейд Ин и iPack ровно одной высоты; цена прижата вплотную к нижнему краю экрана, снизу у карточки нет отступа */
.pane.prod .ti-btn, .pane.prod .ti-on, .pane.prod .stk.ip.ipk-btn { height: 68px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.pane.prod { padding-bottom: 0; }
.pane.prod .pbody, .pane.prod #pbody { margin-bottom: 0; padding-bottom: 0; }
.pane.prod .pbar { margin: 14px 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, .25); }
.pane.prod .pbar .pinst { height: calc(38px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }/* нижняя плашка: цена слева, кнопка «В корзину» справа */
.pbrow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: #fff; }
.pbp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pbp b { font-size: 26px; font-weight: 600; letter-spacing: -.4px; line-height: 1.1; white-space: nowrap; }
.pbp small { margin-top: 2px; font-size: 12px; color: var(--label); }
.pbuy { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.pbuy:active { transform: scale(.96); }/* 06.11: нижняя плашка как в Яндекс Лавке — на всю ширину экрана, белая, верхние углы скруглены; слева цена, справа большая кнопка */
body > .pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; overflow: visible; border: 0; border-radius: 24px 0 0 0; background: #fff; box-shadow: -1px -4px 24px rgba(0, 0, 0, .09), 0 -1px 0 rgba(0, 0, 0, .04); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
body > .pbar .pbrow { padding: 0; gap: 14px; }
body > .pbar .pbp { gap: 3px; }
body > .pbar .pbn { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
body > .pbar .pbn b { font-size: 30px; font-weight: 700; letter-spacing: -.6px; line-height: 1.05; color: var(--text); }
body > .pbar .pbn b.sale { color: #2f5f8a; }
body > .pbar .pbn s { font-size: 16px; font-weight: 500; color: var(--old, #9a9aa0); text-decoration-color: #2f5f8a; text-decoration-thickness: 1.5px; }
body > .pbar .pinst { display: inline-flex; align-self: flex-start; width: auto; height: auto; padding: 0; border: 0; background: none; color: #2f5f8a; font-size: 13px; font-weight: 500; gap: 4px; }
body > .pbar .pinst:active { background: none; opacity: .6; }
body > .pbar .pinst .chev { width: 6px; height: 6px; border-width: 1.5px 1.5px 0 0; }
body > .pbar .pbp small { margin: 0; font-size: 12px; }
body > .pbar .pbuy { height: 60px; min-width: 46%; padding: 0 20px; border-radius: 20px; background: #bcd9f7; color: #10263a; font-size: 17px; font-weight: 600; }
body > .pbar .pbuy:active { background: #a9cdf2; }
.pane.prod { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }body > .pbar .pbn b { font-size: 25px; letter-spacing: -.5px; }
body > .pbar .pinst { white-space: nowrap; font-size: 12px; }
body > .pbar .pbuy { min-width: 0; height: 56px; padding: 0 22px; border-radius: 18px; font-size: 16px; }body > .pbar .pbuy { padding: 0 18px; }
body > .pbar .pbp { overflow: hidden; }
/* плашка цены ниже всех шторок (Trade-In, рассрочка, iPack и т.д.), а пока шторка открыта — прячем её совсем */
body > .pbar { z-index: 30; }
body > .pbar { transition: transform .32s cubic-bezier(.2, .9, .25, 1); }
/* шторка открыта — плашка уезжает вниз; закрывается (класс on снят) — выезжает обратно вместе с ней */
body:has(> .sheet-bg.on) > .pbar { transform: translateY(calc(100% + 12px)); }
/* цена чёрная; после применённого Трейд Ина — зелёная */
body > .pbar .pbn b.sale { color: var(--text); }
body > .pbar .pbn b.ti-pop { color: #1f9d4c; }body > .pbar { border-radius: 24px 24px 0 0; } /* скруглены оба верхних угла */
.pane.prod .ti-on .ti-t b { font-size: 14px; line-height: 1.25; }
.pane.prod .ti-on .ti-t small { font-size: 12px; }
/* профиль в стиле настроек Telegram (06.11) */
.me { position: relative; }
.me-panel { position: absolute; top: 0; right: 0; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(118, 118, 128, .1); color: #8e8e93; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.me-panel:active { opacity: .6; }
.tg-list { display: grid; gap: 14px; margin: 18px 0 16px; }
.tg-grp { overflow: hidden; border-radius: 14px; background: #f2f2f7; }
.tg-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px 0 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15.5px; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tg-row:active { background: rgba(0, 0, 0, .05); }
.tg-row + .tg-row::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: .5px; background: rgba(60, 60, 67, .2); }
.tg-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.tg-ico.em { background: #fff; font-size: 17px; }
.tg-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-v { flex: none; color: #8e8e93; font-size: 15px; }
.tg-v [hidden] { display: none; }
.tg-row .chev { flex: none; width: 7px; height: 7px; margin-left: 2px; border: solid #c4c4c7; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.tg-sheet h3 { margin: 0 0 14px; text-align: center; }
.tg-sheet .tg-grp { margin-bottom: 14px; }
.tg-sheet .refcard { margin: 0 0 12px; }.tg-list { margin-left: var(--gutter, 16px); margin-right: var(--gutter, 16px); }
.me-panel { right: var(--gutter, 16px); }
.tg-h { margin: 4px 0 -6px 14px; font-size: 13px; font-weight: 400; color: #8e8e93; text-transform: uppercase; letter-spacing: .02em; }
/* рассрочка под ценой — маленькая кругленькая плашка с окантовкой */
body > .pbar .pbp { overflow: visible; gap: 5px; }
body > .pbar .pinst { align-items: center; padding: 3px 9px 3px 10px; border: 1px solid rgba(47, 95, 138, .3); border-radius: 999px; background: rgba(47, 95, 138, .06); font-size: 12px; line-height: 1.3; }
body > .pbar .pinst:active { background: rgba(47, 95, 138, .14); opacity: 1; }
body > .pbar .pbuy { font-size: 15.5px; padding: 0 16px; }body > .pbar .pbp { flex: 1 1 auto; min-width: 0; }
body > .pbar .pbuy { flex: 0 1 auto; padding: 0 14px; }
body > .pbar .pbuy { flex: none; width: 146px; padding: 0 8px; white-space: nowrap; } /* одна ширина и для «В корзину», и для «Добавить ещё» */
/* окно «Настроить устройства?» перед оформлением */
.sp-list { display: grid; gap: 8px; }
.sp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; border: 1px solid rgba(36, 73, 107, .14); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; }
.sp-row.on { border-color: rgba(36, 73, 107, .45); background: #eaf3fd; }
.sp-row img { flex: none; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #f5f5f7; }
.sp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-t small { font-size: 12px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row em { flex: none; font-style: normal; font-size: 13.5px; font-weight: 600; color: #24496b; }
.sp-row .su-ck { display: block; }.pm-row.su-row { margin-top: 12px; }
.pm-row.su-row b { color: var(--text); }
/* окна-шторки с кнопкой внизу: отступ над кнопкой и под ней (на iPhone снизу полоска «домой») */
.wd-sheet > .buy { margin-top: 14px; }
.wd-sheet { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.sp-t b { color: var(--text); }.ct-row { padding-left: 16px; }
.ct-row + .ct-row::before { left: 16px; }
.ct-note { margin: -4px 0 14px; text-align: center; }
/* кнопка «В корзину» на плашке цены: чёрная, как «Оформить заказ» и корзина в шапке, со значком сумки */
body > .pbar .pbuy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 56px; border-radius: 18px; background: #111; color: #fff; font-weight: 600; letter-spacing: -.1px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
body > .pbar .pbuy::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat; }
body > .pbar .pbuy:active { background: #2a2a2a; transform: scale(.97); }body > .pbar .pbuy.more::before { display: none; } /* «Добавить ещё» — без значка, иначе тесно */
/* рассрочка — строка во всю ширину под ценой и кнопкой: значок карты, «В рассрочку от … в месяц», стрелка */
body > .pbar .pinst { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 6px; width: 100%; height: auto; margin: 10px 0 0; padding: 8px 12px; border: 0; border-radius: 12px; background: #eef4fb; color: #24496b; font-size: 13px; font-weight: 500; white-space: nowrap; }
body > .pbar .pinst b { font-weight: 700; }
body > .pbar .pinst:active { background: #e1ecf8; opacity: 1; }
body > .pbar .pinst .chev { margin-left: 2px; }
.pi-ico { flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center / contain no-repeat; }
body > .pbar .pbn b { font-size: 27px; }
.pane.prod { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }body > .pbar .pbn b { font-size: 25px; }
body > .pbar .pbuy { width: 140px; }
body > .pbar .pbp { align-items: center; }
body > .pbar .pbn { justify-content: center; width: 100%; }
body > .pbar .pbn b { line-height: 1.1; }
/* Шрифт, цвета, радиусы и размеры сняты с айпарк.рф */
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-300.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'SFUIDISPLAY'; src: url('fonts/sf-700.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff;
  --text: #000000;
  --gray: #f6f6f6;
  --dark: #111111;
  --muted: #777777;
  --label: #666667;
  --old: #bdbdbd;
  --line: #e2e2e2;
  --blue: #0077ed;
  --radius: 20px;
  --gutter: 16px;
  --bar-h: 64px;
  /* во весь экран сверху вырез телефона и кнопки Telegram «Закрыть» / «⋯»: шапка магазина встаёт под ними */
  --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'SFUIDISPLAY', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- шапка ---------- */
/* шапка сплошная белая, без размытия фона: backdrop-filter дорогой для телефона и давал подлаги при переходах */
.top { position: sticky; top: 0; z-index: 20; background: #fff; padding-top: var(--tg-top); }
/* название по центру полосы с кнопками Telegram; полоса стоит на месте, шапка магазина уезжает под неё.
   Вне полноэкранного режима полосы нет — высота 0, не видно */
.tg-title { position: fixed; z-index: 21; left: 0; right: 0; top: 0; height: var(--tg-top); padding-top: var(--tg-safe-area-inset-top, 0px); box-sizing: border-box; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; letter-spacing: .5px; color: var(--text); pointer-events: none; }
.bar { height: var(--bar-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* слева: аватар с живым кольцом, приветствие и баллы */
.who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.av-ring { position: relative; flex: none; width: 44px; height: 44px; }
/* кольцо цвета нового iPhone (Burgundy #2f5f8a) с металлическим бликом, который бежит по кругу */
.av-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: ringSpin 4.5s linear infinite;
  background: conic-gradient(from 0deg, #2f5f8a 0%, #24496b 28%, #2f5f8a 52%, #2e5880 70%, #8fb5dc 82%, #cfe2f6 87%, #8fb5dc 92%, #2f5f8a 100%); }
.av-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2c567d; opacity: 0; pointer-events: none; }
/* нажатие на аккаунт: аватар «прыгает», от кольца расходится волна */
.who.tap .av-ring { animation: avaPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.who.tap .av-ring::after { animation: avaWave .65s ease-out; }
@keyframes avaPop { 0% { transform: scale(1); } 35% { transform: scale(.8); } 70% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes avaWave { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
/* профиль: большой аватар с дышащим ореолом */
.av-ring.big { display: block; width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; }
.av-ring.big .av { inset: 3.5px; padding: 3px; }
.av-ring.big .av-letter { font-size: 34px; }
/* ореол «дышит» только масштабом и прозрачностью (это не нагружает отрисовку, в отличие от анимации тени) */
.av-ring.big::after { display: none; }
@keyframes halo { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
.av { position: absolute; inset: 2.5px; border-radius: 50%; background: #fff; padding: 2px; overflow: hidden; }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av-letter { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--gray); font-size: 15px; font-weight: 600; color: var(--label); }
.who-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-t small { font-size: 12px; font-weight: 500; color: var(--muted); }
.wave { display: inline-block; font-style: normal; transform-origin: 70% 75%; animation: wave 2.8s ease-in-out 1s infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes wave { 0%, 55%, 100% { transform: rotate(0); } 8% { transform: rotate(16deg); } 16% { transform: rotate(-8deg); } 24% { transform: rotate(16deg); } 32% { transform: rotate(-4deg); } 40% { transform: rotate(10deg); } }
/* справа: корзина — пустая сумка или чёрная таблетка со счётчиком и суммой */
.cart-pill { flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 20px; background: var(--gray); color: var(--text);
  transition: background .3s, color .3s, padding .3s; }
.cart-pill img { height: 20px; width: auto; transition: filter .3s; }
.cart-pill.full { background: var(--text); color: #fff; padding: 0 14px 0 11px; }
.cart-pill.full img { filter: invert(1); }
.cp-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--text); font-size: 12px; font-weight: 700; }
.cp-sum { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cart-pill.bump { animation: bump .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bump { 0% { transform: scale(.85); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .av-ring::before, .av-ring.big::after, .who.tap .av-ring, .who.tap .av-ring::after, .wave, .cart-pill.bump { animation: none; } }.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gray); object-fit: cover; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--label); }

/* ---------- общие блоки ---------- */
main { min-height: 70vh; }
.crumbs { padding: 18px var(--gutter) 0; font-size: 13px; color: #9a9a9a; font-weight: 500; }
.crumbs a { color: #9a9a9a; }
.crumbs span { color: var(--text); }
h1 { margin: 28px var(--gutter) 6px; text-align: center; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -.4px; }
.sub { margin: 0 var(--gutter) 22px; text-align: center; color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.5; }
h2 { margin: 56px var(--gutter) 6px; text-align: center; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.3px; }

/* ---------- плитки категорий ---------- */
.tiles { display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--gutter) 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
.tile { flex: none; width: 128px; scroll-snap-align: start; text-align: center; }
.tile .pic { height: 104px; display: grid; place-items: center; }
.tile img { max-height: 100px; max-width: 120px; object-fit: contain; }
.tile b { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; }

/* ---------- карточки брендов ---------- */
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px var(--gutter) 0; }
/* карточка как на сайте: всё считается от ширины самой карточки (cqw), поэтому пропорции не ломаются на любом экране */
.brand { position: relative; display: block; overflow: hidden; border-radius: 18px; background: #f6f6f6; container-type: inline-size; text-align: center; }
.brand b, .brand small { position: absolute; left: 0; width: 100%; line-height: 1.2; }
.brand b { font-size: 16px; font-size: calc(var(--ts) / var(--W) * 100cqw); font-weight: 600; }
.brand small { font-size: 11px; font-size: calc(var(--ss) / var(--W) * 100cqw); font-weight: var(--sw); padding: 0 2%; }
.brand .bimg { position: absolute; background-color: #d1d1d1; background-repeat: no-repeat; background-position: center; background-size: cover; }
.brand.dark { grid-column: 1 / -1; background: #121212; color: #fff; }
.brand.dark b { font-weight: 700; }
.brand.dark small { color: #737373; }
.brand.dark .bimg { background-color: #2e2e2e; }
/* как на сайте: при наведении фото увеличивается на 10% за 0,1 с, у Ray Ban ещё и опускается на 10 px (от ширины 376) */
.brand .bimg { transition: transform .1s linear; backface-visibility: hidden; }
@media (hover: hover) {
  .brand:hover .bimg { transform: scale(1.1); }
  .brand[href="#/c/rayban"]:hover .bimg { transform: translateY(calc(10 / 376 * 100cqw)) scale(1.1); }
}
@media (hover: none) {
  .brand:active .bimg { transform: scale(1.1); }
  .brand[href="#/c/rayban"]:active .bimg { transform: translateY(calc(10 / 376 * 100cqw)) scale(1.1); }
}

/* ---------- соцсети и контакты ---------- */
/* кнопки соцсетей как на сайте: плашка 250×70, иконка слева выступает за край; по краям и между кнопками оставлено место под иконки */
/* на телефоне кнопки того же размера, что на сайте (250×70), по одной в строке: так иконки не налезают на текст;
   между кнопками оставлено место под иконки, которые выступают за край */
.socials { display: grid; grid-template-columns: min(250px, 100%); justify-content: center; gap: 34px; padding: 30px var(--gutter) 6px; }
@media (min-width: 640px) { .socials { grid-template-columns: repeat(2, 250px); gap: 34px 60px; } }
.socials a { position: relative; display: grid; place-items: center; aspect-ratio: 250 / 70; container-type: inline-size; border-radius: 20px; background: #f6f6f6; color: #000; font-size: 13px; font-weight: 500; line-height: 1.2;
  transition: background-color .2s ease-in-out, color .2s ease-in-out; }
.socials a i { position: absolute; z-index: 1; background: no-repeat center / contain; pointer-events: none; }
/* при наведении плашка темнеет, текст белеет (на телефоне — пока палец на кнопке) */
@media (hover: hover) { .socials a:hover { background: #484848; color: #fff; } }
@media (hover: none) { .socials a:active { background: #484848; color: #fff; } }
.foot { margin: 24px var(--gutter) 0; display: grid; gap: 14px; }
.foot .row b { display: block; font-size: 17px; font-weight: 600; }
.foot .row span { display: block; color: var(--muted); font-weight: 300; margin-top: 2px; }
.foot a.link { display: inline-block; margin-right: 18px; font-weight: 500; }
.credit { margin: 6px var(--gutter) 8px; color: #2f5f8a; font-weight: 300; font-size: 14.85px; line-height: 1.5; }
.credit a { color: inherit; font-weight: 500; text-decoration: none; }
.foot small { color: #9a9a9a; font-weight: 300; font-size: 11px; line-height: 1.5; }

/* ---------- каталог раздела ---------- */
.models { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px var(--gutter) 0; }
.model { background: var(--gray); border-radius: var(--radius); padding: 14px 10px 18px; text-align: center; display: flex; flex-direction: column; }
/* рамка фото строго квадратная, а само фото лежит внутри неё: пока картинка не догрузилась (lazy), карточка не растёт и не прыгает */
.model .pic { position: relative; flex: none; width: 100%; aspect-ratio: 1 / 1; }
.model .pic img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; }
.model b { font-size: 15px; font-weight: 600; line-height: 1.25; margin-top: 4px; letter-spacing: -.1px; }
.model span { margin-top: 6px; font-size: 14px; font-weight: 500; }
.model s { color: var(--old); margin-left: 6px; font-weight: 500; }
.sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px var(--gutter) 0; }
.sections .model b { font-size: 17px; margin-top: 0; }
.sections .model span { color: var(--muted); font-weight: 300; font-size: 12px; }

/* ---------- товар ---------- */
.gallery { margin: 14px var(--gutter) 0; background: var(--gray); border-radius: var(--radius); position: relative; overflow: hidden; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slides > div { flex: none; width: 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 20px; }
.slides img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #c8c8c8; transition: background .15s; }
.dots i.on { background: var(--text); }
.pbody { padding: 22px var(--gutter) 0; }
.pbody h1 { margin: 0 0 18px; text-align: left; font-size: 26px; line-height: 1.35; letter-spacing: -.3px; }
.opt { margin-bottom: 16px; }
.opt .name { font-size: 13px; font-weight: 500; color: var(--label); padding-bottom: 7px; }
.opt .name em { font-style: normal; color: var(--text); }
.chips, .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
/* «жидкое стекло», как нижняя панель Telegram: капсула — матовое углубление, выбранный вариант — выпуклая стеклянная линза, которая перетекает (placeGlass).
   Объём держится на трёх вещах: яркая кромка сверху, мягкая тёмная кромка снизу и двухслойная тень (контактная + рассеянная) */
.chips { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 24px;
  border: 1px solid rgba(118, 118, 128, .32);
  background: linear-gradient(180deg, rgba(118, 118, 128, .052), rgba(118, 118, 128, .022));
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .09), inset 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(255, 255, 255, .9); }
.chip { position: relative; z-index: 1; min-height: 34px; padding: 6px 15px; border: 0; border-radius: 20px; background: transparent; font-size: 13px; font-weight: 500; color: var(--text); }
/* память и SIM/eSIM — как сегментированный переключатель iOS: одна строка на всю ширину, варианты равной ширины, линза едет между ними */
.pbody .opt .chips { display: flex; flex-wrap: nowrap; width: 100%; }
.pbody .opt .chips .chip { flex: 1 1 0; min-width: 0; padding: 6px 6px; white-space: normal; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.pbody .opt .chips:has(button:only-of-type) { display: inline-flex; width: auto; }
.pbody .opt .chips:has(button:only-of-type) .chip { flex: none; padding: 6px 22px; }
.chip.on { color: var(--blue); font-weight: 600; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.chips.has-ind .chip.on { background: transparent; box-shadow: none; }
.chips.has-ind { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.chip.near { color: var(--blue); }
.chips:has(.near) .chip.on:not(.near) { color: var(--text); font-weight: 500; }
.chip:disabled { color: #c4c4c4; }
/* линза: блик сверху, цветная дисперсия по краям (розовый слева, голубой справа), внутреннее свечение и тень под ней */
.gl-ind { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 20px; pointer-events: none;
  /* iOS 26: прозрачное стекло, а не белая плашка — сквозь линзу виден фон, края светятся (сверху-слева ярче, снизу-справа мягче) */
  background: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, .1) 58%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(220%) brightness(1.08); backdrop-filter: blur(3px) saturate(220%) brightness(1.08);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .95), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .7), inset 0 0 14px rgba(255, 255, 255, .45),
    0 0 0 .5px rgba(0, 0, 0, .09), 0 6px 16px -4px rgba(20, 30, 60, .22), 0 1px 3px rgba(0, 0, 0, .08);
  transition: translate .6s linear(0, .09 4%, .33 10%, .62 17%, .84 25%, .94 34%, .98 44%, .995 58%, 1), width .22s ease-out, height .3s, scale .45s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, background .25s; }
/* глянцевая полоса вдоль верха линзы */
.gl-ind::after { content: none; }
/* перелёт на другой вариант, как на iPhone: линза сразу «вздувается», вытягивается по ходу движения (--st растёт с расстоянием), пружинит и оседает */
.gl-ind.go { animation: glMove .68s linear(0, .09 4%, .33 10%, .62 17%, .86 25%, 1.03 34%, 1.07 40%, 1.04 48%, .99 58%, .995 70%, 1); }
@keyframes glMove {
  0% { scale: 1.1 1.1; }
  28% { scale: calc(1.14 + var(--st, .2)) calc(1.12 - var(--st, .2) * .5); }
  62% { scale: calc(1.03 - var(--st, .2) * .15) calc(1.05 + var(--st, .2) * .25); }
  100% { scale: 1 1; }
}
/* пока линзу тянут: она приподнимается, растёт и отбрасывает длинную тень, а пальцем не закрывается */
.gl-ind.drag { transition: width .25s, height .3s, scale .25s cubic-bezier(.3, 1.35, .5, 1), box-shadow .25s; scale: 1.16;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .3) 42%, rgba(255, 255, 255, .22) 58%, rgba(255, 255, 255, .66) 100%);
  box-shadow: inset 2px 2px 1px -.5px #fff, inset -2px -2px 1px -.5px rgba(255, 255, 255, .85), inset 0 0 18px rgba(255, 255, 255, .6),
    0 0 0 .5px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .1), 0 16px 26px -6px rgba(20, 20, 50, .34); }
@media (prefers-reduced-motion: reduce) { .gl-ind { transition: none; } .gl-ind.go { animation: none; } }
/* цвет — стеклянная бусина: блик сверху-слева, объём по краю, мягкая тень снизу */
/* кружок цвета лежит внутри рамки 36×36: кольцо выбранного цвета не выступает за левую линию, и вся колонка (название цвета, кружки, переключатели) стоит по одному краю */
.swatches { gap: 2px; }
.sw { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: none; position: relative; }
.sw::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 3px 7px -2px rgba(0, 0, 0, .3); }
.sw.on::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--blue); }
.sw:disabled { opacity: .3; }
.price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 14px; font-size: 22px; font-weight: 600; }
.price s { color: var(--old); }
/* со скидкой: плашка из двух равных половин (зачёркнутая цена с «!» слева, настоящая справа) и стрелка между ними */
.price.two { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 16px; background: var(--gray); }
.price .pc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.price .pc small { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 400; color: var(--muted); }
.price .pc s { display: block; font-size: 14px; font-weight: 500; }
.price .pc.new { justify-content: flex-end; text-align: right; }
.price .pc.new b { display: block; font-size: 24.9px; font-weight: 600; letter-spacing: -.3px; }
.price .parr { width: 20px; height: 20px; margin: 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); position: relative; }
.price .parr::after { content: ''; position: absolute; left: 6px; top: 7px; width: 6px; height: 6px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
/* «!» возле зачёркнутой цены — объяснение про iPack */
.ipk-i { align-self: center; position: relative; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--blue); border-radius: 50%; background: rgba(0, 122, 255, .08); color: var(--blue); font-size: 13px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.ipk-i:active { transform: scale(.9); }
/* окно iPack: синий макет с плитками (картинка нарезана на четыре части), плитки выпрыгивают по очереди */
.ipk-sheet { padding-top: 16px; }
.ipk-card { padding: 22px 14px 14px; border-radius: 22px; text-align: center; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #7399e0 0%, #5877c9 48%, #3a47a2 100%); }
.ipk-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 40% at 50% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.ipk-h { display: block; font-size: 38px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.ipk-warr { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 12px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 22px; font-size: 18px; font-weight: 300; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ipk-warr::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); }
.ipk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ipk-t { display: block; aspect-ratio: 1 / 1; border-radius: 15%; background: url(img/ipack.webp) no-repeat; background-size: 249.82% auto; box-shadow: 0 8px 18px -6px rgba(10, 20, 80, .45); }
.ipk-cmp { display: grid; gap: 6px; margin: 4px 0 16px; }
.ipk-cmp > div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; border-radius: 14px; background: var(--gray); font-size: 15px; }
.ipk-cmp span { color: var(--label); font-weight: 400; font-size: 14px; }
.ipk-cmp s { color: var(--old); font-weight: 600; }
.ipk-cmp .win { background: #e8f0ff; }
.ipk-cmp .win b { color: var(--blue); font-size: 17px; }
.ipk-cmp .save { background: #e9f8ee; }
.ipk-cmp .save b { color: #1f9d4c; }
.ipk-sheet h3 { margin-top: 18px; font-size: 19px; }
/* обе кнопки внизу одним прилипающим блоком, чтобы «Супер!» не наезжала на «Настроить под себя» */
.ipk-foot { position: sticky; bottom: 0; display: grid; gap: 8px; padding-top: 4px; background: #fff; box-shadow: 0 10px 0 10px #fff, 0 -14px 14px 0 rgba(255, 255, 255, .9); }
.ipk-foot .buy.alt { margin-top: 0; }
.ipk-sheet .sub { text-align: center; }
.ipk-bg.on .ipk-h { animation: ipkUp .7s .12s backwards cubic-bezier(.2, .9, .25, 1); }
.ipk-bg.on .ipk-warr { animation: ipkUp .7s .24s backwards cubic-bezier(.2, .9, .25, 1); }
.ipk-bg.on .ipk-warr::after { animation: ipkShine 1.1s .9s ease-in-out; }
.ipk-bg.on .ipk-t { animation: ipkPop .75s calc(.34s + var(--i) * .11s) backwards cubic-bezier(.2, 1.35, .4, 1); }
.ipk-bg.on h3, .ipk-bg.on .ipk-sheet .sub, .ipk-bg.on .ipk-cmp, .ipk-bg.on .ipk-foot { animation: ipkUp .6s .85s backwards cubic-bezier(.2, .9, .25, 1); }
@keyframes ipkUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes ipkPop { from { opacity: 0; transform: translateY(34px) scale(.7) rotate(-4deg); filter: blur(6px); } }
@keyframes ipkShine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .ipk-bg.on *{ animation: none !important; } }
.buy { width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .1px; } /* полностью круглые края, как у корзины в шапке */
.buy.alt { background: var(--gray); color: var(--text); margin-top: 8px; }
.acc { margin-top: 26px; border-top: 1px solid var(--line); }
.acc a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.acc a::after { content: '›'; color: #9a9a9a; font-size: 20px; }
/* ---------- каталог как в киоске: слева колонка разделов, справа список выбранного ---------- */
body.shelled { overflow: hidden; padding-bottom: 0; }
.shell { display: flex; height: calc(100vh - var(--bar-h) - var(--tg-top)); height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--bar-h) - var(--tg-top)); }
.rail { position: relative; flex: none; width: 88px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding: 8px 6px 70px; border-right: 1px solid var(--line); background: #fff; }
.rail::-webkit-scrollbar, .pane::-webkit-scrollbar { display: none; }
/* бегунок под активным пунктом: едет к новому с пружиной */
.rail-ind { position: absolute; left: 6px; right: 6px; top: 0; height: var(--ih, 84px); border-radius: 18px; background: var(--gray); transform: translateY(var(--iy, 8px));
  transition: transform .55s cubic-bezier(.34, 1.45, .5, 1), height .3s ease, opacity .2s; z-index: 0; }
.rail-ind::before { content: ''; position: absolute; left: -6px; top: 24%; bottom: 24%; width: 3px; border-radius: 0 3px 3px 0; background: var(--text); }
.ri { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 9px; font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; color: #8a8a8e;
  transition: color .25s; animation: railIn .65s backwards cubic-bezier(.34, 1.56, .64, 1); animation-delay: calc(var(--i, 0) * 45ms); }
.ri img { width: 46px; height: 46px; object-fit: contain; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ri.on { color: var(--text); font-weight: 600; }
.ri.on img { transform: scale(1.14); }
.ri:active img { transform: scale(.88); transition-duration: .12s; }
@keyframes railIn { from { opacity: 0; transform: translateX(-26px) scale(.9); } }
.shell.still .ri { animation: none; }  /* при возврате с другой страницы колонка появляется сразу */

.pane { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 14px 10px 90px; }
.ptitle { margin: 2px 4px 12px; }
.pt-h { font-size: 24px; font-weight: 600; letter-spacing: -.3px; line-height: 1.15; }
.ptitle p { margin: 4px 0 0; font-size: 12px; font-weight: 300; line-height: 1.4; color: var(--muted); }
.pt-sub { margin: 22px 4px 10px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.pback { display: inline-block; margin: 0 4px 8px; font-size: 13px; font-weight: 500; color: var(--blue); }
.pane .models, .pane .sections { padding: 0; gap: 8px; }
.pane .model { padding: 10px 6px 14px; border-radius: 18px; }
.pane .model b { font-size: 13px; }
.pane .model span { font-size: 12.5px; }
.pane .model s { margin-left: 4px; }
/* вход: заголовок выезжает слева, карточки встают в 3D по очереди; выход: всё уезжает влево */
.pane.entering .ptitle { animation: titleIn .55s backwards cubic-bezier(.2, .8, .2, 1); }
.pane.entering .model { animation: cardIn .8s backwards cubic-bezier(.34, 1.56, .64, 1); animation-delay: calc(min(var(--i, 0), 9) * 50ms + 80ms); }
@keyframes cardIn { from { opacity: 0; transform: perspective(700px) rotateX(22deg) translateY(46px) scale(.92); } }
@keyframes titleIn { from { opacity: 0; transform: translateX(-14px); } }
.pane .models, .pane .ptitle { transition: opacity .16s ease-in, transform .16s ease-in; }
.pane.leaving .models, .pane.leaving .ptitle { opacity: 0; transform: translateX(-18px) scale(.98); }
@media (prefers-reduced-motion: reduce) { .rail-ind { transition: none; } .ri, .pane.entering .model, .pane.entering .ptitle { animation: none; } }

/* ---------- переход «карточка ↔ товар»: общее фото плавно перелетает на новое место ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
/* перелёт аватара: старая и новая страница не смешиваются (никакого наложения двух больших снимков), летит только аватар */
.vt-ava::view-transition-old(root) { animation: none; opacity: 0; }
.vt-ava::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(hero) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .85, .2, 1); z-index: 10; }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: contain; }

/* ---------- 3D-появление карточек и полёт товара в корзину ---------- */
.rv.rv3d { transform: perspective(700px) rotateX(24deg) translateY(50px) scale(.93); transform-origin: 50% 100%;
  transition-property: opacity, transform; transition-duration: .85s; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); } /* пружина: с лёгким перелётом */
.rv.rv3d.in { transform: none; }
.fly { position: fixed; z-index: 100; pointer-events: none; object-fit: contain; transform-origin: center; will-change: transform; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .22)); }

/* ---------- эффекты прокрутки (значения ставит app.js) ---------- */
.top { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; will-change: transform; }
.top.hide { transform: translateY(calc(-1 * var(--bar-h))); }  /* шапка уезжает вверх при прокрутке вниз */
.top.scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.model .pic img { translate: 0 var(--py, 0px); }          /* отдельное свойство translate, не мешает увеличению при наведении */
.gallery .slides { transform: translateY(var(--gy, 0px)) scale(var(--gs, 1)); opacity: var(--go, 1); transform-origin: 50% 0; will-change: transform, opacity; }
.pbody { position: relative; z-index: 1; background: var(--bg); }  /* наезжает поверх уходящей галереи */
@media (prefers-reduced-motion: reduce) { .top { transition: none; } .top.hide { transform: none; } }

/* раскрывающиеся «Гарантия и возврат» и «Оплата и доставка» */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid #9a9a9a; border-bottom: 1.5px solid #9a9a9a; transform: rotate(45deg); transition: transform .25s; }
.acc-item[open] summary::after { transform: rotate(-135deg); }
.acc-body { padding: 0 0 18px; font-size: 14px; line-height: 1.55; color: #333; animation: accIn .3s ease; }
.acc-body h4 { margin: 16px 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.acc-body h4.grp { margin-top: 22px; font-size: 17px; }
.acc-body p { margin: 0 0 10px; }
.acc-body ul { margin: 6px 0 10px; padding-left: 18px; }
.acc-body li { margin-bottom: 5px; }
.acc-body .small { font-size: 12px; line-height: 1.5; color: var(--muted); }
@keyframes accIn { from { opacity: .6; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-body { animation: none; } .acc-item summary::after { transition: none; } }


/* ---------- корзина ---------- */
.line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px; margin: 0 var(--gutter) 10px; background: var(--gray); border-radius: var(--radius); }
.line .pic { height: 76px; display: grid; place-items: center; }
.line img { max-height: 76px; max-width: 76px; object-fit: contain; }
.line b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.line small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 300; line-height: 1.4; }
.line .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qty { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; }
.qty button { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; }
.qty span { min-width: 22px; text-align: center; font-weight: 600; }
.line .sum { font-weight: 600; font-size: 16px; }
.total { display: flex; justify-content: space-between; margin: 22px var(--gutter) 14px; font-size: 20px; font-weight: 600; }
.wrap { padding: 0 var(--gutter); }
.empty { text-align: center; color: var(--muted); font-weight: 300; padding: 40px var(--gutter); }
.empty .buy { margin-top: 22px; }
.done { text-align: center; padding: 70px var(--gutter) 0; }
.done .mark { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--text); display: grid; place-items: center; color: #fff; font-size: 30px; }
.done h1 { margin-top: 0; }

/* ---------- профиль ---------- */
.me { text-align: center; padding-top: 30px; }
/* значок баллов — кольцо из знака айпарка цвета Burgundy (оно шире, чем выше) */
.pt-ico { display: inline-block; width: 16px; height: auto; margin-right: 5px; vertical-align: -1.5px; }
.points .pt-ico { width: 22px; margin-right: 7px; vertical-align: -3px; }
.me h1 { margin-top: 0; }
.order.fresh { animation: freshIn .4s ease backwards; }
@keyframes freshIn { from { opacity: 0; transform: translateY(8px); } }
/* подарки: купленные товары парят вокруг аватарки, у каждого своё место, ритм и фаза */
.orbit { position: relative; width: 96px; margin: 0 auto; }
.orbit .av-ring.big { margin-bottom: 16px; }
.gifts { position: absolute; left: 48px; top: 48px; width: 0; height: 0; pointer-events: none; }
.gift { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 6px 14px -4px rgba(60, 20, 30, .3);
  translate: var(--x) var(--y); animation: giftIn .7s cubic-bezier(.3, 1.5, .5, 1) backwards, giftBob var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
.gift img { width: 28px; height: 28px; object-fit: contain; }
@keyframes giftIn { from { translate: 0 0; scale: .2; opacity: 0; } }
@keyframes giftBob { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(3px, -7px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .gift { animation: none; } }
.points { display: inline-block; margin-top: 12px; padding: 8px 18px; background: #eaf3fd; color: #24496b; border-radius: 18px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.orders { margin-top: 30px; text-align: left; }
.cashback { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: #eaf3fd; color: #24496b; }
.cashback .pt-ico { width: 26px; margin: 0; flex: none; }
.cb-t { flex: 1; min-width: 0; }
.cb-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.cb-t small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; opacity: .7; }
.cart-cb { margin: 0 var(--gutter) 14px; }
.cb-n { flex: none; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- карта клиента (QR) ---------- */
.idcard { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: calc(100% - 2 * var(--gutter)); margin: 22px var(--gutter) 0; padding: 14px 16px 14px 14px; border: 0; border-radius: var(--radius); text-align: left; color: #fff;
  background: linear-gradient(125deg, #1a0b10 0%, #1a2d40 52%, #24496b 100%); box-shadow: 0 10px 26px -8px rgba(47, 95, 138, .55), inset 0 1px 0 rgba(255, 255, 255, .16); transition: transform .15s; }
.idcard:active { transform: scale(.98); }
/* «позови друга»: светлая карточка с цифрами и кнопкой приглашения */
.refcard { margin: 14px var(--gutter) 0; padding: 16px; border-radius: var(--radius); background: var(--gray); }
.rf-top { display: flex; gap: 12px; align-items: flex-start; }
.rf-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff; font-size: 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.rf-top b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.rf-top em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.35; color: var(--label); }
.rf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; }
.rf-stats span { padding: 9px 4px; border-radius: 12px; background: #fff; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.25; }
.rf-stats b { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.rf-links { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.rf-links button { padding: 6px 0; border: 0; background: none; color: var(--blue); font-size: 13px; font-weight: 500; }
.rf-in { display: block; width: 100%; margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--gray); font-size: 18px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; outline: none; }
.rf-in.rv-in { text-transform: none; letter-spacing: 0; font-size: 17px; }
.ri .al { display: block; width: 15px; height: 15px; margin: 0 auto; }
.pt-h .al { display: block; width: 30px; height: 30px; }
.refcard.rvw .buy { margin-top: 14px; }
.refcard.rvw:empty { display: none; }
.rf-in:focus { border-color: var(--blue); }
/* «стать инфлюенсером»: аккуратная строка внутри карточки «Позови друга» и окно снизу с условиями, ступенями и своей ссылкой */
.rf-inf { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 12px 12px 10px; border: 0; border-radius: 14px; background: #eeeafc; color: #3b2a87; text-align: left; transition: transform .15s; }
.rf-inf:active { transform: scale(.98); }
.rf-inf .chev { flex: none; margin-left: auto; opacity: .7; transform: rotate(-45deg); }
.rf-inf-t { flex: 1; }
.rf-inf-t b { display: block; font-size: 15px; font-weight: 600; }
.rf-inf-t em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; opacity: .75; }
.inf-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #fff; font-size: 18px; box-shadow: 0 2px 8px rgba(59, 42, 135, .15); }
.inf-sheet { padding-top: 22px; }
.inf-hero { text-align: center; }
.inf-star { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 22px; background: linear-gradient(145deg, #f4f0ff, #ddd5fb); font-size: 34px; box-shadow: 0 8px 20px -6px rgba(59, 42, 135, .35); }
.inf-p { margin: 4px 2px 14px; font-size: 14px; line-height: 1.45; color: var(--label); text-align: center; }
.inf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inf-btns .buy.alt { margin-top: 0; }
.inf-bg.on .inf-star { animation: ipkPop .7s .1s backwards cubic-bezier(.2, 1.35, .4, 1); }
.inf-bg.on .inf-t { animation: ipkUp .55s calc(.2s + var(--i, 0) * .06s) backwards cubic-bezier(.2, .9, .25, 1); }
.inf-month { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.inf-month span { padding: 10px 6px; border-radius: 12px; background: var(--gray); text-align: center; font-size: 11px; color: var(--muted); line-height: 1.25; }
.inf-month b { display: block; font-size: 20px; font-weight: 600; color: var(--text); }
.inf-tiers { display: grid; gap: 6px; }
.inf-t { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 14px; background: var(--gray); font-size: 15px; transition: background .3s; }
.inf-t b { font-weight: 600; color: #3b2a87; font-variant-numeric: tabular-nums; }
.inf-t.next { background: #eeeafc; box-shadow: inset 0 0 0 1.5px rgba(59, 42, 135, .35); }
.inf-t.hit { background: #e9f8ee; }
.inf-t.hit b { color: #1f9d4c; }
.inf-t.hit span::after { content: ' ✓'; color: #1f9d4c; }
.inf-lt { margin: 16px 4px 6px; font-size: 13px; font-weight: 500; color: var(--label); }
.inf-link { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 12px; line-height: 1.4; word-break: break-all; color: var(--muted); user-select: all; }
.idcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .13) 50%, transparent 64%); transform: translateX(-100%); animation: tiSheen 4.2s ease-in-out infinite 1.4s; pointer-events: none; }
.id-qr { flex: none; width: 76px; height: 76px; padding: 7px; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.id-qr svg, .ids-qr svg { display: block; width: 100%; height: 100%; }
.id-t { flex: 1; min-width: 0; }
.id-t small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; opacity: .65; }
.id-t b { display: block; margin: 3px 0 2px; font-size: 20px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.id-t em { display: block; font-style: normal; font-size: 12px; font-weight: 300; line-height: 1.35; opacity: .75; }
.idcard .chev { color: #fff; transform: rotate(-45deg); margin-right: 2px; opacity: .8; }
.idsheet { text-align: center; }
.ids-k { display: block; font-size: 12px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ids-qr { width: min(72vw, 280px); aspect-ratio: 1; margin: 14px auto 12px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 34px -10px rgba(0, 0, 0, .3); }
.ids-code { display: block; margin: 0 auto 6px; padding: 8px 18px; border: 0; border-radius: 999px; background: #eaf3fd; color: #2f5f8a; font-size: 24px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.ids-code:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .idcard::after { animation: none; } }

/* ---------- Trade-In ---------- */
/* значок «обмен»: две стрелки по кругу, цвет — currentColor */
.ti-ico { flex: none; display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11a8.5 8.5 0 0 0-15-4.6'/%3E%3Cpath d='M3.5 13a8.5 8.5 0 0 0 15 4.6'/%3E%3Cpath d='M5.5 2.5v4h4'/%3E%3Cpath d='M18.5 21.5v-4h-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11a8.5 8.5 0 0 0-15-4.6'/%3E%3Cpath d='M3.5 13a8.5 8.5 0 0 0 15 4.6'/%3E%3Cpath d='M5.5 2.5v4h4'/%3E%3Cpath d='M18.5 21.5v-4h-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ti-x, .ti-close { position: relative; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); }
.ti-x::before, .ti-x::after, .ti-close::before, .ti-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.ti-x::after, .ti-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* кнопка на странице iPhone: тёмная плашка с бегущим бликом, значок медленно крутится */
.ti-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 13px 14px; border: 0; border-radius: 14px; text-align: left; color: #fff; background: linear-gradient(120deg, #141414 0%, #1c3247 55%, #2f5f8a 100%); box-shadow: 0 6px 18px rgba(47, 95, 138, .25); transition: transform .15s; }
.ti-btn:active { transform: scale(.98); }
.ti-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%); transform: translateX(-100%); animation: tiSheen 3.2s ease-in-out infinite 1s; }
@keyframes tiSheen { 45%, 100% { transform: translateX(100%); } }
.ti-btn .ti-ico { width: 30px; height: 30px; animation: tiSpin 6s linear infinite; }
@keyframes tiSpin { to { transform: rotate(360deg); } }
.ti-t { flex: 1; min-width: 0; }
.ti-t b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .1px; }
.ti-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .75; }
.ti-btn .chev { color: #fff; transform: rotate(-45deg); margin-right: 4px; }
/* применённая оценка */
.ti-on { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 14px; background: #eaf7ee; color: #12632e; animation: tiPop .45s cubic-bezier(.3, 1.4, .5, 1); }
.ti-on .ti-t b { font-size: 13.5px; }
@keyframes tiPop { from { transform: scale(.94); opacity: 0; } }
/* шторка-опрос */
.sheet.ti { padding-top: 14px; min-height: 62vh; }
.ti-top { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.ti-top b { font-size: 15px; font-weight: 700; }
.ti-back { min-width: 70px; border: 0; background: none; padding: 0; text-align: left; color: var(--blue); font-size: 14px; font-weight: 500; }
.ti-close { margin-left: 42px; }
.ti-prog { height: 4px; margin: 12px 0 18px; border-radius: 2px; background: var(--gray); overflow: hidden; }
.ti-prog i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #2f5f8a, #5b8fc0); transition: width .45s cubic-bezier(.3, 1.2, .5, 1); }
.ti-step { animation: tiStep .38s cubic-bezier(.2, .9, .25, 1) backwards; }
@keyframes tiStep { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 36px)); } }
.ti h3 { margin: 0 0 4px; text-align: center; font-size: 21px; }
.ti .opt { margin-top: 16px; }
.ti .chips { flex-wrap: wrap; }
.ti-gens { display: flex; gap: 8px; margin: 14px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
.ti-gens::-webkit-scrollbar { display: none; }
.ti-gen { flex: none; min-width: 54px; height: 54px; padding: 0 10px; border: 0; border-radius: 16px; background: var(--gray); color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -.3px; transition: transform .2s, background .2s, color .2s; }
.ti-gen.on { background: var(--text); color: #fff; transform: scale(1.06); }
.ti-ideal { margin: 22px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--gray); color: var(--muted); font-size: 13px; text-align: center; transition: background .3s, color .3s; }
.ti-ideal b { color: var(--text); font-size: 15px; }
.ti-ideal.on { background: #eaf3fd; color: #24496b; }
.ti-ideal.on b { color: #2f5f8a; }
.ti-opts { display: grid; gap: 8px; margin-bottom: 14px; }
.ti-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--gray); text-align: left; color: var(--text); box-shadow: inset 0 0 0 1.5px transparent; animation: tiStep .4s cubic-bezier(.2, .9, .25, 1) backwards; animation-delay: calc(var(--i) * .05s); transition: box-shadow .2s, background .2s, transform .15s; }
.ti-opt:active { transform: scale(.98); }
.ti-opt span { flex: 1; }
.ti-opt b { display: block; font-size: 15px; font-weight: 600; }
.ti-opt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 300; }
.ti-opt i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9c9cf; transition: box-shadow .2s, background .2s; }
.ti-opt.multi i { border-radius: 7px; }
.ti-opt.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 4px 14px rgba(0, 119, 237, .12); }
.ti-opt.on i { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
/* итог */
.ti-res { text-align: center; padding-top: 6px; }
.ti-badge { width: 74px; height: 74px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2f5f8a, #5b8fc0); box-shadow: 0 10px 30px rgba(47, 95, 138, .35); animation: tiBadge .7s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.ti-badge .ti-ico.big { width: 36px; height: 36px; animation: tiSpin 1.1s cubic-bezier(.3, 1, .5, 1) 1; }
@keyframes tiBadge { from { transform: scale(.4) rotate(-60deg); opacity: 0; } }
.ti-res > small { color: var(--muted); font-size: 13px; }
.ti-sum { margin: 2px 0 8px; font-size: 40px; font-weight: 800; letter-spacing: -1px; color: #2f5f8a; font-variant-numeric: tabular-nums; }
.ti-new { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; margin: 4px 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 13px; }
.ti-new span { width: 100%; color: var(--muted); }
.ti-new b { font-size: 20px; font-weight: 700; }
.ti-new s { color: var(--old); }
/* в корзине */
.ti-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: #eaf7ee; color: #12632e; font-size: 12px; line-height: 1.35; }
.ti-line .ti-ico { width: 16px; height: 16px; }
.ti-line > span:not(.ti-ico) { flex: 1; min-width: 0; }
.ti-line b { display: block; font-size: 13px; }
.ti-line .ti-x { width: 22px; height: 22px; background: rgba(18, 99, 46, .1); }
.ti-line .ti-x::before, .ti-line .ti-x::after { width: 9px; }
.line .sum s { margin-right: 6px; color: var(--old); font-size: 12px; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .ti-btn::after, .ti-btn .ti-ico, .ti-step, .ti-opt, .ti-badge, .ti-badge .ti-ico.big, .ti-on { animation: none; } }
.pane.prod { padding: 0 0 90px; }
.pane.prod .pbody h1 { font-size: 21px; margin-bottom: 14px; }
.pane.prod .gallery { margin: 8px 8px 0; }
.pane.prod .pbody { padding: 16px 12px 0; }
.pane.prod .price { font-size: 20px; margin: 16px 0 12px; }
.pane.prod .crumbs { padding: 12px 12px 0; font-size: 12px; }
.pane.prod .pback { margin: 12px 12px 0; }
.pane.prod .foot { margin: 24px 12px 0; }
.pane.prod .buy { height: 46px; }
.pane.entering.prod .gallery, .pane.entering.prod .pbody, .pane.entering.prod .crumbs, .pane.entering.prod .pback { animation: prodIn .55s backwards cubic-bezier(.2, .8, .2, 1); }
.pane.entering.prod .pbody { animation-delay: .08s; }
@keyframes prodIn { from { opacity: 0; transform: translateY(18px); } }
.pane.prod { transition: opacity .16s ease-in, transform .16s ease-in; }
.pane.prod.leaving, .pane.leaving.prod { opacity: 0; transform: translateX(-14px); }
.shop-wrap { margin: 36px var(--gutter) 0; }
.shop-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--radius); background: #eaf3fd; color: #24496b; text-align: left; transition: transform .15s, background .3s; }
.shop-head:active { transform: scale(.98); }
.shop-head .pt-ico { width: 30px; margin: 0; flex: none; transition: transform .6s cubic-bezier(.2,.9,.25,1); }
.sh-t { flex: 1; }
.sh-t b { display: block; font-size: 17px; font-weight: 600; }
.sh-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .7; }
.chev { flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .45s cubic-bezier(.2,.9,.25,1); }
.shop-wrap.open .chev { transform: translateY(2px) rotate(225deg); }
.shop-wrap.open .shop-head .pt-ico { transform: rotate(360deg) scale(1.12); }
.shop-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.9,.25,1); }
.shop-wrap.open .shop-body { grid-template-rows: 1fr; }
.shop-in { overflow: hidden; min-height: 0; }
.shop { display: grid; gap: 10px; padding-top: 10px; }
.cart-shop { margin-top: 26px; margin-bottom: 8px; }
.orders-wrap { margin-top: 12px; }
.orders-wrap .shop-head { background: var(--gray); color: var(--text); }
.orders-wrap #ordersBox { padding-top: 10px; }
.orders-wrap .order { margin: 0 0 10px; }
.orders-wrap .sub { margin: 4px 0 6px; }
.shop .reward { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.9,.25,1); }
.shop-wrap.open .shop .reward { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .06s); }
.shop-wrap.open .shop .reward:active { transform: scale(.98); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .shop-body, .shop .reward, .chev, .shop-head .pt-ico { transition: none; } }
.rw-bar { grid-column: 1 / -1; height: 5px; margin-top: 2px; border-radius: 3px; background: rgba(36, 73, 107, .12); overflow: hidden; }
.rw-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #6896c4, #24496b); transform-origin: left; }
.shop-wrap.open .shop .reward .rw-bar i { animation: rwFill 1s calc(.3s + var(--i) * .06s) backwards cubic-bezier(.2, .9, .25, 1); }
@keyframes rwFill { from { transform: scaleX(0); } }
.rw-cap { grid-column: 1 / -1; margin-top: -8px; font-size: 11px; color: var(--muted); }
.reward.ok .rw-cap { color: #1f9d4c; font-weight: 500; }
.reward.ok .rw-bar i { background: linear-gradient(90deg, #35c46a, #1f9d4c); }
.reward { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border: 0; border-radius: var(--radius); background: var(--gray); text-align: left; color: var(--text); transition: transform .15s, opacity .15s; }
.reward:active { transform: scale(.98); opacity: .85; }
.rw-pic { width: 64px; height: 64px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.rw-pic img { width: 100%; height: 100%; object-fit: contain; }
.rw-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.rw-t small { display: block; margin-top: 3px; color: var(--muted); font-weight: 300; font-size: 12px; }
.rw-p { font-size: 14px; font-weight: 600; color: #24496b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-p.low { color: var(--muted); }
.rw-p .pt-ico { width: 16px; margin-right: 4px; vertical-align: -1.5px; }
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0); display: flex; align-items: flex-end; transition: background .25s; }
.sheet-bg.on { background: rgba(0,0,0,.38); }
.sheet { width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px var(--gutter) calc(18px + env(safe-area-inset-bottom)); background: #fff; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.9,.25,1); }
.sheet-bg.on .sheet { transform: none; }
.sh-pic { width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 24px; background: var(--gray); display: grid; place-items: center; overflow: hidden; }
.sh-pic img { width: 100%; height: 100%; object-fit: contain; }
.sheet h3 { margin: 0 0 4px; text-align: center; font-size: 22px; font-weight: 600; }
.sheet .sub { margin: 0 0 16px; }
.sh-bal { margin: 14px 0 12px; text-align: center; font-size: 13px; color: var(--muted); }
.sh-bal b { color: #24496b; }
.buy:disabled { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-bg { transition: none; } }
.order { margin: 0 var(--gutter) 10px; padding: 16px; background: var(--gray); border-radius: var(--radius); }
.order .head { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
/* админ-панель: вход в профиле, вкладки и плитки обзора; остальные разделы пока заглушки */
.adm-link { display: flex; align-items: center; gap: 12px; margin: 16px var(--gutter) 0; padding: 12px 14px; border-radius: var(--radius); background: #1d1d1f; color: #fff; transition: transform .15s; }
.adm-link:active { transform: scale(.98); }
.adm-link b { display: block; font-size: 15px; font-weight: 600; }
.adm-link em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; opacity: .65; }
.adm-link .chev { margin-left: auto; color: #fff; opacity: .7; transform: rotate(-45deg); }
.adm-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .12); font-size: 19px; }
.adm { padding: 8px var(--gutter) 24px; }
.adm h1 { margin: 6px 0 2px; font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.adm h1, .adm .sub { text-align: left; }
.adm .sub { margin: 0 0 14px; }
.adm-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-tabs .chip { flex: 1 0 auto; padding: 6px 12px; white-space: nowrap; }
.adm-body { margin-top: 14px; }
.adm-body.in { animation: ipkUp .4s cubic-bezier(.2, .9, .25, 1); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-t { padding: 16px 14px; border-radius: var(--radius); background: var(--gray); }
.adm-t b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.adm-t span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.adm-soon { padding: 36px 20px; border-radius: var(--radius); background: var(--gray); text-align: center; }
.adm-soon i { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; background: #fff; font-size: 28px; font-style: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.adm-soon b { display: block; font-size: 18px; font-weight: 600; }
.adm-soon p { margin: 6px 0 10px; font-size: 14px; line-height: 1.45; color: var(--label); }
.adm-soon small { font-size: 11px; color: var(--muted); }
/* история баллов: строка — причина и дата слева, сумма справа (зелёная «+», красная «−») */
.pl { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--gray); }
.pl-t b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pl-t small { display: block; margin-top: 2px; font-size: 11px; font-weight: 300; color: var(--muted); }
.pl-d { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-d.up { color: #1f9d4c; }
.pl-d.down { color: #c23030; }
/* статус заказа: плашка и шкала из четырёх шагов */
.o-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 300; }
.o-st { padding: 3px 9px; border-radius: 10px; background: #e8e8ee; color: var(--label); font-size: 11px; font-weight: 600; }
.o-st.st-confirmed { background: #e3efff; color: #0a5fc4; }
.o-st.st-ready { background: #fff1d6; color: #9a5b00; }
.o-st.st-done { background: #e3f6e9; color: #1f8f47; }
.o-st.st-canceled { background: #fde6e6; color: #c23030; }
.o-steps { display: flex; margin-top: 14px; }
.o-steps i { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.o-steps i::before { content: ''; position: absolute; top: 4px; right: 50%; width: 100%; height: 2px; background: #dcdce2; }
.o-steps i:first-child::before { display: none; }
.o-steps b { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #dcdce2; }
.o-steps em { font-style: normal; font-size: 10px; color: var(--muted); }
.o-steps i.past::before, .o-steps i.now::before { background: #24496b; }
.o-steps i.past b, .o-steps i.now b { background: #24496b; }
.o-steps i.now b { box-shadow: 0 0 0 4px rgba(36, 73, 107, .18); }
.o-steps i.now em { color: var(--text); font-weight: 600; }
.o-cancel { margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: #fde6e6; color: #c23030; font-size: 12px; font-weight: 500; text-align: center; }
.order small { display: block; margin-top: 4px; color: var(--muted); font-weight: 300; font-size: 12px; line-height: 1.5; }

/* ---------- анимации (как на айпарк.рф: появление блоков при прокрутке, зум картинки) ---------- */
/* .rv вешает app.js, когда блок ещё не виден; .in — когда он вошёл в экран */
.rv { opacity: 0; transform: translateY(24px); transition-property: opacity, transform; transition-timing-function: ease; transition-duration: .5s; }
.rv.t-title { transition-duration: 1.2s; }
.rv.t-text { transition-duration: .7s; }
.rv.in { opacity: 1; transform: none; }

.pic img, .slides img { transition: transform .4s; }
.model:active, .line:active { transform: scale(.98); transition: transform .15s; }
@media (hover: hover) {
  .model:hover .pic img, .tile:hover .pic img { transform: scale(1.09); }
}
@media (hover: none) {
  .model:active .pic img, .tile:active .pic img { transform: scale(1.06); }
}
.model, .brand, .line { transition: transform .25s; }
.buy { transition: opacity .15s, transform .15s; }
.buy:active { transform: scale(.98); opacity: .85; }
.chip, .sw { transition: border-color .15s, box-shadow .15s, opacity .15s, color .25s; }
.sw.on::after { animation: pop .25s ease; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pic img, .model, .brand, .socials a, .line { transition: none; }
}

.splash { padding: 120px 24px; text-align: center; color: var(--muted); font-weight: 300; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: rgba(28, 28, 32, .78); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 28px -6px rgba(0, 0, 0, .4); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 560px) {
  body { max-width: 560px; margin: 0 auto; }
}

/* iPack PRO в корзине */
.ip-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 10px; border-radius: 10px; background: #e8f0fe; color: #1d3f8f; font-size: 12px; line-height: 1.35; }
.ip-line > span:not(.ip-ico) { flex: 1; min-width: 0; }
.ip-line b { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ip-line b em { font-style: normal; white-space: nowrap; }
.ip-line .ti-x { width: 22px; height: 22px; background: rgba(29, 63, 143, .1); }
.ip-line .ti-x::before, .ip-line .ti-x::after { width: 9px; }
.ip-ico { flex: none; width: 16px; height: 16px; border-radius: 4px; background: #1d3f8f; }
.ip-add { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px dashed rgba(29, 63, 143, .5); border-radius: 10px; background: transparent; color: #1d3f8f; font: inherit; font-size: 12px; text-align: left; }

/* Trade-In — вторая плашка, выглядывающая из-под плашки цены: уже её и сдвинута под неё, как стопка карточек */
.ti-btn + .price.two, .ti-on + .price.two { position: relative; z-index: 2; margin-top: -16px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); }
.ti-btn:has(+ .price.two), .ti-on:has(+ .price.two) { position: relative; z-index: 1; width: 100%; box-sizing: border-box; margin: 22px 0 0; padding: 10px 12px 26px; gap: 10px; border-radius: 13px; }
.ti-btn:has(+ .price.two) .ti-ico { width: 22px; height: 22px; }
.ti-btn:has(+ .price.two) .ti-t b { font-size: 13.5px; }
.ti-btn:has(+ .price.two) .ti-t small { margin-top: 1px; font-size: 11px; }

/* цена после применения Trade-In: один раз «вспыхивает» */
.ti-pop { display: inline-block; color: #12632e; animation: tiPricePop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tiPricePop { 0% { transform: scale(.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* корзина: iPack и Trade-In выглядывают из-под карточки товара стопкой плашек */
.lw { margin: 0 0 12px; }
.lw .line { margin-bottom: 0; position: relative; z-index: 5; }
.lw.has-stk .line { box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); }
.stk { position: relative; z-index: calc(4 - var(--n, 0)); display: flex; align-items: center; gap: 8px; width: auto; margin: -16px var(--gutter) 0; padding: 24px 8px 9px 12px; border: 0; border-radius: 13px; font: inherit; font-size: 12px; line-height: 1.35; text-align: left; }
.stk > span:not(.ti-ico) { flex: 1; min-width: 0; }
.stk b { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.stk b em { font-style: normal; white-space: nowrap; }
.stk .ti-x { width: 22px; height: 22px; }
.stk .ti-x::before, .stk .ti-x::after { width: 9px; }
.stk.ip { background: #e8f0fe; color: #1d3f8f; }
.stk.ip .ti-x { background: rgba(29, 63, 143, .1); }
.stk.ti { background: #eaf7ee; color: #12632e; }
.stk.ti .ti-x { background: rgba(18, 99, 46, .1); }
.stk.ti .ti-ico { width: 16px; height: 16px; flex: none; }
.stk.add { display: block; width: calc(100% - 2 * var(--gutter)); background: #eef2fb; color: #1d3f8f; }

/* Apple в левой колонке: вместо картинки — логотип, подпись текстом */
.ri-logo { display: grid; place-items: center; width: 46px; height: 46px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ri-logo .al { width: 30px; height: 30px; }
.ri.on .ri-logo { transform: scale(1.14); }
.ri:active .ri-logo { transform: scale(.88); transition-duration: .12s; }
.stk.add { display: flex; align-items: center; gap: 8px; padding: 22px 8px 8px 12px; }
.stk.add .add-go { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; }
.stk.add .ipk-i { flex: none; width: 20px; height: 20px; font-size: 12px; }

/* панель менеджера */
.mg-st { margin-bottom: 10px; }
.mg-search { display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--gray); font: inherit; font-size: 15px; outline: none; box-sizing: border-box; }
.mg-card { margin-bottom: 10px; padding: 14px; border-radius: var(--radius); background: var(--gray); }
.mg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-top b { font-size: 16px; font-weight: 600; }
.mg-sub { margin: 3px 0 8px; font-size: 12px; color: var(--muted); }
.mg-sub em { font-style: normal; color: var(--label); }
.mg-items { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
.mg-items li { padding: 3px 0; }
.mg-items small { color: var(--muted); }
.mg-tag { display: block; width: fit-content; margin-top: 3px; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 500; }
.mg-tag.ip { background: #e8f0fe; color: #1d3f8f; }
.mg-tag.ti { background: #eaf7ee; color: #12632e; }
.mg-sum { margin-top: 8px; font-size: 17px; font-weight: 600; }
.mg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.mg-acts button { padding: 10px 6px; border: 0; border-radius: 10px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.mg-acts button.on { background: #1d1d1f; color: #fff; }
.mg-acts button.bad { color: #c0392b; }
.mg-acts button:disabled { opacity: .5; }
.mg-empty { text-align: center; margin: 24px 0; }
.mg-cl { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 8px; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--gray); font: inherit; text-align: left; }
.mg-cl b { display: block; font-size: 15px; font-weight: 600; }
.mg-cl em { font-style: normal; font-weight: 400; color: var(--muted); }
.mg-cl small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.mg-cl i { flex: none; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-sheet { max-height: 88vh; overflow-y: auto; }
.mg-csub { margin: 2px 0 10px; text-align: left; }
.mg-bal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: #eaf3fd; color: #24496b; }
.mg-bal b { font-size: 24px; font-weight: 600; }
.mg-form { display: grid; gap: 8px; margin-bottom: 14px; }
.mg-form input { padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--gray); font: inherit; font-size: 15px; outline: none; box-sizing: border-box; width: 100%; }
.mg-form small { color: var(--muted); font-size: 11px; }
.mg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-sheet h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.mg-led { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.mg-led li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mg-led small { display: block; color: var(--muted); font-size: 11px; }
.mg-led b.p { color: #12632e; }
.mg-led b.m { color: #c0392b; }
.adm-tabs { flex-wrap: nowrap; }
.stk.add.tb { background: #eaf7ee; color: #12632e; }

.stk.ip { display: block; padding: 24px 12px 9px 12px; }
.stk.ip .ipr { display: flex; align-items: center; gap: 10px; }
.stk.ip .ipr em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 13px; white-space: nowrap; }
.stk.ip.off .ipr em { opacity: .55; }
.stk.ip .ck { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.6px solid rgba(29, 63, 143, .45); background: transparent; transition: background .2s, border-color .2s; }
.stk.ip .ck.on { background: #1d3f8f; border-color: #1d3f8f; }
.stk.ip .ck.on::after { content: ''; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stk.ip .ipn { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.stk.ip .ipn b { display: block; font-size: 13px; }
.stk.ip .chev { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.stk.ip.open .chev { transform: rotate(-135deg) translateY(-2px); }
.stk.ip .ipk-i { flex: none; width: 20px; height: 20px; font-size: 12px; }
.stk.ip .ipl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.stk.ip.open .ipl { grid-template-rows: 1fr; }
.stk.ip .ipl ul { overflow: hidden; margin: 0; padding: 0 0 0 32px; list-style: none; min-height: 0; }
.stk.ip.open .ipl ul { padding-top: 8px; }
.stk.ip .ipl li { position: relative; padding: 2px 0 2px 14px; font-size: 12px; }
.stk.ip .ipl li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.stk.ip .ipl ul { padding-left: 2px; }
.stk.ip { padding-right: 8px; }
.stk.ip .ipr { gap: 8px; }
.stk.ip .ck { width: 22px; height: 22px; }
.stk.ip:has(+ .stk) { padding-bottom: 24px; }

.stk.ip .ck { border: 1.6px solid rgba(29, 63, 143, .5); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(29, 63, 143, .18); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .22s, border-color .22s, box-shadow .22s; -webkit-tap-highlight-color: transparent; }
.stk.ip .ck:active { transform: scale(.86); }
.stk.ip .ck.on { border-color: transparent; background: linear-gradient(145deg, #3b72f0, #1d3f8f); box-shadow: 0 3px 9px rgba(29, 63, 143, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.stk.ip .ck.on::after { left: 7px; top: 3.4px; width: 5.5px; height: 10px; border-width: 0 2.2px 2.2px 0; animation: ckPop .32s cubic-bezier(.3, 1.6, .5, 1); }
.stk.ip .ck:not(.on) { animation: ckPulse 2.2s ease-out infinite; }
@keyframes ckPop { from { transform: rotate(45deg) scale(0); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
@keyframes ckPulse { 0% { box-shadow: 0 0 0 0 rgba(29, 63, 143, .35); } 70%, 100% { box-shadow: 0 0 0 8px rgba(29, 63, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .stk.ip .ck:not(.on), .stk.ip .ck.on::after { animation: none; } }

.stk.ip { padding: 20px 8px 6px 12px; }
.stk.ip:has(+ .stk) { padding-bottom: 20px; }
.stk.ip .ck.on::after { left: 7.2px; top: 2.9px; }

.stk.ip .ck.on::after { left: 0; top: 0; width: 100%; height: 100%; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: ckPop2 .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ckPop2 { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.stk.ip .ipl ul.ipx { padding-left: 2px; padding-right: 2px; }
.stk.ip.open .ipl ul.ipx { padding-top: 10px; }
.stk.ip .ipx li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed rgba(29, 63, 143, .18); }
.stk.ip .ipx li::before { display: none; }
.stk.ip .ipx li span { flex: 1; min-width: 0; }
.stk.ip .ipx li s { font-size: 11.5px; opacity: .5; }
.stk.ip .ipx li b { font-size: 13px; white-space: nowrap; }
.stk.ip .ipx li.gf b { padding: 2px 8px; border-radius: 99px; background: #1d3f8f; color: #fff; font-size: 11px; letter-spacing: .02em; }
.stk.ip .ipx li.sum { border: 0; padding-top: 9px; font-weight: 700; }
.stk.ip .ipx li.sum s { font-weight: 400; }
.stk.ip .ipx li.sum b { color: #0b7a3b; }
.stk.ip .ipx li.gf2 b { color: #0b7a3b; }

.stk.ip .ck, .stk.ip .ck:not(.on) { position: relative; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; animation: none; transition: none; }
.stk.ip .ck:active { transform: none; }
.stk.ip .ck::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(29, 63, 143, .45); }
.stk.ip .ck.on::before { background: #1d3f8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; box-shadow: none; }
.stk.ip .ck::after, .stk.ip .ck.on::after { content: ''; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 50%; border: 1.5px solid transparent; background: none; transform: none; animation: none; }
.stk.ip .ck.on::after { border-color: #1d3f8f; }
.stk.ip .ipx li:last-child { border-bottom: 0; }

button.points { border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.points .chev { display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 9px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(-45deg); opacity: .7; }
.pt-sheet .pt-tabs { justify-content: center; margin-bottom: 14px; }
.pt-sheet [hidden] { display: none; }
.pt-sheet .buy.alt { margin-top: 14px; }

.stk.ip .ck, .stk.ip .ck:not(.on) { width: 25px; height: 25px; margin-right: -1.5px; border: 1.6px solid rgba(29, 63, 143, .45); background: transparent; }
.stk.ip .ck.on { border-color: #1d3f8f; background: #1d3f8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.stk.ip .ck::before, .stk.ip .ck::after, .stk.ip .ck.on::before, .stk.ip .ck.on::after { content: none; }
.stk.ip .ck, .stk.ip .ck:not(.on) { box-sizing: border-box; margin-right: -2px; border-width: 2px; transform: none; }
.stk.ip .ipr { gap: 8px; }

.info-wrap { margin-top: 12px; }
.info-t { padding: 14px 4px 4px; font-size: 14px; line-height: 1.45; color: var(--text); }
.info-t h5 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.info-t h5:first-child { margin-top: 2px; }
.info-t p { margin: 0 0 6px; color: #555; }
.info-t ul { margin: 0 0 6px; padding-left: 18px; color: #555; }
.info-t li { margin: 2px 0; }
.info-t a { color: var(--blue); text-decoration: none; }
.info-t ul.ct { list-style: none; padding: 0; }
.info-t ul.ct li { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--gray); }
.info-t ul.ct b { display: block; color: var(--text); }
.info-t ul.ct a { display: block; margin-top: 2px; font-weight: 600; }
.info-t .ct-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.info-t .ct-l a { padding: 8px 14px; border-radius: 99px; background: var(--gray); color: var(--text); font-weight: 500; }
.info-t.ct-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px var(--gutter) 0; padding: 0; }
.info-t.ct-main a { flex: 1 1 calc(50% - 4px); padding: 12px 14px; border-radius: 14px; background: var(--gray); color: var(--text); text-align: center; font-size: 14px; font-weight: 500; text-decoration: none; }
.ri .ri-logo, .ri .ri-logo .al { color: var(--text); fill: var(--text); }

.co-sheet .co-f { display: block; margin: 0 0 12px; }
.co-sheet .co-f > span { display: block; margin: 0 0 6px 2px; font-size: 13px; font-weight: 500; color: #555; }
.co-sheet .co-f em { font-style: normal; font-weight: 400; color: #999; }
.co-sheet input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--gray); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.co-sheet input:focus { box-shadow: 0 0 0 2px rgba(0, 113, 227, .45); }
.co-sheet .co-st { display: flex; gap: 8px; }
.co-sheet .co-st .chip { flex: 1; padding: 13px 8px; }
.co-sheet .co-err { margin: 0 0 10px; text-align: center; color: #d12f2f; font-size: 14px; }
.co-sheet .buy.alt { margin-top: 10px; }
.co-sheet [hidden] { display: none; }

/* кабинет: «‹ айпарк» вместо маленького аватара */
.who.bk { flex: none; gap: 4px; height: 40px; margin-left: -6px; padding-right: 10px; }
.bk-ch { width: 11px; height: 11px; margin: 0 2px 0 6px; border-left: 3px solid var(--text); border-bottom: 3px solid var(--text); border-radius: 1px; transform: rotate(45deg) translate(1px, -1px); }
.bk-logo { height: 20px; width: auto; }
.who.bk:active { opacity: .5; }
.bk-logo { height: 22.1px; }

/* страница айфона: окно фото ниже на 25%, сам телефон прежнего размера (пустые края квадрата обрезаются) */
.gallery.wide .slides > div { aspect-ratio: 1 / .75; padding: 0; position: relative; overflow: hidden; }
.gallery.wide .slides img { position: absolute; left: 20px; top: 50%; width: calc(100% - 40px); max-width: none; height: auto; max-height: none; aspect-ratio: 1; margin-top: calc(-50% + 20px); }
/* iPhone: плашка цены посередине, Trade-In над ней и iPack PRO под ней — стопка из трёх */
.price.solo { position: relative; z-index: 2; display: block; margin: 22px 0 0; padding: 14px 12px; border-radius: 16px; background: var(--gray); text-align: center; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); }
.price.solo b { font-size: 30px; font-weight: 600; letter-spacing: -.4px; }
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -16px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { position: relative; z-index: 1; width: 100%; box-sizing: border-box; margin: 22px 0 0; padding: 10px 12px 26px; gap: 10px; border-radius: 13px; }
.ti-btn:has(+ .price.solo) .ti-ico { width: 22px; height: 22px; }
.ti-btn:has(+ .price.solo) .ti-t b { font-size: 13.5px; }
.ti-btn:has(+ .price.solo) .ti-t small { margin-top: 1px; font-size: 11px; }
.ip-btn { position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: -16px 0 14px; padding: 26px 12px 11px; border: 0; border-radius: 13px; text-align: left; color: #fff; font: inherit; background: linear-gradient(120deg, #0f1f4d 0%, #1d3f8f 60%, #3b63c4 100%); box-shadow: 0 6px 18px rgba(29, 63, 143, .28); transition: transform .15s; }
.ip-btn:active { transform: scale(.98); }
.ip-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%); transform: translateX(-100%); animation: tiSheen 3.2s ease-in-out infinite 1.6s; }
.ip-ico2 { flex: none; width: 24px; height: 24px; }
.ip-btn .ti-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-btn .ti-t b { font-size: 13.5px; font-weight: 600; }
.ip-btn .ti-t small { margin-top: 1px; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .78); }
.ip-btn .chev { flex: none; color: #fff; transform: rotate(-45deg); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .ip-btn::after { animation: none; } }
/* iPack PRO — тех же размеров, что Trade-In сверху */
.ip-btn { gap: 10px; padding: 26px 12px 10px; }
.ip-ico2 { width: 22px; height: 22px; }
.ip-btn .ti-t b { font-size: 13.5px; }
.ip-btn .ti-t small { margin-top: 1px; font-size: 11px; line-height: 1.3; }
.ip-btn .ti-t b, .ip-btn .ti-t small { line-height: normal; }


.price.solo { cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.price.solo:active { transform: scale(.97); }

.stk.ip { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* корзина: плашки iPack и Trade-In стопкой за карточкой, как в референсе — каждая следующая уже предыдущей и выглядывает ниже */
.stk { margin-left: calc(var(--gutter) + 14px * (var(--n, 0) + 1)); margin-right: calc(var(--gutter) + 14px * (var(--n, 0) + 1)); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); }
.stk.add { width: auto; }
/* плашка iPack PRO одной высоты с Trade-In и без него; верхние 16px скрыты под карточкой, поэтому в видимой части строка стоит ровно по центру */
.stk.ip { padding: 28px 8px 12px 12px; }
.stk.ip:has(+ .stk) { padding-bottom: 12px; }
.stk.ip .ipr { min-height: 25px; }
.co-sheet [hidden] { display: none !important; }
.co-st { flex-wrap: wrap; }
.co-st + .co-st { margin-top: 8px; }

/* AirTag: видео с сайта Apple, где сигнал расходится кругами */
.pingv { margin: 22px 0 6px; overflow: hidden; border-radius: var(--radius); background: var(--gray); }
.pingv video { display: block; width: 100%; height: auto; }
.pingv-t { padding: 4px 16px 18px; text-align: center; }
.pingv-t b { display: block; font-size: 17px; font-weight: 600; }
.pingv-t small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.pingv { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }

/* AirTag: в галерее вместо фото видео с сайта Apple (фон белый, поэтому и плашка белая) */
.gallery.vid { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.gallery.vid .slides > div { position: relative; padding: 0; }
.gallery.vid .slides video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* AirTag: без рамки, брелок с ключом по центру кадра (в самом видео он сдвинут вверх и вправо) */
.gallery.vid { background: transparent; box-shadow: none; border-radius: 0; }
.gallery.vid .slides video { transform: translate(-2.5%, 9%); }
.gallery.vid .slides { -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }

/* ---------- жидкое стекло, ещё объёмнее ---------- */
/* капсула: матовое стекло с тонкой яркой кромкой сверху и мягким углублением */
.chips { background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .1), inset 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(255, 255, 255, .95), 0 1px 0 rgba(255, 255, 255, .95), 0 8px 18px -12px rgba(20, 30, 60, .25); }
/* линза: зеркальный блик сверху-слева, дисперсия по краям (розовый слева, голубой справа), мягкое свечение внутри */
.gl-ind { overflow: hidden;
  background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .22) 38%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .08) 58%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(2.5px) saturate(250%) brightness(1.1) contrast(1.04); backdrop-filter: blur(2.5px) saturate(250%) brightness(1.1) contrast(1.04);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, 1), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .75),
    inset 0 -5px 9px -5px rgba(255, 255, 255, .85),
    inset 0 0 16px rgba(255, 255, 255, .5),
    0 0 0 .5px rgba(0, 0, 0, .1), 0 8px 20px -5px rgba(20, 30, 70, .3), 0 2px 4px rgba(0, 0, 0, .1); }
/* глянцевая полоса вдоль верха линзы */
.gl-ind::after { content: ''; position: absolute; left: 9%; right: 9%; top: 2px; height: 42%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); opacity: .85; }
.gl-ind.drag { box-shadow: inset 2px 2px 1px -.5px #fff, inset -2px -2px 1px -.5px rgba(255, 255, 255, .9),
    inset 0 0 20px rgba(255, 255, 255, .65),
    0 0 0 .5px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .1), 0 20px 30px -8px rgba(20, 20, 60, .38); }

/* ---------- линза с настоящим преломлением ---------- */
/* линза лежит поверх подписей: внутри копия подписей, искажённая у краёв фильтром; заливка почти непрозрачная, чтобы оригинал под ней не двоился */
.gl-ind { z-index: 2; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .2) 36%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, .42) 100%), #f6f6f9; }
.gl-ind.drag { background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .3) 36%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .14) 58%, rgba(255, 255, 255, .55) 100%), #f9f9fc; }
.gl-view { position: absolute; inset: 0; display: block; }
.gl-clone { position: absolute; left: 0; top: 0; display: block; pointer-events: none;
  transition: transform .6s linear(0, .09 4%, .33 10%, .62 17%, .84 25%, .94 34%, .98 44%, .995 58%, 1); }
.gl-ind.drag .gl-clone { transition: none; }
.gl-t { position: absolute; display: grid; place-items: center; box-sizing: border-box; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--text); }
.gl-t.on { color: var(--blue); font-weight: 600; }
.gl-t.dis { color: #c4c4c4; }
.gl-t.near { color: var(--blue); }
.gl-ind.drag .gl-t.on:not(.near) { color: var(--text); font-weight: 500; }
.pbody .opt .chips .gl-t { padding: 6px 6px; white-space: normal; line-height: 1.15; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .gl-clone { transition: none; } }
.gl-ind, .gl-ind * { font-style: normal; }

/* панель переключателя без теней: плоская капсула, объём остаётся только у линзы */
.chips { box-shadow: none; }
/* бусины цвета без тени под ними: остаётся только тонкая кромка, чтобы светлый цвет не терялся на фоне */
.sw::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
/* тень внутри бусины: затемнение у нижнего края, чтобы цвет выглядел объёмным, ничего снаружи */
.sw::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), inset 0 -5px 8px -2px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .3); }
/* AirTag: фото не показываем, пока играет видео не началось, и видео плавно проявляется на месте фото, без скачка; если видео не загрузилось, остаётся фото */
.gallery.vid .slides > div > img { opacity: 0; }
.gallery.vid .slides > div.nov > img { opacity: 1; }
.gallery.vid .slides video { opacity: 0; transition: opacity .6s ease; }
.gallery.vid .slides video.rdy { opacity: 1; }
/* iPack PRO на странице iPhone: тот же светло-голубой, что в корзине, без блика и тени */
.ip-btn { background: #e8f0fe; color: #1d3f8f; box-shadow: none; }
.ip-btn::after { content: none; animation: none; }
.ip-btn .ip-ico2 { stroke: #1d3f8f; }
.ip-btn .ti-t small { color: rgba(29, 63, 143, .8); }
.ip-btn .chev { color: #1d3f8f; }
/* стопка Трейд Ин / цена / iPack: там, где плашки касаются цены, углы цены прямые, иначе цвет плашки выглядывает «бугорками» из-за скруглений */
.ti-btn + .price.solo, .ti-on + .price.solo { border-top-left-radius: 0; border-top-right-radius: 0; }
.price.solo:has(+ .ip-btn) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.price.solo.sq { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* верх iPack PRO и низ Трейд Ина прямые: плашки стыкуются с ценой без скруглений */
.ip-btn { border-top-left-radius: 0; border-top-right-radius: 0; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* цена снова со скруглёнными углами */
.ti-btn + .price.solo, .ti-on + .price.solo, .price.solo:has(+ .ip-btn), .price.solo.sq, .price.solo { border-radius: 16px; }
/* iPack PRO заходит под цену так же, как Трейд Ин: плашка скруглена и уходит под карточку цены глубже её скруглений */
.ip-btn { border-radius: 13px; margin-top: -26px; padding-top: 36px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { border-radius: 13px; }
/* итог: низ Трейд Ина и верх iPack PRO прямые и уходят под цену, цена скруглена */
.ip-btn { border-top-left-radius: 0; border-top-right-radius: 0; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* плашки уходят под цену до её середины (цена ~64px, половина ~32px); видимая часть плашек не меняется */
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -32px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { padding-bottom: 42px; }
.ip-btn { margin-top: -32px; padding-top: 42px; }
/* ещё глубже под цену: 48px */
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -48px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { padding-bottom: 58px; }
.ip-btn { margin-top: -48px; padding-top: 58px; }
/* iPack PRO на 5% уже, по центру */
.ip-btn { width: 95%; margin-left: auto; margin-right: auto; }
/* iPack PRO: ширина прежняя, высота на 5% меньше (~112px -> ~106px) */
.ip-btn { width: 100%; margin-left: 0; margin-right: 0; padding-top: 55px; padding-bottom: 7.5px; }
/* iPack PRO ещё на 5% ниже (~106px -> ~101px) */
.ip-btn { padding-top: 52px; padding-bottom: 5.5px; }
/* iPack PRO ещё на 8% ниже (~101px -> ~93px) */
.ip-btn { padding-top: 47px; padding-bottom: 5px; }
/* iPack PRO ниже на ~40% видимой части: выравнивание высот отключено, отступы подобраны под текст */
.ip-btn { min-height: 0; padding-top: 44px; padding-bottom: 4px; }
.ip-btn { padding-top: 40px; padding-bottom: 3px; }
/* iPack PRO +20% к высоте (80px -> ~96px) */
.ip-btn { padding-top: 46px; padding-bottom: 13px; }
/* iPack PRO на странице iPhone: та же плашка, что в корзине, без галочки; прямой верх уходит под цену. Нажатие на цену ничего не делает */
.stk.ip.pdp { z-index: 1; width: auto; margin: -24px 0 14px; padding: 36px 8px 12px 12px; border-top-left-radius: 0; border-top-right-radius: 0; box-sizing: border-box; }
.price.solo { cursor: default; }
.price.solo:active { transform: none; }
/* плашка iPack PRO в закрытом виде на 22% ниже (~73px -> ~57px) */
.stk.ip.pdp { margin-top: -14px; padding: 22px 8px 10px 12px; }
.stk.ip.pdp:has(+ .stk) { padding-bottom: 10px; }
/* Трейд Ин и iPack PRO заходят под цену ровно до её середины (цена 75px, середина ~37px) и там стыкуются прямыми краями; видимая часть iPack ещё на 12% ниже */
.ti-btn + .price.solo, .ti-on + .price.solo { margin-top: -37px; }
.ti-btn:has(+ .price.solo), .ti-on:has(+ .price.solo) { padding-bottom: 47px; }
.stk.ip.pdp { margin-top: -38px; padding: 43px 8px 7px 12px; }
.stk.ip.pdp:has(+ .stk) { padding-bottom: 7px; }
/* текст iPack по центру видимой части: отступ сверху равен заходу под цену, а строка занимает всю видимую часть и центрирует содержимое */
.stk.ip.pdp, .stk.ip.pdp:has(+ .stk) { margin-top: -38px; padding: 38px 8px 0 12px; }
.stk.ip.pdp .ipr { min-height: 38px; align-items: center; }
.stk.ip.pdp .ipl ul.ipx { padding-bottom: 0; }
.stk.ip.pdp.open .ipl ul.ipx { padding-bottom: 10px; }
/* у цены был скрытый нижний отступ 12px: из-за него плашка iPack заходила под цену не на 38px, а на 26px, и текст стоял ниже центра */
.price.solo { margin-bottom: 0; }
.pane.prod .price.solo { margin-bottom: 0; }
/* iPack PRO на странице iPhone: без раскрывашки; слева кликабельная «i», она открывает слайд про iPack */
.stk.ip.pdp { cursor: default; }
.stk.ip.pdp .ipr { gap: 10px; }
.stk.ip.pdp .ipt { display: block; flex: 1; min-width: 0; font-size: 13px; }
.stk.ip.pdp .ipk-i { flex: none; width: 24px; height: 24px; font-size: 14px; border-color: #1d3f8f; background: rgba(29, 63, 143, .08); color: #1d3f8f; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stk.ip.pdp { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stk.ip.pdp:active { opacity: .85; }
/* длинное имя: приветствие переносится на вторую строку (дальше многоточие), а у очень длинного ещё и чуть мельче; короткое остаётся в одну строку */
.who-t b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.who-t.lg b { font-size: 13.5px; }
.who-t.xl b { font-size: 13px; line-height: 1.2; }
/* кнопка возврата в кабинете: чёрная таблетка, как корзина с товаром; логотип белый и на 11% меньше (22.1px -> 19.7px) */
.who.bk { flex: none; margin: 0 auto 0 0; height: 40px; gap: 7px; padding: 0 14px 0 12px; border-radius: 20px; background: var(--text); color: #fff; }
.who.bk .bk-ch { margin: 0 2px 0 3px; border-color: #fff; }
.who.bk .bk-logo { height: 19.7px; filter: brightness(0) invert(1); }
.who.bk:active { opacity: .8; }
/* надпись на кнопке возврата; логотип ещё на 20% меньше (19.7px -> 15.8px) */
.who.bk .bk-logo { height: 15.8px; }
.who.bk .bk-t { font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: #fff; }
.who.bk .bk-ch { display: none; }
.who.bk { padding: 0 16px 0 14px; }
/* число товаров внутри сумки, а не отдельным кружком рядом */
.cp-bag { position: relative; display: block; flex: none; line-height: 0; }
.cart-pill.full .cp-bag img { height: 23px; }
.cart-pill.full .cp-n { position: absolute; left: 0; right: 0; top: 15px; transform: translateY(-50%); display: block; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: #fff; text-align: center; font-size: 10.5px; line-height: 1; font-weight: 700; }

/* ---------- заставка при открытии (≈3 с) ---------- */
html.intro-on, html.intro-on body { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 10000; background: #0a0406; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  clip-path: circle(150% at 50% calc(46% - 50px)); color: #fff; }
#intro * { box-sizing: border-box; }
#intro.out { pointer-events: none; animation: inIris .78s cubic-bezier(.65, 0, .2, 1) forwards; }
#intro.out .in-stage { animation: inStageOut .62s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes inIris { from { clip-path: circle(150% at 50% calc(46% - 50px)); } to { clip-path: circle(0% at 50% calc(46% - 50px)); } }
@keyframes inStageOut { to { scale: .55; opacity: 0; } }
@keyframes inFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes inSpin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* фон: три мягких цветных пятна медленно плывут */
.in-bg { position: absolute; inset: 0; animation: inFade 1s both; }
.in-bg i { position: absolute; border-radius: 50%; width: 95vmax; height: 95vmax; will-change: transform; }
.in-bg .b1 { left: 50%; top: calc(46% - 50px); margin: -60vmax 0 0 -60vmax; width: 120vmax; height: 120vmax; background: radial-gradient(circle, rgba(140, 32, 56, .55), rgba(140, 32, 56, 0) 62%); animation: inDriftA 4.6s ease-in-out infinite alternate; }
.in-bg .b2 { right: -42vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(96, 20, 38, .6), rgba(96, 20, 38, 0) 62%); animation: inDriftB 5.4s ease-in-out infinite alternate; }
.in-bg .b3 { left: -10vmax; bottom: -55vmax; background: radial-gradient(circle, rgba(47, 95, 138, .7), rgba(47, 95, 138, 0) 62%); animation: inDriftC 4s ease-in-out infinite alternate; }
@keyframes inDriftA { to { transform: translate(26vmax, 18vmax) scale(1.12); } }
@keyframes inDriftB { to { transform: translate(-24vmax, -20vmax) scale(.9); } }
@keyframes inDriftC { to { transform: translate(22vmax, -14vmax) scale(1.2); } }

/* звёздная пыль */
.in-stars { position: absolute; inset: 0; }
.in-stars i { position: absolute; border-radius: 50%; background: #fff; opacity: 0; animation: inTwinkle 2s ease-in-out infinite; }
@keyframes inTwinkle { 0%, 100% { opacity: 0; scale: .5; } 50% { opacity: .85; scale: 1.25; } }

/* сцена: нулевая точка в центре, всё остальное расставлено от неё */
.in-stage { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.in-hero { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: inRise .72s 1s cubic-bezier(.3, .9, .2, 1) both; }
@keyframes inRise { from { translate: 0 0; } to { translate: 0 -50px; } }

/* кольцо: прилетает из размытия с поворотом и пружинкой, внутри крутится радужный градиент */
.in-ringbox { position: absolute; left: -85px; top: -61px; width: 170px; height: 121.6px; animation: inRingIn 1s .1s cubic-bezier(.2, 1.25, .3, 1) both; }
@keyframes inRingIn {
  0% { opacity: 0; scale: .25; rotate: -140deg; filter: blur(14px); }
  40% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); }
}
.in-ring, .in-glow { position: absolute; inset: 0; }
.in-ring { overflow: hidden; -webkit-mask: url(img/ring.svg) center / contain no-repeat; mask: url(img/ring.svg) center / contain no-repeat; }
.in-ring::before { content: ''; position: absolute; inset: -70%;
  background: conic-gradient(from 0deg, #2f5f8a, #2e5880 25%, #9cc0e3 45%, #2e5880 65%, #2f5f8a 100%);
  animation: inSpin 2.2s linear infinite; }
.in-glow { filter: blur(20px); opacity: .8; animation: inBreath 1.5s ease-in-out infinite alternate; }
@keyframes inBreath { from { opacity: .45; scale: .96; } to { opacity: .9; scale: 1.1; } }

/* волна при «приземлении» кольца */
.in-pulse { position: absolute; left: -85px; top: -61px; width: 170px; height: 121.6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); opacity: 0; animation: inPulse 1.15s .85s ease-out both; }
@keyframes inPulse { from { opacity: .75; scale: .8; } to { opacity: 0; scale: 3.4; } }

/* орбита: три точки, у первой светящийся хвост-комета */
.in-orbit { position: absolute; left: -105px; top: -105px; width: 210px; height: 210px; animation: inFade .5s .6s both, inSpin 2.6s linear infinite; }
.in-orbit::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 25%, rgba(255, 255, 255, 0) 25.1%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.in-orbit i { position: absolute; left: 50%; top: -3.5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .85); transform-origin: 3.5px 108.5px; }
.in-orbit i:nth-child(2) { transform: rotate(120deg); background: #9cc0e3; box-shadow: 0 0 10px 2px rgba(217, 120, 138, .85); }
.in-orbit i:nth-child(3) { transform: rotate(240deg); background: #4a7fb0; box-shadow: 0 0 10px 2px rgba(74, 127, 176, .9); }

/* логотип: проявляется слева направо, потом по нему пробегает блик */
.in-wordwrap { position: absolute; left: -125px; top: 24px; width: 250px; animation: inUp .8s 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inUp { from { translate: 0 16px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.in-word { width: 100%; aspect-ratio: 7654 / 1700; -webkit-mask: url(img/logo-a.svg) center / contain no-repeat; mask: url(img/logo-a.svg) center / contain no-repeat;
  background: linear-gradient(105deg, #8f8f9e 0%, #8f8f9e 30%, #fff 45%, #fff 55%, #8f8f9e 70%, #8f8f9e 100%); background-size: 280% 100%; background-position: 100% 0;
  clip-path: inset(0 100% 0 0); animation: inWipe .95s 1s cubic-bezier(.3, .7, .2, 1) forwards, inShine 1.1s 1.85s ease-in-out forwards; }
@keyframes inWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes inShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.in-tag { position: absolute; left: -150px; top: 98px; width: 300px; text-align: center; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .75); white-space: nowrap; animation: inTag .9s 1.5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inTag { from { opacity: 0; translate: 0 8px; letter-spacing: .5em; } to { opacity: 1; translate: 0 0; letter-spacing: .16em; } }

/* категории по очереди «загораются» */
.in-tick { position: absolute; left: -170px; top: 132px; width: 340px; display: flex; justify-content: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.in-tick span { opacity: .2; animation: inTickOn .45s both; }
.in-tick span:nth-child(1) { animation-delay: 1.7s; }
.in-tick span:nth-child(2) { animation-delay: 1.92s; }
.in-tick span:nth-child(3) { animation-delay: 2.14s; }
.in-tick span:nth-child(4) { animation-delay: 2.36s; }
@keyframes inTickOn { from { opacity: .2; } to { opacity: 1; text-shadow: 0 0 12px rgba(255, 255, 255, .55); } }

/* полоска-загрузка */
.in-bar { position: absolute; left: 50%; bottom: calc(9% + env(safe-area-inset-bottom)); width: 120px; height: 3px; margin-left: -60px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; animation: inFade .4s .2s both; }
.in-bar::after { content: ''; display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #2f5f8a, #6c9dcb); animation: inBar 2.6s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes inBar { to { transform: scaleX(1); } }
.in-bg .b1 { animation: inCalm 3s ease-in-out infinite alternate; }
@keyframes inCalm { to { transform: scale(1.12); } }

/* компактнее */
.in-ringbox { left: -58px; top: -41.5px; width: 116px; height: 83px; }
@keyframes inRise { from { translate: 0 0; } to { translate: 0 -34px; } }
.in-wordwrap { left: -88px; width: 176px; top: 20px; }
.in-tag { top: 70px; font-size: 11px; }
@keyframes inTag { from { opacity: 0; translate: 0 6px; letter-spacing: .4em; } to { opacity: 1; translate: 0 0; letter-spacing: .14em; } }
.in-glow { filter: blur(14px); }
#intro { clip-path: circle(150% at 50% calc(46% - 34px)); }
@keyframes inIris { from { clip-path: circle(150% at 50% calc(46% - 34px)); } to { clip-path: circle(0% at 50% calc(46% - 34px)); } }

/* кольцо влетает в значок шапки: остальное гаснет, фон растворяется и открывает магазин */
#intro.fly { pointer-events: none; background: rgba(10, 4, 6, 0); transition: background .6s .1s ease; }
#intro.fly .in-wordwrap, #intro.fly .in-bg { animation: inGone .4s forwards; }
@keyframes inGone { to { opacity: 0; } }
.stk.ip.pdp { cursor: default; }
.stk.ip.pdp:active { opacity: 1; }

/* панель цены = кнопка «Добавить в корзину» */
.price[role="button"], .price.solo { cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.price[role="button"]:active, .price.solo:active { transform: scale(.98); }
.pcta { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.price.solo .pcta { margin-top: 1px; }
.price.two .pcta { grid-column: 1 / -1; margin-top: 6px; text-align: center; }
.price.pl { align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 16px; background: var(--gray); }
.price.pl span { font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
.price.pl .pcta { text-align: right; }
/* размер панели цены остаётся прежним: надпись «Добавить в корзину» умещается внутри */
.price.solo { height: 74.5px; padding: 0 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.price.solo b { line-height: 1.1; }
.price.solo .pcta { margin-top: 3px; line-height: 1.2; }
.price.two { height: 80.6px; padding: 8px 10px 4px; align-content: center; row-gap: 0; }
.price.two .pcta { margin-top: 0; line-height: 13px; }
.price.pl { padding: 0; background: none; border-radius: 0; }
/* iPhone: цена ровно по середине панели, надпись прижата к низу */
.price.solo { justify-content: center; }
.price.solo .pcta { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; line-height: 12px; text-align: center; }

/* цена и надпись подняты на 15% высоты панели (≈11 px) */
.price.solo { padding-bottom: 22px; }
.price.solo .pcta { bottom: 17px; }

/* опущены на 6% высоты панели (≈4.5 px) */
.price.solo { padding-bottom: 13px; }
.price.solo .pcta { bottom: 12.5px; }

/* плашка цены оформлена как задник переключателя (капсула «жидкого стекла»): тонкая кромка, мягкий вертикальный градиент, размытие; без теней.
   Подложка почти белая, а не прозрачная: плашка заходит на тёмный Trade-In, и цена должна читаться */
.price.solo, .price.two { border: 1px solid rgba(118, 118, 128, .32); box-shadow: none;
  background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f8f8fa;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }

/* логотип чёрный на белой плашке: фон заставки остаётся тёмным, а чёрные буквы читаются */
.in-wordwrap { left: -98px; width: 196px; top: 22px; padding: 11px 20px; box-sizing: border-box; border-radius: 999px; background: #fff; }
.in-word { background: linear-gradient(105deg, #000 0%, #000 30%, #55555c 45%, #55555c 55%, #000 70%, #000 100%); background-size: 280% 100%; background-position: 100% 0; }
/* заставка: плашка как адресная/поисковая строка, адрес «набирается» по буквам с кареткой */
.in-wordwrap { left: -112px; width: 224px; top: 22px; display: flex; align-items: center; gap: 10px; padding: 11px 22px 11px 18px; animation: inUp .6s .85s cubic-bezier(.2, .8, .2, 1) both, inPress .26s 2.2s ease-out; }
.in-sicon { flex: none; display: block; }
.in-wordbox { position: relative; flex: none; width: 156px; }
.in-word { width: 100%; background: #000; clip-path: inset(0 100% 0 0); animation: inType 1s 1.25s step-end forwards; }
@keyframes inType {
  0% { clip-path: inset(0 100% 0 0); }
  6% { clip-path: inset(0 88% 0 0); }
  16% { clip-path: inset(0 77% 0 0); }
  25% { clip-path: inset(0 66% 0 0); }
  38% { clip-path: inset(0 54% 0 0); }
  47% { clip-path: inset(0 43% 0 0); }
  59% { clip-path: inset(0 31% 0 0); }
  70% { clip-path: inset(0 26.5% 0 0); }
  78% { clip-path: inset(0 17% 0 0); }
  90%, 100% { clip-path: inset(0 0 0 0); }
}
.in-caret { position: absolute; left: 0; top: 14%; width: 2px; height: 72%; margin-left: 1px; border-radius: 1px; background: #4a7fb0; opacity: 0;
  animation: inBlink .9s .95s step-end infinite, inCaretMove 1s 1.25s step-end forwards, inCaretOut .2s 2.4s forwards; }
@keyframes inBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes inCaretMove {
  0% { left: 0%; } 6% { left: 11.5%; } 16% { left: 22.5%; } 25% { left: 33.5%; } 38% { left: 45.5%; }
  47% { left: 56.5%; } 59% { left: 68.5%; } 70% { left: 73%; } 78% { left: 82.5%; } 90%, 100% { left: 99.5%; }
}
@keyframes inCaretOut { to { opacity: 0; } }
@keyframes inPress { 0%, 100% { scale: 1; } 45% { scale: .965; } }
/* кольцо больше не «ездит» вверх во время набора: оно сразу садится на своё место и стоит, а строка появляется под ним после */
.in-hero { animation: none; translate: 0 -34px; }
.in-wordwrap { animation: inUp .6s 1.05s cubic-bezier(.2, .8, .2, 1) both, inPress .26s 2.2s ease-out; }
/* ---------- «Мои заказы»: кнопка в профиле и окно с заказами ---------- */
.ord-btn { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gutter)); margin: 12px var(--gutter) 0; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--gray); color: var(--text); text-align: left; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.ord-btn:active { transform: scale(.98); }
.ob-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #4a7fb0, #2f5f8a); box-shadow: 0 6px 12px -6px rgba(47, 95, 138, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ob-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-t b { font-size: 16px; font-weight: 600; }
.ob-t small { margin-top: 1px; font-size: 12px; color: var(--muted); }
.ob-n { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #24496b; color: #fff; font-size: 12px; font-weight: 700; }
.ob-n[hidden] { display: none; }
.ord-btn .chev { color: var(--text); opacity: .55; transform: rotate(-45deg); margin-right: 2px; }

.ord-sheet { min-height: 62vh; max-height: 92vh; background: #f4f4f7; padding-top: 10px; }
.ord-sheet h3 { margin-top: 6px; }
.ord-sheet > .sub { text-align: center; margin-bottom: 16px; }
.os-grab { display: block; width: 38px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: rgba(0, 0, 0, .16); }
.ord-sheet #ordersBox { display: flex; flex-direction: column; gap: 12px; }
.ord-sheet .buy.alt { margin-top: 16px; background: #fff; }
.oc { padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -14px rgba(20, 20, 40, .22); animation: ocIn .5s calc(var(--i, 0) * 70ms + 120ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.oc.fresh { animation: freshIn .4s ease backwards; }
@keyframes ocIn { from { opacity: 0; translate: 0 18px; } }
.oc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.oc-id b { display: block; font-size: 16px; font-weight: 600; }
.oc-id small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--muted); }
.oc-items { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oc-items li { display: flex; align-items: center; gap: 12px; }
.oc-pic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gray); overflow: hidden; }
.oc-pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.oc-nm { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.oc-nm b { flex: 1 0 100%; font-size: 14px; font-weight: 500; line-height: 1.25; }
.oc-nm small { font-size: 12px; font-weight: 400; color: var(--muted); }
.oc-items em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--label); }
.oc-tag { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 8px; background: #e6edfb; color: #1d3f8f; font-size: 11px; font-style: normal; font-weight: 600; }
.oc-tag.ti { background: #f3e4e8; color: #24496b; }
.oc .o-steps { margin-top: 16px; }
.oc-sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.oc-sum b { font-size: 18px; font-weight: 600; color: var(--text); }
.oc-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px 24px; text-align: center; }
.oc-e-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px -14px rgba(20, 20, 40, .3); }
.oc-e-ico img { width: 34px; }
.oc-empty b { font-size: 17px; font-weight: 600; }
.oc-empty small { max-width: 240px; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .oc { animation: none; } }
/* окно заказов не заезжает под кнопки Telegram сверху (закрыть / меню) и не отдаёт свайп вниз приложению Telegram */
.ord-sheet { max-height: calc(100vh - var(--tg-top) - 14px); max-height: calc(100dvh - var(--tg-top) - 14px); overscroll-behavior: contain; }
.os-grab { position: relative; }
.os-grab::after { content: ''; position: absolute; left: -60px; right: -60px; top: -12px; bottom: -14px; }
/* ---------- окна «Гарантия» и «Доставка и оплата» ---------- */
.wd-sheet { min-height: 56vh; max-height: calc(100vh - var(--tg-top) - 14px); max-height: calc(100dvh - var(--tg-top) - 14px); overscroll-behavior: contain; background: #f4f4f7; padding-top: 10px; }
.wd-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #4a7fb0, #2f5f8a); box-shadow: 0 14px 26px -16px rgba(47, 95, 138, .8); animation: ipkUp .6s .08s backwards cubic-bezier(.2, .9, .25, 1); }
.wd-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 60% at 20% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); pointer-events: none; }
.wd-ico { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.wd-ht { position: relative; display: flex; flex-direction: column; }
.wd-ht b { font-size: 22px; font-weight: 600; line-height: 1.15; }
.wd-ht small { margin-top: 3px; font-size: 12.5px; opacity: .78; }
.wd-s { margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -16px rgba(20, 20, 40, .22); animation: ocIn .5s calc(var(--i, 0) * 70ms + 160ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.wd-s h5 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #24496b; }
.wd-s p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--label); }
.wd-s p:last-child, .wd-s ul:last-child { margin-bottom: 0; }
.wd-s ul { margin: 0 0 6px; padding: 0; list-style: none; }
.wd-s li { position: relative; padding: 3px 0 3px 18px; font-size: 14px; line-height: 1.45; color: var(--label); }
.wd-s li::before { content: ''; position: absolute; left: 3px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #4a7fb0; }
.wd-sheet #wdClose { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .wd-hero, .wd-s { animation: none; } }
/* соцсети: плитки с цветными иконками */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px var(--gutter) 0; }
.ct-tile { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px; border-radius: 18px; background: var(--gray); color: var(--text); text-decoration: none; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.ct-tile:active { transform: scale(.97); }
.ct-tile > span { display: flex; flex-direction: column; min-width: 0; }
.ct-tile b { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ct-tile small { margin-top: 1px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ct-vk { font-size: 15px; font-weight: 800; font-style: normal; letter-spacing: -.3px; }
.ct-tile.tg .ct-ic { background: linear-gradient(145deg, #4cc0f0, #1e8fc7); }
.ct-tile.wa .ct-ic { background: linear-gradient(145deg, #4ddb7a, #1b9d49); }
.ct-tile.vk .ct-ic { background: linear-gradient(145deg, #3b93ff, #0a58d0); }
.ct-tile.ml .ct-ic { background: linear-gradient(145deg, #4a7fb0, #2f5f8a); }
/* без иконок: название и подпись по центру плитки */
.ct-tile { justify-content: center; text-align: center; padding: 13px 12px; }
.ct-tile > span { align-items: center; }

/* плитки соцсетей как задник «жидкого стекла»: капсула с тонкой кромкой, мягким градиентом и размытием, без теней */
.ct-tile { min-height: 46px; padding: 0 14px; border-radius: 24px; border: 1px solid rgba(118, 118, 128, .32);
  background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f9f9fb;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: none; }
.ct-tile b { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- избранное и колокольчик на карточке товара ---------- */
.pact { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 8px; }
.pa-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(118, 118, 128, .28); color: #1d1d1f;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .6)); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.pa-btn:active { transform: scale(.88); }
.pa-btn.on { color: #4a7fb0; }
.pa-btn.on svg path { fill: currentColor; }
.pa-btn.busy { opacity: .55; pointer-events: none; }
.pa-btn.on svg { animation: paPop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes paPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.fv-sheet #fvBox { display: flex; flex-direction: column; gap: 10px; }
.fv-h { margin: 8px 4px 0; font-size: 13px; font-weight: 600; color: #24496b; }
.fv-card { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -16px rgba(20, 20, 40, .22); animation: ocIn .45s calc(var(--i, 0) * 60ms + 100ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.fv-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.fv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fv-t b { font-size: 14px; font-weight: 500; line-height: 1.25; }
.fv-t small { margin-top: 2px; font-size: 12px; color: var(--muted); }
.fv-x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4a7fb0; -webkit-tap-highlight-color: transparent; }
.fv-x.on svg path { fill: currentColor; }
.fv-x:active { transform: scale(.88); }
.fv-e { color: #4a7fb0; }
.fv-e svg { width: 30px; height: 30px; }

/* ---------- пуш-панель ---------- */
.pp .pp-l { margin: 18px 2px 8px; font-size: 13px; font-weight: 600; color: #24496b; }
.pp-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(118, 118, 128, .32); background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f9f9fb; color: var(--text); font-size: 13px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.pp-chip.on { background: #2f5f8a; border-color: #2f5f8a; color: #fff; }
.pp-min { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--label); }
.pp-min input { width: 110px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(118, 118, 128, .32); background: #fff; font: inherit; font-size: 15px; color: var(--text); }
.pp-count { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 14px; color: var(--label); }
.pp-count b { color: var(--text); font-size: 17px; }
.pp-in { display: block; width: 100%; margin: 0 0 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(118, 118, 128, .32); background: #fff; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text); resize: vertical; -webkit-appearance: none; appearance: none; }
.pp-in:focus { outline: none; border-color: #4a7fb0; }
.pp-cnt { text-align: right; font-size: 11px; color: var(--muted); }
.pp-res { display: flex; flex-direction: column; gap: 6px; }
.pp-r { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--gray); color: var(--text); font-size: 13.5px; text-align: left; }
.pp-r small { flex: none; color: var(--muted); font-size: 12px; }
.pp-prev { padding: 14px; border-radius: 18px; background: #e8edf3; }
.pp-bub { max-width: 100%; padding: 10px 12px; border-radius: 16px 16px 16px 6px; background: #fff; font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); white-space: pre-wrap; word-break: break-word; }
.pp-bub b { display: block; margin-bottom: 6px; }
.pp-bub span.ph { color: var(--old); }
.pp-pbtn { margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .75); color: #2a6fd6; font-size: 14px; font-weight: 500; text-align: center; }
.pp-act { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 18px; }
.pp-act .buy.alt { margin-top: 0; }
.pp-hist { display: flex; flex-direction: column; gap: 8px; }
.pp-h { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray); font-size: 13px; }
.pp-h b { display: block; font-size: 14px; font-weight: 500; }
.pp-h small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.pp-h span { flex: none; font-weight: 600; }
.pp-h i { font-style: normal; font-weight: 400; color: #c23030; }
.pp-sheet { padding-top: 22px; }
.pp-sheet .pp-bub { margin: 0 0 14px; background: var(--gray); box-shadow: none; }
.pp-prog { margin-bottom: 14px; }
.pp-bar { height: 6px; border-radius: 3px; background: #ececf0; overflow: hidden; }
.pp-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2f5f8a, #6c9dcb); transition: width .4s ease; }
.pp-prog small { display: block; margin-top: 6px; text-align: center; color: var(--muted); font-size: 12px; }
.pp-min[hidden], .pp-bub b[hidden], .pp-pbtn[hidden] { display: none; }

/* сердечко и колокольчик: в одной строке с «‹ iPhone», над картинкой, а не поверх неё */
.prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prow .pback { margin-bottom: 0; }
.pane.prod .prow { padding-right: 8px; }
.pact { position: static; top: auto; right: auto; margin-top: 8px; gap: 6px; }
.pa-btn { width: 36px; height: 36px; }
.pa-btn svg { width: 19px; height: 19px; }
/* значки по центру кружков: колокольчик с язычком и сердце визуально сидели ниже середины */
#bellBtn svg { translate: 0 -1.4px; }
#favBtn svg { translate: 0 -.6px; }
.fv-x svg { translate: 0 -.5px; }


/* рассрочка */
.inst-btn { width: 100%; margin: 0 0 14px; }
.inst-row { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(0,0,0,.07); font-size: 15px; }
.inst-row:first-of-type { border-top: 0; }
.inst-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.inst-row small { font-size: 12px; font-weight: 500; color: var(--label); }
/* промокоды */
.pm-wrap.pm-me { margin: 12px var(--gutter) 0; }
.pm-wrap.pm-cart { margin: 4px var(--gutter) 0; }
.pm-box { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--radius); background: var(--gray); }
.pm-box .ob-ico { width: 38px; height: 38px; border-radius: 12px; }
.pm-in { flex: 1; min-width: 0; padding: 10px 2px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pm-in::placeholder { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pm-in:focus { outline: none; }
.pm-go { flex: none; padding: 9px 14px; border: 0; border-radius: 14px; background: #2f5f8a; color: #fff; font-size: 13px; font-weight: 600; transition: opacity .2s; }
.pm-go:disabled { opacity: .5; }
.pm-x { flex: none; position: relative; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(118, 118, 128, .18); }
.pm-x::before, .pm-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; border-radius: 1px; background: var(--text); transform: rotate(45deg); }
.pm-x::after { transform: rotate(-45deg); }
.pm-msg { margin: 6px 6px 0; font-size: 13px; color: #1f7a45; }
.pm-msg.bad { color: #c23030; }
.pm-msg[hidden] { display: none; }
.pm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px var(--gutter) -8px; font-size: 15px; color: var(--label); }
.pm-row b { font-weight: 600; color: #1f7a45; text-align: right; }
.pm-miss { margin: 10px var(--gutter) -8px; font-size: 13px; color: #b26a00; }
.oc-promo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: #eaf3fd; font-size: 13px; color: #24496b; }
.oc-promo b { font-weight: 600; }
.oc-promo em { flex-basis: 100%; font-style: normal; font-weight: 500; }
/* панель промокодов */
.pm-codew { display: flex; gap: 8px; }
.pm-codew .pp-in { flex: 1; text-transform: uppercase; }
.pm-dice { flex: none; width: 48px; margin: 0 0 8px; border: 1px solid rgba(118, 118, 128, .32); border-radius: 14px; background: #fff; font-size: 20px; }
.pm-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.pm-grid label { display: block; font-size: 12px; color: var(--muted); }
.pm-grid label .pp-in { margin-top: 4px; }
#pmPick { margin-top: 8px; }
.pm-act { margin-top: 14px; }
.pm-act:has(#pmReset[hidden]) { grid-template-columns: 1fr; }
#pmReset[hidden] { display: none; }
.pm-list { display: flex; flex-direction: column; gap: 10px; }
.pm-item { padding: 14px; border-radius: 18px; background: var(--gray); }
.pm-item.off { opacity: .6; }
.pm-it-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-code { padding: 4px 10px; border: 1px dashed rgba(47, 95, 138, .55); border-radius: 10px; background: #fff; color: #2f5f8a; font-size: 15px; font-weight: 700; letter-spacing: .6px; }
.pm-st { font-size: 12px; color: var(--muted); }
.pm-item p { margin: 8px 0 2px; font-size: 14.5px; line-height: 1.4; }
.pm-item small { display: block; font-size: 12px; color: var(--muted); }
.pm-it-act { display: flex; gap: 8px; margin-top: 10px; }
.pm-it-act button { flex: 1; padding: 8px 6px; border: 0; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 500; color: var(--text); }
.pm-it-act .del { color: #c23030; }
.pm-it-act .del.ask { background: #c23030; color: #fff; }
/* панель цен */
.pr-q { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--gray); font: inherit; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pr-q:focus { outline: none; }
.pr-only { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.pr-it { padding: 0; }
.pr-it summary { display: flex; align-items: center; gap: 8px; padding: 14px; list-style: none; cursor: pointer; }
.pr-it summary::-webkit-details-marker { display: none; }
.pr-it summary span { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.pr-it summary em { flex: none; font-style: normal; font-size: 12.5px; color: var(--muted); }
.pr-n { flex: none; font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 10px; background: #2f5f8a; color: #fff; }
.pr-rows { padding: 0 14px 6px; }
.pr-row { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.pr-row b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-row.cu b::after { content: ' · своя цена'; font-weight: 500; color: #2f5f8a; }
.pr-f { display: flex; align-items: flex-end; gap: 8px; }
.pr-f label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.pr-f input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pr-f input:focus { outline: 2px solid #2f5f8a; }
.pr-s { flex: none; padding: 10px 12px; border: 0; border-radius: 12px; background: #2f5f8a; color: #fff; font-size: 13px; font-weight: 600; }
.pr-s:disabled { opacity: .35; }
.pr-row small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pr-r { color: #c23030; cursor: pointer; }
.pr-f input { flex: 1; min-width: 0; }

.pr-ph { padding: 12px 0 8px; border-top: 1px solid rgba(0, 0, 0, .07); }
.pr-ph > b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-ph small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pr-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-pic, .pr-add { position: relative; width: 64px; height: 64px; border-radius: 12px; background: #fff; overflow: hidden; }
.pr-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pr-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 22px; text-align: center; }
.pr-x.ask { background: #c23030; }
.pr-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed #2f5f8a; background: transparent; color: #2f5f8a; font-size: 26px; cursor: pointer; }
.pr-add.busy { opacity: .4; pointer-events: none; }
.pr-ph { border-top: 0; padding-top: 4px; }
.pr-ph + .pr-row { border-top: 1px solid rgba(0, 0, 0, .07); }

.pr-col { padding: 8px 0 10px; }
.pr-col > b { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-col > b em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.pr-dot { flex: none; width: 14px; height: 14px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pr-ph { padding: 4px 0 0; }
/* новые товары, категории, цвета */
.pr-tools { display: flex; gap: 8px; margin: 4px 0 10px; }
.pr-tools button { flex: 1; padding: 11px 8px; border: 0; border-radius: 14px; background: #2f5f8a; color: #fff; font-size: 14px; font-weight: 600; }
.pr-form { margin: 0 0 14px; padding: 14px; border-radius: 18px; background: var(--gray); }
.pr-form h3 { margin: 0 0 10px; font-size: 16px; }
.pr-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.pr-form input:not([type=color]):not([type=file]), .pr-form select, .pr-in { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.pr-form input:focus, .pr-form select:focus, .pr-in:focus { outline: 2px solid #2f5f8a; }
.pf-grp { margin: 4px 0 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .07); }
.pf-grp > b { display: block; margin-bottom: 8px; font-size: 13.5px; }
.pf-grp > b em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.pf-grp > input { margin-bottom: 8px; }
.pf-r { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pf-r input { flex: 1; min-width: 0; }
.pf-r .pf-op { flex: 0 0 38%; }
.pf-r input[type=color], .pr-clr { flex: none; width: 46px; height: 42px; padding: 2px; border: 0; border-radius: 12px; background: #fff; }
.pf-t { flex: 1; font-size: 14px; }
.pf-t em { font-style: normal; font-size: 12px; color: var(--muted); }
.pf-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 17px; background: #fff; color: #c23030; font-size: 18px; }
.pf-add { padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; color: #2f5f8a; font-size: 13px; font-weight: 600; }
.pf-del { flex: none; padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; color: #c23030; font-size: 13px; }
.pf-del.wide { width: 100%; margin-top: 12px; }
.pf-del.ask { background: #c23030; color: #fff; }
.pr-go { width: 100%; margin-top: 10px; padding: 13px; border: 0; border-radius: 14px; background: #2f5f8a; color: #fff; font-size: 15px; font-weight: 600; }
.pr-go:disabled { opacity: .5; }
.pr-form small, .pr-addc small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pr-addc { padding: 12px 0 6px; border-top: 1px solid rgba(0, 0, 0, .07); }
.pr-addc > b { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; }
.pr-addc .pr-in { margin-bottom: 8px; }
.pr-addc .pr-f .pr-in { margin-bottom: 0; }
.sf-file input { font-size: 13px; }
.pr-f .pr-clr { flex: none; width: 46px; height: 42px; }

.pr-it summary span { display: flex; flex-direction: column; }
.pr-it summary .pr-sec { margin: 2px 0 0; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pr-cx { margin-left: 8px; padding: 3px 9px; border: 0; border-radius: 10px; background: #fff; color: #c23030; font-size: 11.5px; font-weight: 500; }
.pr-cx.ask { background: #c23030; color: #fff; }
.pr-col > b .pr-cx + em, .pr-col > b em { margin-left: auto; }
.pr-mv { display: flex; gap: 6px; }
.pr-mv button { flex: 1; padding: 9px 4px; border: 0; border-radius: 12px; background: #fff; color: var(--text); font-size: 12.5px; font-weight: 500; }
/* панель Trade-In */
.tp-g{margin:18px 0 8px;font-size:15px}
.tp-m{margin-bottom:10px}
.tp-row{display:flex;gap:6px;margin:6px 0;align-items:center}
.tp-row input,.tp-nn{min-width:0;padding:9px 10px;border:1px solid var(--line,#ddd);border-radius:10px;font:inherit;background:transparent;color:inherit}
.tp-l{flex:0 0 78px}.tp-p,.tp-p2{flex:1}
.tp-nn{width:100%;margin:4px 0;box-sizing:border-box}
.tp-d,.tp-s,.tp-dm,.tp-add{border:0;background:none;color:inherit;opacity:.65;font:inherit;cursor:pointer;padding:6px}
.tp-dm{font-size:12px}.tp-add{display:block;margin-top:2px}
#tpSave,#tpNew{margin-top:10px;width:100%}
/* обычная цена (без скидки) — в той же плашке с окантовкой, что и у iPhone и скидок */
.price.pl { box-sizing: border-box; min-height: 74px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(118, 118, 128, .32); box-shadow: none;
  background: linear-gradient(180deg, rgba(118, 118, 128, .07), rgba(255, 255, 255, .35) 55%, rgba(118, 118, 128, .03)), #f8f8fa;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
/* надпись «Добавить в корзину» — под ценой по центру, как у iPhone */
.price.pl { flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 74.5px; text-align: center; }
.price.pl span { font-size: 30px; font-weight: 600; letter-spacing: -.4px; line-height: 1.1; }
.price.pl .pcta { text-align: center; line-height: 1.2; }
/* intro-v2:start */
/* заставка: строка поиска — «жидкое стекло»: прозрачная капсула с размытием, светлой кромкой и бликом сверху */
.in-wordwrap { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .15)); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(255, 255, 255, .14), inset 0 0 20px rgba(255, 255, 255, .08), 0 16px 36px -12px rgba(0, 0, 0, .6); }
.in-wordwrap::before { content: ''; position: absolute; left: 14px; right: 14px; top: 2px; height: 42%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); }
.in-sicon { stroke: rgba(255, 255, 255, .7); position: relative; }
.in-wordbox { position: relative; }
.in-word { background: #fff; }
.in-caret { background: #b9d8f5; }
/* intro-v2:end */
/* intro-hw:start */
/* заставка к Хеллоуину: те же движения, но фон угольно-фиолетовый, кольцо и свет — тыквенно-оранжевые, вместо лупы тыква */
#intro.hw { background: #08050b; }
#intro.hw .in-bg .b1 { background: radial-gradient(circle, rgba(255, 106, 0, .34), rgba(120, 40, 180, .16) 38%, rgba(120, 40, 180, 0) 64%); }
#intro.hw .in-ring::before { background: conic-gradient(from 0deg, #4a1d00, #b84a00 25%, #ffb15c 45%, #b84a00 65%, #4a1d00 100%); }
#intro.hw .in-ringbox::before { content: ''; position: absolute; inset: -70%; background: radial-gradient(circle, rgba(255, 120, 20, .24), rgba(255, 120, 20, 0) 62%); animation: inFade 1s .6s both; }
#intro.hw .in-caret { background: #ff9a3c; }
#intro.hw .in-wordwrap { border-color: rgba(255, 190, 120, .28); box-shadow: inset 0 1px 0 rgba(255, 220, 180, .55), inset 0 -1px 0 rgba(255, 170, 80, .16), inset 0 0 20px rgba(255, 150, 50, .07), 0 16px 36px -12px rgba(0, 0, 0, .7); }
#intro.hw .in-pk { position: absolute; right: 14px; top: -17px; font-size: 24px; line-height: 1; rotate: 12deg; filter: drop-shadow(0 0 10px rgba(255, 130, 20, .65)); animation: inPumpkin .7s 2.2s cubic-bezier(.2, 1.6, .4, 1) both; }
.in-pk { display: none; }
#intro.hw .in-pk { display: block; }
@keyframes inPumpkin { from { opacity: 0; scale: .2; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
#intro.hw .in-word { background: linear-gradient(90deg, #fff 0%, #ffe3c2 55%, #ffb25c 100%); }
/* intro-hw:end */
/* цена без плашки iPack (не iPhone): отступ до кешбека */
.pane.prod .price.solo:not(.sq) { margin-bottom: 14px; }
/* пять и больше вариантов (модели iPhone для стекла и чехлов): лента отдельных таблеток, листается пальцем; выбранная — чёрная, как кнопка корзины,
   по краям плавное затухание подсказывает, что есть что листать. Стеклянная капсула здесь не нужна: она рассчитана на 2-4 варианта */
.mrail { position: relative; display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
.mrail::-webkit-scrollbar { display: none; }
.mrail .chip { flex: none; scroll-snap-align: center; min-height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap; font-size: 15px; font-weight: 500;
  background: var(--gray); border: 1px solid transparent; transition: background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.mrail .chip:active { transform: scale(.96); }
.mrail .chip.on { background: #111; color: #fff; }
.mrail .chip:disabled { opacity: .35; }
/* настройка iPack: у каждого предмета таблетки с вариантами (выбранная чёрная), внизу платный третий год гарантии и итог */
.ipc-sheet { padding-top: 18px; }
.ipc-sheet h3 { margin: 0 0 4px; font-size: 20px; text-align: center; }
.ipc-sheet .sub { text-align: center; margin-bottom: 14px; }
.ipc-s { margin-bottom: 14px; }
.ipc-t { padding: 0 2px 7px; font-size: 13px; font-weight: 500; color: var(--label); }
.ipc-p { display: flex; flex-wrap: wrap; gap: 8px; }
.ipc-o { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--gray); font-size: 14.5px; font-weight: 500; color: var(--text); transition: background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ipc-o:active { transform: scale(.96); }
.ipc-o.on { background: #111; color: #fff; }
.ipc-o small { margin-left: 6px; opacity: .65; font-size: 12px; }
.ipc-w { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 13px 14px; border: 1.5px solid rgba(29, 63, 143, .22); border-radius: 18px; background: #eef3ff; text-align: left; font: inherit; color: #1d3f8f; -webkit-tap-highlight-color: transparent; transition: border-color .2s, background .2s; }
.ipc-w span { flex: 1; min-width: 0; }
.ipc-w b { display: block; font-size: 15px; font-weight: 600; }
.ipc-w small { display: block; margin-top: 2px; font-size: 12px; opacity: .75; }
.ipc-w em { font-style: normal; font-weight: 600; font-size: 15px; white-space: nowrap; }
.ipc-sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(29, 63, 143, .25); transition: background .2s; }
.ipc-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: translate .2s; }
.ipc-w.on { border-color: #1d3f8f; background: #e1eaff; }
.ipc-w.on .ipc-sw { background: #1d3f8f; }
.ipc-w.on .ipc-sw::after { translate: 18px 0; }
.ipc-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--gray); font-size: 14px; }
.ipc-sum b { font-size: 18px; }
.ipc-sheet #ipcOk { position: sticky; bottom: 0; box-shadow: 0 0 0 10px #fff, 0 -12px 14px 0 rgba(255, 255, 255, .9); }
/* кнопка в раскрытой плашке iPack в корзине */
.stk.ip .ipx li.cf b { color: #1d3f8f; font-weight: 600; font-size: 11.5px; }
.stk.ip .ipx li.cfgrow { display: block; padding: 8px 0 2px; border: 0; }
.ipk-cfgb { width: 100%; min-height: 36px; border: 1.5px solid rgba(29, 63, 143, .35); border-radius: 12px; background: transparent; color: #1d3f8f; font: inherit; font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.ipk-cfgb:active { background: rgba(29, 63, 143, .08); }
.mg-set { color: var(--muted); }
/* «Полная настройка устройства» в корзине: плашка как «В рассрочку», но ниже промокода: значок 32 px, одна строка, справа цена и стрелка (или галочка, если услуга добавлена) */
.ord-btn.su-box { width: auto; margin: 10px var(--gutter) 0; padding: 8px 12px 8px 12px; gap: 8px; min-height: 50px; cursor: pointer; }
.su-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1.6px solid rgba(36, 73, 107, .5); border-radius: 50%; background: transparent; color: #24496b; font: italic 700 14px/1 Georgia, 'Times New Roman', serif; -webkit-tap-highlight-color: transparent; }
.su-ck { flex: none; box-sizing: border-box; width: 25px; height: 25px; padding: 0; border: 2px solid rgba(36, 73, 107, .45); border-radius: 50%; background: transparent; transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.su-ck.on { border-color: #24496b; box-shadow: 0 3px 9px rgba(36, 73, 107, .45), inset 0 1px 0 rgba(255, 255, 255, .3); background: #24496b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.su-box .ob-t b { font-size: 13.5px; line-height: 1.2; white-space: nowrap; letter-spacing: -.1px; }
.su-box em { font-style: normal; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.su-box.on { background: #f6e8eb; }
.oc-su { display: flex; justify-content: space-between; margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--gray); font-size: 13px; }
.oc-su b { font-weight: 600; }
.wd-sheet #suGo { margin-top: 16px; }
.su-ck { transition: background .2s, border-color .2s, box-shadow .2s; }
/* значок «i» у iPack на карточке товара: такой же, как у «Полной настройки» в корзине (круг, курсивная «i» с засечками), цвет остаётся синим под плашку */
.stk.ip.pdp .ipk-i { width: 26px; height: 26px; border: 1.6px solid rgba(29, 63, 143, .55); background: transparent; color: #1d3f8f; font: italic 700 14px/1 Georgia, 'Times New Roman', serif; }

/* карточка товара: Trade-In, цена и iPack PRO — три отдельные плашки с отступами, а не стопка «одна под другой» (просьба владельца 05.11) */
.pane.prod .ti-btn:has(+ .price.solo), .pane.prod .ti-on:has(+ .price.solo) { margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; gap: 12px; }
.pane.prod .ti-btn:has(+ .price.solo) .ti-ico { width: 26px; height: 26px; }
.pane.prod .ti-btn + .price.solo, .pane.prod .ti-on + .price.solo { margin-top: 10px; }
.pane.prod .price.solo, .pane.prod .price.solo.sq { border-radius: 16px; }
.pane.prod .price.solo.sq { margin-top: 22px; }
.pane.prod .ti-btn + .price.solo.sq, .pane.prod .ti-on + .price.solo.sq { margin-top: 10px; }
.pane.prod .stk.ip.pdp, .pane.prod .stk.ip.pdp:has(+ .stk) { margin: 10px 0 14px; padding: 6px 8px 6px 12px; border-radius: 14px; box-shadow: none; border: 1px solid rgba(29, 63, 143, .14); }
.pane.prod .stk.ip.pdp.open .ipl ul.ipx { padding-bottom: 6px; }
/* карточка товара (06.11): Трейд Ин и iPack PRO — плашки одного размера; цена с полоской «В рассрочку» прилипает к нижнему краю экрана */
.pane.prod .ti-btn, .pane.prod .ti-on { margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; gap: 12px; min-height: 64px; box-sizing: border-box; }
.pane.prod .ti-btn .ti-ico { width: 26px; height: 26px; }
.pane.prod .stk.ip.ipk-btn { z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; margin: 10px 0 0; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid rgba(29, 63, 143, .14); box-shadow: none; font-size: 13px; cursor: default; }
.pane.prod .stk.ip.ipk-btn .ipk-i { flex: none; width: 26px; height: 26px; border: 1.6px solid rgba(29, 63, 143, .55); background: transparent; color: #1d3f8f; font: italic 700 14px/1 Georgia, 'Times New Roman', serif; cursor: pointer; }
.ipk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ipk-tx b { font-size: 15px; font-weight: 600; }
.ipk-tx small { margin-top: 2px; font-size: 12px; line-height: 1.3; opacity: .75; }
.pane.prod .stk.ip.ipk-btn > em { flex: none; font-style: normal; font-weight: 600; font-size: 14px; }
.pane.prod .stk.ip.ipk-btn.off { opacity: .6; }
.pane.prod .cashback { margin: 10px 0 0; }
.pbar { position: sticky; bottom: 0; z-index: 6; margin: 14px 0 14px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(118, 118, 128, .28); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06); }
.pane.prod .pbar .price.solo { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.pane.prod .pbar .price.solo:active { transform: none; background: #f4f4f6; }
.pinst { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-top: 1px solid rgba(118, 118, 128, .18); background: #eaf3fd; color: #24496b; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pinst:active { background: #dbe9f8; }
.pinst .chev { width: 7px; height: 7px; margin-left: 2px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.pane.prod .ti-btn .ti-t b, .pane.prod .ti-on .ti-t b { font-size: 15px; }
.pane.prod .ti-btn .ti-t small, .pane.prod .ipk-tx small { font-size: 11px; line-height: 1.3; }
.pane.prod .ipk-tx small { white-space: nowrap; }
.pane.prod .stk.ip.ipk-btn { gap: 10px; }
/* 06.11: Трейд Ин и iPack ровно одной высоты; цена прижата вплотную к нижнему краю экрана, снизу у карточки нет отступа */
.pane.prod .ti-btn, .pane.prod .ti-on, .pane.prod .stk.ip.ipk-btn { height: 68px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.pane.prod { padding-bottom: 0; }
.pane.prod .pbody, .pane.prod #pbody { margin-bottom: 0; padding-bottom: 0; }
.pane.prod .pbar { margin: 14px 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, .25); }
.pane.prod .pbar .pinst { height: calc(38px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }/* нижняя плашка: цена слева, кнопка «В корзину» справа */
.pbrow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: #fff; }
.pbp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pbp b { font-size: 26px; font-weight: 600; letter-spacing: -.4px; line-height: 1.1; white-space: nowrap; }
.pbp small { margin-top: 2px; font-size: 12px; color: var(--label); }
.pbuy { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.pbuy:active { transform: scale(.96); }/* 06.11: нижняя плашка как в Яндекс Лавке — на всю ширину экрана, белая, верхние углы скруглены; слева цена, справа большая кнопка */
body > .pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; overflow: visible; border: 0; border-radius: 24px 0 0 0; background: #fff; box-shadow: -1px -4px 24px rgba(0, 0, 0, .09), 0 -1px 0 rgba(0, 0, 0, .04); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
body > .pbar .pbrow { padding: 0; gap: 14px; }
body > .pbar .pbp { gap: 3px; }
body > .pbar .pbn { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
body > .pbar .pbn b { font-size: 30px; font-weight: 700; letter-spacing: -.6px; line-height: 1.05; color: var(--text); }
body > .pbar .pbn b.sale { color: #2f5f8a; }
body > .pbar .pbn s { font-size: 16px; font-weight: 500; color: var(--old, #9a9aa0); text-decoration-color: #2f5f8a; text-decoration-thickness: 1.5px; }
body > .pbar .pinst { display: inline-flex; align-self: flex-start; width: auto; height: auto; padding: 0; border: 0; background: none; color: #2f5f8a; font-size: 13px; font-weight: 500; gap: 4px; }
body > .pbar .pinst:active { background: none; opacity: .6; }
body > .pbar .pinst .chev { width: 6px; height: 6px; border-width: 1.5px 1.5px 0 0; }
body > .pbar .pbp small { margin: 0; font-size: 12px; }
body > .pbar .pbuy { height: 60px; min-width: 46%; padding: 0 20px; border-radius: 20px; background: #bcd9f7; color: #10263a; font-size: 17px; font-weight: 600; }
body > .pbar .pbuy:active { background: #a9cdf2; }
.pane.prod { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }body > .pbar .pbn b { font-size: 25px; letter-spacing: -.5px; }
body > .pbar .pinst { white-space: nowrap; font-size: 12px; }
body > .pbar .pbuy { min-width: 0; height: 56px; padding: 0 22px; border-radius: 18px; font-size: 16px; }body > .pbar .pbuy { padding: 0 18px; }
body > .pbar .pbp { overflow: hidden; }
/* плашка цены ниже всех шторок (Trade-In, рассрочка, iPack и т.д.), а пока шторка открыта — прячем её совсем */
body > .pbar { z-index: 30; }
body > .pbar { transition: transform .32s cubic-bezier(.2, .9, .25, 1); }
/* шторка открыта — плашка уезжает вниз; закрывается (класс on снят) — выезжает обратно вместе с ней */
body:has(> .sheet-bg.on) > .pbar { transform: translateY(calc(100% + 12px)); }
/* цена чёрная; после применённого Трейд Ина — зелёная */
body > .pbar .pbn b.sale { color: var(--text); }
body > .pbar .pbn b.ti-pop { color: #1f9d4c; }body > .pbar { border-radius: 24px 24px 0 0; } /* скруглены оба верхних угла */
.pane.prod .ti-on .ti-t b { font-size: 14px; line-height: 1.25; }
.pane.prod .ti-on .ti-t small { font-size: 12px; }
/* профиль в стиле настроек Telegram (06.11) */
.me { position: relative; }
.me-panel { position: absolute; top: 0; right: 0; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(118, 118, 128, .1); color: #8e8e93; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.me-panel:active { opacity: .6; }
.tg-list { display: grid; gap: 14px; margin: 18px 0 16px; }
.tg-grp { overflow: hidden; border-radius: 14px; background: #f2f2f7; }
.tg-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px 0 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15.5px; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tg-row:active { background: rgba(0, 0, 0, .05); }
.tg-row + .tg-row::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: .5px; background: rgba(60, 60, 67, .2); }
.tg-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.tg-ico.em { background: #fff; font-size: 17px; }
.tg-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-v { flex: none; color: #8e8e93; font-size: 15px; }
.tg-v [hidden] { display: none; }
.tg-row .chev { flex: none; width: 7px; height: 7px; margin-left: 2px; border: solid #c4c4c7; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.tg-sheet h3 { margin: 0 0 14px; text-align: center; }
.tg-sheet .tg-grp { margin-bottom: 14px; }
.tg-sheet .refcard { margin: 0 0 12px; }.tg-list { margin-left: var(--gutter, 16px); margin-right: var(--gutter, 16px); }
.me-panel { right: var(--gutter, 16px); }
.tg-h { margin: 4px 0 -6px 14px; font-size: 13px; font-weight: 400; color: #8e8e93; text-transform: uppercase; letter-spacing: .02em; }
/* рассрочка под ценой — маленькая кругленькая плашка с окантовкой */
body > .pbar .pbp { overflow: visible; gap: 5px; }
body > .pbar .pinst { align-items: center; padding: 3px 9px 3px 10px; border: 1px solid rgba(47, 95, 138, .3); border-radius: 999px; background: rgba(47, 95, 138, .06); font-size: 12px; line-height: 1.3; }
body > .pbar .pinst:active { background: rgba(47, 95, 138, .14); opacity: 1; }
body > .pbar .pbuy { font-size: 15.5px; padding: 0 16px; }body > .pbar .pbp { flex: 1 1 auto; min-width: 0; }
body > .pbar .pbuy { flex: 0 1 auto; padding: 0 14px; }
body > .pbar .pbuy { flex: none; width: 146px; padding: 0 8px; white-space: nowrap; } /* одна ширина и для «В корзину», и для «Добавить ещё» */
/* окно «Настроить устройства?» перед оформлением */
.sp-list { display: grid; gap: 8px; }
.sp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; border: 1px solid rgba(36, 73, 107, .14); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; }
.sp-row.on { border-color: rgba(36, 73, 107, .45); background: #eaf3fd; }
.sp-row img { flex: none; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #f5f5f7; }
.sp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-t small { font-size: 12px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row em { flex: none; font-style: normal; font-size: 13.5px; font-weight: 600; color: #24496b; }
.sp-row .su-ck { display: block; }.pm-row.su-row { margin-top: 12px; }
.pm-row.su-row b { color: var(--text); }
/* окна-шторки с кнопкой внизу: отступ над кнопкой и под ней (на iPhone снизу полоска «домой») */
.wd-sheet > .buy { margin-top: 14px; }
.wd-sheet { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.sp-t b { color: var(--text); }.ct-row { padding-left: 16px; }
.ct-row + .ct-row::before { left: 16px; }
.ct-note { margin: -4px 0 14px; text-align: center; }
/* кнопка «В корзину» на плашке цены: чёрная, как «Оформить заказ» и корзина в шапке, со значком сумки */
body > .pbar .pbuy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 56px; border-radius: 18px; background: #111; color: #fff; font-weight: 600; letter-spacing: -.1px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
body > .pbar .pbuy::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat; }
body > .pbar .pbuy:active { background: #2a2a2a; transform: scale(.97); }body > .pbar .pbuy.more::before { display: none; } /* «Добавить ещё» — без значка, иначе тесно */
/* рассрочка — строка во всю ширину под ценой и кнопкой: значок карты, «В рассрочку от … в месяц», стрелка */
body > .pbar .pinst { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 6px; width: 100%; height: auto; margin: 10px 0 0; padding: 8px 12px; border: 0; border-radius: 12px; background: #eef4fb; color: #24496b; font-size: 13px; font-weight: 500; white-space: nowrap; }
body > .pbar .pinst b { font-weight: 700; }
body > .pbar .pinst:active { background: #e1ecf8; opacity: 1; }
body > .pbar .pinst .chev { margin-left: 2px; }
.pi-ico { flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center / contain no-repeat; }
body > .pbar .pbn b { font-size: 27px; }
.pane.prod { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }body > .pbar .pbn b { font-size: 25px; }
body > .pbar .pbuy { width: 140px; }
body > .pbar .pbp { align-items: center; }
body > .pbar .pbn { justify-content: center; width: 100%; }
body > .pbar .pbn b { line-height: 1.1; }/* «Dynamic Island»: корзина в шапке раскрывается с мини-фото и названием добавленного товара */
.island { position: fixed; z-index: 70; overflow: hidden; background: #000; color: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); pointer-events: none; }
.is-in { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; }
.is-in img { flex: none; width: 40px; height: 40px; object-fit: contain; border-radius: 12px; background: #fff; padding: 3px; box-sizing: border-box; }
.is-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.is-t small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.is-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
/* поле промокода — чёрное, а не голубое */
.pm-box .ob-ico { background: #111; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); }
.pm-go { background: #111; }
.pm-code { color: #111; border-color: rgba(0, 0, 0, .35); }
/* плашка кешбека — градиент как у Apple Card: розово-белый, оранжевый, жёлтый, сиреневый и зелёный пятна */
.cashback { position: relative; overflow: hidden; color: #2a1c10;
  background:
    radial-gradient(70% 160% at 0% 100%, rgba(176, 120, 240, .95) 0%, rgba(176, 120, 240, 0) 60%),
    radial-gradient(45% 140% at 58% 115%, rgba(150, 205, 100, .9) 0%, rgba(150, 205, 100, 0) 60%),
    radial-gradient(55% 150% at 100% 0%, rgba(255, 249, 220, 1) 0%, rgba(255, 249, 220, 0) 60%),
    radial-gradient(55% 150% at 0% 0%, rgba(252, 228, 238, 1) 0%, rgba(252, 228, 238, 0) 60%),
    linear-gradient(115deg, #f5a46e 0%, #f3ae5c 40%, #f2c64e 75%, #f4d35e 100%); }
.cashback::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .28); pointer-events: none; }
.cashback > * { position: relative; z-index: 1; }
.cashback .cb-t b, .cashback .cb-n { color: #2a1c10; }
.cashback .cb-t small { color: rgba(42, 28, 16, .7); }/* переливание кешбека: пятна градиента медленно перетекают, как у Apple Card при наклоне телефона */
.cashback { background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 220% 220%; animation: cbFlow 8s ease-in-out infinite alternate; }
@keyframes cbFlow {
  0% { background-position: 0% 100%, 50% 100%, 100% 0%, 0% 0%, 0% 50%; }
  50% { background-position: 30% 60%, 80% 70%, 70% 30%, 30% 20%, 60% 50%; }
  100% { background-position: 60% 90%, 20% 80%, 90% 40%, 10% 30%, 100% 50%; }
}
/* блик, который медленно проходит по плашке */
.cashback::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: cbShine 6s ease-in-out infinite; pointer-events: none; }
@keyframes cbShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.cashback > * { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cashback, .cashback::before { animation: none; } }
/* без пролетающего блика (как у Трейд Ина) — только переливание цветов */
.cashback::before { content: none; animation: none; }

/* значок Трейд Ина: зеркалим, чтобы стрелки смотрели по часовой, и крутим по часовой — стрелки идут туда же, куда вращение */
.ti-btn .ti-ico { animation: tiSpinCw 6s linear infinite; }
@keyframes tiSpinCw { from { transform: scaleX(-1) rotate(0deg); } to { transform: scaleX(-1) rotate(-360deg); } }

/* Трейд Ин и iPack PRO — два одинаковых блока рядом: слева Трейд Ин, справа iPack; вместе на всю ширину */
.pduo { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
.pduo > * { margin: 0 !important; width: auto !important; height: auto !important; min-height: 132px !important; box-sizing: border-box; }
/* Трейд Ин: значок сверху, ниже название и подпись, стрелка в углу */
.pduo .ti-btn, .pduo .ti-on { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px !important; border-radius: 18px; text-align: left; }
.pduo .ti-btn .ti-ico, .pduo .ti-on .ti-ico { width: 30px !important; height: 30px !important; }
.pduo .ti-t { display: flex; flex-direction: column; gap: 3px; }
.pduo .ti-t b { font-size: 16px !important; line-height: 1.15; }
.pduo .ti-t small { font-size: 12px !important; line-height: 1.3; }
.pduo .ti-btn .chev { position: absolute; top: 16px; right: 14px; margin: 0; }
.pduo .ti-on .ti-x { position: absolute; top: 10px; right: 10px; }
.pduo .ti-on .ti-t b { padding-right: 22px; }
/* iPack: «i» и галочка сверху, ниже название, подпись и цена */
.pduo .stk.ip.ipk-btn { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: start; gap: 6px 8px; padding: 14px !important; border-radius: 18px; }
.pduo .stk.ip.ipk-btn .ipk-i { grid-column: 1; grid-row: 1; }
.pduo .stk.ip.ipk-btn .ck { grid-column: 2; grid-row: 1; justify-self: end; }
.pduo .stk.ip.ipk-btn .ipk-tx { grid-column: 1 / -1; grid-row: 2; align-self: end; }
.pduo .stk.ip.ipk-btn .ipk-tx small { white-space: normal; font-size: 12px; }
.pduo .stk.ip.ipk-btn > em { grid-column: 1 / -1; grid-row: 3; font-size: 16px; font-weight: 700; }
.pduo + .cashback { margin-top: 10px; }
/* «В рассрочку» — нежный апельсиновый */
body > .pbar .pinst { background: #fff1e3; color: #b8571a; }
body > .pbar .pinst:active { background: #ffe5cc; }
.pane.prod .ti-on .ti-t b { font-size: 15px !important; }

/* «В рассрочку» — ярко-оранжевый, белый текст */
body > .pbar .pinst { background: #ff7a00; color: #fff; box-shadow: 0 6px 14px -6px rgba(255, 122, 0, .6); }
body > .pbar .pinst:active { background: #e86d00; }

/* 07.11: в блоках Трейд Ин и iPack название наверху, крупно; стрелка «›» справа у названия */
.pduo .ti-btn, .pduo .ti-on { justify-content: flex-start !important; padding: 16px 14px !important; }
.pduo .ti-t { padding-right: 22px; }
.pduo .ti-t b { font-size: 18px !important; font-weight: 700; letter-spacing: -.2px; }
.pduo .ti-t small { margin-top: 2px; }
.pduo .ti-btn .chev { top: 20px !important; right: 16px !important; }
.pduo .ti-on .ti-x { top: 12px !important; right: 12px !important; }
.pduo .stk.ip.ipk-btn { grid-template-columns: 1fr auto !important; grid-template-rows: auto 1fr auto !important; padding: 16px 14px !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.pduo .stk.ip.ipk-btn:active { transform: scale(.98); }
.pduo .stk.ip.ipk-btn .ipk-tx { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; }
.pduo .stk.ip.ipk-btn .ipk-tx b { font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.pduo .stk.ip.ipk-btn .ipk-tx small { margin-top: 2px; }
.pduo .stk.ip.ipk-btn > .chev { grid-column: 2; grid-row: 1; justify-self: end; margin: 6px 2px 0 0; width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.pduo .stk.ip.ipk-btn > em { grid-column: 1 !important; grid-row: 3 !important; align-self: end; }
/* галочка iPack — квадрат со скруглением, чёрная, как корзина */
.pduo .stk.ip.ipk-btn .ck { grid-column: 2 !important; grid-row: 3 !important; align-self: end; justify-self: end; width: 30px; height: 30px; padding: 0; border: 2px solid #111; border-radius: 9px; background: #fff; box-shadow: none; animation: none; }
.pduo .stk.ip.ipk-btn .ck.on { border-color: #111; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); }
.pduo .stk.ip.ipk-btn .ck::before, .pduo .stk.ip.ipk-btn .ck::after { content: none !important; }/* iPack: стрелка в правом верхнем углу (как у Трейд Ина), название в одну строку, цена и галочка на одном уровне */
.pduo .stk.ip.ipk-btn { position: relative; }
.pduo .stk.ip.ipk-btn > .chev { position: absolute; top: 22px; right: 18px; margin: 0; }
.pduo .stk.ip.ipk-btn .ipk-tx { grid-column: 1 / -1 !important; padding-right: 18px; }
.pduo .stk.ip.ipk-btn .ipk-tx b { white-space: nowrap; }
.pduo .stk.ip.ipk-btn > em, .pduo .stk.ip.ipk-btn .ck { align-self: center !important; }
.pduo .stk.ip.ipk-btn > em { line-height: 30px; }
/* «− N +» вместо «Добавить ещё» */
.pqty { flex: none; display: flex; align-items: center; justify-content: space-between; width: 140px; height: 56px; border-radius: 18px; background: #111; color: #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); overflow: hidden; }
.pqty button { width: 46px; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 24px; font-weight: 500; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pqty button:active { background: rgba(255, 255, 255, .12); }
.pqty span { flex: 1; text-align: center; font-size: 18px; font-weight: 600; }
/* стрелка iPack ровно на уровне названия, как у Трейд Ина; подпись на всю ширину */
.pduo .stk.ip.ipk-btn > .chev { position: absolute !important; top: 24px !important; right: 18px !important; margin: 0 !important; transform: rotate(45deg) !important; }
.pduo .stk.ip.ipk-btn .ipk-tx { padding-right: 0 !important; }
.pduo .stk.ip.ipk-btn .ipk-tx b { padding-right: 20px; }
.pduo .stk.ip.ipk-btn > .chev { top: 4px !important; }

/* стрелка iPack — точно такая же, как у Трейд Ина (10×10, линия 2px) */
.pduo .stk.ip.ipk-btn > .chev { width: 10px !important; height: 10px !important; border-style: solid !important; border-width: 0 2px 2px 0 !important; transform: rotate(-45deg) !important; }
/* кешбек — оранжевый, переливается оттенками оранжевого */
.cashback { color: #fff;
  background:
    radial-gradient(60% 160% at 0% 100%, rgba(255, 150, 40, .95) 0%, rgba(255, 150, 40, 0) 60%),
    radial-gradient(45% 140% at 60% 115%, rgba(255, 90, 0, .85) 0%, rgba(255, 90, 0, 0) 60%),
    radial-gradient(55% 150% at 100% 0%, rgba(255, 190, 90, 1) 0%, rgba(255, 190, 90, 0) 60%),
    radial-gradient(55% 150% at 0% 0%, rgba(255, 170, 70, 1) 0%, rgba(255, 170, 70, 0) 60%),
    linear-gradient(115deg, #ff7a00 0%, #ff8c1a 45%, #ff6a00 100%); }
.cashback::after { background: rgba(255, 255, 255, .06); }
.cashback .cb-t b, .cashback .cb-n { color: #fff; }
.cashback .cb-t small { color: rgba(255, 255, 255, .85); }
/* «В рассрочку» — нежно-зелёный */
body > .pbar .pinst { background: #e6f6ec; color: #1a7f43; box-shadow: none; }
body > .pbar .pinst:active { background: #d4efdf; }
/* галочка iPack — того же синего, что и текст в блоке iPack */
.pduo .stk.ip.ipk-btn .ck { border-color: #1d3f8f !important; }
.pduo .stk.ip.ipk-btn .ck.on { background-color: #1d3f8f !important; box-shadow: 0 4px 10px -4px rgba(29, 63, 143, .5) !important; }

/* кешбек — вкладка, выглядывающая из-под плашки цены (плашка на неё наслаивается), без значка */
body > .pbar { background: transparent !important; box-shadow: none !important; }
body > .pbar::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: #fff; box-shadow: 0 -4px 24px rgba(0, 0, 0, .09), 0 -1px 0 rgba(0, 0, 0, .04); }
body > .pbar > :not(.pcb) { position: relative; z-index: 1; }
body > .pbar .pcb { position: absolute; left: 16px; right: 16px; bottom: 100%; z-index: -1; margin: 0 0 -22px; padding: 10px 16px 32px; border-radius: 18px 18px 0 0; gap: 10px; }
body > .pbar .pcb .cb-t b { font-size: 14px; }
body > .pbar .pcb .cb-n { font-size: 16px; }
.pane.prod { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }body:has(> .sheet-bg.on) > .pbar { transform: translateY(calc(100% + 70px)); } /* вместе с выглядывающим кешбеком */

/* вкладка кешбека — на всю ширину плашки цены и на 35% ниже */
body > .pbar .pcb { left: 0; right: 0; padding: 5px 20px 27px; border-radius: 24px 24px 0 0; }
body > .pbar .pcb .cb-t b { font-size: 13px; }
body > .pbar .pcb .cb-n { font-size: 14px; }
body > .pbar .pcb { left: 16px; right: 16px; border-radius: 18px 18px 0 0; } /* ширина как раньше, высота — новая */
body > .pbar .pcb { left: 6px; right: 6px; border-radius: 22px 22px 0 0; } /* чуть шире: почти до краёв плашки цены */

/* кешбек — верхняя полоса самой плашки цены; сумма слева */
body > .pbar .pcb { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 1 !important; display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: -12px -16px 12px; padding: 8px 20px; border-radius: 24px 24px 0 0 !important; }
body > .pbar .pcb .cb-n { order: -1; font-size: 15px; }
body > .pbar .pcb .cb-t b { font-size: 13px; font-weight: 500; opacity: .95; }
.pane.prod { padding-bottom: calc(185px + env(safe-area-inset-bottom)); }
body:has(> .sheet-bg.on) > .pbar { transform: translateY(calc(100% + 12px)); }
/* кешбек под ценой: маленькая оранжевая плашка «+N Кешбек 5%» */
.pcb2 { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(115deg, #ff7a00, #ff9a2e); color: #fff; white-space: nowrap; box-shadow: 0 3px 8px -3px rgba(255, 122, 0, .55); }
.pcb2 .cb-n { order: -1; font-size: 13px; font-weight: 700; }
.pcb2 .cb-t b { font-size: 11.5px; font-weight: 500; }
.pane.prod { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }.pcb2 { max-width: 100%; box-sizing: border-box; }
.pcb2 { overflow: hidden; }
/* кешбек под ценой — меньше, нежнее; цена чуть ниже */
.pcb2 { gap: 4px; margin-top: 5px; padding: 2px 8px; background: linear-gradient(115deg, #ff9f52, #ffb877); box-shadow: 0 2px 6px -2px rgba(255, 140, 50, .45); }
.pcb2 .cb-n { font-size: 11.5px; }
.pcb2 .cb-t b { font-size: 10.5px; font-weight: 500; }
body > .pbar .pbn { margin-top: 6px; }.pcb2 { display: flex; justify-content: center; width: 100%; border-radius: 10px; padding: 4px 8px; } /* прямоугольник со скруглением, как у строки рассрочки */
/* кешбек под ценой — в том же стиле, что строка рассрочки: светлый фон, цветной текст, те же скругления и отступы */
.pcb2 { display: flex; justify-content: center; align-items: center; gap: 5px; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 6px 10px; border-radius: 12px; background: #fff1e3; color: #c2611a; box-shadow: none; }
.pcb2 .cb-n { font-size: 13px; font-weight: 700; color: #c2611a; }
.pcb2 .cb-t b { font-size: 13px; font-weight: 500; color: #c2611a; }.pcb2 { gap: 4px; padding: 6px 6px; white-space: nowrap; }
.pcb2 .cb-n { font-size: 12px; }
.pcb2 .cb-t b { font-size: 11.5px; }
/* нижняя плашка: низ кешбека ровно по низу кнопки, цена опущена вплотную к кешбеку */
body > .pbar .pbrow { align-items: stretch; }
body > .pbar .pbp { justify-content: flex-end; }
body > .pbar .pbn { margin-top: 0; }
body > .pbar .pcb2 { margin-top: 4px; }body > .pbar .pqty, body > .pbar .pbuy { height: auto !important; min-height: 56px; align-self: stretch; } /* кнопка по высоте колонки цены: низ ровно по низу кешбека */
/* Трейд Ин: без пролетающего блика — тёмный градиент медленно переливается */
.ti-btn::after { content: none !important; animation: none !important; }
.ti-btn { background: linear-gradient(120deg, #141a24 0%, #1c2c44 30%, #2f5f8a 55%, #1c2c44 78%, #141a24 100%) !important; background-size: 260% 260% !important; animation: tiFlow 9s ease-in-out infinite alternate; }
@keyframes tiFlow { 0% { background-position: 0% 30%; } 50% { background-position: 70% 70%; } 100% { background-position: 100% 40%; } }
@media (prefers-reduced-motion: reduce) { .ti-btn { animation: none; } }/* окно «Рассрочка» — зелёное, как строка рассрочки */
.wd-sheet[aria-label="Рассрочка"] .wd-hero { background: linear-gradient(145deg, #34b46a, #1a7f43); box-shadow: 0 14px 26px -16px rgba(26, 127, 67, .8); }
.wd-sheet[aria-label="Рассрочка"] .wd-s h5 { color: #1a7f43; }/* кешбек в корзине — как в карточке: светлый персиковый фон, оранжевый текст, без переливания */
.cart-cb { background: #fff1e3 !important; color: #c2611a; animation: none !important; }
.cart-cb::after, .cart-cb::before { content: none !important; }
.cart-cb .cb-t b, .cart-cb .cb-n { color: #c2611a !important; }
.cart-cb .cb-t small { color: rgba(194, 97, 26, .75) !important; }.pm-off { flex: none; font-style: normal; font-size: 16px; font-weight: 700; color: #1f9d4c; margin-left: auto; }
.pm-box.on .ob-t { flex: 1; min-width: 0; }
.pm-off.pm-gf { font-size: 13px; font-weight: 600; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Трейд Ин: переливание без лагов — градиент на отдельном слое двигается трансформацией (видеокарта), а не перерисовкой фона;
   при удержании iOS не подсвечивает и не выделяет кнопку */
.ti-btn { animation: none !important; background: #141a24 !important; isolation: isolate; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ti-btn::before { content: ''; position: absolute; z-index: -1; top: -60%; left: -60%; width: 220%; height: 220%; background: linear-gradient(120deg, #141a24 0%, #1c2c44 30%, #2f5f8a 50%, #1c2c44 70%, #141a24 100%); will-change: transform; animation: tiFlow2 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes tiFlow2 { 0% { transform: translate3d(-18%, -10%, 0); } 50% { transform: translate3d(8%, 6%, 0); } 100% { transform: translate3d(18%, -4%, 0); } }
.ti-btn > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ti-btn::before { animation: none; } }.sp-row { box-sizing: border-box; max-width: 100%; }
/* корзина: язычок «Оформить» внизу, на всю ширину экрана; под ним место, чтобы низ корзины не прятался */
body > .pbar.cbar { left: 0 !important; }
body:has(> .pbar.cbar) main { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }body > .pbar.cbar .pcb2 { justify-content: center; }
.pcb2 { justify-content: center !important; }
.pcb2 .cb-t, .pcb2 .cb-n { flex: none !important; margin: 0 !important; } /* надпись кешбека по центру плашки */
/* язычок корзины: «Итого» и сумма с кешбеком под ней, ниже «Оформить заказ» во всю ширину */
body > .pbar.cbar .cb-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body > .pbar.cbar .cb-lbl { font-size: 22px; font-weight: 600; }
body > .pbar.cbar .pbp { flex: none; display: flex; flex-direction: column; align-items: stretch; }
body > .pbar.cbar .pbn { justify-content: center; }
body > .pbar.cbar .pbn b { font-size: 26px !important; }
body > .pbar.cbar .cb-go { position: relative; z-index: 1; display: block; width: 100%; height: 54px; margin: 0; }
body:has(> .pbar.cbar) main { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }/* язычок корзины, компактно: слева «Итого», сумма и кешбек столбиком, справа большая кнопка */
body > .pbar.cbar { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) 20px; }
body > .pbar.cbar .cb-row { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 14px; }
body > .pbar.cbar .cb-l { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
body > .pbar.cbar .cb-lbl { font-size: 13px; font-weight: 500; color: var(--label, #8e8e93); line-height: 1.2; }
body > .pbar.cbar .pbn { justify-content: flex-start; width: auto; margin: 1px 0 0; }
body > .pbar.cbar .pbn b { font-size: 25px !important; line-height: 1.15; letter-spacing: -.5px; white-space: nowrap; }
body > .pbar.cbar .pcb2 { display: inline-flex; width: auto; margin-top: 5px; padding: 3px 9px; border-radius: 8px; justify-content: flex-start !important; }
body > .pbar.cbar .pcb2 .cb-n, body > .pbar.cbar .pcb2 .cb-t b { font-size: 12px; }
body > .pbar.cbar .cb-go { flex: none; width: 46%; min-height: 64px; margin: 0; padding: 0 12px; border: 0; border-radius: 20px; background: #111; color: #fff; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
body > .pbar.cbar .cb-go:active { transform: scale(.97); }
body:has(> .pbar.cbar) main { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }body > .pbar.cbar .cb-note { position: relative; z-index: 1; margin: 10px 0 0; font-size: 11.5px; line-height: 1.35; color: #8e8e93; text-align: center; }
body:has(> .pbar.cbar) main { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
body > .pbar.cbar .cb-go { white-space: nowrap; font-size: 15px; padding: 0 10px; width: 48%; } /* «Оформить заказ» в одну строку */
/* язычок корзины: сверху «Итого» и сумма (кешбек справа), под ними широкая кнопка «Оформить заказ» */
body > .pbar.cbar .cb-row { flex-direction: column; align-items: stretch; gap: 12px; }
body > .pbar.cbar .cb-l { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 10px; }
body > .pbar.cbar .cb-lbl { grid-column: 1; grid-row: 1; }
body > .pbar.cbar .pbn { grid-column: 1; grid-row: 2; }
body > .pbar.cbar .pcb2 { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
body > .pbar.cbar .cb-go { width: 100%; min-height: 0; height: 54px; font-size: 16px; }.esim-ico { display: inline-block; height: .78em; width: auto; margin-left: .3em; vertical-align: -.02em; } /* значок eSIM у iPhone Air и Duo */
.esim-ico { height: 1.05em; margin-left: .35em; vertical-align: -.12em; }
.gallery { position: relative; }
.esim-badge { position: absolute; top: 14px; right: 14px; z-index: 3; height: 26px; width: auto; pointer-events: none; } /* значок eSIM на фото iPhone Air и Duo, справа сверху */
.esim-ico { height: .78em; margin-left: .3em; vertical-align: -.02em; } /* как в первом варианте: рядом с названием */
.pcb2 .cb-t { order: -1 !important; }
.pcb2 .cb-n { order: 0 !important; } /* сначала «Кешбек 5%», потом сумма */

/* язычок корзины: слева крупно «Итого», справа сумма, под ней кешбек и рассрочка; ниже широкая кнопка и подпись */
body > .pbar.cbar { padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); }
body > .pbar.cbar .cb2 { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
body > .pbar.cbar .cb2-l { font-size: 26px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; padding-top: 2px; }
body > .pbar.cbar .cb2-r { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
body > .pbar.cbar .cb2-r .pbn { justify-content: flex-end; width: auto; margin: 0; }
body > .pbar.cbar .cb2-r .pbn b { font-size: 26px !important; line-height: 1.15; letter-spacing: -.5px; white-space: nowrap; }
body > .pbar.cbar .cb2-r .pcb2 { display: flex; width: 100%; margin: 0; padding: 6px 8px; border-radius: 12px; justify-content: center !important; }
body > .pbar.cbar .cb2-r .pcb2 .cb-n, body > .pbar.cbar .cb2-r .pcb2 .cb-t b { font-size: 12.5px; }
body > .pbar.cbar .cb2-r .pinst { width: 100%; margin: 0; }
body > .pbar.cbar .cb2-r .pinst[hidden] { display: none; }
body > .pbar.cbar > .cb-go { position: relative; z-index: 1; display: block; width: 100%; height: auto; min-height: 56px; margin: 12px 0 0; padding: 0 12px; border: 0; border-radius: 18px; background: #111; color: #fff; font: inherit; font-size: 17px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
body > .pbar.cbar > .cb-go:active { transform: scale(.97); }
body > .pbar.cbar .cb-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.35; text-align: center; width: 100%; }
body:has(> .pbar.cbar) main { padding-bottom: calc(250px + env(safe-area-inset-bottom)); }
/* галочка iPack в корзине — как на карточке товара: скруглённый квадрат цвета iPack */
.stk.ip .ck.ck2, .stk.ip .ck.ck2:not(.on) { width: 30px; height: 30px; padding: 0; box-sizing: border-box; border: 2px solid #1d3f8f; border-radius: 9px; background: #fff; box-shadow: none; animation: none; transform: none; margin-right: 0; }
.stk.ip .ck.ck2.on { border-color: #1d3f8f; background: #1d3f8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; box-shadow: 0 4px 10px -4px rgba(29, 63, 143, .5); }
.stk.ip .ck.ck2::before, .stk.ip .ck.ck2::after { content: none !important; }
/* кешбек — нежно-фиолетовый везде */
.pcb2, body > .pbar .pcb2 { background: #f1eafe !important; color: #6a3fc8 !important; box-shadow: none !important; }
.pcb2 .cb-n, .pcb2 .cb-t b { color: #6a3fc8 !important; }
.cart-cb { background: #f1eafe !important; color: #6a3fc8; }
.cart-cb .cb-t b, .cart-cb .cb-n { color: #6a3fc8 !important; }

/* язычок корзины v3: ровная сетка — строка итога, две равные плитки, кнопка, подпись */
body > .pbar.cbar { padding: 16px 16px calc(12px + env(safe-area-inset-bottom)); }
body > .pbar.cbar .cb3-top { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body > .pbar.cbar .cb3-l { font-size: 20px; font-weight: 600; color: #111; }
body > .pbar.cbar .cb3-top .pbn { width: auto; margin: 0; justify-content: flex-end; }
body > .pbar.cbar .cb3-top .pbn b { font-size: 28px !important; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; white-space: nowrap; }
body > .pbar.cbar .cb3 { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 12px; }
body > .pbar.cbar .cb3-t { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 9px 12px; border: 0; border-radius: 14px; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
body > .pbar.cbar .cb3-t[hidden] { display: none; }
body > .pbar.cbar .cb3-t small { font-size: 12px; font-weight: 500; opacity: .85; line-height: 1.2; }
body > .pbar.cbar .cb3-t b { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body > .pbar.cbar .cb3-cb { background: #f1eafe; color: #6a3fc8; }
body > .pbar.cbar .cb3-in { background: #e6f6ec; color: #1a7f43; cursor: pointer; padding-right: 28px; }
body > .pbar.cbar .cb3-in:active { transform: scale(.97); }
body > .pbar.cbar .cb3-in .chev { position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin: 0; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); background: none; }
body > .pbar.cbar > .cb-go { margin-top: 12px; }
body > .pbar.cbar .cb-note { margin-top: 9px; font-size: 13px; color: #8e8e93; }
body:has(> .pbar.cbar) main { padding-bottom: calc(240px + env(safe-area-inset-bottom)); }

/* кнопка «Оформить заказ» — как «В корзину» на карточке; текст плиток кешбека и рассрочки по центру */
body > .pbar.cbar > .cb-go { height: 60px; min-height: 60px; border-radius: 18px; font-size: 16px; letter-spacing: -.1px; }
body > .pbar.cbar .cb3-t { align-items: center; text-align: center; }
body > .pbar.cbar .cb3-in { padding-left: 24px; padding-right: 24px; }
body > .pbar.cbar .cb3-l { font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; } /* «Итого» крупно, вровень с суммой */
/* плитка кешбека: значок баллов (кольцо) рядом с суммой, чтобы не было пусто */
body > .pbar.cbar .cb3-v { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
body > .pbar.cbar .cb3-ring { width: 20px; height: 20px; object-fit: contain; flex: none; }
/* плитки кешбека и рассрочки — одинаковые: две равные колонки, обе со стрелкой, кешбек открывает баллы */
body > .pbar.cbar .cb3 { display: grid; grid-template-columns: 1fr 1fr; }
body > .pbar.cbar .cb3:has(> .cb3-in[hidden]) { grid-template-columns: 1fr; }
body > .pbar.cbar .cb3-t { box-sizing: border-box; width: 100%; min-height: 56px; justify-content: center; padding: 9px 24px; cursor: pointer; }
body > .pbar.cbar .cb3-t:active { transform: scale(.97); }
body > .pbar.cbar .cb3-t .chev { position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin: 0; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); background: none; }
/* плитки кешбека и рассрочки ниже на 25% (56 → 42 px) */
body > .pbar.cbar .cb3-t { min-height: 42px; padding-top: 5px; padding-bottom: 5px; gap: 1px; border-radius: 12px; }
body > .pbar.cbar .cb3-t small { font-size: 11px; line-height: 1.1; }
body > .pbar.cbar .cb3-t b { font-size: 14.5px; line-height: 1.15; }
body > .pbar.cbar .cb3 { margin-top: 10px; }
/* в корзине вместо суммы сверху — кнопка «‹ В магазин» */
.cart-pill.to-shop { display: inline-flex; align-items: center; gap: 6px; padding-left: 14px; padding-right: 18px; text-decoration: none; }
.cart-pill.to-shop .ts-ch { width: 8px; height: 8px; border: solid #fff; border-width: 0 0 2.2px 2.2px; transform: rotate(45deg); margin-left: 3px; }
/* плитки кешбека и рассрочки ещё на 10% ниже (42 → 38 px) */
body > .pbar.cbar .cb3-t { min-height: 38px; padding-top: 3px; padding-bottom: 3px; gap: 0; }
/* магазин баллов: тёмная карта с балансом, крестик закрытия всегда на виду, сегменты как в iOS, фиолетовые акценты */
.pt2 { padding-top: 14px; }
.pt2 .pt-x { position: sticky; top: 6px; z-index: 6; display: block; width: 32px; height: 32px; margin: 0 6px -32px auto; padding: 0; border: 0; border-radius: 50%; background: rgba(60, 60, 67, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pt2 .pt-x::before, .pt2 .pt-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.pt2 .pt-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pt2 .pt-x:active { transform: scale(.9); }
.pt-hero { position: relative; overflow: hidden; margin: 0 0 16px; padding: 20px 20px 18px; border-radius: 24px; color: #fff; text-align: left; background: radial-gradient(130% 150% at 100% 0%, #7b4fe0 0%, rgba(123, 79, 224, 0) 55%), radial-gradient(120% 130% at 0% 100%, #2a1760 0%, rgba(42, 23, 96, 0) 60%), #0d0b14; box-shadow: 0 18px 40px -20px rgba(106, 63, 200, .75), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pt-hero::after { content: ''; position: absolute; inset: -40%; background: radial-gradient(closest-side, rgba(176, 140, 255, .35), rgba(176, 140, 255, 0)); animation: ptGlow 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ptGlow { from { transform: translate(-25%, 10%); } to { transform: translate(25%, -10%); } }
@media (prefers-reduced-motion: reduce) { .pt-hero::after { animation: none; } }
.pt-hero > * { position: relative; z-index: 1; }
.pth-l { display: block; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; opacity: .65; }
.pth-n { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.pth-n img { width: 30px; height: 30px; object-fit: contain; filter: invert(1); }
.pth-n b { font-size: 42px; font-weight: 700; letter-spacing: -1.4px; line-height: 1; }
.pth-n span { align-self: flex-end; margin-bottom: 4px; font-size: 16px; font-weight: 500; opacity: .75; }
.pt-hero small { display: block; margin-top: 10px; font-size: 13px; opacity: .65; }
.pt2 .pt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; padding: 3px; border-radius: 14px; background: #f0eef5; }
.pt2 .pt-tabs .chip { height: 36px; margin: 0; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #8e8e93; font-weight: 600; box-shadow: none; transition: background .2s, color .2s; }
.pt2 .pt-tabs .chip.on { background: #fff; color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.pt2 .reward { background: #f7f5fc; border-radius: 20px; }
.pt2 .reward.ok { background: #f1eafe; box-shadow: inset 0 0 0 1.5px rgba(106, 63, 200, .35); }
.pt2 .rw-pic { background: #fff; border-radius: 14px; }
.pt2 .rw-p { padding: 4px 9px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; }
.pt2 .rw-bar { background: rgba(106, 63, 200, .12); }
.pt2 .rw-bar i { background: linear-gradient(90deg, #a27bff, #6a3fc8); }
.pt2 .rw-cap { color: #6a3fc8; opacity: .85; }
.pt2 #ptClose { margin-top: 14px; }
/* магазин баллов спокойнее: светлая карта без перелива и тени, ровный текст */
.pt-hero { background: #f4f0fd; color: #1c1530; box-shadow: none; padding: 18px 18px 16px; border-radius: 20px; }
.pt-hero::after { content: none; animation: none; }
.pth-l { color: #6a3fc8; opacity: 1; letter-spacing: .3px; text-transform: none; font-size: 13px; }
.pth-n { margin-top: 6px; gap: 8px; }
.pth-n img { width: 24px; height: 24px; filter: none; }
.pth-n b { font-size: 34px; letter-spacing: -1px; }
.pth-n span { font-size: 15px; opacity: .6; margin-bottom: 3px; }
.pt-hero small { margin-top: 6px; color: #6b6878; opacity: 1; }
.pt2 .pt-x { background: rgba(120, 120, 128, .16); }
.pt2 .pt-x::before, .pt2 .pt-x::after { background: #3c3c43; }
.pt2 .reward, .pt2 .reward.ok { background: #f6f6f8; box-shadow: none; }
.pt2 .rw-bar { background: rgba(0, 0, 0, .07); }
.pt2 .rw-bar i { background: #6a3fc8; }
.pt2 .rw-cap { color: #8e8e93; }
.pt2 .reward.ok .rw-cap { color: #6a3fc8; }
/* магазин баллов — золотая середина: мягкий фиолетовый градиент, крупное кольцо-водяной знак, лёгкая тень, без анимации */
.pt-hero { background: linear-gradient(135deg, #e9defe 0%, #f6f1ff 55%, #efe7ff 100%); color: #1c1530; box-shadow: 0 10px 26px -16px rgba(106, 63, 200, .55), inset 0 0 0 1px rgba(106, 63, 200, .10); padding: 20px 20px 18px; border-radius: 22px; }
.pt-hero::after { content: ''; position: absolute; inset: auto -38px -58px auto; width: 170px; height: 170px; background: url("img/ring.png?v=5") center / contain no-repeat; opacity: .07; transform: rotate(-18deg); animation: none; pointer-events: none; }
.pth-l { color: #6a3fc8; font-weight: 600; }
.pth-n b { font-size: 38px; color: #2a1760; }
.pth-n span { color: #6a3fc8; opacity: .8; }
.pt2 .reward.ok { background: #f4effe; box-shadow: inset 0 0 0 1.5px rgba(106, 63, 200, .25); }
.pt2 .rw-bar i { background: linear-gradient(90deg, #a27bff, #6a3fc8); }
.pt2 .rw-p { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
/* награды: один сгруппированный список (как настройки iOS), строки через тонкие линии */
.pt2 #shopBox { display: block; padding: 0; border-radius: 20px; background: #f6f6f8; overflow: hidden; }
.pt2 .reward.rw2 { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.pt2 .reward.rw2:active { background: rgba(0, 0, 0, .04); }
.pt2 .reward.rw2 + .reward.rw2::before { content: ''; position: absolute; top: 0; left: 82px; right: 0; height: 1px; background: rgba(60, 60, 67, .12); }
.pt2 .rw2 .rw-pic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0; border-radius: 14px; background: #fff; overflow: hidden; }
.pt2 .rw2 .rw-pic img { width: 82%; height: 82%; object-fit: contain; }
.pt2 .rw2-m { display: flex; flex-direction: column; min-width: 0; }
.pt2 .rw2-m b { font-size: 15px; font-weight: 600; line-height: 1.25; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2 .rw2-m small { margin-top: 1px; font-size: 12.5px; color: #8e8e93; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2 .rw2-g { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pt2 .rw2-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(60, 60, 67, .12); overflow: hidden; }
.pt2 .rw2-bar i { display: block; height: 100%; border-radius: 4px; background: #6a3fc8; }
.pt2 .rw2-g em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; color: #8e8e93; font-variant-numeric: tabular-nums; }
.pt2 .rw2-ok { align-self: flex-start; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #6a3fc8; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.5; }
.pt2 .rw2-p { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pt2 .rw2-p b { font-size: 15px; font-weight: 700; color: #111; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt2 .rw2-p small { font-size: 11.5px; color: #8e8e93; }
.pt2 .rw2.ok .rw2-p b { color: #6a3fc8; }

.pt2 .rw2-m b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* длинные названия — в две строки, без обрезки */
/* магазин баллов: фиолетовый приглушён до дымчато-лавандового */
.pt-hero { background: linear-gradient(135deg, #f0edf6 0%, #f8f7fb 60%, #f2f0f7 100%); box-shadow: 0 8px 22px -16px rgba(60, 50, 90, .35), inset 0 0 0 1px rgba(60, 50, 90, .06); }
.pt-hero::after { opacity: .05; }
.pth-l { color: #7a6f96; }
.pth-n b { color: #1c1c1e; }
.pth-n span { color: #7a6f96; opacity: 1; }
.pt2 .rw2-bar i { background: #8e82b4; }
.pt2 .rw2-ok { background: #7a6f96; }
.pt2 .rw2.ok .rw2-p b { color: #5f557d; }
/* магазин баллов: фиолетовый на 22% ярче приглушённого */
.pt-hero { background: linear-gradient(135deg, #eeeaf8 0%, #f8f6fc 60%, #f0edf8 100%); box-shadow: 0 8px 22px -16px rgba(80, 55, 140, .4), inset 0 0 0 1px rgba(80, 55, 140, .07); }
.pth-l, .pth-n span { color: #7664a1; }
.pt2 .rw2-bar i { background: #8673b8; }
.pt2 .rw2-ok { background: #7664a1; }
.pt2 .rw2.ok .rw2-p b { color: #61508d; }
/* магазин баллов: тот же фиолетовый, что у плашки кешбека (#f1eafe / #6a3fc8) */
.pt-hero { background: #f1eafe; box-shadow: none; }
.pt-hero::after { opacity: .06; }
.pth-l, .pth-n span { color: #6a3fc8; }
.pth-n b { color: #1c1c1e; }
.pt2 .rw2-bar i { background: #6a3fc8; }
.pt2 .rw2-ok { background: #f1eafe; color: #6a3fc8; }
.pt2 .rw2.ok .rw2-p b { color: #6a3fc8; }

/* плашки корзины как в карточке товара: узкие, в одну строку; рассрочка слева и длиннее, кешбек справа и короче */
body > .pbar.cbar .cb4 { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 10px; }
body > .pbar.cbar .cb4-t { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 11px; font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
body > .pbar.cbar .cb4-t:active { transform: scale(.97); }
body > .pbar.cbar .cb4-t[hidden] { display: none; }
body > .pbar.cbar .cb4-t b { font-weight: 700; }
body > .pbar.cbar .cb4-x { overflow: hidden; text-overflow: ellipsis; }
body > .pbar.cbar .cb4-in { flex: 1 1 auto; background: #e6f6ec; color: #1a7f43; padding-right: 22px; }
body > .pbar.cbar .cb4-in .pi-ico { flex: none; }
body > .pbar.cbar .cb4-in .chev { position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin: 0; border: solid currentColor; border-width: 1.8px 1.8px 0 0; transform: translateY(-50%) rotate(45deg); background: none; }
body > .pbar.cbar .cb4-cb { flex: 0 0 auto; background: #f1eafe; color: #6a3fc8; }
body > .pbar.cbar .cb4:has(> .cb4-in[hidden]) .cb4-cb { flex: 1 1 auto; }

body > .pbar.cbar .cb4-t { padding: 0 9px; font-size: 12.5px; }
body > .pbar.cbar .cb4-in { padding-right: 20px; }

/* стрелочка и у кешбека — как у рассрочки */
body > .pbar.cbar .cb4-cb { padding-right: 20px; }
body > .pbar.cbar .cb4-cb .chev { position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin: 0; border: solid currentColor; border-width: 1.8px 1.8px 0 0; transform: translateY(-50%) rotate(45deg); background: none; }
/* переключатель как «ликвид» на iOS, но в светлой гамме магазина: капсула светло-серая с тонкой кромкой, выбранный вариант — белая выпуклая плашка, текст тёмный, без синего */
.chips { padding: 4px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .07); background: #f0f0f3;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .9); }
.chips .chip { min-height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #3a3a3c; }
.chip.on, .gl-t.on, .gl-t.near, .chip.near { color: #111; font-weight: 600; }
.chips:has(.near) .chip.on:not(.near) { color: #3a3a3c; }
.gl-ind { border-radius: 999px; background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .08), 0 3px 10px -2px rgba(20, 30, 60, .16), 0 1px 2px rgba(0, 0, 0, .06); }
.gl-ind::after { opacity: .5; }
.gl-ind.drag { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .1), 0 10px 22px -6px rgba(20, 30, 60, .28), 0 2px 4px rgba(0, 0, 0, .08); }
.gl-t { font-size: 14px; color: #3a3a3c; }
.pt2 .pt-tabs { border-radius: 999px; background: #f0f0f3; border: 1px solid rgba(0, 0, 0, .07); padding: 4px; }
.pt2 .pt-tabs .chip { height: 40px; border-radius: 999px; color: #3a3a3c; }
.pt2 .pt-tabs .chip.on { background: #fff; color: #111; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 3px 10px -2px rgba(20, 30, 60, .16), 0 1px 2px rgba(0, 0, 0, .06); }
/* переключатель на 15% ниже (просьба владельца): капсула 50 → 43 px */
.chips { padding: 3.5px; }
.chips .chip { min-height: 34px; }
.pt2 .pt-tabs { padding: 3.5px; }
.pt2 .pt-tabs .chip { height: 34px; }

/* переключатель: без тени под выбранной плашкой (просьба владельца), остаётся только тонкая кромка */
.gl-ind, .gl-ind.drag { box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .08); }
.pt2 .pt-tabs .chip.on { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
/* переключатель: плашка ровно посередине по высоте — целый отступ (дробный сдвигал её вниз) и без внутренней тени сверху у капсулы */
.chips, .pt2 .pt-tabs { padding: 4px; box-shadow: none; }
.chips .chip { min-height: 33px; }
.pt2 .pt-tabs .chip { height: 33px; }
/* переключатель совсем без теней и бликов (просьба владельца): плоская белая плашка с тонкой кромкой на плоской серой капсуле */
.chips, .pt2 .pt-tabs { box-shadow: none; }
.gl-ind, .gl-ind.drag { background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.gl-ind::after { display: none; }
.pt2 .pt-tabs .chip.on { background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
/* без приближения двойным тапом */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* SIM: строка выбора на 15% уже, справа кнопка «i» с объяснением eSIM / SIM+eSIM */
.pbody .opt.sim-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pbody .opt.sim-opt .chips { flex: none; width: 85%; }
.sim-i { flex: none; width: 30px; height: 30px; padding: 0; border: 1.5px solid #1d3f8f; border-radius: 50%; background: rgba(29, 63, 143, .08); color: #1d3f8f; font: inherit; font-size: 15px; font-weight: 700; font-style: italic; line-height: 1; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sim-i:active { transform: scale(.94); }
/* магазин баллов: метка «Можно обменять» чёрная */
.pt2 .rw2-ok { background: #111; color: #fff; }
/* «Подробнее о товаре» с айпарк.рф: раскрывается и сворачивается */
.pdesc { margin: 18px 0 8px; border-radius: 16px; background: #f5f5f7; overflow: hidden; }
.pdesc summary { position: relative; display: block; padding: 15px 44px 15px 16px; font-size: 15px; font-weight: 600; color: #111; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdesc summary::-webkit-details-marker { display: none; }
.pdesc summary .chev { position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin: 0; border: solid #8e8e93; border-width: 0 2px 2px 0; background: none; transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.pdesc[open] summary .chev { transform: translateY(-30%) rotate(-135deg); }
.pd-t { padding: 0 16px 16px; font-size: 14px; line-height: 1.5; color: #3a3a3c; }
.pd-t p { margin: 0 0 10px; }
.pd-t p:last-child { margin-bottom: 0; }

/* SIM: строка на 5% длиннее (90%), «i» ровная, без наклона */
.pbody .opt.sim-opt .chips { width: 90%; }
.sim-i { font-style: normal; font-weight: 700; font-size: 16px; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; padding-top: 1px; }/* строка SIM занимает всё место до кнопки «i» (около 89%), кнопка не вылезает за край */
.pbody .opt.sim-opt { gap: 8px; }
.pbody .opt.sim-opt .chips { flex: 1 1 auto; width: auto; min-width: 0; }
.sim-i { width: 27px; height: 27px; font-size: 15px; }
/* баланс баллов: подписи чёрные, «балла» стоит на одной линии с низом цифр */
.pth-l, .pth-n span { color: #1c1c1e; opacity: 1; }
.pth-n { align-items: baseline; }
.pth-n img { align-self: center; }
.pth-n b, .pth-n span { align-self: baseline; margin-bottom: 0; }/* строка SIM — 89% ширины, кнопка «i» поменьше справа */
.pbody .opt.sim-opt { gap: 0; justify-content: space-between; }
.pbody .opt.sim-opt .chips { flex: 0 0 89%; width: 89%; }
.sim-i { width: 23px; height: 23px; font-size: 13px; border-width: 1.3px; }
/* ---------- окно «eSIM или SIM+eSIM»: продающее, в фирменном тёмно-синем ---------- */
.es-sheet { background: #f2f3f7; }
.es-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px 20px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(120, 160, 255, .45), rgba(120, 160, 255, 0) 55%), linear-gradient(150deg, #0c1838 0%, #1d3f8f 62%, #3466d6 100%);
  box-shadow: 0 18px 34px -18px rgba(18, 40, 110, .75); animation: ipkUp .6s .08s backwards cubic-bezier(.2, .9, .25, 1); }
.es-hero::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 26px rgba(255, 255, 255, .04), 0 0 0 54px rgba(255, 255, 255, .03); pointer-events: none; }
.es-chip { position: relative; display: block; width: 52px; height: 40px; margin-bottom: 16px; border-radius: 9px;
  background: linear-gradient(135deg, #f7e2a6 0%, #d9b45a 45%, #f3d98c 70%, #b98d34 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 6px 22px rgba(255, 210, 110, .45); animation: esGlow 2.6s ease-in-out infinite; }
.es-chip::before, .es-chip::after { content: ''; position: absolute; background: rgba(110, 78, 20, .45); }
.es-chip::before { left: 33%; top: 0; bottom: 0; width: 1.5px; box-shadow: 16px 0 0 rgba(110, 78, 20, .45); }
.es-chip::after { left: 0; right: 0; top: 50%; height: 1.5px; }
.es-chip i { position: absolute; left: 33%; top: 28%; width: 34%; height: 44%; border-radius: 4px; border: 1.5px solid rgba(110, 78, 20, .45); background: linear-gradient(135deg, #f9e8b5, #e2c070); }
@keyframes esGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 6px 18px rgba(255, 210, 110, .3); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 6px 30px rgba(255, 210, 110, .7); } }
.es-hero b { position: relative; font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.4px; }
.es-hero small { position: relative; margin-top: 8px; font-size: 13.5px; line-height: 1.4; opacity: .8; }
.es-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.es-pro { display: flex; flex-direction: column; padding: 14px 13px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); animation: ocIn .5s calc(var(--i, 0) * 70ms + 160ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.es-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #3b72f0, #1d3f8f); box-shadow: 0 6px 14px -6px rgba(29, 63, 143, .6); }
.es-pro b { font-size: 15px; font-weight: 700; color: #111; line-height: 1.2; }
.es-pro small { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: #6b6b72; }
.es-cmp { margin-top: 10px; padding: 6px 14px 14px; border-radius: 18px; background: #fff; animation: ocIn .5s calc(var(--i, 0) * 70ms + 160ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.es-r { display: grid; grid-template-columns: minmax(0, 1fr) 64px 76px; align-items: center; min-height: 40px; border-bottom: 1px solid rgba(60, 60, 67, .1); font-size: 13.5px; color: #3a3a3c; }
.es-r.es-h { min-height: 36px; }
.es-r.es-h b { font-size: 12.5px; font-weight: 700; color: #1d3f8f; text-align: center; }
.es-r em { font-style: normal; text-align: center; font-size: 12.5px; color: #8e8e93; }
.es-r em b { color: #1d3f8f; font-weight: 700; }
.es-y, .es-n { display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; }
.es-y { background: #1d3f8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.es-n { background: #ececf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8' fill='none' stroke='%23a0a0a8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.es-cmp p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: #8e8e93; }
.es-help { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; padding: 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1d3f8f, #3466d6); box-shadow: 0 12px 24px -14px rgba(29, 63, 143, .7); animation: ocIn .5s calc(var(--i, 0) * 70ms + 160ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.es-hi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .16); }
.es-help b { display: block; font-size: 16px; font-weight: 700; }
.es-help small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; opacity: .85; }
.es-sheet > .buy { margin-top: 14px; }

/* окно eSIM: у шапки нет тени — она ложилась на карточки «Безопаснее» и «Батарея больше» */
.es-hero { box-shadow: none; }

/* ---------- 07.11: значок eSIM кликабельный, кешбек в корзине без стрелки, окно стекла, «С этим iPad покупают», новый Трейд Ин и оформление ---------- */
.esim-btn { position: relative; display: inline-flex; align-items: center; margin-left: .3em; padding: 0; border: 0; background: none; vertical-align: -.02em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.esim-btn .esim-ico { margin-left: 0; }
.esim-btn i { display: grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; border: 1.2px solid #1d3f8f; background: rgba(29, 63, 143, .08); color: #1d3f8f; font: 600 10px/1 -apple-system, system-ui, sans-serif; font-style: normal; }
.esim-btn:active { transform: scale(.94); }

.cb4-cb { pointer-events: none; }
.cb4-cb .chev { display: none; }

/* магазин баллов: модели стекла сеткой плиток */
.rw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rw-cell { padding: 13px 10px; border: 1.5px solid transparent; border-radius: 14px; background: #f2f2f5; color: #1c1c1e; font: inherit; font-size: 14.5px; font-weight: 500; transition: background .2s, border-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.rw-cell.on { background: #fff; border-color: #1d3f8f; color: #1d3f8f; font-weight: 600; box-shadow: 0 4px 14px -8px rgba(29, 63, 143, .6); }
.rw-cell:active { transform: scale(.97); }

/* «С этим iPad покупают» */
.xs { margin: 18px 0 4px; }
.xs-h b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: #111; }
.xs-h small { display: block; margin-top: 2px; font-size: 13px; color: #8e8e93; }
.xs-main { position: relative; display: flex; gap: 14px; margin-top: 12px; padding: 14px; border-radius: 22px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 100% at 0% 0%, rgba(120, 160, 255, .4), rgba(120, 160, 255, 0) 55%), linear-gradient(150deg, #0c1838 0%, #1d3f8f 65%, #3466d6 100%); animation: ocIn .5s .1s cubic-bezier(.2, .9, .25, 1) backwards; }
.xs-main::after { content: ''; position: absolute; right: -50px; top: -60px; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 22px rgba(255, 255, 255, .04); pointer-events: none; }
.xs-pic { flex: 0 0 96px; height: 120px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(160deg, #f4f5f8, #dfe3ec); }
.xs-pic img { width: 84%; height: 88%; object-fit: contain; }
.xs-mt { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xs-tag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #f7e2a6, #d9b45a); color: #4a3510; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.xs-mt b { margin-top: 7px; font-size: 16px; font-weight: 700; line-height: 1.2; }
.xs-mt small { margin-top: 4px; font-size: 12.5px; line-height: 1.35; opacity: .8; }
.xs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.xs-row em { font-style: normal; font-size: 16px; font-weight: 700; white-space: nowrap; }
.xs-add { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1d3f8f; cursor: pointer; transition: transform .15s, background .2s; -webkit-tap-highlight-color: transparent; }
.xs-add:active { transform: scale(.9); }
.xs-add.on { background: #34c759; color: #fff; }
.xs-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.xs-card { display: flex; flex-direction: column; padding: 12px; border-radius: 20px; background: #f5f5f7; animation: ocIn .5s calc(var(--i, 0) * 70ms + 200ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.xs-cp { display: grid; place-items: center; height: 92px; border-radius: 14px; background: linear-gradient(160deg, #ffffff, #e4e7ee); }
.xs-cp img { width: 80%; height: 82%; object-fit: contain; }
.xs-ct { align-self: flex-start; margin-top: 9px; padding: 2px 8px; border-radius: 999px; background: rgba(29, 63, 143, .09); color: #1d3f8f; font-size: 11px; font-weight: 600; }
.xs-card b { margin-top: 5px; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xs-card .xs-row em { font-size: 14.5px; color: #111; }
.xs-card .xs-add { width: 32px; height: 32px; background: #1d3f8f; color: #fff; }
.xs-card .xs-add.on { background: #34c759; }

/* Трейд Ин: первый экран */
.tix-hero { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 16px; border-radius: 20px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(120, 160, 255, .45), rgba(120, 160, 255, 0) 55%), linear-gradient(150deg, #0c1838 0%, #1d3f8f 62%, #3466d6 100%); }
.tix-hero::after { content: ''; position: absolute; right: -40px; bottom: -70px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 20px rgba(255, 255, 255, .04); }
.tix-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .16); }
.tix-ht b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.tix-ht small { display: block; margin-top: 2px; font-size: 13px; opacity: .8; }
.tix-steps { display: flex; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tix-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 12px; background: #f2f2f5; color: #8e8e93; font-size: 12.5px; font-weight: 600; }
.tix-steps li i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #d9d9de; color: #fff; font-size: 11px; font-style: normal; }
.tix-steps li.on { background: rgba(29, 63, 143, .09); color: #1d3f8f; }
.tix-steps li.on i { background: #1d3f8f; }
.tix-lbl { margin: 18px 0 8px 2px; font-size: 15px; font-weight: 700; color: #111; }
.tix-gens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tix-gen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 62px; padding: 0; border: 1.5px solid transparent; border-radius: 16px; background: #f2f2f5; color: #1c1c1e; font: inherit; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.tix-gen small { font-size: 10.5px; color: #8e8e93; }
.tix-gen b { font-size: 21px; font-weight: 700; line-height: 1.05; letter-spacing: -.4px; }
.tix-gen.on { background: #fff; border-color: #1d3f8f; color: #1d3f8f; box-shadow: 0 6px 16px -10px rgba(29, 63, 143, .7); }
.tix-gen:active, .tix-m:active, .tix-p:active { transform: scale(.96); }
.tix-models { display: flex; flex-direction: column; border-radius: 16px; background: #f2f2f5; overflow: hidden; }
.tix-m { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 0; border-bottom: 1px solid rgba(60, 60, 67, .1); background: none; color: #1c1c1e; font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tix-m:last-child { border-bottom: 0; }
.tix-m i { width: 22px; height: 22px; border-radius: 50%; border: 1.8px solid #c7c7cc; box-sizing: border-box; transition: all .2s; }
.tix-m.on { background: #fff; font-weight: 600; color: #1d3f8f; }
.tix-m.on i { border: 6.5px solid #1d3f8f; }
.tix-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tix-p { flex: 1 1 auto; min-width: 72px; padding: 12px 10px; border: 1.5px solid transparent; border-radius: 14px; background: #f2f2f5; color: #1c1c1e; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: all .2s; -webkit-tap-highlight-color: transparent; }
.tix-p.on { background: #fff; border-color: #1d3f8f; color: #1d3f8f; font-weight: 600; }
.tix-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin: 20px -4px 0; padding: 10px 4px calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }
.tix-foot .ti-ideal { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; text-align: left; }
.tix-foot .ti-ideal small { display: block; font-size: 12px; color: #8e8e93; }
.tix-foot .ti-ideal b { display: block; font-size: 21px; font-weight: 700; color: #c7c7cc; letter-spacing: -.3px; }
.tix-foot .ti-ideal.on b { color: #1d3f8f; }
.tix-foot .buy { flex: 0 0 46%; margin: 0; }

/* оформление заказа */
.co2 { background: #f2f3f7; }
.co2 h3 { margin-bottom: 12px; }
.co-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(120, 160, 255, .45), rgba(120, 160, 255, 0) 55%), linear-gradient(150deg, #0c1838 0%, #1d3f8f 62%, #3466d6 100%); }
.co-pics { display: flex; padding-left: 8px; }
.co-pics span { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 2px #1d3f8f; animation: ocIn .45s calc(var(--i, 0) * 60ms + 80ms) cubic-bezier(.2, .9, .25, 1) backwards; }
.co-pics img { width: 80%; height: 80%; object-fit: contain; }
.co-pics .co-more { background: rgba(255, 255, 255, .2); color: #fff; font-size: 13px; font-weight: 700; }
.co-st2 { text-align: right; }
.co-st2 small { display: block; font-size: 12.5px; opacity: .75; }
.co-st2 b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.co-card { margin-top: 10px; padding: 14px 14px 4px; border-radius: 20px; background: #fff; }
.co-ct { margin: 0 0 10px 2px; font-size: 15px; font-weight: 700; color: #111; }
.co2 input { background: #f2f2f5; }
.co-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.co-way { display: flex; flex-direction: column; align-items: flex-start; padding: 12px; border: 1.5px solid transparent; border-radius: 16px; background: #f2f2f5; color: #6b6b72; font: inherit; text-align: left; cursor: pointer; transition: all .2s; -webkit-tap-highlight-color: transparent; }
.co-way b { margin-top: 8px; font-size: 15px; font-weight: 700; color: #1c1c1e; }
.co-way small { margin-top: 2px; font-size: 12px; color: #8e8e93; }
.co-way.on { background: #fff; border-color: #1d3f8f; color: #1d3f8f; box-shadow: 0 6px 16px -10px rgba(29, 63, 143, .7); }
.co-way.on b { color: #1d3f8f; }
.co-way:active { transform: scale(.97); }
.co-note { margin: 12px 4px 10px; font-size: 12.5px; line-height: 1.4; color: #8e8e93; text-align: center; }

.xs-pic img, .xs-cp img { filter: drop-shadow(0 4px 8px rgba(20, 30, 60, .18)); }

/* значок eSIM у Air/Duo — крупнее, теперь он сам кнопка */
.esim-btn { margin-left: .35em; vertical-align: -.12em; }
.esim-btn .esim-ico { height: 1.15em; }
.esim-btn { font-size: inherit; line-height: 1; } /* em считается от заголовка, а не от мелкого шрифта кнопки */
/* Трейд Ин: пока не всё выбрано — вместо суммы подсказка, что делать */
.tix-foot .ti-ideal:not(.on) small { font-size: 14.5px; font-weight: 600; color: #3a3a3c; line-height: 1.3; }

/* оформление: товары — плитки побольше с отступом, фото крупнее, «×2» у одинаковых; города — серые плитки */
.co-pics { gap: 6px; padding-left: 0; }
.co-pics span { position: relative; width: 52px; height: 52px; margin-left: 0; border-radius: 15px; overflow: hidden; box-shadow: none; background: #fff; }
.co-pics img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.3); }
.co-pics em { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 999px; background: #1d3f8f; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.4; }
.co-pics .co-more { background: rgba(255, 255, 255, .2); }
.co2 .co-st .chip { flex: 1 1 auto; min-height: 0; padding: 12px 10px; border: 1.5px solid transparent; border-radius: 14px; background: #f2f2f5; color: #1c1c1e; font-size: 14.5px; font-weight: 500; line-height: 1.2; box-shadow: none; }
.co2 .co-st .chip.on { background: #fff; border-color: #1d3f8f; color: #1d3f8f; font-weight: 600; }
.co2 .co-st { gap: 8px; }
/* «С этим iPad покупают»: у фото с сайта большие белые поля — увеличиваем товар внутри той же плитки;
   белый Pencil кладём по диагонали на более тёмный фон, чтобы он был виден */
.xs-pic, .xs-cp { overflow: hidden; }
.xs-pic { background: linear-gradient(150deg, #e6eaf2, #c3cbdb); }
.xs-pic img { width: 100%; height: 100%; transform: rotate(-38deg) scale(1.75); filter: drop-shadow(0 6px 10px rgba(10, 20, 50, .35)); }
.xs-cp img { width: 100%; height: 100%; transform: scale(1.5); }/* значок eSIM у Air/Duo на 15% меньше (было 1.15em) */
.esim-btn .esim-ico { height: .98em; }
.esim-btn { vertical-align: -.08em; }

/* оформление: города сеткой 2×2, пункты выдачи — отдельный блок с подписью и значком места */
.co2 #coCities { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co2 #coStores { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(60, 60, 67, .1); }
.co2 #coStores[hidden] { display: none !important; }
.co-sl { margin: 0 0 2px 2px; font-size: 13px; font-weight: 500; color: #555; }
.co-store { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 1.5px solid transparent; border-radius: 14px; background: #f2f2f5; color: #8e8e93; font: inherit; text-align: left; cursor: pointer; transition: all .2s; -webkit-tap-highlight-color: transparent; }
.co-store span { flex: 1; font-size: 15px; font-weight: 500; color: #1c1c1e; }
.co-store i { width: 20px; height: 20px; border-radius: 50%; border: 1.8px solid #c7c7cc; box-sizing: border-box; transition: all .2s; }
.co-store.on { background: #fff; border-color: #1d3f8f; color: #1d3f8f; }
.co-store.on span { color: #1d3f8f; font-weight: 600; }
.co-store.on i { border: 6px solid #1d3f8f; }
.co-store:active { transform: scale(.98); }/* нижние карточки: товар целиком внутри плитки (при 1.5 обрезался по краям) */
.xs-cp img { width: 100%; height: 100%; padding: 6px; box-sizing: border-box; transform: scale(1.12); }
.co-note b { font-weight: 600; color: #3a3a3c; }

/* Чёрный вместо синего: оформление заказа, Трейд-ин, избранное и колокольчик */
.tix-hero, .co-sum { background: radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #000 0%, #1c1c1e 62%, #3a3a3c 100%); }
.tix-steps li.on { background: rgba(0, 0, 0, .07); color: #111; }
.tix-steps li.on i { background: #111; }
.tix-gen.on, .tix-p.on, .co-way.on, .co2 .co-st .chip.on, .co-store.on { border-color: #111; color: #111; }
.tix-gen.on, .co-way.on { box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .55); }
.tix-m.on { color: #111; }
.tix-m.on i { border-color: #111; }
.tix-foot .ti-ideal.on b { color: #111; }
.co-way.on b, .co-store.on span { color: #111; }
.co-store.on i { border-color: #111; }
.co-pics em { background: #111; }
.co-sheet input:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.ti-back { color: #111; }
.ti-btn { background: linear-gradient(120deg, #000 0%, #1c1c1e 55%, #48484a 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.ti-prog i { background: linear-gradient(90deg, #111, #636366); }
.ti-ideal.on { background: #f2f2f5; color: #3a3a3c; }
.ti-ideal.on b { color: #111; }
.ti-opt.on { box-shadow: inset 0 0 0 1.5px #111, 0 4px 14px rgba(0, 0, 0, .12); }
.ti-opt.on i { background-color: #111; }
.ti-badge { background: linear-gradient(135deg, #111, #636366); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.ti-sum { color: #111; }
.pa-btn.on, .fv-x, .fv-e { color: #111; }
.fv-h { color: #3a3a3c; }

/* обложка категории в панели */
.pr-cv { position: absolute; left: 2px; bottom: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .85); font-size: 13px; line-height: 22px; text-align: center; }
.pr-pic.cov { box-shadow: inset 0 0 0 2px #ff9f0a; }
.pr-pic.cov .pr-cv { background: #ff9f0a; color: #fff; }
/* оформление: в шапке только количество и сумма */
.co-sum .co-st2 { width: 100%; display: flex; align-items: baseline; justify-content: space-between; }

/* панель каталога */
.pn h1 { margin: 6px 0 4px; }
.pn .pr-q { margin: 10px 0 12px; }
.pn-g { margin: 18px 4px 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #8e8e93; }
.pn-list { display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.pn-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: none; font: inherit; text-align: left; color: #111; }
.pn-list > .pn-row, .pn-list > .pn-prow { border-top: 1px solid rgba(60, 60, 67, .1); }
.pn-list > :first-child { border-top: 0; }
.pn-prow { display: flex; align-items: center; }
.pn-th { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #f2f2f5; overflow: hidden; }
.pn-th.big { width: 64px; height: 64px; border-radius: 16px; }
.pn-th img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.pn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-t b { font-size: 15px; font-weight: 600; }
.pn-t small { margin-top: 2px; font-size: 12.5px; color: #8e8e93; }
.pn-chev { flex: none; font-style: normal; font-size: 22px; color: #c7c7cc; }
.pn-mv { flex: none; display: flex; gap: 4px; padding-right: 10px; }
.pn-mv button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: #f2f2f5; color: #111; font-size: 16px; }
.pn-back { display: inline-block; margin: 0 0 6px; padding: 4px 0; border: 0; background: none; color: #111; font: inherit; font-size: 14px; font-weight: 500; }
.pn-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.pn-head h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.pn-seg { display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; border-radius: 13px; background: #e9e9ee; }
.pn-seg button { flex: 1; padding: 9px 4px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: #555; }
.pn-seg button.on { background: #fff; color: #111; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pn-card { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.pn-card > b { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; }
.pn-card small, .pn-hint { display: block; font-size: 12.5px; line-height: 1.4; color: #8e8e93; }
.pn-hint { margin: 0 2px 10px; }
.pn-card .pr-row:first-child { border-top: 0; padding-top: 0; }
.pn-card .pr-row:last-child { padding-bottom: 0; }
.pn-card .pr-f input { background: #f2f2f5; }
.pn-covers { display: flex; gap: 8px; margin: 10px 0 2px; padding-bottom: 4px; overflow-x: auto; }
.pn-cvb { flex: none; width: 58px; height: 58px; padding: 3px; border: 2px solid transparent; border-radius: 14px; background: #f2f2f5; }
.pn-cvb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pn-cvb.on { border-color: #ff9f0a; background: #fff6e8; }
.pn-h { display: flex; align-items: center; justify-content: space-between; margin: 18px 4px 8px; }
.pn-h h4 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #8e8e93; }
.pn-h .pf-add { background: #111; color: #fff; }
.pn-set { margin-top: 14px; }
.pn-set summary { font-size: 14.5px; font-weight: 600; cursor: pointer; }
.pn-set label { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: #8e8e93; }
.pn .pr-in, .pn .pr-form input:not([type=color]):not([type=file]), .pn .pr-form select { background: #f2f2f5; }
.pn .pr-go, .pn .pr-s { background: #111; }
.pn .pf-add { color: #111; background: #f2f2f5; }
.pn .pr-add { border-color: #111; color: #111; }
.pn .pr-form { background: #fff; }
.pn .pr-f input:focus, .pn .pr-in:focus { outline: 2px solid #111; }.pn-cvact { display: flex; gap: 8px; margin-top: 10px; }
.pn-up { display: inline-block; cursor: pointer; }
.pn-up.busy { opacity: .4; pointer-events: none; }
.pn .pn-cvact .pf-add { padding: 10px 14px; }
.pn .pn-cvact .pn-up { background: #111; color: #fff; }
/* подсказки города в оформлении */
.co-sug { display: flex; flex-direction: column; margin-top: 6px; border-radius: 14px; background: #fff; box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .25), 0 0 0 1px rgba(60, 60, 67, .08); overflow: hidden; }
.co-sug button { padding: 12px 14px; border: 0; border-top: 1px solid rgba(60, 60, 67, .08); background: none; font: inherit; font-size: 15px; text-align: left; color: #111; }
.co-sug button:first-child { border-top: 0; }
.co-sug button:active { background: #f2f2f5; }

/* кешбэк в корзине по центру */
body > .pbar.cbar .cb4-cb { padding: 0 9px; }

/* «С этим iPad покупают»: две компактные карточки как в каталоге */
.xs-two { margin-top: 8px; }
/* кнопка «в корзину» на карточке под iPad */
.xs-w { position: relative; }
.xs-q { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #111; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.xs-q:active { transform: scale(.9); }
.xs-q.on { background: #34c759; }
.xs-w .model b { padding-right: 38px; }.xs-q { top: 10px; bottom: auto; }
.xs-w .model b { padding-right: 0; }
/* две карточки под iPad одного размера; тонкий Pencil — по диагонали и крупнее */
.xs-w { display: flex; }
.xs-w .model { flex: 1; min-width: 0; }
.xs-w .model span { margin-top: auto; padding-top: 6px; }
.xs-w .model b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xs-w.pencil .pic { overflow: hidden; border-radius: 12px; }
.xs-w.pencil .pic img { transform: rotate(-38deg) scale(1.65); }.xs-q { width: 31px; height: 31px; }.xs-q svg { display: block; width: 16px; height: 16px; margin: 0; translate: none; }
.xs-q { line-height: 0; }
/* стрелка «назад»: мягкая и круглая */
.bkv { width: 1.2em; height: 1.2em; margin: 0 1px 0 -4px; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-pill.to-shop .ts-ch { width: 15px; height: 15px; margin: 0 -2px 0 -3px; border: 0; transform: none; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* аватарка: просто чёрный круг без анимаций и ряби */
.av-ring::before { animation: none !important; background: #111 !important; }
.av-ring::after, .av-ring.big::after { display: none !important; }
.who.tap .av-ring, .who.tap .av-ring::after { animation: none !important; }

/* баллы в личном кабинете — фиолетовые */
.points { background: #f1eafe; color: #6a3fc8; }
.points .pt-ico { content: url("img/ring-p.png"); }

/* «разработано» — меньше на 15% и чёрное */
.credit { color: #111; font-size: 12.6px; }
/* стрелка «назад»: по центру строки, размером с текст */
.pback, .back, .pn-back, .ti-back { display: inline-flex; align-items: center; gap: 3px; }
.pback .bkv, .back .bkv, .pn-back .bkv, .ti-back .bkv { width: .95em; height: .95em; margin: 0 0 0 -3px; vertical-align: 0; stroke-width: 3; }
/* магазин баллов: компактная шапка без обоев, меньше фиолетового */
.pt2 { padding-top: 10px; }
.pt-hero { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 52px 12px 16px; border-radius: 18px; background: #f4f4f6; box-shadow: none; color: #111; }
.pt-hero::after { content: none; display: none; }
.pt-hero small { display: none; }
.pth-n { order: 0; margin: 0; gap: 8px; }
.pth-n img { width: 22px; height: 22px; }
.pth-n b { font-size: 28px; letter-spacing: -.8px; color: #111; }
.pth-l { order: 1; margin: 0; font-size: 13px; font-weight: 500; color: #8e8e93; }
.pt2 .rw2-bar i { background: #1c1c1e; }
.pt2 .rw2.ok .rw2-p b { color: #111; }
.pt2 .reward.rw2 .rw-pic { background: #fff; }
/* шапка баллов: всё по одной линии */
.pt-hero { align-items: center; }
.pth-n { display: flex; align-items: center; gap: 9px; }
.pth-n img { align-self: center; width: 26px; height: auto; margin: 0; }
.pth-n b { align-self: center; margin: 0; line-height: 1; font-size: 28px; }
.pth-l { align-self: center; line-height: 1; margin-left: 4px; }
/* Трейд-ин: внизу только кнопка «Дальше» */
.tix-foot { display: block; }
.tix-foot .buy { width: 100%; margin: 0; }

/* Трейд-ин: подпись под полосой прогресса; выбранный вариант — чёрный, а не «просто белая строка» */
.ti-cap { display: flex; justify-content: space-between; align-items: baseline; margin: -10px 2px 14px; font-size: 13px; color: #8e8e93; }
.ti-cap span { font-weight: 600; color: #3a3a3c; }
.ti-cap em { font-style: normal; }
.tix-p.on, .tix-gen.on { background: #111; border-color: #111; color: #fff; box-shadow: none; }
.tix-gen.on small { color: rgba(255, 255, 255, .7); }
.tix-m.on { background: #111; color: #fff; }
.tix-m.on i { border-color: #fff; background: #111; }
/* Трейд-ин: окно компактнее, без шагов 1-2-3 */
.ti .tix-hero { margin-top: 0; padding: 10px 12px; gap: 10px; border-radius: 16px; }
.ti .tix-ic { width: 34px; height: 34px; border-radius: 11px; }
.ti .tix-ic svg { width: 19px; height: 19px; }
.ti .tix-ht b { font-size: 15px; }
.ti .tix-ht small { font-size: 12px; }
.ti .tix-lbl { margin: 12px 0 6px 2px; font-size: 13px; }
.ti .tix-gens { gap: 6px; }
.ti .tix-gen { height: 46px; border-radius: 13px; }
.ti .tix-gen b { font-size: 17px; }
.ti .tix-gen small { font-size: 9.5px; }
.ti .tix-m { padding: 10px 14px; font-size: 14px; }
.ti .tix-m i { width: 18px; height: 18px; }
.ti .tix-m.on i { border-width: 5.5px; }
.ti .tix-pills { gap: 6px; }
.ti .tix-p { min-width: 64px; padding: 9px 8px; font-size: 13.5px; border-radius: 12px; }
.ti .ti-cap { margin: -12px 2px 10px; font-size: 12px; }
.ti .tix-foot { margin-top: 12px; }
.ti .tix-foot .buy { height: 44px; padding: 0; font-size: 15px; }
/* Трейд-ин: окно одной высоты на всех шагах — при смене высоты на iPhone за шторкой оставался белый «призрак» старой формы */
.sheet.ti { height: 82vh; min-height: 0; max-height: 88vh; }
/* шапка баллов: подпись сверху, под ней кольцо и число — ровно, без «поплывшей» строки */
.pt-hero { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 52px 14px 16px; }
.pth-l { order: -1; margin: 0; font-size: 13px; line-height: 1; color: #8e8e93; }
.pth-n { gap: 8px; align-items: center; }
.pth-n img { width: 24px; height: auto; align-self: center; }
.pth-n b { font-size: 30px; line-height: 1; letter-spacing: -.8px; }
/* шапка баллов: только кольцо и число */
.pt-hero { flex-direction: row; align-items: center; padding: 14px 52px 14px 16px; }
.pth-n { gap: 10px; }
.pth-n img { width: 26px; }
.pth-n b { font-size: 32px; }
/* кнопки «Оформить» и «Настроить устройство» — как «Оформить заказ» в корзине */
#coGo, #suGo, #spGo { height: 54px; font-size: 16px; font-weight: 600; letter-spacing: 0; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); }
#suGo.alt, #spGo.alt { box-shadow: none; }

/* круг вокруг аватарки — цвет ссылки «< Apple» */
.av-ring::before { background: var(--blue) !important; }

/* стрелки Trade-In, iPack и «Подробнее о товаре» — мягкие и круглые, как «< Apple» */
#tiBtn .chev, #ipkInfo .chev, .pdesc .chev { width: 11px; height: 11px; border: 0 !important; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5v14H5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5v14H5'/%3E%3C/svg%3E") center / contain no-repeat; }.pdesc summary .chev, .pbody .pdesc .chev { width: 11px !important; height: 11px !important; border: 0 !important; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5v14H5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5v14H5'/%3E%3C/svg%3E") center / contain no-repeat !important; }
/* кнопки оформления и настройки — как «Оформить заказ» в корзине (69 px, радиус 18) */
#coGo, #suGo, #spGo { height: 69px !important; min-height: 69px; border-radius: 18px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12) !important; }
#coGo, #suGo:not(.alt), #spGo:not(.alt) { background: #111; }
#suGo.alt, #spGo.alt { box-shadow: none !important; }

/* стрелки «Трейд Ин» и «iPack PRO» — одинаковые */
#tiBtn .chev, #ipkInfo .chev { width: 12px !important; height: 12px !important; top: 17px !important; right: 16px !important; margin: 0 !important; }

/* панель: блок «Фото плашки» */
.pr-card { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(60, 60, 67, .12); }
.pr-card .pr-pic { width: 84px; height: 84px; }
.pr-card .pr-add { width: 84px; height: 84px; }
/* стрелки на одном уровне: у iPack контейнер grid, поэтому отсчёт сверху там другой */
#ipkInfo .chev { top: 0 !important; }
/* круг вокруг аватарки: единый градиент (зелёный → голубой), без анимации */
.av-ring::before { background: linear-gradient(180deg, #34d399 0%, #36b6c9 50%, #3b9eef 100%) !important; }

/* иконка корзины на кнопке «В корзину» — та же, что в шапке */
body > .pbar .pbuy::before { width: 16px; height: 20px; background: currentColor;
  -webkit-mask: url("img/logo-b.svg") center / contain no-repeat; mask: url("img/logo-b.svg") center / contain no-repeat; }

/* PS5 Pro: чёрная плашка, белая надпись */
.model.dark { background: #111; }
.model.dark b, .model.dark span { color: #fff; }

/* оформление заказа: уже и компактнее */
.co2 { padding-left: 22px; padding-right: 22px; }
.co2 h3 { font-size: 17px; margin-bottom: 10px; }
.co2 .co-card { padding: 11px 12px 2px; margin-top: 8px; border-radius: 18px; }
.co2 .co-ct { margin: 0 0 8px 2px; font-size: 14px; }
.co2 .co-f > span { font-size: 12px; }
.co2 input { padding: 9px 12px; font-size: 15px; }
.co-ways { gap: 8px; }
.co-way { display: grid; grid-template-columns: 20px 1fr; align-items: center; column-gap: 8px; padding: 8px 10px; border-radius: 14px; }
.co-way svg { grid-row: 1 / span 2; width: 20px; height: 20px; }
.co-way b { margin: 0; font-size: 14px; }
.co-way small { margin: 0; font-size: 11px; }
.co2 .co-st .chip { padding: 8px 8px; font-size: 14px; }
.co2 .co-store { padding: 10px 12px; }
.co2 .co-store span { font-size: 14px; }
.co2 .co-note { margin: 8px 4px 8px; font-size: 12px; }
/* «В корзину»: значок и надпись на одной линии */
body > .pbar .pbuy { gap: 8px; }
body > .pbar .pbuy::before { width: 15px; height: 19px; transform: translateY(-2px); }
/* PS5 Pro — снова обычная светлая плашка */
.model.dark { background: var(--gray); }
.model.dark b, .model.dark span { color: inherit; }

/* PS5 Pro: графитовая плашка с холодной подсветкой за консолью */
.model.dark { background: radial-gradient(75% 55% at 50% 36%, rgba(130, 160, 210, .30), rgba(130, 160, 210, 0) 72%), linear-gradient(165deg, #212328 0%, #0b0b0d 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 12px 26px -16px rgba(0, 0, 0, .7); }
.model.dark b, .model.dark span { color: #fff; }
.model.dark .pic img { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
/* левая колонка: логотип Apple того же визуального размера, что и картинки остальных категорий */
.ri-logo .al { width: 36px; height: 36px; }
/* окно «Настроить устройства»: строки не вылезают за карточку, длинные названия переносятся */
.sp-list { grid-template-columns: minmax(0, 1fr); }
.sp-row { min-width: 0; box-sizing: border-box; }
.sp-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.sp-t small { line-height: 1.3; }
.sp-t b { -webkit-line-clamp: 3; }