/* ПРО СТОР — сайт. Те же темы, что у мини-аппа: obsidian (тёмная), light (светлая), ny (новогодняя).
   Все цвета — переменные темы; тема приходит из админки (/api/settings). */
:root, body[data-skin="obsidian"] {
  --bg:#0b0b0c; --surface:#151518; --surface2:#1e1e22; --line:#2a2a2f;
  --fg:#f2f1ee; --muted:#9a98a0; --accent:#ff6a1a; --accent-fg:#fff; --accent2:#ff6a1a;
  --glow:rgba(255,106,26,.34); --good:#3ecf8e; --warn:#f2b441; --bad:#ff5a5a;
  --hdr:rgba(11,11,12,.78); --shadow:0 18px 40px rgba(0,0,0,.45); --hero-bg:#000;
  color-scheme:dark;
}
body[data-skin="light"] {
  --bg:#f6f5f2; --surface:#fff; --surface2:#efede8; --line:#e2dfd9;
  --fg:#16161a; --muted:#68666d; --accent:#e4560f; --accent-fg:#fff; --accent2:#e4560f;
  --glow:rgba(228,86,15,.18); --good:#1c9a5c; --warn:#a8730a; --bad:#d23b3b;
  --hdr:rgba(246,245,242,.82); --field:#fff; --field-line:#d8d4cc; --shadow:0 14px 34px rgba(30,25,15,.10); --hero-bg:#e9e6df;
  color-scheme:light;
}
body[data-skin="ny"] {
  --bg:#070b16; --surface:#0f1626; --surface2:#162036; --line:#243049;
  --fg:#f5f1e8; --muted:#9aa3b8; --accent:#ff6a1a; --accent-fg:#fff; --accent2:#e8b65a;
  --glow:rgba(232,182,90,.32); --good:#4fd39a; --warn:#f2c14e; --bad:#ff6b6b;
  --hdr:rgba(7,11,22,.8); --shadow:0 18px 40px rgba(0,0,0,.5); --hero-bg:#03060f;
  color-scheme:dark;
}
:root { --f:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-logo:"Unbounded","Onest",system-ui,sans-serif; --r:22px; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--fg); font:16px/1.45 var(--f); transition:background .35s, color .35s; min-height:100vh; display:flex; flex-direction:column; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
input, select, textarea { font:inherit; color:var(--fg); }
img { max-width:100%; }
[hidden] { display:none !important; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.small { font-size:14px; }
.wrap { width:100%; max-width:1240px; margin:0 auto; padding-inline:clamp(16px,4vw,40px); }
h1, h2, h3 { margin:0; text-wrap:balance; letter-spacing:-.01em; }
.h1 { font-size:clamp(30px,4.4vw,52px); line-height:1.04; font-weight:800; }
.h2 { font-size:clamp(24px,2.6vw,34px); line-height:1.1; font-weight:800; }
.h3 { font-size:19px; font-weight:700; }
.logo { font:700 22px/1 var(--f-logo); letter-spacing:.05em; white-space:nowrap; }
.logo b { color:var(--accent); }
.link { color:var(--accent); }
.err { color:var(--bad); font-size:14px; }
.ssr article { padding:40px 0; }

/* header */
.hdr { position:sticky; top:0; z-index:30; background:var(--hdr); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--line); }
.hdr-in { display:flex; align-items:center; gap:28px; height:68px; }
.nav { display:flex; gap:4px; flex:1; justify-content:center; }
.nav a { padding:8px 12px; border-radius:10px; font-size:15px; color:var(--muted); transition:color .2s, background .2s; white-space:nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--fg); }
.nav a[aria-current="page"] { background:var(--surface2); }
.hdr-act { display:flex; gap:4px; align-items:center; }
.ib { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; position:relative; color:var(--fg); }
.ib { transition:background .2s, transform .2s var(--e-spring,ease); }
/* наведение на значки: на тёмной теме — светлая подсветка, на светлой — тёмная */
.ib:hover { background:color-mix(in srgb,var(--fg) 10%,transparent); }
.ib:active { transform:scale(.92); background:color-mix(in srgb,var(--fg) 16%,transparent); }
.ib svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cnt { position:absolute; top:3px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--accent-fg); font-size:11px; font-weight:700; display:grid; place-items:center; }
.cnt.bump { animation:bump .45s; }
@keyframes bump { 40% { transform:scale(1.35); } }
.burger { display:none; }
@media (max-width:900px) { .nav { display:none; } .burger { display:grid; } .hdr-in { gap:12px; justify-content:space-between; } }

main { flex:1; padding-block:28px 80px; display:grid; gap:56px; align-content:start; }
@media (max-width:620px) { main { padding-block:14px 56px; gap:30px; } .seccats { margin-block:-10px; } .sec { gap:16px; } }
main.pg { animation:pgIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes pgIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* buttons & controls */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 26px; border-radius:16px; background:var(--accent); color:var(--accent-fg); font-weight:700; font-size:16px; box-shadow:0 10px 30px var(--glow); transition:transform .15s, filter .2s, box-shadow .2s; white-space:nowrap; }
.btn:hover { filter:brightness(1.07); box-shadow:0 14px 36px var(--glow); }
.btn:active { transform:scale(.97); }
.btn.ghost { background:transparent; color:var(--accent); border:1.5px solid var(--accent); box-shadow:none; }
.btn.soft { background:var(--surface2); color:var(--fg); box-shadow:none; }
.btn.sm { min-height:42px; padding:0 18px; font-size:14px; border-radius:12px; }
.btn.wide { width:100%; }
.btn[disabled] { filter:grayscale(1) opacity(.5); pointer-events:none; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); transition:background .35s, border-color .25s, transform .25s; }
body[data-skin="light"] .card { box-shadow:var(--shadow); border-color:transparent; }
.pad { padding:20px; }
.col { display:grid; gap:12px; align-content:start; }
.row { display:flex; align-items:center; gap:10px; }
.wrapr { flex-wrap:wrap; }
.between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:13px; white-space:nowrap; }
.pill.acc { border-color:color-mix(in srgb,var(--accent) 55%,transparent); color:var(--accent); }
.pill.gold { border-color:color-mix(in srgb,var(--accent2) 60%,transparent); color:var(--accent2); }
.chip { padding:9px 16px; border-radius:999px; background:var(--surface2); font-size:14px; font-weight:500; border:1px solid transparent; transition:background .2s, color .2s; }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--accent-fg); }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.seg { display:flex; background:var(--surface2); border-radius:14px; padding:3px; gap:3px; flex-wrap:wrap; }
.seg button { flex:1; min-height:42px; padding:0 14px; border-radius:11px; font-size:14px; font-weight:500; color:var(--muted); transition:background .2s, color .2s; }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--fg); box-shadow:0 0 0 1.5px var(--accent) inset; }
.seg button.na { text-decoration:line-through; opacity:.55; }
.sw { display:flex; gap:12px; flex-wrap:wrap; }
.swc { width:36px; height:36px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px var(--line) inset; transition:transform .2s; }
.swc[aria-pressed="true"] { border-color:var(--accent); transform:scale(1.08); }
.field { display:flex; align-items:center; gap:8px; min-height:50px; border-radius:14px; background:var(--field,var(--surface2)); padding:0 14px; border:1.5px solid var(--field-line,var(--line)); }
.field:hover { border-color:color-mix(in srgb,var(--muted) 55%,transparent); }
.field ::placeholder, .field::placeholder { color:var(--muted); opacity:.6; }
.field:focus-within { border-color:var(--accent); }
.field.bad { border-color:var(--bad); }
.field input, .field select, .field textarea { flex:1; min-width:0; background:none; border:0; outline:0; padding:12px 0; }
.field select { appearance:none; cursor:pointer; }
.field select option, .field select optgroup { background:var(--surface); color:var(--fg); }
.field textarea { min-height:90px; resize:vertical; }
label.lbl { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; min-width:0; }
.field { min-width:0; }
.field input { width:100%; }
label.lbl > span:first-child { font-size:13px; color:var(--muted); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:640px) { .grid2, .grid3 { grid-template-columns:minmax(0,1fr); } }
.toggle { width:50px; height:30px; border-radius:15px; background:var(--surface2); position:relative; flex:none; border:1px solid var(--line); transition:background .2s; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
.toggle[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); }
.toggle[aria-pressed="true"]::after { transform:translateX(20px); }
.radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--muted); display:grid; place-items:center; flex:none; }
.radio.on { border-color:var(--accent); }
.radio.on::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.choice { padding:16px; border-radius:16px; border:1.5px solid var(--line); background:var(--surface); text-align:left; display:grid; gap:3px; transition:border-color .2s, box-shadow .2s; }
.choice[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 22px var(--glow); }
.choice small { color:var(--muted); font-size:13px; }
.spin { width:44px; height:44px; border-radius:50%; border:4px solid var(--surface2); border-top-color:var(--accent); animation:sp .8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.loader { display:grid; place-items:center; min-height:50vh; }

/* hero */
.hero { position:relative; overflow:hidden; border-radius:32px; min-height:min(560px,72vh); background:var(--hero-bg); display:grid; align-items:center; isolation:isolate; }
.hero .bgimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; z-index:-1; animation:heroIn 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heroIn { from { transform:scale(1.06); opacity:.4; } to { transform:none; opacity:1; } }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--hero-bg) 18%,transparent 62%); }
.hero .cut { position:absolute; right:3%; bottom:4%; width:min(46%,560px); z-index:-1; filter:drop-shadow(0 30px 40px rgba(0,0,0,.25)); animation:float 7s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-10px) rotate(-1deg); } }
.hero .copy { padding:clamp(28px,5vw,64px); max-width:620px; display:grid; gap:18px; }
.hero .k { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); font-weight:600; }
.hero .h1 em { font-style:normal; color:var(--accent2); }
.hero .sub { font-size:18px; color:var(--muted); }
.hero .acts { display:flex; gap:12px; flex-wrap:wrap; }
.count { display:flex; gap:8px; }
.count span { background:color-mix(in srgb,var(--surface2) 80%,transparent); border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-weight:700; }
@media (max-width:760px) {
  .hero { min-height:auto; align-items:end; }
  .hero .bgimg { position:relative; height:260px; inset:auto; }
  .hero::after { background:linear-gradient(0deg,var(--hero-bg) 45%,transparent 75%); }
  .hero { display:flex; flex-direction:column; }
  .hero .cut { position:relative; width:80%; margin:20px auto 0; right:auto; bottom:auto; }
  .hero .copy { padding:24px; }
}

/* в светлой теме тёмное фото героя заменяем вырезанным товаром */
.hero .cut.alt { display:none; }
body[data-skin="light"] .hero .bgimg { display:none; }
body[data-skin="light"] .hero .cut.alt { display:block; }
body[data-skin="light"] .hero { background:radial-gradient(circle at 75% 55%,var(--glow),transparent 55%),var(--hero-bg); }

/* карусель предложений */
.car { display:grid; gap:14px; }
.track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:32px; overscroll-behavior-x:contain; }
.track::-webkit-scrollbar { display:none; }
.slide { flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; border-radius:0; }
.slide .copy .sub { margin:0; }
@media (min-width:761px) { .slide .cut { width:auto; max-width:46%; max-height:84%; object-fit:contain; right:5%; bottom:8%; } }
.slide .copy s { opacity:.7; }
.sl-deal { background:radial-gradient(circle at 74% 55%,var(--glow),transparent 52%),var(--hero-bg); }
.sl-hit { background:radial-gradient(circle at 70% 40%,var(--glow),transparent 50%),var(--hero-bg); }
.sl-ti { background:radial-gradient(circle at 80% 70%,color-mix(in srgb,var(--good) 26%,transparent),transparent 50%),var(--hero-bg); }
.sl-pay { background:radial-gradient(circle at 72% 50%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 52%),var(--hero-bg); }
.sl-ti .h1 em { color:var(--good); }
.car-ui { display:flex; align-items:center; justify-content:center; gap:14px; }
.cnav { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); transition:transform .2s var(--e-spring), border-color .2s; }
.cnav:hover { border-color:var(--accent); background:color-mix(in srgb,var(--fg) 10%,var(--surface)); } .cnav:active { transform:scale(.92); }
.cnav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cnav:first-child svg { transform:rotate(180deg); }
.cdots { display:flex; gap:6px; align-items:center; }
.cdot { width:8px; height:8px; border-radius:4px; background:var(--line); position:relative; overflow:hidden; transition:width .35s var(--e-out), background .3s; }
.cdot::before { content:""; position:absolute; inset:-10px -3px; }
.cdot.on { width:38px; background:color-mix(in srgb,var(--accent) 28%,var(--line)); }
.cdot i { position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.cdot.on:not(.run) i { transform:none; }
.cdot.run i { animation:cprog 6s linear forwards; }
@keyframes cprog { to { transform:none; } }
@media (max-width:760px) {
  .track { border-radius:24px; }
  .slide .cut { width:62%; max-height:230px; object-fit:contain; margin:18px auto 0; }
  .slide .copy { gap:12px; }
  .cnav { display:none; }
}

/* sections */
.sec { display:grid; gap:22px; }
.cats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.cat { padding:18px; display:grid; gap:10px; justify-items:center; text-align:center; font-weight:600; }
.cat .im { height:120px; display:grid; place-items:center; }
.cat img { max-height:116px; object-fit:contain; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.cat:hover { border-color:var(--accent); }
.cat:hover img { transform:scale(1.07) translateY(-4px); }
.cat:active { transform:scale(.97); }
@media (max-width:900px) { .cats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* телефон: компактная лента категорий, следующая плитка видна наполовину — понятно, что листается */
@media (max-width:620px) {
  .cats { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * clamp(16px,4vw,40px)); padding:4px clamp(16px,4vw,40px) 10px; scroll-padding-inline:clamp(16px,4vw,40px);
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
  .cats::-webkit-scrollbar { display:none; }
  .cat { flex:0 0 96px; scroll-snap-align:start; padding:12px 8px 10px; gap:6px; border-radius:18px; font-size:14px; font-weight:600; }
  .cat .im { height:62px; } .cat img { max-height:60px; max-width:72px; }
  body[data-skin="light"] .cat { box-shadow:0 1px 2px rgba(30,25,15,.05),0 4px 12px rgba(30,25,15,.05); }
}
.bento { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; }
@media (max-width:900px) { .bento { grid-template-columns:minmax(0,1fr); } }
.bcard { padding:26px; display:grid; gap:10px; align-content:space-between; min-height:200px; position:relative; overflow:hidden; text-align:left; }
.bcard::before { content:""; position:absolute; right:-60px; bottom:-80px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 70%); }
.bcard b.big { font-size:28px; line-height:1.1; }
.bcard img { position:absolute; right:12px; bottom:10px; max-width:42%; max-height:150px; object-fit:contain; }
.bcard:hover { border-color:var(--accent); }
.timer { font-weight:800; color:var(--accent); font-size:22px; }
.trust { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:800px) { .trust { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.trust .card { padding:18px; display:grid; gap:4px; }
.trust b { font-size:16px; }

/* product grid */
.pgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:1100px) { .pgrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
.pc { position:relative; padding:16px; display:grid; gap:6px; align-content:start; text-align:left; }
.pc:hover { border-color:var(--accent); transform:translateY(-3px); }
.pc .im { height:190px; display:grid; place-items:center; margin-bottom:6px; }
.pc .im img { max-height:180px; object-fit:contain; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.pc:hover .im img { transform:scale(1.05); }
.pc .n { font-weight:600; font-size:16px; line-height:1.25; }
.pc .p { font-weight:800; color:var(--accent); font-size:18px; }
.pc .m { font-size:13px; color:var(--muted); }
.dots { display:flex; gap:5px; }
.dot { width:11px; height:11px; border-radius:50%; border:1px solid rgba(127,127,127,.4); }
.tag { position:absolute; top:12px; left:12px; z-index:2; font-size:12px; font-weight:700; padding:5px 9px; border-radius:8px; background:color-mix(in srgb,var(--accent) 18%,var(--surface)); color:var(--accent); }
.plus { position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; box-shadow:0 6px 16px var(--glow); }
.plus svg { width:18px; height:18px; stroke:currentColor; stroke-width:2.6; fill:none; stroke-linecap:round; }
.oos { opacity:.6; }
.noimg { width:80px; height:80px; border-radius:20px; background:var(--surface2); display:grid; place-items:center; color:var(--muted); }

/* catalog layout */
.cat-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; }
.filters { position:sticky; top:92px; padding:20px; display:grid; gap:20px; }
.filters .lb { font-size:13px; color:var(--muted); margin-bottom:8px; }
.fcheck { display:flex; align-items:center; gap:10px; padding:5px 0; cursor:pointer; font-size:15px; }
.fcheck input { accent-color:var(--accent); width:18px; height:18px; }
@media (max-width:900px) { .cat-layout { grid-template-columns:minmax(0,1fr); } .filters { position:static; } }

/* product page */
.prod { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:start; }
@media (max-width:900px) { .prod { grid-template-columns:minmax(0,1fr); gap:24px; } }
.gal { position:sticky; top:92px; display:grid; gap:14px; }
.gal .main { aspect-ratio:1; border-radius:28px; background:radial-gradient(circle at 50% 45%,var(--glow),transparent 62%),var(--surface); display:grid; place-items:center; overflow:hidden; }
.gal .main img { max-width:86%; max-height:86%; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(0,0,0,.35)); animation:float 7s ease-in-out infinite; }
.thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.thumbs button { width:76px; height:76px; border-radius:16px; background:var(--surface); border:1.5px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.thumbs button[aria-pressed="true"] { border-color:var(--accent); }
.thumbs img { max-width:64px; max-height:64px; object-fit:contain; }
@media (max-width:900px) { .gal { position:static; } }
.price { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price b { font-size:38px; font-weight:800; }
.stock { display:flex; align-items:center; gap:8px; font-size:15px; }
.sdot { width:9px; height:9px; border-radius:50%; background:var(--good); }
.sdot.low { background:var(--warn); } .sdot.no { background:var(--bad); }
.promo { padding:16px; display:flex; align-items:center; gap:14px; text-align:left; width:100%; }
.promo .ti { width:44px; height:44px; border-radius:13px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); display:grid; place-items:center; flex:none; }
.promo .ti svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.promo .tx { flex:1; min-width:0; }
.promo .tx b { display:block; }
.promo:hover { border-color:var(--accent); }
.desc { color:var(--muted); max-width:62ch; }

/* cart & checkout */
.two { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; }
@media (max-width:960px) { .two { grid-template-columns:minmax(0,1fr); } }
.sum { padding:22px; display:grid; gap:10px; position:sticky; top:92px; }
.sum .tot { font-size:24px; font-weight:800; padding-top:12px; border-top:1px solid var(--line); }
.ci { padding:14px; display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:16px; align-items:center; }
.ci .th { width:96px; height:96px; border-radius:16px; background:var(--surface2); display:grid; place-items:center; overflow:hidden; }
.ci .th img { max-width:84px; max-height:84px; object-fit:contain; }
@media (max-width:560px) { .ci { grid-template-columns:72px minmax(0,1fr); } .ci .th { width:72px; height:72px; } .ci .th img { max-width:60px; max-height:60px; } .ci > :last-child { grid-column:1/-1; justify-self:end; } }
.step { display:flex; align-items:center; gap:6px; background:var(--surface2); border-radius:999px; padding:3px; }
.step button { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:18px; }
.step button:hover { background:var(--surface); }
.step span { min-width:20px; text-align:center; font-weight:600; }
.list { display:grid; }
.list .li { display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:1px solid var(--line); width:100%; text-align:left; }
.list .li:first-child { border-top:0; }

/* trade-in */
.prog { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.prog i { height:5px; border-radius:3px; background:var(--surface2); transition:background .3s; }
.prog i.on { background:var(--accent); }
.opts { display:grid; gap:10px; }
.optc { padding:16px 18px; border-radius:16px; border:1.5px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:space-between; text-align:left; width:100%; transition:border-color .2s, box-shadow .2s; }
.optc[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 22px var(--glow); }
.optc small { display:block; color:var(--muted); }
.est { padding:24px; display:grid; gap:4px; position:relative; overflow:hidden; }
.est::after { content:""; position:absolute; right:-40px; bottom:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 70%); }
.est b { font-size:42px; color:var(--accent); line-height:1.05; }
.phs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ph { position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--surface2); }
.ph img { width:100%; height:100%; object-fit:cover; }
.ph.add { display:grid; place-items:center; align-content:center; gap:2px; border:1.5px dashed var(--line); color:var(--muted); font-size:12px; cursor:pointer; }
.ph.add:hover { border-color:var(--accent); color:var(--accent); }
.ph.add svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.phx { position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; }
input[type=range] { width:100%; accent-color:var(--accent); }

/* account, timeline */
.tl { display:grid; }
.tli { display:grid; grid-template-columns:22px 1fr; gap:10px; position:relative; padding-bottom:14px; }
.tli::before { content:""; position:absolute; left:10px; top:20px; bottom:0; width:2px; background:var(--line); }
.tli:last-child::before { display:none; }
.tli.done::before { background:var(--accent); }
.tli .d { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:var(--surface); }
.tli.done .d { background:var(--accent); border-color:var(--accent); }
.tli.cur .d { border-color:var(--accent); box-shadow:0 0 0 5px var(--glow); }
.tli.todo { color:var(--muted); }
.ok { width:96px; height:96px; border-radius:50%; background:var(--accent); display:grid; place-items:center; justify-self:center; box-shadow:0 0 0 12px var(--glow); animation:pop .5s cubic-bezier(.2,1.6,.4,1); }
.ok svg { width:46px; height:46px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:draw .5s .25s forwards; }
@keyframes pop { from { transform:scale(.3); } }
@keyframes draw { to { stroke-dashoffset:0; } }
.empty { display:grid; justify-items:center; gap:12px; text-align:center; padding:60px 10px; }
.narrow { max-width:520px; width:100%; margin:0 auto; }
.tgw { min-height:44px; display:grid; place-items:center; }

/* footer */
.ftr { border-top:1px solid var(--line); padding-block:40px; color:var(--muted); font-size:14px; }
.ftr .cols { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:24px; }
.ftr .cols div { display:grid; gap:8px; align-content:start; }
.ftr b { color:var(--fg); }
.ftr a:hover { color:var(--fg); }
@media (max-width:760px) { .ftr .cols { grid-template-columns:1fr 1fr; } }

/* sheet, toast */
.sheetbg { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s; }
.sheetbg.on { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:50%; top:50%; z-index:41; width:min(560px,calc(100% - 32px)); max-height:86vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:22px; display:grid; gap:16px; transform:translate(-50%,-46%) scale(.97); opacity:0; pointer-events:none; transition:transform .3s cubic-bezier(.2,.9,.2,1), opacity .25s; }
.sheet.on { transform:translate(-50%,-50%); opacity:1; pointer-events:auto; }
#toast { position:fixed; left:50%; bottom:24px; z-index:60; transform:translate(-50%,calc(100% + 40px)); visibility:hidden; max-width:min(480px,calc(100% - 32px)); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; padding:13px 18px; box-shadow:var(--shadow); transition:transform .45s cubic-bezier(.2,1.2,.3,1), visibility .45s; }
#toast.show { transform:translate(-50%,0); visibility:visible; }
#toast.bad { border-color:var(--bad); }
.mobnav { display:grid; gap:4px; }
.mobnav a { padding:12px 14px; border-radius:12px; font-size:17px; }
.mobnav a:hover { background:var(--surface2); }

/* NY */
#snow { position:fixed; inset:0; pointer-events:none; z-index:25; display:none; }
body[data-skin="ny"] #snow { display:block; }
.nyonly { display:none; } body[data-skin="ny"] .nyonly { display:revert; }
body[data-skin="ny"] .nyhide { display:none; }
/* ---------- движение. Длительности: отклик 150–250 мс, появление 450–700 мс; уход быстрее прихода */
:root { --e-out:cubic-bezier(.2,.8,.2,1); --e-spring:cubic-bezier(.3,1.4,.5,1); }
.rv { opacity:0; transform:translateY(22px) scale(.985); }
.rv.in { opacity:1; transform:none; transition:opacity .5s var(--e-out) var(--d,0ms), transform .7s var(--e-out) var(--d,0ms); }
/* слайд карусели: строки текста выходят по очереди, когда слайд становится активным */
.slide.act .copy > * { animation:rise .8s var(--e-out) both; }
.slide.act .copy > :nth-child(2) { animation-delay:.05s; } .slide.act .copy > :nth-child(3) { animation-delay:.12s; } .slide.act .copy > :nth-child(4) { animation-delay:.12s; }
.slide.act .copy > :nth-child(5), .slide.act .copy > :nth-child(6) { animation-delay:.22s; } .slide.act .copy > :nth-child(7) { animation-delay:.3s; } .slide.act .copy > :nth-child(8) { animation-delay:.34s; }
.slide .cut { transition:opacity .6s var(--e-out); } .slide:not(.act) .cut { opacity:.5; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } }
.pc:active .im img { opacity:.85; }
.bcard:hover, .promo:hover { transform:translateY(-2px); }
.btn { position:relative; overflow:hidden; }
.btn::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--e-out); pointer-events:none; }
.btn:not(.ghost):not(.soft):hover::after { transform:translateX(120%); }
.plus { transition:transform .2s var(--e-spring), box-shadow .2s; }
.pc:hover .plus { transform:scale(1.08); }
.plus.pop { animation:popb .45s var(--e-spring); }
@keyframes popb { 40% { transform:scale(.8); } }
.swc:hover { transform:scale(1.08); }
.seg button, .chip, .swc { transition:background .2s, color .2s, transform .2s var(--e-spring), box-shadow .2s; }
.seg button:active, .chip:active { transform:scale(.96); }
.fly { position:fixed; z-index:70; pointer-events:none; object-fit:contain; will-change:transform,opacity; filter:drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.swap-in { animation:swapIn .5s var(--e-out); }
@keyframes swapIn { from { opacity:0; transform:scale(.94) translateY(6px); } }
.tick { display:inline-block; animation:tick .4s var(--e-out); }
@keyframes tick { from { opacity:.2; transform:translateY(8px); } }
.gal .main img.gimg { view-transition-name:pimg; }
.hdr { view-transition-name:hdr; }
::view-transition-old(root) { animation:vtOut .22s ease both; }
::view-transition-new(root) { animation:vtIn .32s ease both; }
::view-transition-group(pimg) { animation-duration:.5s; animation-timing-function:var(--e-out); }
@keyframes vtOut { to { opacity:0; } }
@keyframes vtIn { from { opacity:0; } }
.field { transition:border-color .2s, box-shadow .2s, background .2s; }
.field:focus-within { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .rv { opacity:1; transform:none; } }
@media (max-width:620px) {
  .bcard { min-height:0; }
  .bcard img { position:static; justify-self:end; max-width:46%; max-height:120px; margin-top:-6px; }
}

html.vtx .gal .main img { filter:none; animation:none !important; }
html:not(.vtx) .gal .main img { transition:filter .35s ease; }

/* кнопка «назад» в шапке */
.ib.back svg { stroke-width:2.2; }
.hdr-in:has(.back:not([hidden])) .logo { margin-left:-6px; }
@media (max-width:420px) { .hdr-in { gap:6px; } .hdr-act { gap:0; } .ib { width:40px; } .logo { font-size:19px; } }
/* быстрый выбор варианта по «+» */
.qp-head { display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center; }
.qp-head .th { width:96px; height:96px; border-radius:18px; background:var(--surface2); display:grid; place-items:center; overflow:hidden; }
.qp-head .th img { max-width:84px; max-height:84px; object-fit:contain; }
.swc.na { opacity:.35; }
@media (max-width:620px) {   /* на телефоне шторка выезжает снизу, как в мини-аппе */
  .sheet.qsheet { top:auto; bottom:0; left:0; width:100%; max-height:88vh; border-radius:24px 24px 0 0; transform:translateY(105%); padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); }
  .sheet.qsheet.on { transform:none; }
}

/* Б/У: инверсная плашка — сразу отличается от оранжевых «Хит»/«Новинка» и от новых товаров */
.tag.used, .pill.used { background:var(--fg); color:var(--bg); border-color:transparent; letter-spacing:.02em; font-weight:700; }
.pc .ul { padding-right:52px; flex-wrap:wrap; row-gap:2px; line-height:1.3; font-size:13px; color:var(--muted); display:flex; align-items:center; column-gap:10px; }
.pc .ul i, .bat i { display:inline-block; width:17px; height:9px; border:1.5px solid currentColor; border-radius:2px; position:relative; }
.pc .ul i::after, .bat i::after { content:''; position:absolute; inset:1px; right:auto; width:calc((100% - 2px) * var(--b, .9)); background:currentColor; border-radius:1px; }
.usedinfo { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.usedinfo > div { background:color-mix(in srgb,var(--fg) 5%,transparent); border-radius:14px; padding:14px; display:grid; gap:2px; }
.usedinfo small { color:var(--muted); font-size:12px; }
.bat { display:inline-flex; align-items:center; gap:5px; }
.usedinfo b { font-size:17px; }
@media (max-width:560px) { .usedinfo { grid-template-columns:1fr 1fr; } }
.cphs { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; margin-top:6px; }
.cph { aspect-ratio:1; border-radius:14px; overflow:hidden; padding:0; border:1px solid color-mix(in srgb,var(--fg) 12%,transparent); background:var(--surface); cursor:zoom-in; }
.cph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.cph:hover img { transform:scale(1.05); }
.cph[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:1px; }
/* оценка trade-in: на ПК «прилипает» справа, на телефоне — обычный блок (без сдвига top от .sum) */
.est.sum { position:sticky; top:92px; }
@media (max-width:960px) { .est.sum { position:relative; top:auto; } }
/* согласие на обработку ПД и юридические страницы */
.consent { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; cursor:pointer; }
.consent input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex-shrink:0; }
.consent a { color:var(--accent); }
.legal { line-height:1.6; max-width:820px; }
.legal h3 { font-size:18px; margin:22px 0 8px; }
.legal p, .legal ul { margin:0 0 10px; color:color-mix(in srgb,var(--fg) 86%,var(--muted)); }
.legal ul { padding-left:20px; }
.legal a { color:var(--accent); }
.todo { background:color-mix(in srgb,#e8a33a 22%,transparent); color:#e8a33a; border-radius:6px; padding:0 4px; font-size:.92em; }
.legalrow { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; }
.legalrow a { margin-right:18px; color:inherit; }
.legalrow a:hover { color:var(--accent); }

@keyframes shake { 0%,100% { transform:none } 20%,60% { transform:translateX(-6px) } 40%,80% { transform:translateX(6px) } }
.shake { animation:shake .4s; }

/* баннер согласия на cookie (только когда подключена Яндекс Метрика) */
.ckb { position:fixed; left:16px; right:16px; bottom:16px; z-index:60; max-width:720px; margin:0 auto; display:flex; gap:14px;
  align-items:center; justify-content:space-between; padding:14px 16px; border-radius:18px; background:var(--surface);
  border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.35); font-size:14px; line-height:1.4; }
.ckb a { color:var(--accent); }
.ckb .row { display:flex; gap:8px; flex-shrink:0; }
@media (max-width:640px) { .ckb { flex-direction:column; align-items:stretch; } .ckb .row > * { flex:1; } }