/* ============================================================
   AtlantWorld — тёмная тема с оранжевым акцентом
   Override-файл. Грузится последним, перекрывает pipui.
   НЕ трогает разметку .tpl и логику движка.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:wght@700;800;900&family=Permanent+Marker&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* точные токены из globals.css (тема .dark) */
  --aw-bg:        #141414;   /* background 0 0% 8% */
  --aw-bg-2:      #1f1f1f;   /* card 0 0% 12% */
  --aw-card:      #1f1f1f;   /* card */
  --aw-card-2:    #262626;   /* secondary / hover 0 0% 15% */
  --aw-border:    #333333;   /* border 0 0% 20% */
  --aw-text:      #fafafa;   /* foreground 0 0% 98% */
  --aw-muted:     #a6a6a6;   /* muted-foreground 0 0% 65% */
  --aw-orange:    #f97316;   /* primary 24 95% 53% */
  --aw-orange-2:  #fb923c;   /* светлее (hover/тень) */
  --aw-orange-dk: #ea580c;
  --aw-radius:    16px;
}

/* ===== БАЗА ===== */
html { background: var(--aw-bg); -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }   /* clip — не ломает position:sticky (в отличие от hidden) */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
/* основной шрифт Inter — перекрываем pipui `*{font-family:Roboto}` (без !important, чтобы НЕ ломать иконочный шрифт FontAwesome) */
* { font-family: 'Inter', system-ui, sans-serif; }
.btn, button, input, textarea, select, optgroup, .nav-link, .navbar-menu .nav-link { font-family: 'Inter', system-ui, sans-serif; }

body {
  background-color: var(--aw-bg) !important;
  color: var(--aw-text) !important;
  /* радиальные свечения — чуть теплее и заметнее, чтобы фон не был плоско-чёрным */
  background-image:
    radial-gradient(at 27% 37%, hsla(24,95%,40%,0.20) 0px, transparent 50%),
    radial-gradient(at 97% 21%, hsla(24,80%,34%,0.16) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(0,0%,20%,0.32) 0px, transparent 55%),
    radial-gradient(at 10% 29%, hsla(24,70%,28%,0.11) 0px, transparent 50%);
  background-attachment: fixed;
  font-family: 'Inter', system-ui, sans-serif;
}
/* блюр-фон (текстура заката за контентом) — чуть светлее/насыщеннее, чтобы дать глубину */
body::before {
  content: ""; position: fixed; inset: -20px; z-index: -1; pointer-events: none;
  background: url('/Themes/Default/img/hero-background.png') center / cover no-repeat; /* fallback для старых браузеров */
  background-image: image-set(url('/Themes/Default/img/hero-background.webp') type('image/webp'), url('/Themes/Default/img/hero-background.png') type('image/png'));
  filter: blur(8px) brightness(.32) saturate(1);
}

/* заголовки — Montserrat font-black (как font-display в исходнике) */
h1, h2, h3, h4, h5, h6,
.aw-hero__title, .static-page h4, .modal-header,
.item-id .title, .item-block .title, .aw-brand__name {
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  letter-spacing: -.01em;
}
/* моноширинный — JetBrains Mono (IP, цены) */
.aw-status__ip, code, .price, .item-block .price { font-family: 'JetBrains Mono', monospace !important; }

/* оранжевый скроллбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: var(--aw-orange); border-radius: 8px; border: 2px solid #141414; }
::-webkit-scrollbar-thumb:hover { background: var(--aw-orange-2); }
html { scrollbar-width: thin; scrollbar-color: var(--aw-orange) #141414; }

a { color: var(--aw-orange-2); }
a:hover { color: var(--aw-orange); }
/* pipui.theme.css красит ссылки розовым через a:not(.btn):hover (специфичность 0,2,1) —
   перебиваем равной специфичностью; atlantworld.css грузится после, поэтому выигрывает по порядку.
   Компонентные :hover-правила ниже по файлу (footer и т.п.) остаются сильнее и сохраняют свой цвет. */

/* Success-страница (page-success): кнопка «Вернуться в магазин» — это <a>, и глобальные
   a:hover / a:not(.btn):hover перекрашивали её текст в оранжевый при наведении → он сливался
   с оранжевым фоном кнопки (жалоба тестера). Держим текст белым. Специфичность 0,3,0 + !important —
   чтобы перебить pipui.theme (0,2,1) и порядок загрузки style.css. */
.pay-ok .pay-ok__btn:hover, .pay-ok .pay-ok__btn:focus { color: #fff !important; }
a:not(.btn):hover { color: var(--aw-orange); }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ===== КНОПКИ ===== */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  border: 1px solid var(--aw-border) !important;
  background-color: var(--aw-card-2) !important;   /* longhand — не сбрасывает background-image (логотипы оплаты) */
  color: var(--aw-text) !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.btn:hover { transform: translateY(-1px); background-color: #333333 !important; }
.btn-transparent { background: transparent !important; }

/* Главная "зелёная" кнопка движка -> делаем оранжевой */
.bg-light-green {
  background: var(--aw-orange) !important;
  border-color: var(--aw-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px -10px rgba(249,115,22,.7) !important;
}
.bg-light-green:hover {
  background: var(--aw-orange-2) !important;
  border-color: var(--aw-orange-2) !important;
}

/* Соц-кнопки оставляем фирменными, только сглаживаем */
.bg-vk, .bg-google, .bg-facebook, .bg-reddit, .bg-steam { color: #fff !important; border: none !important; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999; min-height: 80px;
  display: flex; align-items: center;   /* вертикально центрируем содержимое навбара */
  background: rgba(31,31,31,.65) !important;   /* как футер (31,31,31), но чуть темнее (выше непрозрачность) */
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(51,51,51,.5) !important;
}
.navbar > .container { width: 100%; }
/* отступ под фикс. хедер на НЕ-главных страницах (где .container — прямой потомок body) */
body > .container { padding-top: 100px; }
.aw-brand { display: flex; align-items: center; gap: 12px; }
.aw-brand__logo { height: 40px; width: auto; }
.aw-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.aw-brand__name { font-weight: 800; font-size: 18px; color: var(--aw-text); letter-spacing: .3px; }
.aw-brand__tag  { font-size: 11px; color: var(--aw-muted); }

.nav-link {
  color: var(--aw-text) !important;
  font-weight: 600 !important;
  border-radius: 8px;
  transition: color .2s ease;
}
.nav-link i { margin-right: 8px; color: inherit; transition: transform .2s ease; }
.nav-link:hover { color: var(--aw-orange) !important; background: transparent !important; }
.nav-link:hover i { transform: scale(1.1); }
.nav-link.active { color: var(--aw-orange) !important; }

.nav-submenu {
  background: var(--aw-card) !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.nav-submenu .nav-link { border-radius: 0; }

/* ===== HERO ===== */
.aw-hero {
  position: relative;
  min-height: 560px;
  background: var(--aw-bg) !important;
  border: 0 !important; border-radius: 0 !important;   /* никакой "коробки" */
  padding-top: calc(80px + clamp(6px, 1vw, 16px));   /* контент ниже фиксированного навбара */
  padding-bottom: clamp(14px, 2vw, 28px);
  overflow: hidden;
}
/* арт-фон (закат/дорога) — ярче, теплее, лёгкий блюр (inset:-14 чтобы блюр не давал прозрачных краёв) */
.aw-hero::before {
  content: ""; position: absolute; inset: -14px; z-index: 0;
  background: url('/Themes/Default/img/hero-background.png') center right / cover no-repeat; /* fallback для старых браузеров */
  background-image: image-set(url('/Themes/Default/img/hero-background.webp') type('image/webp'), url('/Themes/Default/img/hero-background.png') type('image/png'));
  filter: blur(1.5px) saturate(1.15) brightness(1.05);
  border-radius: 0 !important;
}
/* затемнение СЛЕВА-НАПРАВО: тёмный слева (текст), справа открывается арт + тёплое свечение */
.aw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 62% 42%, rgba(249,115,22,.24) 0%, transparent 46%),
    linear-gradient(90deg, #141414 0%, rgba(20,20,20,.94) 28%, rgba(20,20,20,.34) 52%, transparent 72%),
    linear-gradient(0deg,  #141414 0%, #141414 9%, rgba(20,20,20,.86) 24%, rgba(20,20,20,.45) 39%, transparent 54%),
    linear-gradient(180deg, rgba(20,20,20,.60) 0%, transparent 20%);
}

/* ЖЁСТКАЯ ФИКСАЦИЯ АРТА: зона привязана к правому краю центрированного контента (макс 1200) */
.aw-hero__art {
  position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; opacity: .98;
  right: max(0px, calc(50% - 700px));     /* правый край арта = ~правый край контента, не уезжает при зуме */
  width: min(820px, 64%);
}
.aw-hero__ferrari, .aw-hero__character {
  position: absolute; bottom: 0; width: auto; object-fit: contain;
  pointer-events: auto;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
/* персонаж — у правого края зоны, перед машиной (размер в % высоты + потолок в px) */
.aw-hero__character { right: 0; bottom: 0; height: 95%; max-height: 660px; z-index: 2;
  object-position: bottom right;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }
/* машина — крупнее и выше, персонаж напротив */
.aw-hero__ferrari { right: 20%; bottom: 5%; height: 88%; max-height: 610px; z-index: 1;
  object-position: bottom;
  filter: drop-shadow(0 0 60px rgba(251,146,60,.35)) drop-shadow(0 24px 32px rgba(0,0,0,.45)); }
/* при наведении на любую из фигур — обе слегка увеличиваются */
.aw-hero__art:hover .aw-hero__character { transform: scale(1.05) translateY(-6px); }
.aw-hero__art:hover .aw-hero__ferrari  { transform: scale(1.04); }

/* BUG 4: на узких/зумнутых экранах — прячем персонажа, но машину НЕ двигаем */
@media (max-width: 1100px) {
  .aw-hero__character { display: none; }
  .aw-hero__content { max-width: 100%; }
}
@media (max-width: 600px) { .aw-hero__ferrari { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .aw-hero__character, .aw-hero__ferrari { transition: none; }
  .aw-hero__art:hover .aw-hero__character,
  .aw-hero__art:hover .aw-hero__ferrari { transform: none; }
}

.aw-hero__content { position: relative; max-width: 700px; z-index: 2; }
.aw-hero__title {
  font-size: clamp(2.6rem, 6.3vw, 4.9rem);
  line-height: 1.08; font-weight: 900 !important;
  color: var(--aw-text); text-wrap: balance; margin-bottom: 10px;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--aw-text);   /* жирнее штрих */
}
.aw-hero__title span { font-weight: 900 !important; }
/* у граффити-надписи штрих не утолщаем (оранжевый маркер остаётся как есть) */
.aw-hero__title .aw-brush { -webkit-text-stroke: 0 !important; }
.aw-hero__title span { display: block; }
/* граффити-надпись RolePlay — Permanent Marker + плавающая анимация */
.aw-brush {
  font-family: 'Permanent Marker', cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--aw-orange) !important;
  display: inline-block;
  font-size: 1.5em;                 /* крупнее */
  margin: 4px 0;
  transform: rotate(-3deg);
  animation: graffiti-float 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 22px rgba(249,115,22,.65)) drop-shadow(0 2px 6px rgba(249,115,22,.4));
}
@keyframes graffiti-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-11px); }   /* заметнее плавание */
}
/* reduce-заглушка для .aw-brush убрана — анимация нужна всегда */
.aw-hero__sub {
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  line-height: 1.6; color: var(--aw-muted); max-width: 580px; margin-bottom: 16px;
}

.aw-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.aw-btn--primary {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: 12px;
  font-weight: 800; font-size: 1.05rem;
  background: var(--aw-orange); color: #ffffff;
  box-shadow: 0 12px 30px -10px rgba(249,115,22,.6);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.aw-btn--primary:hover { transform: scale(1.03); background: var(--aw-orange-2); color: #ffffff; }

/* Статус сервера */
.aw-status {
  display: flex; align-items: center; gap: 14px;
  background: var(--aw-card); border: 1px solid var(--aw-border);
  border-radius: 12px; padding: 10px 16px;
  cursor: pointer;   /* весь блок кликабельный — копирует IP */
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.aw-status:hover { border-color: var(--aw-orange); background: var(--aw-card-2);
  box-shadow: 0 6px 20px -10px rgba(249,115,22,.4); }
.aw-status:hover .aw-status__copy { background: var(--aw-orange); color: #fff; border-color: var(--aw-orange); }
.aw-status__info { display: flex; flex-direction: column; gap: 2px; }
.aw-status__online { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--aw-text); }
.aw-status__dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.aw-status__count { color: var(--aw-orange); }
.aw-status__ip { font-size: 12px; color: var(--aw-muted); font-family: 'JetBrains Mono', monospace; }
.aw-status__copy {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--aw-border);
  background: var(--aw-card-2); color: var(--aw-orange); transition: background .2s, color .2s, border-color .2s;
}
/* состояние «скопировано» — зелёная галочка вместо иконки */
.aw-status.is-copied .aw-status__copy { background: rgba(52,211,153,.15) !important; color: #34d399 !important; border-color: rgba(52,211,153,.5) !important; }

/* ===== СТРАНИЦА ДОНАТА ===== */
.static-page h4 { color: var(--aw-text) !important; font-weight: 800; font-size: clamp(1.4rem,3vw,2rem); }

/* ===== Кнопки-категории магазина — аккуратный дизайн (перебивает style.css) ===== */
.donate .tab-links,
.main > .donate .tabs > .tab-links {
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  justify-content: center !important; align-items: center !important;
  margin: 0 auto 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
.donate .tab-links > li,
.main > .donate .tabs > .tab-links > li { padding: 0 !important; margin: 0 !important; list-style: none !important; }

.donate .tab-link,
.main > .donate .tabs > .tab-links > li .tab-link {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 0 !important; min-height: 0 !important; height: 46px !important; padding: 0 24px !important;
  border-radius: 12px !important;
  background: var(--aw-card-2) !important; color: var(--aw-muted) !important;
  border: 1px solid var(--aw-border) !important;
  font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .01em !important;
  white-space: nowrap !important; cursor: pointer !important; box-shadow: none !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.donate .tab-link:hover,
.main > .donate .tabs > .tab-links > li .tab-link:hover {
  color: var(--aw-text) !important; border-color: rgba(249,115,22,.55) !important;
  background: rgba(249,115,22,.08) !important; transform: translateY(-2px) !important;
}
.donate .tab-link.active,
.main > .donate .tabs > .tab-links > li .tab-link.active {
  background: var(--aw-orange) !important; color: #fff !important; border-color: var(--aw-orange) !important;
  box-shadow: 0 10px 24px -10px rgba(249,115,22,.65) !important; transform: none !important;
}

/* Сетка товаров */
.item-list {
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
.item-id {
  background: var(--aw-card) !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-radius) !important;
  padding: 18px !important; cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.item-id:hover {
  transform: translateY(-6px);
  border-color: var(--aw-orange) !important;
  box-shadow: 0 16px 40px -18px rgba(249,115,22,.5);
  background: var(--aw-card-2) !important;
}
/* новая структура карточки: картинка лежит в .image-wrap (не прямой потомок),
   style.css её не размеряет → задаём размеры сами, иначе картинки не видно */
.item-id .image-wrap {
  display: block !important; width: min(150px, 62%) !important; aspect-ratio: 1 / 1 !important;
  margin: 6px auto 12px !important;
}
.item-id .image-wrap > .image {
  width: 100% !important; height: 100% !important; min-height: 0 !important;
  border-radius: 12px !important; margin: 0 !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  background-color: var(--aw-card-2) !important;
}
.item-id .title { color: var(--aw-text) !important; font-weight: 700; font-size: 1.05rem; }

/* ===== МОДАЛКИ ===== */
.modal .modal-content {
  background: var(--aw-card) !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-radius) !important;
  color: var(--aw-text) !important;
}
.modal-header { color: var(--aw-text) !important; font-weight: 800; border-bottom: 1px solid var(--aw-border) !important; }
.modal-footer { border-top: 1px solid var(--aw-border) !important; }
.input-block label { color: var(--aw-muted) !important; font-weight: 600; }
.input-block input, input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  background: var(--aw-bg-2) !important;
  border: 1px solid var(--aw-border) !important;
  color: var(--aw-text) !important;
  border-radius: 10px !important;
}
.input-block input:focus, input:focus {
  border-color: var(--aw-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.18) !important;
}
.item-block .price { color: var(--aw-orange) !important; font-weight: 800; font-size: 1.4rem; }

/* ===== PAGINATION ===== */
.pagination li a {
  background: var(--aw-card) !important; color: var(--aw-muted) !important;
  border: 1px solid var(--aw-border) !important; border-radius: 8px !important;
}
.pagination li a:hover { color: var(--aw-text) !important; border-color: var(--aw-orange) !important; }
.pagination li.active a { background: var(--aw-orange) !important; color: #ffffff !important; border-color: var(--aw-orange) !important; }

/* ===== FOOTER ===== */
.footer {
  background: var(--aw-bg-2) !important;
  border-top: 1px solid var(--aw-border) !important;
  color: var(--aw-muted) !important;
  padding-block: 32px;
}
.copyright-text { color: var(--aw-muted) !important; line-height: 1.6; }
.static-pages-links a { color: var(--aw-orange-2) !important; }
.block-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scroll-top {
  background: var(--aw-orange) !important; color: #ffffff !important;
  border-radius: 12px !important; box-shadow: 0 8px 24px -10px rgba(249,115,22,.6) !important;
}

/* ===== FIX: pipui datepicker конфликтует с сайтовыми классами .footer/.block-* =====
   Блок выбора времени в datepicker размечен как <div class="footer">, а .block-left/.block-right
   тоже общие классы. Сбрасываем их влияние ТОЛЬКО внутри .datepicker, чтобы не трогать подвал сайта. */
.datepicker .footer {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: inherit !important;
  padding-block: 0 !important;
}
.datepicker .block-left,
.datepicker .block-right {
  display: block;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== Datepicker — тёмно-оранжевая тема (pipui по умолчанию светлый) ===== */
.datepicker { background-color: rgba(0,0,0,.62) !important; }
.datepicker > .datepicker-wrapper > .datepicker-block {
  width: 340px !important;
  background: linear-gradient(180deg, #1c1c1c, #141414) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.75) !important;
  padding: 16px !important;
}
/* поле года + все селекты (месяц, часы, минуты, секунды) */
.datepicker .datepicker-year,
.datepicker .datepicker-month,
.datepicker .datepicker-hour,
.datepicker .datepicker-minute,
.datepicker .datepicker-second {
  width: 100% !important;
  height: 42px !important;
  background: #0f0f0f !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px !important;
  color: #fafafa !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 0 12px !important;
  text-align: center !important;
  cursor: pointer;
}
.datepicker .datepicker-year { text-align: center !important; cursor: text; }
.datepicker .datepicker-year:focus,
.datepicker .datepicker-month:focus,
.datepicker .datepicker-hour:focus,
.datepicker .datepicker-minute:focus,
.datepicker .datepicker-second:focus {
  border-color: var(--aw-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important;
  outline: none !important;
}
.datepicker select option { background: #1c1c1c !important; color: #fafafa !important; }

/* сетка дней */
.datepicker-block > .block-date > .middle > .daylist { grid-gap: 6px !important; padding: 16px 0 !important; }
.datepicker .day-id {
  height: 38px !important; line-height: 38px !important;
  border-radius: 10px !important;
  color: #d6d6d6 !important; font-weight: 600 !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease !important;
}
.datepicker .day-id:hover {
  background: rgba(249,115,22,.16) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.datepicker .day-id.selected {
  background: var(--aw-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* блок времени — отделяем тонкой линией */
.datepicker .block-date > .footer {
  grid-gap: 10px !important;
  margin-top: 4px !important;
  padding-top: 14px !important;
  border-top: 1px solid #262626 !important;
}

/* ===== ALERT ===== */
.alert .alert-content, .alert-id { background: var(--aw-card) !important; color: var(--aw-text) !important; border: 1px solid var(--aw-border) !important; border-radius: 12px !important; }

img { max-width: 100%; height: auto; }

/* ============================================================
   ДОВОДКА ПО ТЗ AtlantWorld (v0): фон, анимации, модалки,
   кнопка наверх, адаптив, z-index. Поверх основного override.
   ============================================================ */

/* фон body — без полноэкранной картинки: только тёмный цвет + радиальные свечения (как в исходнике) */

/* online-точка — мягкая пульсация */
@keyframes aw-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(52,211,153,.05); }
}
.aw-status__dot { animation: aw-pulse 2s infinite; }

/* мягкое появление hero-контента при загрузке */
@keyframes aw-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.aw-hero__content > * { animation: aw-rise .7s cubic-bezier(.23,1,.32,1) both; }
.aw-hero__title   { animation-delay: .05s; }
.aw-hero__sub     { animation-delay: .18s; }
.aw-hero__actions { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .aw-hero__content { animation: none; }
  .aw-status__dot { animation: none; }
}

/* ===== МОДАЛКИ: сплошной тёмный фон вместо белого + z-index ===== */
.modal > .wrapper > .modal-content,
.modal .modal-content {
  background: #1f1f1f !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: 16px !important;
  color: var(--aw-text) !important;
}
.modal .modal-body input:not([type="checkbox"]):not([type="radio"]),
.modal .input-prepend > input { background: #141414 !important; }
.modal { z-index: 99999 !important; }
.modal-backdrop, .pipui-backdrop, .backdrop { z-index: 99998 !important; }
.alert, .alert-id { z-index: 9999999 !important; }

/* ===== КНОПКА «НАВЕРХ» ===== */
.scroll-top {
  position: fixed; right: 20px; bottom: 26px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
}

/* ===== НАВБАР: меню как на эталоне ===== */
/* убираем PNG-иконки pipui (дублируют FontAwesome) */
body > .navbar .navbar-wrapper .nav-link::before { content: none !important; background: none !important; }
.navbar .navbar-wrapper .nav-link[href="/?page-donate/"],
.navbar .navbar-wrapper .nav-link[href="/?page-buy/"],
.navbar .navbar-wrapper .nav-link[href="/?page-howtobuy/"] { padding-left: 14px !important; }

/* пункты меню: иконка + текст в ряд */
.navbar-menu .nav-link { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 10px !important; text-transform: none; font-size: 16px; font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 6px; }

/* кнопка «Начать играть» */
.aw-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; margin-left: 12px;
  border-radius: 10px; font-weight: 700; font-size: 14px; white-space: nowrap;
  background: var(--aw-orange); color: #ffffff !important; text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(249,115,22,.6);
  transition: transform .2s ease, background .2s ease;
}
.aw-nav-cta i { color: #ffffff; margin: 0; }
.aw-nav-cta:hover { transform: translateY(-1px); background: var(--aw-orange-2); color: #ffffff !important; }

/* ===== АДАПТИВ ===== */
@media (max-width: 768px) {
  .aw-brand__text { display: none; }
  .aw-nav-cta { display: none; }
}
@media (max-width: 479px) {
  .item-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  body > footer > .container { text-align: center; }
  body > footer > .container > .block-right { justify-content: center; }
}
/* ============================================================
   БАГФИКСЫ v0dev (адаптировано под СЕРУЮ палитру #141414, НЕ синюю)
   ============================================================ */

/* BUG 3: навбар — все пункты + кнопка строго в один ряд, по центру */
.navbar .navbar-wrapper { align-items: center; }
.nav-right { display: flex !important; align-items: center; gap: 8px; justify-self: end; height: auto !important; }
.navbar-menu { display: flex !important; align-items: center; gap: 2px; flex-wrap: nowrap; height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none; }
.navbar-menu > .nav-li { display: flex !important; align-items: center; list-style: none; float: none !important; position: static !important; }
.aw-nav-cta { align-self: center; position: static !important; }

/* BUG 6: секция магазина была синей (#0b1220 из style.css) → тёмная тема */
.main > .donate { background: transparent !important; background-color: transparent !important; }
.main > .donate::after, .main > .donate:after,
.main > .donate .donate-products::after, .main > .donate .donate-products:after { display: none !important; }
.main > .donate .donate-sidebar { background: transparent !important; position: sticky !important; top: 100px !important; align-self: start !important; }

/* боковая панель покупки + модалки оформления — тёмные, без синего */
.donate-panel[data-id="donate"] > .wrapper > .modal-content,
.modal[data-id="checkout"] > .wrapper > .modal-content,
.modal[data-id="method"] > .wrapper > .modal-content,
.modal[data-id="number"] > .wrapper > .modal-content,
#checkoutform > .wrapper > .modal-content,
#methodform > .wrapper > .modal-content,
#numberform > .wrapper > .modal-content {
  background: var(--aw-card) !important;
  border: 1px solid var(--aw-border) !important;
  color: var(--aw-text) !important;
}
.donate-panel[data-id="donate"] .donate-description {
  border: 1px solid rgba(249,115,22,.20) !important; background: rgba(249,115,22,.05) !important; color: var(--aw-text) !important;
}
.donate-panel[data-id="donate"] .donate-current-price,
.donate-panel[data-id="donate"] .block-bonus {
  border: 1px solid var(--aw-border) !important; background: var(--aw-card-2) !important; color: var(--aw-muted) !important;
}
.donate-panel[data-id="donate"] .block-bonus .bonus,
.donate-panel[data-id="donate"] .block-bonus .sum,
.donate-panel[data-id="donate"] .donate-current-price strong { color: var(--aw-orange) !important; }

/* кнопки покупки/чекаут/способы — оранжевые (не зелёные/синие) */
.donate-panel[data-id="donate"] .modal-footer .btn,
#checkoutform .checkout-footer .btn:not([data-modal-close]),
#numberform .easydonate-buy,
#donate-checkout-trigger { background: var(--aw-orange) !important; color: #ffffff !important; border: none !important; }
#checkoutform .checkout-footer .btn:not([data-modal-close]):hover,
#donate-checkout-trigger:hover { background: var(--aw-orange-2) !important; }

/* инпуты/фокус/способы оплаты — тёмный фон, оранжевый акцент */
#checkoutform .input-prepend,
.donate-panel[data-id="donate"] input:not([type="checkbox"]) {
  background: #141414 !important; border-color: var(--aw-border) !important; color: var(--aw-text) !important;
}
#checkoutform .input-prepend:focus-within { border-color: var(--aw-orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.18) !important; }
#methodform .methods > li > .btn { background-color: #141414 !important; border: 1px solid var(--aw-border) !important; }
#methodform .methods > li > .btn:hover,
#methodform .methods > li > .btn.active { border-color: var(--aw-orange) !important; }
.main input[type="range"] { accent-color: var(--aw-orange) !important; }

/* ===== НАВБАР: бренд слева — меню по центру — кнопка справа ===== */
.navbar > .container { max-width: 1560px !important; padding-inline: clamp(14px, 2.2vw, 34px) !important; }
.navbar .navbar-wrapper { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 0 !important; padding-bottom: 0 !important; height: 100%; }
.nav-left  { justify-self: start; }            /* бренд — слева */
.nav-center { display: flex !important; justify-content: center; }   /* меню — по центру */
.nav-right { justify-self: end; margin-left: 0 !important; display: flex !important; align-items: center; }  /* кнопка — справа */
.navbar-menu { display: flex !important; align-items: center; gap: 0 !important; flex-wrap: nowrap; margin: 0 !important; padding: 0 !important; list-style: none; }
.navbar-menu .nav-link { white-space: nowrap; font-size: 16px; padding: 8px 6px !important; }
.navbar-menu .nav-link i { margin-right: 5px !important; }
.aw-nav-cta { white-space: nowrap; flex-shrink: 0; margin-left: 0; }

/* бренд: AtlantWorld крупно, тег мельче снизу */
/* убираем красное свечение pipui (text-shadow на .nav-brand) */
.navbar .navbar-wrapper .nav-brand,
.aw-brand, .aw-brand *, .aw-brand__name, .aw-brand__tag { text-shadow: none !important; }
.aw-brand { gap: 14px; transition: transform .25s ease; transform-origin: left center; }
.aw-brand:hover { transform: scale(1.05); }   /* лёгкое увеличение лого+текста при наведении */
.aw-brand__logo { height: 58px !important; transition: transform .25s ease; }
/* убираем pipui-высоту 70px у бренда, чтобы он центрировался в навбаре */
.navbar .navbar-wrapper .nav-brand { height: auto !important; line-height: 1.1 !important; }
.aw-brand__text { line-height: 1.05; }
.aw-brand__name { font-size: 25px !important; font-weight: 800 !important; letter-spacing: .3px; line-height: 1.05; }
.aw-brand__tag  { font-size: 10.5px !important; letter-spacing: .4px; }

/* ===== ФУТЕР — тот же цвет, что хедер (#1f1f1f стекло) ===== */
html body footer.footer,
html body > footer.footer,
html body footer.footer.bg-cyan,
html body .main > .mainslide.donate > footer.footer {
  background: rgba(31,31,31,.90) !important;
  background-color: rgba(31,31,31,.90) !important;
  background-image: none !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--aw-border) !important;
}

/* ===== РОВНЫЙ ХЕДЕР: центрирование всех зон + прячем бургер на десктопе ===== */
.navbar { align-items: center !important; }
/* меню — обычный регистр (перебиваем pipui uppercase) */
.navbar .navbar-menu .nav-link { text-transform: none !important; }
.navbar .navbar-wrapper { align-items: center !important; min-height: 0 !important; }
.nav-left   { display: flex !important; align-items: center !important; justify-self: start; }
.nav-center { display: flex !important; align-items: center !important; justify-content: center; }
.nav-right  { display: flex !important; align-items: center !important; justify-self: end; }
.aw-brand, .navbar-menu { align-items: center !important; }
.navbar-menu .nav-link { align-items: center !important; }
@media (min-width: 1025px) { .navbar .nav-mobile { display: none !important; } }

/* кнопка «наверх» убрана */
.scroll-top, .to-top, .back-to-top, #scrollTop, [data-scroll-top] { display: none !important; }

/* ===== Соц-ссылки (живой класс — используется в футере) ===== */
.aw-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--aw-card-2); border: 1px solid var(--aw-border);
  color: var(--aw-muted); font-size: 18px; text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.aw-social-link:hover { transform: scale(1.1); }
.aw-social-link[data-net="discord"]:hover  { color: #5865F2; border-color: #5865F2; }
.aw-social-link[data-net="telegram"]:hover  { color: #29a9ea; border-color: #29a9ea; }
.aw-social-link[data-net="youtube"]:hover   { color: #ff0000; border-color: #ff0000; }
.aw-social-link[data-net="tiktok"]:hover     { color: #fafafa; border-color: #fafafa; }

/* ===== «Купить донат»: текст и иконка всегда белые (в т.ч. при наведении) ===== */
.aw-btn--primary, .aw-btn--primary:hover, .aw-btn--primary:focus,
.aw-btn--primary:active, .aw-btn--primary:link, .aw-btn--primary:visited { color: #ffffff !important; }
.aw-btn--primary i { color: #ffffff !important; }

/* ============================================================
   ДОВОДКА ПО ЭТАЛОНУ (hero/хедер)
   ============================================================ */
/* бренд: ATLANTWORLD капсом, тег мелкий "Roleplay" */
.aw-brand__name { text-transform: uppercase !important; letter-spacing: .5px !important; font-weight: 900 !important; font-size: 22px !important; }
.aw-brand__tag  { text-transform: none !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .3px !important; color: var(--aw-muted) !important; }

/* убрать переключатель темы, если он где-то есть */
.theme-toggle, .theme-switch, [data-theme-toggle], .navbar .sun, .navbar .moon { display: none !important; }

/* соцсети — плоские иконки, без круглых подложек */
.aw-social-link {
  width: auto !important; height: auto !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  color: var(--aw-muted); font-size: 22px;
  transition: color .25s ease, transform .25s ease;
}
.aw-social-link:hover { transform: translateY(-2px); }
.aw-social-links { gap: 18px; }

/* hero-контент всегда поверх арта */
.aw-hero__content { position: relative; z-index: 3; }

/* БЕЛЫЙ текст на кнопках при наведении (как у «Купить донат») */
.btn:hover, .btn:hover i,
.aw-nav-cta:hover, .aw-nav-cta:hover i,
.bg-light-green:hover,
.donate-panel[data-id="donate"] .modal-footer .btn:hover,
#checkoutform .checkout-footer .btn:not([data-modal-close]):hover,
#donate-checkout-trigger:hover,
.aw-partner-pill:hover, .aw-partner-pill:hover i { color: #ffffff !important; }

/* ===== ПРАВКИ ПО ПРОСЬБЕ: бренд / соцсети / CTA ===== */
/* AtlantWorld — обычный регистр, не широко, без тега Roleplay */
.aw-brand__name { text-transform: none !important; letter-spacing: 0 !important; font-size: 22px !important; font-weight: 800 !important; }
.aw-brand__text { line-height: 1; justify-content: center; }

/* соцсети — обратно круглые «фигурки» (как на скрине) */
.aw-social-link {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 44px !important; height: 44px !important; padding: 0 !important;
  background: var(--aw-card-2) !important; border: 1px solid var(--aw-border) !important;
  border-radius: 12px !important;
  color: var(--aw-muted); font-size: 18px;
  transition: transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.aw-social-link:hover { transform: translateY(-3px); }
.aw-social-links { gap: 12px !important; }

/* кнопка «Начать играть» — ТЁМНАЯ с оранжевым акцентом (премиально, но заметно).
   Корзина остаётся единственным «залитым» оранжем — перебора оранжевого нет. */
.aw-nav-cta {
  height: 46px !important; padding: 0 20px !important; border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  background: linear-gradient(180deg, #1f1f1f, #161616) !important;
  border: 1px solid rgba(249,115,22,.55) !important;
  color: #fafafa !important; font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease, background .2s ease !important;
}
/* play-иконка оранжевая всегда (заливка маски через background-color — белый color на hover её не трогает) */
.aw-nav-cta i, .aw-nav-cta .aw-ico { color: var(--aw-orange) !important; background-color: var(--aw-orange) !important; }
.aw-nav-cta:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #262626, #1a1a1a) !important;
  border-color: var(--aw-orange) !important;
  box-shadow: 0 10px 26px -12px rgba(249,115,22,.6), 0 0 0 1px rgba(249,115,22,.3) !important;
}

/* hero-текст чуть левее */
.aw-hero__content { margin-left: -34px; }
@media (max-width: 768px) { .aw-hero__content { margin-left: 0; } }

/* ============================================================
   ИКОНКИ LUCIDE (CSS-маска — красятся currentColor, hover→оранжевый)
   ============================================================ */
.aw-ico {
  display: inline-block; width: 1.25em; height: 1.25em; margin: 0;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -0.18em; flex-shrink: 0;
}
.aw-ico--play-circle   { -webkit-mask-image:url(../img/icons/play-circle.svg);   mask-image:url(../img/icons/play-circle.svg); }
.aw-ico--shopping-bag  { -webkit-mask-image:url(../img/icons/shopping-bag.svg);  mask-image:url(../img/icons/shopping-bag.svg); }
.aw-ico--coins         { -webkit-mask-image:url(../img/icons/coins.svg);         mask-image:url(../img/icons/coins.svg); }
.aw-ico--pencil        { -webkit-mask-image:url(../img/icons/pencil.svg);        mask-image:url(../img/icons/pencil.svg); }
.aw-ico--clock         { -webkit-mask-image:url(../img/icons/clock.svg);         mask-image:url(../img/icons/clock.svg); }
.aw-ico--handshake     { -webkit-mask-image:url(../img/icons/handshake.svg);     mask-image:url(../img/icons/handshake.svg); }
.aw-ico--book-open     { -webkit-mask-image:url(../img/icons/book-open.svg);     mask-image:url(../img/icons/book-open.svg); }
.aw-ico--house         { -webkit-mask-image:url(../img/icons/house.svg);         mask-image:url(../img/icons/house.svg); }
.aw-ico--arrow-up-narrow-wide { -webkit-mask-image:url(../img/icons/arrow-up-narrow-wide.svg); mask-image:url(../img/icons/arrow-up-narrow-wide.svg); }
.aw-ico--chevron-down  { -webkit-mask-image:url(../img/icons/chevron-down.svg);  mask-image:url(../img/icons/chevron-down.svg); }
.aw-ico--shopping-cart { -webkit-mask-image:url(../img/icons/shopping-cart.svg); mask-image:url(../img/icons/shopping-cart.svg); }
.aw-ico--menu          { -webkit-mask-image:url(../img/icons/menu.svg);          mask-image:url(../img/icons/menu.svg); }
.aw-ico--copy          { -webkit-mask-image:url(../img/icons/copy.svg);          mask-image:url(../img/icons/copy.svg); }
.aw-ico--video         { -webkit-mask-image:url(../img/icons/video.svg);         mask-image:url(../img/icons/video.svg); }
.aw-ico--arrow-right   { -webkit-mask-image:url(../img/icons/arrow-right.svg);   mask-image:url(../img/icons/arrow-right.svg); }
.aw-ico--crown         { -webkit-mask-image:url(../img/icons/crown.svg);         mask-image:url(../img/icons/crown.svg); }
.aw-ico--gem           { -webkit-mask-image:url(../img/icons/gem.svg);           mask-image:url(../img/icons/gem.svg); }
.aw-ico--gift          { -webkit-mask-image:url(../img/icons/gift.svg);          mask-image:url(../img/icons/gift.svg); }
.aw-ico--sparkles      { -webkit-mask-image:url(../img/icons/sparkles.svg);      mask-image:url(../img/icons/sparkles.svg); }
.aw-ico--package       { -webkit-mask-image:url(../img/icons/package.svg);       mask-image:url(../img/icons/package.svg); }
.aw-ico--zap           { -webkit-mask-image:url(../img/icons/zap.svg);           mask-image:url(../img/icons/zap.svg); }
.aw-ico--shield        { -webkit-mask-image:url(../img/icons/shield.svg);        mask-image:url(../img/icons/shield.svg); }
.aw-ico--star          { -webkit-mask-image:url(../img/icons/star.svg);          mask-image:url(../img/icons/star.svg); }
.aw-ico--car           { -webkit-mask-image:url(../img/icons/car.svg);           mask-image:url(../img/icons/car.svg); }
.aw-ico--swords        { -webkit-mask-image:url(../img/icons/swords.svg);        mask-image:url(../img/icons/swords.svg); }
.aw-ico--layers        { -webkit-mask-image:url(../img/icons/layers.svg);        mask-image:url(../img/icons/layers.svg); }
.aw-ico--flame         { -webkit-mask-image:url(../img/icons/flame.svg);         mask-image:url(../img/icons/flame.svg); }
/* доп. иконки для бейджей товаров (lucide-static 1.20.0) */
.aw-ico--percent       { -webkit-mask-image:url(../img/icons/percent.svg);       mask-image:url(../img/icons/percent.svg); }
.aw-ico--tag           { -webkit-mask-image:url(../img/icons/tag.svg);           mask-image:url(../img/icons/tag.svg); }
.aw-ico--ticket        { -webkit-mask-image:url(../img/icons/ticket.svg);        mask-image:url(../img/icons/ticket.svg); }
.aw-ico--rocket        { -webkit-mask-image:url(../img/icons/rocket.svg);        mask-image:url(../img/icons/rocket.svg); }
.aw-ico--heart         { -webkit-mask-image:url(../img/icons/heart.svg);         mask-image:url(../img/icons/heart.svg); }
.aw-ico--thumbs-up     { -webkit-mask-image:url(../img/icons/thumbs-up.svg);     mask-image:url(../img/icons/thumbs-up.svg); }
.aw-ico--award         { -webkit-mask-image:url(../img/icons/award.svg);         mask-image:url(../img/icons/award.svg); }
.aw-ico--medal         { -webkit-mask-image:url(../img/icons/medal.svg);         mask-image:url(../img/icons/medal.svg); }
.aw-ico--trophy        { -webkit-mask-image:url(../img/icons/trophy.svg);        mask-image:url(../img/icons/trophy.svg); }
.aw-ico--badge-check   { -webkit-mask-image:url(../img/icons/badge-check.svg);   mask-image:url(../img/icons/badge-check.svg); }
.aw-ico--bell          { -webkit-mask-image:url(../img/icons/bell.svg);          mask-image:url(../img/icons/bell.svg); }
.aw-ico--target        { -webkit-mask-image:url(../img/icons/target.svg);        mask-image:url(../img/icons/target.svg); }
.aw-ico--infinity      { -webkit-mask-image:url(../img/icons/infinity.svg);      mask-image:url(../img/icons/infinity.svg); }
.aw-ico--snowflake     { -webkit-mask-image:url(../img/icons/snowflake.svg);     mask-image:url(../img/icons/snowflake.svg); }
.aw-ico--party-popper  { -webkit-mask-image:url(../img/icons/party-popper.svg);  mask-image:url(../img/icons/party-popper.svg); }
.aw-ico--hand-coins    { -webkit-mask-image:url(../img/icons/hand-coins.svg);    mask-image:url(../img/icons/hand-coins.svg); }
.aw-ico--piggy-bank    { -webkit-mask-image:url(../img/icons/piggy-bank.svg);    mask-image:url(../img/icons/piggy-bank.svg); }
.aw-ico--wand-sparkles { -webkit-mask-image:url(../img/icons/wand-sparkles.svg); mask-image:url(../img/icons/wand-sparkles.svg); }
.aw-ico--timer         { -webkit-mask-image:url(../img/icons/timer.svg);         mask-image:url(../img/icons/timer.svg); }
.aw-ico--flame-kindling{ -webkit-mask-image:url(../img/icons/flame-kindling.svg);mask-image:url(../img/icons/flame-kindling.svg); }
.aw-ico--coins         { -webkit-mask-image:url(../img/icons/coins.svg);         mask-image:url(../img/icons/coins.svg); }
.aw-ico--grid          { -webkit-mask-image:url(../img/icons/grid.svg);          mask-image:url(../img/icons/grid.svg); }
.aw-ico--x             { -webkit-mask-image:url(../img/icons/x.svg);             mask-image:url(../img/icons/x.svg); }
.aw-ico--search        { -webkit-mask-image:url(../img/icons/search.svg);      mask-image:url(../img/icons/search.svg); }
.aw-ico--chevron-left  { -webkit-mask-image:url(../img/icons/chevron-left.svg);  mask-image:url(../img/icons/chevron-left.svg); }
.aw-ico--alert-triangle{ -webkit-mask-image:url(../img/icons/alert-triangle.svg);mask-image:url(../img/icons/alert-triangle.svg); }
.aw-ico--windows       { -webkit-mask-image:url(../img/icons/windows.svg);       mask-image:url(../img/icons/windows.svg); }
.aw-ico--apple         { -webkit-mask-image:url(../img/icons/apple.svg);         mask-image:url(../img/icons/apple.svg); }
.aw-ico--linux         { -webkit-mask-image:url(../img/icons/linux.svg);         mask-image:url(../img/icons/linux.svg); }
.aw-ico--credit-card   { -webkit-mask-image:url(../img/icons/credit-card.svg);   mask-image:url(../img/icons/credit-card.svg); }
.aw-ico--chevron-right { -webkit-mask-image:url(../img/icons/chevron-right.svg); mask-image:url(../img/icons/chevron-right.svg); }
/* копирование IP: copy → зелёная галочка copy-check при .is-copied */
.aw-status.is-copied .aw-status__copy .aw-ico--copy { -webkit-mask-image:url(../img/icons/copy-check.svg); mask-image:url(../img/icons/copy-check.svg); }

/* размеры и сброс лишних отступов по контекстам (расстояние даёт flex-gap) */
.navbar-menu .nav-link .aw-ico { width: 20px; height: 20px; margin-right: 0 !important; }
.aw-nav-cta .aw-ico, .aw-btn--primary .aw-ico { width: 21px; height: 21px; margin-right: 0 !important; }
.aw-status__copy .aw-ico { width: 22px; height: 22px; }
.aw-partner-pill .aw-ico { width: 16px; height: 16px; }
.nav-mobile .aw-ico { width: 24px; height: 24px; }

/* ============================================================
   СЕКЦИЯ «КАК НАЧАТЬ ИГРАТЬ?» (#how-to-start)
   ============================================================ */
.aw-howto { position: relative; z-index: 1; background: transparent; padding: clamp(22px, 3.4vw, 44px) 0 clamp(48px, 7vw, 88px); scroll-margin-top: 100px; /* чтобы при скролле к секции она не пряталась под липкую шапку */ }
.aw-howto__head { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 5vw, 54px); }
.aw-howto__title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.02em; color: var(--aw-text); margin: 0; }
.aw-howto__title .aw-accent { color: var(--aw-orange); }
.aw-howto__sub { margin: 14px auto 0; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--aw-muted); }

.aw-howto__grid { display: grid; gap: 28px; grid-template-columns: 1fr; max-width: 1040px; margin: 0 auto; }
@media (min-width: 860px) { .aw-howto__grid { grid-template-columns: 1fr 1fr; } }

.aw-howto__card { border: 2px solid var(--aw-border); border-radius: 24px; background: rgba(31,31,31,.5); backdrop-filter: blur(6px); padding: clamp(22px, 3vw, 34px); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; }
.aw-howto__card:hover { border-color: rgba(249,115,22,.5); transform: translateY(-6px); box-shadow: 0 18px 50px -22px rgba(249,115,22,.4); }

.aw-howto__card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.aw-howto__icon { width: 60px; height: 60px; flex-shrink: 0; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(249,115,22,.1); border: 2px solid rgba(249,115,22,.2); color: var(--aw-orange); font-size: 24px; transition: transform .3s ease; }
.aw-howto__card:hover .aw-howto__icon { transform: scale(1.1); }
.aw-howto__variant { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--aw-text); }
.aw-howto__variant-sub { font-size: 13px; color: var(--aw-muted); }

.aw-howto__card-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: var(--aw-orange); margin: 0 0 12px; }
.aw-howto__text { color: var(--aw-muted); line-height: 1.6; margin: 0 0 20px; }

.aw-howto__list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aw-howto__list li { display: flex; align-items: center; gap: 10px; color: var(--aw-text); }
.aw-howto__list li i { color: var(--aw-orange); font-size: 18px; flex-shrink: 0; }

.aw-howto__btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 14px; text-decoration: none; background: var(--aw-orange); color: #fff !important; font-weight: 700; font-size: 17px; box-shadow: 0 12px 30px -12px rgba(249,115,22,.5); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.aw-howto__btn:hover { transform: scale(1.02); background: var(--aw-orange-2); box-shadow: 0 18px 40px -12px rgba(249,115,22,.6); color: #fff !important; }
.aw-howto__btn .aw-ico { width: 20px; height: 20px; }

.aw-howto__field-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--aw-muted); margin: 16px 0 8px; }
.aw-howto__field-label i { color: var(--aw-orange); }
.aw-howto__field { display: flex; align-items: center; gap: 12px; background: #141414; border: 1px solid var(--aw-border); border-radius: 12px; padding: 12px 14px; transition: border-color .25s ease; }
.aw-howto__field.aw-copy-field { cursor: pointer; }
.aw-howto__field.aw-copy-field:hover { border-color: rgba(249,115,22,.5); }
.aw-howto__field-val { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: 16px; color: var(--aw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-howto__field-copy { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--aw-border); background: rgba(249,115,22,.1); color: var(--aw-orange); transition: background .25s ease, color .25s ease; }
.aw-copy-field:hover .aw-howto__field-copy { background: var(--aw-orange); color: #fff; }

/* галочка при копировании (общая: и hero-статус, и поле IP) */
.is-copied .aw-ico--copy { -webkit-mask-image: url(../img/icons/copy-check.svg); mask-image: url(../img/icons/copy-check.svg); }
.aw-copy-field.is-copied .aw-howto__field-copy { background: rgba(34,197,94,.15); color: #22c55e; border-color: rgba(34,197,94,.5); }

/* доп. lucide-иконки для секции «Как начать играть» */
.aw-ico--download     { -webkit-mask-image:url(../img/icons/download.svg);       mask-image:url(../img/icons/download.svg); }
.aw-ico--gamepad-2    { -webkit-mask-image:url(../img/icons/gamepad-2.svg);      mask-image:url(../img/icons/gamepad-2.svg); }
.aw-ico--check-circle { -webkit-mask-image:url(../img/icons/check-circle-2.svg); mask-image:url(../img/icons/check-circle-2.svg); }
.aw-ico--server       { -webkit-mask-image:url(../img/icons/server.svg);         mask-image:url(../img/icons/server.svg); }
.aw-howto__icon .aw-ico { width: 28px; height: 28px; }
.aw-howto__list li .aw-ico { width: 18px; height: 18px; }
.aw-howto__field-label .aw-ico { width: 15px; height: 15px; }

/* лёгкое оранжевое свечение секции «Как начать играть» (бесшовно с магазином) */
/* верх секции поднят над границей hero и плавно гасит низ персонажа/арта
   в тёмный фон → мягкий переход вместо резкой линии */
.aw-howto { position: relative; z-index: 2;
  /* фон прозрачный → сквозь секцию виден тёплый градиент body (как в магазине),
     а не плоский чёрный. Верхний стык hero → howto сглаживает .aw-howto::before. */
  background: transparent !important; }
/* верхний фейд (hero → howto): плавно темнеет от низа hero к сплошному фону,
   затем так же плавно гаснет в прозрачность, открывая тёплое свечение body —
   без жёсткого нижнего края тёмной полосы */
.aw-howto::before { content: ""; position: absolute; left: 0; right: 0; top: -180px; height: 460px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0,
    rgba(20,20,20,.55) 110px,
    var(--aw-bg) 190px,
    var(--aw-bg) 250px,
    rgba(20,20,20,.55) 350px,
    transparent 460px); }
/* glow: мягкий тёплый ореол в ЧИСТОЙ тёмной зоне за заголовком (ниже наложения
   hero, чтобы не смешивался с закатом/машиной → ровно, без грязи) */
.aw-howto::after { content: ""; position: absolute; left: 50%; top: 90px; z-index: 0; pointer-events: none;
  width: min(760px, 84%); height: 300px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(249,115,22,.07) 0%, rgba(249,115,22,.025) 45%, transparent 100%); }
.aw-howto > .container { position: relative; z-index: 1; }

/* ============================================================
   ФУТЕР — 3 ряда (бренд+меню+соцсети / реквизиты / копирайт), фон 50% + blur
   ============================================================ */
html body footer.footer,
html body > footer.footer,
html body footer.footer.bg-cyan,
html body .main > .mainslide.donate > footer.footer {
  background: rgba(31,31,31,.5) !important;
  background-color: rgba(31,31,31,.5) !important;
  background-image: none !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(51,51,51,.5) !important;
}
.footer__inner { max-width: 1200px; margin: 0 auto; padding: clamp(32px,5vw,48px) clamp(16px,4vw,24px); }

.footer__top { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 28px; }
@media (min-width: 768px) { .footer__top { flex-direction: row; align-items: center; } }
.footer__brand-nav { display: flex; flex-direction: column; gap: 16px; align-items: center; }
@media (min-width: 768px) { .footer__brand-nav { align-items: flex-start; } }
.footer__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; transition: transform .3s ease; transform-origin: left center; }
.footer__brand img { width: 48px; height: 48px; object-fit: contain; }
.footer__brand:hover { transform: scale(1.05); }   /* вся группа лого+надпись, как в хедере */
.footer__brand-name { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 20px; color: var(--aw-text); }
.footer__nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.footer__nav a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--aw-muted); text-decoration: none; transition: color .25s ease; }
.footer__nav a:hover { color: var(--aw-orange); }
.footer__nav .aw-ico { width: 16px; height: 16px; }
.footer__social { display: flex; gap: 12px; flex-shrink: 0; }

.footer__legal { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(51,51,51,.3); text-align: center; font-size: 13px; color: var(--aw-muted); line-height: 1.8; }
.footer__legal .sep { color: #555; margin: 0 6px; }
.footer__legal a { color: var(--aw-muted); text-decoration: none; transition: color .25s ease; }
.footer__legal a:hover { color: var(--aw-orange); }

.footer__copyright { margin-top: 18px; text-align: center; }
.footer__copyright p { font-size: 14px; color: var(--aw-muted); line-height: 1.6; margin: 4px 0; }
.footer__copyright .small { font-size: 12px; color: rgba(166,166,166,.8); }
.footer__pay {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center;
  padding: 0; margin: 0 auto 16px; width: max-content; max-width: 100%;
  background: none; border: none;
}
.footer__pay .pay-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; opacity: .92; transition: opacity .2s ease, transform .2s ease;
}
.footer__pay .pay-logo:hover { opacity: 1; transform: translateY(-2px); }
.footer__pay .pay-logo img { width: auto; display: block; }
.footer__pay .pay-logo--wordmark img { height: 20px; }
.footer__pay .pay-logo--mark img { height: 30px; }

/* разделительная линия перед копирайтом футера */
.footer__copyright { border-top: 1px solid rgba(51,51,51,.3); padding-top: 18px; }

/* ===== ХЕДЕР: точные отступы (ТЗ) + бренд левее + тег под буквой "A" ===== */
.navbar > .container { padding-inline: clamp(12px, 1.4vw, 20px) !important; }   /* бренд левее, кнопка правее */
.navbar-menu { gap: 24px !important; }                                          /* 24px между пунктами */
.navbar-menu .nav-link { gap: 8px !important; padding: 6px 0 !important; }       /* 8px иконка↔текст, без боковых отступов */
.aw-brand__text { align-items: flex-start !important; text-align: left; }        /* тег начинается под буквой "A" */

/* ============================================================
   ТЗ 1-В-1 (эталон) — переопределяет ручную настройку hero/хедера.
   ОТКАТ: удалить весь этот блок (бэкап: .osp/backup/atlantworld.css.before-tz.bak)
   ============================================================ */

/* --- HERO обёртка --- */
.aw-hero { min-height: calc(100vh - 6rem) !important; padding: 9rem 0 2rem !important; display: flex !important; align-items: center !important; }
@media (min-width: 768px) { .aw-hero { min-height: 100vh !important; padding: 11rem 0 3rem !important; } }
.aw-hero__content { max-width: 42rem !important; margin-left: 0 !important; }

/* заголовок — точные размеры по брейкпоинтам (без штриха) */
.aw-hero__title { font-size: 1.875rem !important; line-height: 1.1 !important; letter-spacing: -.025em !important; -webkit-text-stroke: 0 !important; }
@media (min-width: 640px)  { .aw-hero__title { font-size: 2.25rem !important; } }
@media (min-width: 768px)  { .aw-hero__title { font-size: 3rem !important; } }
@media (min-width: 1024px) { .aw-hero__title { font-size: 3.75rem !important; } }
@media (min-width: 1280px) { .aw-hero__title { font-size: 4.5rem !important; } }
.aw-hero__title span { font-weight: 900 !important; }
.aw-brush { font-size: 1.4em !important; }

/* подзаголовок */
.aw-hero__sub { font-size: 1rem !important; line-height: 1.625 !important; max-width: 36rem !important; }
@media (min-width: 640px) { .aw-hero__sub { font-size: 1.125rem !important; } }
@media (min-width: 768px) { .aw-hero__sub { font-size: 1.25rem !important; } }

/* --- КНОПКИ hero: grid 2 колонки, высота 88px (md), rounded-2xl --- */
.aw-hero__actions { display: flex !important; flex-direction: column !important; gap: 1rem !important; max-width: 42rem !important; }
@media (min-width: 640px) { .aw-hero__actions { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: stretch !important; } }
@media (min-width: 768px) { .aw-hero__actions { gap: 1.25rem !important; } }

.aw-btn--primary { width: 100% !important; height: 4rem !important; padding: 0 1.5rem !important; border-radius: 1rem !important; font-size: 1rem !important; box-shadow: 0 10px 15px -3px rgba(249,115,22,.2) !important; }
@media (min-width: 640px) { .aw-btn--primary { height: 5rem !important; padding: 0 2rem !important; } }
@media (min-width: 768px) { .aw-btn--primary { height: 88px !important; font-size: 1.125rem !important; } }

.aw-status { width: 100% !important; height: 4rem !important; border: 2px solid var(--aw-border) !important; border-radius: 1rem !important; background: var(--aw-card) !important; padding: 0 !important; }
@media (min-width: 640px) { .aw-status { height: 5rem !important; } }
@media (min-width: 768px) { .aw-status { height: 88px !important; } }
.aw-status__copy { width: 3.5rem !important; border-radius: 0 !important; border: 0 !important; border-left: 1px solid var(--aw-border) !important; background: rgba(249,115,22,.1) !important; }
@media (min-width: 640px) { .aw-status__copy { width: 4rem !important; } }
@media (min-width: 768px) { .aw-status__copy { width: 72px !important; } }

/* --- АРТ: правая половина, Ferrari по центру, персонаж снизу (-20%) --- */
.aw-hero__art { right: 0 !important; left: auto !important; width: 50% !important; top: 50% !important; bottom: auto !important; height: clamp(400px, 62vh, 700px) !important; transform: translateY(-50%) !important; }
.aw-hero__ferrari { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%,-50%) !important; width: clamp(420px, 38vw, 700px) !important; height: auto !important; max-width: 100% !important; max-height: none !important; z-index: 10 !important; }
.aw-hero__character { bottom: 3rem !important; left: 50% !important; right: auto !important; top: auto !important; transform: translateX(-20%) !important; width: clamp(260px, 22vw, 380px) !important; height: auto !important; max-width: 100% !important; max-height: none !important; z-index: 20 !important; }
.aw-hero__art:hover .aw-hero__ferrari  { transform: translate(-50%,-50%) scale(1.05) !important; }
.aw-hero__art:hover .aw-hero__character { transform: translateX(-20%) scale(1.05) !important; }
@media (max-width: 639px) { .aw-hero__art { display: none !important; } }

/* --- ХЕДЕР: h-24 (96px), px-8, лого 56, бренд, меню gap-24, CTA h-48 --- */
.navbar { min-height: 80px !important; background: rgba(31,31,31,.8) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-bottom: 1px solid rgba(51,51,51,.4) !important; }
@media (min-width: 768px) { .navbar { min-height: 96px !important; } }
.navbar > .container { max-width: 1536px !important; padding-inline: 1rem !important; }
@media (min-width: 768px) { .navbar > .container { padding-inline: 2rem !important; } }
.aw-brand__logo { height: 40px !important; }
@media (min-width: 768px) { .aw-brand__logo { height: 56px !important; } }
.aw-brand__name { font-size: 1.125rem !important; font-weight: 900 !important; letter-spacing: -.025em !important; }
@media (min-width: 768px) { .aw-brand__name { font-size: 1.25rem !important; } }
.aw-brand__tag { font-size: 10px !important; }
@media (min-width: 768px) { .aw-brand__tag { font-size: 12px !important; } }
.navbar-menu { gap: 1.5rem !important; }
.navbar-menu .nav-link { gap: .5rem !important; padding: 0 !important; font-size: 1rem !important; }
.navbar-menu .nav-link .aw-ico { width: 20px !important; height: 20px !important; }
.aw-nav-cta { height: 48px !important; padding: 0 1.5rem !important; border-radius: .75rem !important; gap: .625rem !important; font-size: 1rem !important; }

/* hero снова заезжает под фикс. хедер: padding-top уже 11rem (учитывает 96px) */

/* --- hero-контент: ВЫШЕ (под хедер) и ЛЕВЕЕ (поверх ТЗ) --- */
.aw-hero { align-items: flex-start !important; padding-top: clamp(104px, 13vh, 132px) !important; padding-bottom: 2rem !important; }
@media (min-width: 768px) { .aw-hero { padding-top: clamp(116px, 14vh, 150px) !important; } }
.aw-hero > .container { max-width: 1480px !important; padding-inline: clamp(20px, 3vw, 44px) !important; }
.aw-hero__content { margin-top: 0 !important; }

/* --- ХЕДЕР: точная раскладка ТЗ — flex justify-between (бренд | меню | кнопка) --- */
.navbar .navbar-wrapper { display: flex !important; align-items: center !important; justify-content: space-between !important; grid-template-columns: none !important; gap: 1rem; height: 100%; }
.nav-left  { flex: 0 0 auto; justify-self: auto !important; }
.nav-center { flex: 0 0 auto; display: flex !important; }
.nav-right { flex: 0 0 auto; justify-self: auto !important; margin-left: 0 !important; }

/* --- «Купить донат»: контент по центру --- */
.aw-btn--primary { justify-content: center !important; }

/* --- блок «Сервер онлайн»: copy-секция во всю высоту (без квадрата с рамкой) --- */
.aw-status { align-items: stretch !important; }
.aw-status__info { justify-content: center !important; }
.aw-status__copy {
  width: 56px !important; height: auto !important;
  border-radius: 0 !important; border: 0 !important; border-left: 1px solid var(--aw-border) !important;
  background: rgba(249,115,22,.1) !important; color: var(--aw-orange) !important;
}
@media (min-width: 768px) { .aw-status__copy { width: 72px !important; } }
.aw-status:hover .aw-status__copy { background: var(--aw-orange) !important; color: #fff !important; border-left-color: var(--aw-orange) !important; }
.aw-status__copy .aw-ico { width: 22px !important; height: 22px !important; }

/* --- hero-контент: вертикальные отступы по ТЗ (space-y 24/32/40) --- */
.aw-hero__content { display: flex !important; flex-direction: column !important; gap: 24px !important; }
@media (min-width: 768px)  { .aw-hero__content { gap: 28px !important; } }
@media (min-width: 1024px) { .aw-hero__content { gap: 32px !important; } }
.aw-hero__title, .aw-hero__sub, .aw-hero__actions, .aw-hero__social { margin-top: 0 !important; margin-bottom: 0 !important; }
/* инфо-часть блока «Сервер онлайн»: отступы по ТЗ */
.aw-status__info { padding: 0 12px 0 18px !important; }

/* --- кнопки hero одинакового размера --- */
.aw-hero__actions { grid-template-columns: 1fr 1fr !important; align-items: stretch !important; }
.aw-btn--primary, .aw-status { width: 100% !important; height: 80px !important; }
@media (min-width: 768px) { .aw-btn--primary, .aw-status { height: 88px !important; } }

/* --- блок «Сервер онлайн»: info растягивается → copy прижата к ПРАВОМУ краю --- */
.aw-status { align-items: stretch !important; padding: 0 !important; overflow: hidden !important; }
.aw-status__info { flex: 1 1 auto !important; min-width: 0 !important; }
.aw-status__copy {
  width: 64px !important; height: auto !important; align-self: stretch !important; flex-shrink: 0 !important; margin: 0 !important;
  border: 0 !important; border-left: 1px solid var(--aw-border) !important; border-radius: 0 !important;
  background: rgba(249,115,22,.12) !important; color: var(--aw-orange) !important;
}
@media (min-width: 768px) { .aw-status__copy { width: 72px !important; } }
.aw-status:hover .aw-status__copy { background: var(--aw-orange) !important; color: #fff !important; }

/* --- hero короче: заканчивается у ног персонажа, арт прижат к низу --- */
.aw-hero { min-height: clamp(560px, 80vh, 780px) !important; align-items: flex-start !important; }
.aw-hero__art { top: auto !important; bottom: 0 !important; transform: none !important; height: clamp(420px, 66vh, 700px) !important; }
.aw-hero__character { bottom: 0 !important; }

/* RolePlay — отрицательный margin сжимает строки заголовка (по ТЗ), чтобы крупная строка не раздвигала соседние */
.aw-hero__title .aw-brush { margin: -4px 0 !important; }
@media (min-width: 768px) { .aw-hero__title .aw-brush { margin: -8px 0 !important; } }
/* лейбл «Мы в соцсетях» — точно по ТЗ */
.aw-social-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .05em !important; color: rgba(166,166,166,.7) !important; }
.aw-social-head { gap: 16px !important; }

/* --- RolePlay: обычный шрифт (Montserrat, как заголовок), оранжевый, без граффити --- */
.aw-hero__title .aw-brush, .aw-brush {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1em !important;
  text-transform: uppercase !important;
  letter-spacing: -.025em !important;
  filter: none !important;
  margin: 0 !important;
  color: var(--aw-orange) !important;
}

/* --- весь hero ВЫШЕ: текст/кнопки выше + персонаж/машина выше (короче секция) --- */
.aw-hero { padding-top: clamp(94px, 10vh, 110px) !important; min-height: clamp(480px, 68vh, 640px) !important; }
.aw-hero__art { height: clamp(380px, 60vh, 620px) !important; }

/* --- отступ заголовка от хедера по ТЗ: 144/176px (хедер 96px + воздух) --- */
.aw-hero { padding-top: 144px !important; padding-bottom: 32px !important; min-height: 600px !important; }
@media (min-width: 768px) { .aw-hero { padding-top: 176px !important; padding-bottom: 48px !important; min-height: 720px !important; } }
.aw-hero__art { height: clamp(420px, 64vh, 660px) !important; }

/* --- блок «Сервер онлайн»: лейбл и число зелёные (Inter 600/700), IP 18px mono белый, иконка 24px --- */
.aw-status__online { color: #22c55e !important; }
.aw-status__online > span:not(.aw-status__dot):not(.aw-status__count) {
  font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: #22c55e !important;
}
.aw-status__count { font-size: 12px !important; font-weight: 700 !important; color: #22c55e !important; }
.aw-status__ip { font-size: 18px !important; color: var(--aw-text) !important; font-family: 'JetBrains Mono', monospace !important; }
.aw-status__copy .aw-ico { width: 24px !important; height: 24px !important; }

/* --- hero ВЫШЕ: меньше отступ сверху (~вдвое) + короче секция --- */
.aw-hero { padding-top: 96px !important; min-height: 520px !important; }
@media (min-width: 768px) { .aw-hero { padding-top: 112px !important; min-height: 580px !important; } }
.aw-hero__art { height: clamp(380px, 58vh, 600px) !important; }

/* --- hero ещё выше (предел — навбар 96px) + компактнее --- */
.aw-hero { padding-top: 90px !important; min-height: 460px !important; }
@media (min-width: 768px) { .aw-hero { padding-top: 104px !important; min-height: 500px !important; } }
.aw-hero__content { gap: 16px !important; }
@media (min-width: 768px) { .aw-hero__content { gap: 20px !important; } }
.aw-hero__art { height: clamp(340px, 54vh, 560px) !important; }

/* --- hero ВПЛОТНУЮ к хедеру: отступ = высота навбара (без воздуха) --- */
.aw-hero { padding-top: 84px !important; }
@media (min-width: 768px) { .aw-hero { padding-top: 100px !important; } }

/* ============================================================
   ФИНАЛ HERO (перебивает ВСЁ выше).
   Причина «провала» сверху — flex + align-items:center + высокий
   min-height центрировали контент по вертикали. Убираем центрирование:
   display:block → контент идёт строго от верха, сразу под навбаром.
   Секция компактная → персонаж и машина поднимаются вверх.
   ============================================================ */
.aw-hero {
  display: block !important;          /* НЕ flex → никакого вертикального центрирования */
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important; /* подстраховка, если block где-то проигнорится */
  padding-top: 104px !important;      /* навбар 96px + 8px воздуха */
  padding-bottom: 28px !important;
}
@media (max-width: 767px) { .aw-hero { padding-top: 88px !important; } }

/* ГЛАВНОЕ: style.css задаёт .main>.mainslide.header>.container как grid с
   align-content:center и min-height 640px → центрировал контент. Убиваем !important
   (важность бьёт более высокую специфичность style.css). */
.aw-hero > .container,
.main > .mainslide.header > .container {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.aw-hero__content { margin-top: 0 !important; padding-top: 0 !important; }

/* арт (машина+персонаж) — тянем на всю высоту компактной секции → выше */
.aw-hero__art {
  top: 0 !important; bottom: 0 !important;
  height: auto !important; transform: none !important;
}

/* --- хедер: пункты меню вплотную ---
   Главное — pipui даёт каждому <li> min-width:80px + центровку текста → вокруг
   коротких пунктов («Оплата», «Wiki») пустота, из-за неё и кажется, что отступы
   большие. Сжимаем <li> по тексту, убираем индивидуальные padding пунктов. */
.navbar .navbar-wrapper .navbar-menu { gap: 12px !important; justify-content: center !important; }
.navbar .navbar-wrapper .navbar-menu > li {
  min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}
.navbar .navbar-wrapper .navbar-menu > li > .nav-link { padding: 8px 6px !important; }

/* --- арт: машина ниже+левее+меньше, персонаж крупнее, ногами в самый низ --- */
.aw-hero__ferrari {
  top: 68% !important;                            /* ещё ниже */
  left: 26% !important;                           /* ещё левее */
  transform: translate(-50%, -50%) !important;
  width: clamp(420px, 37vw, 675px) !important;    /* ещё чуть крупнее */
}
.aw-hero__character {
  bottom: 0 !important;                           /* ноги упираются в низ hero */
  left: 37% !important;
  transform: translateX(-20%) !important;
  width: clamp(265px, 23vw, 395px) !important;    /* чуть меньше */
}
.aw-hero__art:hover .aw-hero__ferrari   { transform: translate(-50%, -50%) scale(1.05) !important; }
.aw-hero__art:hover .aw-hero__character { transform: translateX(-20%) scale(1.05) !important; }
/* триггер ховера — только персонаж (его прямоугольник компактнее и справа);
   у машины огромный прозрачный bbox лез в текст → зум срабатывал раньше времени */
.aw-hero__art { pointer-events: none !important; }
.aw-hero__ferrari { pointer-events: none !important; }
.aw-hero__character { pointer-events: auto !important; }

/* ============================================================
   ТЗ: hover-зум (лого + арт) и кнопка «Начать играть»
   ============================================================ */

/* A) Лого в хедере — плавный зум всей группы (лого+текст) */
.aw-brand { transition: transform .3s ease !important; transform-origin: left center !important; }
.aw-brand:hover { transform: scale(1.05) !important; }

/* B) Ferrari + персонаж — зумятся ВМЕСТЕ при наведении на общий контейнер
   .aw-hero__art. Плавность .5s; в hover сохраняем исходный translate + scale
   (иначе картинка «прыгнет» в угол). */
.aw-hero__ferrari, .aw-hero__character { transition: transform .5s ease !important; }

/* ============================================================
   Кнопка «Начать играть» в хедере — с нуля, наша оранжевая палитра.
   Иконка play-circle слева (белая) + текст. Перебивает все прежние правила.
   ============================================================ */
/* Кнопка-копия howto: СПЛОШНОЙ оранжевый (без градиента → нет тёмного пятна в углу) */
.aw-nav-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  height: 46px !important; padding: 0 22px !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .01em !important;
  background: var(--aw-orange) !important;
  color: #fff !important; text-decoration: none !important; white-space: nowrap !important;
  border: 0 !important;
  box-shadow: 0 12px 30px -12px rgba(249,115,22,.5) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.aw-nav-cta:hover {
  transform: scale(1.03) !important; background: var(--aw-orange-2) !important;
  box-shadow: 0 18px 40px -12px rgba(249,115,22,.6) !important; color: #fff !important; filter: none !important;
}
.aw-nav-cta:active { transform: scale(.97) !important; }
/* иконка play-circle — белая, слева; показываем (display), цвет через mask */
.aw-nav-cta .aw-ico {
  display: inline-block !important; width: 19px !important; height: 19px !important;
  flex-shrink: 0 !important; margin: 0 !important;
  color: #fff !important; background-color: #fff !important;
}
/* глушим ВСЁ лишнее в кнопке: псевдоэлементы + любой дочерний элемент,
   кроме иконки play-circle (текст — это текст-нода, его не трогает).
   Это убирает круглую точку справа, чем бы она ни была (ripple/индикатор). */
.aw-nav-cta::before, .aw-nav-cta::after { content: none !important; display: none !important; }
.aw-nav-cta > *:not(.aw-ico) { display: none !important; }

/* ============================================================
   Блок статуса сервера — новый аккуратный вид:
   [● Сервер онлайн / IP]  |  [101 / игроков]  |  [копировать]
   ============================================================ */
.aw-status {
  display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important;
  padding: 0 !important; overflow: hidden !important;
}
/* левая часть: статус + IP, в две строки по центру */
.aw-status__info {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  gap: 5px !important; padding: 0 12px !important;
}
.aw-status__online { display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; }
.aw-status__dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; flex-shrink: 0; }
.aw-status__label {
  font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: .06em !important; color: #22c55e !important;
}
.aw-status__ip {
  font-size: 13px !important; color: var(--aw-text) !important;
  font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
  max-width: 100% !important; /* размер дополнительно подгоняется JS (fitIp) под ширину контейнера */
}
/* средняя колонка: крупное число онлайна + подпись «игроков» */
.aw-status__players-badge {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; padding: 0 10px !important; gap: 1px !important;
  border-left: 1px solid var(--aw-border) !important;
}
.aw-status__count {
  font-size: 22px !important; font-weight: 800 !important; color: #22c55e !important; line-height: 1 !important;
  font-family: 'Inter', sans-serif !important;
}
.aw-status__players {
  font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: .05em !important; color: var(--aw-muted) !important; margin: 0 !important;
}
/* правый квадрат — копировать IP */
.aw-status__copy {
  width: 52px !important; flex-shrink: 0 !important; align-self: stretch !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 0 !important; border-left: 1px solid var(--aw-border) !important; border-radius: 0 !important;
  background: rgba(249,115,22,.12) !important; color: var(--aw-orange) !important;
}
.aw-status:hover .aw-status__copy { background: var(--aw-orange) !important; color: #fff !important; }
.aw-status__copy .aw-ico { width: 22px !important; height: 22px !important; }

/* ============================================================
   Логотип в хедере — точные размеры по ТЗ
   лого 40/56px, gap 8/12px, имя Montserrat 900 18/20px (НЕ капс,
   letter-spacing -.025em), тег Inter 500 10/12px #a6a6a6
   ============================================================ */
.aw-brand { display: flex !important; align-items: center !important; gap: 8px !important; transition: transform .3s ease !important; transform-origin: left center !important; }
@media (min-width: 768px) { .aw-brand { gap: 12px !important; } }
.aw-brand:hover { transform: scale(1.05) !important; }

.aw-brand__logo { width: 40px !important; height: 40px !important; flex-shrink: 0 !important; object-fit: contain !important; transition: transform .3s ease !important; }
@media (min-width: 768px) { .aw-brand__logo { width: 56px !important; height: 56px !important; } }

.aw-brand__text { display: flex !important; flex-direction: column !important; line-height: 1.1 !important; }
.aw-brand__name {
  font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important;
  font-size: 20px !important; letter-spacing: -.025em !important; color: #fafafa !important;
  text-transform: none !important; line-height: 1.1 !important;
}
@media (min-width: 768px) { .aw-brand__name { font-size: 24px !important; } }
.aw-brand__tag {
  font-family: 'Inter', sans-serif !important; font-weight: 500 !important;
  font-size: 10px !important; color: #a6a6a6 !important; text-transform: none !important; letter-spacing: 0 !important;
}
@media (min-width: 768px) { .aw-brand__tag { font-size: 12px !important; } }

/* ============================================================
   ROLEPLAY — граффити Permanent Marker (выбор: оригинал v0.dev).
   Перебивает прежний вариант (Montserrat 900 капс).
   ============================================================ */
.aw-hero__title .aw-brush, .aw-brush {
  font-family: 'Permanent Marker', cursive !important;
  font-weight: 400 !important;
  font-size: 1.4em !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--aw-orange) !important;
  display: inline-block !important;
  transform: rotate(-3deg);                 /* без !important — иначе анимация не сможет двигать */
  margin: 4px 0 !important;
  filter: drop-shadow(0 4px 24px rgba(251,146,60,.55)) !important;
  animation: aw-graffiti-float 3.5s ease-in-out infinite !important;
}
@keyframes aw-graffiti-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-8px); }   /* +лёгкое покачивание наклона */
}
/* (reduce-заглушка убрана намеренно — граффити должно парить всегда, по запросу) */

/* ============================================================
   Отступы контента hero — через gap родителя (ТЗ: 24/32/40px),
   у абзаца описания — никаких собственных margin.
   ============================================================ */
.aw-hero__content { display: flex !important; flex-direction: column !important; gap: 24px !important; }
@media (min-width: 768px)  { .aw-hero__content { gap: 32px !important; } }
@media (min-width: 1024px) { .aw-hero__content { gap: 40px !important; } }
.aw-hero__title, .aw-hero__sub, .aw-hero__actions { margin-top: 0 !important; margin-bottom: 0 !important; }
.aw-hero__sub { line-height: 1.625 !important; max-width: 36rem !important; }

/* ============================================================
   Тег под названием в хедере — pill-бейдж с пульсирующей точкой
   ============================================================ */
.aw-brand__tag {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important;
  font-size: 11px !important; text-transform: none !important; letter-spacing: .02em !important;
  color: var(--aw-orange) !important;
  background: rgba(249,115,22,.10) !important;
  border: 1px solid rgba(249,115,22,.25) !important;
  padding: 2px 8px !important; border-radius: 9999px !important;
  width: max-content !important; margin-top: 4px !important; line-height: 1.4 !important;
}
@media (min-width: 768px) { .aw-brand__tag { font-size: 11px !important; } }
.aw-tag-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
  animation: aw-tag-pulse 1.5s ease-in-out infinite;
}
@keyframes aw-tag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* пульс точки бейджа оставляем всегда */

/* ============================================================
   Якорные секции не должны прятаться под фикс-навбар при переходе
   (#how-to-start, #donate-section) — отступ = высота навбара + воздух
   ============================================================ */
html { scroll-behavior: smooth; }
#how-to-start, #donate-section, .aw-howto, .aw-donate { scroll-margin-top: 96px; }
@media (min-width: 768px) {
  #how-to-start, #donate-section, .aw-howto, .aw-donate { scroll-margin-top: 120px; }
}

/* ============================================================
   Заголовок донат-магазина — в «крутом» стиле «Как начать играть?»
   (Montserrat 900, крупный, по центру, оранжевый акцент)
   ============================================================ */
.donate-head { text-align: center !important; max-width: 720px !important; margin: 0 auto clamp(28px, 4vw, 48px) !important; }
.donate-title {
  font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important; letter-spacing: -.02em !important;
  line-height: 1.05 !important; color: var(--aw-text) !important; margin: 0 !important;
  text-transform: none !important;
}
.donate-title .aw-accent { color: var(--aw-orange) !important; }
.donate-subtitle {
  margin: 14px auto 0 !important; max-width: 560px !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important; line-height: 1.5 !important; color: var(--aw-muted) !important;
}

/* (декоративные свечения убраны — давали видимые полосы на переходах) */

/* ============================================================
   Эффект приближения: масштаб машины/персонажа управляется JS через
   переменную --aw-prox (1 = далеко, до ~1.06 = рядом). translate сохранён.
   ============================================================ */
.aw-hero__ferrari {
  transform: translate(-50%, -50%) scale(var(--aw-prox, 1)) !important;
  transition: transform .12s linear !important;
}
.aw-hero__character {
  transform: translateX(-20%) scale(var(--aw-prox, 1)) !important;
  transition: transform .12s linear !important;
}
/* hover не должен «защёлкивать» масштаб — пусть тоже идёт через переменную */
.aw-hero__art:hover .aw-hero__ferrari   { transform: translate(-50%, -50%) scale(var(--aw-prox, 1)) !important; }
.aw-hero__art:hover .aw-hero__character { transform: translateX(-20%) scale(var(--aw-prox, 1)) !important; }

/* (свечение на стыке донат → футер убрано — давало полосу) */

/* ============================================================
   ПОЛИРОВКА ХЕДЕРА (адаптация ТЗ под наши классы)
   ============================================================ */

/* 1) Бейдж «Minecraft RolePlay» — глубже + пульс-ping у точки */
.aw-brand__tag {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 11px !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  color: var(--aw-orange) !important;
  background: rgba(249,115,22,.12) !important; border: 1px solid rgba(249,115,22,.3) !important;
  padding: 3px 10px !important; border-radius: 9999px !important; width: max-content !important; margin-top: 4px !important;
}
.aw-tag-dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: #22c55e !important; position: relative !important; flex-shrink: 0 !important;
  box-shadow: none !important; animation: none !important;   /* убираем прежний opacity-пульс */
}
.aw-tag-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #22c55e; opacity: .7; animation: aw-badge-ping 1.6s ease-out infinite;
}
@keyframes aw-badge-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* 2) Кнопка «Начать играть» — мягкое свечение + hover-сдвиг иконки */
.aw-nav-cta {
  height: 48px !important; padding: 0 26px !important; font-size: 16px !important;
  background: var(--aw-orange) !important;
  box-shadow: 0 8px 24px -6px rgba(249,115,22,.45) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.aw-nav-cta:hover {
  transform: scale(1.05) !important; background: var(--aw-orange) !important;
  box-shadow: 0 12px 32px -6px rgba(249,115,22,.6) !important; filter: none !important;
}
.aw-nav-cta:active { transform: scale(.95) !important; }
.aw-nav-cta .aw-ico { transition: transform .3s ease !important; }
.aw-nav-cta:hover .aw-ico { transform: translateX(2px) !important; }

/* 3a) Меню строго по центру: grid 1fr auto 1fr */
.navbar .navbar-wrapper {
  display: grid !important; grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important; gap: 16px !important;
}
.navbar .navbar-wrapper .nav-left   { justify-self: start !important; }
.navbar .navbar-wrapper .nav-center { justify-self: center !important; }
.navbar .navbar-wrapper .nav-right  { justify-self: end !important; }

/* 3b) Скролл-эффект шапки: плотнее фон + тень при прокрутке */
.navbar { transition: background .25s ease, box-shadow .25s ease, border-color .25s ease !important; }
.navbar.is-scrolled {
  background: rgba(20,20,20,.92) !important;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6) !important;
}

/* ============================================================
   Страница магазина (/?shop/): магазин — первый контент, нужен
   отступ сверху, чтобы заголовок не уходил под фикс-навбар.
   ============================================================ */
.main--shop { padding-top: 16px !important; }   /* навбар sticky (в потоке) — большой отступ не нужен, был лишний воздух */
/* донат-контейнер: меньше воздуха сверху на странице магазина */
.main--shop .donate > .container, .main--shop .mainslide.donate > .container { padding-top: 12px !important; }
.main--shop .donate-head { margin-top: 0 !important; }

/* ============================================================
   Бейдж под названием — тихий подзаголовок (не пилюля-капс, чтобы
   не выглядел как второй заголовок), маленькая статичная зелёная точка
   ============================================================ */
.aw-brand__tag {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 11px !important;
  text-transform: none !important; letter-spacing: .2px !important;
  color: var(--aw-muted) !important;
  background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  width: auto !important; margin-top: 3px !important;
}
.aw-tag-dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important;
  background: #22c55e !important; box-shadow: 0 0 5px rgba(34,197,94,.55) !important;
  position: relative !important; animation: none !important;
}
.aw-tag-dot::before { content: none !important; display: none !important; }

/* ============================================================
   Sticky-footer: на коротких страницах (короткая главная) футер
   прижимается к низу экрана — нет пустоты снизу при отдалении.
   ============================================================ */
.main { min-height: 100vh !important; display: flex !important; flex-direction: column !important; }
.main > footer.footer { margin-top: auto !important; }

/* ============================================================
   Магазин: 3 колонки товаров + иконки категорий + аккуратнее карточки
   ============================================================ */
/* 3 колонки (было 2) */
.main .donate .items > .item-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important;
}
@media (max-width: 1200px) { .main .donate .items > .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px)  { .main .donate .items > .item-list { grid-template-columns: 1fr !important; } }
.main .donate .items > .item-list > .item-id { min-height: 0 !important; padding: 16px !important; border-radius: 16px !important; }
/* картинка чуть компактнее под 3 колонки */
.item-id .image-wrap { width: min(122px, 64%) !important; margin: 4px auto 10px !important; }

/* иконка категории (реальный <i> из шаблона, разная по категориям) */
.donate .tab-link { gap: 8px !important; }
.donate .tab-link .aw-ico { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }

/* скидка — аккуратный оранжевый pill */
.item-id .card-top .discount, .item-id > .discount {
  display: inline-flex !important; align-items: center !important;
  background: rgba(249,115,22,.14) !important; color: var(--aw-orange) !important;
  border: 1px solid rgba(249,115,22,.28) !important; border-radius: 999px !important;
  padding: 2px 9px !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .02em !important;
}
.item-id .card-top .price, .item-id > .price { font-weight: 800 !important; color: var(--aw-text) !important; }

/* ============================================================
   РЕДИЗАЙН МАГАЗИНА v2 — адаптация ТЗ под Qexy-классы.
   Откат: .osp/backup/atlantworld.css.before-shop-redesign.bak
   ============================================================ */

/* #1 Шапка: бейдж + подзаголовок + меньше провал до табов */
.donate-badge {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 11px !important;
  text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--aw-orange) !important;
  background: rgba(249,115,22,.12) !important; border: 1px solid rgba(249,115,22,.3) !important;
  padding: 4px 12px !important; border-radius: 9999px !important; margin: 0 auto 14px !important;
}
.donate-head { margin-bottom: 40px !important; }
.donate-subtitle { color: #a6a6a6 !important; max-width: 600px !important; line-height: 1.6 !important; margin: 12px auto 0 !important; }
.main--shop .donate > .container, .main--shop .mainslide.donate > .container { padding-top: 12px !important; padding-bottom: 64px !important; }

/* #2 Табы — единая капсула */
.main .donate .tabs > .tab-links {
  display: inline-flex !important; gap: 6px !important; padding: 6px !important;
  background: #1f1f1f !important; border: 1px solid #333 !important; border-radius: 14px !important;
  margin: 0 auto 32px !important; width: max-content !important; max-width: 100% !important; flex-wrap: wrap !important;
}
.main .donate .tabs > .tab-links > li .tab-link {
  height: 42px !important; padding: 0 18px !important; border-radius: 10px !important;
  background: transparent !important; border: 0 !important; color: var(--aw-muted) !important;
  font-weight: 600 !important; font-size: 15px !important; box-shadow: none !important; transform: none !important;
}
.main .donate .tabs > .tab-links > li .tab-link:hover {
  background: rgba(255,255,255,.05) !important; color: var(--aw-text) !important; transform: none !important;
}
.main .donate .tabs > .tab-links > li .tab-link.active {
  background: var(--aw-orange) !important; color: #fff !important; box-shadow: 0 6px 16px -6px rgba(249,115,22,.5) !important;
}

/* #3/#4 Карточки — единые: картинка-баннер сверху, тело снизу, hover-зум */
.main .donate .items > .item-list > .item-id {
  position: relative !important; display: flex !important; flex-direction: column !important;
  /* «liquid glass», ТЁМНОЕ — та же ДНК, что у категорий и ленты доната:
     тёмная полупрозрачная база + тировый цвет «стекает» сверху, тонкая светлая кромка
     (рим) + внутренний блик сверху. Арт перекрывает блюр в теле карточки, поэтому стекло
     «работает» на рамке/риме/тенях и в футере (см. .card-foot ниже).
     База чуть прозрачнее сплошного #1f1f1f — чтобы кромка и рим читались как у системы. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tier-glow, transparent) 32%, transparent) 0%,
      color-mix(in srgb, var(--tier-glow, transparent) 11%, transparent) 45%,
      transparent 100%),
    linear-gradient(135deg, rgba(30,30,34,.92), rgba(18,18,20,.9)) !important;
  border: 1px solid rgba(255,255,255,.07) !important; border-radius: 18px !important;
  padding: 0 !important; overflow: hidden !important; min-height: 0 !important;
  /* рим сверху + лёгкая контактная тень — связующий мотив системы */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px -18px rgba(0,0,0,.7) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease !important;
}
.main .donate .items > .item-list > .item-id:hover {
  transform: translateY(-8px) !important;
  /* рамка и свечение — в цвет ранга (--tier-glow); у товаров без ранга fallback оранжевый.
     Рим сверху усиливается (как у hover категорий), снизу — цветное свечение ранга. */
  border-color: color-mix(in srgb, var(--tier-glow, #f97316) 72%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              0 22px 48px -20px rgba(0,0,0,.6),
              0 0 0 1px color-mix(in srgb, var(--tier-glow, #f97316) 32%, transparent) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tier-glow, transparent) 32%, transparent) 0%,
      color-mix(in srgb, var(--tier-glow, transparent) 11%, transparent) 45%,
      transparent 100%),
    linear-gradient(135deg, rgba(34,32,30,.92), rgba(20,18,16,.9)) !important;
}
/* АКТИВНАЯ карточка (pipui вешает .active) — перебиваем sky-blue из style.css?62
   нашим оранжевым стеклом, в тон активной вкладки категорий. Специфичность выше
   (та же цепочка + .active + body), чтобы победить поздний style.css. */
body .main .donate .items > .item-list > .item-id.active {
  /* выделение при клике — в цвет тира карточки (--tier-glow), оранжевый только как fallback */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tier-glow, #f97316) 18%, transparent) 0%, color-mix(in srgb, var(--tier-glow, #f97316) 6%, transparent) 45%, transparent 100%),
    linear-gradient(135deg, rgba(30,30,34,.92), rgba(18,18,20,.9)) !important;
  border-color: color-mix(in srgb, var(--tier-glow, #f97316) 55%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              0 14px 32px -18px rgba(0,0,0,.55),
              0 0 0 1px color-mix(in srgb, var(--tier-glow, #f97316) 28%, transparent) !important;
}
.item-id .image-wrap {
  width: 100% !important; aspect-ratio: 1 / 1 !important; margin: 0 !important;
  overflow: hidden !important; background: #141414 !important; border-radius: 0 !important;
}
.item-id .image-wrap > .image {
  width: 100% !important; height: 100% !important; border-radius: 0 !important; margin: 0 !important;
  background-size: cover !important; background-position: center !important; transition: transform .4s ease !important;
}
.item-id:hover .image-wrap > .image { transform: scale(1.06) !important; }
.item-id > .title { padding: 14px 14px 0 !important; font-size: 17px !important; text-align: center !important; }
.item-id > .card-description { padding: 0 14px !important; margin: 8px 0 14px !important; min-height: 36px !important; text-align: center !important; }
.item-id .card-glow { display: none !important; }
/* скидка слева-сверху, цена справа-сверху — поверх картинки */
.item-id .card-top {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 2 !important;
  display: flex !important; justify-content: space-between !important; align-items: flex-start !important;
  padding: 10px !important; pointer-events: none !important; background: none !important;
}
.item-id .card-top .discount {
  background: #ef4444 !important; color: #fff !important; border: 0 !important;
  font-size: 11px !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: 8px !important;
}
.item-id .card-top .price {
  background: rgba(20,20,20,.85) !important; color: var(--aw-orange) !important; font-weight: 800 !important;
  padding: 3px 10px !important; border-radius: 8px !important; font-size: 14px !important;
}

/* #6 Боковая панель — sticky + тонкий оранжевый скроллбар */
.donate-sidebar { position: sticky !important; top: 120px !important; align-self: start !important; }
.donate-sidebar ::-webkit-scrollbar { width: 6px !important; }
.donate-sidebar ::-webkit-scrollbar-track { background: transparent !important; }
.donate-sidebar ::-webkit-scrollbar-thumb { background: var(--aw-orange) !important; border-radius: 8px !important; }

/* ============================================================
   КАТЕГОРИИ СЛЕВА (вертикально, иконки-бейджи) — как эталон.
   Перебивает прежнюю верхнюю «капсулу».
   ============================================================ */
/* заголовок по левому краю */
.donate-head { text-align: left !important; max-width: none !important; margin: 0 0 32px !important; }
.donate-subtitle { margin: 10px 0 0 !important; }

/* внутренний .tabs → 2 колонки: [категории 230px] [товары] */
.donate-products .tab-id > .tabs {
  display: grid !important; grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 24px !important; align-items: start !important;
}
@media (max-width: 980px) { .donate-products .tab-id > .tabs { grid-template-columns: 1fr !important; } }

/* список категорий — вертикальные строки (sticky) */
.donate-products .tab-id > .tabs > .tab-links {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important;
  width: auto !important; max-width: none !important; position: sticky !important; top: 120px !important;
}
.donate-products .tab-id > .tabs > .tab-links > li { width: 100% !important; list-style: none !important; }
.donate-products .tab-id > .tabs > .tab-links > li .tab-link {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  width: 100% !important; height: auto !important; padding: 11px 14px !important; border-radius: 14px !important;
  background: linear-gradient(180deg, #212121, #181818) !important; border: 1px solid #2e2e2e !important; color: var(--aw-muted) !important;
  font-weight: 600 !important; font-size: 15px !important; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset !important; text-align: left !important;
  white-space: normal !important; position: relative !important; overflow: hidden !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.donate-products .tab-id > .tabs > .tab-links > li .tab-link:hover {
  background: linear-gradient(180deg, #282828, #1e1e1e) !important; border-color: rgba(249,115,22,.5) !important; color: var(--aw-text) !important;
  transform: translateX(3px) !important; box-shadow: 0 8px 22px -14px rgba(249,115,22,.55) !important;
}
.donate-products .tab-id > .tabs > .tab-links > li .tab-link.active {
  background: linear-gradient(180deg, rgba(249,115,22,.18), rgba(249,115,22,.06)) !important;
  border-color: var(--aw-orange) !important; color: #fff !important;
  box-shadow: 0 10px 28px -14px rgba(249,115,22,.6), 0 0 0 1px rgba(249,115,22,.25) !important;
}
/* левый акцент-бар (растёт при hover/active) */
.donate-products .tab-link::before {
  content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 3px !important; height: 0 !important; border-radius: 0 4px 4px 0 !important; background: var(--aw-orange) !important;
  transition: height .22s ease !important;
}
.donate-products .tab-link:hover::before { height: 46% !important; }
.donate-products .tab-link.active::before { height: 66% !important; }
/* иконка-бейдж (цветной квадрат + иконка) */
.tab-link .cat-ico {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important; flex-shrink: 0 !important; border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(249,115,22,.18), rgba(249,115,22,.08)) !important; border: 1px solid rgba(249,115,22,.24) !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease !important;
}
.tab-link .cat-ico .aw-ico { width: 18px !important; height: 18px !important; color: var(--aw-orange) !important; }
.donate-products .tab-link:hover .cat-ico { transform: scale(1.07) !important; border-color: rgba(249,115,22,.45) !important; }
.tab-link.active .cat-ico { background: linear-gradient(180deg, #fb923c, #f97316) !important; border-color: var(--aw-orange) !important; box-shadow: 0 6px 16px -6px rgba(249,115,22,.8) !important; }
.tab-link.active .cat-ico .aw-ico { color: #fff !important; }
/* типографика названия/счётчика */
.donate-products .tab-link .cat-text { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.donate-products .tab-link .cat-name { font-weight: 700 !important; font-size: 15px !important; line-height: 1.15 !important; }
.donate-products .tab-link .cat-count { font-size: 12px !important; font-weight: 600 !important; color: #8a8a8a !important; line-height: 1 !important; }
.donate-products .tab-link:hover .cat-count { color: #a8a8a8 !important; }
.donate-products .tab-link.active .cat-count { color: rgba(255,255,255,.72) !important; }

/* товары — адаптивная сетка (места меньше: категории + панель) */
.main .donate .items > .item-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 16px !important; }

/* ============================================================
   Категории — ОБРАТНО НАВЕРХ (горизонтальные пилюли с иконками-бейджами)
   + Live-лента покупок над ними + hover «Подробнее» на карточках
   ============================================================ */
/* отменяем grid (категории-слева) → категории снова НАД товарами */
.donate-products .tab-id > .tabs { display: block !important; grid-template-columns: none !important; }
.donate-products .tab-id > .tabs > .tab-links {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  gap: 10px !important; justify-content: flex-start !important; position: static !important;
  margin: 0 0 24px !important; padding: 0 !important; background: transparent !important; border: 0 !important; width: auto !important; top: auto !important;
}
.donate-products .tab-id > .tabs > .tab-links > li { width: auto !important; }
.donate-products .tab-id > .tabs > .tab-links > li .tab-link {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  width: auto !important; height: auto !important; padding: 8px 16px 8px 8px !important; border-radius: 12px !important;
  background: #1f1f1f !important; border: 1px solid #333 !important; color: var(--aw-muted) !important;
  font-weight: 600 !important; font-size: 15px !important; box-shadow: none !important; white-space: nowrap !important; text-align: left !important;
}
.donate-products .tab-id > .tabs > .tab-links > li .tab-link:hover {
  background: #262626 !important; border-color: rgba(249,115,22,.4) !important; color: var(--aw-text) !important;
}
.donate-products .tab-id > .tabs > .tab-links > li .tab-link.active {
  background: #262626 !important; border-color: var(--aw-orange) !important; color: #fff !important;
}
.tab-link .cat-ico { width: 34px !important; height: 34px !important; }
.tab-link .cat-ico .aw-ico { width: 17px !important; height: 17px !important; }
.main .donate .items > .item-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }

/* === Live-лента последних покупок === */
.donate-live { display: flex !important; align-items: center !important; gap: 18px !important; margin: 0 0 28px !important; }
.donate-live__label { flex-shrink: 0; display: flex; flex-direction: column; min-width: 110px; }
.donate-live__top { display: inline-flex; align-items: center; gap: 7px; color: var(--aw-orange); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.donate-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: aw-tag-pulse 1.4s ease-in-out infinite; }
.donate-live__sub { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px; color: var(--aw-text); line-height: 1.15; }
.donate-live__list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; flex: 1; min-width: 0; }
.donate-live__list::-webkit-scrollbar { height: 6px; }
.donate-live__list::-webkit-scrollbar-track { background: transparent; }
.donate-live__list::-webkit-scrollbar-thumb { background: var(--aw-orange); border-radius: 8px; }
.donate-live__card { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; background: #1f1f1f; border: 1px solid #333; border-radius: 14px; }
.donate-live__img { width: 44px; height: 44px; border-radius: 10px; background: #141414 center/cover no-repeat; flex-shrink: 0; }
.donate-live__item { font-weight: 700; font-size: 12.5px; color: var(--aw-orange); }
.donate-live__player { font-weight: 700; font-size: 14px; color: var(--aw-text); }

/* hover «Подробнее» на карточке товара (клик открывает панель — поведение уже есть) */
.item-id .image-wrap { position: relative !important; }
.item-id .image-wrap::after {
  content: "Подробнее"; position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,20,.62); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.item-id:hover .image-wrap::after { opacity: 1; }

/* ============================================================
   Карточка: цена + кнопка «Купить» в футере (наша палитра)
   + Live-лента крупнее, без некрасивого скроллбара
   ============================================================ */
/* цену из card-top убираем (теперь в футере), в углу остаётся только скидка */
.item-id .card-top .price { display: none !important; }
.item-id .card-top { justify-content: flex-start !important; }
/* футер карточки — прижат к низу, одинаково у всех */
.item-id > .card-foot {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  padding: 4px 14px 14px !important; margin-top: auto !important;
}
.item-id .card-price { font-weight: 800 !important; font-size: 18px !important; color: #22c55e !important; text-align: center !important; }
.item-id .card-buy {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 42px !important; border-radius: 10px !important; border: 0 !important;
  background: var(--aw-orange) !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important;
  cursor: pointer !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.item-id .card-buy:hover { transform: scale(1.03) !important; background: var(--aw-orange-2) !important; box-shadow: 0 10px 24px -8px rgba(249,115,22,.5) !important; }
.item-id .card-buy:active { transform: scale(.97) !important; }

/* Live-лента — крупнее, красивее, БЕЗ видимого скроллбара */
.donate-live { margin: 0 0 32px !important; gap: 22px !important; }
.donate-live__label { min-width: 132px !important; }
.donate-live__top { font-size: 17px !important; }
.donate-live__sub { font-size: 22px !important; }
.donate-live__list { gap: 14px !important; padding-bottom: 0 !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
.donate-live__list::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.donate-live__card {
  padding: 12px 20px 12px 12px !important; border-radius: 16px !important;
  /* как хедер/категории: полупрозрачный тёмный + стекло */
  background: rgba(31,31,31,.8) !important; border: 1px solid rgba(51,51,51,.5) !important;
  -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
  transition: background .2s ease, border-color .2s ease !important;
}
/* HOVER — как АКТИВНАЯ категория: тёплый тон + оранжевая рамка со свечением */
.donate-live__card:hover {
  background: linear-gradient(90deg, rgba(249,115,22,.14), rgba(249,115,22,.04)) !important;
  border-color: rgba(249,115,22,.55) !important;
  box-shadow: 0 8px 22px -10px rgba(249,115,22,.5) !important;
  transform: none !important;
}
.donate-live__img { width: 54px !important; height: 54px !important; border-radius: 12px !important; }
.donate-live__item { font-size: 13px !important; margin-bottom: 2px !important; }
.donate-live__player { font-size: 15px !important; }

/* ============================================================
   Категории СНОВА ВЛЕВО (по новой просьбе) — перебивает «верхний» вариант
   ============================================================ */
.donate-products .tab-id > .tabs {
  display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 24px !important; align-items: start !important;
}
@media (max-width: 980px) {
  .donate-products .tab-id > .tabs { display: block !important; grid-template-columns: none !important; }
}
.donate-products .tab-id > .tabs > .tab-links {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px !important;
  position: sticky !important; top: 120px !important; margin: 0 !important; justify-content: flex-start !important;
}
.donate-products .tab-id > .tabs > .tab-links > li { width: 100% !important; }
.donate-products .tab-id > .tabs > .tab-links > li .tab-link {
  width: 100% !important; padding: 11px 14px 11px 11px !important; white-space: normal !important; justify-content: flex-start !important;
}
@media (max-width: 980px) {
  .donate-products .tab-id > .tabs > .tab-links { flex-direction: row !important; flex-wrap: wrap !important; position: static !important; }
  .donate-products .tab-id > .tabs > .tab-links > li { width: auto !important; }
  .donate-products .tab-id > .tabs > .tab-links > li .tab-link { width: auto !important; }
}

/* ============================================================
   ФИНАЛЬНЫЙ облик кнопок категорий (этот блок ИДЁТ ПОСЛЕ всех
   дублей выше — поэтому именно он определяет вид). Красивее: градиент,
   акцент-бар слева, объёмная активная плашка, типографика имени/счётчика.
   ============================================================ */
/* ФИНАЛ (на усмотрение): аккуратные плашки под тёмно-оранжевый стиль.
   Неактивные — спокойные тёмные карточки с мягкой рамкой и иконкой в квадрате.
   Активная — выделена тёплым акцентом, но без «кричащего» оранжевого блока. */
.donate-products .tab-id > .tabs > .tab-links > li .tab-link {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 11px 13px !important; border-radius: 14px !important;
  /* «liquid glass» (iOS-style), но ТЁМНОЕ: тёмная полупрозрачная база + размытие фона,
     лёгкая светлая кромка и тонкий блик. Над тёплым фоном не «разжигается» (saturate убран). */
  background: linear-gradient(135deg, rgba(28,28,32,.55), rgba(16,16,18,.5)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
  color: #d6d6d6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px -16px rgba(0,0,0,.7) !important;
  position: relative !important; overflow: hidden !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}
/* HOVER — стекло чуть светлее базы + тёплая кромка (без «вспышки») */
.donate-products .tab-id > .tabs > .tab-links > li .tab-link:hover {
  background: linear-gradient(135deg, rgba(40,40,46,.62), rgba(26,26,30,.56)) !important; border-color: rgba(249,115,22,.45) !important; color: #fff !important; transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px -14px rgba(249,115,22,.35) !important;
}
/* ACTIVE — оранжевое стекло (глянцевая плашка) */
.donate-products .tab-id > .tabs > .tab-links > li .tab-link.active {
  background: linear-gradient(135deg, rgba(249,115,22,.88), rgba(234,88,12,.72)) !important;
  border-color: rgba(255,255,255,.14) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 20px -12px rgba(0,0,0,.3), 0 12px 26px -14px rgba(249,115,22,.45) !important;
}
/* полоска-индикатор слева — только у активной */
.donate-products .tab-id > .tabs > .tab-links .tab-link::before {
  content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 3px !important; height: 0 !important; border-radius: 0 3px 3px 0 !important; background: var(--aw-orange) !important;
  transition: height .2s ease !important;
}
.donate-products .tab-id > .tabs > .tab-links .tab-link:hover::before { height: 0 !important; }
.donate-products .tab-id > .tabs > .tab-links .tab-link.active::before { height: 62% !important; }
/* иконка в аккуратном квадрате; active — оранжевый квадрат */
.donate-products .tab-id > .tabs > .tab-links .tab-link .cat-ico {
  width: 34px !important; height: 34px !important; border-radius: 9px !important;
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.donate-products .tab-id > .tabs > .tab-links .tab-link .cat-ico .aw-ico { width: 18px !important; height: 18px !important; color: var(--aw-orange) !important; transition: color .18s ease; }
.donate-products .tab-id > .tabs > .tab-links .tab-link:hover .cat-ico { background: rgba(249,115,22,.10) !important; border-color: rgba(249,115,22,.22) !important; }
.donate-products .tab-id > .tabs > .tab-links .tab-link:hover .cat-ico .aw-ico { color: var(--aw-orange) !important; }
.donate-products .tab-id > .tabs > .tab-links .tab-link.active .cat-ico {
  background: rgba(255,255,255,.25) !important; border-color: rgba(255,255,255,.45) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -6px rgba(0,0,0,.3) !important;
}
.donate-products .tab-id > .tabs > .tab-links .tab-link.active .cat-ico .aw-ico { color: #fff !important; }
.donate-products .tab-id > .tabs > .tab-links .tab-link .cat-text { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; }
.donate-products .tab-id > .tabs > .tab-links .tab-link .cat-name { font-weight: 600 !important; font-size: 14.5px !important; line-height: 1.2 !important; }
/* счётчик товаров — мелкая пилюля справа */
.donate-products .tab-id > .tabs > .tab-links .tab-link .cat-badge { margin-left: auto !important; flex: 0 0 auto !important; padding: 2px 8px !important; border-radius: 7px !important; background: rgba(255,255,255,.06) !important; font-size: 11.5px !important; font-weight: 700 !important; color: #888 !important; line-height: 1.4 !important; }
.donate-products .tab-id > .tabs > .tab-links .tab-link.active .cat-badge { background: rgba(249,115,22,.20) !important; color: #f97316 !important; }

/* донат-панель теперь МОДАЛКА → магазин в одну колонку, товары на всю ширину */
.main > .donate .donate-shop { display: block !important; grid-template-columns: none !important; }
.donate-sidebar { position: static !important; top: auto !important; }   /* модалка внутри — fixed; контейнер места не занимает */
.donate-sidebar > .donate-panel:not(.modal) { /* подстраховка */ }
/* товары — сбалансированный размер (бейджам хватает места, но не громоздко) */
.main .donate .items > .item-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 16px !important; }

/* модалка покупки — по центру, наша палитра + кнопка закрытия */
.modal.donate-panel .modal-content { position: relative !important; max-width: 460px !important; width: 92vw !important; }
/* модалка СКРЫТА по умолчанию (style.css делала display:block → открывалась на заходе).
   Специфичность 0,3,0 бьёт style.css (0,2,0); БЕЗ !important — чтобы pipui fadeIn (inline display) её показал. */
.modal.donate-panel[data-id="donate"] { display: none; }
.aw-modal-close {
  position: absolute !important; top: 12px !important; right: 14px !important; z-index: 5 !important;
  width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 9px !important;
  background: rgba(255,255,255,.06) !important; color: var(--aw-muted) !important;
  font-size: 24px !important; line-height: 1 !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s ease, color .2s ease !important;
}
.aw-modal-close:hover { background: rgba(249,115,22,.16) !important; color: var(--aw-orange) !important; }

/* ============================================================
   LIVE-лента — бегущая marquee + аватары по нику + пульс LIVE
   (перебивает прежнюю статичную ленту)
   ============================================================ */
.donate-live { display: flex !important; align-items: center !important; gap: 20px !important; margin: 0 0 36px !important; }
.donate-live__label { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 118px !important; }
.donate-live__live { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-weight: 800 !important; font-size: 14px !important; color: #ef4444 !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.donate-live__dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ef4444 !important; position: relative !important; flex-shrink: 0 !important; box-shadow: none !important; animation: none !important; }
.donate-live__dot::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 50% !important; background: #ef4444 !important; opacity: .7 !important; animation: live-ping 1.4s ease-out infinite !important; }
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.donate-live__sub { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; color: var(--aw-text) !important; line-height: 1.15 !important; }

.donate-live__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; padding: 5px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.donate-live__track { display: flex; gap: 12px; width: max-content; animation: live-scroll 38s linear infinite; }
.donate-live:hover .donate-live__track { animation-play-state: paused; }
@keyframes live-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.donate-live__card {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; white-space: nowrap; position: relative;
  /* «liquid glass», ТЁМНОЕ — одна семья с категориями, но ЛЕГЧЕ (мелкие бегущие карточки):
     чуть прозрачнее, мягче кромка, чуть слабее блюр. Светлая внутренняя кромка = тот же «рим».
     !important — перебиваем более ранний дубль (~стр.1828) с его !important фоном/рамкой/блюром. */
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(30,30,34,.5), rgba(17,17,19,.44)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(13px) !important; backdrop-filter: blur(13px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px -14px rgba(0,0,0,.7) !important;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}
/* без подъёма — иначе верх рамки режется overflow:hidden у ленты; берём язык HOVER категорий:
   тёплая кромка + лёгкий тёплый блик, без «вспышки» оранжевой заливки активной вкладки */
.donate-live__card:hover {
  background: linear-gradient(135deg, rgba(44,40,34,.58), rgba(24,20,16,.5)) !important;
  border-color: rgba(249,115,22,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 22px -12px rgba(249,115,22,.4) !important;
}
.donate-live__ava { width: 44px !important; height: 44px !important; border-radius: 11px !important; object-fit: cover !important; flex-shrink: 0 !important; background: #141414 !important; border: 1px solid #383838 !important; transition: border-color .25s ease !important; }
.donate-live__card:hover .donate-live__ava { border-color: rgba(249,115,22,.55) !important; }
.donate-live__info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.donate-live__player { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 13.5px !important; color: #fafafa !important; line-height: 1.15 !important; }
.donate-live__item { margin: 0 !important; font-weight: 700 !important; font-size: 11.5px !important; color: var(--aw-orange) !important; line-height: 1.15 !important; }
/* сумма покупки в ленте — салатовым, чтобы читалась как деньги (--aw-price сейчас белый) */
.donate-live__price { font-weight: 800 !important; font-size: 11.5px !important; color: #5fe070 !important; }
.donate-live__price::before { content: "·"; margin: 0 5px; color: #5a5a5a; font-weight: 400; }
/* метка времени — компактная строка с часами под товаром («5 минут назад») */
.donate-live__ago { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-top: 2px !important; font-size: 10.5px !important; font-weight: 600 !important; color: #8a8a8a !important; line-height: 1.1 !important; }
.donate-live__ago .aw-ico { width: 11px !important; height: 11px !important; color: #7a7a7a !important; background-color: #7a7a7a !important; flex-shrink: 0 !important; }
/* лента стала прокручиваемой вручную: курсор-«рука» + скрытый скроллбар + без выделения текста */
.donate-live__track { user-select: none; -webkit-user-select: none; }
.donate-live__viewport.is-scrollable { cursor: grab; }
.donate-live__viewport.is-scrollable:active { cursor: grabbing; }
.donate-live__viewport { scrollbar-width: none !important; -ms-overflow-style: none !important; }
.donate-live__viewport::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* шапка магазина — pill-бейдж «Официальный магазин» (по левому краю, как заголовок) */
.donate-badge {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 11px !important;
  text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--aw-orange) !important;
  background: rgba(249,115,22,.12) !important; border: 1px solid rgba(249,115,22,.3) !important;
  padding: 4px 12px !important; border-radius: 9999px !important; margin: 0 0 14px !important; width: max-content !important;
}

/* карточка: градиент снизу арта (текст «садится» на картинку) + зачёркнутая цена */
.item-id .image-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, #1f1f1f 0%, transparent 42%);
}
.item-id .card-price { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 8px !important; }
.item-id .card-price__new { font-weight: 800 !important; font-size: 18px !important; color: #22c55e !important; }
.item-id .card-price__old { font-size: 13px !important; color: #777 !important; text-decoration: line-through !important; }

/* разделитель между LIVE-лентой и заголовком «Покупка доната» */
/* height:2px (а не 1px) — 1px-линия исчезает на дробном зуме (80% → 0.8px округляется до 0) */
.donate-divider { height: 2px; margin: 28px 0 44px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 12%, rgba(255,255,255,.10) 88%, transparent); }
/* заголовок — ниже (больше зазор сверху) и прижат к карточкам (меньше снизу) */
.donate-head { text-align: left !important; max-width: none !important; margin: 0 0 12px !important; }
.donate-subtitle { margin: 8px 0 0 !important; }

/* ============================================================
   Модалка покупки — по ЦЕНТРУ + наша палитра + тонкий скроллбар
   (style.css ломал центрирование (display:block) и красил в синь)
   ============================================================ */
.modal.donate-panel[data-id="donate"] { padding: 0 !important; } /* убираем 20px-паддинг модалки, иначе он стакается с центрированием ниже */
.modal.donate-panel[data-id="donate"] > .wrapper {
  display: grid !important; align-items: center !important; justify-items: center !important;
  margin: 0 auto !important; height: 100vh !important; box-sizing: border-box !important;
  padding-top: 96px !important; /* центрируем модалку в зоне НИЖЕ sticky-навбара (96px), а не во всём вьюпорте */
  width: 100% !important;
  grid-template-columns: 100% !important; overflow: auto !important;
}
.modal.donate-panel[data-id="donate"] > .wrapper > .modal-content {
  background: #1b1b1b !important; border: 1px solid var(--aw-border) !important; max-width: 480px !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(249,115,22,.06) inset !important;
}
.modal.donate-panel[data-id="donate"] .donate-description { border-color: var(--aw-border) !important; background: rgba(255,255,255,.03) !important; }
.modal.donate-panel[data-id="donate"] .block-bonus { border-color: var(--aw-border) !important; }
/* тонкий оранжевый скроллбар внутри модалки (была серая «хрень») */
.modal.donate-panel[data-id="donate"] .donate-description::-webkit-scrollbar,
.modal.donate-panel[data-id="donate"] > .wrapper::-webkit-scrollbar { width: 6px !important; }
.modal.donate-panel[data-id="donate"] .donate-description::-webkit-scrollbar-track,
.modal.donate-panel[data-id="donate"] > .wrapper::-webkit-scrollbar-track { background: transparent !important; }
.modal.donate-panel[data-id="donate"] .donate-description::-webkit-scrollbar-thumb,
.modal.donate-panel[data-id="donate"] > .wrapper::-webkit-scrollbar-thumb { background: var(--aw-orange) !important; border-radius: 8px !important; }

/* карточки товара — чуть короче (арт был 1/1 → 4/3) */
.item-id .image-wrap { aspect-ratio: 4 / 3 !important; }

/* ============================================================
   Убрать «херабору» (авто-скрытый серый скроллбар) + выровнять карточки
   ============================================================ */
/* пустой контейнер панели (модалка внутри fixed) не рендерим как блок — нет лишней полосы */
.donate-sidebar { display: contents !important; }

/* ===== Поиск товара (витрина) ===== */
/* Шапка магазина — заголовок+подсказка слева, поиск справа (в одну строку).
   На мобиле (≤768px) колонкой: поиск уходит вниз во всю ширину. */
.main--shop .donate-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px 24px !important; flex-wrap: wrap !important; }
.donate-head__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 768px) {
  .main--shop .donate-head { flex-direction: column !important; align-items: stretch !important; }
}

/* Поиск — компактный, справа в шапке. align-self:flex-end — поле чуть ниже (по низу блока заголовка). */
.donate-head .donate-search {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; align-self: flex-end;
  width: 340px; max-width: 100%;
  margin: 0; padding: 0 14px; height: 46px; border-radius: 12px;
  background: #1d1d1d; border: 1px solid rgba(51,51,51,.6);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
@media (max-width: 768px) { .donate-head .donate-search { width: 100%; align-self: stretch; } }
/* focus-within: оранжевый акцент-обводка + мягкое свечение */
.donate-head .donate-search:focus-within {
  border-color: var(--aw-orange);
  background: #202020;
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
.donate-search .aw-ico--search { width: 18px; height: 18px; flex: 0 0 auto; color: var(--aw-muted); background-color: var(--aw-muted); transition: background-color .15s ease; }
.donate-head .donate-search:focus-within .aw-ico--search { background-color: var(--aw-orange); }
/* ВАЖНО: pipui (pipui.min.css) глобально стилит `input,select,textarea` — даёт инпуту
   собственную рамку/фон/тень, height:36px и margin-bottom:20px. Из-за margin-bottom
   флекс с align-items:center центрировал margin-box и инпут уезжал вверх (≈9px) — поле
   выглядело «криво», а иконка лупы отрывалась от внутреннего бокса инпута.
   Перебиваем с id-специфичностью (#aw-shop-search) + !important: убираем собственный
   бокс инпута полностью, чтобы видимой рамкой был ТОЛЬКО контейнер .donate-search. */
.donate-head .donate-search input#aw-shop-search {
  flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
  height: 100% !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; outline: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  line-height: normal !important; color: var(--aw-text) !important;
  font-family: inherit !important; font-size: 15px !important; text-align: left !important;
}
.donate-search input#aw-shop-search::placeholder { color: var(--aw-muted) !important; }
.donate-search__clear { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--aw-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.donate-search__clear:hover { background: rgba(255,255,255,.12); color: #fff; }
.donate-search__clear .aw-ico { width: 14px; height: 14px; }
.donate-search__clear[hidden] { display: none; }
.donate-search-empty { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--aw-muted); font-size: 15px; font-weight: 600; }
.donate-search-empty[hidden] { display: none; }
.item-id.aw-search-hide { display: none !important; }   /* скрытие карточки поиском (перебивает display:flex !important) */

/* любой скроллбар в зоне магазина — тонкий оранжевый, не серая палка */
.donate-shop ::-webkit-scrollbar, .donate-live ::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
.donate-shop ::-webkit-scrollbar-track, .donate-live ::-webkit-scrollbar-track { background: transparent !important; }
.donate-shop ::-webkit-scrollbar-thumb, .donate-live ::-webkit-scrollbar-thumb { background: var(--aw-orange) !important; border-radius: 8px !important; }
/* карточки одинаковой высоты: заголовок в 1 строку, сетка тянет ряд */
.main .donate .items > .item-list { align-items: stretch !important; }
.item-id > .title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* ГЛОБАЛЬНО: любой скроллбар — тонкий оранжевый, не серая «палка» */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(249,115,22,.8) !important; border-radius: 8px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--aw-orange) !important; }

/* «ХЕРАБОРА»: пустой ВНЕШНИЙ ul.tab-links (серверные табы закомментированы в шаблоне)
   стилизовался капсулой и торчал пилюлей. Прячем именно его — категории это
   ВЛОЖЕННЫЙ .tab-id > .tabs > .tab-links, он остаётся. */
.tabs.donate-products > .tab-links { display: none !important; }

/* выровнять верх колонок «категории» и «товары» на одном уровне */
.donate-products .tab-id > .tabs { align-items: start !important; }
.donate-products .tab-id > .tabs > .tab-links { margin-top: 0 !important; }
/* внешняя серверная панель .tab-id получает от pipui padding:20px 0 — сверху это давало
   большой зазор до карточек. Срезаем верхний padding (зазор остаётся за счёт margin шапки). */
.donate-products > .tab-list > .tab-id { padding-top: 4px !important; }
.donate-products .tab-id > .tabs > .tab-list { margin: 0 !important; padding-top: 0 !important; }
.donate-products .tab-id > .tabs > .tab-list > .tab-id { margin-top: 0 !important; padding-top: 0 !important; }
.donate-products .tab-id > .tabs > .tab-list .items { margin-top: 0 !important; padding-top: 0 !important; }
.donate-products .tab-id > .tabs > .tab-list .items > .item-list { margin-top: 0 !important; }

/* Баннер магазина (над лентой покупок) — чистый, лёгкий зум на hover */
.shop-banner { display: block; width: 100%; margin: 0 0 28px; border-radius: 16px; overflow: hidden; line-height: 0; background: transparent; border: 0; transition: transform .3s ease; }
.shop-banner:hover { transform: scale(1.015); }
.shop-banner img { width: 100%; height: auto; display: block; }

/* ============================================================
   СЛАЙДЕР БАННЕРОВ магазина — авто-смена + стрелки + точки + свайп
   ============================================================ */
.shop-slider { position: relative; width: 100%; margin: 0 0 28px; border-radius: 16px; overflow: hidden; }
.shop-slider__viewport { overflow: hidden; border-radius: 16px; touch-action: pan-y; }
.shop-slider__track { display: flex; will-change: transform; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
/* aspect-ratio резервирует высоту слайдера ДО загрузки картинки баннера — иначе
   при F5 со скроллом вниз баннер «нулевой» на первом кадре, страница короткая,
   браузер не может восстановить скролл и на миг показывает верх (прыжок). 3:1 —
   соотношение баннеров (2172×724); нестандартный баннер аккуратно впишет object-fit. */
.shop-slider__slide { flex: 0 0 100%; min-width: 100%; line-height: 0; aspect-ratio: 2172 / 724; }
.shop-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.shop-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .25s ease, background .2s ease, border-color .2s ease; }
.shop-slider:hover .shop-slider__nav { opacity: 1; }
.shop-slider__nav:hover { background: var(--aw-orange); border-color: var(--aw-orange); }
.shop-slider__nav:active { transform: translateY(-50%) scale(.94); }
.shop-slider__nav--prev { left: 14px; }
.shop-slider__nav--next { right: 14px; }
.shop-slider__nav .aw-ico { width: 22px; height: 22px; color: #fff; background-color: #fff; }
.shop-slider__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.shop-slider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .25s ease, background .25s ease; }
.shop-slider__dot.is-active { width: 26px; background: var(--aw-orange); }
@media (max-width: 600px){
  .shop-slider__nav { width: 34px; height: 34px; opacity: 1; }
  .shop-slider__nav .aw-ico { width: 18px; height: 18px; }
  .shop-slider__dots { bottom: 8px; }
}

/* описание на карточках не выводим — компактные карточки (картинка → название → цена → кнопка) */
.item-id > .card-description { display: none !important; }

/* ============================================================
   Полировка карточки товара (без фейк-скидки) — чище и аккуратнее
   ============================================================ */
.item-id { background: #181818 !important; border: 1px solid #2c2c2c !important; }
.item-id:hover { border-color: rgba(249,115,22,.55) !important; box-shadow: 0 18px 44px -20px rgba(249,115,22,.45) !important; }
.item-id > .title { padding: 14px 14px 0 !important; margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; }
.item-id > .card-foot { margin-top: 0 !important; padding: 10px 14px 14px !important; gap: 12px !important; }
.item-id .card-price { justify-content: center !important; }
.item-id .card-price__new { font-size: 19px !important; font-weight: 800 !important; color: #22c55e !important; }
.item-id .card-buy {
  width: 100% !important; height: 44px !important; border-radius: 11px !important;
  font-size: 15px !important; font-weight: 700 !important; border: 0 !important;
  background: var(--aw-orange) !important; color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(249,115,22,.5) !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.item-id .card-buy:hover { background: var(--aw-orange-2) !important; transform: translateY(-1px) !important; box-shadow: 0 12px 26px -8px rgba(249,115,22,.6) !important; }
.item-id .card-buy:active { transform: translateY(0) scale(.98) !important; }

/* ============================================================
   Премиум-апгрейд: крупнее арт, градиент-фон карточки, кнопка
   с корзиной, категории с градиентом и счётчиком
   ============================================================ */
/* картинка крупнее — снова квадрат 1/1 */
.item-id .image-wrap { aspect-ratio: 1 / 1 !important; }
.item-id .image-wrap::before { background: linear-gradient(0deg, #161616 2%, rgba(22,22,22,.45) 28%, transparent 58%) !important; }
/* карточка — градиентный фон + сильнее объём на hover */
.item-id { background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%) !important; border: 1px solid #2a2a2a !important; }
.item-id:hover { transform: translateY(-8px) !important; border-color: rgba(249,115,22,.7) !important; box-shadow: 0 24px 50px -20px rgba(249,115,22,.45), 0 0 0 1px rgba(249,115,22,.2) !important; }
.item-id .card-price__new { font-size: 21px !important; }
/* кнопка «Купить» — градиент + иконка корзины */
.item-id .card-buy { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 46px !important; background: linear-gradient(135deg, #f97316, #ea580c) !important; }
.item-id .card-buy:hover { filter: brightness(1.08) !important; }
.item-id .card-buy .aw-ico { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; color: #fff !important; background-color: #fff !important; }

/* категории — активная: оранжевое стекло (глянцевая плашка). ЭТОТ блок финальный — он и виден. */
.donate-products .tab-id > .tabs > .tab-links > li .tab-link.active {
  background: linear-gradient(135deg, rgba(249,115,22,.9), rgba(234,88,12,.74)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 20px -12px rgba(0,0,0,.3), 0 12px 26px -14px rgba(249,115,22,.45) !important;
}
/* счётчик товаров — ПОД названием категории (не справа-бейджем) */
.cat-text { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; text-align: left !important; }
.cat-name { font-weight: 700 !important; font-size: 15px !important; line-height: 1.2 !important; color: inherit !important; }
.cat-count { margin-left: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: var(--aw-muted) !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; line-height: 1.25 !important; }
.tab-link.active .cat-count { color: rgba(249,115,22,.9) !important; background: transparent !important; }

/* ============================================================
   Карточка товара v3 — премиум по ТЗ: объём, перетекание арта,
   иерархия шрифтов, широкая кнопка с иконкой 16px, лента ранга
   (финальный слой — перебивает все стили карточки выше)
   ============================================================ */
/* #1 контейнер — объём + плавный hover-подъём со свечением */
/* align-items:stretch ОБЯЗАТЕЛЬНО: ранний .item-id (стр.309) ставит center, из-за чего
   футер (название/цена/кнопка) сжимался до контента вместо ширины карточки */
.item-id { border-radius: 18px !important; background: linear-gradient(180deg, #1c1c1c, #141414) !important; border: 1px solid #2a2a2a !important;
  align-items: stretch !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease !important; }
.item-id:hover { transform: translateY(-8px) !important; border-color: rgba(249,115,22,.7) !important; box-shadow: 0 24px 50px -20px rgba(249,115,22,.45) !important; }

/* #2 арт перетекает в фон карточки — резкая линия обреза убрана */
.item-id .image-wrap { aspect-ratio: 1 / 1 !important; }
.item-id .image-wrap::before { background: linear-gradient(0deg, #161616 0%, rgba(22,22,22,.55) 28%, transparent 55%) !important; }

/* #4 тело — иерархия шрифтов (название 19/800, цена 22/800 зелёная) */
.item-id > .title { padding: 14px 14px 0 !important; margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 19px !important;
  letter-spacing: -.01em !important; color: #fafafa !important; text-align: center !important; }
.item-id > .card-foot { display: flex !important; flex-direction: column !important; align-items: stretch !important;
  margin-top: 0 !important; padding: 10px 16px 16px !important; gap: 10px !important; }
.item-id .card-price { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 8px !important; width: 100% !important; }
.item-id .card-price__new { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 22px !important; color: #22c55e !important; }
.item-id .card-price__old { font-size: 14px !important; color: #666 !important; text-decoration: line-through !important; }

/* #5 кнопка «Купить» — на всю ширину, ровная иконка 16px (меньше текста) */
.item-id .card-buy {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: 100% !important; align-self: stretch !important; box-sizing: border-box !important; flex: 0 0 auto !important;
  height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: #fff !important; cursor: pointer !important;
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.5) !important;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease !important;
}
.item-id .card-buy:hover { transform: scale(1.03) !important; filter: brightness(1.08) !important; box-shadow: 0 10px 22px -12px rgba(0,0,0,.55) !important; }
.item-id .card-buy:active { transform: scale(.97) !important; }
.item-id .card-buy .aw-ico { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; color: #fff !important; background-color: #fff !important; }

/* #6 лента ранга сверху — взгляд считывает «крутость» (дешёвый→дорогой) */
.item-id .card-tier { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; z-index: 4 !important; }
.item-id .card-tier--gray   { background: #9ca3af !important; }
.item-id .card-tier--orange { background: #f97316 !important; }
.item-id .card-tier--purple { background: #a855f7 !important; }
.item-id .card-tier--gold   { background: linear-gradient(90deg, #ffe14d, #ffc400) !important; }
/* ленты рангов Bronze→Sponsor — ТОЧНО в игровые цвета тегов (Minecraft) */
.item-id .card-tier--bronze   { background: linear-gradient(90deg, #ffb84d, #ff9500) !important; }
.item-id .card-tier--silver   { background: linear-gradient(90deg, #cdd6e0, #9aa6b4) !important; }
.item-id .card-tier--diamond  { background: linear-gradient(90deg, #7ff3fa, #1ed8e6) !important; }
.item-id .card-tier--platinum { background: linear-gradient(90deg, #ff93ee, #f23ad6) !important; }
.item-id .card-tier--master   { background: linear-gradient(90deg, #ffa257, #ff6a00) !important; }
.item-id .card-tier--supreme  { background: linear-gradient(90deg, #97f297, #34d934) !important; }
.item-id .card-tier--sponsor  { background: linear-gradient(90deg, #ff8080, #ff2d2d) !important; }

/* #6.1 свечение ранга за артом — цвет ленты «стекает» вниз мягкой аурой.
   mix-blend: screen → только подсвечивает тёмный арт, не затемняет его.
   Цвет берётся из --tier-glow, который задан на самой карточке по рангу. */
.item-id.tier-bronze   { --tier-glow: #ff9500; }
.item-id.tier-silver   { --tier-glow: #b8c2cf; }
.item-id.tier-gold     { --tier-glow: #ffc400; }
.item-id.tier-diamond  { --tier-glow: #1ed8e6; }
.item-id.tier-platinum { --tier-glow: #f23ad6; }
.item-id.tier-master   { --tier-glow: #ff6a00; }
.item-id.tier-supreme  { --tier-glow: #34d934; }
.item-id.tier-sponsor  { --tier-glow: #ff2d2d; }
/* цвет свечения по категориям (привилегии — свои тировые цвета выше) */
/* все категории (кроме привилегий) — единый оранжевый градиент/ховер */
.item-id.cat-currency, .item-id.cat-cases, .item-id.cat-battlepass, .item-id.cat-transport,
.item-id.cat-monopoly, .item-id.cat-mines, .item-id.cat-other { --tier-glow: #f97316; }
.item-id .card-glow {
  display: block !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important;
  z-index: 2 !important; pointer-events: none !important; border-radius: 16px !important;
  background: linear-gradient(180deg, var(--tier-glow, transparent) 0%, transparent 62%) !important;
  opacity: .3 !important; mix-blend-mode: screen !important;
}
/* НЕ привилегии (категорийные карточки) — без градиента-свечения вовсе.
   Тировое свечение остаётся только у привилегий (tier-*). */
.item-id.cat-currency .card-glow, .item-id.cat-cases .card-glow, .item-id.cat-battlepass .card-glow,
.item-id.cat-transport .card-glow, .item-id.cat-monopoly .card-glow, .item-id.cat-mines .card-glow, .item-id.cat-other .card-glow {
  display: none !important;
}
/* рамка и тень при наведении — в цвет категории */
.item-id.cat-currency:hover, .item-id.cat-cases:hover, .item-id.cat-battlepass:hover,
.item-id.cat-transport:hover, .item-id.cat-monopoly:hover, .item-id.cat-mines:hover, .item-id.cat-other:hover {
  border-color: color-mix(in srgb, var(--tier-glow) 55%, transparent) !important;
  box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--tier-glow) 50%, transparent) !important;
}

/* #3 бейдж скидки (показывается только при реальной старой цене) */
.item-id .card-badge {
  position: absolute !important; top: 12px !important; left: 12px !important; z-index: 5 !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #fff !important;
  font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 800 !important;
  padding: 5px 10px !important; border-radius: 9px !important;
  box-shadow: 0 6px 16px -4px rgba(239,68,68,.6) !important;
}

/* пользовательские бейджи товара (Популярное / Хит / …) — правый верхний угол, в столбик.
   Скидочный .card-badge висит слева, поэтому эти — справа, не пересекаются. */
.item-id .card-badges {
  position: absolute !important; top: 12px !important; right: 12px !important; z-index: 5 !important;
  display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 6px !important;
  max-width: 72% !important; pointer-events: none !important;
}
.item-id .card-badge2 {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  font-family: 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 800 !important;
  line-height: 1 !important; color: #fff !important;
  background: var(--bcol, #f97316) !important;
  padding: 5px 9px !important; border-radius: 9px !important;
  box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--bcol, #f97316) 75%, transparent) !important;
  max-width: 100% !important;
}
.item-id .card-badge2 .aw-ico { width: 13px !important; height: 13px !important; color: #fff !important; flex: 0 0 auto !important; }
.item-id .card-badge2__t { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
@media (max-width: 620px) {
  .item-id .card-badges { top: 8px !important; right: 8px !important; gap: 4px !important; }
  .item-id .card-badge2 { font-size: 10px !important; padding: 4px 7px !important; }
}

/* красивый знак рубля ₽ — Montserrat → Inter (точно содержит глиф), в цвет контекста */
.rub { font-family: 'Montserrat', 'Inter', sans-serif !important; font-weight: 700 !important; font-style: normal !important; color: inherit !important; margin-left: 1px !important; }
.item-id .card-price__old .rub { color: inherit !important; }

/* описание привилегии в модалке покупки — список с оранжевыми маркерами и подсветкой значений */
.donate-description .text .perk-title { margin: 0 0 12px !important; font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 14px !important; color: var(--aw-text) !important; }
.donate-description .text .perk-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.donate-description .text .perk-list li { position: relative !important; padding-left: 20px !important; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--aw-muted) !important; }
.donate-description .text .perk-list li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 7px !important; width: 7px !important; height: 7px !important; border-radius: 2px !important; background: var(--aw-orange) !important; }
.donate-description .text .perk-list b { font-weight: 700 !important; }
/* жирный по умолчанию оранжевый, НО явно заданный цвет (foreColor → style="color") должен побеждать */
.donate-description .text .perk-list b:not([style*="color"]) { color: var(--aw-orange) !important; }
.donate-description .text .perk-list span[style*="color"] b:not([style*="color"]) { color: inherit !important; }

/* ============================================================
   МОБИЛЬНЫЙ НАВБАР (≤1024px) — гамбургер + бренд в строку,
   меню выпадает по клику (pipui вешает .navbar.open),
   CTA и тег скрыты. Фикс: грид 1fr/auto/1fr сжимал бренд в 0px,
   из-за чего «AtlantWorld» вставал столбиком по буквам.
   ============================================================ */
@media (max-width: 1024px) {
  .navbar .navbar-wrapper {
    display: flex !important; grid-template-columns: none !important;
    justify-content: flex-start !important; align-items: center !important;
    gap: 12px !important; position: relative !important;
    min-height: 0 !important;
  }
  .navbar { min-height: 0 !important; }
  /* гамбургер слева */
  .navbar .nav-mobile { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; }
  /* бренд — лого + название В СТРОКУ (без переноса по буквам) */
  .nav-left { display: flex !important; align-items: center !important; gap: 12px !important; justify-self: auto !important; min-width: 0 !important; flex: 1 1 auto !important; }
  .aw-brand { gap: 10px !important; min-width: 0 !important; transform: none !important; }
  .aw-brand:hover { transform: none !important; }
  .aw-brand__logo { height: 42px !important; width: auto !important; flex: 0 0 auto !important; }
  .aw-brand__text { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
  .aw-brand__name { font-size: 18px !important; white-space: nowrap !important; line-height: 1.1 !important; }
  .aw-brand__tag { display: none !important; }
  /* CTA «Начать играть» прячем (перебиваем .navbar .aw-nav-cta), контейнер оставляем — в нём корзина (справа) */
  .navbar .navbar-wrapper .aw-nav-cta { display: none !important; }
  .navbar .navbar-wrapper .nav-right { display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-left: auto !important; }
  /* МЕНЮ — выпадашка под навбаром */
  .nav-center {
    display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    height: auto !important; max-height: none !important;
    background: #141414 !important; border-top: 1px solid var(--aw-border) !important;
    box-shadow: 0 24px 48px -18px rgba(0,0,0,.7) !important; padding: 6px 0 !important; z-index: 70 !important;
  }
  .navbar.open .nav-center { display: block !important; height: auto !important; }
  .navbar.open .navbar-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; height: auto !important; }
  .navbar.open .nav-center .navbar-menu > .nav-li { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; float: none !important; }
  .navbar.open .nav-center .navbar-menu .nav-link { display: flex !important; align-items: center !important; gap: 12px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding: 0 22px !important; font-size: 16px !important; line-height: 1.2 !important; border-radius: 0 !important; white-space: nowrap !important; }
  .navbar.open .navbar-menu .nav-link:hover { background: rgba(255,255,255,.06) !important; }
  /* подменю админки внутри мобильного меню — статично, без абсолюта */
  .navbar.open .nav-submenu { position: static !important; box-shadow: none !important; background: rgba(255,255,255,.03) !important; padding-left: 16px !important; }

  /* ── ФИКС ПЕРЕКРЫТИЯ ГАМБУРГЕРА КОРЗИНОЙ ──────────────────────────
     pipui (pipui-responsive.min.css) при открытом меню форсит
       .navbar.open .navbar-wrapper > .nav-center,
       .navbar.open .navbar-wrapper > .nav-right { display:block; width:100% }
     (спец-ть 0,3,1) — он рассчитан на меню-«гармошку», где блоки стоят
     столбиком. У нас бар остаётся горизонтальным, а меню — абсолютный
     оверлей, поэтому width:100% растягивал .nav-right (корзину) на весь
     ряд и она наезжала на гамбургер. Перебиваем с большей спец-тью
     (body … = 0,4,1), возвращая узкую корзину справа и не давая
     .nav-left схлопнуться в 0. */
  body .navbar.open .navbar-wrapper > .nav-right {
    width: auto !important; flex: 0 0 auto !important;
    margin-left: auto !important; padding: 0 !important; display: flex !important;
  }
  body .navbar.open .navbar-wrapper > .nav-left {
    width: auto !important; flex: 0 1 auto !important;   /* не растёт (grow 0) — иначе ест ряд и margin-left:auto у корзины не работает */
  }
  /* .nav-center pipui тоже форсит width:100%/display:block — у нас он и так
     абсолютный оверлей на всю ширину (left/right:0), так что это безвредно,
     но зафиксируем display, чтобы меню гарантированно показывалось */
  body .navbar.open .navbar-wrapper > .nav-center { display: block !important; }

  /* ── КОМПАКТНЫЙ ХЕДЕР (закрытое меню): бренд и корзина не наезжают, всё по центру ──
     Было: гамбургер раздут до 80×80 (от высоты бара) → не влезали лого+«AtlantWorld»+корзина,
     название вылезало за свой контейнер и перекрывало корзину, а корзина стояла выше бара. */
  .navbar .nav-mobile { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; flex: 0 0 44px !important; }
  /* бренд ужимается при нехватке места (min-width:0 разрешает flex-сжатие), имя — с многоточием как страховка.
     margin:0 — у бренда был margin-top:16px, тянувший его ниже центра бара. */
  .nav-left { min-width: 0 !important; gap: 10px !important; }
  .navbar .navbar-wrapper .nav-left .aw-brand { min-width: 0 !important; overflow: hidden !important; margin: 0 !important; }
  .aw-brand__text { min-width: 0 !important; overflow: hidden !important; }
  .aw-brand__name { overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
  /* корзина — чуть компактнее (без стрелки) и СТРОГО по центру бара.
     padding:0 — у .nav-right был padding-bottom:20px, из-за которого корзина прижималась к верху. */
  .navbar .navbar-wrapper .nav-right { align-self: center !important; height: auto !important; padding: 0 !important; }
  .navbar .navbar-wrapper .aw-nav-cart { height: 40px !important; padding: 0 11px !important; gap: 7px !important; align-self: center !important; }
  .navbar .navbar-wrapper .aw-nav-cart__arrow { display: none !important; }   /* стрелку прячем — экономит ширину */
}

/* ============================================================
   МОБИЛЬНЫЙ МАГАЗИН (≤768px) — категории горизонтальной лентой
   (скролл вбок, не пол-экрана), товары в 2 колонки и компактнее
   ============================================================ */
@media (max-width: 768px) {
  /* КАТЕГОРИИ — горизонтальный скролл-ряд чипов */
  .donate-products .tab-id > .tabs > .tab-links {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    gap: 8px !important; padding: 2px 2px 12px !important; margin: 0 0 6px !important;
    position: static !important; top: auto !important;
    scrollbar-width: none !important; -ms-overflow-style: none !important;
  }
  .donate-products .tab-id > .tabs > .tab-links::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .donate-products .tab-id > .tabs > .tab-links > li { flex: 0 0 auto !important; }
  .donate-products .tab-id > .tabs > .tab-links .tab-link {
    flex: 0 0 auto !important; width: auto !important; padding: 7px 12px !important; gap: 8px !important;
  }
  .donate-products .tab-links .tab-link .cat-ico { width: 26px !important; height: 26px !important; flex: 0 0 auto !important; border-radius: 8px !important; }
  .donate-products .tab-links .tab-link .cat-ico .aw-ico { width: 15px !important; height: 15px !important; }
  .donate-products .tab-links .tab-link .cat-name { font-size: 13px !important; white-space: nowrap !important; }
  .donate-products .tab-links .tab-link .cat-count { font-size: 11px !important; white-space: nowrap !important; }

  /* ПОДСКАЗКА «листай вбок»: затухание у правого края + пульсирующий шеврон.
     Гаснет после первого скролла (JS вешает .cat-scrolled) */
  .donate-products .tab-id > .tabs { position: relative !important; }
  .donate-products .tab-id > .tabs::after {
    content: "›"; position: absolute !important; top: 0 !important; right: 0 !important;
    width: 50px !important; height: 52px !important;
    display: flex !important; align-items: center !important; justify-content: flex-end !important; padding-right: 10px !important;
    background: linear-gradient(90deg, rgba(20,20,20,0) 0%, #141414 65%) !important;
    color: var(--aw-orange) !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important;
    pointer-events: none !important; z-index: 5 !important;
    animation: cat-hint 1.5s ease-in-out 4 !important;
    transition: opacity .3s ease !important;
  }
  .donate-products .tab-id > .tabs.cat-scrolled::after { opacity: 0 !important; }

  /* ТОВАРЫ — 2 колонки + компактные карточки (удобнее покупать) */
  .main .donate .items > .item-list { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .item-id { border-radius: 14px !important; }
  .item-id > .title { font-size: 14px !important; padding: 10px 8px 0 !important; }
  .item-id > .card-foot { padding: 8px 8px 10px !important; gap: 7px !important; }
  .item-id .card-price__new { font-size: 17px !important; }
  .item-id .card-price__old { font-size: 12px !important; }
  .item-id .card-buy { height: 38px !important; font-size: 13px !important; border-radius: 9px !important; }
  .item-id .card-buy .aw-ico { width: 14px !important; height: 14px !important; }
  .item-id .card-badge { font-size: 10px !important; padding: 4px 7px !important; top: 8px !important; left: 8px !important; }
}
@keyframes cat-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

/* ============================================================
   МОДАЛКА СКАЧИВАНИЯ ЛАУНЧЕРА (кнопки «Начать играть»)
   3 экрана: выбор ОС → macOS / инструкция Windows SmartScreen
   ============================================================ */
.lm{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:56px 16px 24px; overflow-y:auto; }
.lm[hidden]{ display:none; }
.lm__overlay{ position:fixed; inset:0; background:rgba(0,0,0,.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

.lm__panel{ position:relative; width:100%; max-width:672px; margin:auto; animation:lm-in .3s ease; }
.lm__panel[hidden]{ display:none; }
.lm__panel[data-view="macos"]{ max-width:448px; }
.lm__panel[data-view="windows-help"]{ max-width:512px; }
@keyframes lm-in{ from{ opacity:0; transform:scale(.95); } to{ opacity:1; transform:scale(1); } }

.lm button{ font-family:inherit; cursor:pointer; border:0; }
.lm__close, .lm__back, .lm__help{ background:none; }

.lm__close{ position:absolute; top:-44px; right:0; color:rgba(255,255,255,.6); transition:color .2s; padding:6px; line-height:0; }
.lm__close:hover{ color:#fff; }
.lm__close .aw-ico{ width:26px; height:26px; }
.lm__back{ position:absolute; top:-42px; left:0; display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.6); font-size:15px; transition:color .2s; }
.lm__back:hover{ color:#fff; }
.lm__back .aw-ico{ width:20px; height:20px; }

.lm__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:28px; color:#fff; text-align:center; margin:0 0 28px; }

.lm__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lm__os{ display:flex; flex-direction:column; align-items:center; background:rgba(31,31,31,.95); border:1px solid #333; border-radius:16px; overflow:hidden; transition:border-color .3s, box-shadow .3s; text-decoration:none; padding:0; }
.lm__os:hover{ border-color:rgba(249,115,22,.6); box-shadow:0 8px 24px -12px rgba(249,115,22,.45); }
.lm__os-ico{ display:flex; align-items:center; justify-content:center; height:104px; color:#a6a6a6; transition:color .3s, transform .3s; }
.lm__os:hover .lm__os-ico{ color:#f97316; transform:scale(1.1); }
.lm__os-ico .aw-ico{ width:52px; height:52px; }
.lm__os-name{ font-weight:700; color:#fafafa; font-size:16px; }
.lm__os-sub{ font-size:12px; color:#a6a6a6; margin:2px 0 12px; }
.lm__os-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 24px); margin:0 12px 12px; padding:10px; border-radius:12px; background:rgba(255,255,255,.06); color:#fafafa; font-size:14px; font-weight:600; transition:background .3s, color .3s; }
.lm__os:hover .lm__os-btn{ background:#f97316; color:#fff; }
.lm__os-btn .aw-ico{ width:16px; height:16px; }

.lm__help{ display:flex; align-items:center; gap:8px; margin:24px auto 0; padding:12px 20px; border-radius:12px; background:rgba(31,31,31,.8); border:1px solid #333; font-size:14px; color:#a6a6a6; transition:border-color .3s, background .3s, color .3s; }
.lm__help:hover{ border-color:#f97316; background:rgba(249,115,22,.1); color:#fafafa; }
.lm__help b{ color:#f97316; }
.lm__help .aw-ico{ width:18px; height:18px; flex-shrink:0; }
.lm__note{ text-align:center; color:rgba(255,255,255,.5); font-size:14px; margin:16px 0 0; }

.lm__card{ background:rgba(31,31,31,.95); border:1px solid #333; border-radius:16px; padding:24px; }
.lm__card-title{ margin:0; color:#fff; font-size:20px; font-weight:700; }
.lm__sub{ color:#a6a6a6; font-size:14px; margin:6px 0 0; line-height:1.5; }
.lm__warn{ display:flex; align-items:center; gap:10px; color:#f59e0b; }
.lm__warn .aw-ico{ width:24px; height:24px; flex-shrink:0; }
.lm__warn .lm__card-title{ color:#fff; }
.lm__row{ display:flex; align-items:center; gap:16px; padding:16px; border:1px solid #333; border-radius:12px; text-decoration:none; transition:border-color .3s, background .3s; margin-top:12px; }
.lm__row:hover{ border-color:rgba(249,115,22,.6); background:rgba(255,255,255,.04); }
.lm__row-badge{ flex-shrink:0; width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#f97316; }
.lm__row-badge--blue{ color:#3b82f6; }
.lm__row-text{ display:flex; flex-direction:column; }
.lm__row-text b{ color:#fafafa; font-size:15px; }
.lm__row-text small{ color:#a6a6a6; font-size:12px; }
.lm__row-dl{ width:20px; height:20px; color:#a6a6a6; margin-left:auto; }
.lm__row:hover .lm__row-dl{ color:#f97316; }
.lm__img{ width:100%; border-radius:12px; border:1px solid #333; margin:16px 0; display:block; }
.lm__steps{ list-style:none; padding:0; margin:0; }
.lm__steps li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#cfcfcf; margin-top:10px; line-height:1.5; }
.lm__steps li span{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:rgba(249,115,22,.2); color:#f97316; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.lm__steps li b{ color:#fafafa; }
.lm__safe{ display:flex; align-items:center; gap:8px; padding:12px; border-radius:12px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); color:#22c55e; font-size:14px; margin:16px 0 0; }
.lm__safe .aw-ico{ width:18px; height:18px; flex-shrink:0; }

@media (max-width: 600px){
  .lm{ padding:48px 12px 20px; }
  .lm__grid{ grid-template-columns:1fr; gap:12px; }
  .lm__title{ font-size:22px; margin-bottom:20px; }
  .lm__os-ico{ height:84px; }
  .lm__os-ico .aw-ico{ width:46px; height:46px; }
}

/* ============================================================
   Кнопка «Начать играть» (хедер) — ФИНАЛЬНЫЙ чистый вид.
   Градиент + верхний блик + плавный hover. Жёстко убираем
   любую декоративную «точку» справа (псевдоэлемент/элемент/outline).
   ============================================================ */
.navbar .aw-nav-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  height: 48px !important; padding: 0 24px !important; border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .01em !important;
  background: linear-gradient(135deg, #fb8b3c 0%, #f97316 48%, #ea580c 100%) !important;
  color: #fff !important; text-decoration: none !important; white-space: nowrap !important; border: 0 !important; outline: 0 !important;
  box-shadow: 0 10px 26px -10px rgba(249,115,22,.6), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.navbar .aw-nav-cta:hover {
  transform: translateY(-1px) scale(1.02) !important;
  background: linear-gradient(135deg, #fb8b3c 0%, #f97316 48%, #ea580c 100%) !important; color: #fff !important;
  box-shadow: 0 16px 38px -10px rgba(249,115,22,.7), inset 0 1px 0 rgba(255,255,255,.22) !important;
  filter: brightness(1.05) !important;
}
.navbar .aw-nav-cta:active { transform: translateY(0) scale(.97) !important; }
.navbar .aw-nav-cta .aw-ico {
  width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin: 0 !important;
  color: #fff !important; background-color: #fff !important; transition: transform .25s ease !important;
}
.navbar .aw-nav-cta:hover .aw-ico { transform: translateX(2px) !important; }
/* добиваем любую «точку» справа, чем бы она ни была */
.navbar .aw-nav-cta::before, .navbar .aw-nav-cta::after { content: none !important; display: none !important; background: none !important; }
.navbar .aw-nav-cta > *:not(.aw-ico) { display: none !important; }

/* ============================================================
   Убираем точки-разделители между пунктами меню (наследие темы
   pipui: body > .navbar .navbar-wrapper .nav-li:after).
   Та самая «точка справа», которую видно рядом с кнопкой.
   ============================================================ */
body > .navbar .navbar-wrapper .nav-li:after,
body > .navbar .navbar-wrapper .nav-li::after,
body > .navbar .navbar-wrapper .nav-li:before,
body > .navbar .navbar-wrapper .nav-li::before { content: none !important; display: none !important; background: none !important; }

/* ============================================================
   Кнопка «Начать играть» — компактнее и чуть квадратнее
   ============================================================ */
.navbar .aw-nav-cta { height: 46px !important; padding: 0 19px !important; border-radius: 10px !important; gap: 8px !important; }

/* ============================================================
   Герой — поднять контент/персонажа/машину выше, дать отступ снизу.
   Высота = экран, контент сверху, под ним «воздух».
   ============================================================ */
@media (min-width: 768px) {
  .aw-hero { min-height: calc(100vh - 96px) !important; padding-top: 78px !important; padding-bottom: 40px !important; align-items: flex-start !important; }
  .aw-hero__content { gap: 24px !important; }
  .aw-hero__character { bottom: 48px !important; }
  .aw-hero__ferrari { top: 62% !important; }
}

/* ============================================================
   ИКОНКИ для страницы «Сотрудничество» (lucide-маски)
   ============================================================ */
.aw-ico--check-circle-2 { -webkit-mask-image:url(../img/icons/check-circle-2.svg); mask-image:url(../img/icons/check-circle-2.svg); }
.aw-ico--bar-chart-3    { -webkit-mask-image:url(../img/icons/bar-chart-3.svg);    mask-image:url(../img/icons/bar-chart-3.svg); }
.aw-ico--trending-up    { -webkit-mask-image:url(../img/icons/trending-up.svg);    mask-image:url(../img/icons/trending-up.svg); }
.aw-ico--users          { -webkit-mask-image:url(../img/icons/users.svg);          mask-image:url(../img/icons/users.svg); }
.aw-ico--wallet         { -webkit-mask-image:url(../img/icons/wallet.svg);         mask-image:url(../img/icons/wallet.svg); }
.aw-ico--headphones     { -webkit-mask-image:url(../img/icons/headphones.svg);     mask-image:url(../img/icons/headphones.svg); }
.aw-ico--youtube        { -webkit-mask-image:url(../img/icons/youtube.svg);        mask-image:url(../img/icons/youtube.svg); }
.aw-ico--x-circle       { -webkit-mask-image:url(../img/icons/x-circle.svg);       mask-image:url(../img/icons/x-circle.svg); }
.aw-ico--message-circle { -webkit-mask-image:url(../img/icons/message-circle.svg); mask-image:url(../img/icons/message-circle.svg); }
.aw-ico--shield-check   { -webkit-mask-image:url(../img/icons/shield-check.svg);   mask-image:url(../img/icons/shield-check.svg); }
.aw-ico--help-circle    { -webkit-mask-image:url(../img/icons/help-circle.svg);    mask-image:url(../img/icons/help-circle.svg); }
.aw-ico--plus           { -webkit-mask-image:url(../img/icons/plus.svg);           mask-image:url(../img/icons/plus.svg); }

/* ============================================================
   СТРАНИЦА «СОТРУДНИЧЕСТВО» (медиа-партнёрство)
   ============================================================ */
.coop { position: relative; overflow: hidden; }
.coop__blob { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(64px); z-index: 0; }
.coop__blob--tl { top: 0; left: -120px; width: 420px; height: 420px; background: rgba(249,115,22,.05); }
.coop__blob--br { bottom: 0; right: -120px; width: 520px; height: 520px; background: rgba(249,115,22,.10); }
/* подстраховка: клипаем выносы блобов по обеим осям, чтобы не было пустоты под футером */
.main.coop { overflow-x: clip !important; overflow-y: clip !important; }

.coop-sec { position: relative; z-index: 1; padding: 52px 0; }
.coop-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.coop-container--lg { max-width: 1152px; }
.coop-container--md { max-width: 1024px; }
.coop-container--sm { max-width: 768px; }
@media (min-width: 1024px){ .coop-container { padding: 0 64px; } }

.reveal { opacity: 0; }
.reveal.is-in { animation: coop-rise .7s cubic-bezier(.23,1,.32,1) both; }
@keyframes coop-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.coop-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--aw-orange); background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.30); border-radius: 9999px; padding: 6px 16px; width: max-content; }
.coop-badge .aw-ico { width: 16px; height: 16px; color: var(--aw-orange); background-color: var(--aw-orange); }
.coop-accent { color: var(--aw-orange); }

.coop-hero { padding-top: 64px; padding-bottom: 40px; }
.coop-hero__inner { max-width: 768px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.coop-hero__title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -.02em; color: #fafafa; margin: 6px 0 0; }
.coop-dash { color: #fafafa; }
.coop-hero__text { font-size: 20px; line-height: 1.6; color: var(--aw-muted); margin: 0; }

.coop-head { text-align: center; margin: 0 auto 38px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.coop-h2 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(28px, 4vw, 36px); color: #fafafa; margin: 0; }
.coop-sub { font-size: 18px; color: var(--aw-muted); margin: 0; }

.coop-grid { display: grid; gap: 24px; }
@media (min-width: 640px){ .coop-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .coop-grid--3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.coop-card { background: rgba(28,28,28,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 2px solid var(--aw-border, #2a2a2a); border-radius: 24px; padding: 28px; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }

.coop-feature { display: flex; gap: 20px; align-items: flex-start; }
.coop-feature:hover { transform: translateY(-6px); border-color: rgba(249,115,22,.5); box-shadow: 0 22px 44px -22px rgba(249,115,22,.35); }
.coop-icobox { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.20); display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.coop-card:hover .coop-icobox { transform: scale(1.1); }
.coop-icobox .aw-ico { width: 28px; height: 28px; color: var(--aw-orange); background-color: var(--aw-orange); }
.coop-card__title { font-size: 20px; font-weight: 700; line-height: 1.3; color: #fafafa; margin: 0 0 8px; }
.coop-card__text { font-size: 15px; line-height: 1.6; color: var(--aw-muted); margin: 0; }

.coop-tariff { display: flex; flex-direction: column; border-radius: 28px; padding: 32px; }
.coop-tariff:hover { transform: translateY(-6px); border-color: rgba(249,115,22,.5); }
.coop-tariff .coop-icobox { margin-bottom: 20px; }
/* заголовок тарифа — резервируем 2 строки, чтобы ставки выровнялись по высоте */
.coop-tariff .coop-card__title { min-height: 2.6em; display: flex; align-items: flex-start; }
.coop-rate { margin: 12px 0 4px; }
.coop-rate__num { display: block; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; color: var(--aw-orange); white-space: nowrap; }
.coop-rate__sub { font-size: 14px; color: var(--aw-muted); }
.coop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.coop-list--mt { margin-top: 24px; }
.coop-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #d6d6d6; }
.coop-list li .aw-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--aw-orange); background-color: var(--aw-orange); margin-top: 1px; }
.coop-tariff .coop-list { margin-top: auto; }
.coop-tariff--best { position: relative; border-color: var(--aw-orange); box-shadow: 0 0 0 1px var(--aw-orange), 0 26px 54px -22px rgba(249,115,22,.35); }
@media (min-width: 1024px){ .coop-tariff--best { transform: translateY(-12px); } .coop-tariff--best:hover { transform: translateY(-16px); } }
.coop-tariff__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--aw-orange); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 6px 14px; border-radius: 9999px; box-shadow: 0 8px 20px -6px rgba(249,115,22,.6); }
.coop-tariff__badge .aw-ico { width: 14px; height: 14px; color: #fff; background-color: #fff; }
.coop-note { max-width: 672px; margin: 32px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--aw-muted); }

.coop-rules { border-radius: 28px; padding: 32px; }
.coop-rules__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.coop-rules__title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 24px; color: #fafafa; margin: 0; }
.coop-rules--bad { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.30); }
.coop-icobox--bad { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.22); }
.coop-icobox--bad .aw-ico { color: #ef4444; background-color: #ef4444; }
.coop-list--bad li .aw-ico { color: #ef4444; background-color: #ef4444; }

.coop-steps { display: grid; gap: 32px; }
@media (min-width: 768px){ .coop-steps { grid-template-columns: repeat(3, 1fr); } }
.coop-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.coop-step__num { width: 64px; height: 64px; border-radius: 18px; background: var(--aw-orange); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -8px rgba(249,115,22,.5); margin-bottom: 8px; }
.coop-step__title { font-size: 20px; font-weight: 700; color: #fafafa; margin: 0; }
.coop-step__text { font-size: 15px; line-height: 1.6; color: var(--aw-muted); margin: 0; max-width: 320px; }
@media (min-width: 768px){
  .coop-step:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: calc(50% + 50px); right: calc(-50% + 50px); height: 2px; background: linear-gradient(90deg, rgba(249,115,22,.4), transparent); }
}

.coop-faq { display: flex; flex-direction: column; gap: 12px; }
.coop-faq__item { background: rgba(28,28,28,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 2px solid var(--aw-border, #2a2a2a); border-radius: 16px; transition: border-color .3s ease; }
.coop-faq__item.is-open { border-color: rgba(249,115,22,.5); }
.coop-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 16px; font-weight: 700; color: #fafafa; }
.coop-faq__ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--aw-orange); background-color: var(--aw-orange); transition: transform .3s ease; }
.coop-faq__item.is-open .coop-faq__ico { transform: rotate(45deg); }
.coop-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.coop-faq__item.is-open .coop-faq__a { grid-template-rows: 1fr; }
.coop-faq__a-in { overflow: hidden; font-size: 15px; line-height: 1.65; color: var(--aw-muted); padding: 0 20px; }
.coop-faq__item.is-open .coop-faq__a-in { padding: 0 20px 20px; }

.coop-cta { position: relative; text-align: center; background: rgba(28,28,28,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(249,115,22,.30); border-radius: 28px; padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: hidden; }
.coop-cta__glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% -10%, rgba(249,115,22,.16), transparent 55%); pointer-events: none; }
.coop-icobox--lg { width: 64px; height: 64px; border-radius: 18px; position: relative; }
.coop-icobox--lg .aw-ico { width: 30px; height: 30px; }
.coop-cta__title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(24px, 3vw, 30px); color: #fafafa; margin: 8px 0 0; position: relative; }
.coop-cta__text { font-size: 16px; line-height: 1.6; color: var(--aw-muted); margin: 0; max-width: 540px; position: relative; }
.coop-cta__btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 32px; border-radius: 14px; background: var(--aw-orange); color: #fff !important; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 14px 32px -10px rgba(249,115,22,.6); transition: transform .2s ease, filter .2s ease; margin-top: 8px; }
.coop-cta__btn:hover, .coop-cta__btn:focus, .coop-cta__btn:active { transform: scale(1.02); filter: brightness(1.05); color: #fff !important; }
.coop-cta__btn .aw-ico, .coop-cta__btn:hover .aw-ico { width: 20px; height: 20px; color: #fff !important; background-color: #fff !important; }
.coop-cta__note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--aw-muted); margin: 8px 0 0; position: relative; }
.coop-cta__note .aw-ico { width: 16px; height: 16px; color: var(--aw-muted); background-color: var(--aw-muted); }

@media (max-width: 640px){
  .coop-sec { padding: 44px 0; }
  .coop-hero { padding-top: 52px; }
  .coop-hero__text { font-size: 17px; }
  .coop-feature { flex-direction: column; gap: 14px; }
  .coop-cta { padding: 28px 22px; }
}

/* ============================================================
   Модалка покупки: кастомный слайдер количества + чипы выбора
   ============================================================ */
/* Степпер количества в детальной модалке — как в корзине, крупнее (ползунок/чипы убраны) */
.donate-panel[data-id="donate"] .donate-stepper { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.donate-panel[data-id="donate"] .donate-stepper__btn {
  flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid var(--aw-border, #2a2a2a); border-radius: 12px;
  background: #131316; color: var(--aw-muted); font-size: 24px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.donate-panel[data-id="donate"] .donate-stepper__btn:hover { background: rgba(249,115,22,.16); color: var(--aw-orange); border-color: rgba(249,115,22,.5); }
.donate-panel[data-id="donate"] .donate-stepper__btn:active { transform: scale(.94); }
/* поле — источник истины (#donate-amount). !important перебивает глобальные input-стили pipui/темы */
.donate-panel[data-id="donate"] .donate-stepper__input {
  flex: 1 1 auto; min-width: 0; width: auto !important; height: 48px !important; box-sizing: border-box !important;
  margin: 0 !important; padding: 0 10px !important; border: 1px solid var(--aw-border, #2a2a2a) !important; border-radius: 12px !important;
  background: rgba(255,255,255,.05) !important; box-shadow: none !important; outline: none !important;
  text-align: center !important; color: #fafafa !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; line-height: 46px !important;
  -moz-appearance: textfield; transition: border-color .15s, box-shadow .15s;
}
.donate-panel[data-id="donate"] .donate-stepper__input:focus { border-color: var(--aw-orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important; }
.donate-panel[data-id="donate"] .donate-stepper__input::-webkit-outer-spin-button,
.donate-panel[data-id="donate"] .donate-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.donate-panel[data-id="donate"] .donate-stepper__unit { flex: 0 0 auto; font-size: 15px; font-weight: 600; color: var(--aw-muted); white-space: nowrap; }

/* ============================================================
   Цена на карточке — салатовый цвет + лёгкое свечение, аккуратнее
   (цвет в переменной --aw-price — легко подкрутить)
   ============================================================ */
:root { --aw-price: #fafafa; }
.item-id .card-price__new, .item-id .card-price__new .rub { color: var(--aw-price) !important; }
.item-id .card-price__new {
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important;
  font-size: 23px !important; letter-spacing: .2px !important;
  text-shadow: none !important;
}
.item-id .card-price__new .rub { font-weight: 700 !important; opacity: .9; }

/* ============================================================
   Кнопка «Купить» в модалке покупки — по центру и на всю ширину
   ============================================================ */
.donate-panel[data-id="donate"] .modal-footer {
  display: flex !important; justify-content: center !important; align-items: center !important;
  padding: 18px 26px 26px !important;
}
.donate-panel[data-id="donate"] .modal-footer .btn,
.donate-panel[data-id="donate"] #donate-checkout-trigger {
  width: 100% !important; max-width: none !important; flex: 1 1 100% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 56px !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 800 !important;
}

/* ============================================================
   ПРЕМИУМ-МОДАЛКА ПОКУПКИ: шапка-герой с артом, тонкий скролл,
   галочки, поле ника, иконка корзины, плавное появление.
   (рестайл существующей модалки — JS покупки не тронут)
   ============================================================ */
.modal.donate-panel[data-id="donate"] > .wrapper > .modal-content {
  display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden !important;
  max-width: 460px !important; width: 94vw !important; max-height: min(calc(100vh - 200px), 740px) !important;
  background: linear-gradient(180deg, #1c1c1c, #141414) !important; border: 1px solid #2a2a2a !important; border-radius: 20px !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7) !important;
  animation: donate-pm-in .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes donate-pm-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
/* На телефонах не центрируем (иначе высокая модалка налезает на шапку или тело
   схлопывается): крепим под хедер сверху и отдаём телу весь остаток высоты. */
@media (max-width: 600px) {
  .modal.donate-panel[data-id="donate"] > .wrapper {
    align-items: start !important; padding-top: 92px !important; padding-bottom: 16px !important;
  }
  .modal.donate-panel[data-id="donate"] > .wrapper > .modal-content {
    max-height: calc(100vh - 120px) !important; width: 94vw !important;
  }
}

/* ШАПКА-ГЕРОЙ */
.donate-hero { position: relative; height: 150px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, #2a1a0e, #161616); }
.donate-hero__art { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.donate-hero.no-art .donate-hero__art { display: none; }
.donate-hero__crown { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.donate-hero.no-art .donate-hero__crown { display: flex; }
.donate-hero__crown .aw-ico { width: 64px; height: 64px; color: rgba(249,115,22,.5); background-color: rgba(249,115,22,.5); }
.donate-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #1c1c1c 6%, rgba(28,28,28,.35) 48%, rgba(0,0,0,.35)); pointer-events: none; z-index: 1; }
.donate-hero__info { position: absolute; left: 24px; right: 24px; bottom: 16px; z-index: 2; }
.donate-hero__info .modal-header { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 26px !important; line-height: 1.1 !important; color: #fafafa !important; border: 0 !important; padding: 0 !important; margin: 0 !important; letter-spacing: -.01em !important; }
.donate-hero__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.donate-hero__price-new { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--aw-price, #5fe070); }
.donate-hero__price-new .rub { color: inherit; }
.donate-hero__price-old { font-size: 14px; color: #777; text-decoration: line-through; }
.donate-hero__close { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; z-index: 3 !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: rgba(0,0,0,.5) !important; color: #fff !important; border: 0 !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s ease; }
.donate-hero__close:hover { background: rgba(0,0,0,.78) !important; color: #fff !important; }
.donate-hero__close .aw-ico { width: 20px !important; height: 20px !important; color: #fff !important; background-color: #fff !important; }

/* ТЕЛО: скролл + тонкий оранжевый скроллбар */
.modal.donate-panel[data-id="donate"] .modal-body { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; padding: 16px 24px !important; }

/* «Получение товара» — компактная подсказка под кнопкой (всегда видна, ничего не раскрывается → не налезает) */
/* подсказка /storage — под заголовком «Покупка доната»: просто иконка + текст,
   без «коробки» (фон/рамку/бейдж убрали) */
.donate-head .donate-claim {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 0; padding: 0; max-width: 100%;
  background: none; border: 0; border-radius: 0;
}
.donate-head .donate-claim__badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; border: 0; background: none; border-radius: 0;
}
.donate-head .donate-claim__badge i { width: 15px; height: 15px; color: var(--aw-orange); background-color: var(--aw-orange); }
.donate-head .donate-claim__text {
  display: block; font-size: 12.5px; line-height: 1.45; color: var(--aw-muted); text-align: left;
}
.donate-head .donate-claim__line { display: inline; }
.donate-head .donate-claim__text code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--aw-orange); background: none; border: 0; padding: 0; white-space: nowrap;
}
.modal.donate-panel[data-id="donate"] .modal-body::-webkit-scrollbar { width: 6px !important; }
.modal.donate-panel[data-id="donate"] .modal-body::-webkit-scrollbar-track { background: transparent !important; }
.modal.donate-panel[data-id="donate"] .modal-body::-webkit-scrollbar-thumb { background: var(--aw-orange) !important; border-radius: 8px !important; }
.modal.donate-panel[data-id="donate"] .donate-description { max-height: none !important; overflow: visible !important; }
/* цену в теле прячем — она теперь в шапке и на кнопке */
.modal.donate-panel[data-id="donate"] .donate-current-price { display: none !important; }

/* БУЛЛЕТЫ — галочки check-circle вместо квадратов */
.donate-description .text .perk-list li { padding-left: 28px !important; }
.donate-description .text .perk-list li::before {
  width: 18px !important; height: 18px !important; top: 0 !important; left: 0 !important; border-radius: 0 !important; background: var(--aw-orange) !important;
  -webkit-mask: url(../img/icons/check-circle-2.svg) center / contain no-repeat !important; mask: url(../img/icons/check-circle-2.svg) center / contain no-repeat !important;
}

/* ФУТЕР + ПОЛЕ НИКА */
.modal.donate-panel[data-id="donate"] .modal-footer { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; padding: 16px 24px 20px !important; border-top: 1px solid #2a2a2a !important; background: rgba(0,0,0,.2) !important; text-align: left !important; }
.donate-nick__label { display: block; font-size: 12px; color: var(--aw-muted); margin: 0 0 6px; }
.donate-nick__input { width: 100%; height: 46px; padding: 0 14px; margin: 0 0 12px; background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 12px; color: #fafafa; font-size: 15px; font-family: inherit; transition: border-color .25s ease, box-shadow .25s ease; }
.donate-nick__input::placeholder { color: #8f8f8f; }
.donate-nick__input:focus { outline: none; border-color: var(--aw-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
/* иконка корзины на кнопке (JS перезаписывает текст — иконку даём через ::before) */
.modal.donate-panel[data-id="donate"] #donate-checkout-trigger { gap: 8px !important; }
.modal.donate-panel[data-id="donate"] #donate-checkout-trigger::before {
  content: "" !important; width: 18px; height: 18px; flex-shrink: 0; background: #fff;
  -webkit-mask: url(../img/icons/shopping-cart.svg) center / contain no-repeat; mask: url(../img/icons/shopping-cart.svg) center / contain no-repeat;
}

/* ============================================================
   Окно оформления покупки (#checkoutform) — из сине-голубой
   палитры в нашу тёмно-оранжевую. Ник/почта/промо.
   ============================================================ */
#checkoutform.modal { background: rgba(0,0,0,.8) !important; }
body #checkoutform.modal > .wrapper > .modal-content {
  background: linear-gradient(180deg, #1c1c1c, #141414) !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 28px 80px -20px rgba(0,0,0,.7) !important;
}
#checkoutform .modal-header { color: #fafafa !important; border-bottom-color: #2a2a2a !important; }
#checkoutform .input-block > label { color: #a6a6a6 !important; }
#checkoutform .input-helper { color: #777 !important; }
#checkoutform .input-prepend { background: #0f0f0f !important; border: 1px solid #2a2a2a !important; box-shadow: none !important; }
#checkoutform .input-prepend:focus-within { border-color: var(--aw-orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important; transform: none !important; }
#checkoutform .input-prepend > input { color: #fafafa !important; }
#checkoutform .input-prepend > input::placeholder { color: #8f8f8f !important; }
#checkoutform .input-prepend > .prepend { color: var(--aw-orange) !important; background: rgba(249,115,22,.08) !important; }
#checkoutform .input-prepend > .prepend i, #checkoutform .input-prepend > .prepend svg { color: var(--aw-orange) !important; }
#checkoutform .checkout-footer { border-top-color: #2a2a2a !important; }
#checkoutform .checkout-footer .btn:not([data-modal-close]) { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff !important; box-shadow: 0 12px 28px -8px rgba(249,115,22,.5) !important; }
#checkoutform .checkout-footer .btn[data-modal-close] { color: #a6a6a6 !important; }
#checkoutform .checkout-footer .btn[data-modal-close]:hover { color: #fafafa !important; }

/* ============================================================
   Поля ник/почта/промо перенесены в модалку покупки (одна модалка
   на весь процесс). Тёмная тема, оранжевые иконки, компактно.
   ============================================================ */
.modal.donate-panel[data-id="donate"] .modal-footer { padding: 14px 24px 18px !important; }
/* Поля ник/почта/промо в детальной модалке СКРЫТЫ: кнопка «Купить» теперь ведёт в корзину,
   а эти данные спрашиваются уже в самой корзине (иначе поля висели бы без дела). */
.modal.donate-panel[data-id="donate"] .modal-footer .donate-fields { display: none !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-block { margin: 0 !important; padding: 0 !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend { position: relative !important; background: #0f0f0f !important; border: 1px solid #2a2a2a !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend:focus-within { border-color: var(--aw-orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend > input { width: 100% !important; height: 46px !important; line-height: 46px !important; padding: 0 14px 0 48px !important; background: transparent !important; border: 0 !important; color: #fafafa !important; font-size: 15px !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend > input::placeholder { color: #8f8f8f !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend > .prepend { position: absolute !important; left: 0 !important; top: 0 !important; width: 40px !important; min-width: 40px !important; height: 46px !important; line-height: 46px !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--aw-orange) !important; background: rgba(249,115,22,.08) !important; border: 0 !important; border-radius: 0 !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend > .prepend i { color: var(--aw-orange) !important; }

/* ============================================================
   КОМПАКТНАЯ ПЛОТНОСТЬ — чтобы товары с ползунком (описание +
   слайдер + поле + чипсы + бонус + 3 поля) помещались целиком.
   Все поля остаются видимыми, просто плотнее.
   ============================================================ */
/* тело — меньше вертикальных отступов */
.modal.donate-panel[data-id="donate"] .modal-body { padding-top: 14px !important; padding-bottom: 14px !important; }
/* описание — компактнее (мельче шрифт/паддинг, плотнее перк-лист) */
.modal.donate-panel[data-id="donate"] .donate-description { margin-bottom: 12px !important; }
.modal.donate-panel[data-id="donate"] .donate-description .text { padding: 11px 13px !important; font-size: 13px !important; line-height: 1.4 !important; }
.modal.donate-panel[data-id="donate"] .donate-description .text .perk-list { gap: 6px !important; }
.modal.donate-panel[data-id="donate"] .donate-description .text .perk-list li { font-size: 12.5px !important; line-height: 1.35 !important; }
.modal.donate-panel[data-id="donate"] .donate-description .text .perk-title { margin: 0 0 8px !important; }
/* блок количества — убираем большой нижний отступ, поджимаем элементы */
.donate-panel[data-id="donate"] #input-amount { padding-bottom: 0 !important; }
.donate-panel[data-id="donate"] #input-amount .range-container { padding: 2px 0 0 !important; }
.donate-panel[data-id="donate"] #input-amount .input-prepend { margin-top: 8px !important; }
.donate-panel[data-id="donate"] #input-amount .input-prepend > input { height: 44px !important; line-height: 44px !important; font-size: 17px !important; }
.donate-panel[data-id="donate"] #input-amount .input-prepend > .prepend { height: 44px !important; line-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.donate-panel[data-id="donate"] #input-amount .input-prepend > .prepend .aw-ico { width: 18px !important; height: 18px !important; margin: 0 !important; vertical-align: middle !important; color: var(--aw-muted) !important; background-color: var(--aw-muted) !important; }
.donate-panel[data-id="donate"] .amount-chips { margin-top: 8px !important; gap: 6px !important; }
.donate-panel[data-id="donate"] .amount-chip { padding: 6px 6px !important; font-size: 13px !important; border-radius: 9px !important; }
/* подсказку под слайдером прячем — экономит ~24px, и так понятно */
.donate-panel[data-id="donate"] .input-helper { display: none !important; }
/* бонус — компактнее */
.donate-panel[data-id="donate"] .block-bonus { margin-top: 10px !important; padding: 9px 12px !important; }
.donate-panel[data-id="donate"] .block-bonus .bonus-row { font-size: 13px !important; }
/* поля футера — ниже и плотнее (input + иконка-бокс согласованно 42px) */
.modal.donate-panel[data-id="donate"] .modal-footer { padding: 12px 22px 16px !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .donate-fields { gap: 6px !important; margin-bottom: 22px !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend > input { height: 42px !important; line-height: 42px !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend > .prepend { height: 42px !important; line-height: 42px !important; }
.modal.donate-panel[data-id="donate"] .modal-footer .btn,
.modal.donate-panel[data-id="donate"] #donate-checkout-trigger { min-height: 50px !important; }
/* кнопка покупки кратко неактивна только во время пересчёта цены ("Считаем...") */
.modal.donate-panel[data-id="donate"] #donate-checkout-trigger:disabled {
  opacity: .6 !important; cursor: progress !important; box-shadow: none !important;
}
/* подсветка поля ника, если нажали «Купить» без ника */
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend.field-error {
  border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
  animation: aw-field-shake .4s ease;
}
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend.field-error > .prepend {
  color: #ef4444 !important; background: rgba(239,68,68,.10) !important;
}
.modal.donate-panel[data-id="donate"] .modal-footer .input-prepend.field-error > .prepend i { color: #ef4444 !important; }
@keyframes aw-field-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ============================================================
   ОКНО ВЫБОРА ОПЛАТЫ (#methodform) — тёмно-оранжевая тема вместо
   синей (style.css грузится позже → бьём повышенной специфичностью),
   методы оплаты карточками: иконка + название + описание + стрелка.
   ============================================================ */
/* центрирование + тёмная панель (перебиваем style.css display:block/синь) */
body #methodform.modal > .wrapper,
.modal[data-id="method"] > .wrapper {
  display: grid !important; align-items: center !important; justify-items: center !important;
  margin: auto !important; height: calc(100vh - 40px) !important; width: 100% !important;
  grid-template-columns: 100% !important; overflow: auto !important;
}
body #methodform.modal > .wrapper > .modal-content,
.modal[data-id="method"] > .wrapper > .modal-content {
  position: relative !important; width: 94vw !important; max-width: 420px !important;
  max-height: min(calc(100vh - 200px), 600px) !important;
  padding: 24px !important; border-radius: 20px !important;
  background: linear-gradient(180deg, #1c1c1c, #141414) !important;
  border: 1px solid #2a2a2a !important; color: var(--aw-text) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7) !important;
  animation: donate-pm-in .3s cubic-bezier(.2,.8,.2,1);
}
body #methodform.modal .modal-header {
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important;
  font-size: 22px !important; line-height: 1.15 !important; color: #fafafa !important;
  border: 0 !important; padding: 0 0 14px !important; margin: 0 0 6px !important;
  border-bottom: 1px solid #2a2a2a !important; letter-spacing: -.01em !important;
}
body #methodform.modal .modal-body { padding: 14px 0 0 !important; background: transparent !important; }
.pay-methods-hint { margin: 0 0 14px !important; font-size: 12.5px !important; line-height: 1.45 !important; color: var(--aw-muted) !important; }

/* инлайн-уведомление внутри окна оплаты (вместо модалки поверх модалки) */
.pay-method-notice {
  display: none; margin: 0 0 14px; padding: 13px 15px 13px 44px; position: relative;
  border-radius: 12px; background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.35);
}
.pay-method-notice.show { display: block; animation: aw-field-shake .4s ease; }
.pay-method-notice::before {
  content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px;
  background-color: var(--aw-orange);
  -webkit-mask: url(../img/icons/alert-triangle.svg) center / contain no-repeat;
  mask: url(../img/icons/alert-triangle.svg) center / contain no-repeat;
}
.pay-method-notice__title {
  display: block; font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 14.5px; color: #fafafa; line-height: 1.15; margin-bottom: 3px;
}
.pay-method-notice__text { display: block; font-size: 13px; line-height: 1.45; color: #d6c2b0; font-weight: 500; }

/* список без маркеров и базовых стилей pipui */
ul.pay-methods { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
ul.pay-methods > li { margin: 0 !important; padding: 0 !important; }

/* карточка метода */
.pay-method {
  display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important;
  padding: 12px 14px !important; border-radius: 14px !important; cursor: pointer !important; text-align: left !important;
  background: #161616 !important; border: 1px solid #2a2a2a !important; color: var(--aw-text) !important;
  background-image: none !important;
  transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.pay-method:hover { border-color: var(--aw-orange) !important; background: #1b1b1b !important; transform: translateY(-1px) !important; box-shadow: 0 8px 22px -10px rgba(249,115,22,.5) !important; }
.pay-method:active { transform: translateY(0) scale(.995) !important; }
.pay-method:disabled { opacity: .55 !important; cursor: progress !important; transform: none !important; }

.pay-method__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: #0f0f0f; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pay-method__icon img { width: 30px; height: 30px; object-fit: contain; display: block; }
.pay-method__icon--themed { background: rgba(249,115,22,.10); border-color: rgba(249,115,22,.30); }
.pay-method__icon--themed .aw-ico { width: 26px; height: 26px; color: var(--aw-orange); background-color: var(--aw-orange); }

.pay-method__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pay-method__name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: #fafafa; line-height: 1.2; }
.pay-method__desc { font-size: 12px; color: var(--aw-muted); line-height: 1.3; }

.pay-method__chevron { flex: 0 0 auto; display: flex; align-items: center; }
.pay-method__chevron .aw-ico { width: 20px; height: 20px; color: #666; background-color: #666; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.pay-method:hover .pay-method__chevron .aw-ico { color: var(--aw-orange); background-color: var(--aw-orange); transform: translateX(3px); }

/* рекомендуемый метод (CentApp) — акцент карточки + бейдж «Рекомендуем» (он выгоднее по комиссии) */
.pay-method--rec { border-color: rgba(249,115,22,.5) !important; background: linear-gradient(180deg, rgba(249,115,22,.10), rgba(249,115,22,.025)) !important; box-shadow: 0 0 0 1px rgba(249,115,22,.12) inset !important; }
.pay-method--rec:hover { border-color: var(--aw-orange) !important; background: linear-gradient(180deg, rgba(249,115,22,.16), rgba(249,115,22,.05)) !important; }
.pay-method__rec {
  align-self: flex-start !important; display: inline-flex !important; align-items: center !important; gap: 5px !important;
  margin: 0 0 3px !important; padding: 2px 9px !important; border-radius: 999px !important;
  background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff !important;
  font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 10px !important;
  letter-spacing: .4px !important; text-transform: uppercase !important; line-height: 1.5 !important;
  box-shadow: 0 5px 14px -6px rgba(249,115,22,.75) !important; white-space: nowrap !important;
}
.pay-method__rec i { font-size: 9px !important; }

/* на телефонах — крепим под хедер, как donate-модалку */
@media (max-width: 600px) {
  body #methodform.modal > .wrapper { align-items: start !important; padding-top: 92px !important; padding-bottom: 16px !important; }
  body #methodform.modal > .wrapper > .modal-content { max-height: calc(100vh - 120px) !important; }
}

/* ============================================================
   КРАСИВЫЙ АЛЕРТ (pipui.alert) — был синий и внизу экрана.
   Делаем тёмно-оранжевый по центру с затемнением фона.
   :not(:empty) — чтобы ПУСТОЙ контейнер не затемнял весь сайт.
   ============================================================ */
body .alert:not(:empty) {
  position: fixed !important; inset: 0 !important; z-index: 100000 !important;
  width: 100% !important; height: 100% !important; margin: 0 !important; padding: 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(0,0,0,.62) !important;
}
body .alert .alert-id {
  position: relative !important; inset: auto !important; left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important;
  width: 92vw !important; max-width: 380px !important; padding: 24px !important;
  background: linear-gradient(180deg, #1c1c1c, #141414) !important;
  border: 1px solid #2a2a2a !important; border-radius: 18px !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.75) !important; color: var(--aw-text) !important;
  animation: donate-pm-in .25s cubic-bezier(.2,.8,.2,1);
}
/* footer «растворяем» — заголовок и кнопка становятся прямыми flex-детьми бокса,
   чтобы расставить их через order: заголовок сверху, текст, кнопка снизу */
body .alert .alert-footer { display: contents !important; }
/* 1) Заголовок «Внимание!» сверху + оранжевая иконка-предупреждение */
body .alert .alert-footer .block-left { order: 1 !important; display: flex !important; align-items: center !important; gap: 11px !important; }
body .alert .alert-footer .block-left::before {
  content: "" !important; flex: 0 0 auto !important; width: 24px !important; height: 24px !important;
  background-color: var(--aw-orange) !important;
  -webkit-mask: url(../img/icons/alert-triangle.svg) center / contain no-repeat !important;
  mask: url(../img/icons/alert-triangle.svg) center / contain no-repeat !important;
}
body .alert .alert-footer .block-left .title {
  color: #fafafa !important; font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important; font-size: 18px !important; margin: 0 !important; line-height: 1.1 !important;
}
/* 2) Текст сообщения — посередине, без «капсулы» (убираем рамку/фон/паддинг от базового правила) */
body .alert .alert-content {
  order: 2 !important; color: #c9c9c9 !important; font-size: 14.5px !important; line-height: 1.5 !important;
  font-weight: 500 !important; margin: 14px 0 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
/* иконка по типу: успех → зелёная галочка, ошибка → красный крест (иначе оранжевый треугольник) */
body .alert.aw-alert--success .alert-footer .block-left::before {
  background-color: #34d399 !important;
  -webkit-mask: url(../img/icons/check-circle-2.svg) center / contain no-repeat !important;
  mask: url(../img/icons/check-circle-2.svg) center / contain no-repeat !important;
}
/* кнопка «Закрыть» в любом алерте — оранжевая (как везде по теме); зелёный выбивался.
   Успех виден по зелёной галочке и заголовку. */
body .alert.aw-alert--error .alert-footer .block-left::before {
  background-color: #ef4444 !important;
  -webkit-mask: url(../img/icons/x-circle.svg) center / contain no-repeat !important;
  mask: url(../img/icons/x-circle.svg) center / contain no-repeat !important;
}
/* 3) Кнопка — снизу, во всю ширину */
body .alert .alert-footer .block-right { order: 3 !important; margin-top: 20px !important; display: flex !important; width: 100% !important; text-align: center !important; }
body .alert .alert-footer .block-right .btn {
  flex: 1 1 auto !important; box-sizing: border-box !important; display: block !important; margin: 0 !important;
  /* сброс pipui .btn { height:36px; line-height:35px } — иначе padding игнорируется и текст не по центру */
  height: auto !important; line-height: 1.2 !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important; float: none !important;
  background: var(--aw-orange) !important; color: #fff !important; border: 0 !important;
  border-radius: 12px !important; padding: 13px 24px !important; font-weight: 800 !important; font-size: 14px !important;
  text-align: center !important; letter-spacing: .3px !important; cursor: pointer !important; transition: background .2s ease, transform .1s ease; box-shadow: none !important;
}
body .alert .alert-footer .block-right .btn:hover { background: var(--aw-orange-2) !important; color: #fff !important; }
body .alert .alert-footer .block-right .btn:active { transform: scale(.98) !important; }

/* подложка (фон-затемнение) модалок оплаты была тёмно-синей (#020617 slate-950) —
   делаем нейтрально-тёмной, как у donate-модалки (особенно заметно на мобильном) */
body #methodform.modal, .modal[data-id="method"],
body #numberform.modal, .modal[data-id="number"] { background: rgba(0,0,0,.58) !important; }

/* ============================================================
   Инлайн-ошибка под полем ника (вместо popup — без дублей/наложений)
   ============================================================ */
.modal.donate-panel[data-id="donate"] .field-hint {
  display: none; margin: 7px 2px 0; font-size: 12px; line-height: 1.4; font-weight: 600; color: #f87171;
}
.modal.donate-panel[data-id="donate"] .field-hint.show { display: block; animation: aw-field-shake .4s ease; }

/* Подсказка-«чип» под полем промокода: статус слева + бейдж экономии справа */
.modal.donate-panel[data-id="donate"] .promo-hint.show {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 2px 0; padding: 8px 12px; border-radius: 12px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; animation: none;
}
.modal.donate-panel[data-id="donate"] .promo-hint.is-ok {
  color: #5fe070 !important;
  background: rgba(95,224,112,.10); border: 1px solid rgba(95,224,112,.28);
}
.modal.donate-panel[data-id="donate"] .promo-hint.is-bad {
  color: #f87171 !important;
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.28);
}
.modal.donate-panel[data-id="donate"] .promo-hint.is-bad.show { animation: aw-field-shake .4s ease; }
.modal.donate-panel[data-id="donate"] .promo-hint__ico { font-size: 14px; flex: 0 0 auto; }
.modal.donate-panel[data-id="donate"] .promo-hint__text { font-weight: 700; }
.modal.donate-panel[data-id="donate"] .promo-hint__save {
  margin-left: auto; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-weight: 800; color: #5fe070;
  background: rgba(95,224,112,.16); border: 1px solid rgba(95,224,112,.40);
}
.modal.donate-panel[data-id="donate"] .promo-hint .rub { opacity: .85; }

/* Страховка для оставшихся pipui-алертов (ошибки оплаты): если их вдруг
   несколько — показываем только ПОСЛЕДНИЙ и столбиком по центру, а не в ряд */
body .alert:not(:empty) { flex-direction: column !important; gap: 12px !important; }
body .alert .alert-id:not(:last-of-type) { display: none !important; }

/* бейдж «от 100 ₽» у метода cent.app/СБП (сервер требует минимум 100₽ для centapp) */
.pay-method__name .pay-method__badge {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  padding: 2px 8px; border-radius: 999px; font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px; line-height: 1.5;
  color: var(--aw-orange); background: rgba(249,115,22,.14); border: 1px solid rgba(249,115,22,.30);
}

/* парная иконка метода cent.app: карта + СБП рядом (он проводит оба).
   Тёмный тайл — как у остальных иконок (цельный вид).
   Карта «широкая», СБП «высокий» → задаём ОДИНАКОВУЮ высоту индивидуально,
   чтобы визуально читались одного размера. */
.pay-method__icon--combo { gap: 4px !important; padding: 0 3px !important; }
.pay-method__icon--combo img { object-fit: contain !important; }
.pay-method__icon--combo img[src*="bankcard"] { width: 23px !important; height: 16px !important; }
.pay-method__icon--combo img[src*="sbp"] { width: 13px !important; height: 16px !important; }

/* ============================================================
   АДМИН-ПАНЕЛЬ — тёмная тема в стиле сайта (перебиваем синий/белый pipui).
   Всё scoped под .admin, чтобы не задеть публичную часть.
   ============================================================ */
.admin .tabs { padding-top: 0 !important; margin-bottom: 24px !important; } /* отступ бара табов от окна контента (на самом .tabs: ul внутри grid его «съедает») */
/* окно админки центрируем по вертикали между хедером и футером:
   body тянется на всю высоту и раскладывается колонкой, контейнер растёт (flex:1) и
   центрирует .admin (safe center — при высоком контенте прижимает к верху, без обрезки),
   футер прижат к низу. Горизонтальные поля как у футера (clamp ...24px) — края панели
   совпадают с краями контента футера. Всё scoped через :has(.admin), фронт не задет. */
body:has(> .container > .admin) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(> .container > .admin) > footer { flex: 0 0 auto; }
body > .container:has(> .admin) {
  min-height: 0 !important;          /* снимаем calc(100vh-200) из pipui.theme, иначе flex не сожмёт контейнер */
  flex: 1 1 auto;                    /* контейнер заполняет место между навбаром и футером */
  display: flex;
  flex-direction: column;
  justify-content: safe center;      /* .admin ровно по центру; при высоком контенте — от верха, без обрезки */
  /* навбар sticky уже занимает место сверху, поэтому симметрично 24/24 → равные зазоры */
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  padding-inline: clamp(16px, 4vw, 24px) !important;
}
.admin .tab-links, .admin .tab-links.bg-indigo-i {
  display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 6px !important;
  background: var(--aw-card, #161616) !important;
  border: 1px solid #262626 !important; border-radius: 14px !important;
  padding: 5px !important; margin: 0 !important; list-style: none !important;
  overflow-x: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important;
}
.admin .tab-links::-webkit-scrollbar { height: 0 !important; display: none !important; }
.admin .tab-links > li { flex: 1 1 auto !important; } /* равномерно заполняют ширину бара, без растянутых дыр */
.admin .tab-links > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.admin .tab-links > li .tab-link {
  display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  padding: 9px 14px !important; border-radius: 10px !important; line-height: 1.15 !important; height: auto !important; /* обязательно: базовый pipui ставит height:60px и line-height:60px → бар-гигант */
  color: var(--aw-muted) !important; font-weight: 600 !important; font-size: 13.5px !important;
  white-space: nowrap !important;
  text-decoration: none !important; border: 1px solid rgba(255,255,255,.05) !important; background: rgba(255,255,255,.03) !important;
  transition: background .2s ease, color .2s ease !important;
}
.admin .tab-links > li .tab-link i { font-size: 14px !important; width: 15px !important; text-align: center !important; }
.admin .tab-links > li .tab-link:hover { color: #fafafa !important; background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.10) !important; }
.admin .tab-links > li .tab-link.active {
  color: #fff !important; background: linear-gradient(135deg,#f97316,#ea580c) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px -10px rgba(249,115,22,.55) !important;
}
/* «Выход» — красный, последним пунктом (без принудительного сдвига вправо,
   иначе при переносе строки появляется некрасивая дыра) */
.admin .tab-links > li .tab-link--exit { color: #ef4444 !important; }
.admin .tab-links > li .tab-link--exit:hover { color: #fff !important; background: rgba(239,68,68,.14) !important; }
.admin .admin-content, .admin .admin-content.window {
  background: linear-gradient(180deg,#1a1a1a,#141414) !important;
  border: 1px solid #262626 !important;
  border-radius: 18px !important; color: #cfcfcf !important;
  padding: 28px 32px !important; box-shadow: 0 24px 60px -24px rgba(0,0,0,.55) !important;
}
.admin .admin-content h4 { color:#fafafa !important; font-family:'Montserrat',sans-serif !important; font-weight:800 !important; font-size:17px !important; margin:24px 0 14px !important; padding:16px 0 0 !important; border-top:1px solid #262626 !important; }
.admin .admin-content form > h4:first-of-type { margin-top:2px !important; padding-top:0 !important; border-top:0 !important; }
.admin .text-gray-700, .admin .text-gray-600 { color:#fafafa !important; }
/* таблицы-списки — чистый вид без частокола линий */
.admin .table { width:100% !important; background:transparent !important; border-collapse:separate !important; border-spacing:0 !important; }
/* убираем ВСЕ линии, что pipui рисует на каждой ячейке */
.admin .table-cell, .admin .table-header .table-cell, .admin .table-body .table-cell,
.admin .table-row, .admin .table-header .table-row, .admin .table-body .table-row { border:0 !important; }
/* шапка: приглушённые подписи + единственная тонкая линия под ней */
.admin .table-header .table-cell {
  color:#7e7e7e !important; font-size:11px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important;
  padding:4px 16px 12px !important; vertical-align:middle !important;
  border-bottom:1px solid #2b2b2b !important; background:transparent !important;
}
/* тело: мягкая «зебра» вместо линий + оранжевый ховер */
.admin .table-body .table-row { transition: background .15s ease !important; }
.admin .table-body .table-row:nth-child(even) .table-cell { background: rgba(255,255,255,.022) !important; }
.admin .table-body .table-row:hover .table-cell { background: rgba(249,115,22,.07) !important; }
.admin .table-cell {
  color:#dcdcdc !important; padding:13px 16px !important; vertical-align:middle !important;
  font-size:13.5px !important;
}
/* первая колонка (#) — приглушённый номер */
.admin .table-body .table-row .table-cell:first-of-type { color:#6c6c6c !important; font-weight:700 !important; }
/* сумма: убираем кричащий indigo у рубля → нейтральный */
.admin .table-cell .text-indigo { color:#8a8a8a !important; }
/* ссылки-цифры */
.admin .table-cell > a:not(.btn) { color: var(--aw-orange) !important; text-decoration:none !important; }
.admin .table-cell > a:not(.btn):hover { text-decoration:underline !important; }
/* СТАТУС — аккуратные пилюли (только на span с текстом) */
.admin .table-cell span.text-light-green, .admin .table-cell span.text-amber {
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:4px 11px !important; border-radius:999px !important; font-size:12px !important; font-weight:700 !important; line-height:1.2 !important;
}
.admin .table-cell span.text-light-green { background:rgba(34,197,94,.12) !important; color:#4ade80 !important; }
.admin .table-cell span.text-amber { background:rgba(245,158,11,.13) !important; color:#fbbf24 !important; }
/* иконки статуса (галочка/часы) — рядом с пилюлей, тем же цветом */
.admin .table-cell i.text-light-green { color:#4ade80 !important; margin-left:2px !important; }
.admin .table-cell i.text-amber { color:#fbbf24 !important; margin-left:2px !important; }

/* ============================================================
   АДМИНКА — защитный мобильный проход (≤768px).
   Админка в основном уже адаптивна (сайдбар = горизонтальный скролл-бар табов,
   .container адаптивен, реальных <table> нет — везде div-карточки/гриды).
   Это страховка от единственного риска — широкая pipui div-«таблица» (.table)
   с многими колонками может оказаться шире экрана: даём ей скроллиться ВНУТРИ
   контент-блока, а не распирать всю страницу в горизонтальный скролл. Плюс уже́е
   боковые отступы контента на узком экране. (Без живого превью — только безопасные
   правила; полную проверку админки делать вживую после логина.) ============ */
@media (max-width: 768px) {
  body .admin .admin-content,
  body .admin .admin-content.window { padding: 18px 14px !important; }
  /* ТАБ-БАР РАЗДЕЛОВ: на десктопе табы делят ширину (flex:1 1 auto), но на мобиле это
     ужимает их ниже ширины текста → надписи налезают друг на друга. Фикс: натуральная
     ширина по контенту (flex:0 0 auto) + горизонтальный скролл (overflow-x:auto уже на .tab-links). */
  body .admin .tab-links { justify-content: flex-start !important; }
  body .admin .tab-links > li { flex: 0 0 auto !important; }
  body .admin .tab-links > li .tab-link { width: auto !important; white-space: nowrap !important; padding: 9px 16px !important; }
}

/* ── ТАБЛИЦЫ РАЗДЕЛОВ (.table-responsive) на узких экранах ──────────────
   pipui (pipui-responsive.min.css, ≤1199px) превращает таблицу в строки-карточки:
   каждая .table-row → грид 2 кол. [подпись | значение], а подписи .table-cell-resp
   красит в светлый #eee uppercase (для светлой темы). На нашей тёмной теме это выглядит
   сломанным (светлый столбец слева). Переопределяем под тёмную тему — чистые карточки.
   Разметка: у каждой ячейки пара .table-cell-resp (подпись) + .table-cell (значение). */
@media (max-width: 1199px) {
  body .admin .table.table-responsive { display: block !important; min-width: 0 !important; }
  body .admin .table.table-responsive .table-header { display: none !important; }
  body .admin .table.table-responsive .table-body { display: block !important; }
  body .admin .table.table-responsive .table-row {
    display: grid !important; grid-template-columns: minmax(84px, 34%) 1fr !important; align-items: stretch !important;
    background: rgba(255,255,255,.025) !important; border: 1px solid #2a2a2a !important; border-top: 1px solid #2a2a2a !important;
    border-radius: 12px !important; margin: 0 0 10px !important; padding: 0 !important; overflow: hidden !important;
  }
  body .admin .table.table-responsive .table-body .table-row:hover .table-cell,
  body .admin .table.table-responsive .table-body .table-row:nth-child(even) .table-cell { background: transparent !important; }
  /* подпись колонки — приглушённая, без светлого фона */
  body .admin .table.table-responsive .table-cell-resp {
    display: flex !important; align-items: center !important;
    background: rgba(255,255,255,.02) !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: #7e7e7e !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: .04em !important; text-align: left !important; padding: 10px 12px !important; height: auto !important;
  }
  /* значение */
  body .admin .table.table-responsive .table-cell {
    display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px 8px !important; min-width: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important; padding: 10px 12px !important; color: #dcdcdc !important; font-size: 13.5px !important;
  }
  /* последняя пара (Действия) — без нижней границы */
  body .admin .table.table-responsive .table-row > .table-cell-resp:nth-last-of-type(1),
  body .admin .table.table-responsive .table-row > .table-cell:nth-last-of-type(1) { border-bottom: 0 !important; }
  /* кнопки действий — компактно, не на всю ширину */
  body .admin .table.table-responsive .table-cell .btn { margin: 2px 6px 2px 0 !important; width: auto !important; }
}
/* кнопки — единый аккуратный вид */
.admin .btn {
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  min-height:0 !important; height:auto !important; line-height:1.2 !important; box-sizing:border-box !important;
  vertical-align:middle !important;
}
.admin .btn.bg-cyan, .admin .editform button[type="submit"], .admin .addform button[type="submit"],
.admin form .btn.bg-green, .admin form .btn.bg-teal {
  padding:12px 26px !important; border:0 !important; border-radius:12px !important; font-weight:800 !important;
  font-size:14px !important; color:#fff !important; cursor:pointer !important;
  background: linear-gradient(135deg,#f97316,#ea580c) !important;
  box-shadow:0 10px 22px -12px rgba(249,115,22,.55) !important;
  transition: filter .2s ease, transform .1s ease !important;
}
.admin .btn.bg-cyan:hover, .admin .editform button[type="submit"]:hover, .admin .addform button[type="submit"]:hover { filter:brightness(1.08) !important; }
.admin .btn.bg-cyan:active, .admin .editform button[type="submit"]:active, .admin .addform button[type="submit"]:active { transform:scale(.98) !important; }
/* кнопки-действия в таблицах (редактировать/удалить) — ровные квадраты */
.admin .btn.bg-indigo {
  width:38px !important; height:38px !important; padding:0 !important; border-radius:10px !important;
  background:#1e1e1e !important; color:#cfcfcf !important; border:1px solid #333 !important;
  transition: border-color .2s ease, color .2s ease, background .2s ease !important;
}
.admin .btn.bg-indigo:hover { border-color: var(--aw-orange) !important; color:#fff !important; background:#242424 !important; }
.admin .btn.bg-indigo.remove:hover { border-color:#ef4444 !important; color:#ef4444 !important; }
/* формы — компактнее + читаемая ширина полей */
.admin .input-block { margin:0 0 12px !important; padding-bottom:0 !important; min-height:0 !important; position:relative !important; }
.admin .input-block > label { display:block !important; color:var(--aw-muted) !important; font-size:13px !important; font-weight:600 !important; margin:0 0 6px !important; }
.admin .input-block .text-red { color:#ef4444 !important; }
.admin .input-block input[type="text"], .admin .input-block input[type="password"], .admin .input-block input[type="number"], .admin .input-block input[type="email"],
.admin .input-block textarea, .admin .input-block select {
  width:100% !important; max-width:none !important; box-sizing:border-box !important; background:#0f0f0f !important; border:1px solid #2a2a2a !important;
  border-radius:11px !important; padding:9px 14px !important; color:#fafafa !important; font-size:14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.admin .input-block textarea { max-width:none !important; }
.admin .input-block input:focus, .admin .input-block textarea:focus, .admin .input-block select:focus {
  border-color: var(--aw-orange) !important; box-shadow:0 0 0 3px rgba(249,115,22,.15) !important; outline:none !important;
}
.admin .input-block input::placeholder, .admin .input-block textarea::placeholder { color:#8f8f8f !important; }
.admin .input-helper { position:static !important; opacity:1 !important; white-space:normal !important; line-height:1.4 !important; padding:0 !important; color:#7a7a7a !important; font-size:11.5px !important; margin-top:4px !important; max-width:760px !important; transition:none !important; }
/* пагинация */
.admin .pagination > li > a, .admin .pagination > li > span { background:#1a1a1a !important; border:1px solid #2a2a2a !important; color:#cfcfcf !important; border-radius:9px !important; }
.admin .pagination > li.active > a, .admin .pagination > li > a:hover { background: var(--aw-orange) !important; border-color: var(--aw-orange) !important; color:#fff !important; }
/* дашборд («Главная») */
.admin .welcome { color:#fafafa !important; font-family:'Montserrat',sans-serif !important; font-weight:800 !important; font-size:18px !important; text-align:center !important; }
.admin .block-middle > .block-left, .admin .block-middle > .block-right { background:#141414 !important; border:1px solid #2a2a2a !important; border-radius:14px !important; padding:16px !important; }

/* ----- выравнивание вертикального ритма форм (одинаковые отступы сверху вниз) ----- */
/* подсказка под полем — единый шаг на всех страницах */
.admin .admin-content .input-block .input-helper { margin-top:4px !important; }
/* ===== Конструктор описания привилегий (in-place WYSIWYG v2) ===== */
.perk-builder { margin:0 0 6px; border:1px solid #2a2a2a; border-radius:14px; background:#121212; padding:14px; }
.perk-builder__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 11px; }
.perk-builder__caption { font-family:"Montserrat",sans-serif; font-weight:800; font-size:13px; color:#fafafa; }
.perk-builder__link { background:none; border:0; padding:0; color:var(--aw-orange); font-size:12px; font-weight:700; cursor:pointer; }
.perk-builder__link:hover { text-decoration:underline; }
.perk-tb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 9px; margin:0 0 10px; background:#171717; border:1px solid #262626; border-radius:11px; position:sticky; top:0; z-index:5; }
.perk-tb__b { width:30px; height:28px; border-radius:7px; border:1px solid #333; background:#1e1e1e; color:#d4d4d4; cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s ease, color .15s ease; }
.perk-tb__b:hover { border-color:var(--aw-orange); color:var(--aw-orange); }
.perk-tb__b b { color:var(--aw-orange); font-family:Georgia,serif; }
.perk-tb__sep { width:1px; height:20px; background:#333; margin:0 3px; }
.perk-tb__clear { margin-left:auto; }
.perk-cp { position:relative; }
.perk-cp__trig { width:auto; padding:0 6px; gap:4px; }
.perk-cp__sw { width:15px; height:15px; border-radius:4px; display:inline-block; border:1px solid rgba(255,255,255,.25); }
.perk-cp__trig .fa-caret-down { font-size:10px; color:#888; }
.perk-cp__pop { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:190px; padding:10px; background:#1b1b1b; border:1px solid #333; border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,.8); }
.perk-cp.is-open .perk-cp__pop { display:block; }
.perk-cp__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:0 0 10px; }
.perk-cp__cell { width:100%; aspect-ratio:1/1; border-radius:6px; border:1px solid rgba(255,255,255,.14); cursor:pointer; padding:0; transition:transform .1s ease; }
.perk-cp__cell:hover { transform:scale(1.12); }
.perk-cp__row { display:flex; align-items:center; gap:6px; }
.perk-cp__rgb { width:30px; height:30px; padding:0; border:1px solid #333; border-radius:7px; background:#0f0f0f; cursor:pointer; }
.perk-cp__hex { flex:1 1 auto; min-width:0; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:7px; padding:6px 8px; color:#fafafa; font-size:12.5px; font-family:ui-monospace,monospace; }
.perk-cp__hex:focus { outline:none; border-color:var(--aw-orange); }
.perk-cp__ok { flex:0 0 auto; padding:6px 11px; border:0; border-radius:7px; background:var(--aw-orange); color:#fff; font-weight:800; font-size:12px; cursor:pointer; }
.perk-edit .donate-description { padding:16px !important; background:#0d0d0d; border:1px solid #262626; border-radius:12px; }
.perk-edit .donate-description .text { max-width:none; }
.perk-edit .perk-title[contenteditable] { outline:none; border-radius:6px; }
.perk-edit .perk-title[contenteditable]:focus { box-shadow:0 0 0 3px rgba(249,115,22,.18); }
.perk-edit .perk-title:empty::before { content:attr(data-ph); color:#5d5d5d; font-weight:600; }
.perk-edit .perk-list li.perk-li { position:relative; padding-left:42px !important; padding-right:30px !important; }
.perk-edit .perk-list li.perk-li::before { left:24px !important; }
.perk-edit .perk-li__grip { position:absolute; left:3px; top:50%; transform:translateY(-50%); width:18px; height:24px; display:flex; align-items:center; justify-content:center; color:#555; font-size:12px; cursor:grab; opacity:.5; transition:opacity .15s ease, color .15s ease; }
.perk-edit .perk-li:hover .perk-li__grip { opacity:1; color:#888; }
.perk-edit .perk-li__grip:active { cursor:grabbing; }
.perk-edit .perk-li__c { outline:none; display:inline; border-radius:5px; }
.perk-edit .perk-li__c:focus { box-shadow:0 0 0 3px rgba(249,115,22,.18); }
.perk-edit .perk-li__c:empty::before { content:attr(data-ph); color:#5d5d5d; }
.perk-edit .perk-li__rm { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#666; font-size:11px; border-radius:6px; cursor:pointer; opacity:0; transition:opacity .15s ease, background .12s ease, color .12s ease; }
.perk-edit .perk-li:hover .perk-li__rm { opacity:1; }
.perk-edit .perk-li__rm:hover { background:rgba(239,68,68,.18); color:#ef4444; }
.perk-edit .perk-li.is-drag { opacity:.4; }
.perk-edit .perk-li.drop-before { box-shadow:inset 0 2px 0 0 var(--aw-orange); }
.perk-edit .perk-li.drop-after { box-shadow:inset 0 -2px 0 0 var(--aw-orange); }
.perk-builder__add { margin-top:11px; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px; border:1px dashed rgba(249,115,22,.4); background:rgba(249,115,22,.07); color:var(--aw-orange); font-weight:700; font-size:13px; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.perk-builder__add:hover { background:rgba(249,115,22,.13); border-style:solid; }
.perk-builder__hint { margin-top:11px; color:#7a7a7a; font-size:11.5px; line-height:1.55; }
.perk-builder__hint b { color:var(--aw-orange); }
.perk-builder__hint i { color:#7a7a7a; }
.perk-builder__rawnote { color:var(--aw-muted); font-size:12.5px; line-height:1.5; }
.admin textarea.perk-raw { font-family:ui-monospace,"JetBrains Mono",monospace !important; font-size:12px !important; }



/* ===== аккордеон настроек: разделы сворачиваются/разворачиваются по клику ===== */
.admin .adm-acc { display:flex; flex-direction:column; gap:8px; }
.admin .adm-acc__item { border:1px solid #262626 !important; border-radius:14px !important; background:#141414 !important; overflow:hidden; }
.admin .adm-acc__item.is-open { border-color:#3a3a3a !important; }
.admin .adm-acc__head {
  width:100% !important; display:flex !important; align-items:center !important; gap:12px !important;
  padding:14px 16px !important; height:auto !important; line-height:1.2 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; cursor:pointer !important;
  color:#fafafa !important; font-family:'Montserrat',sans-serif !important; font-weight:800 !important; font-size:15px !important; text-align:left !important;
  transition:background .15s ease !important;
}
.admin .adm-acc__head:hover { background:rgba(255,255,255,.04) !important; }
.admin .adm-acc__ico { flex:0 0 auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:rgba(249,115,22,.12); color:var(--aw-orange); font-size:14px; }
.admin .adm-acc__title { flex:1 1 auto; }
.admin .adm-acc__arrow { flex:0 0 auto; color:var(--aw-muted); font-size:13px; transition:transform .25s ease, color .25s ease; }
.admin .adm-acc__item.is-open .adm-acc__arrow { transform:rotate(180deg); color:var(--aw-orange); }
.admin .adm-acc__body { display:none; padding:12px 16px 14px; border-top:1px solid #242424; }
.admin .adm-acc__body .input-block:first-child { margin-top:0 !important; }
.admin .adm-acc__body .input-block:last-child { margin-bottom:0 !important; }
/* плотнее вертикальный ритм полей внутри раскрытого раздела */
.admin .adm-acc__body .input-block { margin-bottom:6px !important; }
.admin .adm-acc__body .input-block > label { margin-bottom:4px !important; }
.admin .adm-acc__body .input-helper { margin-top:4px !important; }
/* под-заголовок провайдера внутри «Платёжные системы» (заголовок + переключатель Вкл/Выкл) */
.admin .adm-subhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 9px; padding-top:11px; border-top:1px solid #242424; }
.admin .adm-acc__body > .adm-subhead:first-child { margin-top:0; padding-top:0; border-top:0; }
.admin .adm-subhead__title { display:flex; align-items:center; gap:9px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:14px; color:#fafafa; }
.admin .adm-subhead__title i { color:var(--aw-orange); font-size:13px; }
.admin .adm-toggle { flex:0 0 auto; display:inline-flex; align-items:center; }
.admin .adm-toggle__dot { display:none !important; }
.admin .adm-toggle select {
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  width:auto !important; min-width:0 !important; height:auto !important;
  padding:5px 26px 5px 11px !important;
  background-color:#0f0f0f !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 9px center !important; background-size:11px !important;
  border:1px solid #2a2a2a !important; border-radius:9px !important;
  color:#e9e9e9 !important; font-size:12px !important; font-weight:700 !important; cursor:pointer !important;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease !important;
}
.admin .adm-toggle select:focus { outline:none !important; box-shadow:none !important; }
.admin .adm-toggle.is-on select { background-color:rgba(34,197,94,.12) !important; border-color:rgba(34,197,94,.5) !important; color:#34d399 !important; }
.admin .adm-toggle.is-off select { background-color:rgba(239,68,68,.10) !important; border-color:rgba(239,68,68,.45) !important; color:#f87171 !important; }
.admin .adm-toggle select option { background:#161616 !important; color:#fafafa !important; }
/* кнопка действия (submit) — тот же шаг (14px), что и между полями, без лишнего разрыва:
   блок кнопки идёт последним div'ом, поэтому опираемся на margin-bottom предыдущего поля */
.admin .admin-content form > .pt-20:last-child { padding-top:0 !important; margin-top:18px !important; }
.admin .admin-content form > .pt-20:last-child .btn { margin:0 !important; }

/* ============================================================
   АДМИНКА — компоненты по ТЗ (шапка раздела, поиск, бейджи, KPI, карточки)
   ============================================================ */
/* шапка раздела */
.adm-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; flex-wrap:wrap; }
.adm-head__title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; color:#fafafa; margin:0; }
.adm-head__title small { font-size:14px; color:var(--aw-muted); font-weight:600; margin-left:8px; }
.adm-head__actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.adm-search { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:12px; }
.adm-search input { background:none !important; border:0 !important; box-shadow:none !important; outline:none !important; height:auto !important; padding:0 !important; margin:0 !important; border-radius:0 !important; color:#fafafa !important; font-size:14px !important; width:190px !important; }
.adm-search input::placeholder { color:#8f8f8f !important; }
.adm-search i { color:var(--aw-muted); font-size:14px; }
.adm-search:focus-within { border-color:var(--aw-orange); }
.adm-add { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:12px; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff !important; font-weight:700; font-size:14px; box-shadow:0 8px 20px -10px rgba(249,115,22,.5); transition:transform .2s, filter .2s; }
.adm-add:hover { transform:scale(1.03); filter:brightness(1.08); color:#fff !important; }
/* бейджи/цена/url/дата/# в ячейках таблиц */
.adm-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px; font-size:12px; font-weight:600; background:rgba(249,115,22,.12); color:var(--aw-orange) !important; border:1px solid rgba(249,115,22,.25); }
.adm-price { font-weight:700; color:#22c55e !important; font-variant-numeric:tabular-nums; }
.adm-url { font-family:'Consolas','JetBrains Mono',monospace; font-size:13px; color:var(--aw-orange) !important; }
.adm-date { display:inline-flex; align-items:center; gap:6px; color:var(--aw-muted) !important; font-size:13px; }
.adm-date i { font-size:12px; }
.adm-id { color:var(--aw-muted) !important; font-family:'Consolas',monospace; }
/* пустое состояние */
.adm-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:50px 20px; color:var(--aw-muted); text-align:center; }
.adm-empty i { font-size:42px; opacity:.35; }
.adm-empty .adm-add { margin-top:4px; }
/* KPI-карточки дашборда */
.adm-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:0 0 22px; }
.adm-kpi { display:flex; flex-direction:column; gap:10px; padding:18px; background:#161616; border:1px solid #262626; border-radius:16px; }
.adm-kpi__ico { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(249,115,22,.12); color:var(--aw-orange); font-size:18px; }
.adm-kpi__val { font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; color:#fafafa; line-height:1; }
.adm-kpi__label { font-size:13px; color:var(--aw-muted); }
/* карточки графиков */
.adm-dash-head { margin:0 0 20px; }
.adm-dash-head h2 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; color:#fafafa; margin:0; }
.adm-dash-head p { color:var(--aw-muted); font-size:13px; margin:4px 0 0; }
.adm-cards { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; }
@media(max-width:900px){ .adm-cards { grid-template-columns:1fr; } }
.adm-card { background:#161616; border:1px solid #262626; border-radius:18px; padding:22px; }
.adm-card__title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:#fafafa; margin:0 0 18px; display:flex; align-items:center; gap:8px; }
.adm-card__title i { color:var(--aw-orange); font-size:16px; }
.adm-card__chart { position:relative; height:280px; }
/* топ-товары */
.adm-top { display:flex; flex-direction:column; gap:12px; }
.adm-top__row { display:flex; align-items:center; gap:12px; font-size:14px; }
.adm-top__rank { width:22px; height:22px; flex:0 0 auto; border-radius:7px; background:#222; color:var(--aw-muted); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.adm-top__name { flex:1; color:#e8e8e8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-top__rev { color:#fafafa; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.adm-top__count { flex:0 0 auto; min-width:52px; text-align:right; color:var(--aw-orange); font-weight:700; font-variant-numeric:tabular-nums; }
/* переключатель периода (неделя/месяц) */
.adm-period { display:flex; align-items:center; gap:8px; margin:0 0 18px; }
.adm-period__label { font-size:13px; color:var(--aw-muted); margin-right:2px; }
.adm-period__btn { padding:7px 16px; border-radius:10px; background:#1a1a1a; border:1px solid #2c2c2c; color:#cfcfcf; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s ease; }
.adm-period__btn:hover { border-color:#444; color:#fff; }
.adm-period__btn.active { background:var(--aw-orange); border-color:var(--aw-orange); color:#fff; }
/* последние покупки на дашборде */
.mt-18 { margin-top:18px; }
.adm-recent { display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; }
@media(max-width:760px){ .adm-recent { grid-template-columns:1fr; } }
.adm-recent__row { display:flex; align-items:center; gap:12px; padding:12px 2px; border-top:1px solid #222; }
.adm-recent__ava { width:48px; height:48px; border-radius:10px; flex:0 0 auto; background:#0d0d0d; image-rendering:pixelated; }
.adm-recent__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.adm-recent__player { font-size:13.5px; font-weight:700; color:#fafafa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-recent__item { font-size:12px; color:var(--aw-orange); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* состав корзины в виджете «Последние покупки» — компактные чипы (как у EasyDonate) */
.adm-recent__chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:1px; }
.adm-recent__chip { display:inline-flex; align-items:center; gap:6px; max-width:240px; padding:4px 11px 4px 7px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e6e8eb; font-size:12px; line-height:1.4; white-space:nowrap; overflow:hidden; }
.adm-recent__chip-img { width:18px; height:18px; flex:0 0 auto; object-fit:contain; image-rendering:pixelated; }
.adm-recent__chip-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-recent__chip b { color:#fff; font-weight:700; flex:0 0 auto; }
.adm-recent__chip--more { padding:4px 11px; color:#9aa0a6; background:transparent; border:1px dashed #3a3a3a; }
.adm-recent__meta { text-align:right; flex:0 0 auto; }
.adm-recent__sum { display:block; font-size:13.5px; font-weight:800; color:#5fe070; }
.adm-recent__ago { display:block; font-size:11px; color:#7f7f7f; }
/* формы добавления/редактирования — кнопки внизу (Отмена + Сохранить) */
.adm-form-actions { display:flex; align-items:center; gap:12px; margin-top:8px; }
.adm-btn-cancel { display:inline-flex; align-items:center; height:46px; padding:0 22px; border-radius:12px; background:transparent; border:1px solid #333; color:#cfcfcf !important; font-weight:700; font-size:14px; transition:border-color .2s, color .2s; }
.adm-btn-cancel:hover { border-color:#555; color:#fff !important; }

/* ============================================================
   Hero на сверхшироких экранах / при зум-ауте страницы.
   Раньше всё растягивалось по ширине: текст уезжал влево, машина с
   персонажем — к центру/вправо, композиция разваливалась (видно при
   масштабировании <100%). Решение: на ширине >1920px фиксируем hero
   как центрированный блок 1920px (текст+арт держатся вместе, ровно как
   на эталонном 1920), а фоновую картинку тянем на всю ширину окна,
   чтобы по бокам не было тёмных полос. До 1920px — поведение прежнее.
   ============================================================ */
@media (min-width: 1921px) {
  .aw-hero {
    width: min(100%, 1920px) !important; max-width: 1920px !important;
    margin-left: auto !important; margin-right: auto !important; align-self: center !important;
    overflow: visible !important;
    /* НЕ тянем на 100vh (иначе при зум-ауте арт уезжает в самый низ), но и не
       схлопываем по контенту (выглядит сжато). Держим «дизайн-высоту» ~960px —
       композиция при зуме выглядит как нормальный 1920-вид, просто по центру. */
    min-height: 0 !important; height: 960px !important;
  }
  /* фон чуть левее (70% вместо правого края 100%) — композиция центрее, но машина
     остаётся на дороге. bottom:0 — убираем 14px-свес (давал резкую яркую полосу снизу). */
  .aw-hero::before { left: 50% !important; right: auto !important; width: 100vw !important; bottom: 0 !important; transform: translateX(-50%); background-position: 70% center !important; }
  /* затемнение: на всю ширину (иначе тёмный «короб» слева) + длинный плавный
     переход в тёмный низ страницы (нижний градиент тянем до 42%). */
  .aw-hero::after {
    left: 50% !important; right: auto !important; width: 100vw !important; transform: translateX(-50%);
    background:
      radial-gradient(circle at 62% 42%, rgba(249,115,22,.24) 0%, transparent 46%),
      linear-gradient(90deg, #141414 0%, rgba(20,20,20,.94) 28%, rgba(20,20,20,.34) 52%, transparent 72%),
      linear-gradient(0deg,  #141414 0%, #141414 6%, transparent 42%),
      linear-gradient(180deg, rgba(20,20,20,.60) 0%, transparent 20%) !important;
  }
}

/* ============================================================
   КОРЗИНА ТОВАРОВ (FAB + модалка + кнопка на карточке)
   ============================================================ */
/* кнопка на карточке: одна «Купить» (добавляет в корзину + открывает окно-подтверждение) */
.card-actions { display: flex; }
.card-actions .card-buy { flex: 1 1 auto; }
.item-id .card-actions .card-buy { flex: 1 1 auto !important; width: 100% !important; overflow: visible !important; }  /* на всю ширину */

/* обёртка иконки корзины в кнопке — контекст для бейджа (как .aw-nav-cart__ico-wrap в шапке) */
.card-buy__ico { position: relative; display: inline-flex; align-items: center; overflow: visible; }

/* бейдж «сколько этого товара в корзине» — на иконке корзины в кнопке «Купить».
   Чуть меньше хедерного счётчика (16 vs 18px) — по просьбе. */
.card-buy__count {
  position: absolute; top: -8px; right: -9px; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: #ef4444; color: #fff; border: 0;
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(0,0,0,.45);
  pointer-events: none; z-index: 3;
  animation: cardBuyPop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardBuyPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ===== окно-подтверждение «Товар добавлен в корзину!» (тёмная тема сайта) ===== */
.aw-cart-confirm { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.aw-cart-confirm[hidden] { display: none; }
.aw-cart-confirm__backdrop { position: absolute; inset: 0; background: rgba(8,8,10,.66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.aw-cart-confirm__box {
  position: relative; z-index: 1; width: 100%; max-width: 460px; box-sizing: border-box;
  background: linear-gradient(180deg, #1f1f1f, #161616); border: 1px solid #2e2e2e; border-radius: 20px;
  padding: 26px 24px 22px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  animation: awConfirmIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes awConfirmIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.aw-cart-confirm__x {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.06); color: var(--aw-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.aw-cart-confirm__x:hover { background: rgba(255,255,255,.12); color: #fff; }
.aw-cart-confirm__x .aw-ico { width: 16px; height: 16px; }
.aw-cart-confirm__title {
  margin: 0 0 5px; padding-right: 36px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 21px;
  color: #fafafa; letter-spacing: -.01em;
}
.aw-cart-confirm__item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 18px;
  background: rgba(255,255,255,.04); border: 1px solid #2a2a2a; border-radius: 14px;
}
/* подзаголовок-итог под заголовком: «В корзине: N товаров на ХХХ ₽» */
.aw-cart-confirm__summary { margin: 0 0 16px; text-align: left; font-size: 13.5px; color: var(--aw-muted); }
.aw-cart-confirm__summary b { color: #fafafa; font-weight: 800; }
.aw-cart-confirm__summary:empty { display: none; }
.aw-cci__img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.aw-cci__main { flex: 1 1 auto; min-width: 0; }
.aw-cci__title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #fafafa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-cci__sub { margin-top: 2px; font-size: 13px; color: var(--aw-muted); }
.aw-cci__price { flex: 0 0 auto; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: var(--aw-price, #5fe070); white-space: nowrap; }
.aw-cart-confirm__checkout {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 50px; border: 0; border-radius: 13px;
  background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 28px -10px rgba(249,115,22,.6); transition: filter .2s ease, transform .15s ease, box-shadow .2s ease;
}
.aw-cart-confirm__checkout:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(249,115,22,.7); }
.aw-cart-confirm__checkout:active { transform: scale(.98); }
.aw-cart-confirm__checkout .aw-ico { width: 17px; height: 17px; color: #fff; background-color: #fff; }
.aw-cart-confirm__continue {
  display: block; width: 100%; margin-top: 10px; padding: 9px 0; border: 0; background: transparent; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; color: var(--aw-muted); transition: color .15s ease;
}
.aw-cart-confirm__continue:hover { color: var(--aw-orange); }


/* ============ Корзина — модалка (редизайн) ============ */
.cart-panel .modal-content { max-width: 500px; }
/* Не даём корзине уехать под шапку и переполнить экран при многих товарах:
   контент — flex-колонка ограниченной высоты ниже навбара; шапка и футер
   закреплены, список товаров/поля скроллятся внутри. */
/* Надёжное центрирование при ЛЮБОМ масштабе/зуме: сам .modal делаем flex-контейнером
   (он position:fixed на весь вьюпорт), а контент центрируем через margin:auto на flex-элементе.
   Это не зависит от 100vh/grid (которые «уезжали» при зуме) и корректно скроллит при переполнении.
   pipui показывает модалку классом .active + inline display:block — перебиваем !important. */
.modal.cart-panel.active {
  display: flex !important;
  align-items: center !important;        /* центр по вертикали — сам .modal это весь вьюпорт (position:fixed),
                                            поэтому не нужен 100vh (который и «уезжал» при зуме) */
  justify-content: center !important;    /* центр по горизонтали */
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 104px 16px 28px !important;   /* отступ от липкой шапки сверху + воздух снизу */
}
.cart-panel .wrapper {
  width: 100% !important;
  max-width: 540px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;   /* горизонтальный центр даже в block-режиме (пока pipui делает fadeIn до .active) */
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}
.cart-panel .modal-content {
  display: flex; flex-direction: column; box-sizing: border-box;
  width: 100%; margin: 0 auto;       /* фикс. ширина (через max-width) и центр по горизонтали;
                                        без width:100% grid-элемент сжимался по контенту и «прыгал» */
  max-height: calc(100vh - 180px);   /* влезает в экран; список скроллится внутри тела */
}
.cart-panel .modal-header { flex: 0 0 auto; }
.cart-panel .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: visible; }
.cart-panel .modal-footer { flex: 0 0 auto; }
.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--aw-text);
  padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--aw-border);
}
.cart-head > span { display: inline-flex; align-items: center; gap: 11px; }
.cart-head > span .aw-ico { width: 22px; height: 22px; color: var(--aw-orange); }

.cart-items { display: flex; flex-direction: column; gap: 10px; }
.cart-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--aw-border); border-radius: 16px;
  background: linear-gradient(180deg, rgba(40,40,40,.6), rgba(26,26,26,.6));
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cart-item:hover { border-color: rgba(249,115,22,.4); transform: translateY(-1px); box-shadow: 0 12px 28px -18px rgba(249,115,22,.55); }
.cart-item__img {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 14px;
  border: 1px solid var(--aw-border);
  background: linear-gradient(180deg,#202028,#0e0e12); /* запасной фон; основной (арт + тировый glow) ставит JS */
}
.cart-item__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-item__title {
  font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--aw-text); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* qty-группа: trash отдельно слева, [− N +] в общей пилюле */
.cart-item__qtyrow { display: flex; align-items: center; gap: 10px; }
.cart-item__qtygrp {
  display: inline-flex; align-items: center; border: 1px solid var(--aw-border);
  border-radius: 11px; overflow: hidden; background: #111;
}
.cart-item__btn {
  width: 40px; height: 36px; border: 0; background: transparent;
  color: var(--aw-muted); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.cart-item__btn:hover:not(:disabled) { background: rgba(249,115,22,.16); color: var(--aw-orange); }
.cart-item__btn:disabled { opacity: .3; cursor: default; }
.cart-item__qty { min-width: 56px; text-align: center; font-weight: 800; color: var(--aw-text); font-size: 13px; }
.cart-item__del {
  flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--aw-border); border-radius: 10px;
  background: transparent; color: var(--aw-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.cart-item__del:hover { background: rgba(239,68,68,.14); color: #f87171; border-color: rgba(239,68,68,.4); }
.cart-item__del .aw-ico { width: 15px; height: 15px; }
.cart-item__price {
  flex: 0 0 auto; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px;
  color: var(--aw-price); white-space: nowrap;
}

.cart-empty { text-align: center; padding: 40px 10px; color: var(--aw-muted); }
.cart-empty .aw-ico { width: 48px; height: 48px; opacity: .3; color: var(--aw-orange); }
.cart-empty p { margin: 16px 0 4px; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--aw-text); font-size: 16px; }
.cart-empty span { font-size: 13px; }

.cart-fields { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--aw-border); display: flex; flex-direction: column; gap: 12px; }
/* убираем «родной» отступ pipui у .input-block (был padding-bottom:24px → разъезд) */
.cart-fields .input-block { padding: 0 !important; margin: 0 !important; }
/* поля ввода корзины — иконка слева, оранжевый фокус */
.cart-fields .input-prepend { position: relative; display: flex; align-items: center; }
.cart-fields .input-prepend > input {
  width: 100%; height: 50px; box-sizing: border-box !important; margin: 0 !important;
  padding: 0 16px 0 46px !important;
  background: #141414 !important; border: 1px solid var(--aw-border) !important; border-radius: 13px !important;
  color: var(--aw-text) !important; font-size: 14px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.cart-fields .input-prepend > input::placeholder { color: #8f8f8f !important; }
.cart-fields .input-prepend > input:focus { border-color: var(--aw-orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.15) !important; background: #181818 !important; }
.cart-fields .input-prepend > .prepend {
  position: absolute; left: 0; top: 0; width: 44px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #7a7a7a; pointer-events: none; background: none !important; border: 0 !important;
}
.cart-fields .input-prepend:focus-within > .prepend { color: var(--aw-orange); }
/* подсказки в корзине — аккуратные «пилюли» (промокод применён / ошибка ника) */
.cart-fields .field-hint { display: none; }
.cart-fields .field-hint.show {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  margin-top: 9px; padding: 7px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
.cart-fields .field-hint.show i { font-size: 13px; flex: 0 0 auto; }
.cart-fields .promo-hint.is-ok { color: #5fe070; background: rgba(95,224,112,.12); border: 1px solid rgba(95,224,112,.32); font-weight: 700; }
.cart-fields .promo-hint.is-bad,
.cart-fields #aw-cart-nick-error.show,
.cart-fields #aw-cart-email-error.show { color: #f87171; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.32); }
.cart-fields .promo-hint.is-bad.show,
.cart-fields #aw-cart-nick-error.show,
.cart-fields #aw-cart-email-error.show { animation: aw-field-shake .4s ease; }

/* ---- футер корзины ---- */
.cart-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 13px; margin-top: 2px; border-top: 1px solid var(--aw-border); }
.cart-total { display: flex; flex-direction: column; gap: 7px; }
/* строка скидки — над итогом, с пунктирным разделителем */
.cart-total__discount {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--aw-muted);
  padding-bottom: 7px; border-bottom: 1px dashed var(--aw-border);
}
.cart-total__discount[hidden] { display: none; }
.cart-total__discount-label { display: inline-flex; align-items: center; gap: 7px; }
.cart-total__discount-label i { color: #5fe070; font-size: 12px; }
.cart-total__save { font-size: 13px; font-weight: 800; color: #5fe070; white-space: nowrap; }
/* строка итога */
.cart-total__main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-total__label { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; color: var(--aw-text); }
.cart-total__r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
.cart-total__old { color: var(--aw-muted); font-size: 13px; text-decoration: line-through; }
.cart-total strong { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 30px; color: var(--aw-text); line-height: 1; }
.cart-total strong .rub { color: var(--aw-orange); }
/* чип процента в бейдже «Промокод применён» (вместо точки-разделителя) */
.promo-hint__pct { display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 6px; background: rgba(95,224,112,.2); color: #5fe070; font-weight: 800; font-size: 11.5px; }
/* кнопка оформления — брендовая оранжевая (перебиваем .btn.bg-cyan) */
.btn.bg-cyan.cart-checkout {
  width: 100%; height: 56px; border: 0 !important; border-radius: 14px !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 16px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--aw-orange-2), var(--aw-orange) 55%, var(--aw-orange-dk)) !important;
  box-shadow: 0 14px 30px -10px rgba(249,115,22,.55) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn.bg-cyan.cart-checkout:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -10px rgba(249,115,22,.7) !important; filter: brightness(1.05); }
.btn.bg-cyan.cart-checkout:active { transform: translateY(0) scale(.99); }
.cart-checkout, .cart-checkout * { color: #fff !important; }
.cart-checkout .aw-ico { width: 19px; height: 19px; }

/* toast корзины — тёмная плашка с оранжевой иконкой (наш стиль) */
.aw-cart-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 180%); z-index: 130; opacity: 0;
  display: flex; align-items: center; gap: 12px; max-width: 90vw; padding: 11px 18px 11px 11px; border-radius: 14px;
  background: linear-gradient(180deg, #242424, #1a1a1a); border: 1px solid #383838; color: #fafafa;
  font-weight: 600; font-size: 14px; box-shadow: 0 18px 46px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(249,115,22,.12);
  transition: transform .4s cubic-bezier(.23,1,.32,1), opacity .3s ease;
}
.aw-cart-toast.show { transform: translate(-50%, 0); opacity: 1; }
.aw-cart-toast__ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, #fb923c, #f97316); box-shadow: 0 4px 12px -4px rgba(249,115,22,.6); }
.aw-cart-toast__ico .aw-ico { width: 18px; height: 18px; color: #fff; background-color: #fff; }
.aw-cart-toast__msg { line-height: 1.3; }

@media (max-width: 600px) {
  .aw-cart-fab { width: 56px; height: 56px; border-radius: 17px; }
  .cart-item__price { font-size: 16px; }
  .cart-panel .wrapper { padding-top: 76px; padding-bottom: 16px; }
  .cart-panel .modal-content { max-height: calc(100vh - 120px); width: 100% !important; max-width: 100% !important; }
}

/* ============================================================
   Карточка-«афиша»: арт тянется до кнопок, название и цена —
   поверх арта (с затемнением), кнопки — на серой подложке снизу.
   (идея WayderTM) Высокая специфичность + конец файла = перебивает
   ранние слои .item-id.
   ============================================================ */
/* арт впритык к подложке кнопок, старый фейд низа убираем */
.main .donate .items > .item-list > .item-id .image-wrap { margin: 0 !important; }
.main .donate .items > .item-list > .item-id .image-wrap::before { display: none !important; }
/* текст поверх арта + затемнение для читаемости */
.main .donate .items > .item-list > .item-id .card-overlay {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 4 !important; pointer-events: none !important;
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  padding: 42px 16px 14px !important;
  /* тёмный скрим под названием/ценой — только для читаемости текста, БЕЗ blur (арт остаётся резким) */
  background: linear-gradient(0deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.8) 38%, rgba(8,8,10,.36) 70%, transparent 100%) !important;
}
.main .donate .items > .item-list > .item-id .card-overlay .title {
  margin: 0 !important; padding: 0 !important; text-align: left !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important;
  font-size: 16px !important; color: #fff !important; line-height: 1.15 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
}
.main .donate .items > .item-list > .item-id .card-overlay .card-price {
  display: flex !important; align-items: baseline !important; justify-content: flex-start !important;
  gap: 8px !important; margin: 0 !important;
}
.main .donate .items > .item-list > .item-id .card-overlay .card-price__new {
  font-family: 'Montserrat', sans-serif !important; font-size: 21px !important; font-weight: 800 !important;
  color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
}
.main .donate .items > .item-list > .item-id .card-overlay .card-price__old {
  font-size: 13px !important; color: #cfcfcf !important; text-decoration: line-through !important; text-shadow: 0 1px 6px rgba(0,0,0,.7) !important;
}
.main .donate .items > .item-list > .item-id .card-overlay .rub { color: var(--aw-orange) !important; }
/* футер кнопок — бесшовно сливается с телом карточки (без отдельного тёмного блока),
   сверху тонкая разделительная линия вместо цветной подложки */
.main .donate .items > .item-list > .item-id .card-foot {
  /* футер — настоящее морозное стекло (тут блюр реально виден: за полоской фон страницы,
     а не арт). Та же ДНК системы: тёмная полупрозрачная база + размытие + светлая
     внутренняя кромка сверху (рим-разделитель вместо цветной подложки). */
  position: relative !important;
  background: linear-gradient(135deg, rgba(28,28,32,.62), rgba(17,17,19,.55)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important; backdrop-filter: blur(14px) saturate(1.05) !important;
  margin: 0 !important; padding: 13px 14px 14px !important; flex: 0 0 auto !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  border-top: 0 !important;
}


/* ===== Тултипы на кнопках карточки (Купить / В корзину) ===== */
.card-actions [data-tooltip] { position: relative; }
.card-actions [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #0d0d0d; color: #fff; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 6px 9px; border-radius: 7px; border: 1px solid #3a3a3a;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 30;
}
.card-actions [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Корзина в шапке (на всех страницах) ===== */
.aw-nav-cart {
  flex: 0 0 auto; cursor: pointer;
  height: 44px; padding: 0 14px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--aw-orange); border: 1px solid var(--aw-orange); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(249,115,22,.6);   /* постоянное свечение, как у кнопки «Начать играть» */
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
}
.aw-nav-cart[hidden] { display: none !important; }
.aw-nav-cart:hover { background: var(--aw-orange-2); color: #fff; border-color: var(--aw-orange-2); transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(249,115,22,.75); }
.aw-nav-cart:active { transform: scale(.97); }
.aw-nav-cart .aw-ico--shopping-cart { width: 20px; height: 20px; flex: 0 0 auto; }
.aw-nav-cart__sum { line-height: 1; }
.aw-nav-cart__arrow { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
/* счётчик позиций на иконке корзины (как в EasyDonate) */
.aw-nav-cart__ico-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.aw-nav-cart__count {
  position: absolute; top: -9px; right: -10px; box-sizing: border-box;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; border-radius: 999px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800; line-height: 1;
  border: 0; box-shadow: 0 2px 6px -1px rgba(0,0,0,.45);
}
.aw-nav-cart__count[hidden] { display: none; }

/* на мобиле (горизонтальные чипы категорий) число-бейдж прячем — чипы компактнее */
@media (max-width: 768px){
  .donate-products .tab-id > .tabs > .tab-links .tab-link .cat-badge { display: none !important; }
}

/* ============================================================
   СТРАНИЦА 404 (Resources/NotFound/index.tpl)
   Дефолтный pipui .window — белая карточка с чёрным текстом, чужеродна
   тёмной теме. Перекрашиваем под тёмную тему + делаем «На главную»
   полноценной кнопкой. Селектор .container.pt-40 > .window уникален
   для 404 (на других страницах такой связки нет). Навбара тут нет.
   ============================================================ */
.container.pt-40 > .window.text-center {
  background: var(--aw-card, #1a1a1a) !important;
  border: 1px solid var(--aw-border, #2a2a2a) !important;
  border-radius: 20px !important;
  color: var(--aw-text, #f2f2f2) !important;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7) !important;
  max-width: 560px !important; margin: 0 auto !important;
  padding: 8px 8px 32px !important;
}
.container.pt-40 > .window.text-center .fs-24 {
  font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important;
  color: var(--aw-text, #fff) !important;
}
.container.pt-40 > .window.text-center .pb-60 {
  color: var(--aw-muted, #a6a6a6) !important; line-height: 1.55 !important;
  padding-left: 20px !important; padding-right: 20px !important;
}
/* «На главную» — оранжевая кнопка вместо текстовой ссылки (крупный тап-таргет) */
.container.pt-40 > .window.text-center .pt-40 > a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 48px !important; padding: 0 28px !important;
  background: var(--aw-orange, #f97316) !important; color: #fff !important;
  border-radius: 12px !important; text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size: 15px !important;
  box-shadow: 0 12px 30px -10px rgba(249,115,22,.6) !important;
  transition: transform .15s ease, background .2s ease !important;
}
.container.pt-40 > .window.text-center .pt-40 > a:hover { background: var(--aw-orange-2, #ea670c) !important; transform: translateY(-1px) !important; }
/* на узких экранах — поджимаем огромные p-60/pb-60 отступы pipui, чтобы карточка не была пустой простынёй */
@media (max-width: 600px){
  .container.pt-40 > .window.text-center { padding-bottom: 24px !important; }
  .container.pt-40 > .window.text-center .p-60 { padding: 36px 16px 8px !important; }
  .container.pt-40 > .window.text-center .pb-60 { padding-bottom: 28px !important; }
  .container.pt-40 > .window.text-center .pt-40 { padding-top: 8px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   МОБИЛЬНАЯ ПРОИЗВОДИТЕЛЬНОСТЬ: backdrop-filter (blur / «стекло») — тяжёлый
   эффект; на телефонах даёт лаги и артефакты при скролле (лента, карточки
   товара, категории, sticky-навбар перерисовываются на каждый кадр). На ≤768px
   отключаем — фон под элементами и так тёмный полупрозрачный, визуально почти
   не меняется. Спецификность `html body [class]` (0,1,2) перебивает одноклассовые
   !important-правила, включая те, что в style.css (грузится позже); двухклассовые
   (карточка товара) добавлены явно.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px){
  /* одноклассовые !important-правила (навбар, лента, coop, howto, оверлеи) перебиваются спецификностью (0,1,2) */
  html body [class]{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* перф-критичные элементы с глубоко-вложенными (0,6,x) селекторами: копируем ТОЧНЫЕ
     селекторы — при равной спецификности побеждает наш блок (он позже в этом же файле) */
  .main .donate .items > .item-list > .item-id .card-foot,
  .donate-products .tab-id > .tabs > .tab-links > li .tab-link,
  html body footer.footer,
  html body > footer.footer,
  html body footer.footer.bg-cyan,
  html body .main > .mainslide.donate > footer.footer{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}