/* ===== палитра ===== */
:root{
  --bg:#F4F4F8; --surface:#FFFFFF; --surface2:#ECEBF3; --surface3:#E1DFEC; --line:#E4E2EE;
  --text:#141322; --muted:#6A6580;
  --brand:#6D3EE8; --brand2:#B44BE0;
  --buy:#2C7BF2; --buy2:#1D5FD6; --buy-ink:#FFFFFF;
  --hot:#EF6A35; --gold:#D99A1F;
  /* стекло */
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.75); --glass-hi:rgba(255,255,255,.9);
  --glass-shadow:0 10px 30px rgba(28,20,60,.12);
  --blur:blur(26px) saturate(185%);
  /* Затемнение низа карточки и картинки — только для тёмной темы: на белой
     оно выглядит грязным подтёком. Здесь, в светлой, оно выключено. */
  --card-shade:inset 0 0 0 0 transparent;
  --art-shade:rgba(0,0,0,0);
  /* Полосы прокрутки под тему. Без color-scheme браузер рисовал белые
     системные полосы прямо поверх тёмного сайта — владелец заметил. */
  color-scheme:light;
  --scroll-track:#ECEAF3; --scroll-thumb:#C4BDD9;
  /* скругления */
  --r-sm:12px; --r-md:26px; --r-lg:32px; --r-xl:30px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08070D; --surface:#141220; --surface2:#1C1A2B; --surface3:#272338; --line:#241F33;
    --text:#F1EFF8; --muted:#8B85A3;
    --brand:#8B5CF6; --brand2:#D65CF0;
    --buy:#3B8CFF; --buy2:#2468E6; --buy-ink:#FFFFFF;
    --hot:#FF7A45; --gold:#FFC44D;
    --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085);
    --glass-line:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.17);
    --glass-shadow:0 12px 36px rgba(0,0,0,.45);
    --card-shade:inset 0 -20px 30px -26px rgba(0,0,0,.75);
    --art-shade:rgba(0,0,0,.22);
    color-scheme:dark;
    --scroll-track:#0E0C16; --scroll-thumb:#3A3353;
  }
}
:root[data-theme="dark"]{
  --bg:#08070D; --surface:#141220; --surface2:#1C1A2B; --surface3:#272338; --line:#241F33;
  --text:#F1EFF8; --muted:#8B85A3;
  --brand:#8B5CF6; --brand2:#D65CF0;
  --buy:#3B8CFF; --buy2:#2468E6; --buy-ink:#FFFFFF;
  --hot:#FF7A45; --gold:#FFC44D;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085);
  --glass-line:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.17);
  --glass-shadow:0 12px 36px rgba(0,0,0,.45);
  --card-shade:inset 0 -20px 30px -26px rgba(0,0,0,.75);
  --art-shade:rgba(0,0,0,.22);
  color-scheme:dark;
  --scroll-track:#0E0C16; --scroll-thumb:#3A3353;
}
*,*::before,*::after{box-sizing:inherit}
/* scrollbar-color наследуется — хватает корня: и страница, и списки внутри
   шторок (фоны, модели) получают полосу в цвет темы. */
html{scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:2px solid var(--scroll-track)}
::-webkit-scrollbar-thumb:hover{background:var(--brand)}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font:600 15px/1.4 Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent}
/* подсветка за стеклом: без неё размывать нечего и эффект не виден */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 8%, color-mix(in srgb,var(--brand) 40%,transparent) 0%, transparent 70%),
    radial-gradient(38% 34% at 88% 22%, color-mix(in srgb,var(--brand2) 34%,transparent) 0%, transparent 72%),
    radial-gradient(46% 40% at 62% 92%, color-mix(in srgb,var(--buy) 26%,transparent) 0%, transparent 74%);
  opacity:.42;filter:blur(30px)}
/* заставка при входе */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:var(--bg);transition:opacity .35s ease, visibility .35s}
.splash.off{opacity:0;visibility:hidden;pointer-events:none}
.sp-ic{width:96px;height:96px;border-radius:26px;box-shadow:0 18px 40px -18px color-mix(in srgb,var(--brand) 70%,transparent);
  animation:sp-float 2.4s ease-in-out infinite}
.sp-nm{margin-top:10px;font-weight:900;font-size:24px;letter-spacing:.2px}
.sp-sub{color:var(--muted);font-size:13.5px;font-weight:700}
.sp-bar{width:140px;height:4px;margin-top:14px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--text) 10%,transparent)}
.sp-bar i{display:block;width:40%;height:100%;border-radius:inherit;background:var(--brand);
  animation:sp-run 1.1s ease-in-out infinite}
@keyframes sp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sp-run{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.sp-ic,.sp-bar i{animation:none}}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;transition:transform .12s ease, background .16s ease, color .16s ease, box-shadow .18s ease, border-color .16s ease}
button:active{transform:scale(.96)}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
img{max-width:100%;display:block}
/* Страница не листается вбок ни при каких условиях: даже если что-то
   однажды вылезет за край, окно останется на месте. */
html,body{overflow-x:hidden;max-width:100%}
/* clip, а не hidden: с hidden body становится своей областью прокрутки,
   и липкая строка поиска не прилипала — уезжала вверх тёмной плашкой. */
@supports (overflow:clip){html,body{overflow-x:clip}}
.wrap{max-width:1320px;margin:0 auto;padding:14px 16px 56px}
/* на телефоне поля по бокам режем: каждый пиксель ширины — это размер
   картинки подарка, а не воздух */
@media (max-width:620px){.wrap{padding-left:10px;padding-right:10px}}
.card,.card .row,.price{min-width:0}

/* ===== стекло ===== */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
/* блик, который пробегает по краю при наведении */
.sheen{position:relative;overflow:hidden;isolation:isolate}
.sheen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,#fff 26%,transparent) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.sheen:hover::after{transform:translateX(120%)}

/* ===== верхняя панель =====
   Без градиентов, свечений и эмодзи: плотная строка магазина, где каждый
   элемент что-то значит. Украшательства тут выглядели дёшево. */
.top{display:flex;align-items:center;gap:14px;padding:18px 0 20px;border-bottom:1px solid var(--line)}
.logo{position:relative;width:48px;height:48px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:var(--brand);color:#fff;overflow:hidden}
.logo .logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo.has-img{background:none}
.logo.has-img svg{display:none}
.home{display:flex;align-items:center;gap:14px;min-width:0;color:inherit;text-decoration:none;border-radius:14px}
.home .logo{transition:transform .18s ease, filter .18s ease}
.home:hover .logo{transform:rotate(-6deg) scale(1.05);filter:brightness(1.1)}
.home:active .logo{transform:scale(.94)}
.nm{min-width:0;margin-right:4px}
.nm b{display:block;font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.nm small{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facts{margin-left:auto;display:flex;gap:18px;color:var(--muted);font-size:12.5px;white-space:nowrap}
.facts b{display:block;color:var(--text);font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
.ghost{width:42px;height:42px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);font-size:15px}
.ghost:hover{color:var(--text);border-color:var(--brand)}
#themeBtn{display:grid;place-items:center;transition:transform .15s ease, color .15s ease, border-color .15s ease}
#themeBtn:active{transform:scale(.9)}
/* Солнце (светлая тема) ⇄ луна (тёмная). Состояние — data-mode на кнопке,
   его ставит скрипт темы (тема по умолчанию берётся из системы). */
#themeBtn .th{overflow:visible}
#themeBtn .th *{transform-box:fill-box;transform-origin:center}
#themeBtn .th-core{transition:transform .55s cubic-bezier(.34,1.45,.55,1)}
#themeBtn .th-rays{transition:transform .55s cubic-bezier(.34,1.45,.55,1), opacity .3s ease}
#themeBtn .th-cut{transform:translate(9px,-9px);transition:transform .55s cubic-bezier(.34,1.3,.6,1)}
#themeBtn[data-mode="dark"] .th-core{transform:scale(1.72)}
#themeBtn[data-mode="dark"] .th-rays{transform:rotate(90deg) scale(.4);opacity:0}
#themeBtn[data-mode="dark"] .th-cut{transform:none}
@media (prefers-reduced-motion:reduce){#themeBtn .th *{transition:none}}
.acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pill{height:42px;padding:0 15px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill:hover{border-color:var(--brand)}
.pill:active{transform:scale(.96)}
.pill .st{color:#f5b301}
.pill small{color:var(--muted);font-weight:700;font-size:12.5px;margin-left:2px}
.cta{flex:0 0 auto;display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:12px;
  background:var(--brand);color:#fff;font-weight:800;font-size:14.5px;text-decoration:none;white-space:nowrap}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:scale(.97)}
@media (max-width:1100px){.facts{display:none}}
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:12px;padding:14px 0 16px}
  .home{flex:1}
  .acts{width:100%;order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .acts .pill{justify-content:center}
  .acts .cta{grid-column:1 / -1;justify-content:center}
}
/* окна «Отзывы» и «О сайте» */
.info{width:min(640px,calc(100% - 24px));max-height:min(82vh,760px);padding:0;border:1px solid var(--glass-line);
  border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--glass-shadow)}
.info::backdrop{background:rgba(5,6,12,.55)}
.info-in{padding:22px 22px 20px;overflow:auto;max-height:inherit;box-sizing:border-box}
.info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.info-head h2{margin:0;font-size:22px;font-weight:900}
.info-x{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted)}
.info-x:hover{color:var(--text);border-color:var(--brand)}
.info p{margin:0 0 10px;font-size:15px;line-height:1.55}
.info h3{margin:18px 0 8px;font-size:15px;font-weight:900}
.info .mute{color:var(--muted)}
/* Аккордеон «О сайте». Закрытые пункты — одна сгруппированная плашка с
   тонкими разделителями; открытый отъезжает на 8 px от соседей и получает
   свои скруглённые углы. Пружинка мягкая (перелёт ~6%, у skiper103 сильнее —
   владелец просил «не настолько сильный эффект»). */
.acc{--acc-r:18px;--acc-sp:cubic-bezier(.34,1.28,.64,1);display:flex;flex-direction:column;margin:2px 0 4px}
.acc-i{position:relative;background:var(--surface2);border-radius:0;
  transition:margin .5s var(--acc-sp), border-radius .5s var(--acc-sp)}
.acc-i:first-child{border-top-left-radius:var(--acc-r);border-top-right-radius:var(--acc-r)}
.acc-i:last-child{border-bottom-left-radius:var(--acc-r);border-bottom-right-radius:var(--acc-r)}
.acc-i.open{margin:8px 0;border-radius:var(--acc-r)}
.acc-i.open:first-child{margin-top:0}
.acc-i.open:last-child{margin-bottom:0}
.acc-i:has(+ .acc-i.open){border-bottom-left-radius:var(--acc-r);border-bottom-right-radius:var(--acc-r)}
.acc-i.open + .acc-i{border-top-left-radius:var(--acc-r);border-top-right-radius:var(--acc-r)}
/* разделитель между закрытыми соседями; у отъехавших его нет */
.acc-i + .acc-i::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line);
  transition:opacity .2s ease}
.acc-i.open::before,.acc-i.open + .acc-i::before{opacity:0}
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;
  background:none;border:0;color:inherit;font:inherit;font-size:15px;font-weight:900;text-align:left;cursor:pointer}
.acc-car{width:9px;height:9px;flex:0 0 auto;border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform .5s var(--acc-sp)}
.acc-i.open .acc-car{transform:translateY(2px) rotate(225deg)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s var(--acc-sp)}
.acc-i.open .acc-b{grid-template-rows:1fr}
.acc-c{overflow:hidden;min-height:0;padding:0 16px;opacity:0;transition:opacity .25s ease}
.acc-i.open .acc-c{opacity:1;transition-delay:.08s}
.acc-c > :last-child{margin-bottom:15px}
.acc-c .steps{margin-bottom:15px}
@media (prefers-reduced-motion:reduce){.acc-i,.acc-b,.acc-car,.acc-c{transition:none}}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.steps b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand)}
.info .go{display:inline-flex;margin-top:14px;height:42px;align-items:center;padding:0 18px;border-radius:999px;
  background:var(--brand);color:#fff;font-weight:800;text-decoration:none}
/* окно отзывов (по образцу владельца): крупная оценка, список в одну
   колонку прокручивается, кнопка «Все отзывы» всегда внизу */
.rvd{width:min(560px,calc(100% - 24px));overflow:hidden}
.rvd-in{display:flex;flex-direction:column;max-height:inherit;box-sizing:border-box}
.rvd .info-head{padding:20px 20px 0;margin-bottom:6px}
.rv-sum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 20px 14px}
.rv-big{color:#f5b301;font-size:34px;font-weight:900;letter-spacing:-.5px;line-height:1}
.rv-sum .mute{color:var(--muted);font-weight:700;font-size:15px}
.rv-list{flex:1 1 auto;min-height:0;overflow:auto;padding:0 20px 14px;display:flex;flex-direction:column;gap:10px}
.rv-foot{padding:14px 20px 18px;border-top:1px solid var(--line)}
.rv-all{display:grid;place-items:center;height:48px;border-radius:16px;background:var(--buy);color:var(--buy-ink);
  font-weight:800;font-size:15px;text-decoration:none}
.rv-all:hover{background:var(--buy2)}

/* ===== вкладки ===== */
.tabs{display:flex;align-items:baseline;gap:18px;margin:22px 0 12px;flex-wrap:wrap}
.tab{position:relative;border:0;background:none;padding:0 0 7px;font-weight:900;font-size:23px;color:var(--muted);opacity:.5}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--brand2));
  transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.tab[aria-selected="true"]{color:var(--text);opacity:1}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:active{transform:none}
/* Три вкладки на телефоне в одну строку: с 23 px «С ценностью» уезжала
   на вторую строку и выглядела отдельным заголовком. Если экран совсем
   узкий — строка вкладок прокручивается вбок, но не переносится. */
@media (max-width:480px){
  .tabs{flex-wrap:nowrap;gap:12px;overflow-x:auto;scrollbar-width:none;margin:18px 0 12px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{font-size:17px;white-space:nowrap;flex:0 0 auto}
}
.panel[hidden]{display:none}
.panel{animation:fade .24s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== поиск и фильтры ===== */
/* Строка поиска прозрачная, пока стоит на своём месте: сплошная заливка
   выглядела чёрной плашкой поверх фиолетового свечения страницы — владелец
   попросил убрать. Матовым стеклом она становится, только когда прилипла
   к верху при прокрутке (класс .stuck ставит скрипт) — чтобы карточки под
   ней не читались сквозь поиск. */
.bar{position:sticky;top:0;z-index:5;padding:8px 0 10px;background:transparent;
  transition:background .2s ease, box-shadow .2s ease}
.bar.stuck{background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 12px 22px -18px rgba(0,0,0,.7)}
/* стекло внутри стекла: вложенное размытие браузеры рисуют чёрными
   прямоугольниками; строка сама уже размыта */
.bar.stuck .search,.bar.stuck .chip{-webkit-backdrop-filter:none;backdrop-filter:none}
.search{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:border-color .16s ease, box-shadow .16s ease}
.search:focus-within{border-color:var(--brand);box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.search[hidden]{display:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;height:100%}
.search svg{color:var(--muted);flex:0 0 auto}
.chipsrow{display:flex;align-items:center;gap:12px;margin-top:9px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0;flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;font-weight:800;font-size:14px;max-width:min(100%,260px);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.chip:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--glass-line))}
.chip[hidden]{display:none}
.chip .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .car{color:var(--muted);font-size:10px;flex:0 0 auto;transition:transform .16s ease}
.chip:hover .car{transform:translateY(1px)}
.chip[data-on="1"]{background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 32%,transparent),color-mix(in srgb,var(--brand2) 22%,transparent));
  border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.chip[data-on="1"] .car{color:var(--brand)}
.chip .num{background:var(--brand);color:#fff;border-radius:999px;padding:1px 7px;font-size:12px}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip.clear{border-style:dashed;color:var(--muted)}
/* сортировка: значок фирменного цвета, ровно по центру строки */
.chip.sort{gap:8px;padding:0 15px 0 12px}
.chip.sort .sort-ic{flex:0 0 auto;display:block;color:var(--brand)}
.chip.sort .lbl-s{display:none}
.count{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}

/* строки в шторке фильтров */
.f-list{padding:6px 10px 10px;display:grid;gap:2px}
.f-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;border:0;
  border-radius:var(--r-md);background:none;color:inherit;text-align:left;font:inherit}
.f-row:hover{background:var(--glass-2)}
.f-row + .f-row{border-top:1px solid var(--glass-line)}
.f-name{font-weight:800;font-size:15px}
.f-val{margin-left:auto;color:var(--muted);font-size:14px;max-width:55%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-val.on{color:var(--brand);font-weight:800}
.f-row .chev{color:var(--muted);font-size:19px;flex:0 0 auto}

/* кнопка «Фильтры» — только на телефоне */
.only-mob{display:none}

/* пилюля «Найдено N»: заметна в ленте фильтров и не занимает строку */
.found{display:none;color:var(--text);white-space:nowrap;
  border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 24%,transparent)}

/* На телефоне шапка ровно в две строки: поиск и лента фильтров, едущая
   вбок. Отдельной строки со счётчиком нет — над полным каталогом она
   ничего не говорила; число появляется пилюлей, когда что-то отобрано. */
@media (max-width:620px){
  /* сплошная подложка: липкая шапка с прозрачным низом просвечивала карточки */
  /* В покое прозрачно — сплошная заливка на телефоне тоже стояла чёрным
     квадратом вокруг поиска. Прилипла при прокрутке — почти непрозрачное
     стекло: карточки под поиском читаться не должны (владелец просил). */
  .bar{padding-bottom:8px}
  /* Прилипшая строка на телефоне — без размытия: сплошной фон. С матовым
     стеклом (и стеклом у поиска и пилюль внутри) телефон пересчитывал
     размытие на каждом кадре прокрутки, не успевал и показывал вместо
     страницы чёрные пятна (владелец, 24 сентября). */
  .bar.stuck{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 10px 18px -14px rgba(0,0,0,.75)}
  .bar .search,.bar .chip{-webkit-backdrop-filter:none;backdrop-filter:none}
  /* подсветка страницы: размытие на весь экран — дорогой слой при прокрутке,
     а на маленьком экране его почти не видно */
  body::before{filter:none;opacity:.3}
  .search{height:44px}
  .found{display:inline-flex}
  .only-mob{display:inline-flex;flex:0 0 auto}
  /* пять выборов уехали в шторку, в строке остаются кнопка фильтров,
     сортировка и то, что относится к текущей выборке */
  #cColl,#cModel,#cBd,#cSym,#cPrice{display:none}
  .chipsrow{display:flex;align-items:center;gap:8px}
  .chips{flex:1;min-width:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
            mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chips > .chip{flex:0 0 auto}
  .count{display:none}
  /* Без ленты вбок (27 сентября): в ней сортировке разрешалось быть не шире
     самой ленты, и когда появлялись «Избранное» и «Найдено N», она сжималась
     до пустой пилюли со стрелкой (владелец: «съезжает»). Теперь все кнопки —
     прямо в строке, лишние переносятся вниз целиком, ничего не режется.
     Первая строка — как на мобильных маркетплейсах: «Фильтры» и «Сортировка»
     поровну, рядом сердечко избранного. Вторая — «Найдено N», «Подборка»,
     «Сбросить», только когда что-то выбрано. */
  .chipsrow{flex-wrap:wrap;row-gap:0}
  .chips{display:contents}
  .chipsrow .chip{flex:0 0 auto;max-width:100%}
  #cFilters,#cSort{flex:1 1 0;min-width:0;justify-content:center}
  #cFilters{order:1} #cSort{order:2} #cFav{order:3}
  /* разрыв строки: всё, что про выборку, — всегда второй строкой */
  .chipsrow::after{content:"";order:4;flex-basis:100%;height:0}
  #countChip{order:5} #cTheme{order:6} #cClear{order:7}
  #countChip,#cTheme,#cClear{margin-top:8px}
  .chip.sort .lbl{display:none}
  .chip.sort .lbl-s{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* «Избранное» — сердечко с числом */
  #cFav .lbl{display:none}
  #cFav{padding:0 10px;gap:6px}
  /* поуже изнутри, чтобы слова в половине строки не обрезались */
  #cFilters,#cSort{padding:0 11px;gap:6px}
  #cFilters .num{padding:1px 6px}
}
@media (max-width:380px){
  #cFilters,#cSort,#cFav{font-size:13px}
}

/* ===== карточки подарков ===== */
/* minmax(0,1fr), а не 1fr: с «1fr» колонка не может стать уже своего
   содержимого — цена плюс кнопка копии держали около 190 px, и на узком
   экране сетка вылезала за край, сайт листался вбок. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(162px,1fr));gap:13px}
@media (max-width:430px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* Карточек на странице сотни, поэтому без backdrop-filter: полупрозрачной
   заливки поверх мягкой подсветки хватает, а сотня слоёв размытия тормозит. */
.card{position:relative;cursor:pointer;border-radius:var(--r-lg);padding:10px 10px 12px;display:flex;flex-direction:column;gap:10px;
  background:
    linear-gradient(180deg,color-mix(in srgb,#fff 7%,transparent) 0%,transparent 42%),
    color-mix(in srgb,var(--surface) 62%,transparent);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-shade);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
/* Блик жидкого стекла: светлая «капля» из левого верхнего угла. Рисуется
   градиентом, а не backdrop-filter — карточек на странице сотни, и сотня
   слоёв размытия роняет прокрутку. */
/* --mx/--my ставит скрипт наклона: блик едет вслед за курсором. Без мыши
   (телефон) переменных нет, и блик стоит в левом верхнем углу, как раньше. */
.card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(125% 72% at var(--mx,10%) var(--my,-12%),color-mix(in srgb,#fff 15%,transparent) 0%,transparent 58%);
  opacity:.75;transition:opacity .18s ease}
.card:hover::after{opacity:1}
.card:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--card-shade), var(--glass-shadow);
  border-color:color-mix(in srgb,var(--brand) 45%,var(--glass-line))}
.art{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;display:grid;border:0;padding:0;width:100%;background:var(--surface2)}
.art::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--text) 8%,transparent) 50%,transparent 80%);
  background-size:220% 100%;animation:shine 1.5s linear infinite}
.art.ready::before{display:none}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
/* стеклянная «линза» поверх картинки: блик сверху и тень у нижнего края */
.art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(196deg,color-mix(in srgb,#fff 18%,transparent) 0%,transparent 32%),
             linear-gradient(0deg,var(--art-shade) 0%,transparent 26%);
  opacity:.65}
.art img{grid-area:1/1;width:100%;height:100%;object-fit:cover;position:relative;opacity:0;transition:opacity .3s ease, transform .35s ease}
.art img.on{opacity:1}
.card:hover .art img{transform:scale(1.05)}
/* Сердечко «в избранное» поверх картинки. Не внутри .art: та сама кнопка,
   а кнопка в кнопке — ошибка разметки. Висит на карточке поверх угла картинки. */
.fav{position:absolute;top:18px;right:18px;z-index:4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(10,10,18,.5);border:1px solid rgba(255,255,255,.16);padding:0;
  transition:transform .15s ease, color .15s ease, background .15s ease}
.fav:hover{transform:scale(1.1)}
.fav[data-on="1"]{color:#ff4d6d;background:rgba(255,255,255,.94);border-color:transparent}
.fav[data-on="1"] svg{fill:currentColor}
.fav.pop{animation:favpop .38s ease}
@keyframes favpop{0%{transform:scale(1)}40%{transform:scale(1.38)}100%{transform:scale(1)}}
.sheet .art .fav{top:12px;left:12px;right:auto;width:40px;height:40px}
.chip .heart{display:inline-grid;color:#ff4d6d}
.chip .heart svg{fill:currentColor}

/* Номер подарка прямо на картинке: его и копирует покупатель, и так он
   виден сразу, не только мелкой строкой под названием. Без размытия —
   карточек сотни. */
.gnum{position:absolute;left:8px;bottom:8px;z-index:3;font-size:12px;font-weight:900;letter-spacing:.2px;
  padding:3px 9px;border-radius:999px;color:#fff;background:rgba(10,10,18,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);font-variant-numeric:tabular-nums}
.badge{position:absolute;top:8px;left:8px;z-index:2;font-size:11px;font-weight:900;padding:3px 9px;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--hot) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.meta{padding:0 5px;min-width:0}
.meta b{display:block;font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;gap:7px;padding:0 2px}
.price{flex:1;height:36px;border-radius:999px;border:1px solid transparent;font-weight:900;font-size:14.5px;font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--buy),var(--buy2));color:var(--buy-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px color-mix(in srgb,var(--buy) 32%,transparent)}
.price:hover{filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 9px 22px color-mix(in srgb,var(--buy) 45%,transparent)}
.ic{width:44px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--muted);
  background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.ic:hover{color:var(--text);border-color:color-mix(in srgb,var(--brand) 50%,var(--glass-line))}
.ic.done{background:linear-gradient(140deg,var(--buy),var(--buy2));color:#fff;border-color:transparent}
.seo{margin:44px auto 0;max-width:760px;color:var(--muted);font-size:14px;line-height:1.65}
.seo h1{margin:0 0 10px;color:var(--text);font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:1.2}
.seo h2{margin:22px 0 10px;color:var(--text);font-size:16px;font-weight:900}
.seo h3{margin:14px 0 2px;color:var(--text);font-size:14px;font-weight:800}
.seo p{margin:0}
.seo-links{display:flex;flex-wrap:wrap;gap:7px}
.seo-links a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--text);font-size:13px;font-weight:700;
  background:var(--glass-2);border:1px solid var(--glass-line)}
.seo-links a:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--glass-line))}
.seo-links a.all{color:var(--brand)}
.foot{margin:34px auto 0;max-width:640px;text-align:center;color:var(--muted);
  font-size:13px;line-height:1.6;padding:16px 18px;border-top:1px solid var(--line)}
.more{display:block;margin:22px auto 0;height:46px;padding:0 28px;border-radius:999px;font-weight:800;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.more:hover{border-color:var(--brand);color:var(--brand)}
.more[hidden]{display:none}
.empty{grid-column:1/-1;padding:44px 16px;text-align:center;color:var(--muted)}
.empty button{margin-top:12px;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-2);font-weight:800}
.empty code{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:10px;background:var(--surface2);color:var(--text);font-size:12.5px}
.skel{border-radius:var(--r-lg);height:252px;background:color-mix(in srgb,var(--surface) 62%,transparent);
  border:1px solid var(--glass-line);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* ===== коллекции ===== */
/* Плитки подборок крупные: 3–4 в ряд на компьютере, на телефоне одна во всю
   ширину — в мелких плитках подарки было не разглядеть. */
.colls{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
/* На телефоне — две в ряд. Одна во всю ширину, как было, владелец забраковал:
   экран занимала одна подборка, листать 68 штук так было некуда. */
@media (max-width:620px){
  /* .colls в начале — правила про мозаику и заголовок идут в файле ниже,
     и без лишней ступени селектора перебили бы эти */
  .colls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .colls .coll{padding:9px;gap:9px}
  .colls .mosaic{gap:5px}
  .colls .mosaic .m{border-radius:12px}
  .colls .mosaic .big{border-radius:16px}
  .colls .ct{flex-direction:column;align-items:flex-start;gap:5px}
  .colls .coll .ct b{font-size:15px}
  .colls .coll .pp{font-size:12px;padding:4px 9px}
}
.coll{border-radius:var(--r-lg);padding:12px;text-align:left;display:flex;flex-direction:column;gap:12px;color:inherit;
  background:color-mix(in srgb,var(--surface) 62%,transparent);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.coll:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  border-color:color-mix(in srgb,var(--brand) 45%,var(--glass-line))}
/* Обложка подборки — одна крупная картинка самой характерной модели темы.
   Сетку из четырёх случайных иконок владелец забраковал: по ней не понять,
   что за подборка. Что внутри — перечислено словами под названием. */
/* Мозаика подборки: главный подарок темы крупно слева, два подарка из
   других коллекций справа — все три видны целиком. Веер с карточками
   за спиной владелец забраковал: задних не было видно, а плашки поверх
   картинки закрывали сам подарок. Поэтому на картинках — ни слова текста. */
.mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:7px;aspect-ratio:3/2}
.mosaic .m{position:relative;overflow:hidden;border-radius:18px;background:var(--surface2)}
.mosaic .big{grid-row:1/3;border-radius:var(--r-md)}
.mosaic.one .big{grid-column:1/3}
.mosaic .m img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease, transform .45s ease}
.mosaic .m img.on{opacity:1}
.mosaic .m::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,color-mix(in srgb,#fff 16%,transparent) 0%,transparent 34%)}
.coll:hover .mosaic img{transform:scale(1.06)}
/* Свой цвет у каждой подборки: главный подарок, размытый в пятно, лежит
   под стеклом плитки. Плитки перестают быть одинаково серыми, а цвет
   сразу подсказывает, что внутри. Обычный filter, не backdrop-filter —
   плиток 68, это дёшево. */
.coll{position:relative;isolation:isolate;overflow:hidden}
.coll::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,-30%),color-mix(in srgb,#fff 17%,transparent),transparent 45%);
  opacity:0;transition:opacity .25s ease}
.coll:hover::after{opacity:1}
.coll .aura{position:absolute;inset:-30%;z-index:-1;background-size:cover;background-position:center;
  filter:blur(46px) saturate(1.7);opacity:.3;transition:opacity .35s ease;pointer-events:none}
.coll:hover .aura{opacity:.55}
/* на телефоне размытие вдвое меньше: его рисуют заново, когда плитка
   въезжает в экран, и при быстрой прокрутке телефон не успевал */
@media (max-width:620px){.coll .aura{filter:blur(22px) saturate(1.6);inset:-15%}}
[data-theme="light"] .coll .aura{opacity:.22}
[data-theme="light"] .coll:hover .aura{opacity:.4}
.ct{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.coll .ct b{font-size:18px;letter-spacing:-.01em}
.coll .pp{flex:0 0 auto;font-size:13px;font-weight:900;padding:6px 12px;border-radius:999px;white-space:nowrap;
  color:var(--buy-ink);background:linear-gradient(140deg,var(--buy),var(--buy2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px color-mix(in srgb,var(--buy) 30%,transparent)}
.coll .inside{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;color:color-mix(in srgb,var(--text) 80%,transparent);font-size:12.5px;line-height:1.35;margin-top:3px}
.coll .tt{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}
.coll b{display:block;font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coll small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coll .chev{color:var(--muted);font-size:20px;flex:0 0 auto;transition:transform .16s ease}
.coll:hover .chev{transform:translateX(3px);color:var(--brand)}
.fire{color:var(--hot)}
/* На телефоне карточка подборки узкая: стрелка отъедала место у строки
   «14 543 подарка · от 1 850 ₽», и та обрезалась на полуслове. Стрелку
   убираем — карточка и так очевидно нажимается. */
@media (max-width:620px){
  .coll{padding:10px}
  .coll .chev{display:none}
  .coll small{font-size:12px}
}

/* ===== подарок с ценностью ===== */
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
@media (max-width:820px){.vgrid{grid-template-columns:minmax(0,1fr)}}
.vbox{border-radius:var(--r-lg);padding:16px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow)}
/* телефон: блоки вкладки высотой в экран с размытием (и список фонов,
   который прокручивается внутри) телефон не успевал перерисовывать и
   показывал чёрное пятно (владелец, 25 сентября) — там сплошной фон.
   Стоит НИЖЕ основного правила, иначе оно перебьёт. */
@media (max-width:620px){
  .vbox{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  .more{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
}
.vstep{margin-bottom:18px}
.vstep:last-child{margin-bottom:0}
.vstep h3{margin:0 0 9px;font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.vsel{width:100%;height:48px;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 8px 0 8px;
  background:var(--glass-2);border:1px solid var(--glass-line);font-weight:800;font-size:15px;color:inherit;text-align:left}
.vsel:hover{border-color:var(--brand)}
.vsel img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.vsel .ph{width:34px;height:34px;border-radius:50%;background:var(--surface2);flex:0 0 auto}
.vsel .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsel .v.muted{color:var(--muted);font-weight:700}
.vsel .car{color:var(--muted);padding-right:10px;font-size:12px}
.vsel:disabled{opacity:.5;cursor:not-allowed}
.vchips{display:flex;flex-wrap:wrap;gap:8px}
.vchips button{height:38px;padding:0 14px;border-radius:999px;font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;
  background:var(--glass-2);color:var(--text);border:1px solid var(--glass-line)}
.vchips button:hover{border-color:var(--brand)}
.vchips button[data-on="1"]{background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 32%,transparent),
  color-mix(in srgb,var(--brand2) 22%,transparent));border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.vchips button small{color:var(--muted);font-weight:700}
/* фон, где все подарки дороже выбранной ценности: собрать такой нельзя */
.vchips button:disabled{opacity:.38;cursor:not-allowed}
.vchips button:disabled:hover{border-color:var(--glass-line)}
/* найденный по номеру подарок дороже ценности — виден, но не выбирается */
.vfound .card.over{opacity:.45;cursor:not-allowed}
.vfound .card.over .price{font-size:12px}
.vchips .sw{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.vbacks{max-height:196px;overflow:auto;padding:2px}
/* поиск фона: строка и цветовые семьи — листать 80 фонов было неудобно */
.vbdq{margin:0 0 8px;max-width:none}
.vbdq svg{color:var(--muted);flex:0 0 auto}
.vbdq input{font-weight:700}
.vfam{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.vfam button{width:26px;height:26px;border-radius:50%;padding:0;border:2px solid transparent;
  background:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 18%,transparent)}
.vfam button[data-on="1"]{border-color:var(--brand)}
.vchips button small.ask{color:var(--brand)}
.vcustom{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;margin-top:9px;max-width:260px;
  background:var(--glass-2);border:1px solid var(--glass-line)}
.vcustom input{flex:1;min-width:0;border:0;background:none;outline:none;font-weight:900;font-size:14.5px;color:inherit;-moz-appearance:textfield}
.vcustom input::-webkit-outer-spin-button,.vcustom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vcustom span{color:var(--muted);font-weight:700;font-size:13px}
.vres{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.vres .art{cursor:default}
.vres h2{margin:0;font-size:19px;font-weight:900}
.vprice{font-size:32px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--buy)}
.vprice small{display:block;font-size:13px;font-weight:700;letter-spacing:0;color:var(--muted);margin-top:2px}
.vworth{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-md);font-weight:800;font-size:14px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 20%,transparent),color-mix(in srgb,var(--brand2) 12%,transparent));
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.vnote{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.vnote b{color:var(--text)}
.vfound{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.vfound:empty{display:none}
.vempty{padding:28px 10px;text-align:center;color:var(--muted);font-size:14px}
.withval{background:none;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--glass-line));color:var(--text)}
.withval:hover{border-color:var(--brand)}

/* Ценность косметическая — покупатель не должен решить, что за цифрой в
   профиле стоят настоящие деньги: плашка сверху вкладки всегда и окно
   «Важно о ценности» при первом заходе на вкладку за визит. */
.vwarn{display:flex;align-items:flex-start;gap:10px;margin:4px 0 10px;padding:11px 14px;border-radius:var(--r-md);
  font-size:13.5px;line-height:1.45;color:var(--text);
  background:color-mix(in srgb,#f5a524 12%,transparent);border:1px solid color-mix(in srgb,#f5a524 45%,transparent)}
.vwarn svg{flex:0 0 auto;color:#f5a524;margin-top:1px}
.valert{width:min(420px,calc(100% - 24px));padding:24px 24px 20px;border:1px solid var(--glass-line);
  border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--glass-shadow)}
.valert::backdrop{background:rgba(5,6,12,.55)}
.va-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--brand);
  padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--brand) 14%,transparent)}
.valert h2{margin:12px 0 10px;font-size:22px;font-weight:900;line-height:1.2}
.valert p{margin:0 0 8px;font-size:15px;line-height:1.5}
.valert .va-mute{color:var(--muted)}
.va-ok{margin-top:14px;width:100%;height:46px;border-radius:999px;border:0;font-weight:800;font-size:15px;
  color:var(--buy-ink);background:var(--buy)}
.va-ok:hover{background:var(--buy2)}
/* анимация подарка по нажатию в карточке: цвет фона + Lottie поверх */
.sheet .art[data-anim]{cursor:pointer}
.art .anim{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .3s ease;pointer-events:none}
.art .anim svg{width:100%!important;height:100%!important}
.art.playing .anim{opacity:1}
.art .play{position:absolute;right:10px;bottom:10px;z-index:3;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:#fff;background:rgba(0,0,0,.42);pointer-events:none;
  transition:opacity .2s ease}
.art.playing .play{opacity:0}
.art.loadinganim .play{animation:sp-float 1s ease-in-out infinite}
/* отзыв с FunPay — карточка в окне «Отзывы» */
.rev{flex:0 0 auto;padding:12px 14px;border-radius:16px;background:var(--surface2);
  border:1px solid var(--glass-line);display:flex;flex-direction:column;gap:6px}
.rev .rv-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rev .st{color:#f5b301;font-size:13px;letter-spacing:1px}
.rev .dt{color:var(--muted);font-size:12.5px;font-weight:700;text-align:right}
.rev p{margin:0 !important;font-size:15px !important;font-weight:700;line-height:1.45 !important}
.rev small{color:var(--muted);font-size:12.5px;font-weight:700}
/* анимации вкладки «С ценностью» (владелец: «более приятные при нажатии»):
   пружинка на нажатие, «подпрыг» выбранного, карточка проявляется снизу */
#p-value .vchips button,#p-value .vfam button,#p-value .vsel{
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease, color .2s ease}
#p-value .vchips button:active,#p-value .vfam button:active,#p-value .vsel:active{transform:scale(.93);transition-duration:.08s}
#p-value .pop{animation:vpop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes vpop{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
.vres.enter > *{animation:venter .42s cubic-bezier(.22,1,.36,1) both}
.vres.enter > :nth-child(2){animation-delay:.04s}
.vres.enter > :nth-child(3){animation-delay:.08s}
.vres.enter > :nth-child(n+4){animation-delay:.12s}
.vres.enter .art img{animation:vimg .5s cubic-bezier(.22,1,.36,1) both}
@keyframes venter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vimg{from{transform:scale(.94)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#p-value .pop,.vres.enter > *,.vres.enter .art img{animation:none}}
/* сумма ценности крупно — главное число вкладки */
.vbig{display:flex;align-items:baseline;gap:10px;margin:2px 0 8px}
.vbig input{width:6.3ch;min-width:3ch;border:0;background:none;outline:none;padding:0;color:var(--buy);
  font-weight:900;font-size:40px;letter-spacing:-1px;font-variant-numeric:tabular-nums;font-family:inherit}
.vbig input:focus{border-bottom:2px solid color-mix(in srgb,var(--buy) 60%,transparent)}
.vbig span{color:var(--muted);font-weight:800;font-size:15px}
/* свой ползунок: заливка до ручки, мягкая ручка — стандартный выглядел грубо */
#vRange{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:4px 0 0;background:none;cursor:pointer;--fill:0%}
#vRange::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--buy) var(--fill),color-mix(in srgb,var(--text) 12%,transparent) var(--fill))}
#vRange::-moz-range-track{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 12%,transparent)}
#vRange::-moz-range-progress{height:6px;border-radius:99px;background:var(--buy)}
#vRange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:#fff;border:3px solid var(--buy);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s ease}
#vRange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--buy)}
#vRange:active::-webkit-slider-thumb{transform:scale(1.12)}
.vrange-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:2px 0 10px}

/* ===== модалки ===== */
/* пока открыта любая шторка, страница под ней не прокручивается */
/* Углы «как у Apple» — суперэллипс (сквиркл) вместо дуги окружности (по
   мотивам skiper63; там это SVG-фильтр, он размывает картинки и тормозит на
   сотнях карточек, поэтому здесь родное свойство браузера). Сквиркл при том
   же радиусе выглядит острее, поэтому радиусы чуть больше. Только крупные
   блоки: у пилюль (радиус 999px) сквиркл сплющивает торцы. Браузер без
   corner-shape рисует обычные углы, как раньше. */
/* superellipse(1.3), а не squircle (= 2): у squircle угол плотнее и карточка
   выглядела квадратной (владелец: «форма не та»). 1.3 с радиусом ~46 px
   сравнено бок о бок с фильтром skiper63 поверх r32 — совпадает. Картинка
   внутри карточки — радиус карточки минус отступ 10 px, чтобы углы шли
   параллельно. */
@supports (corner-shape: superellipse(1.3)){
  :root{--r-md:36px;--r-lg:46px;--r-xl:46px}
  .info,.f-row,.card,.art,.skel,.coll,.mosaic .big,.vbox,.vworth,.vwarn,.valert,dialog,
  .sheet .art,.attrs,.state,.pk-row,.logo,.sp-ic,.ghost,.cta,.acc-i{corner-shape:superellipse(1.3)}
  .logo{border-radius:19px}
  .sp-ic{border-radius:38px}
  .ghost,.cta{border-radius:16px}
  /* изгиб стал шире — сердечко и номер отходят от угла картинки, чтобы не
     наезжать на него */
  .card > .fav{top:22px;right:22px}
  .card .gnum{left:12px;bottom:12px}
}
html.locked, html.locked body{overflow:hidden}
/* Место под полосу прокрутки держим всегда: без этого, когда шторка
   запрещает прокрутку, полоса (15 px в Windows) пропадала, страница
   становилась шире и «уезжала» под шторкой (владелец, 27 сентября). */
html{scrollbar-gutter:stable}
/* Своя полоса прокрутки у шторок скрыта (прокрутка работает): появлялась,
   когда содержимое вырастало — например, пришла строка «Цена выросла…», —
   и всё внутри сжималось и перескакивало на 15 px. */
dialog{scrollbar-width:none}
dialog::-webkit-scrollbar{display:none}
dialog{border:0;padding:0;color:var(--text);border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 24px 70px rgba(0,0,0,.5);
  width:min(560px,calc(100% - 24px));max-height:calc(100% - 32px)}
dialog[open]{animation:pop .24s cubic-bezier(.2,.9,.3,1)}
dialog::backdrop{background:rgba(4,3,10,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
/* Фильтры ⇄ список выбора: шторка стоит, содержимое едет вбок (см. navMark) */
dialog.nav-in[open],dialog.nav-back[open]{animation:none}
#fdlg,#pricedlg{overflow-x:hidden}
dialog.nav-in[open] > .pk{animation:nav-in .34s cubic-bezier(.2,.8,.2,1)}
dialog.nav-back[open] > .pk{animation:nav-back .34s cubic-bezier(.2,.8,.2,1)}
@keyframes nav-in{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes nav-back{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.nav-in[open] > .pk,dialog.nav-back[open] > .pk{animation:none}}
@media (max-width:620px){
  dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92%;border-bottom:0}
  dialog[open]{animation:slideup .28s cubic-bezier(.2,.9,.3,1)}
  @keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
}
/* «ручка» сверху, как у шторок на маркетах: за неё шторку тянут вниз */
.grab{position:relative;width:40px;height:4px;border-radius:999px;background:var(--surface3);
  margin:10px auto 0;display:none;cursor:grab;touch-action:none}
.grab:active{cursor:grabbing;background:var(--muted)}
/* палец редко попадает в полоску 40×4 — расширяем область захвата */
.grab::before{content:"";position:absolute;inset:-14px -60px}
@media (max-width:620px){.grab{display:block}}
.dragging{transition:none !important}
#pick{overflow:hidden}
#pick .pk{max-height:calc(100vh - 40px)}
@media (max-width:620px){#pick .pk{max-height:92vh}}

.sheet{padding:12px}
/* Картинка подстраивается под высоту экрана, чтобы карточка подарка
   помещалась целиком и внутри ничего не прокручивалось. */
.sheet .art{border-radius:var(--r-lg);width:auto;max-width:100%;
  height:min(33vh,270px);aspect-ratio:1/1;margin:0 auto}
@media (max-height:720px){
  .sheet .art{height:min(32vh,260px)}
  .sb{gap:9px;padding-top:12px}
  .attr{padding:9px 15px}
}
/* на телефоне шторка занимает 92% экрана — картинке нужно уступить место */
@media (max-width:620px){
  .sheet .art{height:min(27vh,215px)}
  .sb{gap:10px}
}
/* На широком экране шторка раскладывается в две колонки: картинка слева,
   описание справа. Так используется ширина, а не остаются поля по бокам,
   и окно всё равно помещается в экран без прокрутки. */
@media (min-width:760px){
  #dlg{width:min(880px,calc(100% - 24px))}
  #dlg .sheet{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:18px;padding:16px;align-items:start}
  /* картинка по центру колонки: она ниже описания, и прижатая к верху
     смотрелась съехавшей */
  #dlg .sheet .art{width:100%;height:auto;max-height:min(46vh,380px);align-self:center}
  #dlg .sb{padding:4px 6px 6px;align-content:start}
  #dlg .sb h2{font-size:23px}
}
.x{position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(10,8,18,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:16px;z-index:3}
.sb{padding:15px 6px 8px;display:grid;gap:12px}
.sb h2{margin:0;font-weight:900;font-size:21px}
.attrs{border-radius:var(--r-md);overflow:hidden;background:var(--glass-2);border:1px solid var(--glass-line)}
.attr{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;border-bottom:1px solid var(--glass-line);font-size:14px}
.attr:last-child{border-bottom:0}
.attr span:first-child{color:var(--muted)}
.attr em{font-style:normal;color:var(--brand);margin-left:6px}
/* «Сейчас покупают» — бегущая лента наших продаж под шапкой */
.ticker{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:8px 0 8px 14px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--glass-line);overflow:hidden}
.tk-lbl{display:flex;align-items:center;gap:8px;flex:0 0 auto;font-weight:800;font-size:13.5px;white-space:nowrap}
.live{width:8px;height:8px;border-radius:50%;background:var(--buy);animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--buy) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.tk-view{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tk-track{display:flex;gap:8px;width:max-content;animation:tk var(--dur,60s) linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 4px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--glass-line);background:var(--surface);color:inherit;font:inherit;font-size:13px;cursor:pointer;
  transition:border-color .2s ease}
.tk:hover{border-color:var(--brand)}
.tk img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tk b{font-weight:800}
.tk small{color:var(--muted);font-weight:700;font-size:12px}
.tk em{font-style:normal;color:var(--buy);font-weight:800}
.tk i{font-style:normal;color:var(--muted);font-size:11.5px;font-weight:700}
@media (max-width:760px){
  .ticker{margin-top:12px;padding:6px 0 6px 10px;gap:8px}
  .tk-lbl{font-size:0;gap:0}                 /* на телефоне от подписи остаётся только точка */
  .tk{height:32px;font-size:12.5px}.tk img{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .live{animation:none}.tk-track{animation:none}.tk-view{overflow-x:auto;scrollbar-width:none}
}/* модель / фон / узор в карточке — кнопка «показать все такие» (как на маркетах) */
.attr.same{width:100%;border:0;border-bottom:1px solid var(--glass-line);background:none;color:inherit;
  font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background .15s ease}
.attr.same:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.attr.same:active{background:color-mix(in srgb,var(--brand) 20%,transparent)}
.attr.same > span:last-child{display:inline-flex;align-items:center;gap:0;text-align:right}
.attr .go{font-style:normal;color:var(--brand);font-weight:900;font-size:17px;line-height:1;margin-left:8px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 0 0 1px rgba(128,128,128,.25)}
/* строка о наличии: результат проверки маркетов при открытии карточки */
.state{margin:0;font-size:13.5px;font-weight:800;padding:10px 14px;
  border-radius:var(--r-md);border:1px solid var(--glass-line)}
.state.ok{color:var(--buy);background:color-mix(in srgb,var(--buy) 12%,transparent)}
.state.moved{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.state.gone{color:var(--hot);background:color-mix(in srgb,var(--hot) 14%,transparent)}
.buy:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}
.howto{margin:0;font-size:14px;color:var(--muted)}
.howto b{color:var(--text)}
.buy{height:50px;border-radius:999px;border:0;font-weight:900;font-size:16px;
  background:linear-gradient(140deg,var(--buy),var(--buy2));color:var(--buy-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px color-mix(in srgb,var(--buy) 38%,transparent)}
.buy:hover{filter:brightness(1.08)}
.buy.done{background:linear-gradient(140deg,var(--brand),var(--brand2))}
.tofp{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;text-decoration:none;font-weight:900;font-size:15px;
  background:var(--glass-2);color:var(--text);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.tofp:hover{border-color:var(--brand)}

/* ===== модалка выбора ===== */
.pk{display:flex;flex-direction:column;min-height:0}
.pk-top{padding:16px 18px 10px;display:flex;align-items:center;gap:10px}
.pk-top h2{margin:0;font-weight:900;font-size:21px;flex:1}
.pk-x{width:34px;height:34px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-2);color:var(--muted);font-size:15px}
.pk-x:hover{color:var(--text)}
/* flex:0 0 auto — иначе в колонке шторки поле сжималось с 46 px до 24 */
.pk-find{margin:0 16px;flex:0 0 auto;height:46px}
.pk-sort{display:flex;gap:18px;padding:13px 20px 8px;font-size:12.5px;color:var(--muted)}
.pk-sort[hidden]{display:none}
.pk-sort button{border:0;background:none;color:inherit;font-weight:800;font-size:12.5px;padding:0}
.pk-sort button[data-on="1"]{color:var(--brand)}
.pk-list{flex:1;overflow:auto;padding:0 10px 4px;min-height:120px;overscroll-behavior:contain}
.pk-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px;border:0;border-radius:var(--r-md);background:none;color:inherit;text-align:left}
.pk-row:active{transform:scale(.99)}
.pk-row:hover{background:var(--glass-2)}
.pk-row[data-on="1"]{background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 26%,transparent),color-mix(in srgb,var(--brand2) 14%,transparent))}
.box{width:21px;height:21px;flex:0 0 auto;border-radius:8px;border:2px solid var(--glass-line);display:grid;place-items:center;color:#fff;font-size:12px;
  transition:background .14s ease, border-color .14s ease}
.pk-row[data-on="1"] .box{background:var(--brand);border-color:var(--brand)}
.pk-ic{width:44px;height:44px;flex:0 0 auto;border-radius:14px;object-fit:cover;background:var(--surface2)}
/* значки узоров нарисованы чёрным по прозрачному — на тёмном их не видно,
   поэтому подкладываем светлую плитку */
.pk-ic.sym{background:#fff;object-fit:contain;padding:5px;border:1px solid var(--glass-line)}
.pk-sw{width:44px;height:44px;flex:0 0 auto;border-radius:14px;border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35)}
.pk-nm{flex:1;min-width:0}
.pk-nm b{display:block;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-nm small{color:var(--muted);font-size:12px}
.pk-pr{text-align:right;flex:0 0 auto}
.pk-pr b{display:block;font-weight:900;font-size:14.5px;font-variant-numeric:tabular-nums}
.pk-pr small{color:var(--muted);font-size:11.5px}
.pk-grp{padding:13px 13px 4px;font-size:12.5px;color:var(--muted);font-weight:800}
.pk-bot{display:flex;gap:10px;padding:11px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--glass-line)}
.pk-bot button{flex:1;height:50px;border-radius:999px;border:0;font-weight:900;font-size:15px}
.pk-clear{background:var(--glass-2);color:var(--muted);border:1px solid var(--glass-line)}
.pk-clear:hover{color:var(--text)}
.pk-ok{flex:2;background:linear-gradient(140deg,var(--buy),var(--buy2));color:var(--buy-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px color-mix(in srgb,var(--buy) 34%,transparent)}
.pk-ok:hover{filter:brightness(1.08)}

/* ===== цена ===== */
#pricedlg{width:min(430px,calc(100% - 24px))}
.pr-body{padding:6px 18px 4px}
.pr-inputs{display:flex;gap:10px}
.pr-in{flex:1;display:flex;align-items:center;gap:9px;height:50px;padding:0 16px;border-radius:999px;
  background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:border-color .16s ease}
.pr-in:focus-within{border-color:var(--brand)}
.pr-in span{color:var(--muted);font-size:13.5px;flex:0 0 auto}
.pr-in input{flex:1;min-width:0;width:100%;border:0;background:none;outline:none;font-weight:900;font-size:15.5px}
.pr-in input::-webkit-outer-spin-button,.pr-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pr-in input{-moz-appearance:textfield}
.pr-fast{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pr-fast button{height:36px;padding:0 14px;border-radius:999px;font-weight:800;font-size:13.5px;
  background:var(--glass-2);color:var(--text);border:1px solid var(--glass-line)}
.pr-fast button:hover{border-color:var(--brand)}
.pr-fast button[data-on="1"]{background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 32%,transparent),
  color-mix(in srgb,var(--brand2) 22%,transparent));border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

.note{color:var(--muted);font-size:12.5px;margin-top:28px;line-height:1.6}
.note a{font-weight:800}
.hint{color:var(--muted);font-size:13px;margin:0 0 12px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}


/* Телефон: после нажатия :hover «залипает», и карточка приподнималась, а картинка увеличивалась —
   выглядело как приближение при каждом касании. На сенсорных экранах эффектов наведения нет. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
@media (hover:none),(pointer:coarse){
  .card:hover,.coll:hover{transform:none}
  .card:hover .art img,.coll:hover .mosaic img{transform:none}
  .card:hover::after,.coll:hover::after{opacity:.75}
  .coll:hover .chev{transform:none}
  .home:hover .logo{transform:none;filter:none}
  .fav:hover{transform:none}
  .sheen:hover::after{transform:translateX(-120%)}
  .card{-webkit-tap-highlight-color:transparent}
}
/* iOS приближает страницу, когда фокус попадает в поле со шрифтом меньше 16 px */
@media (max-width:760px){input,select,textarea{font-size:16px !important}}


/* Сайт на телефоне — как Mini App: шапка в одну строку, вкладки снизу, подгрузка при прокрутке. */
.tab .ti,.tab-fav{display:none}
.cta-f{margin-left:.3em}
@media (max-width:620px){
  :root{--tbar-h:62px;--sab:env(safe-area-inset-bottom,0px)}
  body{overscroll-behavior-y:none}
  .wrap{padding-top:6px;padding-bottom:calc(var(--tbar-h) + var(--sab) + 28px)}
  .top{flex-wrap:nowrap;gap:8px;padding:8px 0 12px}
  .home{flex:1;min-width:0;gap:11px}
  .logo{width:40px;height:40px;border-radius:13px}
  .nm b{font-size:19px}
  .nm small{display:none}
  .top .ghost{width:40px;height:40px;border-radius:13px}
  .acts{width:auto;order:0;display:flex;gap:8px}
  .acts .pill{height:40px;min-width:40px;padding:0 11px;border-radius:13px;justify-content:center;gap:4px}
  .acts .pill .lb{display:none}
  .acts .pill .qm{font-weight:900;font-size:17px;color:var(--muted)}
  .acts .pill small{margin:0}
  .acts .cta{grid-column:auto;height:40px;padding:0 14px;border-radius:13px;font-size:14px}
  .cta .cta-f{display:none}
  .facts{display:none}
  /* вкладки — снизу */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
    margin:0;padding:6px 6px calc(6px + var(--sab));gap:0;flex-wrap:nowrap;overflow:visible;
    background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
  .tabs .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:50px;padding:0;border-radius:14px;font-size:11.5px;font-weight:800;opacity:1;color:var(--muted);white-space:nowrap}
  .tabs .tab::after{display:none}
  .tabs .tab .ti{display:block;width:24px;height:24px}
  .tabs .tab-fav{display:flex}
  .tabs .tab[aria-selected="true"]{color:var(--brand)}
  .tabs .tab:active{transform:scale(.94)}
  .tabs .tab .num{position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;
    display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;background:#ff4d6d}
  .tabs .tab .num[hidden]{display:none}
  #cFav{display:none!important}
  .more{margin-top:18px}
  .ticker{margin-top:0}
}
@media (max-width:400px){ .cta .cta-f,.acts .pill small{display:none} .acts .cta{padding:0 12px} .tabs .tab{font-size:11px}
  .top{gap:6px} .acts{gap:6px} .top .ghost{width:38px;height:38px} .acts .pill{height:38px;min-width:38px;padding:0 9px} .acts .cta{height:38px}
  .home{gap:9px} .logo{width:38px;height:38px} .nm b{font-size:17px} }
@media (max-width:340px){ .nm{display:none} }