/* brelcat — визуальный стиль по reference.html.
Тема: prefers-color-scheme + атрибут data-theme на ,
который tg.js выставляет по Telegram.colorScheme. */
/* ─────────────────────────── tokens ─────────────────────────── */
:root, :root[data-theme="light"] {
--paper:#F1EDE6;
--surface:#FBF9F5;
--ink:#191712;
--muted:#7C756C;
--line:#E3DDD2;
--line-2:#D2CABC;
/* Акценты: кремовый — мягкие заливки, глубокий синий — «сильные» места
(главная кнопка, фокус, счётчик), тёплый — сердечко, лапка, звёзды.
Оранжевого больше нет нигде: он перебивал сами товары. */
--accent:#F0E5D3;
--accent-2:#2E3F4F;
--on-accent-2:#F3EDE1;
--accent-wash:var(--accent); /* кремовая подложка плашек */
--ring:rgba(46,63,79,.16);
--accent-soft:#E5D5B9; --on-soft:#2E3F4F; /* отметка выбора */
--warm:#F5C588; --on-warm:#33240F; /* тёплая деталь на акценте */
--tile:#FBF9F5; /* подложка под брелок — всегда светлая, чтобы силуэт читался */
--edge:rgba(255,255,255,.75); /* блик по верхней кромке */
--sh-1:0 1px 1px rgba(74,50,28,.04), 0 4px 12px -6px rgba(74,50,28,.15);
--sh-2:0 2px 4px rgba(74,50,28,.05), 0 14px 28px -12px rgba(74,50,28,.26);
--cord:rgba(62,44,28,.26);
--grain:.055; --grain-blend:multiply;
--paw-op:.11;
--g1-op:.5; --g2-op:.32; --g3-op:.3;
--ok:#4F8A5B; --warn:#B8802F; --bad:#C0503F;
--sp:16px;
color-scheme:light;
}
/* тёмная тема — по системной настройке… */
@media (prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
--paper:#121110;
--surface:#1B1A17;
--ink:#F0ECE3;
--muted:#948B80;
--line:#2A2825;
--line-2:#3A3733;
--accent:#F0E5D3;
--accent-2:#A9C6DC;
--on-accent-2:#151D25;
--accent-wash:#23282E;
--ring:rgba(169,198,220,.2);
--accent-soft:#F0E5D3; --on-soft:#2E3F4F;
--warm:#F5C588; --on-warm:#2A1E0C;
--tile:#E9E3D7;
--edge:rgba(255,255,255,.05);
--sh-1:0 1px 1px rgba(0,0,0,.3), 0 4px 14px -8px rgba(0,0,0,.55);
--sh-2:0 2px 6px rgba(0,0,0,.34), 0 16px 32px -14px rgba(0,0,0,.7);
--grain:.1; --grain-blend:overlay;
--paw-op:.1;
--g1-op:.34; --g2-op:.22; --g3-op:.2;
--ok:#6FBF80; --warn:#E0A552; --bad:#E8776A;
color-scheme:dark;
}
}
/* …и по теме Telegram (перебивает системную) */
:root[data-theme="dark"] {
--paper:#121110;
--surface:#1B1A17;
--ink:#F0ECE3;
--muted:#948B80;
--line:#2A2825;
--line-2:#3A3733;
--accent:#F0E5D3;
--accent-2:#A9C6DC;
--on-accent-2:#151D25;
--accent-wash:#23282E;
--ring:rgba(169,198,220,.2);
--accent-soft:#F0E5D3; --on-soft:#2E3F4F;
--warm:#F5C588; --on-warm:#2A1E0C;
--tile:#E9E3D7;
--edge:rgba(255,255,255,.05);
--sh-1:0 1px 1px rgba(0,0,0,.3), 0 4px 14px -8px rgba(0,0,0,.55);
--sh-2:0 2px 6px rgba(0,0,0,.34), 0 16px 32px -14px rgba(0,0,0,.7);
--grain:.1; --grain-blend:overlay;
--paw-op:.1;
--g1-op:.34; --g2-op:.22; --g3-op:.2;
--ok:#6FBF80; --warn:#E0A552; --bad:#E8776A;
color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* hidden должен прятать что угодно: у .form и подобных задан свой display,
и без этого правила атрибут просто не работал — блок адреса оставался
на экране при самовывозе */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--paper);color:var(--ink);
font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
input,textarea{font:inherit}
/* без border-radius: обводка сама повторяет форму элемента,
иначе круглые кнопки при фокусе с клавиатуры становятся квадратными */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--ring);color:var(--ink)}
/* ─────────────────────────── shell ─────────────────────────── */
.app{
max-width:420px;margin:0 auto;min-height:100dvh;
padding-bottom:calc(28px + env(safe-area-inset-bottom));
position:relative;z-index:1;
}
.pad{padding:0 var(--sp)}
/* ── живой фон: тёплая бумага + плывущие пятна света + следы лап ── */
/* фон тянется на всю ширину экрана — колонка контента остаётся 420px */
.bg{
position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;
background:radial-gradient(130% 55% at 50% -8%,color-mix(in oklab,var(--warm) 9%,var(--paper)),var(--paper) 62%);
}
.glow{position:absolute;border-radius:50%;will-change:transform}
.g1{
width:76%;padding-bottom:76%;top:6%;left:-24%;
background:radial-gradient(closest-side,color-mix(in oklab,var(--warm) 30%,transparent),transparent 72%);
opacity:var(--g1-op);animation:drift1 28s ease-in-out infinite;
}
.g2{
width:70%;padding-bottom:70%;bottom:8%;right:-22%;
background:radial-gradient(closest-side,color-mix(in oklab,#6E8B72 30%,transparent),transparent 72%);
opacity:var(--g2-op);animation:drift2 36s ease-in-out infinite;
}
.g3{
width:52%;padding-bottom:52%;top:44%;left:22%;
background:radial-gradient(closest-side,color-mix(in oklab,#D8A05C 26%,transparent),transparent 70%);
opacity:var(--g3-op);animation:drift3 32s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-46px,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-40px,-30px,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(24px,42px,0) scale(1.1)}}
/* Лапки-пузырьки. Лапка всплывает с «бульком» (круг на воде + пружинка
масштаба), лениво поднимается — и через несколько секунд лопается,
рассыпаясь брызгами. Раскладку и жизненный цикл ведёт js/paws.js, здесь —
только внешний вид.
Прозрачность задана один раз на слое: внутри можно рисовать в полную силу
цвета, а фон всё равно останется фоном. */
.pawfield{position:absolute;inset:0;overflow:hidden;color:var(--ink);opacity:var(--paw-op)}
.pawb{position:absolute;width:var(--w);height:var(--w);
margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);will-change:transform}
.pawb > i{display:block;width:100%;height:100%;transform:rotate(var(--rot))}
.pawb > i svg{width:100%;height:100%;display:block}
/* .live — лапка живая: всплывает и поднимается; .pop — лопается */
.pawb.live{animation:paw-rise var(--life) linear both}
.pawb.live > i{animation:paw-bloop .62s cubic-bezier(.22,1.7,.4,1) both}
.pawb.pop > i{animation:paw-burst .34s cubic-bezier(.3,.85,.35,1) forwards}
@keyframes paw-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx),var(--dy),0)}}
/* «бульк»: пузырёк выскакивает, проседает и встаёт на место */
@keyframes paw-bloop{
0%{transform:rotate(var(--rot)) scale(.12);opacity:0}
40%{transform:rotate(var(--rot)) scale(1.22);opacity:1}
62%{transform:rotate(var(--rot)) scale(.9)}
80%{transform:rotate(var(--rot)) scale(1.05)}
100%{transform:rotate(var(--rot)) scale(1);opacity:1}
}
@keyframes paw-burst{
0%{transform:rotate(var(--rot)) scale(1);opacity:1}
30%{transform:rotate(var(--rot)) scale(1.42);opacity:.72}
100%{transform:rotate(var(--rot)) scale(.3);opacity:0}
}
/* точка, вокруг которой расходятся круг и брызги: сама ничего не занимает */
.pawfx{position:absolute;width:0;height:0}
.pawring{
position:absolute;left:0;top:0;width:var(--w);height:var(--w);
margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
border-radius:50%;border:1.6px solid currentColor;
animation:paw-ring var(--rd,.7s) ease-out forwards;
}
@keyframes paw-ring{from{transform:scale(.25);opacity:.5}to{transform:scale(1.9);opacity:0}}
/* брызги лопнувшего пузырька */
.pawp{
position:absolute;left:0;top:0;width:var(--d);height:var(--d);
margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
border-radius:50%;background:currentColor;
animation:paw-spark var(--pd) cubic-bezier(.12,.75,.3,1) forwards;
}
@keyframes paw-spark{
0%{transform:translate3d(0,0,0) scale(.5);opacity:.95}
70%{opacity:.5}
100%{transform:translate3d(var(--px),var(--py),0) scale(.12);opacity:0}
}
@media (min-width:520px){
.app{border-inline:1px solid var(--line-2);box-shadow:0 0 80px -30px rgba(0,0,0,.35)}
}
/* бумажное зерно поверх всего */
.grain{
position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--grain-blend);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* появление экрана при переходе между разделами */
.view-in{animation:viewIn .26s cubic-bezier(.22,1,.36,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ─────────────────────────── header ─────────────────────────── */
.top{
position:sticky;top:0;z-index:20;background:var(--paper);
display:flex;align-items:center;gap:10px;
padding:calc(12px + env(safe-area-inset-top)) var(--sp) 12px;
border-bottom:1px solid var(--line);
transition:box-shadow .3s ease,border-color .3s ease;
}
.top.stuck{box-shadow:0 14px 26px -22px rgba(50,32,16,.9);border-color:var(--line-2)}
@supports (backdrop-filter:blur(2px)){
.top{background:color-mix(in oklab,var(--paper) 82%,transparent);backdrop-filter:blur(14px) saturate(1.15)}
}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.brand svg{display:block;color:var(--ink)}
/* логотип-картинка: у неё своя бумажная подложка, поэтому в тёмной теме
она читается как круглая аватарка и подсветка не нужна */
.brand img{width:30px;height:30px;border-radius:9px;flex:none;
box-shadow:0 2px 6px -3px rgba(40,30,20,.55)}
.brand b{font-size:17.5px;font-weight:650;letter-spacing:-.025em}
.icobtn{
position:relative;width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;
background:var(--surface);display:grid;place-items:center;box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:transform .16s cubic-bezier(.34,1.4,.64,1),border-color .2s ease,box-shadow .2s ease;
}
.icobtn:active{transform:scale(.92)}
@media (hover:hover){.icobtn:hover{border-color:var(--accent-2);box-shadow:var(--sh-2),inset 0 1px 0 var(--edge)}}
.badge{
position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
background:var(--accent-2);color:var(--on-accent-2);font-size:11px;font-weight:650;line-height:19px;text-align:center;
border:2px solid var(--paper);box-shadow:0 2px 6px -1px rgba(20,26,32,.45);
}
.badge[hidden]{display:none}
.badge.pop{animation:pop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.6)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
/* ─────────────────────────── поиск + фильтр ─────────────────────────── */
.search{
display:flex;align-items:center;gap:9px;height:48px;margin-top:16px;padding:0 16px;
background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease;
}
.search:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring),var(--sh-2);transform:translateY(-1px)}
.search svg{color:var(--muted);flex:none;transition:color .2s ease}
.search:focus-within>svg:first-of-type{color:var(--accent-2)}
.search input{all:unset;flex:1;min-width:0;font-size:15px;color:var(--ink)}
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
/* Подсказка в поиске — не системный placeholder, а свой слой: только его
можно плавно менять. Всплывает снизу, живёт пару секунд, уходит вверх. */
.qwrap{position:relative;display:flex;flex:1;min-width:0}
.ph{
position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;
font-size:15px;color:var(--muted);white-space:nowrap;overflow:hidden;
}
.ph.off{display:none} /* в поле уже что-то набрано */
.ph.run{animation:phrase 3.9s cubic-bezier(.22,1,.36,1) both}
@keyframes phrase{
0%{opacity:0;transform:translateY(7px)}
13%,80%{opacity:1;transform:none}
100%{opacity:0;transform:translateY(-7px)}
}
/* ── «Свой брелок» ── */
/* Кастом по фото — не полка с товарами, а услуга, поэтому он не в списке
категорий, а отдельной плашкой над каталогом: тёплая заливка и живой
акцент выделяют её из белых карточек, но не кричат поверх товаров. */
.promo{
position:relative;overflow:hidden;isolation:isolate;
display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;
text-align:left;border-radius:20px;
border:1px solid color-mix(in oklab,var(--accent-2) 22%,var(--line));
background:linear-gradient(112deg,
var(--accent-wash) 0%,
var(--surface) 64%);
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:transform .2s cubic-bezier(.34,1.5,.64,1),box-shadow .2s ease,border-color .2s ease;
}
.promo:active{transform:scale(.985)}
@media (hover:hover){.promo:hover{border-color:var(--accent-2);box-shadow:var(--sh-2)}}
/* лапа-водяной знак — та же, что бродит по фону экрана */
/* Лапа-водяной знак: держим её в самом углу и помельче — на 78px она
доходила до подписи и мешала читать текст кнопки */
.promo-paw{position:absolute;right:-18px;bottom:-20px;width:62px;height:62px;z-index:-1;
color:var(--warm);opacity:.42;pointer-events:none}
.promo-paw svg{width:100%;height:100%;display:block}
.promo-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
background:var(--accent-2);color:var(--on-accent-2);
box-shadow:0 8px 16px -10px var(--accent-2),inset 0 1px 0 rgba(255,255,255,.24)}
.promo-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.promo-tx b{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:640;letter-spacing:-.015em}
.promo-tx i{font-style:normal;font-size:12px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-tag{flex:none;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--on-soft);
font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.promo-ch{margin-left:auto;flex:none;display:grid;place-items:center;color:var(--accent-2);
transition:transform .25s cubic-bezier(.22,1,.36,1)}
.promo:active .promo-ch{transform:translateX(3px)}
@media (hover:hover){.promo:hover .promo-ch{transform:translateX(3px)}}
/* Панель фильтра: категория, метки и счётчик. Высота фиксирована и не зависит
от числа категорий — сколько бы их ни завели в админке, шапка каталога
остаётся такой же; длинные названия ужимаются многоточием. */
.filters{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:40px}
.fbtn[hidden]{display:none}
.fbtn{
display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:78%;height:40px;padding:0 8px 0 14px;
border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:background .2s ease,color .2s ease,border-color .2s ease,
transform .2s cubic-bezier(.34,1.5,.64,1),box-shadow .2s ease;
}
.fbtn:active{transform:scale(.96)}
@media (hover:hover){.fbtn:hover{border-color:var(--accent-2);box-shadow:var(--sh-2)}}
.fbtn-ic,.fbtn-ch{display:grid;place-items:center;flex:none;color:var(--muted);transition:color .2s ease}
.fbtn-ch{transform:rotate(90deg);transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s ease}
.fbtn[aria-expanded="true"] .fbtn-ch{transform:rotate(-90deg)}
.fbtn-tx{font-size:14px;font-weight:560;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* выбрана категория — кнопка «залипает», как бирка-чип в эталоне */
.fbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fbtn.on .fbtn-ic,.fbtn.on .fbtn-ch{color:color-mix(in oklab,var(--paper) 60%,transparent)}
.fcount{margin-left:auto;flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* ── выбранные метки под панелью фильтра: чип снимает свою метку ── */
.tagrow{
display:flex;gap:7px;margin-top:10px;padding-bottom:2px;
overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tagrow::-webkit-scrollbar{display:none}
.tagrow[hidden]{display:none}
.tchip{
flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
font-size:13px;font-weight:560;letter-spacing:-.01em;white-space:nowrap;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:background .2s ease,color .2s ease,border-color .2s ease,
transform .18s cubic-bezier(.34,1.5,.64,1);
}
.tchip span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* крестик: чип выбранной метки — он же кнопка «снять» */
.tchip.on i{display:grid;place-items:center;margin-right:-3px;
color:color-mix(in oklab,var(--on-accent-2) 62%,transparent)}
.tchip:active{transform:scale(.95)}
.tchip.on{background:var(--accent-2);color:var(--on-accent-2);border-color:var(--accent-2)}
.tchip.on span{color:color-mix(in oklab,var(--on-accent-2) 62%,transparent)}
/* на карточке товара — метка-ссылка: ведёт в каталог по этому фандому */
.ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tchip.sm{height:26px;padding:0 8px 0 10px;font-size:12px;background:var(--accent-wash)}
.tchip.sm i{display:grid;place-items:center;color:var(--muted);
transition:transform .25s cubic-bezier(.22,1,.36,1)}
.tchip.sm i svg{width:12px;height:12px;display:block}
.tchip.sm:active i{transform:translateX(2px)}
@media (hover:hover){.tchip.sm:hover i{transform:translateX(2px)}}
/* ── «Предложить идею»: зовём после того, как каталог просмотрен ── */
.idea{
display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;padding:13px 14px;
text-align:left;border-radius:20px;border:1px dashed var(--line-2);background:transparent;
color:var(--ink);transition:border-color .2s ease,background .2s ease,
transform .2s cubic-bezier(.34,1.5,.64,1);
}
.idea:active{transform:scale(.985)}
@media (hover:hover){.idea:hover{border-color:var(--accent-2);background:var(--surface)}}
.idea-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
background:var(--accent-wash);color:var(--accent-2)}
.idea-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.idea-tx b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.idea-tx i{font-style:normal;font-size:12px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idea-ch{margin-left:auto;flex:none;display:grid;place-items:center;color:var(--muted)}
/* «скоро» — документ ещё не дописан */
.soon{font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
color:var(--on-soft);background:var(--accent-soft);border-radius:999px;padding:3px 8px}
.row:disabled{opacity:.75;cursor:default}
.row:disabled:active{background:transparent}
/* ─────────────────────────── выпадающие меню ─────────────────────────── */
/* Панель висит под своей кнопкой, а не приклеена к низу экрана: до неё
ближе рукой, и она не липнет к краям телефона. */
.scrim{position:fixed;inset:0;z-index:12;background:rgba(12,10,8,.34);
opacity:0;pointer-events:none;transition:opacity .22s ease}
.scrim.on{opacity:1;pointer-events:auto}
body.lock{overflow:hidden}
.menu{
/* координаты ставит JS по кнопке — top/left/right ниже только стартовые */
position:fixed;z-index:42;top:0;left:0;
width:max-content;min-width:232px;max-width:min(320px,calc(100vw - 2 * var(--sp)));
background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:6px;
box-shadow:var(--sh-2),inset 0 1px 0 var(--edge);
transform-origin:top left;transform:translateY(-8px) scale(.96);opacity:0;visibility:hidden;
/* visibility — чтобы закрытое меню не ловило фокус с клавиатуры */
transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .18s ease,visibility 0s linear .24s;
}
.menu.on{
transform:none;opacity:1;visibility:visible;
transition:transform .32s cubic-bezier(.22,1.35,.5,1),opacity .18s ease,visibility 0s;
}
.menu-end{transform-origin:top right}
/* названия категорий длиннее пунктов профиля — панели нужно чуть больше места */
.menu-cat{min-width:min(268px,calc(100vw - 2 * var(--sp)))}
.menu-head{font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);padding:8px 10px 6px}
.menu-body{max-height:min(44dvh,320px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.menu .row{padding:10px;border-radius:14px}
.menu .row+.row{border-top:0}
.menu .row-ic{width:32px;height:32px}
/* карточка пользователя в шапке меню профиля */
.menu-user{display:flex;align-items:center;gap:11px;padding:10px 10px 12px}
.mu-av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
background:color-mix(in oklab,var(--accent-2) 10%,var(--surface));color:var(--accent-2);
border:1px solid var(--line-2)}
.mu-av img,.ava{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.mu-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.mu-tx b,.mu-tx i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-tx b{font-size:15px;font-weight:600;letter-spacing:-.015em}
.mu-tx i{font-style:normal;font-size:12px;color:var(--muted)}
.menu-list{border-top:1px solid var(--line);padding-top:4px}
/* строка категории */
.opts{display:flex;flex-direction:column}
.opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:14px;
text-align:left;color:var(--ink);transition:background .2s ease}
.opt-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:color-mix(in oklab,var(--ink) 6%,var(--surface));color:var(--muted);
transition:background .25s ease,color .25s ease,transform .25s cubic-bezier(.34,1.4,.64,1)}
.opt-ic svg{width:15px;height:15px;display:block}
.opt-tx{font-size:14.5px;font-weight:560;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt-n{margin-left:auto;flex:none;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.opt-mk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--line-2);background:var(--surface);color:transparent;
transition:background .2s ease,border-color .2s ease,color .2s ease,
transform .2s cubic-bezier(.34,1.5,.64,1)}
/* заголовок группы меток: «Игры», а под ним фандомы */
.opt-grp{padding:10px 10px 4px;font-size:11px;font-weight:650;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
.opt-grp+.opt .opt-tx{padding-left:2px}
.opt.zero{opacity:.5} /* в категории пока нечего показать */
.opt.on{background:color-mix(in oklab,var(--accent-2) 7%,transparent)}
.opt.on .opt-ic{background:color-mix(in oklab,var(--accent-2) 12%,var(--surface));color:var(--accent-2)}
/* отметка выбранного — светлый персиковый, а не плотный оранжевый */
.opt.on .opt-mk{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--on-soft)}
.opt:active{background:color-mix(in oklab,var(--ink) 5%,transparent)}
.opt:active .opt-mk{transform:scale(.88)}
@media (hover:hover){
.opt:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}
.opt:hover .opt-ic{transform:scale(1.07)}
}
/* ─────────────────────────── section head ─────────────────────────── */
/* один вертикальный ритм: 24px до заголовка секции, 10px после,
16px — отступ первого блока экрана от шапки */
.head{display:flex;align-items:baseline;gap:8px;margin:24px 0 10px}
.pad > .head:first-child{margin-top:16px}
.head[hidden]{display:none}
.head h2{margin:0;font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.head span{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* ─────────────────────────── catalog ─────────────────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.card{
background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px 10px 12px;
display:flex;flex-direction:column;gap:9px;color:var(--ink);
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
animation:rise .42s cubic-bezier(.22,1,.36,1) backwards;
animation-delay:calc(var(--i,0) * 32ms);
transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease;
}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media (hover:hover){
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2),inset 0 1px 0 var(--edge);border-color:var(--line-2)}
}
.card:active{transform:translateY(-1px)}
.card.off{opacity:.72}
.thumb{
position:relative;aspect-ratio:1;border-radius:15px;display:grid;place-items:center;overflow:hidden;
background:var(--tile);
background:
radial-gradient(115% 80% at 50% 14%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),
var(--tile);
}
/* мягкая кромка и внутренняя тень поверх фото — карточки держат один язык */
.thumb::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
box-shadow:inset 0 -18px 26px -20px rgba(60,40,22,.55),inset 0 0 0 1px rgba(60,40,22,.05);
}
/* шнурок, на котором висит брелок */
.thumb::before{
content:"";position:absolute;top:0;left:50%;width:1px;height:17.4%;z-index:1;
background:linear-gradient(to bottom,rgba(62,44,28,0),var(--cord));
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .charm{height:84%;width:auto;display:block;filter:drop-shadow(0 4px 5px rgba(60,40,22,.22))}
.card.off .thumb img,.card.off .thumb .charm{filter:grayscale(.7) opacity(.8)}
.cstock{
position:absolute;left:8px;top:8px;z-index:2;font-size:10.5px;font-weight:650;letter-spacing:.02em;
color:var(--paper);background:color-mix(in oklab,var(--ink) 76%,transparent);
border-radius:99px;padding:3px 8px;
}
/* «Скоро в продаже»: карточка приглушена, но не выцвела в серое, как
«нет в наличии» — товар не пропал, его просто ещё нельзя купить */
.csoon{background:color-mix(in oklab,var(--accent-2) 88%,transparent);color:var(--on-accent-2)}
.card.soon .thumb img,.card.soon .thumb .charm{filter:none;opacity:.86}
.card.soon{opacity:.88}
.csoon-note{margin-top:2px;font-size:11px;color:var(--accent-2);font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .add.soon{background:var(--accent-wash);color:var(--accent-2);font-size:15px}
/* лапка на фото — товар участвует в помощи животным */
.cgood{
position:absolute;left:8px;top:8px;z-index:2;width:22px;height:22px;border-radius:50%;
display:grid;place-items:center;background:var(--warm);color:var(--on-warm);
box-shadow:0 4px 10px -5px rgba(0,0,0,.5);
}
.cgood svg{width:12px;height:12px;display:block}
.card h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em}
.card p{margin:2px 0 0;font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.buy{display:flex;align-items:center;gap:8px;margin-top:auto}
.price{font-size:14px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* «В корзину» на карточке — ровный круг с лапой. Спокойный по умолчанию
(главное на карточке — сам брелок), на наведении заливается акцентом. */
.add{
margin-left:auto;width:36px;height:36px;border-radius:50%;flex:none;
border:1px solid color-mix(in oklab,var(--accent-2) 24%,var(--line-2));
background:radial-gradient(120% 120% at 50% 0%,
color-mix(in oklab,var(--accent-2) 12%,var(--surface)),var(--paper));
display:grid;place-items:center;color:var(--accent-2);
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:background .22s ease,color .22s ease,border-color .22s ease,
transform .2s cubic-bezier(.34,1.5,.64,1),box-shadow .22s ease;
}
.add .ic{width:18px;height:18px;display:block;
transition:transform .24s cubic-bezier(.34,1.5,.64,1)}
.add .ic svg{width:100%;height:100%;display:block}
.card:active .add{transform:scale(.88)}
@media (hover:hover){
.card:hover .add{
background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent-2);
box-shadow:0 0 0 3px var(--ring),0 8px 16px -10px color-mix(in oklab,var(--accent-2) 85%,#000);
}
/* только масштаб от центра: любой сдвиг заметен как «съехавшая» иконка */
.card:hover .add .ic{transform:scale(1.12)}
}
/* ─────────────────────────── empty / loading / error ─────────────────────────── */
.empty{
border:1px dashed var(--line-2);border-radius:24px;padding:30px 22px 28px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:16px;
background:radial-gradient(80% 60% at 50% 40%,color-mix(in oklab,var(--warm) 9%,transparent),transparent 70%);
}
.grid .empty{grid-column:1/-1;margin-top:0}
.empty svg{color:var(--ink);opacity:.3;margin-bottom:12px;transform-origin:50% 100%;
animation:breathe 5.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
/* хвост дёргается раз в шесть секунд — кот спит, но живой */
.empty .tail{transform-box:fill-box;transform-origin:0% 100%;animation:twitch 6.2s ease-in-out infinite}
@keyframes twitch{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-10deg)}92%{transform:rotate(4deg)}}
.empty b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.empty span{font-size:13px;color:var(--muted);max-width:24ch;line-height:1.4;margin-top:5px}
.empty .btn{margin-top:16px}
.loading{padding:46px 16px;text-align:center;color:var(--muted);font-size:13px}
.loading::before{
content:"";display:block;width:24px;height:24px;margin:0 auto 12px;border-radius:50%;
border:2.5px solid var(--line-2);border-top-color:var(--accent-2);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.error-box{
margin:26px 0;padding:26px 22px;text-align:center;background:var(--surface);
border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
}
.error-box .big{font-size:36px;margin-bottom:10px}
.error-box p{margin:0}
.error-box .hint{margin-top:8px;font-size:13px;color:var(--muted)}
/* ─────────────────────────── list rows ─────────────────────────── */
.list{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge)}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:left;
color:var(--ink);transition:background .2s ease}
.row+.row{border-top:1px solid var(--line)}
.row:active{background:color-mix(in oklab,var(--ink) 5%,var(--surface))}
.row-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
background:color-mix(in oklab,var(--ink) 6%,var(--surface));color:var(--ink);
transition:background .25s ease,color .25s ease,transform .25s cubic-bezier(.34,1.4,.64,1)}
@media (hover:hover){
.row:hover{background:color-mix(in oklab,var(--ink) 3%,var(--surface))}
.row:hover .row-ic{background:color-mix(in oklab,var(--accent-2) 12%,var(--surface));color:var(--accent-2);transform:scale(1.06)}
.row:hover .row-ch{transform:translateX(3px);color:var(--ink)}
}
.row-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.row-tx b{font-size:14.5px;font-weight:560;letter-spacing:-.01em}
.row-tx i{font-style:normal;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-ch{margin-left:auto;color:var(--muted);flex:none;transition:transform .25s cubic-bezier(.22,1,.36,1),color .25s ease}
/* ─────────────────────────── footer ─────────────────────────── */
.foot{margin-top:24px;text-align:center;display:flex;flex-direction:column;gap:9px;align-items:center}
.foot nav{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.foot nav a{border-bottom:1px solid var(--line-2);padding-bottom:1px;
transition:color .2s ease,border-color .2s ease}
.foot nav a:hover{color:var(--accent-2);border-color:var(--accent-2)}
.foot nav em{font-style:normal;opacity:.5}
.foot small{font-size:11px;color:var(--muted);letter-spacing:.04em}
/* ─────────────────────────── помощь животным ─────────────────────────── */
/* Плашка акции стоит сразу под «Своим брелоком», а не в подвале: про помощь
животным надо знать до покупки, а не после неё. Единственный плотный цвет
на экране — поэтому её видно, а товары рядом остаются главными. */
/* Тень и поведение при наведении — те же, что у «Своего брелока»: обе плашки
стоят рядом и должны отзываться одинаково, различаясь только цветом. */
.goodbar{
display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;
border-radius:20px;background:#2E3F4F;color:#F5EFE3;
border:1px solid rgba(245,239,227,.14);
box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .2s cubic-bezier(.34,1.5,.64,1),box-shadow .2s ease,border-color .2s ease;
}
.goodbar:active{transform:scale(.985)}
@media (hover:hover){.goodbar:hover{border-color:rgba(255,138,115,.55);box-shadow:var(--sh-2)}}
/* коралловое сердце на тёмно-синем — тот же синий, что и у плашки, но глубже */
.goodbar-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:#1E2C39;color:#FF8A73;box-shadow:inset 0 0 0 1px rgba(255,138,115,.24)}
.goodbar-ic svg{width:19px;height:19px}
.goodbar-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.goodbar-tx b{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.goodbar-tx b::first-letter{text-transform:uppercase}
.goodbar-tx i{font-style:normal;font-size:12px;color:rgba(245,239,227,.66);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goodbar-ch{margin-left:auto;flex:none;display:grid;place-items:center;color:rgba(245,239,227,.6);
transition:transform .25s cubic-bezier(.22,1,.36,1)}
.goodbar:active .goodbar-ch{transform:translateX(3px)}
@media (hover:hover){.goodbar:hover .goodbar-ch{transform:translateX(3px)}}
/* Плашка на карточке товара — вход в подробности акции */
.pgood{display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px 13px;border-radius:18px;
border:1px solid color-mix(in oklab,var(--accent-2) 22%,var(--line));
background:var(--accent-wash);
transition:border-color .2s ease,transform .2s cubic-bezier(.34,1.5,.64,1)}
.pgood:active{transform:scale(.985)}
.pgood-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:var(--accent-2);color:var(--warm)}
.pgood-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pgood-tx b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pgood-tx b::first-letter{text-transform:uppercase}
.pgood-tx i{font-style:normal;font-size:12px;color:var(--muted)}
.pgood-ch{margin-left:auto;flex:none;display:grid;place-items:center;color:var(--accent-2)}
/* Экран акции */
.good-hero{text-align:center;padding:22px 8px 4px}
/* тот же знак, что и в баннере акции на главной: коралловое сердце
на тёмно-синем — иначе на светлой странице оно теряется */
.good-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
background:#1E2C39;color:#FF8A73;
box-shadow:inset 0 0 0 1px rgba(255,138,115,.24)}
.good-ic svg{width:26px;height:26px}
.good-hero h1{margin:14px 0 0;font-size:22px;font-weight:650;letter-spacing:-.03em}
.good-hero p{margin:8px auto 0;max-width:32ch;font-size:14px;line-height:1.5;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;align-items:flex-start;gap:11px}
.step-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:var(--accent-2);color:var(--on-accent-2);font-size:12.5px;font-weight:700}
.step-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.step-tx b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.step-tx i{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.4}
/* в «Условиях» пояснения длиннее строки — им нужен перенос, а не многоточие */
.good-list .row-tx i{white-space:normal;overflow:visible;line-height:1.4}
.good-list .row-ic svg{width:17px;height:17px}
.good-note{text-align:center;padding:0 6px}
/* ─────────────────────────── карточка товара ─────────────────────────── */
.hero{
position:relative;margin-top:16px;border-radius:24px;overflow:hidden;background:var(--tile);
border:1px solid var(--line);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{flex:0 0 100%;aspect-ratio:1;object-fit:cover;scroll-snap-align:center}
.hero-empty{
aspect-ratio:1;display:grid;place-items:center;
background:radial-gradient(115% 80% at 50% 14%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),var(--tile);
}
.hero-empty .charm{height:62%;width:auto;filter:drop-shadow(0 6px 8px rgba(60,40,22,.22))}
/* стрелки листания: полупрозрачные кружки поверх фото, гаснут на краях */
.galnav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:color-mix(in oklab,var(--surface) 82%,transparent);color:var(--ink);
border:1px solid var(--line-2);box-shadow:var(--sh-1);
transition:opacity .2s ease,transform .18s cubic-bezier(.34,1.5,.64,1),background .2s ease;
}
@supports (backdrop-filter:blur(2px)){
.galnav{background:color-mix(in oklab,var(--surface) 62%,transparent);backdrop-filter:blur(8px)}
}
.galnav.prev{left:10px}
.galnav.next{right:10px}
.galnav.prev svg{transform:rotate(180deg)}
.galnav:active{transform:translateY(-50%) scale(.9)}
.galnav:disabled{opacity:.3;pointer-events:none}
@media (hover:hover){.galnav:hover{background:var(--surface)}}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots span{width:6px;height:6px;border-radius:99px;background:var(--line-2);transition:width .2s ease,background .2s ease}
.dots span.on{width:18px;background:var(--accent-2)}
.pbody{margin-top:16px}
.pbody h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.025em}
.pprice{margin-top:6px;font-size:24px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pstock{margin-top:4px;font-size:12.5px;color:var(--muted)}
.pdesc{margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.5;white-space:pre-line}
/* размеры — те же бирки, что и категории */
.sizes{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.szchip{
display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;
padding:7px 14px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:background .2s ease,color .2s ease,border-color .2s ease,
transform .2s cubic-bezier(.34,1.5,.64,1),box-shadow .2s ease;
}
.szchip:active{transform:scale(.95)}
.szchip .szlabel{font-size:14px;font-weight:600}
.szchip .szprice{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.szchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.szchip.on .szprice{color:color-mix(in oklab,var(--paper) 70%,transparent)}
.szchip:disabled{opacity:.4;cursor:default}
.szchip:disabled .szlabel{text-decoration:line-through}
/* степпер количества */
.stepper,.step{
display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:999px;
background:var(--surface);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
}
.stepper{margin-top:16px;padding:2px}
.stepper button,.step button{
width:34px;height:34px;display:grid;place-items:center;color:var(--ink);border-radius:50%;
font-size:17px;line-height:1;
transition:transform .18s cubic-bezier(.34,1.5,.64,1),color .18s ease;
}
.step button{width:30px;height:30px;font-size:15px}
.stepper button:active,.step button:active{transform:scale(.82);color:var(--accent-2)}
@media (hover:hover){.stepper button:hover,.step button:hover{color:var(--accent-2)}}
.stepper button:disabled,.step button:disabled{opacity:.35;pointer-events:none}
.stepper .qv,.step em{font-style:normal;min-width:22px;text-align:center;font-size:14px;font-weight:600;
font-variant-numeric:tabular-nums}
/* ─────────────────────────── отзывы ─────────────────────────── */
.stars{display:inline-flex;align-items:center;gap:2px;flex:none}
.stars i{display:block;width:13px;height:13px;color:var(--line-2)}
.stars i.on{color:var(--warm)}
.stars svg{width:100%;height:100%;display:block}
.stars.lg i{width:16px;height:16px}
/* оценка в карточке каталога и на странице товара */
.crate{display:inline-flex;align-items:center;gap:3px;flex:none;
font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.crate svg{width:11px;height:11px;color:var(--warm);display:block}
.pcrate{margin-top:7px;font-size:13px;gap:4px}
.pcrate svg{width:13px;height:13px}
.pcrate:active{opacity:.6}
/* сводка над списком отзывов */
.rsum{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge)}
.rsum-n{font-size:24px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.rsum-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.rsum-tx span{font-size:12px;color:var(--muted)}
.rsum .btn{margin-left:auto;flex:none;height:38px;padding:0 15px;font-size:13px}
.rlist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rv{
background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 14px;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
animation:rise .42s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 40ms);
}
.rv-top{display:flex;align-items:center;gap:9px}
.rv-who{font-size:14px;font-weight:600;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-date{margin-left:auto;flex:none;font-size:11.5px;color:var(--muted)}
.rv-tx{margin:8px 0 0;font-size:13.5px;line-height:1.5;white-space:pre-line}
/* ответ магазина: подпись с галочкой, как у подтверждённого аккаунта */
.rv-reply{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--accent-wash);
border:1px solid color-mix(in oklab,var(--accent-2) 16%,var(--line))}
.rv-shop{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;letter-spacing:-.01em}
.rv-vf{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
background:var(--accent-2);color:var(--on-accent-2)}
.rv-vf svg{width:10px;height:10px}
.rv-reply p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted);white-space:pre-line}
/* «отзывов пока нет» — компактнее, чем пустой каталог */
.rnone{padding:18px 14px;border:1px dashed var(--line-2);border-radius:18px;text-align:center}
.rnone b{display:block;font-size:14px;font-weight:600}
.rnone span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.rnone .btn{margin-top:12px}
/* ─────────────────────────── корзина ─────────────────────────── */
.ci{display:flex;align-items:center;gap:11px;padding:11px 14px;
animation:rise .38s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 60ms)}
.ci+.ci{border-top:1px solid var(--line)}
.ci-th{flex:none;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
background:radial-gradient(115% 80% at 50% 14%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),var(--tile);
box-shadow:inset 0 -12px 18px -14px rgba(60,40,22,.5),inset 0 0 0 1px rgba(60,40,22,.05)}
.ci-th img{width:100%;height:100%;object-fit:cover}
.ci-th .charm{height:34px;filter:drop-shadow(0 2px 3px rgba(60,40,22,.2))}
.ci-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.ci-tx b{font-size:14px;font-weight:560;letter-spacing:-.01em}
.ci-tx span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ci .step{margin-left:auto}
.ci-del{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--muted);
transition:color .2s ease,background .2s ease,transform .18s cubic-bezier(.34,1.5,.64,1)}
.ci-del:active{transform:scale(.85)}
@media (hover:hover){.ci-del:hover{color:var(--bad);background:color-mix(in oklab,var(--bad) 12%,transparent)}}
.total{display:flex;align-items:baseline;padding:14px 2px 12px;border-top:1px solid var(--line);margin-top:4px}
.total span{font-size:13px;color:var(--muted)}
.total b{margin-left:auto;font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* ─────────────────────────── кнопки ─────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 22px;border-radius:999px;
background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-size:14.5px;font-weight:600;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:transform .2s cubic-bezier(.34,1.5,.64,1),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:active{transform:scale(.96)}
@media (hover:hover){.btn:hover{border-color:var(--accent-2);color:var(--accent-2);box-shadow:0 0 0 3px var(--ring)}}
.btn.cta,.cta{
height:52px;width:100%;border:0;border-radius:999px;background:var(--accent-2);color:var(--on-accent-2);
font-size:15px;font-weight:600;letter-spacing:-.01em;
box-shadow:0 6px 16px -8px color-mix(in oklab,var(--accent-2) 80%,#000),inset 0 1px 0 rgba(255,255,255,.18);
transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .2s ease,box-shadow .25s ease,background .2s ease;
}
.cta:active{transform:scale(.982) translateY(1px);box-shadow:0 3px 8px -6px rgba(0,0,0,.6)}
@media (hover:hover){
.cta:hover{background:color-mix(in oklab,var(--accent-2) 88%,#000);transform:translateY(-1px);
box-shadow:0 10px 22px -10px color-mix(in oklab,var(--accent-2) 80%,#000),inset 0 1px 0 rgba(255,255,255,.18)}
}
.cta:disabled{opacity:.35;pointer-events:none}
.btn.slim{height:48px;padding:0 18px;white-space:nowrap}
/* «В корзину» отчитывается прямо на себе — экран при этом не меняется */
.btn.ok{border-color:var(--ok);color:var(--ok)}
/* Две кнопки покупки: «В корзину» — второстепенная, «Купить» — главная.
Стоят рядом, потому что это разные намерения, а не одно с уточнением. */
.pbtns{display:flex;align-items:stretch;gap:8px;margin-top:14px}
.pbtns .btn{flex:none;height:52px;padding:0 16px}
.pbtns .cta{flex:1;min-width:0;white-space:nowrap}
.pbtns svg{flex:none}
/* ── Брелок по фото: снимок, пожелания, отправка ── */
.cst-hero{
margin-top:12px;border-radius:24px;overflow:hidden;background:var(--tile);
border:1px solid var(--line);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
aspect-ratio:1;display:grid;place-items:center;
}
/* Пустая рамка — квадрат с котиком, а с фотографией подстраивается под неё:
вертикальный кадр 9:16 в квадрате обрезался ровно пополам, и от питомца
оставалась макушка. Показываем снимок целиком — его же увидит мастер. */
.cst-hero.has{aspect-ratio:auto;max-height:62vh}
.cst-hero img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain}
.cst-empty{width:100%;height:100%;display:grid;place-items:center;
background:radial-gradient(115% 80% at 50% 14%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),var(--tile)}
.cst-empty .charm{height:52%;width:auto;filter:drop-shadow(0 6px 8px rgba(60,40,22,.22))}
/* Лента снимков под главным кадром: видно все, что уйдут мастеру,
и любой можно убрать до отправки */
.cst-strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.cst-shot{position:relative;flex:none;width:62px;height:62px;border-radius:14px;overflow:hidden;
background:var(--tile);border:1px solid var(--line-2)}
.cst-shot.main{border-color:var(--accent-2)}
.cst-shot img{width:100%;height:100%;object-fit:cover;display:block}
.cst-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;font-size:14px;line-height:1;
background:color-mix(in oklab,var(--ink) 62%,transparent);color:var(--paper);border:0}
.cst-del:active{transform:scale(.9)}
.cst-pick{display:flex;gap:8px;margin-top:10px}
.cst-pick .btn{flex:1;min-width:0;padding:0 12px;font-size:13.5px}
/* Шаги мастера: варианты без картинки — списком, с картинками (позы) —
плиткой в два столбца, чтобы примеры было видно рядом и можно сравнить */
.cst-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cst-opts.pics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cst-opt{
display:flex;align-items:center;gap:12px;width:100%;padding:14px 15px;text-align:left;
border-radius:20px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
box-shadow:var(--sh-1);transition:border-color .2s ease,transform .2s cubic-bezier(.34,1.5,.64,1);
}
.cst-opt:active{transform:scale(.985)}
@media (hover:hover){.cst-opt:hover{border-color:var(--accent-2)}}
.cst-opt b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.cst-opts.pics .cst-opt{flex-direction:column;align-items:stretch;gap:9px;padding:9px}
.cst-opts.pics .cst-opt b{font-size:13.5px;text-align:center}
.cst-opt-pic{display:block;border-radius:14px;overflow:hidden;background:var(--tile);aspect-ratio:1}
.cst-opt-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* Проверка заявки: строка «что выбрано» и есть ли что править */
.cst-sum{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cst-row{
display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;width:100%;
padding:12px 14px;text-align:left;border-radius:18px;border:1px solid var(--line-2);
background:var(--surface);color:var(--ink);
}
.cst-row:active{opacity:.75}
.cst-row-k{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cst-row-v{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cst-row-e{font-size:12px;color:var(--accent-2);font-weight:600}
/* Срок отправки: обещание рядом с кнопкой покупки, а не в подвале.
Нажатие ведёт в поддержку — там ответят про конкретный заказ. */
.pship{
display:block;width:100%;margin-top:10px;padding:9px 12px;border-radius:14px;text-align:left;
background:var(--accent-wash);border:1px solid color-mix(in oklab,var(--accent-2) 14%,var(--line));
color:var(--muted);font-size:12px;line-height:1.4;
transition:border-color .2s ease,color .2s ease;
}
@media (hover:hover){.pship:hover{border-color:var(--accent-2);color:var(--ink)}}
.pship:active{opacity:.7}
/* Самовывоз в оформлении: адрес вместо поля «куда везти» */
.pickup{
display:flex;flex-direction:column;gap:3px;margin-top:9px;padding:12px 14px;border-radius:18px;
background:var(--accent-wash);border:1px solid color-mix(in oklab,var(--accent-2) 18%,var(--line));
}
.pickup[hidden]{display:none}
.pickup b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pickup span{font-size:13px;color:var(--muted);line-height:1.4}
/* Товара нет: вместо кнопок покупки — путь к живым людям */
.pgone{
margin-top:16px;padding:16px 14px;border-radius:20px;text-align:center;
border:1px dashed var(--line-2);
background:radial-gradient(80% 70% at 50% 30%,color-mix(in oklab,var(--warm) 8%,transparent),transparent 72%);
display:flex;flex-direction:column;align-items:center;gap:5px;
}
.pgone b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pgone span{font-size:12.5px;color:var(--muted);max-width:30ch;line-height:1.4}
.pgone .btn{margin-top:9px}
/* Пауза приёма заказов: не ошибка и не «нет в наличии», а честное
предупреждение владельца — тон спокойный, но заметный */
.paused{
display:flex;flex-direction:column;gap:5px;margin-top:12px;padding:14px 15px;border-radius:18px;
border:1px solid color-mix(in oklab,var(--warn) 34%,var(--line));
background:color-mix(in oklab,var(--warn) 9%,var(--surface));
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
}
.adm-feat{display:flex;flex-direction:column;gap:6px}
.adm-feat-off{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
margin:0 0 4px 30px;padding:9px 11px;border-radius:14px;
border:1px dashed color-mix(in oklab,var(--warn) 40%,var(--line-2));
background:color-mix(in oklab,var(--warn) 7%,transparent)}
.adm-feat-off span{font-size:12px;color:var(--muted);line-height:1.4;white-space:pre-line}
/* тариф по зонам: способ доставки строкой, под ним — зоны с ценами */
.summary .item.col{flex-direction:column;align-items:stretch;gap:3px}
.summary .item.col b{font-size:13.5px;font-weight:600}
.summary .zline{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.summary .zline em{font-style:normal;font-variant-numeric:tabular-nums}
.paused b{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.paused span{font-size:13px;color:var(--muted);line-height:1.45;white-space:pre-line}
.paused + .btn{margin-top:12px}
/* «Скоро в продаже» — не поломка, а анонс: рамка акцентная, а не пунктир */
.psoon{border-style:solid;border-color:color-mix(in oklab,var(--accent-2) 30%,var(--line));
background:radial-gradient(80% 70% at 50% 20%,var(--accent-wash),transparent 74%)}
.psoon .cta{margin-top:11px}
/* ─────────────────────────── формы (оформление заказа) ─────────────────────────── */
.form{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.form label{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
margin-bottom:-3px}
.form input,.form textarea,.form select,.promo input{
width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
padding:13px 15px;font-size:15px;color:var(--ink);outline:none;resize:none;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:border-color .2s ease,box-shadow .25s ease;
}
/* Свой список регионов: системный вид select ломает круглые поля рядом,
поэтому рисуем такое же поле и подставляем свою стрелку */
.form select{
font:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;
padding-right:38px;background-repeat:no-repeat;background-position:right 15px center;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form input::placeholder,.form textarea::placeholder,.promo input::placeholder{color:var(--muted)}
.form input:focus,.form textarea:focus,.form select:focus,.promo input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring),var(--sh-1)}
.promo{display:flex;gap:8px}
.promo input{text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.promo input::placeholder{text-transform:none;letter-spacing:0;font-weight:400}
.promo input:disabled{opacity:.7}
/* доставка */
.dlv{display:flex;flex-direction:column;gap:8px}
.dlv-opt{
display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:18px;cursor:pointer;
background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:border-color .2s ease,box-shadow .2s ease;
}
.dlv-opt:has(input:checked){border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring),var(--sh-1)}
.dlv-opt input{accent-color:var(--accent-2);width:17px;height:17px;flex:none}
/* способ на паузе: виден, но не кликается — покупатель понимает, что служба
у нас есть, просто сейчас не работает */
.dlv-opt.off{opacity:.5;cursor:not-allowed}
.dlv-opt.off .dlv-price{color:var(--warn);font-size:12px;text-align:right}
.dlv-name{flex:1;font-size:14.5px;font-weight:560}
.dlv-price{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* итоговая сводка */
.summary,.olist{
background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 16px;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
}
.summary .item,.olist .item{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0}
.summary .item span:last-child,.olist .item span:last-child{color:var(--muted);white-space:nowrap;
font-variant-numeric:tabular-nums}
/* Длинные значения — адрес пункта выдачи, комментарий, трек — переносим по
словам и рвём слишком длинное слово. Цены остаются в одну строку: ломать
сумму по разряду нельзя. */
.summary .item span.wrap,.olist .item span.wrap,
.olist .item.copy span:last-child{
white-space:normal;overflow-wrap:anywhere;text-align:right;min-width:0;
}
.summary .sum{display:flex;justify-content:space-between;border-top:1px solid var(--line);
margin-top:10px;padding-top:11px;font-size:16px;font-weight:650;letter-spacing:-.02em}
.summary .sum span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}
.item.discount span,.item.discount span:last-child{color:var(--ok);font-weight:600}
.consent{margin-top:16px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.consent a{border-bottom:1px solid var(--line-2)}
.hint{font-size:12.5px;color:var(--muted);margin-top:12px}
/* подсказка под полем, пока его не заполнили как надо */
.hint.warn{color:var(--warn)}
/* ─────────────────────────── заказы ─────────────────────────── */
.status-page{text-align:center;padding:34px 0 0;display:flex;flex-direction:column;align-items:center}
.status-page .big{font-size:52px;line-height:1;margin-bottom:14px;
animation:pop .5s cubic-bezier(.34,1.4,.64,1) both}
.status-page h1{margin:0;font-size:20px;font-weight:650;letter-spacing:-.02em}
.status-page .hint{max-width:26ch}
.status-page .olist{width:100%;text-align:left;margin-top:16px}
.status-page .btn,.status-page .cta{margin-top:20px}
.stbadge{
display:inline-block;margin-top:10px;font-size:12px;font-weight:600;border-radius:99px;padding:5px 12px;
background:color-mix(in oklab,var(--ink) 7%,var(--surface));border:1px solid var(--line);
}
.st-paid,.st-done{color:var(--ok);background:color-mix(in oklab,var(--ok) 13%,var(--surface))}
.st-pend{color:var(--warn);background:color-mix(in oklab,var(--warn) 14%,var(--surface))}
.st-ship{color:var(--accent-2);background:color-mix(in oklab,var(--accent-2) 12%,var(--surface))}
.st-cancel{color:var(--bad);background:color-mix(in oklab,var(--bad) 12%,var(--surface))}
/* Путь заказа: вертикальная лесенка шагов. Вертикально — потому что подписи
вроде «В пункте выдачи» в строку не влезают на узком экране. */
.oflow{list-style:none;margin:18px 0 0;padding:0;width:100%;text-align:left}
.ostep{position:relative;display:flex;align-items:center;gap:10px;padding:0 0 14px 0}
.ostep:last-child{padding-bottom:0}
/* линия к следующему шагу */
.ostep:not(:last-child)::before{
content:'';position:absolute;left:13px;top:26px;bottom:2px;width:2px;border-radius:2px;
background:var(--line);
}
.ostep.done:not(:last-child)::before{background:color-mix(in oklab,var(--ok) 55%,var(--surface))}
.ostep-ic{
flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
font-size:13px;background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.ostep-tx{font-size:14px;color:var(--muted)}
.ostep.done .ostep-ic{background:color-mix(in oklab,var(--ok) 16%,var(--surface));
border-color:color-mix(in oklab,var(--ok) 40%,var(--line));color:var(--ok)}
.ostep.done .ostep-tx{color:var(--ink)}
.ostep.now .ostep-ic{
background:var(--accent-wash);border-color:color-mix(in oklab,var(--accent-2) 45%,var(--line));
color:var(--ink);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent-2) 12%,transparent);
}
.ostep.now .ostep-tx{color:var(--ink);font-weight:650}
.ostep.next{opacity:.55}
/* блок отслеживания: номер крупно и кнопки — самое нужное после отправки */
.track{
width:100%;margin-top:16px;padding:14px;border-radius:20px;text-align:left;
background:var(--accent-wash);border:1px solid color-mix(in oklab,var(--accent-2) 18%,var(--line));
}
.track-tx{display:flex;flex-direction:column;gap:3px}
.track-tx b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.track-tx i{font-style:normal;font-size:12px;color:var(--muted)}
.track-tx code{
margin-top:6px;font-size:15px;font-weight:650;letter-spacing:.04em;word-break:break-all;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.track-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.track-btns .btn{height:38px;padding:0 14px;font-size:13px}
/* код для комментария к переводу: без него платёж не найти, поэтому крупно
и с кнопкой копирования — вбивать цифры руками в банке легко ошибиться */
.paycode{
width:100%;margin-top:10px;padding:14px;border-radius:20px;text-align:center;
background:var(--warn-wash,var(--accent-wash));
border:1px solid color-mix(in oklab,var(--warn,var(--accent-2)) 26%,var(--line));
}
.paycode span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.paycode b{
display:block;margin:6px 0 10px;font-size:32px;font-weight:700;letter-spacing:.14em;
font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.paycode .btn{height:36px;padding:0 16px;font-size:13px}
.ototal{margin-top:14px;font-size:17px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ocard{
display:block;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 16px;
margin-bottom:10px;color:var(--ink);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
animation:rise .42s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 40ms);
transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease;
}
.ocard:active{transform:translateY(-1px)}
@media (hover:hover){.ocard:hover{transform:translateY(-2px);box-shadow:var(--sh-2),inset 0 1px 0 var(--edge);border-color:var(--line-2)}}
.ocard .otop{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ocard .onum{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.ocard .stbadge{margin-top:0}
.ocard .odate{margin-top:5px;font-size:11.5px;color:var(--muted)}
.ocard .oitems{margin-top:6px;font-size:12.5px;color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ocard .osum{margin-top:8px;font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums}
.ocard .olead{font-size:12px;font-weight:500;color:var(--muted)}
.ocard-ask{width:100%;margin-top:10px;height:40px;font-size:13.5px}
/* Заявка по фото — не ссылка: открывать нечего, вся переписка в чате бота */
.ocard.cst{cursor:default}
.ocard.cst:active{transform:none}
@media (hover:hover){.ocard.cst:hover{transform:none;box-shadow:var(--sh-1),inset 0 1px 0 var(--edge)}}
/* Полоска пути заявки: рассмотрение → цена → согласовано → в работе → в пути → вручён */
.cprog{display:flex;gap:4px;margin-top:9px}
.cprog i{flex:1;height:3px;border-radius:2px;background:var(--line-2)}
.cprog i.on{background:var(--accent-2)}
/* ─────────────────────────── скелет загрузки ─────────────────────────── */
.skel{position:relative;overflow:hidden;border-radius:14px;background:color-mix(in oklab,var(--ink) 7%,var(--surface))}
.skel::after{
content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--surface) 75%,transparent),transparent);
animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-field{height:48px;border-radius:999px;margin-top:16px}
.skel-fbtn{display:block;width:168px;height:40px;border-radius:999px}
.skel-promo{height:66px;border-radius:20px;margin-top:12px}
.skel-good{height:60px;border-radius:20px;margin-top:10px}
.skel-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px 10px 12px;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge)}
.skel-card .skel-ph{aspect-ratio:1;border-radius:15px}
.skel-card .skel-line{height:10px;margin-top:11px;border-radius:6px}
.skel-card .skel-line.sm{width:52%}
/* ─────────────────────────── экран «только через Telegram» ─────────────────────────── */
.gate{min-height:88dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:30px var(--sp)}
.gate .charm{width:96px;height:auto;filter:drop-shadow(0 10px 16px rgba(60,40,22,.28));
animation:pop .5s cubic-bezier(.34,1.4,.64,1) both}
.gate-title{margin:18px 0 0;font-size:26px;font-weight:650;letter-spacing:-.03em}
.gate-sub{margin-top:4px;font-size:12.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.gate-card{
margin-top:24px;width:100%;max-width:340px;padding:20px;border-radius:24px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
}
.gate-card p{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--muted)}
.gate .foot{margin-top:22px}
/* ─────────────────────────── админка ─────────────────────────── */
/* Тот же язык, что и у витрины: карточки на бумаге, круглые кнопки, акцент
только на действии. Отличие одно — плотность: здесь работают, а не гуляют. */
.adm-title{font-size:17px;font-weight:650;letter-spacing:-.02em}
.top .icobtn#admBack svg{transform:rotate(180deg)}
.adm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.adm-stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 10px;
text-align:center;box-shadow:var(--sh-1),inset 0 1px 0 var(--edge)}
.adm-stat b{display:block;font-size:20px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.adm-stat i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.adm-stat span{display:block;font-size:11.5px;color:var(--accent-2);font-weight:600;margin-top:4px}
.adm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.adm-tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px;
display:flex;flex-direction:column;gap:3px;color:var(--ink);
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge);
transition:transform .2s cubic-bezier(.34,1.5,.64,1),border-color .2s ease,box-shadow .2s ease}
.adm-tile:active{transform:scale(.98)}
@media (hover:hover){.adm-tile:hover{border-color:var(--accent-2);box-shadow:var(--sh-2)}}
.adm-tile-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:var(--accent-wash);color:var(--accent-2);margin-bottom:5px}
.adm-tile b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.adm-tile i{font-style:normal;font-size:12px;color:var(--muted)}
.adm-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.adm-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:16px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.adm-row-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.adm-row-tx b{font-size:14px;font-weight:600;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-row-tx i{font-style:normal;font-size:11.5px;color:var(--muted)}
.adm-row-act{margin-left:auto;display:flex;gap:5px;flex:none}
.adm-ib{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;
border:1px solid var(--line-2);background:var(--paper);
transition:transform .18s cubic-bezier(.34,1.5,.64,1),border-color .2s ease}
.adm-ib:active{transform:scale(.88)}
@media (hover:hover){.adm-ib:hover{border-color:var(--accent-2)}}
/* цены доставки по зонам: под способом, каждая зона — своя кнопка */
.zrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;padding:0 4px}
.ztag{
font-size:11.5px;line-height:1.3;padding:6px 10px;border-radius:12px;text-align:left;
border:1px solid var(--line-2);background:var(--paper);color:var(--muted);
transition:transform .18s cubic-bezier(.34,1.5,.64,1),border-color .2s ease;
}
.ztag b{color:var(--ink);font-weight:650}
.ztag:active{transform:scale(.94)}
@media (hover:hover){.ztag:hover{border-color:var(--accent-2)}}
.adm-add{display:flex;gap:7px;margin-top:16px}
.adm-add input,.adm-add select{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);
border-radius:14px;padding:11px 13px;font-size:14.5px;color:var(--ink);outline:none;
box-shadow:var(--sh-1),inset 0 1px 0 var(--edge)}
.adm-add input:focus,.adm-add select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring)}
.adm-add .sm{flex:0 0 86px}
.adm-add .btn{flex:none;height:auto;padding:0 15px}
/* товары */
.adm-prod{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:16px;color:var(--ink);
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.adm-prod:active{transform:scale(.99)}
.adm-prod-ph{flex:none;width:46px;height:46px;border-radius:14px;overflow:hidden;display:grid;
place-items:center;background:var(--tile);font-size:20px}
.adm-prod-ph img{width:100%;height:100%;object-fit:cover}
.adm-prod-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.adm-prod-tx b{font-size:14px;font-weight:600;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-prod-tx i{font-style:normal;font-size:11.5px;color:var(--muted)}
.adm-photos{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.adm-photos::-webkit-scrollbar{display:none}
.adm-photo{position:relative;flex:none;width:88px;height:88px;border-radius:16px;overflow:hidden;
border:1px solid var(--line);background:var(--tile)}
.adm-photo img{width:100%;height:100%;object-fit:cover}
.adm-photo-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
background:rgba(20,16,12,.6);color:#fff;font-size:12px;display:grid;place-items:center}
.adm-photo-add{flex:none;width:88px;height:88px;border-radius:16px;border:1px dashed var(--line-2);
display:grid;place-items:center;align-content:center;gap:2px;color:var(--muted);font-size:20px}
.adm-photo-add span{font-size:11px}
.adm-switches{display:flex;flex-direction:column;gap:8px}
.adm-sw{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:16px;cursor:pointer;
background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.adm-sw input{width:18px;height:18px;accent-color:var(--accent-2);flex:none}
.adm-sw span{font-size:14px;font-weight:560}
.adm-sw:has(input:checked){border-color:var(--accent-2)}
.adm-danger{width:100%;margin-top:20px;color:var(--bad);border-color:color-mix(in oklab,var(--bad) 40%,var(--line-2))}
@media (hover:hover){.adm-danger:hover{border-color:var(--bad);color:var(--bad);box-shadow:0 0 0 3px color-mix(in oklab,var(--bad) 14%,transparent)}}
/* заказы */
.adm-ord{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:18px;color:var(--ink);
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.adm-ord-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.adm-ord-top b{font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums}
.adm-ord i{font-style:normal;font-size:11.5px;color:var(--muted)}
.adm-ord .stbadge{margin-top:0}
.adm-ord-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.adm-ord-head b{font-size:19px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.olist .item.copy{cursor:pointer;border-radius:8px}
.olist .item.copy span:last-child{color:var(--ink)}
.olist .item.copied span:last-child{color:var(--ok)}
.adm-acts{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.adm-acts .btn,.adm-acts .cta{width:100%}
.adm-acts .adm-danger{margin-top:0}
/* заявки на кастом */
.adm-cst{display:flex;flex-direction:column;padding:10px;border-radius:18px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
/* фото и текст — верхним этажом, действия — нижним: пять кнопок в одну
строку с заголовком не помещаются, заголовок съедался многоточием */
.adm-cst-top{display:flex;align-items:center;gap:11px;min-width:0;color:var(--ink)}
.adm-cst-top:active{opacity:.75}
.adm-cst-go{margin-left:auto;flex:none;display:grid;place-items:center;color:var(--muted)}
.adm-cst-who{font-size:11.5px;color:var(--muted)}
/* карточка одной заявки */
/* То же в карточке заявки у владельца: фото покупателя нужно видеть целиком,
а не квадратный кусок из середины */
.acst-hero{margin-bottom:12px;border-radius:20px;overflow:hidden;background:var(--tile);
border:1px solid var(--line);box-shadow:var(--sh-1);max-height:62vh}
.acst-hero img{width:100%;height:auto;max-height:62vh;object-fit:contain;display:block}
.acst-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.acst-head b{font-size:16px;font-weight:650;letter-spacing:-.01em}
.acst-head .stbadge{margin-top:0}
.adm-cst img{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;background:var(--tile)}
.adm-cst-nophoto{flex:none;width:64px;height:64px;border-radius:14px;display:grid;place-items:center;
text-align:center;font-size:10px;color:var(--muted);background:var(--tile);padding:4px}
.adm-cst-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.adm-cst-tx b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere;line-height:1.3}
.adm-cst-tx i{font-style:normal;font-size:11.5px;color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* метка внутри группы — со сдвигом и полоской слева */
.adm-sub{margin-left:14px;border-left:2px solid var(--line-2);padding-left:8px}
.adm-add select{flex:1;min-width:0;height:40px;padding:0 10px;border-radius:14px;
border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14px}
.adm-pick{display:flex;flex-direction:column;max-height:min(50dvh,320px);overflow-y:auto;margin:6px 0}
.adm-cst-tx span{font-size:11.5px;color:var(--accent-2);font-weight:600}
/* причина отказа: её видно сразу, по ней и торгуемся */
.adm-cst-tx .adm-cst-no{color:var(--bad);font-weight:560}
/* ── Шаги мастера «брелок по фото» ──
Восемь действий на узел не помещаются в строку с названием (окно Telegram —
~380 px), поэтому карточка двухэтажная: сверху название, снизу кнопки,
и те и другие переносятся. Вложенность — рельсой слева, а не отступом:
отступ на третьем уровне съедал бы половину ширины. */
.cstep-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cstep{
padding:11px 12px;border-radius:16px;background:var(--surface);
border:1px solid var(--line);box-shadow:var(--sh-1);
}
.cstep.off{opacity:.62}
.cstep.lvl1{margin-left:10px;border-left:2px solid var(--line-2)}
.cstep.lvl2{margin-left:20px;border-left:2px solid var(--line-2)}
.cstep.lvl3{margin-left:30px;border-left:2px solid var(--line-2)}
.cstep-top{display:flex;align-items:flex-start;gap:10px}
.cstep-pic{flex:none;width:42px;height:42px;border-radius:12px;overflow:hidden;background:var(--tile)}
.cstep-pic img{width:100%;height:100%;object-fit:cover;display:block}
.cstep-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
/* Название переносится целиком: обрезать его многоточием нельзя — по нему
владелец и опознаёт шаг */
.cstep-tx b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;
overflow-wrap:anywhere;line-height:1.3}
.cstep-tx i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.35}
.cstep-tx em{font-style:normal;font-size:11.5px;color:var(--warn);line-height:1.35}
.cstep-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cstep-b{
font-size:11.5px;line-height:1.3;padding:7px 9px;border-radius:11px;
border:1px solid var(--line-2);background:var(--paper);color:var(--muted);
transition:transform .18s cubic-bezier(.34,1.5,.64,1),border-color .2s ease,color .2s ease;
}
.cstep-b:active{transform:scale(.94)}
@media (hover:hover){.cstep-b:hover{border-color:var(--accent-2);color:var(--ink)}}
/* окно ввода: prompt() в webview Telegram ненадёжен, рисуем своё */
.adm-ask{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
background:rgba(12,10,8,.44);animation:viewIn .18s ease both}
.adm-ask-box{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--line-2);
border-radius:22px;padding:18px;box-shadow:var(--sh-2)}
.adm-ask-box b{display:block;font-size:15px;font-weight:600;margin-bottom:10px}
.adm-ask-box input{width:100%;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;
padding:12px 14px;font-size:15px;color:var(--ink);outline:none}
.adm-ask-box input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring)}
.adm-ask-btns{display:flex;gap:8px;margin-top:14px}
.adm-ask-btns .btn{flex:none}
.adm-ask-btns .cta{flex:1;height:44px}
@media (prefers-reduced-motion:reduce){
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
/* подсказку в поиске не крутим совсем: с нулевой длительностью animationend
сыпался бы сотнями в секунду и жёг батарею */
.ph.run{animation:none}
}
/* карточка идеи и отзыва в админке: текст покупателя целиком, кнопки под ним */
.adm-idea{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:18px;
background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.adm-idea b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.adm-idea i{font-style:normal;font-size:11.5px;color:var(--muted)}
.adm-idea p{font-size:13px;line-height:1.45;margin-top:2px;white-space:pre-wrap;
overflow-wrap:anywhere}
.adm-idea-links{color:var(--accent-2)}
.adm-idea-note{color:var(--muted);font-style:italic}
.adm-idea-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.adm-idea-btns .btn{width:auto;flex:none;height:32px;padding:0 12px;font-size:12.5px}
/* ── Набор: что внутри пары и предложение купить парой ── */
.bundle{margin-top:14px;padding:12px 14px;border-radius:18px;
background:var(--accent-wash);border:1px solid var(--line-2)}
.bundle b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.bundle i{display:block;margin-top:8px;font-style:normal;font-size:11.5px;color:var(--muted)}
.bundle-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.bundle-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 11px;border-radius:14px;background:var(--surface);
border:1px solid var(--line);font-size:13.5px;color:var(--ink);
transition:transform .18s cubic-bezier(.34,1.5,.64,1),border-color .2s ease}
.bundle-item:active{transform:scale(.98)}
@media (hover:hover){.bundle-item:hover{border-color:var(--accent-2)}}
.bundle-price{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
/* предложение пары на карточке одиночного брелока */
.pgood.pair .pgood-ic{background:var(--accent-2);color:var(--on-accent-2)}
/* в админке чипы категорий и состава переносятся, а не уезжают вбок */
.tagrow.wrap{flex-wrap:wrap;overflow:visible}
/* ── Навигатор разделов: один уровень за раз, «‹» возвращает выше ── */
.menu-nav{display:flex;align-items:center;gap:6px;padding:6px 6px 4px}
.menu-back{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
color:var(--muted);background:color-mix(in oklab,var(--ink) 5%,transparent);
transition:background .2s ease,transform .18s cubic-bezier(.34,1.5,.64,1)}
.menu-back svg{transform:rotate(180deg)}
.menu-back:active{transform:scale(.9)}
.menu-back[hidden]{display:none}
.menu-title{font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* стрелка «внутрь» у раздела с подразделами */
.opt-ch{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--muted)}
.opt-ch svg{width:14px;height:14px}
/* выгода набора: зачёркнутая сумма поштучно и сколько экономит покупатель */
.bundle-save{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2);font-size:12.5px}
.bundle-save s{color:var(--muted)}
.bundle-save b{color:var(--price);font-size:13.5px}
/* закрытый раздел витрины: кнопка на месте, но видно, что она не работает */
.promo.off,.idea.off,.row.off{opacity:.55}
.promo.off .promo-ch,.idea.off .idea-ch,.row.off .row-ch{opacity:.4}