/* ==========================================================
   THE WHISPER PATCH V3
   ==========================================================
   ВАЖНО:
   1) Старый патч The Whisper лучше удалить полностью.
   2) Этот блок можно вставить в самый конец текущего CSS.
   3) Для максимально похожего макета используйте JS-файл V3.
   4) Баннер должен быть готовой картинкой: CSS/JS больше ничего
      поверх баннера не накладывают.

   КУДА ВСТАВЛЯТЬ ССЫЛКИ НА ИЗОБРАЖЕНИЯ:
   ----------------------------------------------------------
   --tw-site-bg-image       = общий фон сайта, 16:9
   --tw-banner-art-image    = готовый баннер 3:1. На него ничего не накладывается.
   --tw-card-bg-image       = фон карточки товара, 4:5 или похожий
   --tw-logo-image          = ОРИГИНАЛЬНЫЙ логотип, который вы прислали

   Иконки категорий:
   --tw-cat-all-icon
   --tw-cat-weapon-icon
   --tw-cat-ammo-icon
   --tw-cat-equipment-icon
   --tw-cat-medical-icon
   --tw-cat-transport-icon
   --tw-cat-building-icon
   --tw-cat-tools-icon
   --tw-cat-modules-icon
   --tw-cat-other-icon
   --tw-cat-furniture-icon

   Блок "Как получить товар":
   --tw-help-icon-image     = иконка/картинка блока
   --tw-help-bg-image       = необязательный декоративный фон блока

   Рекомендуемые форматы:
   фон сайта:      1920x1080 или больше
   баннер:         2100x700, 1800x600 или любое 3:1
   фон карточки:   800x1000, 1000x1250 или любое около 4:5
   логотип:        PNG/SVG с прозрачным фоном
   иконки:         SVG/PNG 64x64 с прозрачным фоном
   ========================================================== */

:root {
  --tw-site-bg-image: url("https://i.postimg.cc/L5k48dsL/Chat-GPT-Image-4-maa-2026-g-23-33-39.png");
  --tw-banner-art-image: url("https://i.postimg.cc/t4b1G52w/bannermagaz.png");
  --tw-card-bg-image: url("https://i.postimg.cc/pXNnVxsX/Chat-GPT-Image-4-maa-2026-g-23-30-31.png");
  --tw-logo-image: url("https://i.postimg.cc/1tYLQvP1/logonewbeznadpisi.png");

  --tw-cat-all-icon: url("https://i.postimg.cc/L8TmS7S7/allgoods.png");
  --tw-cat-weapon-icon: url("https://i.postimg.cc/Kj7dNSpW/gun.png");
  --tw-cat-ammo-icon: url("https://i.postimg.cc/RZQ0gd0C/med.png");
  --tw-cat-equipment-icon: url("https://i.postimg.cc/L4k7GSvN/armor.png");
  --tw-cat-medical-icon: url("https://i.postimg.cc/sxZ2DXXX/med.png");
  --tw-cat-transport-icon: url("https://i.postimg.cc/Nj2xq7BQ/car.png");
  --tw-cat-building-icon: url("https://i.postimg.cc/MXJQQGsJ/sets.png");
  --tw-cat-tools-icon: url("https://i.postimg.cc/VLdqnBSC/tools.png");
  --tw-cat-modules-icon: url("https://i.postimg.cc/c17Gz7gK/scope.png");
  --tw-cat-other-icon: url("https://i.postimg.cc/Y0mPS4WC/other.png");
  --tw-cat-furniture-icon: url("https://i.postimg.cc/YS3GJhGc/tp.png");

  --tw-help-icon-image: url("https://i.postimg.cc/Y09pDzTM/receive.png");
  --tw-help-bg-image: none;

  --tw-bg: #040708;
  --tw-bg-deep: #020405;
  --tw-panel: rgba(7, 12, 15, .86);
  --tw-panel-solid: #080d10;
  --tw-panel-soft: rgba(13, 20, 24, .82);
  --tw-card: rgba(9, 14, 17, .94);
  --tw-line: rgba(182, 207, 218, .16);
  --tw-line-2: rgba(182, 207, 218, .28);
  --tw-line-hot: rgba(215, 119, 40, .52);
  --tw-text: #e9e5da;
  --tw-text-2: #c4c3bb;
  --tw-muted: #8f9693;
  --tw-orange: #df7b29;
  --tw-orange-2: #ff9838;
  --tw-blue: #7da8b7;

  --main-white-color: rgba(10, 15, 18, .93);
  --main-bg-color: #060a0c;
  --main-white-gray-color: rgba(12, 18, 21, .92);
  --header-background: rgba(7, 11, 13, .9);
  --main-text-color: var(--tw-text);
  --text-body: #c9c4b9;
  --text-muted: #858e8e;
  --muted-2: #737c7c;
  --muted-heading: #e5e0d6;
  --muted-desc: #a8aaa5;
  --muted-3: rgba(255, 255, 255, .08);
  --muted-4: rgba(255, 255, 255, .12);
  --muted-5: rgba(255, 255, 255, .18);
  --muted-6: #858a88;
  --main-dark-color: #0b1114;
  --dark-2: #d9d4c8;
  --bg-muted: rgba(10, 15, 18, .9);
  --panel-bg: rgba(9, 14, 17, .94);
  --panel-bg-2: rgba(15, 22, 26, .96);
  --border-muted: rgba(215, 119, 40, .42);
  --warning-color: var(--tw-orange-2);
  --info-color: #7aa9b8;
  --error-color: #b85c5c;
  --success-color: #6f8f6a;
  --primary: var(--tw-orange);
  --accent: var(--tw-orange);
  --accent-2: var(--tw-orange-2);
  --info-bg: rgba(118, 167, 182, .12);
  --info-text: #bed4d9;
  --text-opaque: rgba(232, 226, 214, .9);
}

/* -------------------- BASE / BACKGROUND -------------------- */

html,
body {
  min-height: 100%;
  background: var(--tw-bg-deep) !important;
}

body {
  color: var(--tw-text) !important;
  font-family: Manrope, "Arial Narrow", Arial, sans-serif !important;
  letter-spacing: .01em;
}

body::selection {
  color: #0b0f12;
  background: var(--tw-orange-2);
}

.app-wrapper {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  min-height: 100vh !important;
  color: var(--tw-text) !important;
  background-color: var(--tw-bg-deep) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(85, 130, 145, .2), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .82)),
    var(--tw-site-bg-image) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center top, center top, center top !important;
  background-size: cover, cover, cover !important;
  background-attachment: fixed, fixed, fixed !important;
}

.app-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, transparent 0 22%, rgba(0, 0, 0, .26) 54%, rgba(0, 0, 0, .76) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .76), transparent 19%, transparent 81%, rgba(0, 0, 0, .82)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px);
}

.app-wrapper::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(circle at 18% 86%, rgba(231, 114, 31, .18), transparent 15%),
    radial-gradient(circle at 84% 16%, rgba(124, 172, 186, .12), transparent 18%);
}

.wrapper {
  position: relative !important;
  z-index: 1;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 18px 48px !important;
  gap: 18px !important;
}

@media (max-width: 1290px) {
  .wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* -------------------- HEADER -------------------- */

.navbar {
  position: relative !important;
  min-height: 82px !important;
  height: 82px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 16px !important;
  gap: 16px !important;
  overflow: visible !important;
  border: 1px solid var(--tw-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .052), transparent 54%),
    linear-gradient(90deg, rgba(215, 119, 40, .12), transparent 18%, transparent 78%, rgba(215, 119, 40, .12)),
    rgba(6, 10, 12, .9) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .52),
    inset 0 -1px 0 rgba(255, 255, 255, .052),
    inset 0 0 0 1px rgba(255, 255, 255, .028) !important;
  backdrop-filter: blur(12px);
}

.navbar::before,
.navbar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.navbar::before {
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 238, 242, .24), transparent);
}

.navbar::after {
  left: 24px;
  right: 24px;
  bottom: 6px;
  height: 1px;
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(215, 119, 40, .48), transparent);
}

.navbar-mobile {
  min-height: 82px !important;
  height: 82px !important;
  flex: 0 0 auto !important;
}

.navbar-brand {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 285px !important;
  min-width: 285px !important;
  height: 82px !important;
  margin: 0 !important;
  padding: 0 8px 0 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
}

.navbar-brand img,
.navbar-brand svg {
  display: none !important;
}

.navbar-brand::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 70px;
  height: 64px;
  background-image: var(--tw-logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, .18))
    drop-shadow(0 0 18px rgba(0, 0, 0, .7));
}

.navbar-brand::after {
  content: "THE WHISPER\A УСЛЫШЬ ШЕПОТ ЗОНЫ";
  display: block;
  white-space: pre;
  color: #f1eee6;
  font-family: Impact, "Arial Black", Manrope, sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: .88;
  letter-spacing: .045em;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .85),
    0 0 16px rgba(255, 255, 255, .08);
}

.navbar-links {
  min-width: 0 !important;
  height: 82px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.navbar-nav {
  flex: 0 0 auto !important;
}

.nav-item {
  height: 50px !important;
  border-radius: 10px !important;
  color: #c6c4bb !important;
  overflow: hidden;
}

.nav-link {
  position: relative !important;
  height: 50px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--tw-orange-2), transparent);
  transition: opacity .25s ease, transform .25s ease;
}

.nav-item:hover,
.nav-item:focus-within {
  color: #fff2e0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent),
    rgba(215, 119, 40, .08) !important;
}

.nav-item:hover .nav-link::after,
.nav-item:focus-within .nav-link::after {
  opacity: 1;
  transform: scaleX(1);
}

.tw-main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  gap: 4px !important;
  margin: 0 auto !important;
}

.tw-main-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 12px;
  border-radius: 10px;
  color: #c8c6be;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}

.tw-main-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1px;
  transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--tw-orange-2), transparent);
  transition: transform .22s ease, opacity .22s ease;
}

.tw-main-nav__link:hover,
.tw-main-nav__link.is-active {
  color: #fff2e0;
  background: rgba(215, 119, 40, .08);
}

.tw-main-nav__link:hover::after,
.tw-main-nav__link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.auth-btns {
  flex: 0 0 auto !important;
  height: auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.auth-btn,
.balance-btn,
.profile-btn,
.mobile-lang-switcher,
.language-switcher .lang-label {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--tw-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
    rgba(11, 16, 19, .82) !important;
  color: #ded9cf !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 8px 18px rgba(0, 0, 0, .24) !important;
}

.balance-btn {
  border-color: rgba(215, 119, 40, .54) !important;
  color: #fff3df !important;
}

.auth-btn:hover,
.balance-btn:hover,
.profile-btn:hover,
.mobile-lang-switcher:hover,
.language-switcher .lang-label:hover {
  border-color: rgba(255, 152, 56, .7) !important;
  color: #fff7ec !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(215, 119, 40, .08)),
    rgba(14, 18, 20, .95) !important;
}

.dropdown {
  background: rgba(8, 13, 16, .98) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
}

.dropdown li {
  color: var(--tw-text-2) !important;
}

.dropdown li:hover,
.dropdown li.active {
  background: rgba(215, 119, 40, .12) !important;
  color: #fff !important;
}

/* -------------------- HERO BANNER -------------------- */

.banner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3.55 / 1 !important;
  min-height: 254px !important;
  max-height: 360px !important;
  height: auto !important;
  margin: 16px 0 18px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid var(--tw-line-2) !important;
  pointer-events: none !important;
  background-color: #05090b !important;
  background-image:
    radial-gradient(circle at 77% 50%, rgba(87, 151, 176, .2), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .86) 34%, rgba(0, 0, 0, .42) 66%, rgba(0, 0, 0, .74) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 36%, rgba(0, 0, 0, .48)),
    var(--tw-banner-art-image) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: center, center, center, center !important;
  background-size: cover, cover, cover, cover !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .56),
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    inset 0 -80px 110px rgba(0, 0, 0, .42) !important;
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 48%, transparent 0 18%, rgba(0, 0, 0, .34) 44%, rgba(0, 0, 0, .65) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 48%, rgba(0, 0, 0, .18));
  mix-blend-mode: multiply;
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px);
}

.banner img,
.banner picture,
.banner video,
.banner canvas {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


.banner > *:not(.tw-hero-content) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.banner > *:not(.tw-hero-content) * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.tw-hero-content {
  position: absolute;
  z-index: 4;
  left: clamp(42px, 5.2vw, 82px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: min(760px, 67%);
  gap: clamp(22px, 2.4vw, 36px);
  pointer-events: none;
}

.tw-hero-logo {
  flex: 0 0 auto;
  width: clamp(152px, 15.8vw, 236px);
  aspect-ratio: 1 / 1;
  background-image: var(--tw-logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, .18))
    drop-shadow(0 16px 24px rgba(0, 0, 0, .6));
}

.tw-hero-copy {
  min-width: 0;
  transform: translateY(-2px);
}

.tw-hero-title,
.tw-hero-slogan {
  margin: 0;
  color: #f5f1e8;
  font-family: Impact, "Arial Black", Manrope, sans-serif;
  font-weight: 900;
  line-height: .88;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, .78),
    0 0 22px rgba(255, 255, 255, .1);
}

.tw-hero-title {
  font-size: clamp(44px, 4.6vw, 78px);
}

.tw-hero-slogan {
  margin-top: 6px;
  font-size: clamp(27px, 2.72vw, 48px);
  letter-spacing: .025em;
}

.tw-hero-subtitle {
  position: relative;
  margin-top: 17px;
  padding-top: 12px;
  color: rgba(229, 225, 214, .74);
  font-size: clamp(13px, 1.12vw, 18px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .015em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .86);
}

.tw-hero-subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: min(520px, 100%);
  height: 2px;
  background:
    radial-gradient(circle at 72% 50%, rgba(255, 152, 56, .95), transparent 2px),
    linear-gradient(90deg, rgba(255, 152, 56, .9), rgba(255, 255, 255, .55) 45%, transparent);
  box-shadow: 0 0 18px rgba(255, 126, 38, .24);
}

.tw-hero-subtitle span {
  color: var(--tw-orange-2);
}

/* -------------------- MAIN GRID / CATEGORY AREA -------------------- */

.grid-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 18px !important;
  align-items: start !important;
  max-width: 100% !important;
}

.left-column,
.right-column {
  min-width: 0 !important;
}

.products-container {
  gap: 12px !important;
}

.servers-buttons:empty {
  display: none !important;
}

.products-types-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

.products-types-buttons .app-button {
  position: relative !important;
  display: flex !important;
  flex: initial !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid var(--tw-line) !important;
  color: #d6d2c7 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    rgba(8, 13, 16, .82) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 8px 22px rgba(0, 0, 0, .24) !important;
  transition:
    transform .24s ease,
    color .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease !important;
}

.products-types-buttons .app-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 9px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 152, 56, .22), transparent 54%);
  transition: opacity .24s ease;
}

.products-types-buttons .app-button::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-image: var(--tw-current-cat-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    brightness(1.12)
    sepia(.4)
    saturate(1.55)
    drop-shadow(0 0 7px rgba(255, 126, 38, .32));
  opacity: .95;
}

.products-types-buttons .app-button:hover,
.products-types-buttons .app-button--active,
.products-types-buttons .app-button.app-button--active,
.products-types-buttons .app-button.active,
.products-types-buttons .app-button[aria-pressed="true"] {
  transform: translateY(-2px) !important;
  color: #fff2e3 !important;
  border-color: rgba(255, 137, 42, .58) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 137, 42, .08)),
    rgba(19, 18, 15, .92) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 137, 42, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .032) !important;
}

.products-types-buttons .app-button:hover::after,
.products-types-buttons .app-button--active::after,
.products-types-buttons .app-button.app-button--active::after,
.products-types-buttons .app-button.active::after,
.products-types-buttons .app-button[aria-pressed="true"]::after {
  opacity: 1;
}

.products-types-buttons .app-button img,
.products-types-buttons .app-button svg {
  display: none !important;
}

.products-types-buttons .app-button[data-tw-cat="all"] { --tw-current-cat-icon: var(--tw-cat-all-icon); }
.products-types-buttons .app-button[data-tw-cat="weapon"] { --tw-current-cat-icon: var(--tw-cat-weapon-icon); }
.products-types-buttons .app-button[data-tw-cat="ammo"] { --tw-current-cat-icon: var(--tw-cat-ammo-icon); }
.products-types-buttons .app-button[data-tw-cat="equipment"] { --tw-current-cat-icon: var(--tw-cat-equipment-icon); }
.products-types-buttons .app-button[data-tw-cat="medical"] { --tw-current-cat-icon: var(--tw-cat-medical-icon); }
.products-types-buttons .app-button[data-tw-cat="transport"] { --tw-current-cat-icon: var(--tw-cat-transport-icon); }
.products-types-buttons .app-button[data-tw-cat="building"] { --tw-current-cat-icon: var(--tw-cat-building-icon); }
.products-types-buttons .app-button[data-tw-cat="tools"] { --tw-current-cat-icon: var(--tw-cat-tools-icon); }
.products-types-buttons .app-button[data-tw-cat="modules"] { --tw-current-cat-icon: var(--tw-cat-modules-icon); }
.products-types-buttons .app-button[data-tw-cat="other"] { --tw-current-cat-icon: var(--tw-cat-other-icon); }
.products-types-buttons .app-button[data-tw-cat="teleport"] { --tw-current-cat-icon: var(--tw-cat-furniture-icon); }

/* Запасной порядок, если JS не подключен. */
.products-types-buttons .app-button:nth-child(1) { --tw-current-cat-icon: var(--tw-cat-all-icon); }
.products-types-buttons .app-button:nth-child(2) { --tw-current-cat-icon: var(--tw-cat-weapon-icon); }
.products-types-buttons .app-button:nth-child(3) { --tw-current-cat-icon: var(--tw-cat-ammo-icon); }
.products-types-buttons .app-button:nth-child(4) { --tw-current-cat-icon: var(--tw-cat-equipment-icon); }
.products-types-buttons .app-button:nth-child(5) { --tw-current-cat-icon: var(--tw-cat-transport-icon); }
.products-types-buttons .app-button:nth-child(6) { --tw-current-cat-icon: var(--tw-cat-building-icon); }
.products-types-buttons .app-button:nth-child(7) { --tw-current-cat-icon: var(--tw-cat-tools-icon); }
.products-types-buttons .app-button:nth-child(8) { --tw-current-cat-icon: var(--tw-cat-modules-icon); }
.products-types-buttons .app-button:nth-child(9) { --tw-current-cat-icon: var(--tw-cat-other-icon); }
.products-types-buttons .app-button:nth-child(10) { --tw-current-cat-icon: var(--tw-cat-furniture-icon); }

.search-input {
  width: 100% !important;
  height: 52px !important;
  padding: 0 18px 0 48px !important;
  border-radius: 10px !important;
  border: 1px solid var(--tw-line) !important;
  outline: none !important;
  color: var(--tw-text) !important;
  background-color: rgba(8, 13, 16, .78) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18.1a7.3 7.3 0 1 1 0-14.6 7.3 7.3 0 0 1 0 14.6Zm0-2a5.3 5.3 0 1 0 0-10.6 5.3 5.3 0 0 0 0 10.6Zm5.65.93 3.07 3.07-1.42 1.42-3.07-3.07 1.42-1.42Z' fill='%23df7b29'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 16px center, center !important;
  background-size: 22px 22px, cover !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .018),
    0 8px 20px rgba(0, 0, 0, .18) !important;
}

.search-input::placeholder {
  color: rgba(213, 211, 202, .46) !important;
}

.search-input:focus {
  border-color: rgba(255, 152, 56, .52) !important;
  box-shadow:
    0 0 0 3px rgba(255, 126, 38, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

/* -------------------- HELP CARD / RIGHT BLOCK -------------------- */

.right-column .banner-elem,
.right-column .monitoring,
.right-column .tw-help-card,
.grid-wrapper > .right-column > *:first-child {
  position: relative !important;
  min-height: 130px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(215, 119, 40, .36) !important;
  background-color: rgba(8, 12, 15, .92) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
    radial-gradient(circle at 10% 15%, rgba(255, 137, 42, .16), transparent 38%),
    var(--tw-help-bg-image) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
  color: var(--tw-text) !important;
  transform: none !important;
}

.right-column .banner-elem::before,
.right-column .monitoring::before,
.right-column .tw-help-card::before,
.grid-wrapper > .right-column > *:first-child::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 28px;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: rgba(255, 128, 36, .08);
  background-image: var(--tw-help-icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  border: 1px solid rgba(255, 139, 46, .38);
  box-shadow: 0 0 18px rgba(255, 121, 32, .15);
}

.right-column .banner-elem::after,
.right-column .monitoring::after,
.right-column .tw-help-card::after,
.grid-wrapper > .right-column > *:first-child::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .1), transparent 18%, transparent 82%, rgba(255, 255, 255, .06)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 5px);
  opacity: .7;
}

.right-column .banner-item-link,
.right-column .monitoring > *,
.right-column .tw-help-card__inner {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  padding: 25px 24px 24px 78px !important;
  color: var(--tw-text-2) !important;
  text-decoration: none !important;
}

.right-column .bunner-title,
.right-column .banner-title,
.right-column .monitoring-title,
.right-column .tw-help-card__title {
  margin: 0 0 8px !important;
  color: var(--tw-orange-2) !important;
  font-family: Manrope, "Arial Narrow", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 12px rgba(255, 112, 31, .12) !important;
}

.right-column .banner-content,
.right-column .monitoring-title-span,
.right-column .tw-help-card__text {
  margin: 0 !important;
  color: rgba(229, 224, 212, .76) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* Если JS перерисовал блок помощи. */
.tw-help-card__title {
  display: block;
}

.tw-help-card__text b {
  color: #fff2dd;
}

/* -------------------- PRODUCT CARDS -------------------- */

.product-cards {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.product-card {
  position: relative !important;
  aspect-ratio: 1.05 / 1 !important;
  min-height: 166px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid var(--tw-line) !important;
  background-color: var(--tw-card) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .16)),
    radial-gradient(circle at 50% 22%, rgba(126, 164, 176, .11), transparent 34%),
    var(--tw-card-bg-image) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center, center, center !important;
  background-size: cover, cover, cover !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .32),
    inset 0 0 0 1px rgba(255, 255, 255, .03) !important;
  transform: translateZ(0);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    filter .25s ease !important;
}

.product-card::before,
.product-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.product-card::before {
  inset: 5px;
  z-index: 1;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .24);
}

.product-card::after {
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 152, 56, .16), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
  transition: opacity .25s ease;
}

.product-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 143, 48, .54) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 143, 48, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .04) !important;
  filter: brightness(1.05);
}

.product-card:hover::after {
  opacity: 1;
}

.product-card-image-container {
  position: relative !important;
  z-index: 3 !important;
  height: 72% !important;
  padding: 16px 18px 6px !important;
  background: transparent !important;
  overflow: hidden !important;
}

.product-card-image-container::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 2px;
  height: 20px;
  opacity: .42;
  filter: blur(12px);
  background: rgba(0, 0, 0, .9);
}

.product-card-image-container img {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, .78))
    saturate(.92)
    contrast(1.04) !important;
  transition: transform .25s ease, filter .25s ease !important;
}

.product-card:hover .product-card-image-container img {
  transform: translateY(-2px) scale(1.035);
  filter:
    drop-shadow(0 13px 16px rgba(0, 0, 0, .84))
    saturate(1)
    contrast(1.06) !important;
}

.product-card-footer {
  position: relative !important;
  z-index: 4 !important;
  height: 28% !important;
  max-height: none !important;
  padding: 0 14px 13px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: var(--tw-text) !important;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .34)) !important;
}

.product-card-name {
  color: #e7e1d5 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8) !important;
}

.product-card-price {
  color: var(--tw-orange-2) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-shadow: 0 0 12px rgba(255, 119, 35, .18) !important;
}

.product-card-old-price {
  color: rgba(210, 210, 205, .45) !important;
}

.product-card-label,
.product-card-badge-days,
.product-card-badge-percentage {
  z-index: 6 !important;
  background: rgba(215, 119, 40, .9) !important;
  color: #fff6ec !important;
  font-weight: 900 !important;
}

/* -------------------- MODALS / FORMS / TABLES -------------------- */

.modal,
.product-modal,
.recharge-panel,
.profile-info,
.form,
.table,
.advent-header,
.advent-card,
.advent-sidebar__block,
.cookie-banner {
  color: var(--tw-text) !important;
  border-color: var(--tw-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent),
    rgba(8, 13, 16, .96) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55) !important;
}

.modal-content,
.product-modal-description,
.product-modal-title,
.profile-info__cell,
.recharge-panel-label,
.recharge-panel-header,
.recharge-panel-title,
.advent-header__title,
.advent-sidebar__title,
.advent-card__day-number,
.reward-hidden__title,
.reward-product__name,
.reward-balance__value {
  color: var(--tw-text) !important;
}

.text-input,
.recharge-panel-input,
.select-display,
.select-options,
.amount-control-counter,
.amount-control-total,
.product-modal-inputs-zone-block,
.reward-product__image-wrap,
.reward-hidden,
.reward-balance,
.table thead,
.table tbody,
.roulette-item,
.roulette-prize-card {
  color: var(--tw-text) !important;
  border-color: var(--tw-line) !important;
  background: rgba(7, 12, 15, .82) !important;
}

input,
textarea,
select {
  color: var(--tw-text) !important;
  background-color: rgba(7, 12, 15, .82) !important;
  border-color: var(--tw-line) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(210, 210, 205, .45) !important;
}

.modal-primary-button,
.cookie-buttons button:first-child {
  background: var(--tw-orange) !important;
  color: #fff !important;
}

.modal-close-button-text {
  color: var(--tw-text-2) !important;
}

/* -------------------- RESPONSIVE -------------------- */

@media (max-width: 1180px) {
  .wrapper {
    max-width: 100% !important;
  }

  .navbar-brand {
    width: 240px !important;
    min-width: 240px !important;
  }

  .navbar-brand::before {
    width: 58px;
    height: 56px;
  }

  .navbar-brand::after {
    font-size: 20px;
  }

  .tw-main-nav__link {
    padding: 0 8px;
    font-size: 11px;
  }

  .grid-wrapper {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

  .product-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 999px) {
  .navbar {
    height: auto !important;
    min-height: 82px !important;
    padding: 0 !important;
  }

  .navbar-mobile {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .navbar-links {
    width: 100% !important;
    height: auto !important;
    padding: 10px 16px 16px !important;
    background: rgba(6, 10, 12, .96) !important;
  }

  .tw-main-nav {
    width: 100% !important;
    flex-wrap: wrap !important;
    order: -1;
  }

  .auth-btns {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .auth-btn,
  .balance-btn,
  .profile-btn {
    flex: 1 1 150px !important;
    justify-content: center !important;
  }

  .grid-wrapper {
    grid-template-columns: 1fr !important;
  }

  .products-types-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .product-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .right-column .banner-elem,
  .right-column .monitoring,
  .right-column .tw-help-card,
  .grid-wrapper > .right-column > *:first-child {
    min-height: 110px !important;
  }

  .tw-hero-content {
    left: 34px;
    width: 78%;
  }

  .tw-hero-logo {
    width: clamp(118px, 18vw, 165px);
  }

  .tw-hero-title {
    font-size: clamp(34px, 6vw, 58px);
  }

  .tw-hero-slogan {
    font-size: clamp(22px, 4vw, 36px);
  }

  .tw-hero-subtitle {
    font-size: 13px;
  }
}

@media (max-width: 700px) {
  .wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar-brand {
    width: auto !important;
    min-width: 0 !important;
  }

  .navbar-brand::after {
    font-size: 18px;
  }

  .banner {
    aspect-ratio: 1.45 / 1 !important;
    min-height: 360px !important;
  }

  .tw-hero-content {
    left: 22px;
    right: 22px;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tw-hero-logo {
    width: 108px;
  }

  .tw-hero-title {
    font-size: 38px;
  }

  .tw-hero-slogan {
    font-size: 26px;
  }

  .tw-hero-subtitle {
    font-size: 12px;
    max-width: 320px;
  }

  .products-types-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .product-card {
    min-height: 156px !important;
  }
}

@media (max-width: 480px) {
  .navbar-brand::before {
    width: 54px;
    height: 52px;
  }

  .navbar-brand::after {
    font-size: 16px;
  }

  .tw-main-nav__link {
    flex: 1 1 42%;
  }

  .products-types-buttons {
    grid-template-columns: 1fr !important;
  }

  .product-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Если платформа вывела старое пустое/лишнее меню, JS добавляет свое меню .tw-main-nav. */
.navbar-links > .navbar-nav:not(.tw-main-nav) {
  display: none !important;
}



/* ==========================================================
   THE WHISPER FIX V3
   ----------------------------------------------------------
   Changes requested:
   - tighter vertical spacing;
   - product cards use the full content width again;
   - no logo/text/extra overlays on the banner;
   - header brand contains only THE WHISPER;
   - header menu contains only Home and Rules via JS V3;
   - empty right-side helper placeholders are hidden;
   - category/help images remain configurable by separate variables.
   ========================================================== */

@font-face {
  font-family: "TheWhisperHeaderTitle";
  src: url("https://thewhisper.zone/dirtyegocyrillic.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Готовый баннер. Можно заливать его через админку сайта.
     Если баннер задаешь только через CSS, вставь ссылку сюда. */
  --tw-banner-art-image: url("ССЫЛКА_НА_ГОТОВЫЙ_БАННЕР_3x1.png");

  /* Шрифт надписи THE WHISPER в верхнем баре.
     Если шрифт не нужен, не трогай @font-face выше. */
  --tw-header-title-font: "TheWhisperHeaderTitle", Impact, "Dirty Ego Cyrillic", Manrope, sans-serif;
}

/* ---------- tighter page spacing ---------- */

.wrapper {
  gap: 8px !important;
  padding-top: 0 !important;
}

.navbar {
  min-height: 76px !important;
  height: 76px !important;
  margin-bottom: 8px !important;
  padding: 0 14px !important;
}

.navbar-mobile,
.navbar-links {
  min-height: 76px !important;
  height: 76px !important;
}

.grid-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
  align-items: start !important;
  max-width: 100% !important;
}

/* Let banner/categories/search/products participate in the same grid.
   This allows product cards to span the full page width, like in the mockup. */
.grid-wrapper > .left-column {
  display: contents !important;
}

.left-column > .products-container {
  display: contents !important;
}

.banner {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
}

.products-types-buttons {
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
}

.right-column {
  grid-column: 2 / 3 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  margin: 0 !important;
}

.search-input {
  grid-column: 1 / 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
}

.product-cards {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  margin: 2px 0 0 !important;
}

/* ---------- header brand: exact logo + THE WHISPER only ---------- */

.navbar-brand {
  width: 250px !important;
  min-width: 250px !important;
  height: 76px !important;
  gap: 12px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.navbar-brand::before {
  width: 64px !important;
  height: 58px !important;
}

.navbar-brand::after {
  content: "THE WHISPER" !important;
  white-space: nowrap !important;
  color: #f1eee6 !important;
  font-family: var(--tw-header-title-font) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .85),
    0 0 16px rgba(255, 255, 255, .08) !important;
}

/* Keep only the JS menu. JS V3 renders only ГЛАВНАЯ and ПРАВИЛА. */
.tw-main-nav {
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-left: 8px !important;
  margin-right: auto !important;
}

.tw-main-nav__link {
  min-width: 94px !important;
  padding: 0 16px !important;
}

/* ---------- banner: no overlays, no injected text/logo ---------- */

.banner {
  position: relative !important;
  aspect-ratio: 3.55 / 1 !important;
  min-height: 254px !important;
  max-height: 360px !important;
  border-radius: 18px !important;
  border: 1px solid var(--tw-line-2) !important;
  overflow: hidden !important;
  background-color: #05090b !important;
  background-image: var(--tw-banner-art-image) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .48),
    inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

/* User asked: nothing should be placed over the banner. */
.banner::before,
.banner::after {
  content: none !important;
  display: none !important;
}

.tw-hero-content,
.tw-hero-logo,
.tw-hero-copy,
.tw-hero-title,
.tw-hero-slogan,
.tw-hero-subtitle {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Undo old V2 rules that hid the platform banner image. */
.banner > *:not(.tw-hero-content),
.banner > *:not(.tw-hero-content) * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.banner > *:not(.tw-hero-content) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.banner img,
.banner picture,
.banner video,
.banner canvas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

/* ---------- categories/search spacing ---------- */

.products-container {
  gap: 0 !important;
}

.products-types-buttons {
  gap: 8px !important;
}

.products-types-buttons .app-button {
  min-height: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
}

.search-input {
  height: 50px !important;
}

/* ---------- help block: one block only, no empty duplicate ---------- */

.right-column > [data-tw-empty="1"],
.right-column > .tw-empty-side-block,
.right-column > *:empty {
  display: none !important;
}

.right-column .tw-help-card {
  display: block !important;
  min-height: 120px !important;
  height: 100% !important;
  margin: 0 !important;
}

.right-column .tw-help-card__inner {
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* If an old empty first child was styled by V2, neutralize it. */
.grid-wrapper > .right-column > *:first-child[data-tw-empty="1"] {
  display: none !important;
}

/* ---------- product cards: restore larger cards/previews ---------- */

.product-cards {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.product-card {
  aspect-ratio: 1.08 / 1 !important;
  min-height: 182px !important;
  border-radius: 12px !important;
}

.product-card-image-container {
  height: 74% !important;
  padding: 12px 14px 4px !important;
}

.product-card-image-container img {
  width: 100% !important;
  height: 100% !important;
  max-width: 108% !important;
  max-height: 108% !important;
  object-fit: contain !important;
}

.product-card-footer {
  height: 26% !important;
  padding: 0 12px 12px !important;
  gap: 8px !important;
}

.product-card-name {
  font-size: 13px !important;
  line-height: 1.08 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-card-price {
  font-size: 13px !important;
}

/* ---------- responsive corrections ---------- */

@media (max-width: 1180px) {
  .navbar-brand {
    width: 210px !important;
    min-width: 210px !important;
  }

  .navbar-brand::after {
    font-size: 23px !important;
  }

  .grid-wrapper {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

  .product-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 999px) {
  .grid-wrapper {
    grid-template-columns: 1fr !important;
  }

  .grid-wrapper > .left-column,
  .left-column > .products-container {
    display: block !important;
  }

  .banner,
  .products-types-buttons,
  .right-column,
  .search-input,
  .product-cards {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .products-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .right-column {
    display: block !important;
  }

  .product-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .navbar-brand {
    width: auto !important;
    min-width: 0 !important;
  }

  .navbar-brand::after {
    font-size: 20px !important;
  }

  .banner {
    aspect-ratio: 1.65 / 1 !important;
    min-height: 300px !important;
  }

  .product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-card {
    min-height: 170px !important;
  }
}

@media (max-width: 480px) {
  .navbar-brand::after {
    font-size: 18px !important;
  }

  .product-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   THE WHISPER FIX V4 AFTER V3
   ----------------------------------------------------------
   Вставь этот блок В САМЫЙ КОНЕЦ CSS, если сейчас стоит V3.

   Исправляет:
   1) расстояние между верхним баром и баннером;
   2) плавный hover для пункта "ПРАВИЛА" без мерцания;
   3) баннер 2172x724 показывается целиком, без cover-обрезки.
   ========================================================== */

:root {
  /* Главный вертикальный отступ между шапкой, баннером и категориями. */
  --tw-layout-gap: 10px;

  /* Соотношение сторон твоего баннера 2172 x 724. */
  --tw-banner-aspect-ratio: 2172 / 724;
}

/* ---------- compact vertical spacing ---------- */

.wrapper {
  gap: 0 !important;
  padding-top: 0 !important;
}

.navbar {
  margin-bottom: 0 !important;
}

/* Сценарий, когда после шапки сразу идет общая сетка с баннером внутри. */
.navbar + .grid-wrapper {
  margin-top: var(--tw-layout-gap) !important;
}

/* Сценарий, когда баннер является отдельным соседом шапки. */
.navbar + .banner {
  margin-top: var(--tw-layout-gap) !important;
  margin-bottom: var(--tw-layout-gap) !important;
}

/* Если баннер отдельный, а сетка категорий идет сразу за ним — не добавляем второй лишний отступ. */
.banner + .grid-wrapper {
  margin-top: 0 !important;
}

.grid-wrapper {
  row-gap: var(--tw-layout-gap) !important;
}

/* Когда баннер лежит внутри grid-wrapper, отступы задает сама сетка. */
.grid-wrapper .banner,
.grid-wrapper > .banner {
  margin: 0 !important;
}

.products-container {
  gap: var(--tw-layout-gap) !important;
}

.products-types-buttons {
  margin: 0 !important;
}

.search-input {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.product-cards {
  margin-top: 0 !important;
}

/* ---------- banner: show full 2172x724 image, no crop ---------- */

.banner {
  aspect-ratio: var(--tw-banner-aspect-ratio) !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* Все реальные картинки баннера должны вписываться целиком, а не cover-обрезаться. */
.banner > *:not(.tw-hero-content) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.banner a,
.banner picture,
.banner .banner-link,
.banner .banner-item,
.banner .banner-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.banner img,
.banner picture img,
.banner video,
.banner canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.banner::before,
.banner::after,
.tw-hero-content,
.tw-hero-logo,
.tw-hero-copy,
.tw-hero-title,
.tw-hero-slogan,
.tw-hero-subtitle {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- header nav hover: stable glow, no flicker ---------- */

.tw-main-nav__link {
  position: relative !important;
  isolation: isolate !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.tw-main-nav__link::after {
  pointer-events: none !important;
  bottom: 6px !important;
  height: 1px !important;
  opacity: 0 !important;
  transform: scaleX(.25) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 152, 56, .98), transparent) !important;
  box-shadow: 0 0 14px rgba(255, 152, 56, .34) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.tw-main-nav__link:hover,
.tw-main-nav__link:focus-visible {
  color: #fff4e4 !important;
  border-color: rgba(255, 152, 56, .36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(215, 119, 40, .105)),
    rgba(12, 17, 19, .9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 0 18px rgba(215, 119, 40, .16) !important;
}

.tw-main-nav__link:hover::after,
.tw-main-nav__link:focus-visible::after,
.tw-main-nav__link.is-active::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.tw-main-nav__link.is-active {
  color: #fff4e4 !important;
  border-color: rgba(255, 152, 56, .28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(215, 119, 40, .12)),
    rgba(15, 18, 20, .9) !important;
}

/* Сохраняем полное изображение баннера и на малых экранах: старый mobile-crop отключен. */
@media (max-width: 700px) {
  .banner {
    aspect-ratio: var(--tw-banner-aspect-ratio) !important;
    min-height: 0 !important;
    max-height: none !important;
    background-size: contain !important;
  }
}
/* ==========================================================
   THE WHISPER FIX V5 AFTER V4
   ----------------------------------------------------------
   Вставь этот блок В САМЫЙ КОНЕЦ CSS поверх текущего V4.

   Исправляет:
   1) уменьшает расстояние между верхним баром и баннером;
   2) выставляет новый размер баннера 2172 x 665;
   3) не обрезает и не растягивает картинку баннера;
   4) поднимает окно пополнения баланса / модальные окна выше всех элементов.
   ========================================================== */

:root {
  /* Твой новый баннер: 2172 x 665. */
  --tw-banner-aspect-ratio: 2172 / 665;

  /* Основной отступ между блоками под баннером. */
  --tw-layout-gap: 8px;

  /* Подтягивание всей сетки вверх к верхнему бару.
     Если нужно еще ближе: поставь -36px.
     Если стало слишком близко: поставь -20px. */
  --tw-navbar-banner-pull: -30px;

  /* Максимальный z-index для модальных окон. */
  --tw-modal-z: 2147483000;
}

/* ---------- расстояние между верхним баром и баннером ---------- */

.wrapper {
  gap: 0 !important;
  padding-top: 0 !important;
}

.navbar {
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 200 !important;
  overflow: visible !important;
}

.navbar-mobile,
.navbar-links,
.auth-btns,
.auth-btn,
.balance-btn,
.profile-btn,
.language-switcher {
  overflow: visible !important;
}

/* Главная коррекция: сетка с баннером подтягивается к шапке. */
.wrapper > .grid-wrapper:first-of-type,
.navbar + .grid-wrapper,
.navbar ~ .grid-wrapper:first-of-type {
  margin-top: var(--tw-navbar-banner-pull) !important;
}

.grid-wrapper {
  row-gap: var(--tw-layout-gap) !important;
}

.grid-wrapper .banner,
.grid-wrapper > .banner,
.banner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.products-container {
  gap: var(--tw-layout-gap) !important;
}

.products-types-buttons,
.search-input,
.product-cards {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.product-cards {
  margin-top: 0 !important;
}

/* ---------- баннер 2172 x 665 без обрезки и без растяжения ---------- */

.banner {
  aspect-ratio: var(--tw-banner-aspect-ratio) !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  background-color: #05090b !important;
  background-image: var(--tw-banner-art-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  overflow: hidden !important;
}

/* Важно: не absolute + cover. Показываем изображение целиком. */
.banner > *:not(.tw-hero-content) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.banner a,
.banner picture,
.banner .banner-link,
.banner .banner-item,
.banner .banner-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.banner img,
.banner picture img,
.banner video,
.banner canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Никаких декоративных наложений на баннер. */
.banner::before,
.banner::after,
.tw-hero-content,
.tw-hero-logo,
.tw-hero-copy,
.tw-hero-title,
.tw-hero-slogan,
.tw-hero-subtitle {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- модальные окна / пополнение баланса поверх всего ---------- */

html.tw-modal-open,
html.tw-modal-open body {
  overflow-x: hidden !important;
}

/* JS V5 добавляет этот класс всем родителям модалки, чтобы она не
   оказывалась запертой внутри stacking-context верхней панели. */
.tw-modal-host {
  position: relative !important;
  z-index: calc(var(--tw-modal-z) - 10) !important;
  overflow: visible !important;
}

html.tw-modal-open .navbar,
html.tw-modal-open .grid-wrapper,
html.tw-modal-open .wrapper,
html.tw-modal-open .app-wrapper {
  overflow: visible !important;
}

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--tw-modal-z) !important;
  isolation: isolate !important;
  overflow-y: auto !important;
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(4px) !important;
  transform: none !important;
}

.modal-overlay .modal,
.modal-overlay .recharge-panel,
.modal,
.recharge-panel {
  position: relative !important;
  z-index: calc(var(--tw-modal-z) + 1) !important;
}

/* Если окно пополнения находится внутри шапки, сама шапка тоже должна
   стать верхним stacking-context. */
.navbar:has(.modal-overlay),
.navbar:has(.recharge-panel),
.navbar.tw-modal-host {
  z-index: calc(var(--tw-modal-z) - 5) !important;
}

.grid-wrapper:has(.modal-overlay),
.grid-wrapper:has(.recharge-panel),
.product-card:has(.modal-overlay),
.product-card:has(.recharge-panel) {
  z-index: calc(var(--tw-modal-z) - 5) !important;
  overflow: visible !important;
}

@media (max-width: 700px) {
  :root {
    --tw-navbar-banner-pull: -16px;
  }

  .banner {
    aspect-ratio: var(--tw-banner-aspect-ratio) !important;
    min-height: 0 !important;
    max-height: none !important;
    background-size: contain !important;
  }
}

/* ==========================================================
   THE WHISPER CRITICAL FIX V6 AFTER V5
   ----------------------------------------------------------
   Вставь этот блок В САМЫЙ КОНЕЦ CSS поверх текущего V5.

   Исправляет:
   1) баннер принудительно подтягивается к верхнему бару;
   2) баннер держит новый размер 2172 x 665 и не обрезается;
   3) окно пополнения баланса принудительно переносится JS в body
      и показывается поверх всех элементов.
   ========================================================== */

:root {
  --tw-navbar-banner-gap-target: 8px;
  --tw-banner-aspect-ratio: 2172 / 665;
  --tw-modal-z: 2147483647;

  /* Запасной CSS-подъем баннера. JS V6 затем точно подгонит отступ.
     Если JS по какой-то причине не сработает, можно менять вручную:
     -45px = выше, -25px = ниже. */
  --tw-banner-manual-pull: -38px;
}

.wrapper {
  gap: 0 !important;
  padding-top: 0 !important;
}

.navbar {
  margin-bottom: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 500 !important;
}

/* Баннер чаще всего является прямым элементом .wrapper, поэтому тянем именно его,
   а не .grid-wrapper. Предыдущая версия тянула сетку и могла не попадать в DOM. */
.wrapper > .banner,
.navbar + .banner,
.banner {
  margin-top: var(--tw-banner-manual-pull) !important;
  margin-bottom: var(--tw-navbar-banner-gap-target) !important;
  aspect-ratio: var(--tw-banner-aspect-ratio) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.banner > a,
.banner > picture,
.banner > div,
.banner .banner-link,
.banner .banner-item,
.banner .banner-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.banner img,
.banner picture img,
.banner video,
.banner canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* Никаких наложений поверх баннера. */
.banner::before,
.banner::after,
.tw-hero-content,
.tw-hero-logo,
.tw-hero-copy,
.tw-hero-title,
.tw-hero-slogan,
.tw-hero-subtitle {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Плотность блоков под баннером. */
.grid-wrapper,
.products-container,
.left-column,
.right-column {
  row-gap: 8px !important;
}

.products-types-buttons {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.search-input {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.product-cards {
  margin-top: 0 !important;
}

/* ---------- модальные окна поверх всего ---------- */

html.tw-modal-open,
html.tw-modal-open body {
  overflow-x: hidden !important;
}

html.tw-modal-open .app-wrapper,
html.tw-modal-open .wrapper,
html.tw-modal-open .navbar,
html.tw-modal-open .navbar-links,
html.tw-modal-open .auth-btns,
html.tw-modal-open .balance-btn,
html.tw-modal-open .profile-btn,
html.tw-modal-open .grid-wrapper,
html.tw-modal-open .left-column,
html.tw-modal-open .right-column,
html.tw-modal-open .product-card {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* JS V6 добавляет .tw-body-layer и переносит overlay/dialog в body. */
body > .tw-body-layer,
.modal-overlay.tw-body-layer,
.tw-body-layer.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--tw-modal-z) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: rgba(0, 0, 0, .76) !important;
  backdrop-filter: blur(5px) !important;
  isolation: isolate !important;
  transform: none !important;
}

.modal-overlay,
.modal-overlay.tw-body-layer,
.tw-modal-top {
  z-index: var(--tw-modal-z) !important;
}

body > .tw-body-layer.modal,
body > .tw-body-layer.recharge-panel,
.recharge-panel.tw-body-layer,
.modal.tw-body-layer {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: calc(var(--tw-modal-z) + 1) !important;
  max-width: min(1000px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
}

body > .tw-body-layer .modal,
body > .tw-body-layer .recharge-panel,
.modal-overlay.tw-body-layer .modal,
.modal-overlay.tw-body-layer .recharge-panel {
  position: relative !important;
  z-index: calc(var(--tw-modal-z) + 2) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
}

/* Если модалка все-таки не перенеслась в body, поднимаем её и родителей. */
.tw-modal-host,
.navbar.tw-modal-host,
.wrapper.tw-modal-host,
.app-wrapper.tw-modal-host,
.grid-wrapper.tw-modal-host,
.balance-btn.tw-modal-host,
.auth-btns.tw-modal-host {
  position: relative !important;
  z-index: calc(var(--tw-modal-z) - 10) !important;
  overflow: visible !important;
}

@media (max-width: 700px) {
  :root {
    --tw-banner-manual-pull: -18px;
    --tw-navbar-banner-gap-target: 8px;
  }
}
/* ==========================================================
   THE WHISPER CATEGORY ICON ALIGNMENT FIX
   ----------------------------------------------------------
   Вставь этот блок В САМЫЙ КОНЕЦ CSS.

   Что делает:
   - иконка категории фиксируется в левой зоне кнопки;
   - текст занимает оставшееся пространство;
   - текст центрируется относительно своей правой зоны, а не относительно
     общей пары "иконка + текст".
   ========================================================== */

:root {
  --tw-cat-icon-cell-width: 48px;
  --tw-cat-icon-size: 20px;
  --tw-cat-text-padding-right: 12px;
}

.products-types-buttons .app-button {
  display: grid !important;
  grid-template-columns: var(--tw-cat-icon-cell-width) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  padding: 0 var(--tw-cat-text-padding-right) 0 0 !important;
  text-align: center !important;
}

.products-types-buttons .app-button::before {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: var(--tw-cat-icon-size) !important;
  height: var(--tw-cat-icon-size) !important;
  margin: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

.products-types-buttons .app-button .tw-cat-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: center !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 6px 0 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Декоративная подсветка кнопки должна оставаться под иконкой и текстом. */
.products-types-buttons .app-button::after {
  z-index: 1 !important;
}

@media (max-width: 700px) {
  :root {
    --tw-cat-icon-cell-width: 42px;
    --tw-cat-icon-size: 18px;
    --tw-cat-text-padding-right: 200px;
  }
}
.navbar-brand::after {
  font-family: var(--tw-header-title-font) !important;
  font-weight: 900 !important;
  font-size: 36px !important;
}
/* THE WHISPER — выравнивание логотипа и названия в верхнем баре */
:root {
  /* Высота логотипа в шапке = высота кнопок Главная/Правила */
  --tw-header-brand-height: 60px;

  /* Размер текста THE WHISPER */
  --tw-header-title-size: 40px;

  /* Ручная микрокоррекция текста по вертикали.
     Если текст чуть высоко — поставь 1px, 2px, 3px.
     Если низко — поставь отрицательное значение, например -1px. */
  --tw-header-title-y: 13px;
}

.navbar-brand {
  height: var(--tw-header-brand-height) !important;
  min-height: var(--tw-header-brand-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-left: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* сам логотип */
.navbar-brand::before {
  width: var(--tw-header-brand-height) !important;
  height: var(--tw-header-brand-height) !important;
  min-width: var(--tw-header-brand-height) !important;
  min-height: var(--tw-header-brand-height) !important;
  max-width: var(--tw-header-brand-height) !important;
  max-height: var(--tw-header-brand-height) !important;
  flex: 0 0 var(--tw-header-brand-height) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* надпись THE WHISPER */
.navbar-brand::after {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--tw-header-brand-height) !important;
  line-height: var(--tw-header-brand-height) !important;
  font-size: var(--tw-header-title-size) !important;
  transform: translateY(var(--tw-header-title-y)) !important;
  margin: 0 !important;
  padding: 0 !important;
}
:root {
  /* Положительное значение двигает логотип вниз, отрицательное — вверх */
  --tw-header-logo-y: 8px;
}

.navbar-brand::before {
  transform: translateY(var(--tw-header-logo-y)) !important;
}
:root {
  /* расстояние между логотипом и текстом THE WHISPER */
  --tw-header-logo-title-gap: 6px;

  /* расстояние между текстом THE WHISPER и кнопками Главная/Правила */
  --tw-header-brand-nav-gap: 34px;
}

.navbar-brand {
  gap: var(--tw-header-logo-title-gap) !important;
  margin-right: var(--tw-header-brand-nav-gap) !important;
}

/* на случай, если меню прижато не через margin, а через flex */
.tw-main-nav {
  margin-left: 0 !important;
}
/* ==========================================================
   THE WHISPER — FIX: кнопки +/- в карточке товара
   ========================================================== */

.product-modal .amount-control-counter {
  background: rgba(6, 10, 13, 0.92) !important;
  border: 1px solid rgba(210, 170, 90, 0.35) !important;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.65),
    0 0 16px rgba(0, 0, 0, 0.35) !important;
  min-height: 48px !important;
}

.product-modal .amount-control-counter-button {
  width: 52px !important;
  min-width: 52px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #f2d28a !important;
  background:
    linear-gradient(180deg, rgba(44, 37, 25, 0.95), rgba(16, 14, 12, 0.95)) !important;
  border: 1px solid rgba(242, 210, 138, 0.32) !important;
  border-radius: 10px !important;

  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0 10px rgba(242, 150, 55, 0.35) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.product-modal .amount-control-counter-button:hover {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(174, 104, 35, 0.95), rgba(74, 42, 18, 0.95)) !important;
  border-color: rgba(255, 177, 72, 0.75) !important;
  box-shadow: 0 0 18px rgba(255, 122, 36, 0.28) !important;
  transform: none !important;
}

.product-modal .amount-control-count {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  min-width: 58px !important;
  text-align: center !important;
}

.product-modal .amount-control-total {
  color: #ffffff !important;
  background: rgba(6, 10, 13, 0.92) !important;
  border: 1px solid rgba(210, 170, 90, 0.25) !important;
}

.product-modal .amount-control-total-rub {
  color: #f2d28a !important;
}
/* ==========================================================
   THE WHISPER — FIX: список товаров всегда видимый
   ========================================================== */

.products-container,
.product-cards {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  contain: none !important;
  content-visibility: visible !important;
}

.product-cards {
  display: grid !important;
}

.product-card {
  opacity: 1 !important;
  visibility: visible !important;
  contain: none !important;
  content-visibility: visible !important;
}

.product-card[hidden] {
  display: none;
}

/* ==========================================================
   THE WHISPER — FIX: кнопка "вверх" и выпадающий выбор языка
   ========================================================== */

:root {
  --tw-floating-ui-z: 2147483646;
  --tw-dropdown-z: 2147483647;
}

/* ---------- Кнопка вверх ---------- */

.scroll-top-btn {
  z-index: var(--tw-floating-ui-z) !important;
  width: 56px !important;
  height: 56px !important;
  right: 24px !important;
  bottom: 24px !important;

  opacity: 1 !important;
  visibility: visible !important;

  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(44, 37, 25, 0.96), rgba(8, 10, 12, 0.96)) !important;
  border: 1px solid rgba(242, 210, 138, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(255, 130, 40, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.55) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

.scroll-top-btn:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 177, 72, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 28px rgba(255, 130, 40, 0.38),
    0 16px 34px rgba(0, 0, 0, 0.65) !important;
}

/* Если внутри кнопки svg */
.scroll-top-btn svg,
.scroll-top-btn path {
  color: #f2d28a !important;
  fill: #f2d28a !important;
  stroke: #f2d28a !important;
  opacity: 1 !important;
}

/* Если внутри кнопки img */
.scroll-top-btn img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(83%)
    sepia(44%)
    saturate(448%)
    hue-rotate(358deg)
    brightness(101%)
    contrast(92%)
    drop-shadow(0 0 8px rgba(242, 150, 55, 0.5)) !important;
  opacity: 1 !important;
}

/* ---------- Выпадающий выбор языка ---------- */

.language-switcher {
  position: relative !important;
  z-index: var(--tw-dropdown-z) !important;
  overflow: visible !important;
}

.navbar,
.navbar-links,
.auth-btns,
.auth,
.mobile-buttons {
  overflow: visible !important;
}

/* сам dropdown языка */
.language-switcher .dropdown,
.dropdown {
  z-index: var(--tw-dropdown-z) !important;

  min-width: 86px !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;

  padding: 6px !important;
  border-radius: 12px !important;

  background:
    linear-gradient(180deg, rgba(16, 20, 22, 0.98), rgba(5, 7, 9, 0.98)) !important;
  border: 1px solid rgba(242, 210, 138, 0.32) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.72),
    0 0 22px rgba(255, 130, 40, 0.18) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  overflow: visible !important;
}

.language-switcher .dropdown li,
.dropdown li {
  color: #e7e1d4 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  background: transparent !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.language-switcher .dropdown li:hover,
.dropdown li:hover,
.language-switcher .dropdown li.active,
.dropdown li.active {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(174, 104, 35, 0.95), rgba(74, 42, 18, 0.95)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 177, 72, 0.45) !important;
}

.language-switcher .flag,
.dropdown .flag {
  opacity: 1 !important;
  filter: none !important;
}
/* ==========================================================
   THE WHISPER — FIX: language dropdown без переноса в body
   ========================================================== */

/* Шапка должна быть выше баннера, категорий и карточек */
.navbar {
  position: relative !important;
  z-index: 1000000 !important;
  overflow: visible !important;
}

.navbar-links,
.auth-btns,
.auth,
.mobile-buttons,
.language-switcher {
  position: relative !important;
  overflow: visible !important;
}

/* Баннер и контент ниже шапки по слоям */
.banner,
.grid-wrapper,
.products-container,
.products-types-buttons,
.product-cards,
.product-card {
  z-index: auto !important;
}

/* Выпадающее меню языка остается около кнопки */
.language-switcher {
  z-index: 1000002 !important;
}

.language-switcher .dropdown,
.dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1000003 !important;

  min-width: 92px !important;
  padding: 6px !important;
  border-radius: 12px !important;

  background:
    linear-gradient(180deg, rgba(16, 20, 22, 0.98), rgba(5, 7, 9, 0.98)) !important;
  border: 1px solid rgba(242, 210, 138, 0.42) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.78),
    0 0 24px rgba(255, 130, 40, 0.22) !important;

  overflow: visible !important;
}

.language-switcher .dropdown li,
.dropdown li {
  color: #e7e1d4 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  background: transparent !important;
}

.language-switcher .dropdown li:hover,
.dropdown li:hover,
.language-switcher .dropdown li.active,
.dropdown li.active {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(174, 104, 35, 0.95), rgba(74, 42, 18, 0.95)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 177, 72, 0.45) !important;
}
/* ==========================================================
   THE WHISPER — FIX: видимая стрелка вверх
   ========================================================== */

.scroll-top-btn {
  position: fixed !important;
  z-index: 999999 !important;

  width: 58px !important;
  height: 58px !important;
  right: 24px !important;
  bottom: 24px !important;

  opacity: 1 !important;
  visibility: visible !important;

  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 175, 72, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(45, 35, 20, 0.98), rgba(5, 7, 9, 0.98)) !important;
  border: 1px solid rgba(255, 190, 92, 0.7) !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 28px rgba(255, 130, 40, 0.36),
    0 14px 34px rgba(0, 0, 0, 0.72) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #fff2c2 !important;
}

/* Рисуем свою стрелку поверх, чтобы она точно не сливалась */
.scroll-top-btn::before {
  content: "↑" !important;
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #fff2c2 !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-shadow:
    0 0 8px rgba(255, 180, 70, 0.95),
    0 2px 2px rgba(0, 0, 0, 0.9) !important;

  pointer-events: none !important;
  z-index: 2 !important;
}

/* Если внутри есть старый svg/img — приглушаем, чтобы не мешал */
.scroll-top-btn svg,
.scroll-top-btn img {
  opacity: 0.18 !important;
  filter: brightness(0.55) !important;
}

.scroll-top-btn:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 210, 120, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 34px rgba(255, 145, 42, 0.52),
    0 18px 38px rgba(0, 0, 0, 0.78) !important;
}
/* ==========================================================
   THE WHISPER — FIX V2: language dropdown поверх баннера
   ========================================================== */

:root {
  --tw-language-dropdown-z: 2147483647;
}

.navbar,
.navbar-links,
.auth-btns,
.auth,
.mobile-buttons,
.language-switcher {
  overflow: visible !important;
}

.language-switcher {
  position: relative !important;
  z-index: var(--tw-language-dropdown-z) !important;
}

/* Dropdown может быть внутри шапки или уже перенесен в body */
.language-switcher .dropdown,
body > .dropdown[data-tw-language-dropdown="1"] {
  z-index: var(--tw-language-dropdown-z) !important;

  min-width: 96px !important;
  padding: 6px !important;
  border-radius: 12px !important;

  background:
    linear-gradient(180deg, rgba(16, 20, 22, 0.99), rgba(5, 7, 9, 0.99)) !important;
  border: 1px solid rgba(242, 210, 138, 0.48) !important;
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.82),
    0 0 26px rgba(255, 130, 40, 0.24) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  overflow: visible !important;
}

.language-switcher .dropdown li,
body > .dropdown[data-tw-language-dropdown="1"] li {
  color: #e7e1d4 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  background: transparent !important;
  cursor: pointer !important;
}

.language-switcher .dropdown li:hover,
.language-switcher .dropdown li.active,
body > .dropdown[data-tw-language-dropdown="1"] li:hover,
body > .dropdown[data-tw-language-dropdown="1"] li.active {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(174, 104, 35, 0.95), rgba(74, 42, 18, 0.95)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 177, 72, 0.45) !important;
}
.product-modal .select-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

.product-modal .select-display {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.product-modal .select-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
}

.product-modal .select-arrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Контейнер выбора сервера */
.product-modal .select-container {
    width: 100%;
    margin-bottom: 12px;
}

/* Сам селект */
.product-modal .select-display {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 48px;

    padding: 12px 16px;

    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;

    cursor: pointer;

    transition: all .2s ease;
    box-sizing: border-box;
}

/* Эффект наведения */
.product-modal .select-display:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

/* Текст */
.product-modal .select-text {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* Стрелка */
.product-modal .select-arrow {
    width: 12px;
    height: 12px;
    fill: #ffffff;
    opacity: 0.7;
    transition: transform .2s ease;
}

/* Выпадающий список */
.product-modal .select-options,
.product-modal .select-dropdown {
    background: #181818 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-top: 6px;
    z-index: 99999 !important;
}

/* Пункты списка */
.product-modal .select-option,
.product-modal .select-item {
    padding: 12px 16px;
    color: #fff;
    transition: background .2s ease;
}

/* Наведение на пункт */
.product-modal .select-option:hover,
.product-modal .select-item:hover {
    background: rgba(255,255,255,0.08);
}

/* ===== SERVER SWITCHER ===== */

.tw-server-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

/* Кнопка в стиле auth-btn */
.tw-server-switcher-label {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px;

    border-radius: 12px;

    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);

    color: inherit;
    font: inherit;

    cursor: pointer;

    transition: all .2s ease;
}

.tw-server-switcher-label:hover {
    border-color: #ffd54a;
    color: #ffd54a;
}

/* Стрелка */
.tw-server-switcher-label::after {
    content: "▾";
    font-size: 12px;
    opacity: .7;
}

.tw-server-overlay {
    position: fixed;
    inset: 0;

    backdrop-filter: blur(12px);

    background: rgba(0,0,0,.75);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 999999;
}

.tw-server-modal {
    width: 420px;

    background: #111;

    border-radius: 20px;

    padding: 32px;

    text-align: center;
}

.tw-server-modal h2 {
    margin-bottom: 24px;
    color: white;
}

.tw-server-modal-btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 14px;

    border: none;
    border-radius: 12px;

    background: rgba(255,255,255,.08);
    color: white;

    cursor: pointer;
}

.tw-server-modal-btn:hover {
    background: rgba(255,255,255,.15);
}
.servers-buttons {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.navbar,
.navbar-links,
.auth-btns {
    overflow: visible !important;
}

.navbar,
.navbar-links,
.auth-btns,
.tw-server-switcher {
    overflow: visible !important;
    z-index: 999999 !important;
}

.navbar {
    position: relative !important;
    z-index: 10000 !important;
}

.navbar-links {
    position: relative !important;
    z-index: 10000 !important;
}

.auth-btns {
    position: relative !important;
    z-index: 10000 !important;
}

.tw-server-dropdown {
    display: none !important;
}