/* FILE: index.css | Стили витрины магазина (index.html / index.js). Базовые токены и компоненты — common.css.
   Адаптив: >1024 ПК (боковое меню с текстом) · 769–1024 планшет (меню-иконки) · ≤768 телефон (нижняя панель, кнопки ≥44px). */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.main{min-width:0;width:100%;max-width:1220px;margin:0 auto;padding:0 32px 60px}
#view{min-height:60vh;position:relative}
.page{animation:pageFade .45s var(--ease) both}.page.fwd{animation-name:pageFwd}.page.back{animation-name:pageBack}
@keyframes pageFade{from{opacity:0;transform:translateY(12px)}}@keyframes pageFwd{from{opacity:0;transform:translateX(30px)}}@keyframes pageBack{from{opacity:0;transform:translateX(-30px)}}

/* ---------- Навигация ---------- */
#nav{position:sticky;top:0;height:100vh;padding:22px 14px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(18px);z-index:30}
.nav-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 22px;font-weight:800;font-size:20px}
.nav-brand img{width:36px;height:36px;border-radius:11px;object-fit:cover}
.nav-logo{width:36px;height:36px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:var(--on-accent);font-weight:800;flex:none}
.nav-btn{position:relative;z-index:1;height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:16px;color:var(--muted);font-weight:700;font-size:14.5px;transition:color .25s}
.nav-btn svg{width:23px;height:23px;flex:none;transition:transform .35s var(--ease)}
.nav-btn.on{color:var(--accent)}.nav-btn.on svg{transform:scale(1.12)}.nav-btn:hover{color:var(--text)}.nav-btn.on:hover{color:var(--accent)}
.nav-ind{position:absolute;z-index:0;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 16%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);transition:all .5s var(--ease);box-shadow:0 8px 26px -10px var(--accent)}
.nav-spacer{flex:1}

/* ---------- Шапка ---------- */
#top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:calc(14px + var(--safe-t)) 0 14px;margin-bottom:6px;
  background:linear-gradient(var(--bg) 70%,transparent)}
.brand{font-size:24px;font-weight:800;letter-spacing:.2px;flex:1;min-width:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pvz{display:flex;align-items:center;gap:10px;min-height:46px;padding:5px 14px 5px 6px;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);text-align:left;max-width:190px;transition:transform .2s var(--ease)}
.pvz:active{transform:scale(.96)}
.pvz .pv-i{width:34px;height:34px;border-radius:50%;background:var(--glass);display:grid;place-items:center;color:var(--accent);flex:none}.pvz svg{width:19px;height:19px}
.pvz small{display:block;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.pvz b{display:block;font-size:13.5px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

/* ---------- Сетки ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (min-width:1500px){.pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}.cgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.h-title{font-size:23px;font-weight:800;margin:26px 0 14px;display:flex;align-items:center;justify-content:space-between}
.h-title a{font-size:13px;font-weight:700}
.sec{margin-bottom:8px}

/* ---------- Баннеры ---------- */
.banners{position:relative;margin:6px 0 8px}
.bn-track{gap:14px;padding-bottom:0}
.bn{position:relative;flex:0 0 100%;min-height:176px;border-radius:calc(var(--radius) + 4px);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;cursor:pointer;background-size:cover;background-position:center}
.bn::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 70%)}
.bn::after{content:"";position:absolute;width:260px;height:260px;right:-70px;top:-90px;border-radius:50%;background:rgba(255,255,255,.18);filter:blur(30px);animation:float 6s ease-in-out infinite}
.bn>*{position:relative;z-index:1}.bn-t{font-size:25px;font-weight:800;line-height:1.15;text-shadow:0 2px 14px rgba(0,0,0,.35)}.bn-s{margin-top:6px;opacity:.92;font-weight:600}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}.dots i{width:7px;height:7px;border-radius:4px;background:var(--border);transition:all .35s var(--ease)}.dots i.on{width:24px;background:var(--grad)}

/* ---------- Категории ---------- */
.cc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-height:150px;padding:14px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);
  overflow:hidden;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;cursor:pointer;font-weight:800;text-align:center}
.cc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 20px 40px -20px var(--accent)}.cc:active{transform:scale(.96)}
.cc-pic{flex:1;width:100%;display:grid;place-items:center;font-size:54px;transition:transform .5s var(--ease)}.cc:hover .cc-pic{transform:scale(1.1) rotate(-3deg)}
.cc-pic img{width:100%;height:100%;max-height:96px;object-fit:contain}

/* ---------- Карточка товара ---------- */
.pc{position:relative;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s;transform-style:preserve-3d;will-change:transform}
.pc:hover{box-shadow:0 22px 44px -20px color-mix(in srgb,var(--accent) 50%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.pc:active{transform:scale(.97)!important}
.hscroll .pc{width:176px}
.pc-img{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 14%,var(--surface2)),var(--surface2))}
.pc-img img{width:100%;height:100%;object-fit:contain;padding:9%}.pc-ph{font-size:54px;opacity:.85}
.pc-badge{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:12px;font-size:11.5px;font-weight:800;background:var(--grad);color:var(--on-accent)}
.pc-fav{position:absolute;right:6px;top:6px;width:44px;height:44px;display:grid;place-items:center;color:var(--muted)}
.pc-fav svg{width:22px;height:22px;transition:transform .3s var(--ease)}.pc-fav.on{color:#FF5C7A}.pc-fav.on svg{fill:#FF5C7A;animation:heart .5s var(--ease)}
.pc-body{padding:12px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.pc-title{font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pc-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:8px;gap:6px}
.pc-price b{font-size:16.5px;font-weight:800;display:block}.pc-price s{font-size:12px;color:var(--muted)}
.pc-add{width:44px;height:44px;border-radius:15px;background:var(--grad);color:var(--on-accent);display:grid;place-items:center;flex:none;transition:transform .2s var(--ease);margin:-4px -2px -4px 0}
.pc-add:active{transform:scale(.88)}.pc-add svg{width:22px;height:22px;stroke-width:2.4}
.pc-out .pc-img::after{content:attr(data-out);position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);font-weight:800;color:#fff}
.pc-out .pc-add{opacity:.35;pointer-events:none}

/* ---------- Каталог ---------- */
.page-head{display:flex;align-items:center;gap:12px;margin:8px 0 14px}.page-head h2{font-size:24px;font-weight:800;flex:1;min-width:0}
.searchbar{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 16px;border-radius:18px;background:var(--glass);border:1.5px solid var(--border);color:var(--muted);width:100%;text-align:left;transition:border-color .25s,box-shadow .25s}
.searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.searchbar input{flex:1;background:none;border:0;outline:0;min-height:46px;color:var(--text)}.searchbar svg{width:21px;height:21px;flex:none}
.toolbar{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:12px 0;padding-bottom:2px}.toolbar::-webkit-scrollbar{display:none}
.sentinel{height:60px;display:grid;place-items:center}

/* ---------- Товар ---------- */
.prod{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start}
.gallery{position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 14%,var(--surface2)),var(--surface2));border:1px solid var(--border)}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.g-track::-webkit-scrollbar{display:none}
.g-slide{flex:0 0 100%;aspect-ratio:1;scroll-snap-align:center;display:grid;place-items:center;cursor:zoom-in}
.g-slide img{width:100%;height:100%;object-fit:contain;padding:6%}.g-ph{font-size:110px;animation:float 4s ease-in-out infinite}
.gallery .dots{position:absolute;left:0;right:0;bottom:12px;margin:0}
.p-title{font-size:27px;font-weight:800;line-height:1.15}.p-sub{color:var(--muted);margin-top:4px}
.p-price{display:flex;align-items:baseline;gap:12px;margin:14px 0}.p-price b{font-size:31px;font-weight:800}.p-price s{color:var(--muted)}.p-off{font-weight:800;color:var(--on-accent);background:var(--grad);padding:3px 10px;border-radius:10px;font-size:13px}
.opt-group{margin:16px 0}.opt-group .label{margin-bottom:8px}.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:46px;min-width:46px;padding:0 16px;border-radius:15px;border:1.5px solid var(--border);background:var(--glass);font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:all .25s var(--ease)}
.opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:0 8px 22px -12px var(--accent)}.opt:active{transform:scale(.94)}.opt small{color:var(--muted);font-weight:600}
.specs{display:flex;flex-direction:column}.spec{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--border)}.spec span:first-child{color:var(--muted)}.spec span:last-child{text-align:right;font-weight:600}
.buybar{position:sticky;bottom:calc(10px + var(--safe-b));z-index:15;display:flex;align-items:center;gap:12px;padding:12px;margin-top:20px;border-radius:24px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:var(--shadow)}
.stepper{display:inline-flex;align-items:center;background:var(--glass);border:1px solid var(--border);border-radius:15px}
.stepper button{width:44px;height:44px;display:grid;place-items:center;border-radius:14px}.stepper button:active{background:var(--glass)}.stepper svg{width:18px;height:18px}.stepper b{min-width:28px;text-align:center;font-weight:800}

/* ---------- Корзина / оформление ---------- */
.cart-item{display:flex;gap:12px;align-items:center;padding:12px;margin-bottom:10px;animation:fadeUp .45s var(--ease) both}
.ci-img{width:74px;height:74px;border-radius:16px;background:var(--surface2);display:grid;place-items:center;flex:none;overflow:hidden;font-size:30px}.ci-img img{width:100%;height:100%;object-fit:contain}
.sum-row{display:flex;justify-content:space-between;padding:6px 0}.sum-row.total{font-size:20px;font-weight:800;padding-top:12px;margin-top:6px;border-top:1px solid var(--border)}
.radio-card{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--border);background:var(--glass);margin-bottom:10px;cursor:pointer;transition:all .25s var(--ease);width:100%;text-align:left}
.radio-card.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.radio-card .rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);flex:none;position:relative;transition:.25s}
.radio-card.on .rd{border-color:var(--accent)}.radio-card.on .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grad);animation:pop .35s var(--ease)}
.sticky-cta{position:sticky;bottom:calc(10px + var(--safe-b));z-index:15;margin-top:18px}
.sticky-cta .btn{width:100%;min-height:56px;font-size:16px}

/* ---------- Заказы ---------- */
.order-card{display:block;width:100%;text-align:left;margin-bottom:12px;transition:transform .25s var(--ease)}.order-card:active{transform:scale(.98)}
.o-thumbs{display:flex;margin-top:10px}.o-thumbs span{width:42px;height:42px;border-radius:12px;background:var(--surface2);border:2px solid var(--bg);margin-right:-10px;overflow:hidden;display:grid;place-items:center;font-size:18px}.o-thumbs img{width:100%;height:100%;object-fit:cover}
.timeline{position:relative;padding-left:26px}.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl{position:relative;padding:0 0 16px;animation:fadeUp .5s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}.tl::before{content:"";position:absolute;left:-23px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--c,var(--accent));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--accent)) 22%,transparent)}
.cardnum{font-size:clamp(17px,5.4vw,23px);font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-soon{display:flex;gap:8px;flex-wrap:wrap}.pay-soon .chip{opacity:.55;pointer-events:none}
.banner-info{padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent2) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 40%,transparent);margin-bottom:12px;font-weight:600}

/* ---------- Отзывы ---------- */
.rev-sum{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}
.rev-big{text-align:center}.rev-big .num{font-size:64px;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 50%,transparent))}
.stars{color:#FFB020;letter-spacing:2px}.bars{display:flex;flex-direction:column;gap:7px}.bar{display:grid;grid-template-columns:30px 1fr 34px;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.bar-t{height:7px;border-radius:4px;background:var(--glass);overflow:hidden}.bar-f{height:100%;border-radius:4px;background:var(--grad);width:0;transition:width 1.1s var(--ease)}
.note-card{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-weight:600;background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.note-card svg{width:24px;height:24px;color:var(--accent);flex:none}
.rev{margin-top:12px}.rev-top{display:flex;gap:12px;align-items:center}.avatar{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--on-accent);flex:none}
.ok-tag{color:var(--accent);font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:5px}.ok-tag svg{width:15px;height:15px}
.rev-photos{display:flex;gap:8px;margin-top:10px}.rev-photos img{width:84px;height:84px;object-fit:cover;border-radius:14px;cursor:zoom-in}
.reply{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--glass);border-radius:0 12px 12px 0;font-size:13.5px}
.star-pick{display:flex;gap:4px;justify-content:center;margin:6px 0 14px}.star-pick button{width:48px;height:48px;font-size:34px;color:var(--border);transition:transform .25s var(--ease),color .2s}.star-pick button.on{color:#FFB020;transform:scale(1.12)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumb{width:72px;height:72px;border-radius:14px;overflow:hidden;position:relative;background:var(--surface2)}.thumb img{width:100%;height:100%;object-fit:cover}.thumb button{position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px}

/* ---------- Профиль / меню / страницы ---------- */
.prof-head{display:flex;align-items:center;gap:16px;margin:8px 0 20px}.prof-head .avatar{width:76px;height:76px;font-size:32px;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.menu-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:72px;padding:14px 16px;margin-bottom:10px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);transition:transform .25s var(--ease),border-color .25s}
.menu-item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.menu-item:active{transform:scale(.98)}
.mi-ico{width:50px;height:50px;border-radius:15px;background:var(--glass);border:1px solid var(--border);display:grid;place-items:center;flex:none;font-size:22px;color:var(--muted)}.mi-ico svg{width:23px;height:23px}
.menu-item .grow b{display:block}.menu-item .chev{color:var(--muted)}.menu-item .chev svg{width:20px;height:20px}
.faq-q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;font-weight:700;padding:8px 0}.faq-q svg{width:20px;height:20px;transition:transform .35s var(--ease);flex:none}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}.faq-a>div{overflow:hidden;color:var(--muted)}.faq.open .faq-a{grid-template-rows:1fr}.faq.open .faq-q svg{transform:rotate(90deg)}.faq.open .faq-a>div{padding-bottom:12px}
.step{display:flex;gap:14px;margin-bottom:16px}.step .n{width:38px;height:38px;border-radius:50%;background:var(--grad);color:var(--on-accent);font-weight:800;display:grid;place-items:center;flex:none}

/* ---------- Корзина-панель, приветствие ---------- */
#cartbar{position:fixed;z-index:40;right:32px;bottom:28px;min-height:58px;padding:0 20px;border-radius:22px;background:var(--grad);color:var(--on-accent);font-weight:800;display:flex;align-items:center;gap:12px;
  box-shadow:0 18px 44px -12px var(--accent);animation:pop .5s var(--ease);transition:transform .25s var(--ease)}#cartbar:active{transform:scale(.96)}#cartbar svg{width:24px;height:24px}
#welcome{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;overflow:hidden;transition:opacity .6s,transform .6s var(--ease)}
#welcome.out{opacity:0;transform:scale(1.06);pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:aurora 12s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:70vmax;height:70vmax;left:-25vmax;top:-20vmax;background:var(--accent)}.aurora i:nth-child(2){width:60vmax;height:60vmax;right:-22vmax;bottom:-18vmax;background:var(--accent2);animation-delay:-4s}
.aurora i:nth-child(3){width:34vmax;height:34vmax;left:30%;top:40%;background:color-mix(in srgb,var(--accent) 50%,var(--accent2));animation-delay:-8s;opacity:.3}
.w-brand{position:relative;font-size:clamp(40px,9vw,64px);font-weight:800;letter-spacing:1px;animation:pop .9s var(--ease) both}.w-sub{position:relative;font-weight:700;font-size:18px;margin-top:10px;animation:fadeUp .9s .25s var(--ease) both}
.w-logo{position:relative;width:96px;height:96px;border-radius:28px;object-fit:cover;margin-bottom:18px;animation:pop .8s var(--ease) both;box-shadow:0 20px 50px -14px var(--accent)}
.w-bottom{position:absolute;left:24px;right:24px;bottom:calc(30px + var(--safe-b));max-width:520px;margin:0 auto;animation:fadeUp .9s .5s var(--ease) both}.w-bottom .btn{width:100%;min-height:58px;font-size:17px}.w-bottom p{margin-top:12px;font-size:12.5px;color:var(--muted)}

/* ---------- Планшет ---------- */
@media (max-width:1024px){
  .shell{grid-template-columns:84px 1fr}.main{padding:0 22px 60px}#nav{padding:18px 10px;align-items:center}.nav-btn{justify-content:center;padding:0;width:60px}.nav-btn span,.nav-brand span{display:none}.nav-brand{padding:6px 0 18px}
  .cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.prod{gap:22px}#cartbar{right:22px}
}
/* ---------- Телефон ---------- */
@media (max-width:768px){
  .shell{display:block}.main{padding:0 16px calc(110px + var(--safe-b))}
  #nav{position:fixed;left:12px;right:12px;bottom:calc(10px + var(--safe-b));top:auto;height:68px;flex-direction:row;padding:6px;border-radius:26px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(22px);box-shadow:var(--shadow);gap:2px;transition:transform .45s var(--ease)}
  .nav-brand{display:none}.nav-spacer{display:none}.nav-btn{flex:1;width:auto;flex-direction:column;gap:3px;height:100%;justify-content:center;font-size:10.5px;padding:0}.nav-btn span{display:block}
  body.sub #nav{transform:translateY(140%)}body.sub .brand{visibility:hidden}
  .pgrid{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:12px}.cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .brand{font-size:21px}.pvz{max-width:150px}.pvz b{max-width:84px}
  .prod{display:block}.p-title{font-size:23px}.gallery{margin:0 -16px 16px;border-radius:0 0 28px 28px;border-width:0 0 1px}
  #cartbar{left:16px;right:16px;bottom:calc(88px + var(--safe-b));justify-content:space-between}body.sub #cartbar{display:none}
  .rev-sum{grid-template-columns:96px 1fr;gap:12px}.rev-big .num{font-size:48px}.h-title{font-size:21px}.bn{min-height:160px}
}

/* ===== Спокойное приветствие: медленный свет + тонкие вращающиеся кольца, без резких движений ===== */
@keyframes auroraSlow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,-3%,0) scale(1.06)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes spinSlowRev{to{transform:rotate(-360deg)}}
@keyframes softIn{from{opacity:0;filter:blur(10px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
@keyframes ringIn{from{opacity:0}to{opacity:1}}
.aurora i{animation:auroraSlow 50s ease-in-out infinite alternate!important;opacity:.36;filter:blur(90px)}
.aurora i:nth-child(3){opacity:.18}
.w-brand,.w-sub,.w-logo,.w-bottom{animation:softIn 1.5s var(--ease) both!important}
.w-sub{animation-delay:.3s!important}.w-bottom{animation-delay:.8s!important}
.w-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:ringIn 2.5s ease both}
.w-rings i{grid-area:1/1;border-radius:50%;aspect-ratio:1;
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 1.5px),#000 calc(50% - 1px),#000 50%,transparent calc(50% + 1px));mask:radial-gradient(circle,transparent calc(50% - 1.5px),#000 calc(50% - 1px),#000 50%,transparent calc(50% + 1px))}
.w-rings i:nth-child(1){width:min(84vw,430px);background:conic-gradient(from 0deg,transparent 0,var(--accent) 18%,transparent 40%,var(--accent2) 68%,transparent 90%);animation:spinSlow 70s linear infinite;opacity:.6}
.w-rings i:nth-child(2){width:min(62vw,320px);background:conic-gradient(from 90deg,transparent 0,var(--accent2) 22%,transparent 50%,var(--accent) 76%,transparent 95%);animation:spinSlowRev 95s linear infinite;opacity:.4}
/* карточка товара: без дёргания заглушки, фото не занимает весь экран на телефоне */
.g-ph{animation:none!important}.bn::after{animation-duration:16s}
.g-slide img,.g-slide{transform:none}
@media (max-width:768px){.g-slide{aspect-ratio:auto;height:min(42vh,340px)}}

.buybar .btn{white-space:nowrap;font-size:15px;padding:0 14px}

/* ===== Плавные переходы экранов и загрузка без скачков ===== */
@keyframes pageFade{from{opacity:0}to{opacity:1}}
.page,.page.fwd,.page.back{animation:pageFade .28s ease both}
.bn::after{animation:none;filter:none;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent)}
.aurora i{filter:none!important}
.aurora i:nth-child(1){background:radial-gradient(closest-side,var(--accent),transparent)}
.aurora i:nth-child(2){background:radial-gradient(closest-side,var(--accent2),transparent)}
.aurora i:nth-child(3){background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 50%,var(--accent2)),transparent)}
.aurora i{opacity:.4}
/* заглушка карточки той же высоты, что и настоящая — нет прыжков при подгрузке */
.pc.sk{pointer-events:none;cursor:default;animation:none;opacity:1}.pc.sk .pc-img{background:var(--glass)}
.sk-line{height:14px;border-radius:7px;margin-bottom:8px}.sk-price{height:22px;width:60%;border-radius:8px;margin-top:10px}
/* стартовая заставка: показывается сразу, пока грузятся данные (нет «пустой» страницы) */
body:not(.ready) .shell,body:not(.ready) #cartbar{visibility:hidden}
#boot{position:fixed;inset:0;z-index:600;background:var(--bg);display:grid;place-items:center;transition:opacity .6s ease}
#boot.out{opacity:0;pointer-events:none}
#boot .aurora{position:absolute;inset:0;overflow:hidden}
.boot-ring{position:relative;width:54px;height:54px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0,var(--accent) 45%,var(--accent2) 80%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 20px,#000 21px,#000 25px,transparent 26px);mask:radial-gradient(circle,transparent 20px,#000 21px,#000 25px,transparent 26px);animation:spinSlow 2.2s linear infinite}

/* ===== Полный покой: никаких бесконечных движений (кольца, плавающий свет, покачивания) ===== */
.w-rings,.boot-ring{display:none!important}
.aurora i{animation:none!important}
.empty .ico{animation:none}
.cart-item{animation:none}
@keyframes softIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes skPulse{0%,100%{opacity:1}50%{opacity:.55}}
.skeleton{animation:skPulse 2.4s ease-in-out infinite}.skeleton::after{display:none}

/* Полоска «Где мой заказ»: статичная, без зацикленной анимации */
.track-now{display:flex;gap:12px;align-items:center;margin:4px 0 14px}
.track-emo{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.track-now b{font-size:17px}.track-where{margin-top:3px;font-size:13px;color:var(--accent)}
.track-bar{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}
.track-bar i{height:6px;border-radius:6px;background:var(--border)}
.track-bar i.done{background:var(--c,var(--accent))}
.track-bar i.cur{background:var(--c,var(--accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--accent)) 25%,transparent)}

/* История статусов: будущие шаги серые, текущий выделен */
.tl.todo{opacity:.5}.tl.todo::before{background:var(--border);box-shadow:none}
.tl.cur b{font-size:16px}.tl.cur::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--c,var(--accent)) 28%,transparent)}
.tl-where{margin:3px 0;font-size:13px;color:var(--accent);font-weight:600}