/* Mustarim. — «живая» витрина (2026-11-07, по мотивам shodedim.com). Слой ПОВЕРХ style.css:
   ночь вокруг + белый «лист» с контентом, неоновый кобальт, сферы-иконки, вырезанные товары,
   переходы между страницами (View Transitions). Откат — убрать <link live.css> из шаблонов. */
@view-transition{navigation:auto}
:root{--night:#0a0c13;--night2:#121624;--tile:#f5f4f1;--neon:#5b8cff;--ice:#a9c4ff;--glow:rgba(91,140,255,.55);
  --wa2:#25d366;--wa-ink:#06301a;--tg:#2aabee;--hot:#ff5a4e;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
body{background:var(--night)}
.wrap{background:var(--night);box-shadow:none;overflow-x:clip}

/* ── переходы между страницами: шапка и панель стоят, фото товара «перелетает» из карточки ── */
::view-transition-old(root){animation:lvOut .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:lvIn .28s cubic-bezier(0,0,.2,1) both}
::view-transition-group(pimg){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
::view-transition-old(pimg),::view-transition-new(pimg){height:100%;object-fit:contain}
@keyframes lvOut{to{opacity:0;transform:scale(.985)}}
@keyframes lvIn{from{opacity:0;transform:translateY(10px)}}
.top,.pbar{view-transition-name:hdr}
.tabbar{view-transition-name:tabbar}
.gal>img:first-child{view-transition-name:pimg}

/* ── неоновые «трубки»: зажигаются с миганием, потом изредка мерцают ── */
@keyframes tubeOn{0%{opacity:0}10%{opacity:1}13%{opacity:.12}20%{opacity:.95}23%{opacity:.3}32%,to{opacity:1}}
@keyframes flick{0%,93%,to{opacity:1}94%{opacity:.4}95%{opacity:1}97%{opacity:.6}98%{opacity:1}}
@keyframes ping{to{transform:scale(3);opacity:0}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes blink{50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes bob{to{translate:0 -6px}}
@keyframes tilt{0%,82%,to{transform:none}88%{transform:translateY(-3px) rotate(-12deg)}94%{transform:none}}
@keyframes nudge{0%,72%,to{transform:none;opacity:.7}84%{transform:translateX(-5px);opacity:1}}
@keyframes sheen{0%{transform:translateX(-160%) skewX(-20deg);opacity:0}6%{opacity:.9}24%,to{transform:translateX(320%) skewX(-20deg);opacity:0}}
@keyframes glowB{0%,to{box-shadow:0 0 16px rgba(63,109,224,.4)}50%{box-shadow:0 0 30px rgba(91,140,255,.75)}}
@keyframes glowW{0%,to{box-shadow:0 0 14px rgba(37,211,102,.32)}50%{box-shadow:0 0 30px rgba(37,211,102,.65)}}
@keyframes orbBreath{0%,to{box-shadow:0 0 10px var(--cg),inset 0 0 0 1px rgba(255,255,255,.1)}50%{box-shadow:0 0 26px var(--cg),inset 0 0 0 1px rgba(255,255,255,.2)}}

/* ── шапка: ночь, логотип с неоновой трубкой ── */
.top,.pbar{background:rgba(10,12,19,.84);border-bottom:1px solid rgba(255,255,255,.07);color:#fff}
.logo{position:relative;color:#fff;padding-bottom:4px}
.logo i{color:var(--neon);text-shadow:0 0 10px var(--glow)}
.logo::after{content:'';position:absolute;left:0;right:10px;bottom:0;height:2.5px;border-radius:3px;background:var(--neon);box-shadow:0 0 8px var(--neon),0 0 18px var(--glow);animation:tubeOn 1.4s steps(1) .2s both,flick 7s 2s infinite}
.trust{color:#a4abb8}
.trust .dot{position:relative;background:var(--ok)}
.trust .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s ease-out infinite}
.favlink{color:#a4abb8}.favlink.has{color:var(--ice)}.favlink.has svg{fill:var(--neon)}
.search,.sort{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff}
.search::placeholder{color:#8d94a2}
.search:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.sort option{color:#16181c}
.pbar .t{color:#fff}.pbar .c{color:#a4abb8}
.back,.favbtn.pfav{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff}
.favbtn.pfav svg{stroke:#fff}
.favbtn.pfav.on svg{fill:var(--hot);stroke:var(--hot)}

/* ── белый «лист» с контентом наезжает на ночь; по верхнему краю кобальтовый отлив ── */
.lsheet{position:relative;z-index:4;background:#fff linear-gradient(180deg,#eef3ff 0,#fff 130px) no-repeat;border-radius:28px 28px 0 0;padding-top:4px;min-height:60vh;box-shadow:0 -10px 40px rgba(63,109,224,.22)}
.hero+.lsheet{margin-top:-16px;animation:sheetUp .8s var(--ease) .25s both}
@keyframes sheetUp{from{transform:translateY(50px)}}
.lsheet .sfoot{margin-top:26px}

/* ── герой главной: товары парят и вылезают за неоновую рамку ── */
.hero{position:relative;color:#fff;padding:20px 18px 0;overflow:hidden}
.hero::before{content:'';position:absolute;inset:auto -20% -40px;height:260px;background:radial-gradient(60% 60% at 50% 70%,rgba(63,109,224,.45),transparent 70%);animation:breathe 6s ease-in-out infinite;pointer-events:none}
@keyframes breathe{50%{opacity:.6;transform:scale(1.08)}}
.hero h2{font-size:29px;line-height:1.14;font-weight:800;letter-spacing:-.4px;position:relative}
.hero h2 span{display:block;animation:rise .9s var(--ease) both}
.hero h2 span+span{animation-delay:.12s;color:var(--ice);text-shadow:0 0 22px var(--glow)}
.hero p{margin-top:9px;font-size:14px;line-height:1.55;color:#b7bdc9;max-width:320px;position:relative;animation:rise .9s var(--ease) .24s both}
.stage{position:relative;aspect-ratio:390/280;margin-top:4px}
.stage .frame{position:absolute;left:12%;right:12%;top:34%;height:42%;border-radius:22px;border:2.5px solid var(--neon);box-shadow:0 0 14px var(--neon),0 0 40px var(--glow),inset 0 0 14px var(--glow);animation:tubeOn 1.4s steps(1) .5s both,flick 9s 3s infinite}
.fl{position:absolute;width:var(--w);left:var(--x);top:var(--y);z-index:var(--z,1);animation:flIn 1s var(--spring) var(--d) both}
.fl .o{animation:orb var(--t) ease-in-out infinite}
.fl img{display:block;width:100%;max-height:clamp(90px,30vw,170px);object-fit:contain;filter:drop-shadow(0 16px 14px rgba(0,0,0,.45))}
.fl i{display:block;margin:2px auto 0;width:70%;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,140,255,.55),transparent);animation:gsh var(--t) ease-in-out infinite}
@keyframes flIn{from{opacity:0;transform:translateY(18px) scale(.85)}}
@keyframes orb{0%,to{transform:none}25%{transform:translate(calc(var(--a)*.5px),calc(var(--a)*-.9px)) rotate(.8deg)}50%{transform:translateY(calc(var(--a)*-1.4px))}75%{transform:translate(calc(var(--a)*-.5px),calc(var(--a)*-.7px)) rotate(-.8deg)}}
@keyframes gsh{50%{transform:scale(.78);opacity:.5}}
.ctas{display:flex;gap:10px;padding:8px 0 30px;position:relative;z-index:3;flex-wrap:wrap}
.lbtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .2s var(--spring)}
.lbtn:active{transform:scale(.95)}
.lbtn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbtn.pri{background:var(--acc);color:#fff;animation:glowB 2.8s ease-in-out infinite}
.lbtn.ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18)}
.lbtn.wa{background:var(--wa2);color:var(--wa-ink);animation:glowW 2.6s ease-in-out infinite}
.sheen::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:sheen 4.2s ease-in-out 1.6s infinite;pointer-events:none}
.tilt{display:inline-flex;animation:tilt 4s ease-in-out infinite}
.nudge{display:inline-flex;animation:nudge 2.4s ease-in-out infinite}

/* ── рельс категорий: бегущая лента с иконками-товарами (только главная) ── */
.rail{direction:ltr;overflow:hidden;padding:14px 0 14px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:10px;width:max-content;animation:mq 44s linear infinite}
.rail:hover .track,.rail:active .track,.rail:focus-within .track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(-50%)}}
.ctl{direction:rtl;width:104px;flex:none;background:var(--tile);border-radius:18px;padding:10px 10px 9px;transition:transform .25s var(--spring)}
.ctl:active{transform:scale(.93)}
.ctl .ic{height:62px;display:flex;align-items:center;justify-content:center;position:relative}
.ctl .ic img{max-height:58px;max-width:84px;object-fit:contain;position:relative;z-index:1;animation:bob 2.6s ease-in-out var(--d,0s) infinite alternate}
.ctl .ic::after{content:'';position:absolute;bottom:-3px;width:58px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,140,255,.55),transparent)}
.ctl b{display:block;margin-top:8px;font-size:13.5px}
.ctl small{font-size:11px;color:var(--mut);direction:ltr;display:block;text-align:right}

/* ── сферы-иконки каналов: цвет канала, дышащее свечение, бегущий луч, иконка «подмигивает» ── */
.orbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 6px}
.ob{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 4px 12px;border-radius:18px;background:var(--tile);transition:transform .25s var(--spring)}
.ob:active{transform:scale(.94)}
.orb{--c:var(--neon);--cg:var(--glow);width:52px;height:52px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background:var(--night);color:var(--c);animation:orbBreath 3s ease-in-out infinite}
.orb::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,transparent 0 62%,var(--c) 82%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.2s linear infinite}
.orb svg{width:24px;height:24px;position:relative;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:tilt 4.5s ease-in-out var(--d,0s) infinite}
.orb.wa{--c:var(--wa2);--cg:rgba(37,211,102,.5)}.orb.tg{--c:var(--tg);--cg:rgba(42,171,238,.5)}
.orb .dot{position:absolute;top:1px;left:1px;width:11px;height:11px;border-radius:50%;background:var(--hot);border:2px solid var(--tile);animation:blink 1.6s infinite}
.ob b{display:block;font-size:13px;margin-top:9px}
.ob small{font-size:11px;color:var(--mut)}

/* ── заголовки секций с неоновой плашкой ── */
.gwrap>h1,.gwrap>h2,.fhead h1,.reltit{display:flex;align-items:center;gap:9px}
.gwrap>h1::before,.gwrap>h2::before,.fhead h1::before,.reltit::before{content:'';flex:none;width:22px;height:8px;border-radius:9px;background:var(--neon);box-shadow:0 0 10px var(--neon),0 0 20px var(--glow);animation:tubeOn 1.4s steps(1) .3s both,flick 8s 2s infinite}

/* ── карточки: без рамки, плитка, вырезанный товар с тенью-эллипсом, появление при скролле ── */
.grid{gap:16px 10px}
.card{border:0;background:transparent;border-radius:0;overflow:visible;animation:none}
.imgwrap{border-radius:18px;overflow:hidden;background-color:var(--tile);transition:transform .25s var(--spring)}
.card:active .imgwrap{transform:scale(.97)}
.imgwrap.cut{background:var(--tile)}
.imgwrap.cut img{inset:9% 10% 17%;width:80%;height:74%;object-fit:contain;transition:transform .6s var(--spring);z-index:1}
.imgwrap.cut::after{content:'';position:absolute;bottom:9%;left:20%;right:20%;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,22,27,.2),transparent);transition:transform .4s}
html.js .card{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .55s var(--ease),transform .7s var(--spring);transition-delay:var(--sd,0ms)}
html.js .card.in{opacity:1;transform:none}
.badge{background:#fff;color:var(--ink);display:flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(20,22,27,.08);z-index:2}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--hot);box-shadow:0 0 6px var(--hot);animation:blink 1.6s infinite}
.favbtn{border:0}
.favbtn.on svg{fill:var(--hot);stroke:var(--hot)}
.favbtn.just svg{animation:heart .5s var(--spring)}
.favbtn.just::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--hot);animation:burst .5s ease-out forwards;pointer-events:none}
@keyframes heart{30%{transform:scale(1.45)}}
@keyframes burst{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.meta{padding:9px 3px 0}
.morebtn{border-radius:999px;transition:transform .2s var(--spring)}
.morebtn:active{transform:scale(.95)}

/* ── ночной CTA «вступить в группу» внизу главной ── */
.lcta{margin:34px 18px 0;border-radius:24px;padding:24px 20px;color:#fff;position:relative;overflow:hidden;background:var(--night)}
.lcta::before{content:'';position:absolute;width:260px;height:260px;left:-60px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(63,109,224,.6),transparent 65%);animation:drift 9s ease-in-out infinite alternate}
.lcta::after{content:'';position:absolute;width:220px;height:220px;right:-70px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.4),transparent 65%);animation:drift 11s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(40px,30px) scale(1.15)}}
.lcta>*{position:relative;z-index:1}
.lcta h3{font-size:21px;font-weight:800}
.lcta p{font-size:13.5px;color:#b7bdc9;margin:6px 0 16px;line-height:1.5}
.lcta .lbtn{width:100%}
.cnt{display:flex;gap:24px;margin-bottom:14px}
.cnt b{font-size:25px;font-weight:800;direction:ltr;display:block;font-variant-numeric:tabular-nums;text-shadow:0 0 18px var(--glow)}
.cnt small{font-size:11.5px;color:#a4abb8}

/* ── нижняя панель (мобайл): в центре зелёная сфера группы, счётчик избранного подпрыгивает ── */
.tabbar{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(496px,calc(100% - 20px));z-index:60;background:rgba(10,12,19,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:24px;display:flex;justify-content:space-around;align-items:flex-end;padding:8px 4px 7px;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#8d94a2;font-size:10.5px;min-width:58px;position:relative;transition:color .2s,transform .2s var(--spring)}
.tabbar a:active{transform:scale(.9)}
.tabbar a.on{color:#fff}
.tabbar a.on::after{content:'';position:absolute;bottom:-5px;width:4px;height:4px;border-radius:50%;background:var(--neon);box-shadow:0 0 6px var(--neon)}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar .bd{position:absolute;top:-4px;right:12px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--hot);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tabbar .bd:empty{display:none}
.tabbar .bd.pop{animation:pop .45s var(--spring)}
@keyframes pop{40%{transform:scale(1.5)}}
.tabbar .tc{--c:var(--wa2);--cg:rgba(37,211,102,.55);width:54px;height:54px;margin-top:-26px;box-shadow:0 0 0 5px rgba(10,12,19,.92)}
.tabbar .tc svg{width:25px;height:25px}
.tabbar a.tbc{min-width:64px;color:#c9f5da}
body.hastab .sfoot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* ── страница товара ── */
.wrap.product{background:#fff}
.galwrap{background:#fff}
.gal img.cutimg{background:var(--tile);padding:9%;animation:orb 7s ease-in-out .6s infinite;--a:4}
.pcopy{display:inline-flex;align-items:center;gap:6px;border:0;font:inherit;font-size:12.5px;color:var(--acc);font-weight:700;background:#fff;border-radius:999px;padding:4px 11px;cursor:pointer;
  box-shadow:0 0 0 1.5px rgba(91,140,255,.35),0 0 14px rgba(91,140,255,.25);animation:codeGlow 2.6s ease-in-out infinite;transition:transform .2s var(--spring)}
.pcopy:active{transform:scale(.93)}
.pcopy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes codeGlow{50%{box-shadow:0 0 0 1.5px rgba(91,140,255,.7),0 0 22px rgba(91,140,255,.45)}}
.buy{position:relative;overflow:hidden;background:var(--acc);animation:glowB 2.8s ease-in-out infinite}
.buy .arr{display:inline-block;animation:nudge 2.4s ease-in-out infinite}
.wabtn .waic{animation:tilt 4s ease-in-out infinite}
#lbox.on #lbstage{animation:lbIn .38s var(--spring)}
@keyframes lbIn{from{opacity:0;transform:scale(.6)}}
.ltoast{position:fixed;top:calc(70px + env(safe-area-inset-top));left:50%;z-index:130;background:var(--night);color:#fff;padding:10px 18px;border-radius:999px;font-size:13.5px;box-shadow:0 0 0 1px rgba(91,140,255,.4),0 0 24px var(--glow);opacity:0;pointer-events:none;transform:translate(-50%,-6px);transition:opacity .2s,transform .3s var(--spring)}
.ltoast.on{opacity:1;transform:translate(-50%,0)}

/* ── интро главной: неоновая вывеска «зажигается», товары выпрыгивают, сцена уезжает вниз.
      Включает /static/intro.js (1 раз за сессию, только при заходе снаружи, не при reduced-motion) ── */
.lintro{display:none}
html.intro .lintro{position:fixed;inset:0;z-index:300;background:radial-gradient(90% 60% at 50% 45%,#141a2e 0%,var(--night) 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;animation:introOut .55s var(--ease) 1.5s forwards;cursor:pointer}
.lintro .sign{padding:20px 28px 14px;border-radius:22px;border:2.5px solid var(--neon);box-shadow:0 0 14px var(--neon),0 0 44px var(--glow),inset 0 0 16px var(--glow);animation:signOn .55s steps(1) both}
.lintro .lg{font-family:'Manrope',sans-serif;font-weight:800;font-size:42px;letter-spacing:-1px;color:#fff;direction:ltr;text-shadow:0 0 18px rgba(255,255,255,.35)}
.lintro .lg i{font-style:normal;color:var(--neon);text-shadow:0 0 14px var(--neon)}
.lintro .tube{display:block;height:3px;margin:8px auto 0;width:0;border-radius:3px;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:tubeGrow .45s var(--ease) .45s forwards}
.lintro .sub{margin-top:10px;font-size:12px;letter-spacing:3px;color:var(--ice);animation:rise .4s var(--ease) .6s both}
.lintro .it{position:absolute;width:var(--w);max-height:110px;object-fit:contain;opacity:0;transform:scale(.4) rotate(calc(var(--r)*3));animation:popIn .7s var(--spring) var(--d) forwards,bob 3.2s ease-in-out calc(var(--d) + .7s) infinite alternate;filter:drop-shadow(0 14px 14px rgba(0,0,0,.5))}
.lintro .skip{position:absolute;bottom:30px;font-size:12px;color:#7d8492;animation:rise .4s ease .9s both}
@keyframes signOn{0%{opacity:.9}8%{opacity:0}16%{opacity:.8}22%{opacity:.15}34%{opacity:1}44%{opacity:.5}52%,to{opacity:1}}
@keyframes tubeGrow{to{width:70%}}
@keyframes popIn{to{opacity:1;transform:scale(1) rotate(var(--r))}}
@keyframes introOut{to{transform:translateY(14%) scale(.96);opacity:0;visibility:hidden;pointer-events:none}}

/* ── контентные страницы / избранное / ошибки на листе ── */
.lsheet .legal{padding-top:26px}
.lsheet .empty{padding-top:80px}

/* ── десктоп ── */
@media(min-width:900px){
  .tabbar{display:none}
  body.hastab .sfoot{padding-bottom:48px}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 520px;align-items:center;gap:30px;padding:34px 34px 0}
  .hero h2{font-size:44px}
  .hero p{font-size:16px;max-width:440px}
  .hero .stage{grid-column:2;grid-row:1/span 3}
  .ctas{padding-bottom:50px}
  .lsheet{border-radius:34px 34px 0 0}
  .orbs{max-width:760px;padding:0 34px 6px;grid-template-columns:repeat(3,1fr)}
  .rail{padding:20px 0}
  .lcta{margin:44px 34px 0;padding:34px}
  .imgwrap.cut img{inset:9% 12% 18%;width:76%;height:73%}
}
@media(hover:hover){
  .card:hover .imgwrap.cut img{transform:translateY(-6px) scale(1.04)}
  .card:hover .imgwrap.cut::after{transform:scale(.8)}
  .ob:hover,.ctl:hover{transform:translateY(-3px)}
}
/* «уменьшить движение» — всё статично, карточки видны сразу */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .card{opacity:1;transform:none}
  html.intro .lintro{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
#grid{scroll-margin-top:130px}
/* шапка без поиска (контент, избранное): логотип на ночи, «назад» — стеклянная кнопка */
.pbar .blk .logo{font-size:19px}

/* ══ правки 07.11 (вечер): живые рельсы, логотипы брендов, коды моделей ══ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/cormorant-600.woff2) format('woff2')}
/* рельс: настоящая прокрутка (листается пальцем) + автопрокрутка справа налево из live.js */
.arail{direction:ltr;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.arail::-webkit-scrollbar{display:none}
.atrack{display:flex;gap:10px;width:max-content;padding:2px 14px}
.cico{width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--neon);filter:drop-shadow(0 0 6px var(--glow));position:relative;z-index:1;animation:bob 2.6s ease-in-out var(--d,0s) infinite alternate}
.cico svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.6s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* бренды категории: плитки-«логотипы» */
.brail{padding:12px 0 8px}
.btile{direction:rtl;flex:none;width:134px;height:98px;background:#fff;border:1.5px solid var(--line2);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 8px;transition:transform .25s var(--spring),border-color .2s,box-shadow .2s}
.btile:active{transform:scale(.94)}
.btile .bm{min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;letter-spacing:.07em;text-transform:uppercase;line-height:1.05;color:var(--ink)}
.btile .bm.lux{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:17px;letter-spacing:.17em}
.btile .bm.sport{font-size:20px;letter-spacing:-.02em;font-style:italic}
.btile .bm.long{font-size:12.5px;letter-spacing:.08em}
.btile .bm img{max-height:40px;max-width:100px;object-fit:contain}
.btile small{font-size:11.5px;color:var(--mut)}
.btile.all .bm{font-family:'Heebo',sans-serif;letter-spacing:0;text-transform:none;font-size:15px;font-weight:800}
.btile.on{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 3px rgba(91,140,255,.28),0 8px 22px rgba(20,22,27,.2)}
.btile.on .bm,.btile.on small{color:#fff}
@media(hover:hover){.btile:hover{border-color:#c9cdd4;transform:translateY(-2px)}}
/* страница товара: код поверх фото + полоса моделей-соседей с кодом под каждой */
.galbox{position:relative}
.gcode{position:absolute;bottom:14px;left:14px;z-index:3;font-size:15px;font-weight:800;color:var(--ink);padding:8px 14px}
.gcode svg{width:16px;height:16px;color:var(--acc)}
.vlab{padding:12px 16px 0;font-size:12px;color:var(--mut);font-weight:700}
.vrow{display:flex;gap:8px;overflow-x:auto;padding:8px 14px 14px;scrollbar-width:none;scroll-snap-type:x proximity}
.vrow::-webkit-scrollbar{display:none}
.vt{flex:none;width:76px;border-radius:14px;overflow:hidden;background:var(--tile);border:2px solid transparent;display:flex;flex-direction:column;scroll-snap-align:center;transition:transform .2s var(--spring),border-color .2s,box-shadow .2s}
.vt .vi{height:64px;display:flex;align-items:center;justify-content:center}
.vt .vi img{max-width:88%;max-height:86%;object-fit:contain}
.vt .vi img.cv{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.vt b{display:block;background:#3a3d44;color:#fff;font-size:11px;font-weight:700;text-align:center;padding:4px 2px;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(91,140,255,.22)}
.vt.on b{background:var(--ink);color:var(--ice);text-shadow:0 0 8px var(--glow)}
.vt:active{transform:scale(.92)}

/* ── точки цветов на карточке: расцветки альбома + модели-соседи (scripts/colors.py) ── */
.mrow{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.mrow .br{margin-top:0;min-width:0}
.sw{display:flex;align-items:center;gap:4px;flex:none;direction:ltr}
.sw i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,22,27,.14);transition:transform .25s var(--spring)}
.sw b{font-size:10.5px;font-weight:600;color:var(--mut);margin-left:1px}
html.js .card .sw i{transform:scale(0)}
html.js .card.in .sw i{transform:none;transition-delay:calc(var(--k) * 70ms + .3s)}
@media(hover:hover){.card:hover .sw i{transform:scale(1.25)}}
.c-black{background:#1d1d1f}.c-white{background:#f7f7f5}.c-gray{background:#9b9ea4}.c-beige{background:#dcc6a3}
.c-brown{background:#7a5235}.c-red{background:#d63b3b}.c-burgundy{background:#7a1e30}.c-pink{background:#f2a9c0}
.c-orange{background:#f28a35}.c-yellow{background:#f2d34e}.c-green{background:#3d8b50}.c-olive{background:#7b7d3a}
.c-lightblue{background:#91c8ec}.c-blue{background:#2f6fd6}.c-navy{background:#1f2e57}.c-purple{background:#7f57c8}
.c-silver{background:linear-gradient(135deg,#f1f2f4,#a6abb3)}.c-gold{background:linear-gradient(135deg,#f6dd86,#b6872b)}
.c-multi{background:conic-gradient(#d63b3b,#f2d34e,#3d8b50,#2f6fd6,#7f57c8,#d63b3b)}
@media(prefers-reduced-motion:reduce){html.js .card .sw i{transform:none}}
.sw b{order:-1;margin:0 2px 0 0}
/* настоящие логотипы (public/brands/<slug>.webp, Wikidata P154 → Commons): на выбранной тёмной плитке — белые */
.btile.haslogo .bm img{max-height:42px;max-width:108px}
.btile.haslogo small{max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btile small .n{opacity:.7;margin-inline-start:2px}
.btile.on .bm img{filter:brightness(0) invert(1)}