/* =========================================================
   STEP 1 — HEADER LOGO
   Увеличиваем логотип бренда в верхней шапке
   ========================================================= */

header.wrapper .navbar__mobile {
  width: 240px !important;
  min-width: 240px !important;
  overflow: visible !important;
}

header.wrapper .navbar__brand {
  width: 220px !important;
  min-width: 220px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 18px !important;
  overflow: visible !important;
}

header.wrapper .navbar__brand-logo {
  width: 190px !important;
  height: auto !important;
  max-width: none !important;
  max-height: 50px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 6px rgba(67, 210, 230, 0.28)) !important;
}
/* =========================================================
   STEP 2 — HEADER PANEL
   Оформляем верхнюю шапку под новый тёмный тактический стиль
   ========================================================= */

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

header.wrapper .navbar {
  background: rgba(18, 20, 22, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.035) !important;
  border-bottom: 1px solid rgba(70, 205, 225, 0.12) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    inset 0 -1px 0 rgba(70, 205, 225, 0.035) !important;
  backdrop-filter: blur(8px) !important;
}

header.wrapper .navbar__btn,
header.wrapper .lang-label {
  color: rgba(245, 248, 250, 0.92) !important;
  text-shadow: 0 0 7px rgba(70, 205, 225, 0.08) !important;
}

header.wrapper .navbar__btn:hover,
header.wrapper .lang-label:hover {
  color: #ffffff !important;
  background: rgba(70, 205, 225, 0.06) !important;
}
/* =========================================================
   STEP 3 — CATALOG NAVIGATION
   Делаем категории компактной навигационной панелью
   ========================================================= */

main.wrapper .products-types-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 8px !important;
}

/* Общий стиль кнопок категорий */
main.wrapper .products-types-buttons .app-button.app-button--primary {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  background:
    linear-gradient(180deg, rgba(34, 36, 38, 0.94), rgba(24, 25, 27, 0.94)) !important;
  color: rgba(245, 248, 250, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  white-space: nowrap !important;
}

/* Кнопка "Все" пока делаем компактнее, потом можем заменить на три полоски */
main.wrapper .products-types-buttons .app-button.app-button--primary:first-child {
  flex: 0 0 58px !important;
  width: 58px !important;
  padding: 0 !important;
}

/* Hover */
main.wrapper .products-types-buttons .app-button.app-button--primary:hover {
  background:
    linear-gradient(180deg, rgba(42, 48, 50, 0.96), rgba(25, 28, 30, 0.96)) !important;
  border-color: rgba(70, 205, 225, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(70, 205, 225, 0.08) !important;
}

/* Активная категория */
main.wrapper .products-types-buttons .app-button.app-button--primary.app-button--active {
  background:
    linear-gradient(180deg, rgba(48, 62, 64, 0.98), rgba(18, 24, 26, 0.98)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(70, 205, 225, 0.42) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(70, 205, 225, 0.16),
    inset 0 -2px 0 rgba(70, 205, 225, 0.42) !important;
}
/* =========================================================
   STEP 3.1 — CATALOG ALIGNMENT
   Чуть сдвигаем каталог вправо, чтобы кнопка "Все" не липла к краю
   ========================================================= */

main.wrapper .left-column {
  padding-left: 12px !important;
}
/* =========================================================
   STEP 3.2 — MENU ICON FOR ALL
   Рисуем три полоски внутри кнопки "Все"
   ========================================================= */

main.wrapper .products-types-buttons .app-button:first-child {
  flex: 0 0 58px !important;
  width: 58px !important;
  padding: 0 !important;
}

.evg-menu-icon {
  width: 20px !important;
  height: 14px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.evg-menu-icon::before,
.evg-menu-icon::after,
.evg-menu-icon {
  background: none !important;
}

.evg-menu-icon::before,
.evg-menu-icon::after {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(245, 248, 250, 0.94) !important;
  box-shadow: 0 0 8px rgba(70, 205, 225, 0.18) !important;
}

.evg-menu-icon {
  border-top: 2px solid rgba(245, 248, 250, 0.94) !important;
  border-bottom: 2px solid rgba(245, 248, 250, 0.94) !important;
  box-shadow: 0 0 8px rgba(70, 205, 225, 0.14) !important;
}
/* =========================================================
   STEP 3.3 — CATEGORY TYPOGRAPHY
   Полируем текст кнопок категорий
   ========================================================= */

main.wrapper .products-types-buttons .app-button.app-button--primary {
  color: rgba(228, 236, 240, 0.92) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
}

main.wrapper .products-types-buttons .app-button.app-button--primary:hover {
  color: #ffffff !important;
  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(70, 205, 225, 0.14) !important;
}

main.wrapper .products-types-buttons .app-button.app-button--primary.app-button--active {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow:
    0 1px 9px rgba(0, 0, 0, 0.62),
    0 0 12px rgba(70, 205, 225, 0.20) !important;
}
/* =========================================================
   STEP 3.4 — MENU BUTTON POLISH
   Выравниваем кнопку меню с остальными категориями
   ========================================================= */

main.wrapper .products-types-buttons .app-button:first-child {
  height: 40px !important;
  min-height: 40px !important;
  flex: 0 0 50px !important;
  width: 50px !important;
  border-radius: 8px !important;
}

.evg-menu-icon {
  width: 18px !important;
  height: 13px !important;
  opacity: 0.92 !important;
}

.evg-menu-icon::before,
.evg-menu-icon::after {
  width: 18px !important;
  height: 2px !important;
}

.evg-menu-icon {
  border-top-width: 2px !important;
  border-bottom-width: 2px !important;
}
/* =========================================================
   STEP 4 — COOKIE NOTICE
   Аккуратное окно Cookies в стиле сайта
   ========================================================= */

.cookie-banner {
  position: fixed !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 9999 !important;

  width: 360px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  background: rgba(18, 20, 22, 0.94) !important;
  color: rgba(245, 248, 250, 0.94) !important;
  border: 1px solid rgba(70, 205, 225, 0.18) !important;
  border-radius: 10px !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px) !important;
}

.cookie-content,
.cookie-buttons {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.cookie-content h5 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
}

.cookie-content p {
  margin: 0 !important;
  color: rgba(220, 226, 230, 0.72) !important;
  line-height: 1.45 !important;
}

.cookie-buttons button,
.cookie-buttons .app-button {
  width: 100% !important;
  height: 44px !important;
  background:
    linear-gradient(180deg, rgba(62, 76, 78, 0.98), rgba(18, 24, 26, 0.98)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(70, 205, 225, 0.34) !important;
  border-radius: 8px !important;
}
/* =========================================================
   STEP 5 — SEARCH INPUT
   Оформляем строку поиска под общий тактический стиль
   ========================================================= */

main.wrapper input[type="text"],
main.wrapper input[type="search"],
main.wrapper input[placeholder*="Поиск"] {
  height: 44px !important;
  background: rgba(18, 20, 22, 0.88) !important;
  color: rgba(245, 248, 250, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(6px) !important;
}

main.wrapper input[type="text"]::placeholder,
main.wrapper input[type="search"]::placeholder,
main.wrapper input[placeholder*="Поиск"]::placeholder {
  color: rgba(190, 208, 216, 0.78) !important;
}

main.wrapper input[type="text"]:focus,
main.wrapper input[type="search"]:focus,
main.wrapper input[placeholder*="Поиск"]:focus {
  outline: none !important;
  border-color: rgba(70, 205, 225, 0.42) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(70, 205, 225, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}
/* =========================================================
   STEP 6 — SERVER MONITORING
   Оформляем блок мониторинга сервера под стиль сайта
   ========================================================= */

main.wrapper .right-column .monitoring {
  height: 58px !important;
  padding: 8px 14px !important;
  background:
    linear-gradient(180deg, rgba(28, 31, 33, 0.94), rgba(16, 18, 20, 0.94)) !important;
  border: 1px solid rgba(70, 205, 225, 0.22) !important;
  border-radius: 10px !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(70, 205, 225, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
}

main.wrapper .right-column .monitoring-header {
  height: 18px !important;
  margin-bottom: 5px !important;
  align-items: center !important;
}

main.wrapper .right-column .monitoring-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

main.wrapper .right-column .monitoring-title-span {
  color: rgba(190, 208, 216, 0.58) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}

main.wrapper .right-column .monitoring-progress,
main.wrapper .right-column .monitoring-progress-bar {
  height: 20px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

main.wrapper .right-column .monitoring-progress-bar {
  background:
    linear-gradient(90deg, rgba(70, 205, 225, 0.34), rgba(70, 205, 225, 0.12)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 8px,
      rgba(255, 255, 255, 0.04) 8px,
      rgba(255, 255, 255, 0.04) 16px
    ),
    rgba(8, 10, 12, 0.86) !important;
  border: 1px solid rgba(70, 205, 225, 0.16) !important;
}

main.wrapper .right-column .monitoring-status-overlay {
  height: 20px !important;
  align-items: center !important;
}

main.wrapper .right-column .monitoring-status-text {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.65) !important;
}
/* =========================================================
   STEP 7 — PRODUCT CARD BASE
   Делаем базовый стиль карточек товара: тёмный модуль, рамка, подсветка
   ========================================================= */

main.wrapper .product-card {
  background:
    linear-gradient(180deg, rgba(20, 22, 24, 0.96), rgba(9, 10, 12, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

main.wrapper .product-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(70, 205, 225, 0.32) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.46),
    0 0 22px rgba(70, 205, 225, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

main.wrapper .product-card-image-container {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(6, 7, 8, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
}
/* =========================================================
   STEP 7.1 — CARD BADGE
   Оформляем бейдж срока на карточке товара
   ========================================================= */

main.wrapper .product-card [class*="badge"],
main.wrapper .product-card [class*="label"],
main.wrapper .product-card [class*="period"],
main.wrapper .product-card [class*="duration"] {
  background:
    linear-gradient(180deg, rgba(28, 34, 36, 0.96), rgba(12, 15, 17, 0.98)) !important;
  color: rgba(214, 226, 222, 0.96) !important;
  border: 1px solid rgba(70, 205, 225, 0.34) !important;
  border-radius: 6px !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.36),
    0 0 10px rgba(70, 205, 225, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
/* =========================================================
   STEP 7.2 — CARD FOOTER
   Разделяем название и цену в нижней части карточки
   ========================================================= */

main.wrapper .product-card-footer {
  height: 78px !important;
  padding: 10px 10px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background:
    linear-gradient(180deg, rgba(14, 16, 18, 0.96), rgba(7, 8, 10, 0.98)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
}

main.wrapper .product-card-name {
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  color: rgba(218, 232, 232, 0.96) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  text-align: center !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

main.wrapper .product-card-price {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  text-align: center !important;

  color: rgba(216, 229, 226, 0.98) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  background:
    linear-gradient(180deg, rgba(38, 48, 50, 0.98), rgba(13, 17, 18, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.24) !important;
  border-radius: 6px !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 10px rgba(70, 205, 225, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}
/* =========================================================
   STEP 7.3 — CARD TITLE
   Центрируем название товара и делаем цвет мягче
   ========================================================= */

main.wrapper .product-card-name {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;

  color: rgba(218, 232, 232, 0.96) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;

  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.78),
    0 0 7px rgba(70, 205, 225, 0.10) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* =========================================================
   STEP 7.4 — PRODUCT CARD GLOW
   Добавляем мягкую подсветку вокруг всей карточки товара
   ========================================================= */

main.wrapper .product-card {
  position: relative !important;
  border-color: rgba(70, 205, 225, 0.14) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(70, 205, 225, 0.035),
    0 0 18px rgba(70, 205, 225, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

main.wrapper .product-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(70, 205, 225, 0.08),
    inset 0 0 22px rgba(70, 205, 225, 0.035) !important;
  opacity: 0.85 !important;
}

main.wrapper .product-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(70, 205, 225, 0.34) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(70, 205, 225, 0.12),
    0 0 26px rgba(70, 205, 225, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

main.wrapper .product-card:hover::after {
  box-shadow:
    inset 0 0 0 1px rgba(70, 205, 225, 0.18),
    inset 0 0 28px rgba(70, 205, 225, 0.07) !important;
  opacity: 1 !important;
}
/* =========================================================
   STEP 8 — PRODUCT MODAL BASE
   Оформляем базу модального окна товара
   ========================================================= */

.modal-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(70, 205, 225, 0.08), transparent 34%),
    rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(5px) !important;
}

.modal {
  background:
    linear-gradient(180deg, rgba(28, 31, 33, 0.98), rgba(13, 15, 17, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.20) !important;
  border-radius: 14px !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    0 0 34px rgba(70, 205, 225, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  overflow: hidden !important;
}

.product-modal {
  gap: 14px !important;
}

.product-modal-title {
  color: rgba(238, 243, 242, 0.98) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.78),
    0 0 12px rgba(70, 205, 225, 0.12) !important;
}

.product-modal-gallery {
  border-radius: 10px !important;
  border: 1px solid rgba(70, 205, 225, 0.12) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(70, 205, 225, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  overflow: hidden !important;
}

.gallery-main-image {
  border-radius: 10px !important;
}
/* =========================================================
   STEP 8 — PRODUCT MODAL BASE
   Делаем модальное окно широким: картинка слева, описание справа
   ========================================================= */

.modal-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(70, 205, 225, 0.08), transparent 34%),
    rgba(0, 0, 0, 0.70) !important;
  backdrop-filter: blur(6px) !important;
}

.modal {
  width: min(980px, calc(100vw - 36px)) !important;
  max-width: 980px !important;
  max-height: calc(100vh - 44px) !important;
  overflow: auto !important;

  background:
    linear-gradient(180deg, rgba(28, 31, 33, 0.98), rgba(13, 15, 17, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.20) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    0 0 34px rgba(70, 205, 225, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.modal-content {
  padding: 30px !important;
}

.product-modal {
  display: grid !important;
  grid-template-columns: 360px minmax(420px, 1fr) !important;
  grid-template-areas:
    "gallery title"
    "gallery description"
    "gallery inputs"
    "gallery actions" !important;
  column-gap: 34px !important;
  row-gap: 16px !important;
  align-items: start !important;
}

.product-modal-title {
  grid-area: title !important;
  margin: 0 !important;

  color: rgba(238, 243, 242, 0.98) !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.78),
    0 0 12px rgba(70, 205, 225, 0.12) !important;
}

.product-modal-gallery {
  grid-area: gallery !important;
  width: 360px !important;
  max-width: 360px !important;
  aspect-ratio: 1 / 1 !important;

  border-radius: 12px !important;
  border: 1px solid rgba(70, 205, 225, 0.16) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.40),
    0 0 22px rgba(70, 205, 225, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  overflow: hidden !important;
}

.gallery-main-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.product-modal-description {
  grid-area: description !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.product-modal-inputs {
  grid-area: inputs !important;
  width: 100% !important;
}

.modal-footer-buttons {
  grid-area: actions !important;
  width: 100% !important;
}

@media (max-width: 860px) {
  .modal {
    width: min(440px, calc(100vw - 24px)) !important;
  }

  .modal-content {
    padding: 22px !important;
  }

  .product-modal {
    display: flex !important;
    flex-direction: column !important;
  }

  .product-modal-title {
    text-align: center !important;
    font-size: 21px !important;
  }

  .product-modal-gallery {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   STEP 8.1 — MODAL ACTIONS
   Выравниваем кнопки и нижнюю часть широкой модалки
   ========================================================= */

.modal-footer-buttons {
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0 28px 28px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;

  position: static !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

.modal-close-button {
  width: auto !important;
  min-width: 96px !important;
  height: 44px !important;
  padding: 0 18px !important;

  color: rgba(218, 232, 232, 0.88) !important;
  background: rgba(18, 20, 22, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 10px !important;
}

.modal-primary-button {
  width: auto !important;
  min-width: 170px !important;
  height: 44px !important;
  padding: 0 24px !important;

  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(48, 62, 64, 0.98), rgba(18, 24, 26, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.36) !important;
  border-radius: 10px !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(70, 205, 225, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.modal-primary-button-text,
.modal-close-button-text {
  color: inherit !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* =========================================================
   STEP 8.2 — MODAL INFO PANEL
   Делаем описание шире и читабельнее, без тесной внутренней коробки
   ========================================================= */

.product-modal-description {
  width: 100% !important;
  max-width: none !important;
  padding: 0 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.product-modal-description,
.product-modal-description li,
.product-modal-description p {
  color: rgba(207, 217, 218, 0.88) !important;
  font-size: 15px !important;
  line-height: 1.52 !important;
  text-align: left !important;
}

.product-modal-description ul {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.product-modal-description li + li {
  margin-top: 8px !important;
}

.product-modal-inputs {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.product-modal-inputs .select-display,
.product-modal-inputs .amount-control-total {
  width: 100% !important;
  height: 42px !important;
  background:
    linear-gradient(180deg, rgba(15, 18, 20, 0.96), rgba(7, 9, 11, 0.98)) !important;
  color: rgba(238, 243, 242, 0.96) !important;
  border: 1px solid rgba(70, 205, 225, 0.18) !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.product-modal-inputs .select-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.product-modal-inputs .select-arrow {
  color: rgba(218, 232, 232, 0.88) !important;
}

.product-modal-inputs .amount-control-total {
  justify-content: flex-start !important;
  padding: 0 16px !important;
}

.product-modal-inputs .amount-control-total-rub,
.product-modal-inputs .amount-control-total p {
  color: rgba(218, 232, 232, 0.96) !important;
  font-weight: 800 !important;
}
/* =========================================================
   STEP 8.3 — MODAL TITLE & FORM BALANCE
   Полируем главное название и собираем правую колонку компактнее
   ========================================================= */

.product-modal-title {
  color: rgba(232, 244, 242, 0.98) !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 12px rgba(0, 0, 0, 0.82),
    0 0 14px rgba(70, 205, 225, 0.16) !important;
}

.product-modal-title::after {
  content: "" !important;
  display: block !important;
  width: 72px !important;
  height: 2px !important;
  margin-top: 10px !important;
  background:
    linear-gradient(90deg, rgba(70, 205, 225, 0), rgba(70, 205, 225, 0.72), rgba(70, 205, 225, 0)) !important;
}

.product-modal-description {
  margin-top: 2px !important;
}

.product-modal-inputs {
  margin-top: 12px !important;
}

.modal-footer-buttons {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 28px !important;
}
/* =========================================================
   STEP 8.4 — MODAL PRICE ALIGNMENT
   Выравниваем цену по центру внутри поля стоимости
   ========================================================= */

.product-modal-inputs .amount-control-total {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 42px !important;
  padding: 0 16px !important;
}

.product-modal-inputs .amount-control-total-rub,
.product-modal-inputs .amount-control-total p,
.product-modal-inputs .amount-control-total span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* =========================================================
   STEP 8.5 — MODAL INNER BACKGROUND
   Добавляем глубину внутри развернутой карточки товара
   ========================================================= */

.modal {
  position: relative !important;
}

.modal::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 28% 42%, rgba(70, 205, 225, 0.055), transparent 34%),
    radial-gradient(circle at 76% 26%, rgba(70, 205, 225, 0.045), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 38%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.20)) !important;
  opacity: 1 !important;
}

.modal-content,
.modal-footer-buttons {
  position: relative !important;
  z-index: 1 !important;
}
/* =========================================================
   STEP 8.6 — MODAL DROPDOWN
   Делаем выпадающий список выше кнопок модального окна
   ========================================================= */

.modal-content {
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}

.modal-footer-buttons {
  position: relative !important;
  z-index: 5 !important;
}

.select-container {
  position: relative !important;
  z-index: 80 !important;
}

.select-options {
  position: fixed !important;
  z-index: 999999 !important;
  max-height: 160px !important;

  background:
    linear-gradient(180deg, rgba(15, 18, 20, 0.98), rgba(7, 9, 11, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.26) !important;
  border-radius: 8px !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(70, 205, 225, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(70, 205, 225, 0.55) rgba(8, 10, 12, 0.88) !important;
}

.select-option {
  min-height: 42px !important;
  padding: 11px 14px !important;
  color: rgba(222, 234, 234, 0.92) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
  font-weight: 650 !important;
}

.select-option:hover {
  color: #ffffff !important;
  background: rgba(70, 205, 225, 0.10) !important;
}

.select-option.active {
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(70, 205, 225, 0.22), rgba(70, 205, 225, 0.06)) !important;
  box-shadow:
    inset 3px 0 0 rgba(70, 205, 225, 0.72) !important;
}
/* =========================================================
   STEP 9 — RIGHT SIDEBAR INFO BLOCKS
   Оформляем правые инфо-блоки под мониторингом
   ========================================================= */

.evg-sidebar-blocks {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.evg-sidebar-card {
  position: relative !important;
  min-height: 96px !important;
  padding: 15px 16px 15px 58px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;

  text-decoration: none !important;
  color: rgba(232, 244, 242, 0.96) !important;

  background:
    radial-gradient(circle at 88% 18%, rgba(70, 205, 225, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 36%),
    linear-gradient(180deg, rgba(28, 31, 33, 0.96), rgba(10, 13, 15, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.20) !important;
  border-radius: 12px !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(70, 205, 225, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  overflow: hidden !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.evg-sidebar-card::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  transform: translateY(-50%) !important;

  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 8%, rgba(70, 205, 225, 0.75) 9% 28%, rgba(10, 14, 16, 0.96) 30% 100%) !important;
  border: 1px solid rgba(70, 205, 225, 0.48) !important;
  box-shadow:
    0 0 18px rgba(70, 205, 225, 0.32),
    inset 0 0 10px rgba(70, 205, 225, 0.22) !important;
}

.evg-sidebar-card::after {
  content: "›" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  color: rgba(70, 205, 225, 0.62) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.evg-sidebar-kicker {
  color: rgba(70, 205, 225, 0.88) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.evg-sidebar-card strong {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.72),
    0 0 10px rgba(70, 205, 225, 0.08) !important;
}

.evg-sidebar-card em {
  max-width: 190px !important;
  color: rgba(205, 218, 220, 0.78) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1.32 !important;
}

.evg-sidebar-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(70, 205, 225, 0.40) !important;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.44),
    0 0 30px rgba(70, 205, 225, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.evg-sidebar-card--discord::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 8%, rgba(106, 132, 255, 0.78) 9% 28%, rgba(10, 14, 16, 0.96) 30% 100%) !important;
  border-color: rgba(106, 132, 255, 0.58) !important;
  box-shadow:
    0 0 18px rgba(106, 132, 255, 0.34),
    inset 0 0 10px rgba(106, 132, 255, 0.22) !important;
}

.evg-sidebar-card--info::after {
  content: "I" !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 7px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  background:
    linear-gradient(180deg, rgba(48, 62, 64, 0.98), rgba(18, 24, 26, 0.98)) !important;
  border: 1px solid rgba(70, 205, 225, 0.36) !important;
  box-shadow:
    0 0 14px rgba(70, 205, 225, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}
.evg-sidebar-card--youtube::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 8%, rgba(255, 58, 58, 0.78) 9% 28%, rgba(10, 14, 16, 0.96) 30% 100%) !important;
  border-color: rgba(255, 58, 58, 0.58) !important;
  box-shadow:
    0 0 18px rgba(255, 58, 58, 0.30),
    inset 0 0 10px rgba(255, 58, 58, 0.18) !important;
}
/* ==========================================================
   STEP 10 — MOBILE FOUNDATION
   Базовая адаптация магазина для телефонов
   Компьютерная версия не изменяется
   ========================================================== */

@media (max-width: 767px) {

  /* Запрещаем горизонтальный выход страницы за экран */
  html,
  body,
  .app-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  /* Общие отступы мобильной версии */
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 10px !important;
  }

  main.wrapper .left-column {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
  }


  /* ========================================================
     STEP 10.1 — MOBILE HEADER
     Компактная верхняя панель
     ======================================================== */

  header.wrapper {
    padding: 0 8px !important;
  }

  header.wrapper .navbar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  header.wrapper .navbar__mobile {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  header.wrapper .navbar__brand {
    width: auto !important;
    min-width: 0 !important;
    height: 54px !important;
    padding-left: 4px !important;
    flex: 1 1 auto !important;
  }

  header.wrapper .navbar__brand-logo {
    width: 155px !important;
    max-width: 100% !important;
    max-height: 38px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  header.wrapper .navbar__mobile-buttons {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  header.wrapper .navbar__toggler {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  header.wrapper .navbar__toggler-icon {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* ========================================================
     STEP 10.2 — MOBILE CATEGORIES
     Категории прокручиваются пальцем
     ======================================================== */

  main.wrapper .products-container {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  main.wrapper .products-types-buttons {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 2px 1px 7px !important;
    margin: 0 0 7px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main.wrapper .products-types-buttons::-webkit-scrollbar {
    display: none !important;
  }

  main.wrapper
  .products-types-buttons
  .app-button.app-button--primary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  main.wrapper .products-types-buttons .app-button:first-child {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
  }


  /* ========================================================
     STEP 10.3 — MOBILE SEARCH
     Удобное поле поиска
     ======================================================== */

  main.wrapper input[type="text"],
  main.wrapper input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
  }


  /* ========================================================
     STEP 10.4 — MOBILE PRODUCT CARDS
     Две компактные карточки в ряд
     ======================================================== */

  main.wrapper .product-cards {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  main.wrapper .product-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 10px !important;
  }

  main.wrapper .product-card-image-container {
    width: 100% !important;
    height: 72% !important;
    min-height: 0 !important;
  }

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

  main.wrapper .product-card-footer {
    width: 100% !important;
    min-height: 28% !important;
    max-height: none !important;
    padding: 7px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  main.wrapper .product-card-name {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  main.wrapper .product-card-price {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  main.wrapper .product-card-badge-days,
  main.wrapper .product-card-badge-percentage,
  main.wrapper .product-card-label {
    font-size: 11px !important;
  }
}


/* На самых узких телефонах немного уменьшаем логотип */

@media (max-width: 359px) {
  header.wrapper .navbar__brand-logo {
    width: 132px !important;
  }

  main.wrapper .product-cards {
    gap: 6px !important;
  }
}
/* ==========================================================
   STEP 10.5 — MOBILE MENU FIX
   Возвращаем мобильное меню и кнопку авторизации
   ========================================================== */

@media (max-width: 767px) {

  /* Разрешаем меню раскрываться за пределы шапки */
  header.wrapper .navbar {
    overflow: visible !important;
  }

  header.wrapper .navbar__mobile {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  header.wrapper .navbar__mobile-buttons {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Кнопка мобильного меню */
  header.wrapper .navbar__toggler {
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;

    color: rgba(245, 248, 250, 0.96) !important;
    background:
      linear-gradient(
        180deg,
        rgba(35, 40, 42, 0.96),
        rgba(19, 23, 25, 0.98)
      ) !important;
    border: 1px solid rgba(70, 205, 225, 0.28) !important;
    border-radius: 9px !important;
    box-shadow:
      0 0 16px rgba(70, 205, 225, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  header.wrapper .navbar__toggler-icon {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Рисуем понятный значок меню */
  header.wrapper .navbar__toggler-icon::before {
    content: "☰" !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  /* Раскрывающаяся часть шапки */
  header.wrapper .navbar__links {
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    border-radius: 0 0 10px 10px !important;
  }

  header.wrapper .navbar__nav,
  header.wrapper .navbar__buttons {
    width: 100% !important;
    gap: 5px !important;
  }

  /* Авторизация, профиль, баланс и остальные пункты */
  header.wrapper .navbar__btn,
  header.wrapper .nav-link {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: rgba(245, 248, 250, 0.96) !important;
    background: rgba(20, 22, 24, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.045) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }

  header.wrapper .navbar__btn--auth {
    color: #ffffff !important;
    border-color: rgba(70, 205, 225, 0.34) !important;
    background:
      linear-gradient(
        180deg,
        rgba(43, 58, 61, 0.98),
        rgba(18, 26, 28, 0.98)
      ) !important;
  }
}
/* ==========================================================
   STEP 11 — MOBILE PROFILE
   Личный кабинет, навигация, формы и таблицы
   ========================================================== */

@media (max-width: 767px) {

  /* Заголовки страниц личного кабинета */
  main.wrapper h1,
  main.wrapper h2,
  main.wrapper h3 {
    max-width: 100% !important;
    margin: 12px 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }


  /* ========================================================
     STEP 11.1 — PROFILE INFORMATION
     Информация пользователя
     ======================================================== */

  .profile-info {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .profile-info__table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .profile-info__row {
    width: 100% !important;
    min-height: 48px !important;
    margin-bottom: 3px !important;
    display: grid !important;
    grid-template-columns: minmax(110px, 42%) minmax(0, 58%) !important;
    align-items: center !important;
  }

  .profile-info__cell {
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 9px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .profile-info__cell--header {
    font-weight: 700 !important;
  }

  .profile-info__cell a {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }


  /* ========================================================
     STEP 11.2 — PROFILE NAVIGATION
     Компактная лента разделов вместо длинного столбца
     ======================================================== */

  .profile-sidebar__header {
    width: 100% !important;
    min-height: 44px !important;
    margin: 10px 0 5px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  .profile-sidebar__list {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 2px 1px 7px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .profile-sidebar__list::-webkit-scrollbar {
    display: none !important;
  }

  .profile-sidebar__item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    border-radius: 9px !important;
  }

  .profile-sidebar__link {
    width: auto !important;
    min-width: max-content !important;
    min-height: 44px !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 9px !important;
  }

  .profile-sidebar__link--active {
    color: #ffffff !important;
    background:
      linear-gradient(
        180deg,
        rgba(47, 62, 65, 0.98),
        rgba(18, 26, 28, 0.98)
      ) !important;
    border: 1px solid rgba(70, 205, 225, 0.38) !important;
    box-shadow:
      0 0 16px rgba(70, 205, 225, 0.12),
      inset 0 -2px 0 rgba(70, 205, 225, 0.3) !important;
  }

  /* Кнопка выхода становится компактной */
  .profile-sidebar__footer {
    width: 100% !important;
    margin-top: 4px !important;
    border-width: 1px !important;
    border-radius: 9px !important;
  }

  .profile-sidebar__footer > .profile-sidebar__link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }


  /* ========================================================
     STEP 11.3 — PROMOCODE FORM
     Поле и кнопка друг под другом
     ======================================================== */

  .promo-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .promo-wrapper .text-input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
  }

  .promo-wrapper .promo-button {
    position: static !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    transform: none !important;

    font-size: 14px !important;
    border-radius: 9px !important;
  }


  /* ========================================================
     STEP 11.4 — PROFILE TABLES
     Таблицы можно прокручивать пальцем вправо
     ======================================================== */

  main.wrapper .table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 10px !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main.wrapper .table > table,
  main.wrapper table.table {
    width: max-content !important;
    min-width: 720px !important;
    table-layout: auto !important;
  }

  main.wrapper table:not(.profile-info__table) {
    min-width: 720px !important;
    font-size: 13px !important;
  }

  main.wrapper table:not(.profile-info__table) th,
  main.wrapper table:not(.profile-info__table) td {
    min-width: 105px !important;
    padding: 10px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  main.wrapper table:not(.profile-info__table) th:first-child,
  main.wrapper table:not(.profile-info__table) td:first-child {
    min-width: 190px !important;
  }


  /* ========================================================
     STEP 11.5 — PAGINATION
     Удобные кнопки страниц
     ======================================================== */

  main.wrapper .pagination {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 64px 1fr !important;
    gap: 7px !important;
  }

  main.wrapper .pagination .app-button,
  main.wrapper .pagination button,
  main.wrapper .pagination a {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px !important;
    font-size: 13px !important;
  }
}
/* ==========================================================
   STEP 12 — MOBILE FORMS & BALANCE MODAL
   Формы кабинета и окно пополнения баланса
   ========================================================== */

@media (max-width: 767px) {

  /* ========================================================
     STEP 12.1 — PROFILE FORMS
     Поля и кнопки располагаются вертикально
     ======================================================== */

  main.wrapper form {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  main.wrapper form input,
  main.wrapper form select,
  main.wrapper form textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    border-radius: 9px !important;
  }

  main.wrapper form button,
  main.wrapper form .app-button {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    transform: none !important;
    font-size: 14px !important;
    border-radius: 9px !important;
  }


  /* ========================================================
     STEP 12.2 — BALANCE MODAL CONTAINER
     Окно пополнения помещается в экран телефона
     ======================================================== */

  .modal-overlay {
    width: 100% !important;
    height: 100% !important;
    padding: 8px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.78) !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    border-radius: 16px 16px 10px 10px !important;
  }

  .modal::before {
    border-radius: inherit !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 18px 14px 14px !important;
    overflow: visible !important;
  }

  .product-modal {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 12px !important;
  }

  .product-modal-title,
  .modal h1,
  .modal h2 {
    margin: 0 0 14px !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: none !important;
  }


  /* ========================================================
     STEP 12.3 — BALANCE FORM
     Компактные поля пополнения
     ======================================================== */

  .modal form {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
  }

  .modal label {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .modal input,
  .modal select,
  .modal textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;

    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 9px !important;
  }

  /* Метод оплаты */
  .modal form > div,
  .modal-content form > div {
    max-width: 100% !important;
  }

  .modal img {
    max-width: 100% !important;
    height: auto !important;
  }


  /* ========================================================
     STEP 12.4 — MODAL BONUSES
     Бонусы компактно переносятся по строкам
     ======================================================== */

  .modal ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  .modal li {
    flex: 1 1 130px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    list-style: none !important;
  }


  /* ========================================================
     STEP 12.5 — MODAL ACTIONS
     Кнопки всегда находятся внизу окна
     ======================================================== */

  .modal-footer-buttons {
    position: sticky !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 20 !important;

    width: 100% !important;
    min-height: auto !important;
    margin-top: auto !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;

    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 8px !important;

    background: rgba(12, 15, 17, 0.97) !important;
    border-top: 1px solid rgba(70, 205, 225, 0.16) !important;
    backdrop-filter: blur(10px) !important;
  }

  .modal-close-button,
  .modal-primary-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
  }

  .modal-close-button-text,
  .modal-primary-button-text {
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}
/* ==========================================================
   STEP 12.6 — COMPACT MOBILE BALANCE MODAL
   Уменьшаем высоту окна пополнения
   ========================================================== */

@media (max-width: 767px) {

  .modal {
    max-height: calc(100dvh - 10px) !important;
    border-radius: 14px 14px 8px 8px !important;
  }

  .modal-content {
    padding: 14px 12px 10px !important;
  }

  .modal form {
    gap: 8px !important;
  }

  .modal h1,
  .modal h2,
  .product-modal-title {
    margin-bottom: 10px !important;
    font-size: 19px !important;
  }

  .modal label {
    margin-bottom: 3px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .modal input,
  .modal select,
  .modal textarea {
    min-height: 42px !important;
    height: 42px !important;
    padding: 8px 11px !important;
    font-size: 15px !important;
  }

  /* Блок выбора способа оплаты */
  .modal-content form button {
    width: 100% !important;
    min-height: 58px !important;
    max-height: 72px !important;
    padding: 8px 12px !important;
  }

  .modal-content form button img {
    width: auto !important;
    max-width: 74px !important;
    max-height: 42px !important;
  }

  /* Бонусные проценты */
  .modal ul {
    margin: 4px 0 !important;
    gap: 6px 10px !important;
  }

  .modal li {
    font-size: 12px !important;
  }

  .modal-footer-buttons {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .modal-close-button,
  .modal-primary-button {
    min-height: 44px !important;
  }
}
/* ==========================================================
   STEP 13 — MOBILE TRANSFER FIX
   Исправление формы перевода средств
   ========================================================== */

@media (max-width: 767px) {

  /* Обычные поля формы */
  main.wrapper form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
  }

  /* Вложенные строки формы не должны выходить за экран */
  main.wrapper form > div,
  main.wrapper form > div > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Строки с несколькими полями складываем вертикально */
  main.wrapper form > div:not(:has(input[type="checkbox"])) {
    grid-template-columns: minmax(0, 1fr) !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Исправляем чекбокс согласия */
  main.wrapper form input[type="checkbox"],
  main.wrapper form input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;

    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;
    border-radius: 5px !important;
  }

  /* Строка чекбокса и поясняющего текста */
  main.wrapper form > div:has(input[type="checkbox"]),
  main.wrapper form label:has(input[type="checkbox"]) {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  main.wrapper form > div:has(input[type="checkbox"]) *,
  main.wrapper form label:has(input[type="checkbox"]) * {
    max-width: 100% !important;
  }

  /* Текст пользовательского соглашения */
  main.wrapper form label,
  main.wrapper form p {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Поля суммы и комиссии */
  main.wrapper form .text-input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    font-size: 16px !important;
  }

  /* Кнопка перевода */
  main.wrapper form button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin-top: 8px !important;
  }


  /* ========================================================
     STEP 13.1 — MOBILE DATA TABLES
     Улучшаем прокрутку таблиц покупок, аренды и переводов
     ======================================================== */

  main.wrapper .table {
    position: relative !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main.wrapper table:not(.profile-info__table) {
    min-width: 640px !important;
  }

  main.wrapper table:not(.profile-info__table) th,
  main.wrapper table:not(.profile-info__table) td {
    padding: 9px !important;
    font-size: 12px !important;
  }

  main.wrapper table:not(.profile-info__table) th:first-child,
  main.wrapper table:not(.profile-info__table) td:first-child {
    min-width: 170px !important;
  }
}
/* ==========================================================
   STEP 13.2 — COMPACT MOBILE CABINET TABLES
   Покупки, аренда, платежи и переводы помещаются на экран
   ========================================================== */

@media (max-width: 767px) {

  /* Таблица полностью помещается в экран */
  main.wrapper table:not(.profile-info__table) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* Скрываем технический идентификатор # только на телефоне */
  main.wrapper table:not(.profile-info__table) th:first-child,
  main.wrapper table:not(.profile-info__table) td:first-child {
    display: none !important;
  }

  /* Компактные ячейки */
  main.wrapper table:not(.profile-info__table) th,
  main.wrapper table:not(.profile-info__table) td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 5px !important;

    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    vertical-align: middle !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  main.wrapper table:not(.profile-info__table) th {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* Кнопки управления арендой */
  main.wrapper table:not(.profile-info__table) button,
  main.wrapper table:not(.profile-info__table) .app-button,
  main.wrapper table:not(.profile-info__table) a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 5px 4px !important;

    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 6px !important;
  }

  /* Убираем принудительную горизонтальную ширину */
  main.wrapper .table,
  main.wrapper .table > table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
/* ==========================================================
   STEP 14 — MOBILE PRODUCT MODAL
   Компактная раскрытая карточка товара
   ========================================================== */

@media (max-width: 767px) {

  .product-modal {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  /* Название товара */
  .product-modal-title {
    margin: 0 0 8px !important;
    padding: 0 4px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Компактное изображение */
  .product-modal-gallery {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    max-height: 240px !important;
    padding: 0 !important;

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

    border-radius: 10px !important;
  }

  .product-modal-gallery img,
  .product-modal > div img {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    max-height: 240px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Описание */
  .product-modal-description {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;

    overflow: visible !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  .product-modal-description p,
  .product-modal-description li,
  .product-modal-description span,
  .product-modal-description div {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  .product-modal-description p {
    margin: 0 0 8px !important;
  }

  .product-modal-description ul {
    margin: 6px 0 !important;
    padding-left: 18px !important;
    display: block !important;
  }

  .product-modal-description li {
    margin-bottom: 5px !important;
    list-style: disc !important;
  }

  /* Выбор варианта товара и итоговая цена */
  .product-modal-inputs {
    width: 100% !important;
    gap: 8px !important;
  }

  .product-modal-inputs .select-display,
  .product-modal-inputs .amount-control-total {
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
  }

  .product-modal-inputs .select-text,
  .product-modal-inputs .amount-control-total,
  .product-modal-inputs .amount-control-total-rub,
  .product-modal-inputs .amount-control-total p,
  .product-modal-inputs .amount-control-total span {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  /* Нижние кнопки карточки */
  .product-modal + .modal-footer-buttons,
  .modal:has(.product-modal) .modal-footer-buttons {
    grid-template-columns: 1fr 1.35fr !important;
  }
}


/* Чуть меньшее изображение для узких телефонов */

@media (max-width: 359px) {
  .product-modal-gallery,
  .product-modal-gallery img,
  .product-modal > div img {
    height: 210px !important;
    max-height: 210px !important;
  }
}