/* =========================================================================
   Витрина в стиле маркетплейса (только index.html, body.site).
   Плоская тёмная тема, синий акцент, шапка с большим поиском, лента
   баннеров, плитки категорий, виджет пополнения, сетка карточек с
   обложками, страницы категории и товара, нижняя панель телефона.
   Общие компоненты (кнопки, поля, окна, страницы) лежат в app.css — здесь
   переопределены их токены и докрашено то, что на тёмном выглядит иначе.
   ========================================================================= */

:root { --hdr-h: 112px; }  /* липкая шапка: отступ 16 + панель 76 + зазор 20 до контента */
html { scroll-padding-top: calc(var(--hdr-h) + 16px); }

.site {
  --bg: #14161a;
  --surface: #1c1e24;
  --surface-2: #22252c;
  --surface-3: #282a33;
  --line: #2c2f38;
  --line-2: #24262e;
  --line-strong: #3a3d48;

  --ink: #f6f6f7;
  --ink-2: #d4d6dd;
  --muted: #9a9caa;
  --faint: #6f7280;

  --accent: #2663f0;
  --accent-600: #3a72ff;
  --accent-700: #6b98ff;          /* синий для текста и ссылок на тёмном */
  --accent-50: rgba(38, 99, 240, .14);
  --accent-100: rgba(38, 99, 240, .34);
  --accent-ring: rgba(82, 134, 255, .35);
  --price: #5286ff;
  --violet: #9d64ff;

  --green: #3ccf7f;
  --green-50: rgba(60, 207, 127, .13);
  --amber: #f2b23a;
  --amber-50: rgba(242, 178, 58, .13);
  --red: #ff5a5f;
  --red-50: rgba(255, 90, 95, .14);

  --r-lg: 20px;
  --sh-1: none;
  --sh-2: 0 16px 36px -18px rgba(0, 0, 0, .9);
  --sh-pop: 0 24px 56px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04);
  --container: 1560px;
  --panel: #1e2027;               /* шапка, фильтры, нижняя панель */
  --wgt: #0d1530;                 /* виджет сервисов — тёмно-синий, как обложки товаров */
  --wgt-field: #18213f;           /* поля, чипсы и списки внутри виджета */
  --wgt-field-hover: #212c50;
  color-scheme: dark;
}
.site ::selection { background: rgba(38, 99, 240, .45); color: #fff; }
.site .container { padding: 0 20px; }
.logo-word, .cover-text > b, .cover-mark, .banner-stub h2 { font-family: 'Unbounded', 'Inter', system-ui, sans-serif; }

/* ---------------------------------- шапка --------------------------------- */
/* панель парит над страницей: по краям видно, как под ней едет контент */

/* под панелью — зазор 20 px; при прокрутке контент плавно растворяется в нём, а не упирается в панель */
.site .hdr {
  padding: 16px 0 20px; pointer-events: none;
  background: linear-gradient(var(--bg) calc(100% - 20px), rgba(20, 22, 26, 0));
}
.hdr-in {
  pointer-events: auto;
  display: flex; align-items: center; gap: 24px;
  width: calc(100% - 40px); max-width: calc(var(--container) - 40px);
  height: 76px; margin: 0 auto; padding: 12px 12px 12px 24px;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03);
  transition: box-shadow .3s;
}
.hdr.is-scrolled .hdr-in { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -16px rgba(0, 0, 0, .95); }

.hdr-left { display: flex; align-items: center; gap: 12px; flex: none; }
.site .brand { text-decoration: none; }
.logo-word { color: #5180ff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.brand:hover .logo-word { color: #6b98ff; }
.logo-img { display: block; width: auto; height: 48px; transition: transform .3s var(--spring); }
.brand:hover .logo-img { transform: scale(1.03); }

.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px 0 4px;
  border: 0; border-radius: 99px;
  background: #2b2e37; color: var(--ink-2);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background-color .15s;
}
.lang-switch:hover, .hpop.is-open > .lang-switch { background: #343844; color: #fff; }
.lang-switch img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.hpop-lang .pop { left: 0; right: auto; transform-origin: top left; }

/* поиск */
.hsearch { position: relative; flex: 1; min-width: 0; }
.hsearch-field {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  border-radius: 12px; background: var(--bg);
  cursor: text; transition: box-shadow .15s;
}
.hsearch-field .i { width: 22px; height: 22px; color: var(--muted); }
.hsearch-field input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.hsearch-field input::placeholder { color: #7d808d; }
.hsearch-field input::-webkit-search-cancel-button { filter: invert(1) opacity(.45); }
.hsearch-field:focus-within { box-shadow: 0 0 0 2px var(--accent); }

.hsearch-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  max-height: min(70vh, 560px); padding: 8px; overflow-y: auto;
  background: var(--panel); border-radius: 16px; box-shadow: var(--sh-pop);
  animation: popIn .16s var(--ease);
}
.hs-group + .hs-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.hs-label { display: block; padding: 6px 10px; color: var(--faint); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hs-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.hs-row:hover { background: var(--surface-2); }
.hs-row > span:not(.cat-art) { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.hs-row b { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.hs-row small { color: var(--muted); font-size: 12px; }
.hs-row em { color: var(--price); font-size: 14px; font-style: normal; font-weight: 700; }
.hs-row em.is-out { color: var(--faint); }
.hs-row .flag { width: 32px; height: 24px; }
.hs-row .logo-tile { width: 32px; height: 32px; }
.hs-all {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 6px; padding: 10px;
  border: 0; border-radius: 10px; background: var(--accent-50);
  color: var(--accent-700); font-weight: 650; cursor: pointer;
}
.hs-all:hover { background: var(--accent-100); color: #fff; }
.hs-empty { padding: 18px; color: var(--muted); text-align: center; }

/* справа: разделы и действия — иконка с подписью, как у маркетплейсов */
.site .hdr-actions { gap: 2px; flex: none; }
.hnav { display: flex; gap: 2px; }
.hbtn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 66px; height: 52px; padding: 0 8px;
  border: 0; border-radius: 12px; background: none;
  color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.hbtn .i { width: 24px; height: 24px; }
.hbtn:hover, .hpop.is-open > .hbtn { color: var(--ink); background: rgba(255, 255, 255, .04); }
.hbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.hbtn.is-active { color: var(--ink); }
.hbtn.is-active .i { color: var(--accent-700); }
.hbtn-ico { position: relative; display: grid; }
.hbtn-plus {
  position: absolute; right: -7px; bottom: -4px;
  display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: 0 0 0 2px var(--panel);
  transition: transform .3s var(--spring);
}
.hbtn-plus .i { width: 10px; height: 10px; stroke-width: 3.4; }
.hbtn-wallet:hover .hbtn-plus { transform: rotate(90deg); }
.hbtn-wallet .num { color: var(--ink); font-weight: 750; }
.hcart-badge {
  position: absolute; top: -6px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--panel);
}
.hprofile .avatar { width: 24px; height: 24px; font-size: 11px; }

/* кошелёк: карточка баланса в стиле обложек товаров, быстрые суммы, SharkCoin, последние операции */
.site .wallet-pop { width: 368px; padding: 12px; }
.wl-card {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px 18px; overflow: hidden;
  border-radius: 16px;
  background: #0b1430 url(../assets/cover/bg-sm.webp) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .4);
  color: #fff;
}
.wl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(226, 234, 255, .75); font-size: 12.5px; font-weight: 600; }
/* способы пополнения в углу карточки: монеты USDT и СБП внахлёст */
.wl-pay { display: inline-flex; flex: none; }
.wl-pay img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #10204a, 0 4px 10px rgba(0, 0, 0, .35); }
.wl-pay img + img { margin-left: -7px; }
.wl-sum {
  margin-top: 6px; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 40%, #b4caff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wl-rub { color: rgba(226, 234, 255, .7); font-size: 13px; }
.wl-mark { position: absolute; right: 16px; bottom: 16px; width: 76px; opacity: .85; }
/* «Пополнить баланс» в кошельке — ровный зелёный, без градиента и без анимации плюса */
.site .btn.wl-topup { margin-top: 10px; background: #1f9d6c; color: #fff; box-shadow: none; }
.site .btn.wl-topup:hover:not([disabled]) { background: #23ad78; }
.site .btn.wl-topup:focus-visible { box-shadow: 0 0 0 3px rgba(47, 180, 135, .4); }
.wl-guest { margin: 12px 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.wl-coins { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface); }
.wl-coins.is-ready { background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-100); }
.wl-coins-head { display: flex; align-items: center; gap: 10px; }
.wl-coins-head .coin { width: 32px; height: 32px; }
.wl-coins-head b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 750; }
.wl-coins-head small { display: block; color: var(--muted); font-size: 12px; }
.wl-bar { height: 6px; margin: 10px 0 7px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.wl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #5aa0ff); transform-origin: left; animation: barIn .8s var(--ease) backwards; }
@keyframes barIn { from { transform: scaleX(0); } }
.wl-coins-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.wl-coins .btn { margin-top: 10px; }
.wl-ops { margin-top: 10px; padding: 10px 2px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.wl-ops-head { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 4px; }
.wl-ops-head b { color: var(--ink); font-size: 13px; font-weight: 700; }
.wl-ops-head .link { font-size: 12.5px; }
.wl-empty { margin: 4px 6px 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* строка операции по балансу — кошелёк и кабинет */
.op { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; }
.op-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #2b2e38; color: var(--ink-2); }
.op.is-in .op-ico { background: var(--green-50); color: var(--green); }
.op.is-coins .op-ico { background: var(--accent-50); color: var(--accent-700); }
.op-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.op-text b { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.op-text small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.op-sum { color: var(--ink); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op.is-in .op-sum { color: var(--green); }

/* корзина — выпадающее окно под кнопкой, как у профиля: позиции с «− N +», итог и оформление */
.cart-pop { width: 400px; padding: 0; overflow: hidden; }
.cart-pop-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.cart-pop-head b { color: var(--ink); font-size: 15px; font-weight: 700; }
.cart-pop-clear { margin-left: auto; font-size: 12.5px; }
.site .cart-pop .cart-pop-clear { color: var(--muted); }
.site .cart-pop .cart-pop-clear:hover { color: var(--red); }
.cart-pop-list { max-height: min(52vh, 420px); padding: 2px 16px; overflow-y: auto; overscroll-behavior: contain; }
.cart-pop-foot { padding: 14px 16px 16px; border-top: 1px solid rgba(255, 255, 255, .05); background: rgba(0, 0, 0, .14); }
.cart-pop .cart-empty { padding: 34px 20px 28px; }
.cart-pop .drawer-total b { font-size: 20px; }
.site .cline { border-bottom-color: rgba(255, 255, 255, .05); animation: clineIn .35s var(--ease) backwards; }
@keyframes clineIn { from { opacity: 0; transform: translateY(6px); } }
.cline.is-leaving { opacity: 0; transform: translateX(18px); transition: opacity .18s, transform .18s var(--ease); }
.cline .flag { width: 34px; height: 25px; border-radius: 5px; }
/* «− N +» в корзине: заметные круглые кнопки */
.cline .qty { gap: 2px; height: 30px; padding: 2px; border: 0; border-radius: 99px; background: var(--bg); }
.cline .qty button { width: 26px; height: 26px; border-radius: 50%; background: #2b2e38; color: #fff; transition: background-color .15s, transform .2s var(--spring); }
.cline .qty button:hover:not([disabled]) { background: var(--accent); color: #fff; }
.cline .qty button:active:not([disabled]) { transform: scale(.88); }
.cline .qty button[disabled] { background: transparent; color: var(--line-strong); }
.cline .qty input { width: 32px; font-size: 13.5px; }
.cart-go .i { transition: transform .3s var(--spring); }
.cart-go:hover .i { transform: translateX(3px); }
.hdr-login, .hdr-login .i { color: var(--accent-700); }
.hdr-login:hover { color: #fff; }

/* ---------------------------- общие компоненты ---------------------------- */

.site .card { background: var(--surface); border-color: transparent; border-radius: 20px; }
.site .btn-accent { box-shadow: none; }
.site .btn-dark, .site .btn-ghost { background: #2b2e38; border-color: transparent; color: #fff; }
.site .btn-dark:hover:not([disabled]), .site .btn-ghost:hover:not([disabled]) { background: #353945; border-color: transparent; }
.site .btn-soft:hover:not([disabled]) { background: var(--accent-100); color: #fff; }
.btn-xl { --h: 52px; padding: 0 24px; border-radius: 10px; font-size: 17px; font-weight: 700; }
.site .link { color: var(--accent-700); }
.site .link:hover { color: #a0bcff; }
.site .badge-dark { background: #2b2e38; }
.site .i-tile.is-dark { background: #2b2e38; }
.site .tag { box-shadow: none; }

.site .input, .site .select-btn { background: var(--bg); border-color: var(--line); }
.site .input:hover, .site .select-btn:hover { border-color: var(--line-strong); }
.site .input[readonly] { background: var(--surface-2); }
.site .check input:not(:checked) { background-color: var(--bg); }

.site .pop, .site .select-list { background: var(--surface-2); border-color: transparent; }
.site .lang-opt:hover, .site .pop-link:hover, .site .mnav a:hover, .site .mnav button:hover, .site .mail-item:hover { background: rgba(255, 255, 255, .05); }
.site .wallet-sum, .site .m-wallet { background: linear-gradient(135deg, #2663f0, #6d4dff); }
.site .avatar { background: linear-gradient(135deg, #2663f0, #7c5cff); }
.site .flag, .site .lang-opt img, .wgt-chip img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.site .logo-tile { background: #f4f4f6; border-color: transparent; }   /* у логотипов почт тёмные цвета */

.site .announce { background: var(--panel); color: var(--ink-2); }
.site .announce-in .i { color: var(--violet); }
.site .announce a { color: var(--accent-700); }
.site .announce-in { padding-left: 48px; padding-right: 48px; }   /* место под крестик — общий отступ контейнера здесь не подходит */

.site .modal-wrap, .site .drawer-wrap { background: rgba(8, 9, 12, .72); }
.site .modal { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 80px -24px rgba(0, 0, 0, .9); }
.site .modal-x:hover { background: var(--line-strong); }
.site .drawer { box-shadow: -1px 0 0 rgba(255, 255, 255, .05), -24px 0 60px -30px rgba(0, 0, 0, .9); }
.site .drawer.is-left { box-shadow: 1px 0 0 rgba(255, 255, 255, .05), 24px 0 60px -30px rgba(0, 0, 0, .9); }
.site .toast { background: #2b2e38; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 44px -14px rgba(0, 0, 0, .85); }
.site .auth-promo, .site .banner { background: #101216; }

/* окно оплаты по СБП: монета, сумма в рублях, номер счёта и три шага */
.sbp-card {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(93, 87, 159, .28), rgba(69, 135, 197, .14)), var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(110, 120, 230, .25);
}
.sbp-card-coin { width: 52px; height: 52px; flex: none; border-radius: 50%; box-shadow: 3px 5px 0 #6d76a3; }
.sbp-card-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.sbp-card-text b { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sbp-card-text span { color: var(--muted); font-size: 13px; }
.sbp-card-inv { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--muted); font-size: 12px; }
.sbp-card-inv code { padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .25); color: #fff; font-size: 12.5px; }
.sbp-steps { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; padding: 0; list-style: none; counter-reset: sbp; }
.sbp-steps li { position: relative; padding-left: 36px; color: var(--ink-2); font-size: 14px; line-height: 1.45; counter-increment: sbp; }
.sbp-steps li::before {
  content: counter(sbp); position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(100deg, #5d579f, #4587c5); color: #fff; font-size: 12.5px; font-weight: 800;
}
.sbp-loading { display: grid; place-items: center; min-height: 160px; color: var(--muted); }
.sbp-loading .i { width: 28px; height: 28px; }

.site .row:hover { background: rgba(255, 255, 255, .02); }
.site .row.is-out { background: none; }
.site .details-format { background: var(--bg); }
.site .geo-chip { background: var(--surface-3); border-color: transparent; }
.site .form-ok, .site .promo-on { color: #6fe0a3; }
.site .promo-on { border-color: rgba(60, 207, 127, .3); }
.site .promo-on button:hover { background: rgba(60, 207, 127, .14); }
.site .help:hover { border-color: rgba(42, 171, 238, .45); background: rgba(42, 171, 238, .08); }

.site .stat.is-dark { background: linear-gradient(135deg, #2663f0, #5b3fe0); border-color: transparent; }
.site .pt-step-num { background: var(--accent-50); color: var(--accent-700); }
.site .section-head h2 { font-size: 24px; font-weight: 700; }

/* плашки: «Автовыдача», «Официально», наличие, «Хит» */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px 0 7px;
  border-radius: 8px; background: var(--surface-3);
  color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill .i { width: 13px; height: 13px; }
.pill.is-auto { background: #501064; color: #f29aff; }
.pill.is-official { background: rgba(38, 99, 240, .22); color: #a2bbff; }
.pill.is-stock { background: var(--green-50); color: var(--green); }
.pill.is-dark { background: rgba(10, 11, 14, .78); color: var(--ink-2); }
.pill.is-hot { background: #ff5a1f; color: #fff; }
.pill.is-new { background: var(--green); color: #0d1a12; }
.pill.is-top { background: var(--red); color: #fff; }

/* плитка категории — как иконка приложения */
.cat-art {
  position: relative; display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 70%, #000));
  color: #fff;
}
.cat-art .i { width: 52%; height: 52%; }
.cat-art.is-flag img { width: 100%; height: 100%; object-fit: cover; }
.cat-art.is-sm { width: 32px; height: 32px; border-radius: 9px; }
.cat-art.is-md { width: 44px; height: 44px; border-radius: 12px; }
.cat-art.is-lg { width: 96px; height: 96px; border-radius: 24px; }

/* --------------------------------- главная -------------------------------- */

.home-top { padding-top: 0; }

/* лента баннеров, как у маркетплейса: один баннер на всю ширину 320 px, края «надорваны»
   маской — рамка frame-*.svg вычитается из прямоугольника, и в надрывах виден фон */
.car { position: relative; --car-gap: 8px; }
.car-view { position: relative; overflow: hidden; border-radius: 32px; }
.car-track { display: flex; gap: var(--car-gap); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.car-slide {
  position: relative; flex: 0 0 100%;
  height: 320px; overflow: hidden;
  border-radius: 32px; background: var(--surface);
  -webkit-mask-image: linear-gradient(#000, #000), url('../assets/banner/frame-desktop.svg');
  mask-image: linear-gradient(#000, #000), url('../assets/banner/frame-desktop.svg');
  -webkit-mask-size: calc(100% - 2px) calc(100% - 2px), 100% 100%;
  mask-size: calc(100% - 2px) calc(100% - 2px), 100% 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
.car-slide img, .car-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }

/* полоски «как в сторис»: пройденные залиты, текущая заполняется за время показа */
.car-bars {
  position: absolute; left: 50%; bottom: 16px; z-index: 2;
  display: flex; gap: 2px;
  width: 100%; max-width: 368px; padding: 0 16px;
  transform: translateX(-50%); pointer-events: none;
}
.car-bar { flex: 1; height: 2px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .4); }
.car-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left; }
.car-bar.is-done i { transform: scaleX(1); }
.car-bar.is-active i { animation: carFill var(--car-delay, 6s) linear forwards; }
.car.is-paused .car-bar.is-active i { animation-play-state: paused; }
@keyframes carFill { to { transform: scaleX(1); } }

/* стрелки — круглые, на краю баннера, видны при наведении */
.car-nav {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: -26px;
  border: 2px solid #282933; border-radius: 50%;
  background: rgba(20, 22, 26, .8); color: var(--ink);
  box-shadow: 0 0 32px -12px rgba(63, 70, 80, .24), 0 5px 6px -2.5px rgba(63, 70, 80, .12);
  cursor: pointer; opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s;
}
.car-nav .i { width: 24px; height: 24px; }
.car-nav.is-prev { left: -14px; }
.car-nav.is-next { right: -14px; }
.car:hover .car-nav { opacity: 1; }
.car-nav:hover, .car-nav:focus-visible { outline: none; border-color: var(--accent-700); color: var(--accent-700); }

/* размеры ленты по ширине экрана — как у маркетплейса */
@media (min-width: 1600px) {
  .car-nav.is-prev { left: -26px; }
  .car-nav.is-next { right: -26px; }
}
@media (max-width: 1279px) {
  .car-view, .car-slide { border-radius: 24px; }
  .car-slide { height: 228px; }
  .car-nav.is-prev { left: 24px; }
  .car-nav.is-next { right: 24px; }
  .banner-stub p { display: none; }
}
/* планшет и телефон: баннер во всю ширину экрана, без скругления, надорваны верх и низ */
@media (max-width: 1023px) {
  .car { margin: 0 -20px; --car-gap: 10px; }
  .car-view, .car-slide { border-radius: 0; }
  .car-slide {
    height: 272px;
    -webkit-mask-image: linear-gradient(#000, #000), url('../assets/banner/frame-tablet.svg');
    mask-image: linear-gradient(#000, #000), url('../assets/banner/frame-tablet.svg');
  }
  .car-nav { display: none; }
}

/* фирменный баннер, пока своих баннеров нет */
.banner-stub {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: clamp(22px, 4vw, 44px);
  color: #fff;
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(38, 99, 240, .55), transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(124, 92, 255, .45), transparent 70%),
    linear-gradient(160deg, #1d2030, #121419);
}
.banner-stub .pill { align-self: flex-start; }
.banner-stub h2 { max-width: 640px; color: #fff; font-size: clamp(24px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.banner-stub h2 em { color: #6b98ff; font-style: normal; }
.banner-stub p { max-width: 480px; color: rgba(255, 255, 255, .7); font-size: 15px; }
.banner-stub-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* категории — небольшие баннеры в стиле обложек товаров: тёмная карточка, дуга и свечение
   цвета категории (--c), справа глянцевая плитка под наклоном в белой рамке. Без размытых теней и фильтров */
.cbans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
/* фон у всех баннеров один — тёмно-синий, как у ленты баннеров, виджета и обложек товаров */
.cban {
  --c: #3a78ff;
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 112px; padding: 16px 18px 16px 20px; overflow: hidden; isolation: isolate;
  border-radius: 18px;
  background:
    radial-gradient(50% 120% at 86% 50%, rgba(54, 128, 255, .34), transparent 72%),
    linear-gradient(155deg, #0f1c3f 0%, #070c1b 55%, #0b1838 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, rgba(255, 255, 255, .05));
  color: #fff; text-decoration: none;
  transition: transform .4s var(--spring), box-shadow .25s;
}
/* дуга света, как на обложках */
.cban::before {
  content: ''; position: absolute; right: -70px; top: -150px; z-index: -1;
  width: 260px; height: 220px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 70%, #fff 10%);
  opacity: .5;
}
/* блик при наведении */
.cban::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; z-index: 2; width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-16deg);
  pointer-events: none;
}
.cban:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, #fff 15%); }
.cban:hover::after { transform: translateX(420%) skewX(-16deg); transition: transform .9s var(--ease); }
.cban:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cban-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.cban-text b {
  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.cban-text small { overflow: hidden; color: rgba(222, 230, 255, .62); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cban-flags { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cban-flags img { width: 18px; height: 13px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.cban-flags i { margin-left: 2px; color: rgba(222, 230, 255, .62); font-size: 12px; font-style: normal; font-weight: 600; }
.cban-text em {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; margin-top: 6px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 12.5px; font-style: normal; font-weight: 700;
  transition: background-color .2s;
}
.cban-text em .i { width: 13px; height: 13px; transition: transform .3s var(--spring); }
.cban:hover .cban-text em { background: var(--c); }
.cban:hover .cban-text em .i { transform: translateX(3px); }
/* плитка категории — глянцевая, под наклоном, с толщиной без размытия и белой рамкой; флаг — такая же плитка */
.cban-art { flex: none; transform: rotate(-8deg); transition: transform .5s var(--spring); }
.cban-art .cat-art {
  width: 64px; height: 64px; border-radius: 18px;
  box-shadow: 3px 5px 0 color-mix(in srgb, var(--c) 45%, #000);
}
/* блик и белая рамка — поверх содержимого, иначе флаг-картинка закрывает рамку */
.cban-art .cat-art::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .9);
}
.cban:hover .cban-art { transform: translateY(-3px) rotate(-2deg) scale(1.08); }
/* иконки площадок «скоро» (catArt → BRAND_ART): Facebook — синий круг, Google Ads — белая плитка, как в видеобаннере */
.cat-art.is-fb { border-radius: 50%; background: #0866ff; }
.cat-art.is-fb .i { width: 120%; height: 120%; }   /* круг «f» во весь значок */
.cat-art.is-ga { background: linear-gradient(160deg, #fff, #edf1f8); }
.cat-art.is-ga .i { width: 62%; height: 62%; }
.cban-art .cat-art.is-fb { border-radius: 50%; box-shadow: 3px 5px 0 #0340a8; }
.cban-art .cat-art.is-ga { box-shadow: 3px 5px 0 #a9b7d0; }
.cban.is-skeleton { background: var(--surface); box-shadow: none; }
/* «скоро в продаже» (Facebook, Google Ads): шире обычной — под текст, не ссылка, поэтому без подъёма и блика */
.cban.is-soon {
  --c: #8a909e;   /* серая кромка и дуга — сразу видно, что пока недоступно */
  grid-column: span 2;
  background:
    radial-gradient(50% 120% at 86% 50%, rgba(170, 176, 190, .16), transparent 72%),
    linear-gradient(155deg, #262930 0%, #16181d 55%, #1f2228 100%);
}
.cban.is-soon:hover { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, rgba(255, 255, 255, .05)); }
.cban.is-soon:hover::after { transform: translateX(-160%) skewX(-16deg); transition: none; }
.cban.is-soon:hover .cban-art { transform: rotate(-8deg); }
/* цепь с замком поверх иконки (SOON_LOCK в catalog.js): квадрат 120 × 110 вокруг иконки 64 × 64 — в процентах,
   чтобы на телефоне, где иконка меньше, всё совпадало; иконка под цепью чуть приглушена — «закрыто» */
.cban.is-soon .cban-art { position: relative; }
.cban.is-soon .cban-art .cat-art { filter: saturate(.85) brightness(.9); }
.soon-lock { position: absolute; left: -43.75%; top: -35.94%; z-index: 1; width: 187.5%; height: 171.88%;
  pointer-events: none; transform: rotate(8deg);   /* иконка наклонена на −8°, а цепь висит ровно */
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55)); }
.cban.is-soon .cban-text small { margin-top: 2px; font-size: 13px; line-height: 1.4; white-space: normal; }

/* виджет сервисов: вкладки — столбик иконок слева (подпись всплывает при наведении),
   справа панель вкладки — картинка, заголовок и форма в одну строку */
.wgt { display: flex; gap: 12px; margin-top: 24px; scroll-margin-top: calc(var(--hdr-h) + 16px); }
.wgt-tabs {
  position: relative; z-index: 2; display: flex; flex: none; flex-direction: column; gap: 8px; padding: 8px;
  border-radius: 99px;
  background: linear-gradient(180deg, #111c3c, #0a1126);
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .3);
}
.wgt-tab {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: none;
  color: rgba(255, 255, 255, .55); cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.wgt-tab .i { width: 22px; height: 22px; }
.wgt-tab:hover, .wgt-tab:focus-visible { outline: none; background: rgba(255, 255, 255, .05); color: #fff; }
.wgt-tab.is-active {
  background: linear-gradient(180deg, #3a74ff, var(--accent)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px -6px rgba(38, 99, 240, .9);
}
.wgt-tab-label { display: none; }   /* видна на телефоне, где вкладки — строкой */
.wgt-tip {
  position: absolute; left: calc(100% + 14px); top: 50%;
  padding: 6px 10px; border-radius: 8px;
  background: #2b2e38; color: #fff; box-shadow: var(--sh-pop);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(-4px, -50%); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.wgt-tab:hover .wgt-tip, .wgt-tab:focus-visible .wgt-tip { opacity: 1; transform: translate(0, -50%); }

.wgt-body {
  display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(28% 90% at 11% 50%, rgba(54, 128, 255, .3), transparent 72%),
    radial-gradient(120% 220% at 104% -95%, transparent 58%, rgba(96, 160, 255, .5) 58.8%, rgba(84, 150, 255, .1) 60.5%, transparent 65%),
    radial-gradient(90% 200% at -6% 190%, transparent 58%, rgba(96, 160, 255, .38) 58.8%, rgba(84, 150, 255, .08) 60.5%, transparent 65%),
    linear-gradient(155deg, #0f1c3f 0%, #070c1b 52%, #0b1838 100%);
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .38);
}
.wgt-panel { display: flex; flex: 1; gap: 24px; padding: 20px 32px 20px 20px; animation: wgtIn .25s var(--ease); }
@keyframes wgtIn { from { opacity: 0; transform: translateY(4px); } }

/* картинка вкладки — глянцевая синяя плитка под наклоном, как у категорий: с толщиной без размытия */
.wgt-art { display: grid; flex: none; place-items: center; align-self: center; width: 170px; height: 150px; }
.wgt-tile {
  position: relative; display: grid; place-items: center;
  width: 112px; height: 112px; overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(145deg, #3a63dc, #143797);
  box-shadow: 5px 8px 0 #0c2470, inset 0 0 0 1px rgba(255, 255, 255, .25);
  color: #fff;
  transform: rotate(-8deg);
  animation: tileIn .55s var(--spring) backwards;
}
.wgt-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, 0) 55%);
}
.wgt-tile .i { width: 56%; height: 56%; stroke-width: 2; }
.wgt-tile img { width: 64%; height: 64%; object-fit: contain; }
.wgt-tile.is-flag img { width: 100%; height: 100%; object-fit: cover; }
/* пиксель — настоящий логотип TikTok: чёрная плитка приложения, знак с голубым и красным сдвигом */
.wgt-tile.is-tiktok { background: linear-gradient(145deg, #1c1c1f, #000); box-shadow: 5px 8px 0 #000, inset 0 0 0 1px rgba(255, 255, 255, .14); }
.wgt-tile.is-tiktok::after { background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%); }
.wgt-tile.is-tiktok .i { width: 54%; height: 54%; }
@keyframes tileIn { from { opacity: 0; transform: rotate(-20deg) scale(.85); } }
/* пополнение — монета с двумя сторонами: USDT и СБП. Смена способа переворачивает её в 3D,
   ореол меняет цвет с зелёного Tether на сине-фиолетовый СБП. Ребро монеты — тень без размытия */
.pay-flip {
  position: relative; width: 116px; height: 116px;
  perspective: 700px;
  transform: rotate(-8deg);
  animation: tileIn .55s var(--spring) backwards;
}
.pay-glow {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(38, 161, 123, .45), transparent 70%);
  box-shadow: 0 0 0 6px rgba(38, 161, 123, .14), 0 0 0 14px rgba(38, 161, 123, .06);
  transition: box-shadow .5s var(--ease), background .5s var(--ease);
}
.pay-flip.is-sbp .pay-glow {
  background: radial-gradient(circle, rgba(93, 87, 159, .5), transparent 70%);
  box-shadow: 0 0 0 6px rgba(110, 120, 230, .16), 0 0 0 14px rgba(110, 120, 230, .07);
}
.pay-coin {
  position: absolute; inset: 0; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.3, 1.35, .45, 1);
}
.pay-flip.is-sbp .pay-coin { transform: rotateY(180deg); }
@media (hover: hover) {
  .pay-flip:not(.is-sbp) .pay-coin:hover { transform: rotateY(-16deg); }
  .pay-flip.is-sbp .pay-coin:hover { transform: rotateY(196deg); }
}
.pay-coin:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
@media (prefers-reduced-motion: reduce) { .pay-coin { transition: none; } }
.pay-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 4px 7px 0 #136049;
}
.pay-face img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.pay-face::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 58%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
/* обратная сторона повёрнута на 180°: тень зеркалим, чтобы ребро осталось справа снизу */
.pay-face.is-sbp { transform: rotateY(180deg); box-shadow: -4px 7px 0 #6d76a3; }
.pay-face.is-sbp::after { background: linear-gradient(200deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
/* подброс: монета подпрыгивает, пока переворачивается, ореол вспыхивает. Сдвиг и масштаб —
   отдельными свойствами translate/scale, чтобы не мешать повороту монеты (transform) */
.pay-flip.is-flipping .pay-coin { animation: payToss .85s var(--ease); }
.pay-flip.is-flipping .pay-glow { animation: payGlow .85s var(--ease); }
@keyframes payToss {
  35% { translate: 0 -14px; scale: 1.08; }
  70% { translate: 0 2px; scale: .98; }
}
@keyframes payGlow { 0% { opacity: 1; } 35% { opacity: .5; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }

/* кнопка смены способа — круглая, на ребре монеты */
.pay-swap {
  position: absolute; right: -10px; bottom: -6px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #3a74ff, var(--accent)); color: #fff;
  box-shadow: 0 0 0 4px #0b1532, 0 8px 18px -6px rgba(38, 99, 240, .9);
  transform: rotate(8deg);   /* компенсируем наклон монеты — значок стоит ровно */
  cursor: pointer; transition: transform .35s var(--spring), background-color .15s;
}
.pay-swap .i { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .5s var(--spring); }
.pay-swap:hover { transform: rotate(8deg) scale(1.08); }
.pay-swap:hover .i, .pay-flip.is-flipping .pay-swap .i { transform: rotate(180deg); }
.pay-swap:focus-visible { outline: none; box-shadow: 0 0 0 4px #0b1532, 0 0 0 6px var(--accent-ring); }
.pay-swap-tip {
  position: absolute; left: calc(100% + 10px); top: 50%;
  padding: 6px 10px; border-radius: 8px;
  background: #2b2e38; color: #fff; box-shadow: var(--sh-pop);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(-4px, -50%); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.pay-swap:hover .pay-swap-tip, .pay-swap:focus-visible .pay-swap-tip { opacity: 1; transform: translate(0, -50%); }

/* переключатель «Крипта / СБП» в шапке: бегунок цвета выбранного способа едет под кнопкой */
.pay-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none;
  padding: 4px; border-radius: 14px;
  background: var(--wgt-field); box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .14);
}
.pay-switch::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 10px;
  background: linear-gradient(180deg, #2fb487, #1d8a66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(38, 161, 123, .9);
  transition: transform .45s var(--spring), background .35s var(--ease), box-shadow .35s;
}
.pay-switch.is-sbp::before {
  transform: translateX(100%);
  background: linear-gradient(100deg, #5d579f, #4587c5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(93, 87, 159, .9);
}
.pay-switch button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 0; background: none; color: rgba(255, 255, 255, .6);
  font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: color .2s;
}
.pay-switch button:hover, .pay-switch button[aria-checked='true'] { color: #fff; }
.pay-switch img { width: 20px; height: 20px; border-radius: 50%; }
.pay-switch img.is-flipping { animation: miniFlip .65s cubic-bezier(.3, 1.35, .45, 1); }
@keyframes miniFlip { from { transform: perspective(80px) rotateY(180deg) scale(.6); } }
.pay-switch button:focus-visible { outline: none; border-radius: 10px; box-shadow: 0 0 0 2px var(--accent-ring); }

/* форма и подпись меняются с лёгким появлением */
.wgt-pay { display: flex; flex-direction: column; gap: 12px; }
.wgt-pay.is-entering, .wgt-title p.is-entering { animation: paySwap .4s var(--ease); }
@keyframes paySwap { from { opacity: 0; transform: translateY(6px); } }
.btn-sbp { background: linear-gradient(100deg, #5d579f, #4587c5); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-sbp:hover:not([disabled]) { background: linear-gradient(100deg, #6a63b4, #4f94d6); }

.wgt-main { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.wgt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wgt-title { min-width: 0; }
.wgt-title h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.wgt-title p { margin-top: 2px; color: rgba(255, 255, 255, .55); font-size: 13.5px; }
.wgt-aside { display: flex; flex: none; align-items: center; gap: 12px; }
.wgt-aside:empty { display: none; }
.wgt-balance { color: rgba(255, 255, 255, .6); font-size: 14px; white-space: nowrap; }
.wgt-balance b { color: #fff; }
.wgt-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* формы: поля-плитки и кнопка в одну строку */
.wgt-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1fr); gap: 8px; }
.wgt-form.is-vat { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
.wgt-form.is-pixel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(200px, 1fr); }
.wgt-form.is-imap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1fr); }
.wgt-form.is-custom { grid-template-columns: minmax(0, 1.2fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(230px, 1.1fr); }
.wgt-form.is-gen { grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(220px, 1fr); }
/* результат генератора: строки логин:пароль моноширинным, справа «Скопировать всё» и .txt */
.wgt-gen { display: flex; align-items: flex-start; gap: 8px; }
.wgt-gen.is-flash .wgt-gen-out { animation: vatPop .4s var(--spring); }
.wgt-gen-out {
  flex: 1; min-width: 0; height: 132px; padding: 10px 14px; resize: vertical;
  border: 0; border-radius: 12px; background: var(--wgt-field);
  color: #fff; font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: auto;
}
.wgt-gen-out:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.wgt-gen-act { display: flex; flex: none; flex-direction: column; gap: 6px; }
.wgt-form .btn { height: 56px; }
.wgt-field {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0; height: 56px; padding: 0 16px;
  border: 0; border-radius: 12px; background: var(--wgt-field);
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .14);
  color: #fff; font: inherit; text-align: left;
  cursor: text; transition: box-shadow .15s, background-color .15s;
}
.wgt-field small { color: rgba(255, 255, 255, .55); font-size: 12px; white-space: nowrap; }
.wgt-field b { overflow: hidden; color: #fff; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.wgt-field input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 16px; font-weight: 700; outline: none; -moz-appearance: textfield; }
.wgt-field input::placeholder { color: rgba(255, 255, 255, .3); font-weight: 500; }
.wgt-field input::-webkit-inner-spin-button, .wgt-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wgt-field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.wgt-field.is-static, .wgt-field.is-seg { cursor: default; }
.wgt-money { display: flex; align-items: center; gap: 4px; }
.wgt-money i { color: #fff; font-size: 16px; font-style: normal; font-weight: 700; }
.wgt-field.is-select { cursor: pointer; }
.wgt-field .select-btn { height: 22px; padding: 0; border: 0; background: none; color: #fff; font-size: 16px; font-weight: 700; box-shadow: none; }
.wgt-field .select-btn .chev { color: rgba(255, 255, 255, .55); }
.wgt-seg { display: flex; gap: 4px; }
.wgt-seg button { flex: 1; height: 24px; padding: 0 6px; white-space: nowrap; border: 0; border-radius: 6px; background: none; color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; }
.wgt-seg button:hover { color: #fff; }
.wgt-seg button.is-active { background: var(--accent); color: #fff; }

/* низ панели: плашки, подсказки, результат */
.wgt-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 24px; }
.wgt-foot .pill { box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .22); }
.wgt-foot .pill.is-auto { background: rgba(38, 99, 240, .22); color: #a9c1ff; }
.wgt-foot .pill.is-auto .i { color: #ffd166; }
/* подпись о минимальной сумме — обычным текстом, без плашки */
.wgt-min { color: rgba(226, 234, 255, .7); font-size: 13px; font-weight: 500; }
.wgt-hint { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .5); font-size: 12.5px; line-height: 1.4; }
.wgt-hint .i { width: 14px; height: 14px; flex: none; }
.wgt-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.wgt-status:empty { display: none; }
.wgt-status .i { width: 15px; height: 15px; flex: none; }
.wgt-status.is-ok { color: #6fe0a3; }
.wgt-status.is-error { color: #ff8a8e; }
.wgt-more summary { color: #a2bbff; font-size: 12.5px; font-weight: 600; list-style: none; cursor: pointer; }
.wgt-more summary::-webkit-details-marker { display: none; }
.wgt-more summary:hover { color: #fff; }
.wgt-more[open] { flex-basis: 100%; }
.wgt-more p { max-width: 760px; margin-top: 6px; color: rgba(255, 255, 255, .6); font-size: 12.5px; line-height: 1.5; }
.wgt-presets { display: flex; gap: 6px; margin-left: auto; }
.wgt-presets button {
  height: 28px; padding: 0 10px;
  border: 0; border-radius: 8px; background: var(--wgt-field);
  color: rgba(255, 255, 255, .75); font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.wgt-presets button:hover, .wgt-presets button.is-active { background: var(--accent); color: #fff; }
.wgt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 110px; color: rgba(255, 255, 255, .5); text-align: center; }
.wgt-empty .i { width: 28px; height: 28px; }
.wgt-loading { height: 90px; border-radius: 12px; background: linear-gradient(90deg, var(--wgt-field), var(--wgt-field-hover), var(--wgt-field)) 0 0 / 200% 100%; animation: shimmer 1.2s infinite; }
.is-spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* VAT: страны чипсами, номер — плитка, по клику копируется */
.wgt-chips { display: flex; gap: 6px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.wgt-chips::-webkit-scrollbar { display: none; }
.wgt-chip {
  display: inline-flex; flex: none; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 8px;
  border: 0; border-radius: 10px; background: var(--wgt-field);
  color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.wgt-chip img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; }
.wgt-chip:hover { background: var(--wgt-field-hover); color: #fff; }
.wgt-chip.is-active { background: var(--accent); color: #fff; }
.wgt-chip.is-active small { color: rgba(255, 255, 255, .75); }
.wgt-out { position: relative; padding-right: 60px; cursor: pointer; }
.wgt-out:disabled { cursor: default; }
.wgt-out b { color: rgba(255, 255, 255, .4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; }
.wgt-out.has-value b { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.wgt-out-copy {
  position: absolute; right: 12px; top: 50%;
  display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px;
  border-radius: 10px; color: rgba(255, 255, 255, .35);
  transition: background-color .15s, color .15s;
}
.wgt-out.has-value .wgt-out-copy { background: rgba(255, 255, 255, .08); color: #fff; }
.wgt-out.has-value:hover .wgt-out-copy { background: var(--accent); }
.wgt-out.has-value:hover { background: var(--wgt-field-hover); }
.wgt-out.is-flash b { animation: vatPop .4s var(--spring); }
.wgt-out.is-copied { box-shadow: 0 0 0 2px var(--green); }
@keyframes vatPop { from { opacity: 0; transform: translateY(6px); } }

/* почта: слева список писем, справа открытое письмо */
.wgt-mailbox { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; text-align: right; }
.wgt-mailbox b { overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.wgt-mailbox small { color: rgba(255, 255, 255, .5); font-size: 12px; }
.wgt-mail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; height: 340px; }
.wgt .mail-list { display: block; height: 100%; max-height: none; overflow-y: auto; border: 0; border-radius: 12px; background: var(--wgt-field); overscroll-behavior: contain; }
.wgt .mail-item { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.wgt .mail-item:hover { background: rgba(255, 255, 255, .04); }
.wgt .mail-item.is-active { background: rgba(38, 99, 240, .28); }
.wgt .mail-from { color: #fff; }
.wgt .mail-date, .wgt .mail-subj { color: rgba(255, 255, 255, .55); }
.mail-view { min-width: 0; height: 100%; padding: 16px 18px; overflow-y: auto; border-radius: 12px; background: var(--wgt-field); overscroll-behavior: contain; }
.mail-view h3 { color: #fff; font-size: 16px; font-weight: 700; }
.mail-meta { margin: 4px 0 12px; color: rgba(255, 255, 255, .55); font-size: 12.5px; }
.wgt .mail-body { max-height: none; padding: 0; overflow: visible; border: 0; background: none; color: rgba(255, 255, 255, .85); }
.mail-view .m-back { display: none; }

/* --------------------------------- каталог -------------------------------- */

.catalog { margin-top: 40px; }

/* разделы — текстом с иконкой, активный синий */
.ptabs { display: flex; gap: 28px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border: 0; background: none;
  color: var(--ink); font-size: 17px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: color .15s;
}
.ptab .i { width: 20px; height: 20px; color: var(--muted); transition: color .15s; }
.ptab:hover, .ptab:hover .i { color: #fff; }
.ptab.is-active, .ptab.is-active .i { color: var(--accent-700); }

/* фильтры-чипсы и поиск по каталогу */
.ftools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.fchips { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fpick { position: relative; }
.fbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  border: 0; border-radius: 12px; background: var(--panel);
  color: var(--ink); font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.fbtn:hover { background: #262932; }
.fbtn .i { width: 18px; height: 18px; color: var(--muted); }
.fbtn .chev { width: 16px; height: 16px; color: var(--faint); transition: transform .2s var(--ease); }
.fpick.is-open .fbtn .chev { transform: rotate(180deg); }
.fbtn.has-value { background: var(--accent-50); color: #a9c1ff; box-shadow: inset 0 0 0 1px var(--accent-100); }
.fbtn.has-value .i, .fbtn.has-value .chev { color: #a9c1ff; }
.fbtn img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; }
.fsearch {
  display: flex; flex: 0 1 320px; align-items: center; gap: 10px;
  height: 44px; margin-left: auto; padding: 0 14px;
  border-radius: 12px; background: var(--panel);
  cursor: text; transition: box-shadow .15s;
}
.fsearch .i { width: 18px; height: 18px; color: var(--muted); }
.fsearch input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; outline: none; }
.fsearch input::placeholder { color: var(--faint); }
.fsearch input::-webkit-search-cancel-button { filter: invert(1) opacity(.45); }
.fsearch:focus-within { box-shadow: 0 0 0 2px var(--accent); }

.fmeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 16px; color: var(--muted); font-size: 13px; }
.fmeta .link { margin-left: 10px; font-size: 13px; }
.sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.sort-btn:hover { color: #fff; }

.fpop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 220px; padding: 6px;
  background: var(--surface-2); border-radius: 14px; box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .2s var(--ease), visibility 0s .2s;
}
.fpick.is-open .fpop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fpick-right .fpop { left: auto; right: 0; }
.fopt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px;
  border: 0; border-radius: 9px; background: none;
  color: var(--ink-2); font-size: 14px; text-align: left; cursor: pointer;
}
.fopt:hover { background: rgba(255, 255, 255, .05); }
.fopt.is-active { color: #fff; font-weight: 600; }
.fpick .fopt { white-space: nowrap; }
.fopt-radio { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: border .15s; }
.fopt.is-active .fopt-radio { border: 5px solid var(--accent); }
.fopt small { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 600; }
/* значки вариантов в фильтрах (валюта, спенд, тип кампаний): синие кружки с знаком или рисунком;
   у «не важно» — два кружка внахлёст */
.fico {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #3a74ff, var(--accent));
  color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.fico .i { width: 13px; height: 13px; stroke-width: 2.4; }
.fico-pair { display: inline-flex; flex: none; }
.fico-pair .fico + .fico { margin-left: -8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 2px var(--ring, var(--surface-2)); }
.fbtn { --ring: var(--panel); }
.fbtn:hover { --ring: #262932; }
.fbtn .fico { width: 20px; height: 20px; font-size: 11px; }
.fbtn .fico .i { width: 12px; height: 12px; color: #fff; }
.fopt:hover .fico-pair { --ring: #2a2d35; }

/* фильтр стран: на кнопке флажки выбранных кружками внахлёст; в окне — поиск, регионы
   плитками-флагами (как у категорий), выбранные сверху, круглые флаги и число товаров */
.fflags { display: inline-flex; flex: none; }
.fbtn .fflags img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #172138; }
.fbtn .fflags img + img { margin-left: -7px; }
.geo-pop { width: 364px; padding: 0; }
.geo-pop-find { padding: 8px; border-bottom: 1px solid var(--line-2); }
.geo-pop-find .input { height: 38px; }
.geo-regions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 4px; }
.geo-regions[hidden] { display: none; }
.geo-region {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 5px;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .05);
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .15s, color .15s, transform .25s var(--spring);
}
.geo-region img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.geo-region small { color: var(--faint); font-size: 11.5px; font-weight: 700; }
.geo-region:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.geo-region:active { transform: scale(.96); }
.geo-region.is-active { background: var(--accent); color: #fff; }
.geo-region.is-active small { color: rgba(255, 255, 255, .75); }
.geo-list { max-height: 300px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.geo-opt img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.geo-opt small { min-width: 22px; padding: 1px 6px; border-radius: 99px; background: rgba(255, 255, 255, .06); text-align: center; }
.geo-opt.is-active small { background: var(--accent-50); color: #a9c1ff; }
.geo-sep { display: block; height: 1px; margin: 4px 8px; background: var(--line-2); }
.geo-opt .geo-box {
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 4px;
  background: center / 10px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.geo-opt.is-active .geo-box {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.geo-pop-foot { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line-2); }
.geo-pop-foot span { margin-right: auto; color: var(--muted); font-size: 12.5px; }
.geo-empty { padding: 18px 10px; color: var(--muted); text-align: center; }

/* сетка карточек */
.ogrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
.offer { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
/* появление карточек: снизу с лёгким увеличением, по очереди (задержка — в offerCard) */
.offer.is-enter { animation: offerIn .5s var(--ease) backwards; }
@keyframes offerIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.offer-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* текст рядом с плиткой; саму плитку (.cat-art — тоже span) не трогаем, иначе значок уезжает вверх */
.offer-head > span:not(.cat-art) { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.offer-head b { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.offer-head small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* пропорция обложек — как у баннеров кабинетов (1320 × 904) */
.offer-cover {
  display: block; overflow: hidden; aspect-ratio: 1320 / 904; border-radius: 16px; background: #0b1226;
  transition: transform .4s var(--spring), box-shadow .35s var(--ease);
}
/* при наведении обложка приподнимается и подсвечивается снизу синим */
.offer:hover .offer-cover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(38, 99, 240, .65); }
/* готовый баннер вместо собранной обложки: свои скруглённые углы и кромка */
.offer-cover.has-image, .pr-cover.has-image { border-radius: 4.5% / 6.6%; background: none; }
.offer:focus-visible { outline: none; }
.offer:focus-visible .offer-cover { box-shadow: 0 0 0 3px var(--accent); }
.offer-price { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.offer-price .pill, .pr-price .pill { height: 22px; padding: 0 7px 0 6px; border-radius: 99px; }
.offer-price b { color: var(--price); font-size: 18px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.offer-price small { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.offer-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink-2); font-size: 15px; line-height: 1.45; transition: color .15s; }
.offer:hover .offer-title { color: #fff; }
.offer-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.offer-foot .stock { gap: 6px; font-size: 13px; }
.offer-sold { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.offer-sold .i { width: 14px; height: 14px; color: #ff8a3d; }
.offer.is-skeleton .offer-cover { background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)) 0 0 / 200% 100%; animation: shimmer 1.2s infinite; }
.sk-line { display: block; height: 14px; border-radius: 6px; background: var(--surface); }
.sk-line.is-short { width: 60%; }

.more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.more-wrap:empty { display: none; }
/* «Показать ещё»: подпись, полоска прогресса и широкая кнопка с бликом */
.more { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(380px, 100%); }
.more-info { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.more-bar { width: 100%; height: 4px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.more-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--violet)); }
.more-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 54px; margin-top: 6px; overflow: hidden;
  border: 1px solid rgba(82, 134, 255, .38); border-radius: 16px;
  background: linear-gradient(180deg, rgba(38, 99, 240, .2), rgba(38, 99, 240, .07));
  color: #fff; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
  transition: border-color .2s, transform .35s var(--spring);
}
.more-btn b {
  padding: 3px 9px; border-radius: 99px;
  background: var(--accent); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.more-btn .i { width: 18px; height: 18px; color: #9db8ff; transition: transform .4s var(--spring); }
.more-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-16deg);
  pointer-events: none;
}
.more-btn:hover { border-color: rgba(130, 168, 255, .75); transform: translateY(-2px); }
.more-btn:hover::after { transform: translateX(380%) skewX(-16deg); transition: transform .8s var(--ease); }
.more-btn:hover .i { transform: translateY(3px); }
.more-btn:active { transform: scale(.98); }
.more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* обложка товара в стиле баннеров кабинетов. Фон с дугами света и свечением — одна картинка
   на все обложки (tools/cover-bg.py): раньше это были градиенты, размытые тени и фильтры,
   которые браузер пересчитывал для каждой карточки при прокрутке. Анимации — только transform
   и opacity. Все размеры — в cqw (доля ширины обложки): в каталоге и на странице товара одинаково */
.cover {
  position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; isolation: isolate;
  container-type: inline-size;
  border-radius: inherit;
  color: #fff;
  background: #0b1430 url(../assets/cover/bg-sm.webp) center / 100% 100% no-repeat;
}
.pr-cover .cover { background-image: url(../assets/cover/bg.webp); }
/* блик, который пробегает по обложке при наведении */
.cover::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; z-index: 2;
  width: 38%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-140%) skewX(-16deg);
  pointer-events: none;
}
.offer:hover .cover::before { transform: translateX(340%) skewX(-16deg); transition: transform .9s var(--ease); }
/* светлая кромка; свечение изнутри — уже на картинке фона */
.cover::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .4);
  transition: box-shadow .25s;
}
.offer:hover .cover::after { box-shadow: inset 0 0 0 1px rgba(150, 194, 255, .9); }

.cover-brand {
  position: absolute; left: 6.5cqw; top: 6cqw; right: 18cqw;
  display: flex; align-items: center; gap: 1.8cqw;
  overflow: hidden;
  font-size: max(10px, 4.9cqw); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap;
}
.cover-brand .i { width: 1.2em; height: 1.2em; flex: none; }
.i-tt { overflow: visible; }   /* цветные копии знака TikTok выходят за его рамку */

/* флаг: глянцевая табличка под наклоном. Толщина — тенью без размытия: рисуется как рамка */
.cover-art {
  position: absolute; right: 7cqw; top: 19cqw;
  width: 40cqw; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 3.4cqw;
  box-shadow: .5cqw .9cqw 0 #12306e, 1cqw 1.8cqw 0 rgba(3, 8, 26, .4);
  transform: rotate(-7deg);
  transition: transform .5s var(--spring);
}
.cover-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-art::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .2) 100%);
  box-shadow: inset 0 0 0 max(1px, .35cqw) rgba(255, 255, 255, .28);
}
/* при наведении флаг выпрямляется и «подпрыгивает» */
.offer:hover .cover-art { transform: translateY(-1.2cqw) rotate(-2deg) scale(1.06); }
/* логотип почты — на белой плитке */
.cover-art.is-logo {
  top: 17cqw; right: 10cqw;
  display: grid; place-items: center;
  width: 31cqw; aspect-ratio: 1;
  border-radius: 7cqw; background: #fff;
}
.cover-art.is-logo img { width: 60%; height: 60%; object-fit: contain; }

.cover-text {
  position: absolute; left: 6.5cqw; bottom: 6.5cqw;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 66%;
}
.cover-text > b {
  font-size: 18.5cqw; font-weight: 800; line-height: .9; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 35%, #b4caff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cover.is-mail .cover-text > b { max-width: 56cqw; font-size: 8.4cqw; line-height: 1.1; overflow-wrap: anywhere; }
.cover-text small {
  max-width: 46cqw; margin-top: 1.8cqw; overflow: hidden;
  color: rgba(226, 234, 255, .8); font-size: max(10px, 4.2cqw); font-weight: 600; line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap;
}
/* метка категории над кодом: «С черновиками», «Верифицирован» */
.cover-tag {
  max-width: 46cqw; margin-bottom: 2.2cqw; padding: max(2px, .8cqw) max(6px, 2cqw);
  overflow: hidden;
  border: 1px solid rgba(120, 172, 255, .5); border-radius: 99px;
  background: rgba(46, 116, 255, .26);
  color: #d6e4ff; font-size: max(9px, 3.1cqw); font-weight: 700; line-height: 1.2; letter-spacing: .01em;
  text-overflow: ellipsis; white-space: nowrap;
}

/* плашки валюты и спенда — сплошные и цветные, чтобы читались с первого взгляда */
.cover-chips { display: flex; gap: max(4px, 1.4cqw); margin-top: 2.6cqw; }
.cover-chip {
  display: inline-flex; align-items: center; gap: max(3px, 1.1cqw);
  height: max(19px, 7.2cqw); padding: 0 max(7px, 2.4cqw);
  border-radius: 99px;
  color: #fff; font-size: max(10px, 3.8cqw); font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 .6cqw 0 rgba(0, 0, 0, .28);
}
.cover-chip .i { width: 1.15em; height: 1.15em; stroke-width: 2.5; }
/* валюта — белая плашка со знаком в синем кружке */
.cover-chip.is-cur { padding-left: max(2px, .9cqw); background: #fff; color: #0b1533; box-shadow: 0 .6cqw 0 rgba(0, 0, 0, .28); }
.cover-chip.is-cur b {
  display: grid; place-items: center;
  width: max(15px, 5.4cqw); height: max(15px, 5.4cqw); border-radius: 50%;
  background: #2663f0; color: #fff; font-size: .85em; font-weight: 800;
}
/* со спендом — зелёная, без спенда — фиолетовая */
.cover-chip.is-spend { background: linear-gradient(180deg, #34d27f, #14a057); }
.cover-chip.is-fresh { background: linear-gradient(180deg, #a07cff, #7444ee); }

.cover-mark { position: absolute; right: 5.5cqw; bottom: 5cqw; width: 23cqw; height: auto; opacity: .92; pointer-events: none; }
.cover-mark.is-text { width: auto; color: rgba(255, 255, 255, .6); font-size: max(8px, 3.4cqw); font-weight: 700; }

/* значок «i»: при наведении — окно с описанием товара, на телефоне — по нажатию */
.cover-info {
  position: absolute; right: 4.5cqw; top: 4.5cqw; z-index: 4;
  display: grid; place-items: center;
  width: max(28px, 9.5cqw); height: max(28px, 9.5cqw);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .4s var(--spring);
}
.cover-info::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }  /* зона нажатия больше значка */
.cover-info .i { width: 58%; height: 58%; stroke-width: 2.1; }
.cover-info:hover, .cover-info.is-active { border-color: rgba(255, 255, 255, .4); background: var(--accent); transform: scale(1.14) rotate(-10deg); }
.cover-info:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* готовый баннер позиции */
.cover.is-image { background: none; }
.cover.is-image::after { display: none; }
.cover.is-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* маленькая карточка (телефон, планшет): метку категории видно над карточкой и в заголовке,
   знак магазина убираем — так флаг встаёт выше, а валюта и спенд помещаются строкой под кодом */
@container (max-width: 260px) {
  .cover-brand { right: 22cqw; }
  .cover-tag, .cover-mark { display: none; }
  .cover-art { top: 18cqw; right: 6cqw; width: 37cqw; }
  .cover-art.is-logo { top: 18cqw; width: 29cqw; }
  .cover-text { max-width: 92%; }
  .cover-text small { max-width: 52cqw; }
  .cover-info { width: max(24px, 9.5cqw); height: max(24px, 9.5cqw); }
}
/* совсем узкая (телефон шириной 320) — плашки без значков, чтобы влезли обе */
@container (max-width: 160px) {
  .cover-chip .i { display: none; }
  .cover-chip { padding: 0 6px; }
  .cover-chip.is-cur { padding-left: 2px; }
}

/* быстрый просмотр (quickview.js): окно у значка «i» на компьютере и то же содержимое в окне снизу на телефоне */
.qv {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: 380px; max-width: calc(100vw - 24px);
  padding: 16px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background: #1a1d25;
  box-shadow: var(--sh-pop), 0 0 0 1px rgba(82, 134, 255, .08);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* выезжает со стороны карточки и чуть пружинит; сторону ставит quickview.js */
  transform: translateX(var(--qv-x, -10px)) scale(.95); transform-origin: var(--qv-origin, top left);
  transition: opacity .18s, transform .32s var(--spring), visibility 0s .32s;
}
.qv[data-side="left"] { --qv-x: 10px; --qv-origin: top right; }
.qv[data-side="below"] { --qv-x: 0px; --qv-origin: top right; }
.qv.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.qv-body { display: flex; flex-direction: column; gap: 11px; color: var(--ink); text-align: left; }
.qv-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qv-head .flag { width: 40px; height: 30px; flex: none; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.qv-head .logo-tile { flex: none; }
.qv-head > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qv-head b { font-size: 15px; font-weight: 650; line-height: 1.3; }
.qv-head small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.qv-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.qv-price b { color: var(--price); font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.qv-price .pill { height: 22px; padding: 0 7px 0 6px; border-radius: 99px; }
.qv-price > span { color: var(--faint); font-size: 13px; }
.qv-status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.qv-status .stock { gap: 6px; font-size: 13px; }
.qv-auto { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-700); font-weight: 600; }
.qv-auto .i, .qv-status .offer-sold .i { width: 14px; height: 14px; }
.qv-status .offer-sold .i { color: #ff8a3d; }
.qv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.qv-facts > div { min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.qv-facts dt { color: var(--muted); font-size: 11px; line-height: 1.3; }
.qv-facts dd { margin: 1px 0 0; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.qv-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.qv-format {
  display: block; padding: 8px 10px; border-radius: 10px; background: var(--surface-2);
  color: var(--ink-2); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
}
.qv-geos { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.qv-geos img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.qv-geos i { margin-left: 3px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
.qv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.qv-actions .btn .i { width: 15px; height: 15px; }
.qv-more { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--accent-700); font-size: 13px; font-weight: 600; text-decoration: none; }
.qv-more:hover { color: #fff; }
.qv-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.qv-sheet .qv-head { padding-right: 40px; }   /* место под крестик окна */
.qv-sheet .qv-actions .btn { flex: 1; --h: 42px; font-size: 14px; }
.qv-sheet .qv-more { width: 100%; justify-content: center; margin: 2px 0 0; }

/* -------------------------------- анимации --------------------------------- */
/* появление блоков при прокрутке (reveal в app.js): снизу и из прозрачности, по очереди (--i).
   Только transform и opacity, один раз; без JS или при «уменьшить движение» блоки видны сразу */
.js-rv .rv { opacity: 0; transform: translateY(18px); }
.js-rv .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* выпадающие окна шапки раскрываются с лёгкой пружиной */
.site .pop { transform: translateY(-8px) scale(.96); transition: opacity .18s, transform .3s var(--spring), visibility 0s .3s; }
/* значки в шапке чуть подпрыгивают при наведении */
.hbtn-ico { transition: transform .3s var(--spring); }
.hbtn:hover .hbtn-ico { transform: translateY(-2px); }
.hcart:hover .hbtn-ico .i { animation: cartNudge .5s var(--ease); }
@keyframes cartNudge { 30% { transform: translateX(-2px) rotate(-8deg); } 60% { transform: translateX(2px) rotate(6deg); } }
/* кнопки «проседают» при нажатии */
.site .btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .25s var(--spring); }
.site .btn:active:not([disabled]) { transform: scale(.97); }

/* страница товара: обложка и колонка справа появляются по очереди */
.product .pr-cover { animation: prIn .55s var(--ease) backwards; }
.product .pr-side > * { animation: prIn .5s var(--ease) backwards; }
.product .pr-side > :nth-child(2) { animation-delay: .04s; }
.product .pr-side > :nth-child(3) { animation-delay: .08s; }
.product .pr-side > :nth-child(4) { animation-delay: .12s; }
.product .pr-side > :nth-child(5) { animation-delay: .16s; }
.product .pr-side > :nth-child(n+6) { animation-delay: .2s; }
@keyframes prIn { from { opacity: 0; transform: translateY(12px); } }
/* шапка страницы категории */
.cat-hero { animation: prIn .5s var(--ease) backwards; }

/* ------------------------------ партнёры ------------------------------------ */
/* карточки-перевёртыши: спереди только логотип на тёмной карточке со свечением цвета партнёра (--c),
   сзади слоган, описание, промокод и кнопка. На компьютере — по наведению, на телефоне — по нажатию */
.site .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* вытянутые в высоту, 3 : 4; не ниже 380 px — чтобы сзади поместились описание, промокод и кнопка */
.pflip { position: relative; aspect-ratio: 3 / 4; min-height: 380px; perspective: 1400px; border-radius: 22px; outline: none; }
.pflip-in {
  position: relative; height: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) {
  .pflip:hover .pflip-in { transform: rotateY(180deg); }
  .pflip .pflip-x { display: none; }   /* кнопка «назад» нужна только на телефоне */
}
.pflip.is-flipped .pflip-in, .pflip:focus-visible .pflip-in, .pflip:has(:focus-visible) .pflip-in { transform: rotateY(180deg); }
.pflip:focus-visible .pflip-face { box-shadow: 0 0 0 2px var(--accent); }
.pflip-face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 22px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pflip-front {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--c) 32%, transparent), transparent 72%),
    linear-gradient(160deg, #181c28, #0f121a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, .06));
}
/* дуга света, как на баннерах категорий */
.pflip-front::before {
  content: ''; position: absolute; left: -30%; bottom: -55%;
  width: 120%; height: 90%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  opacity: .45;
}
.pflip-front .pcard-logo { position: relative; gap: 14px; min-height: 0; transition: transform .4s var(--spring); }
.pflip-front .pcard-logo img.pcard-icon, .pflip-front .pcard-logo svg.pcard-icon { width: 58px; height: 58px; border-radius: 14px; }
.pflip-front .pcard-word { font-size: 30px; }
.pflip-front .pcard-logo-img { max-width: 240px; max-height: 76px; }
.pflip-hint {
  position: absolute; left: 0; right: 0; bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--faint); font-size: 12.5px; font-weight: 600;
}
.pflip-hint .i { width: 14px; height: 14px; }
.pflip-back {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  background:
    radial-gradient(80% 50% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    linear-gradient(160deg, #1b1f2a, #12151d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, .06));
  transform: rotateY(180deg);
}
.pflip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.pflip-head .pcard-logo { gap: 8px; min-height: 0; }
.pflip-head .pcard-logo img.pcard-icon, .pflip-head .pcard-logo svg.pcard-icon { width: 28px; height: 28px; border-radius: 8px; }
.pflip-head .pcard-word { font-size: 17px; }
.pflip-head .pcard-logo-img { max-width: 150px; max-height: 30px; }
.pflip-x {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06);
  color: var(--muted); cursor: pointer;
}
.pflip-back h3 { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.pflip-back p {
  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  color: var(--muted); font-size: 13px; line-height: 1.55;
}
.pflip-back .pcard-offer { margin-top: auto; background: color-mix(in srgb, var(--c) 8%, #161a23); }
.pflip-go {
  flex: none; background: var(--c); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.site .pflip-go:hover:not([disabled]) { background: color-mix(in srgb, var(--c) 85%, #fff); color: #fff; }
/* пустое место для партнёра: пунктирная рамка, спереди «Наведи», сзади вопрос и кнопка «Напиши нам» */
.pflip.is-slot { --c: var(--accent); }
.is-slot .pflip-front {
  background:
    radial-gradient(60% 45% at 50% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 72%),
    linear-gradient(160deg, #161a24, #0f121a);
  box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, .1)); outline-offset: -1.5px;
}
.is-slot .pflip-front::before { display: none; }
.pflip-slot-hint {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 18px; font-weight: 650;
}
.pflip-slot-hint .i { width: 22px; height: 22px; color: var(--accent-700); }
.pflip.is-slot:hover .pflip-slot-hint { color: #fff; }
.is-slot .pflip-back {
  justify-content: center;
  box-shadow: none;
  outline: 1.5px dashed color-mix(in srgb, var(--c) 55%, rgba(255, 255, 255, .1)); outline-offset: -1.5px;
}
.is-slot .pflip-x { position: absolute; top: 16px; right: 16px; }
.pflip-slot { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pflip-slot h3 { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.pflip-slot .pflip-go { padding: 0 22px; }

/* -------------------------------- окно входа -------------------------------- */
/* Как у Linear, Vercel, Dribbble: окно постоянного размера — слева форма по центру по высоте,
   справа панель 360 × 640 (ровно 9:16, как вертикальные баннеры — видео не обрезается ни при входе,
   ни при регистрации). Кнопки и поля — 42–44 px, заголовок 24 px. Если форма не помещается
   (невысокий экран) — прокручивается сама форма, окно не растёт. */
.site .modal.is-auth { max-width: 820px; }
.site .modal.is-auth .modal-body { grid-template-columns: minmax(0, 1fr) 360px; height: min(640px, calc(100dvh - 48px)); }
.site .auth-form { display: flex; flex-direction: column; height: 100%; max-height: none; padding: 24px 38px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.site .auth-inner { margin: auto 0; }   /* по центру, а если не влезает — прокрутка с самого верха */
.auth-mlogo { display: none; height: 30px; width: auto; margin-bottom: 18px; }

/* крестик: тёмный кружок с обводкой — виден и на белом видео справа, и на тёмной форме */
.site .modal.is-auth .modal-x {
  top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(9, 14, 30, .58); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24), 0 6px 16px rgba(0, 0, 0, .28);
}
.site .modal.is-auth .modal-x:hover { background: rgba(9, 14, 30, .82); color: #fff; transform: none; }   /* без поворота при наведении */

/* вкладки: два равных сегмента */
.site .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 18px; padding: 3px; border-radius: 11px;
  background: #111317; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.site .auth-tabs button { height: 32px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.site .auth-tabs button:hover:not(.is-active) { color: var(--ink-2); }
.site .auth-tabs button.is-active { background: var(--surface-3); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 3px 10px -4px rgba(0, 0, 0, .8); }
.site .auth-form .m-title { padding-right: 0; font-size: 24px; line-height: 1.2; }
.site .auth-form .m-sub { margin: 4px 0 16px; font-size: 14px; line-height: 1.45; }

.auth-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 6px 11px 6px 7px;
  border: 0; border-radius: 9px; background: #111317; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.auth-back:hover { color: #fff; }

/* быстрый вход: значок и название в одну строку, у Google — метка «скоро» */
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-social.is-single { grid-template-columns: 1fr; }
.soc-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.soc-btn:hover:not([disabled]) { background: var(--surface-3); border-color: var(--line-strong); }
.soc-btn[disabled] { cursor: progress; opacity: .85; }
.soc-ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.soc-ic .i { width: 13px; height: 13px; margin-left: -1px; }
.soc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-btn.is-tg { border-color: rgba(42, 171, 238, .32); background: rgba(42, 171, 238, .1); }
.soc-btn.is-tg:hover:not([disabled]) { border-color: rgba(42, 171, 238, .55); background: rgba(42, 171, 238, .17); }
.soc-btn.is-tg .soc-ic { background: #2aabee; color: #fff; }
.soc-btn.is-google .soc-ic { width: 18px; height: 18px; }
.soc-btn.is-google .g-logo { width: 18px; height: 18px; }
.soc-soon { flex: none; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--faint);
  font-size: 11px; font-style: normal; font-weight: 600; }
.g-logo { width: 19px; height: 19px; flex: none; }
/* ход входа через бота («Откройте бота…»); пока пусто — места не занимает */
.site .auth-tg-hint { margin: -4px 0 12px; color: var(--muted); font-size: 12.5px; text-align: center; }
.site .auth-tg-hint:empty { display: none; }
.site .auth-or { margin: 4px 0 12px; color: var(--faint); font-size: 12px; }
.site .auth-form .auth-social { margin-bottom: 14px; }

/* поля */
.site .auth-form .field { gap: 6px; margin-bottom: 12px; }
.site .auth-form .field > span { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.site .auth-form .input { height: 42px; padding: 0 12px 0 39px; border-color: #2a2d36; border-radius: 10px; background: #121418; font-size: 14.5px; }
.site .auth-form .input:hover { border-color: var(--line-strong); }
.site .auth-form .input:focus { border-color: var(--accent); background: #131620; box-shadow: 0 0 0 3px rgba(38, 99, 240, .2); }
.site .auth-form .input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #121418 inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.site .auth-form .input-wrap > .i { left: 13px; width: 16px; height: 16px; transition: color .15s; }
.site .auth-form .input-wrap:focus-within > .i { color: var(--accent-700); }
.site .auth-form .input-wrap > .input-btn { right: 5px; width: 32px; height: 32px; border-radius: 8px; }
.site .auth-form .input.is-code { font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.site .auth-form .input.is-code::placeholder { font-weight: 400; letter-spacing: 0; text-transform: none; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-row .link { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.field-row .link:hover { color: var(--accent-700); }
.field > span small { color: var(--faint); font-weight: 500; }

/* надёжность пароля: 4 полоски — чем надёжнее, тем больше закрашено и зеленее; подсказки — строкой с галочками */
.pass-meter { display: flex; align-items: center; gap: 10px; margin: -4px 0 7px; }
.pass-bars { display: grid; flex: 1; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pass-bars i { height: 3px; border-radius: 99px; background: var(--surface-3); transition: background-color .25s; }
.pass-meter b { min-width: 104px; color: var(--muted); font-size: 11.5px; font-weight: 650; text-align: right; }
.pass-meter b:empty { min-width: 0; }
.pass-meter[data-level="0"] .pass-bars i:nth-child(-n+1) { background: var(--red); }
.pass-meter[data-level="1"] .pass-bars i:nth-child(-n+2) { background: var(--amber); }
.pass-meter[data-level="2"] .pass-bars i:nth-child(-n+3) { background: #7fd36b; }
.pass-meter[data-level="3"] .pass-bars i { background: var(--green); }
.pass-meter[data-level="0"] b { color: var(--red); }
.pass-meter[data-level="1"] b { color: var(--amber); }
.pass-meter[data-level="2"] b, .pass-meter[data-level="3"] b { color: var(--green); }
.pass-reqs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.pass-reqs li { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 11.5px; font-weight: 600; transition: color .2s; }
.pass-reqs li .i { width: 12px; height: 12px; stroke-width: 3; }
.pass-reqs li.is-ok { color: var(--green); }
.pass-match { position: absolute; right: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.pass-match .i { width: 12px; height: 12px; stroke-width: 3; }
.pass-match.is-ok { background: var(--green-50); color: var(--green); }
.pass-match.is-bad { background: var(--red-50); color: var(--red); }

/* главная кнопка и низ формы */
.site .auth-submit { height: 44px; margin-top: 4px; border-radius: 10px; font-size: 15px; font-weight: 650;
  background: linear-gradient(180deg, #3a72ff, #2663f0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px -12px rgba(38, 99, 240, .9); }
.site .auth-submit:hover:not([disabled]) { background: linear-gradient(180deg, #4a7eff, #2d6af5); }
.auth-submit .i { transition: transform .3s var(--spring); }
.auth-submit:hover .i { transform: translateX(3px); }
.site .auth-switch { margin-top: 16px; font-size: 13.5px; }
.site .auth-switch .link { font-weight: 650; }
/* «Сменить пароль» — под ссылкой на регистрацию, тихой строкой */
.site .auth-change { margin-top: 8px; text-align: center; }
.site .auth-change .link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 600; }
.site .auth-change .link:hover { color: var(--accent-700); }

/* окно поуже — панель справа не помещается: только форма, высота по содержимому */
@media (max-width: 880px) {
  .site .modal.is-auth { max-width: 480px; }
  .site .modal.is-auth .modal-body { grid-template-columns: 1fr; height: auto; }
  .site .modal.is-auth .auth-promo { display: none; }
  .site .auth-form { height: auto; max-height: calc(100dvh - 48px); }
  .site .modal.is-auth .modal-x { background: var(--surface-3); color: var(--muted); box-shadow: none; }
}
/* крестик в правом верхнем углу формы — вкладки ему не мешают (на телефоне над ними логотип) */
@media (min-width: 721px) and (max-width: 880px) { .site .auth-tabs { margin-right: 42px; } }

/* правая панель: тёмно-синяя, как обложки товаров, с логотипом, крупной акулой и преимуществами */
.site .auth-promo { background: #0b1430; }
.site .auth-promo-stub {
  gap: 14px; padding: 30px 30px 26px;
  background: #0b1430 url(../assets/cover/bg.webp) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .25);
}
.site .auth-promo-stub img.auth-wordmark { width: 150px; height: auto; border-radius: 0; }
.site .auth-promo-stub img.auth-shark {
  /* акула сжимается, если форма слева короче (вход), и растёт до 250 px на регистрации */
  flex: 1 1 auto; min-height: 0; max-height: 250px; width: 100%; height: auto; margin: 0 auto -4px;
  object-fit: contain; border-radius: 0;
  filter: none; animation: sharkIn .7s var(--spring) .1s backwards;
}
@keyframes sharkIn { from { opacity: 0; transform: translateY(16px) rotate(-6deg) scale(.92); } }
.site .auth-promo-stub h3 { margin-top: 0; font-size: 23px; }
.site .auth-promo-stub p { color: rgba(226, 234, 255, .72); font-size: 14px; }
.site .auth-promo-stub .perk-list { margin-top: 4px; }
.site .auth-promo-stub .perk-list li { color: rgba(236, 241, 255, .9); font-size: 13.5px; }
.site .auth-promo-stub .perk-list li .i { background: var(--accent); color: #fff; }
.site .auth-promo-stub small { margin-top: auto; color: rgba(226, 234, 255, .45); }

/* ---------------------------------- кабинет -------------------------------- */
/* баннер профиля в стиле обложек товаров: аватар, имя, ID с копированием, способ входа, дата,
   кэшбэк; справа баланс с пополнением */
.acc-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 32px; overflow: hidden;
  border-radius: 24px;
  background: #0b1430 url(../assets/cover/bg.webp) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(112, 166, 255, .38);
  animation: accIn .5s var(--ease) backwards;
}
@keyframes accIn { from { opacity: 0; transform: translateY(12px); } }
.acc-who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.avatar-xl { width: 76px; height: 76px; font-size: 30px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .1); }
/* смена фото профиля: при наведении — затемнение с камерой, внизу всегда маленький значок,
   своё фото можно убрать крестиком; пока грузится — крутится */
.acc-ava { position: relative; flex: none; }
.acc-ava-pick { position: relative; display: block; border-radius: 50%; cursor: pointer; }
.acc-ava-cover {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 50%; background: rgba(6, 10, 22, .55); color: #fff;
  opacity: 0; transition: opacity .2s;
}
.acc-ava-cover .i { width: 26px; height: 26px; }
.acc-ava-pick:hover .acc-ava-cover, .acc-ava-pick:focus-within .acc-ava-cover { opacity: 1; }
.acc-ava-badge {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: 0 0 0 3px #0d1530;
  transition: transform .3s var(--spring);
}
.acc-ava-badge .i { width: 14px; height: 14px; }
.acc-ava-pick:hover .acc-ava-badge { transform: scale(1.1); }
.acc-ava-del {
  position: absolute; right: -4px; top: -4px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: #2b2e38; color: #fff;
  box-shadow: 0 0 0 3px #0d1530; cursor: pointer;
  opacity: 0; transition: opacity .2s, background-color .15s;
}
.acc-ava-del .i { width: 12px; height: 12px; }
.acc-ava:hover .acc-ava-del, .acc-ava-del:focus-visible { opacity: 1; }
.acc-ava-del:hover { background: var(--red); }
.acc-ava.is-busy .acc-ava-cover { opacity: 1; }
.acc-ava.is-busy .acc-ava-cover .i { animation: spin 1s linear infinite; }
@media (hover: none) { .acc-ava-del { opacity: 1; } }
.acc-who h1 { color: #fff; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1);
  color: #dfe8ff; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.acc-chip .i { width: 13px; height: 13px; }
.acc-chip img { width: 15px; height: 15px; }
.acc-chip.is-copy { cursor: pointer; transition: background-color .15s; }
.acc-chip.is-copy:hover { background: rgba(255, 255, 255, .18); }
.acc-chip.is-coin { background: rgba(38, 99, 240, .26); color: #c4d6ff; }
.acc-balance {
  display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 16px 20px; border-radius: 18px;
  background: rgba(6, 11, 26, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  text-align: right;
}
.acc-balance > span { color: rgba(226, 234, 255, .7); font-size: 12.5px; font-weight: 600; }
.acc-balance b {
  font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 40%, #b4caff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acc-balance small { color: rgba(226, 234, 255, .65); font-size: 13px; }
.acc-balance-act { display: flex; gap: 8px; margin-top: 10px; }
.acc-balance-act .btn .i { transition: transform .35s var(--spring); }
.acc-balance-act .btn-accent:hover .i { transform: rotate(90deg); }
.acc-logout { width: 40px; padding: 0; }

/* сводка */
.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.acc-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 18px 20px; border-radius: 20px; background: var(--surface);
  animation: accIn .5s var(--ease) backwards;
}
.acc-stat:nth-child(2) { animation-delay: .05s; }
.acc-stat:nth-child(3) { animation-delay: .1s; }
.acc-stat:nth-child(4) { animation-delay: .15s; }
.acc-stat-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: var(--accent-50); color: var(--accent-700); }
.acc-stat-ico .i { width: 19px; height: 19px; }
.acc-stat-ico img { width: 24px; height: 24px; }
.acc-stat.is-coins .acc-stat-ico { background: var(--accent-50); }
.acc-stat-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.acc-stat b { color: var(--ink); font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.acc-stat b em { color: var(--muted); font-size: 14px; font-style: normal; font-weight: 700; }
.acc-stat small { color: var(--muted); font-size: 12.5px; }
.acc-stat .wl-bar { width: 100%; margin: 6px 0 4px; }
.acc-stat .btn { margin-top: 10px; }
.acc-stat.is-ready { box-shadow: inset 0 0 0 1px var(--accent-100); }

/* заказы слева, операции и ссылки справа */
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; margin-top: 12px; }
.acc-side { display: grid; gap: 12px; }
.acc-panel { padding: 20px; border-radius: 20px; background: var(--surface); }
.acc-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.acc-panel-head h2 { color: var(--ink); font-size: 18px; font-weight: 750; }
.acc-panel-head p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.acc-filter { display: flex; flex: none; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.acc-filter button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.acc-filter button small { color: var(--faint); font-size: 11.5px; font-weight: 700; }
.acc-filter button:hover { color: var(--ink); }
.acc-filter button.is-active { background: var(--surface-3); color: #fff; }
.acc-orders[data-filter="done"] .ord.is-wait, .acc-orders[data-filter="wait"] .ord.is-done { display: none; }
.ord-list { display: grid; gap: 6px; }
.ord {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 14px; background: var(--surface-2);
  animation: clineIn .4s var(--ease) backwards;
  transition: background-color .15s;
}
.ord:hover { background: var(--surface-3); }
.ord-art { display: flex; }
.ord-art .flag, .ord-art .logo-tile { width: 34px; height: 25px; border-radius: 5px; }
.ord-art > * + * { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface-2); }
.ord-art .i-tile { width: 34px; height: 34px; }
.ord-main { display: flex; flex-direction: column; min-width: 0; }
.ord-main b { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ord-main small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ord-sum { display: flex; flex-direction: column; align-items: flex-end; color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.ord-sum small { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-700); font-size: 11.5px; font-weight: 700; }
.ord-sum small img { width: 12px; height: 12px; }
.ord-act { display: flex; gap: 6px; }
.acc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; color: var(--muted); text-align: center; }
.acc-empty b { color: var(--ink); font-size: 16px; }
.acc-ops { display: grid; gap: 2px; max-height: 460px; margin: 0 -6px; overflow-y: auto; overscroll-behavior: contain; }
.acc-ops .op:hover { background: rgba(255, 255, 255, .03); }
.acc-links { display: grid; gap: 4px; padding: 8px; }
.acc-links a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; transition: background-color .15s;
}
.acc-links a:hover { background: rgba(255, 255, 255, .04); }
.acc-links a > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.acc-links b { font-size: 14px; font-weight: 650; }
.acc-links small { color: var(--muted); font-size: 12px; }
.acc-links .i-tile { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-50); color: var(--accent-700); }
.acc-links a > .i { color: var(--faint); transition: transform .25s var(--spring); }
.acc-links a:hover > .i { transform: translateX(3px); color: var(--ink); }

/* -------------------------------- категория ------------------------------- */

.cat-hero {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  min-height: 200px; padding: 32px; overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c) 65%, transparent), transparent 70%),
    radial-gradient(50% 90% at 0% 100%, color-mix(in srgb, var(--c) 25%, transparent), transparent 70%),
    linear-gradient(160deg, #1f222b, #14161a);
}
.cat-hero.is-skeleton { background: var(--surface); }
.cat-hero-text { min-width: 0; }
.cat-hero h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.cat-hero p { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: 15px; }
.subtabs { display: flex; gap: 24px; margin-top: 20px; overflow-x: auto; border-bottom: 1px solid var(--line-2); scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { position: relative; padding: 12px 0; color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.subtab:hover { color: #fff; }
.subtab.is-active { color: var(--accent-700); }
.subtab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.cat-hero ~ .catalog { margin-top: 24px; }

/* ---------------------------------- товар --------------------------------- */

.product { padding-top: 16px; }
.pr-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pr-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink); transition: background-color .15s; }
.pr-back:hover { background: var(--surface); }
.pr-cat { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.pr-cat > span:not(.cat-art) { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pr-cat b { font-size: 15px; font-weight: 650; }
.pr-cat small { color: var(--muted); font-size: 13px; }
.pr-cat:hover b { color: var(--accent-700); }

.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: start; }
.pr-cover { overflow: hidden; aspect-ratio: 1320 / 904; border-radius: 24px; }
.pr-cover.is-skeleton { background: var(--surface); }
.pr-side { position: sticky; top: calc(var(--hdr-h) + 12px); display: flex; flex-direction: column; gap: 16px; }
.pr-side .sk-line { height: 22px; }
.pr-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pr-price b { color: var(--price); font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pr-price span { color: var(--muted); font-size: 14px; }
.pr-title { color: var(--ink); font-size: 19px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.pr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-panel { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 12px; background: var(--surface-3); }
.pr-panel > b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 650; }
.pr-panel > b .i { color: var(--accent-700); }
.pr-panel > span { color: var(--ink-2); font-size: 14.5px; }
.pr-panel > small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.pr-qty { gap: 12px; }
.pr-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); font-weight: 600; }
.pr-qty .presets { margin-top: 0; }
.pr-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--muted); }
.pr-total b { color: var(--ink); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pr-buy { position: relative; }
.pr-coins {
  position: absolute; top: -12px; right: -8px;
  display: inline-flex; align-items: center; gap: 2px;
  height: 26px; padding: 0 9px 0 4px;
  border-radius: 99px; background: #fff;
  color: #14161a; font-size: 12.5px; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.pr-coins img { width: 18px; height: 18px; }
.pr-coins i { font-style: normal; }
.pr-note { display: flex; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pr-note .i { width: 16px; height: 16px; margin-top: 2px; }
.pr-guarantee { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.pr-guarantee > .i:first-child { color: var(--accent-700); }
.pr-guarantee:hover { color: #fff; }

.pr-desc { max-width: calc(100% - 488px); margin-top: 40px; }
.pr-desc h2, .pr-similar h2 { margin-bottom: 14px; font-size: 24px; font-weight: 700; }
.pr-desc .pr-panel { gap: 0; padding: 20px; background: var(--surface); }
.pr-similar { margin-top: 48px; }
.pr-similar .ogrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --------------------------------- подвал --------------------------------- */

.site .footer { margin-top: 72px; background: #181a1f; border-top: 0; }
/* текст о магазине: заголовок и три колонки — что в наличии (с гео), выдача и оплата, инструменты */
/* .site — чтобы общий .site .container { padding: 0 20px } не обнулял вертикальные отступы */
.site .footer-seo { padding-top: 44px; padding-bottom: 36px; border-bottom: 1px solid var(--line-2); }
.site .footer-in { padding-top: 36px; padding-bottom: 32px; }
.site .footer-bottom { padding-top: 16px; padding-bottom: 22px; }
/* способы оплаты — текстом, со значком карты */
.site .footer-pay { gap: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.site .footer-pay .i { width: 16px; height: 16px; color: var(--accent-700); }
.footer-seo-head { max-width: 860px; }
.footer-seo-head h2 { color: #fff; font-size: 22px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; }
.footer-seo-head p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.footer-seo-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.footer-seo-cols > div { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--line-2); }
.footer-seo-cols h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.footer-seo-cols h3 .i-tile { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-50); color: var(--accent-700); }
.footer-seo-cols h3 .i-tile .i { width: 16px; height: 16px; }
.footer-seo-cols p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.footer-seo-cols p + p { margin-top: 8px; }
.footer-seo-cols a { color: var(--accent-700); text-decoration: none; }
.footer-seo-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-geos b { color: var(--ink-2); font-weight: 600; }
.site .footer-bottom { border-top-color: var(--line-2); }
.footer-support { margin-top: 16px; }
.site .footer .logo-word { font-size: 22px; }
.site .footer .logo-img { height: 52px; }
.drawer-head .logo-img { height: 36px; }

/* ----------------------- нижняя панель (только телефон) -------------------- */

.mtab { display: none; }

/* --------------------------------- адаптив -------------------------------- */

@media (max-width: 1320px) {
  .ogrid, .pr-similar .ogrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-similar .offer:nth-child(5) { display: none; }
}

@media (max-width: 1180px) {
  .hnav [data-route] { display: none; }   /* правила и партнёрка — в подвале; поддержка остаётся */
  .hdr-in { gap: 16px; }
  .wgt-panel { gap: 18px; padding: 18px 20px 18px 18px; }
  .wgt-art { width: 150px; }
  .wgt-form, .wgt-form.is-pixel, .wgt-form.is-imap, .wgt-form.is-custom, .wgt-form.is-gen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wgt-form.is-topup .btn, .wgt-form.is-custom .btn, .wgt-form.is-gen .btn { grid-column: 1 / -1; }
  .wgt-form.is-custom > :first-child { grid-column: 1 / -1; }
  .pr-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
  .pr-desc { max-width: calc(100% - 412px); }
}

@media (max-width: 1060px) {
  .ogrid, .pr-similar .ogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cbans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-seo-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-seo-cols > div:last-child { grid-column: 1 / -1; }
  .pr-similar .offer:nth-child(4) { display: none; }
}

@media (max-width: 960px) {
  :root { --hdr-h: 0px; }
  /* телефон: логотип и язык, ниже поиск; шапка уезжает с прокруткой, всё главное — в нижней панели */
  .site .hdr { position: static; padding: 8px 0 12px; background: none; }
  .hdr-in {
    display: grid; grid-template-columns: 1fr auto; gap: 12px;
    width: auto; height: auto; margin: 0 12px; padding: 12px;
    border-radius: 18px;
  }
  .hdr-left { display: contents; }
  .hpop-lang { justify-self: end; }
  .hpop-lang .pop { left: auto; right: 0; transform-origin: top right; }
  .hsearch { grid-column: 1 / -1; }
  .hsearch-field { height: 46px; }
  .hsearch-field input { font-size: 16px; }
  .site .hdr-actions { display: none; }

  .mtab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid rgba(255, 255, 255, .05);
  }
  .mtab-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 0; padding: 4px 0;
    border: 0; background: none;
    color: var(--muted); font-size: 11px; font-weight: 600;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mtab-ico { position: relative; display: grid; place-items: center; height: 26px; transition: transform .15s; }
  .mtab-ico .i { width: 24px; height: 24px; }
  .mtab-item.is-active { color: var(--accent-700); }
  .mtab-item:active .mtab-ico { transform: scale(.9); }
  .mtab-badge {
    position: absolute; top: -4px; right: -10px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 99px; background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--panel);
  }
  body.site { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .site .toasts { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }

  .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pr-side { position: static; }
  .pr-desc { max-width: none; }
}

@media (max-width: 720px) {
  .site .container { padding: 0 12px; }
  .site .announce-in { padding: 8px 44px 8px 12px; }
  .logo-word { font-size: 21px; }
  .logo-img { height: 40px; }
  .car { margin: 0 -12px; --car-gap: 8px; }
  .car-slide {
    -webkit-mask-image: linear-gradient(#000, #000), url('../assets/banner/frame-mobile.svg');
    mask-image: linear-gradient(#000, #000), url('../assets/banner/frame-mobile.svg');
  }
  .site .footer-seo { padding-top: 32px; padding-bottom: 28px; }
  .footer-seo-head h2 { font-size: 19px; }
  .footer-seo-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .acc-hero { flex-direction: column; align-items: stretch; padding: 20px; border-radius: 20px; }
  .acc-who { gap: 14px; }
  .avatar-xl { width: 56px; height: 56px; font-size: 22px; }
  .acc-who h1 { font-size: 22px; }
  .acc-balance { align-items: flex-start; text-align: left; }
  .acc-balance-act { width: 100%; }
  .acc-balance-act .btn-accent { flex: 1; }
  .acc-stats { gap: 8px; }
  .acc-stat { padding: 14px; }
  .acc-stat b { font-size: 21px; }
  .acc-panel { padding: 16px 14px; }
  .acc-panel-head { flex-direction: column; }
  .ord { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; }
  .ord .status { grid-column: 2; justify-self: start; }
  .ord-act { grid-column: 2 / -1; }
  /* на телефоне карточки партнёров — лентой с прокруткой пальцем, как баннеры категорий */
  .site .partners {
    display: flex; gap: 10px; margin: 0 -12px; padding: 0 12px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none;
  }
  .site .partners::-webkit-scrollbar { display: none; }
  .pflip { flex: 0 0 74%; scroll-snap-align: start; }
  .auth-mlogo { display: block; }
  .site .modal.is-auth .modal-body { grid-template-columns: 1fr; }   /* правая панель скрыта — форма на всю ширину */
  .site .auth-form { padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
  .pass-meter b { min-width: 0; }
  /* на телефоне баннеры категорий — лентой с прокруткой пальцем */
  .cbans {
    display: flex; gap: 10px; margin: 16px -12px 0; padding: 0 12px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none;
  }
  .cbans::-webkit-scrollbar { display: none; }
  .cban { flex: 0 0 74%; min-height: 96px; padding: 14px 14px 14px 16px; scroll-snap-align: start; }
  .cban-text b { font-size: 15px; }
  .cban-art .cat-art { width: 54px; height: 54px; border-radius: 15px; }
  .cban.is-soon .cban-text small { font-size: 12px; line-height: 1.35; }

  /* вкладки — строкой с подписями, панель под ними */
  .wgt { flex-direction: column; gap: 10px; margin-top: 18px; }
  .wgt-tabs { flex-direction: row; gap: 4px; padding: 6px; overflow-x: auto; border-radius: 18px; scrollbar-width: none; }
  .wgt-tabs::-webkit-scrollbar { display: none; }
  .wgt-tab { display: inline-flex; gap: 6px; width: auto; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
  .wgt-tab .i { width: 18px; height: 18px; }
  .wgt-tab-label { display: inline; }
  .wgt-tip { display: none; }
  .wgt-body { border-radius: 24px; }
  .wgt-panel { padding: 16px; }
  .wgt-art { display: none; }
  .wgt-head { flex-direction: column; gap: 8px; }
  /* переключатель способа — во всю ширину, баланс под ним */
  .wgt-aside:has(.pay-switch) { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .wgt-aside:has(.pay-switch) [data-balance]:empty { display: none; }
  .pay-switch { order: -1; width: 100%; }
  .wgt-title h2 { font-size: 20px; }
  .wgt-mailbox { text-align: left; }
  .wgt-form.is-vat, .wgt-form.is-pixel, .wgt-form.is-imap { grid-template-columns: minmax(0, 1fr); }
  .wgt-form.is-custom > :nth-child(4) { grid-column: 1 / -1; }
  .wgt-presets { margin-left: 0; }
  .wgt-gen { flex-direction: column; align-items: stretch; }
  .wgt-gen-out { flex: none; height: 168px; font-size: 13px; }
  .wgt-gen-act { flex-direction: row; }
  .wgt-gen-act .btn { flex: 1; }
  .wgt-mail { grid-template-columns: minmax(0, 1fr); height: auto; }
  .wgt-mail .mail-list { max-height: 360px; }
  .wgt-mail .mail-view { display: none; }
  .wgt-mail.is-reading .mail-list { display: none; }
  .wgt-mail.is-reading .mail-view { display: block; max-height: 60vh; }
  .mail-view .m-back { display: inline-flex; color: rgba(255, 255, 255, .7); }

  .catalog { margin-top: 28px; }
  .ptabs { gap: 20px; margin-bottom: 14px; }
  .ptab { font-size: 15px; }
  .ftools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }   /* без переноса: иначе ширину колонки задают чипсы */
  .fsearch { flex-basis: auto; margin-left: 0; order: -1; }
  .fchips { flex-wrap: nowrap; margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .fchips::-webkit-scrollbar { display: none; }
  .fbtn { height: 40px; font-size: 14px; }
  /* выпадашки фильтров — листом снизу экрана */
  .fpop { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); min-width: 0; width: auto; transform: translateY(16px); }
  .geo-pop { width: auto; }
  .geo-list { max-height: 45vh; }

  .ogrid, .pr-similar .ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pr-similar .offer:nth-child(n+5) { display: none; }
  .pr-similar .offer:nth-child(4) { display: flex; }
  .offer-head .cat-art { width: 28px; height: 28px; border-radius: 8px; }
  .offer-head b { font-size: 13px; }
  .offer-cover { border-radius: 14px; }
  .offer-price b { font-size: 16px; }
  .offer-price small { font-size: 12px; }
  .offer-title { font-size: 14px; }
  .offer-foot { font-size: 12px; }
  .offer-foot .stock { font-size: 12px; }
  /* узкие карточки: плашка не должна закрывать надпись на обложке — «нет в наличии» и так подписано
     под карточкой, а «автовыдача» сжимается до молнии */

  .cat-hero { gap: 16px; min-height: 0; padding: 20px; border-radius: 20px; }
  .cat-art.is-lg { width: 64px; height: 64px; border-radius: 18px; }
  .cat-hero h1 { font-size: 21px; }
  .cat-hero p { font-size: 13.5px; }
  .subtabs { gap: 18px; }

  .pr-top { margin-bottom: 12px; }
  .pr-cover { border-radius: 18px; }
  .pr-price b { font-size: 26px; }
  .pr-title { font-size: 17px; }
  .pr-desc { margin-top: 32px; }
  .pr-desc h2, .pr-similar h2 { font-size: 20px; }
  .pr-similar { margin-top: 36px; }
}

/* партнёрка: подсказка, что код создан автоматически из ника или почты */
.pt-code-auto { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.pt-code-auto .i { width: 14px; height: 14px; color: var(--accent-700); }
.pt-code-auto[hidden] { display: none; }
/* история партнёра: начисление и под ним сумма покупки */
.pt-amount { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.pt-amount small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* ------------------------- документы (#/legal/…, js/legal.js) ------------------------- */
.legal-doc { padding: 28px 32px; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.legal-doc section + section { margin-top: 22px; }
.legal-doc h2 { margin: 0 0 8px; color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 10px; padding-left: 20px; }
.legal-doc li { margin: 4px 0; }
.legal-doc li::marker { color: var(--faint); }
.legal-doc > h2 { margin-top: 24px; }
.legal-note { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.legal-rows { display: grid; gap: 2px; margin: 14px 0 6px; }
.legal-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.legal-row > span { color: var(--muted); font-size: 13.5px; }
.legal-row b { display: block; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.legal-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.legal-nav { gap: 2px; }
.legal-nav a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.legal-nav a:hover { background: var(--surface-2); color: var(--ink); }
.legal-nav a.is-active { background: var(--accent-50); color: var(--accent-700); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-legal a { color: var(--faint); text-decoration: none; }
.footer-legal a:hover { color: var(--ink-2); }
.m-legal, .auth-legal { margin-top: 10px; color: var(--faint); font-size: 12px; line-height: 1.5; }
.auth-legal { text-align: center; }
@media (max-width: 960px) {
  .legal-nav { order: -1; }
}
@media (max-width: 720px) {
  .legal-doc { padding: 20px 18px; font-size: 14px; }
  .legal-row { grid-template-columns: 1fr; gap: 2px; }
}