/* =========================================================
   LEGION SHOP — FIXED STYLE OVERRIDE
   вставлять В САМЫЙ НИЗ CSS
   ========================================================= */

:root {
  --legion-bg: #050505;
  --legion-panel: #090909;
  --legion-panel-2: #0d0d0d;
  --legion-border: rgba(255, 140, 0, 0.22);
  --legion-border-strong: rgba(255, 150, 20, 0.42);
  --legion-glow: rgba(255, 145, 0, 0.18);
  --legion-orange: #e18a22;
  --legion-orange-2: #ffad3d;
  --legion-text: #f0dfc2;
  --legion-text-soft: #d2b890;
  --legion-dark-text: #1b1208;
  --legion-shadow:
    0 0 0 1px rgba(255, 140, 0, 0.06),
    0 0 18px rgba(255, 140, 0, 0.08);
}

/* =========================================================
   КОНТЕЙНЕРЫ
   ========================================================= */

.products-container,
.left-column,
.right-column,
.wrapper,
main.wrapper {
  box-sizing: border-box;
}

.products-container * {
  box-sizing: border-box;
}

/* =========================================================
   КНОПКИ КАТЕГОРИЙ — КАК НА СКРИНЕ
   ========================================================= */

.products-types-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

.products-types-buttons .app-button.app-button--primary {
  flex: 0 0 calc(25% - 11px) !important;
  min-width: 0 !important;
  width: calc(25% - 11px) !important;
  max-width: none !important;
  height: 78px !important;
  padding: 0 20px !important;

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

  border-radius: 22px !important;
  border: 1px solid rgba(255, 140, 0, 0.28) !important;
  background:
    linear-gradient(180deg, #111215 0%, #090a0d 100%) !important;
  color: var(--legion-text) !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: normal !important;

  box-shadow:
    inset 0 0 24px rgba(255, 140, 0, 0.02),
    0 0 0 rgba(0, 0, 0, 0) !important;
  transition: .22s ease !important;
}

.products-types-buttons .app-button.app-button--primary:hover {
  border-color: rgba(255, 160, 40, 0.52) !important;
  box-shadow:
    0 0 16px rgba(255, 140, 0, 0.10),
    inset 0 0 18px rgba(255, 140, 0, 0.03) !important;
  transform: translateY(-1px) !important;
}

.products-types-buttons .app-button.app-button--primary.app-button--active,
.products-types-buttons .app-button.app-button--primary.app-button--bold,
.products-types-buttons .app-button.app-button--primary[aria-pressed="true"] {
  background:
    linear-gradient(180deg, #f1aa46 0%, #d9841d 100%) !important;
  color: #181006 !important;
  border-color: rgba(255, 183, 77, 0.92) !important;
  box-shadow:
    0 0 18px rgba(255, 150, 20, 0.26),
    0 0 34px rgba(255, 150, 20, 0.12),
    inset 0 1px 0 rgba(255, 238, 207, 0.28) !important;
}

@media (max-width: 1400px) {
  .products-types-buttons .app-button.app-button--primary {
    flex: 0 0 calc(33.333% - 10px) !important;
    width: calc(33.333% - 10px) !important;
  }
}

@media (max-width: 900px) {
  .products-types-buttons .app-button.app-button--primary {
    flex: 0 0 calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;
    height: 68px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 560px) {
  .products-types-buttons .app-button.app-button--primary {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   ПОИСК — КАК НА РЕФЕРЕНСЕ
   ========================================================= */

#search-input.search-input,
.search-input {
  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  padding: 0 24px !important;
  margin: 0 0 20px 0 !important;

  border-radius: 22px !important;
  border: 1px solid rgba(255, 140, 0, 0.22) !important;
  background:
    linear-gradient(180deg, #070809 0%, #040404 100%) !important;
  color: var(--legion-text) !important;

  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 70px !important;
  outline: none !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 0, 0.03),
    0 0 0 rgba(0,0,0,0) !important;
}

#search-input.search-input::placeholder,
.search-input::placeholder {
  color: rgba(210, 184, 144, 0.52) !important;
  opacity: 1 !important;
}

#search-input.search-input:focus,
.search-input:focus {
  border-color: rgba(255, 160, 40, 0.48) !important;
  box-shadow:
    0 0 16px rgba(255, 140, 0, 0.10),
    inset 0 0 0 1px rgba(255, 140, 0, 0.05) !important;
}

/* =========================================================
   КАРТОЧКИ ТОВАРОВ
   ========================================================= */

/* тут оставил несколько селекторов сразу, чтобы попало в твою разметку */
.product-card,
.products-grid > div,
.products-list > div,
.products-container .card,
.products-container .product,
.products-container .product-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 140, 0, 0.24) !important;
  background:
    linear-gradient(180deg, #0a0b0d 0%, #040404 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 0, 0.03),
    0 0 0 rgba(0,0,0,0) !important;
  transition: .22s ease !important;
}

.product-card::before,
.products-grid > div::before,
.products-list > div::before,
.products-container .card::before,
.products-container .product::before,
.products-container .product-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 140, 0, 0.17) !important;
  pointer-events: none !important;
}

.product-card:hover,
.products-grid > div:hover,
.products-list > div:hover,
.products-container .card:hover,
.products-container .product:hover,
.products-container .product-card:hover {
  border-color: rgba(255, 160, 40, 0.36) !important;
  box-shadow:
    0 0 18px rgba(255, 140, 0, 0.08),
    inset 0 0 0 1px rgba(255, 140, 0, 0.05) !important;
  transform: translateY(-2px) !important;
}

/* изображение товара */
.product-card img,
.products-grid > div img,
.products-list > div img,
.products-container .card img,
.products-container .product img,
.products-container .product-card img {
  object-fit: contain !important;
  max-width: 76% !important;
  max-height: 76% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.45)) !important;
  transition: .22s ease !important;
}

.product-card:hover img,
.products-grid > div:hover img,
.products-list > div:hover img,
.products-container .card:hover img,
.products-container .product:hover img,
.products-container .product-card:hover img {
  transform: scale(1.03) !important;
}

/* название и цена */
.product-card h3,
.product-card h4,
.product-card .title,
.product-card .product-name,
.products-container .product-name,
.products-container .title,
.products-container .price,
.products-container .product-price {
  position: relative !important;
  z-index: 2 !important;
}

.product-card .title,
.product-card .product-name,
.products-container .product-name,
.products-container .title,
.products-container h3,
.products-container h4 {
  color: var(--legion-text) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
}

.product-card .price,
.product-card .product-price,
.products-container .price,
.products-container .product-price {
  color: #f0d7b1 !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  white-space: nowrap !important;
}

/* =========================================================
   СЕТКА ТОВАРОВ — ЧТОБ НЕ ЛОМАЛО РАЗМЕР
   ========================================================= */

.products-grid,
.products-list,
.products-container .products-grid,
.products-container .products-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

@media (max-width: 1300px) {
  .products-grid,
  .products-list,
  .products-container .products-grid,
  .products-container .products-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .products-grid,
  .products-list,
  .products-container .products-grid,
  .products-container .products-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .products-grid,
  .products-list,
  .products-container .products-grid,
  .products-container .products-list {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ПРАВАЯ ИНФО-КАРТОЧКА
   ========================================================= */

.server-card,
.info-card,
.right-column > div {
  border-radius: 24px !important;
}

.server-card,
.info-card {
  background:
    linear-gradient(180deg, #0d0e10 0%, #080808 100%) !important;
  border: 1px solid rgba(255, 140, 0, 0.22) !important;
  color: var(--legion-text) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 0, 0.03) !important;
}

/* =========================================================
   МОДАЛКА ПОКУПКИ / МЕНЮ ТОВАРА
   ========================================================= */

/* overlay */
.modal-overlay,
.ReactModal__Overlay,
[data-radix-popper-content-wrapper] + .overlay,
[class*="modalOverlay"] {
  background: rgba(0, 0, 0, 0.66) !important;
  backdrop-filter: blur(3px) !important;
}

/* окно */
.modal,
.modal-content,
.ReactModal__Content,
[class*="modalContent"],
[class*="product-modal"],
[class*="purchase-modal"] {
  background:
    linear-gradient(180deg, #0e0f12 0%, #070707 100%) !important;
  color: var(--legion-text) !important;
  border: 1px solid rgba(255, 140, 0, 0.24) !important;
  border-radius: 30px !important;
  box-shadow:
    0 0 30px rgba(255, 140, 0, 0.10),
    inset 0 0 0 1px rgba(255, 140, 0, 0.04) !important;
}

/* внутренний контент */
.modal h1,
.modal h2,
.modal h3,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.ReactModal__Content h1,
.ReactModal__Content h2,
.ReactModal__Content h3 {
  color: var(--legion-text) !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

/* картинка товара в модалке */
.modal img,
.modal-content img,
.ReactModal__Content img {
  object-fit: contain !important;
  max-width: 220px !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 18px auto !important;
  filter: drop-shadow(0 0 16px rgba(0,0,0,.45)) !important;
}

/* поля и блок количества */
.modal input,
.modal-content input,
.ReactModal__Content input,
.modal .quantity-control,
.modal-content .quantity-control,
.ReactModal__Content .quantity-control,
.modal .counter,
.modal-content .counter,
.ReactModal__Content .counter {
  background: linear-gradient(180deg, #101114 0%, #0a0a0b 100%) !important;
  color: var(--legion-text) !important;
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.03) !important;
}

/* кнопки внутри покупки */
.modal button,
.modal-content button,
.ReactModal__Content button {
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 140, 0, 0.24) !important;
  background:
    linear-gradient(180deg, #15161a 0%, #0a0b0d 100%) !important;
  color: var(--legion-text) !important;
  font-weight: 800 !important;
  transition: .2s ease !important;
}

.modal button:hover,
.modal-content button:hover,
.ReactModal__Content button:hover {
  border-color: rgba(255, 160, 40, 0.48) !important;
  box-shadow: 0 0 14px rgba(255, 140, 0, 0.10) !important;
}

/* главная кнопка купить */
.modal button:last-child,
.modal-content button:last-child,
.ReactModal__Content button:last-child,
.modal .buy-button,
.modal-content .buy-button,
.ReactModal__Content .buy-button,
.modal .purchase-button,
.modal-content .purchase-button,
.ReactModal__Content .purchase-button {
  background:
    linear-gradient(180deg, #f0a53d 0%, #d57f18 100%) !important;
  color: #1a1107 !important;
  border-color: rgba(255, 186, 87, 0.86) !important;
  box-shadow:
    0 0 18px rgba(255, 150, 20, 0.20),
    inset 0 1px 0 rgba(255, 236, 205, 0.28) !important;
}

.modal button:last-child:hover,
.modal-content button:last-child:hover,
.ReactModal__Content button:last-child:hover,
.modal .buy-button:hover,
.modal-content .buy-button:hover,
.ReactModal__Content .buy-button:hover,
.modal .purchase-button:hover,
.modal-content .purchase-button:hover,
.ReactModal__Content .purchase-button:hover {
  filter: brightness(1.03) !important;
  box-shadow:
    0 0 20px rgba(255, 150, 20, 0.26),
    inset 0 1px 0 rgba(255, 236, 205, 0.28) !important;
}

/* кнопка закрыть */
.modal .close-button,
.modal-content .close-button,
.ReactModal__Content .close-button {
  background:
    linear-gradient(180deg, #141519 0%, #0a0b0d 100%) !important;
  color: #d7c3a2 !important;
}

/* цена в модалке */
.modal .price,
.modal .product-price,
.modal-content .price,
.modal-content .product-price,
.ReactModal__Content .price,
.ReactModal__Content .product-price {
  color: #f0d7b3 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}
/* =========================================================
   PRODUCT MODAL — CLEAN DARK FIX
   убрать белый цвет + лишние линии
   ========================================================= */

/* внешняя модалка — оставляем только одну основную рамку */
.modal-content {
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(255, 140, 0, 0.08) !important;
}

/* убираем лишние внутренние рамки и свечения */
.product-modal,
.product-modal-title,
.product-modal-gallery,
.product-modal-description,
.product-modal-inputs,
.amount-control,
.amount-control-counter,
.amount-control-total,
.modal-footer-buttons {
  box-shadow: none !important;
}

/* заголовок — без второй лишней линии */
.product-modal-title {
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  background: linear-gradient(180deg, #0f1014 0%, #08090c 100%) !important;
}

/* картинка — только одна аккуратная рамка */
.product-modal-gallery {
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  background: linear-gradient(180deg, #08090c 0%, #040404 100%) !important;
  border-radius: 28px !important;
}

/* описание — только одна рамка */
.product-modal-description {
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  background: linear-gradient(180deg, #0b0c10 0%, #050505 100%) !important;
  border-radius: 24px !important;
  padding: 14px 16px !important;
}

/* счетчик — темный фон вместо белого */
.amount-control-counter {
  background: linear-gradient(180deg, #111216 0%, #090a0d 100%) !important;
  border: 1px solid rgba(255, 140, 0, 0.14) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* центр со значением — тоже темный */
.amount-control-counter > div,
.amount-control-counter > span,
.amount-control-counter p:not(.modal-close-button-text):not(.modal-primary-button-text) {
  background: linear-gradient(180deg, #14151a 0%, #0b0c10 100%) !important;
  color: #e7d4b0 !important;
}

/* минус */
.amount-control-counter button:first-child,
.amount-control-counter .minus:first-child {
  background: linear-gradient(180deg, #11131a 0%, #08090d 100%) !important;
  color: #ffffff !important;
}

/* плюс */
.amount-control-counter button:last-child,
.amount-control-counter .plus:last-child {
  background: linear-gradient(180deg, #f0ab46 0%, #cf7f18 100%) !important;
  color: #191109 !important;
}

/* цена — темная, а не белая */
.amount-control-total {
  background: linear-gradient(180deg, #121318 0%, #090a0d 100%) !important;
  border: 1px solid rgba(255, 140, 0, 0.14) !important;
  color: #d3b889 !important;
  border-radius: 14px !important;
}

/* кнопки снизу */
.modal-footer-buttons {
  border: 0 !important;
  background: transparent !important;
}

/* закрыть — сделать видимой */
.modal-close-button {
  background: linear-gradient(180deg, #1a1c23 0%, #0c0d12 100%) !important;
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  box-shadow: none !important;
}

.modal-close-button-text {
  color: #d8c29a !important;
  opacity: 1 !important;
}

/* купить */
.modal-primary-button {
  background: linear-gradient(180deg, #f0ab46 0%, #cf7f18 100%) !important;
  border: 1px solid rgba(255, 183, 77, 0.70) !important;
  box-shadow: none !important;
}

.modal-primary-button-text {
  color: #1b1208 !important;
}

/* совсем убираем псевдо-рамки, если они где-то остались */
.product-modal::before,
.product-modal::after,
.product-modal-title::before,
.product-modal-title::after,
.product-modal-gallery::before,
.product-modal-gallery::after,
.product-modal-description::before,
.product-modal-description::after,
.amount-control::before,
.amount-control::after,
.amount-control-counter::before,
.amount-control-counter::after,
.amount-control-total::before,
.amount-control-total::after,
.modal-footer-buttons::before,
.modal-footer-buttons::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
   FINAL PATCH — убрать лишние линии + выровнять кнопки
   ========================================================= */

/* 1) УБИРАЕМ ЛИШНИЕ ВНУТРЕННИЕ РАМКИ/ЛИНИИ */
.product-modal,
.product-modal * {
  box-shadow: none !important;
}

.product-modal::before,
.product-modal::after,
.product-modal-title::before,
.product-modal-title::after,
.product-modal-gallery::before,
.product-modal-gallery::after,
.product-modal-description::before,
.product-modal-description::after,
.product-modal-inputs::before,
.product-modal-inputs::after,
.amount-control::before,
.amount-control::after,
.amount-control-counter::before,
.amount-control-counter::after,
.amount-control-total::before,
.amount-control-total::after,
.modal-footer-buttons::before,
.modal-footer-buttons::after,
.modal-close-button::before,
.modal-close-button::after,
.modal-primary-button::before,
.modal-primary-button::after {
  content: none !important;
  display: none !important;
}

/* оставляем только по одной рамке на нужных блоках */
.product-modal-title,
.product-modal-gallery,
.product-modal-description,
.amount-control-counter,
.amount-control-total {
  outline: none !important;
  box-shadow: none !important;
}

/* если раньше где-то был inset через border-image / multiple border */
.product-modal-title {
  border: 1px solid rgba(255, 140, 0, 0.16) !important;
}

.product-modal-gallery {
  border: 1px solid rgba(255, 140, 0, 0.16) !important;
}

.product-modal-description {
  border: 1px solid rgba(255, 140, 0, 0.16) !important;
}

.amount-control-counter {
  border: 1px solid rgba(255, 140, 0, 0.12) !important;
}

.amount-control-total {
  border: 1px solid rgba(255, 140, 0, 0.12) !important;
}

/* 2) НИЖНИЕ КНОПКИ — ОДИНАКОВЫЕ, ПО ЦЕНТРУ, НЕ ВЫЛАЗЯТ */
.modal-footer-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 18px auto 0 auto !important;
  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* одинаковая база для обеих */
.modal-close-button,
.modal-primary-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;

  height: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 0 18px !important;

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

  border-radius: 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  text-decoration: none !important;
  transition: .2s ease !important;
}

/* одинаковое оформление геометрии */
.modal-close-button {
  background: linear-gradient(180deg, #151821 0%, #0b0d12 100%) !important;
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
}

.modal-primary-button {
  background: linear-gradient(180deg, #f0ab46 0%, #cf7f18 100%) !important;
  border: 1px solid rgba(255, 183, 77, 0.70) !important;
}

/* текст кнопок */
.modal-close-button-text,
.modal-primary-button-text {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.modal-close-button-text {
  color: #e3cfab !important;
}

.modal-primary-button-text {
  color: #1b1208 !important;
}

/* hover */
.modal-close-button:hover,
.modal-primary-button:hover {
  transform: translateY(-1px) !important;
}

/* 3) НА МОБИЛКЕ — В КОЛОНКУ, ЧТОБ НИЧЕГО НЕ ВЫЛАЗИЛО */
@media (max-width: 520px) {
  .modal-footer-buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .modal-close-button,
  .modal-primary-button {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
  }
}
/* =========================================================
   FINAL CLEAN PATCH
   Оставить только одну внешнюю обводку
   + уменьшить нижние кнопки
   ========================================================= */

/* внешняя модалка — единственная рамка */
.modal-content {
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  border-radius: 34px !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 140, 0, 0.08) !important;
  overflow: hidden !important;
}

/* полностью убираем все внутренние рамки/линии/свечения */
.product-modal,
.product-modal *,
.product-modal-title,
.product-modal-gallery,
.product-modal-description,
.product-modal-inputs,
.amount-control,
.amount-control-counter,
.amount-control-total,
.modal-footer-buttons,
.modal-close-button,
.modal-primary-button {
  border-image: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* убираем псевдоэлементы, которые могут рисовать вторую рамку */
.product-modal::before,
.product-modal::after,
.product-modal *::before,
.product-modal *::after,
.modal-content::before,
.modal-content::after {
  content: none !important;
  display: none !important;
}

/* внутренние блоки вообще без рамок */
.product-modal-title,
.product-modal-gallery,
.product-modal-description,
.amount-control-counter,
.amount-control-total {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* фон внутренних блоков */
.product-modal-title,
.product-modal-gallery,
.product-modal-description {
  background: transparent !important;
}

/* счетчик и цена — темные, но без обводок */
.amount-control-counter {
  background: linear-gradient(180deg, #101217 0%, #090a0d 100%) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.amount-control-counter > div,
.amount-control-counter > span,
.amount-control-counter p:not(.modal-close-button-text):not(.modal-primary-button-text) {
  background: linear-gradient(180deg, #14161c 0%, #0b0c10 100%) !important;
  color: #e2d0ad !important;
}

.amount-control-total {
  background: linear-gradient(180deg, #111319 0%, #090a0d 100%) !important;
  color: #d0b784 !important;
  border-radius: 14px !important;
}

/* нижние кнопки — меньше и внутри рамки */
.modal-footer-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px auto 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modal-close-button,
.modal-primary-button {
  flex: 0 1 auto !important;
  width: 160px !important;
  max-width: calc(50% - 6px) !important;
  min-width: 0 !important;

  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 16px !important;

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

  border-radius: 18px !important;
  border: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modal-close-button {
  background: linear-gradient(180deg, #161922 0%, #0c0e13 100%) !important;
}

.modal-primary-button {
  background: linear-gradient(180deg, #f0ab46 0%, #cf7f18 100%) !important;
}

.modal-close-button-text,
.modal-primary-button-text {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.modal-close-button-text {
  color: #e0cba3 !important;
}

.modal-primary-button-text {
  color: #1a1208 !important;
}

/* мобильный вариант */
@media (max-width: 520px) {
  .modal-footer-buttons {
    gap: 10px !important;
  }

  .modal-close-button,
  .modal-primary-button {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 12px !important;
  }

  .modal-close-button-text,
  .modal-primary-button-text {
    font-size: 14px !important;
  }
}
/* убрать остаток линии под блоком количества/цены */
.product-modal-inputs,
.amount-control {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* если линия рисуется самим родителем */
.product-modal-inputs::before,
.product-modal-inputs::after,
.amount-control::before,
.amount-control::after {
  content: none !important;
  display: none !important;
}

/* убрать возможный нижний отступ/фон, который выглядит как линия */
.amount-control-counter {
  margin-bottom: 10px !important;
}

.amount-control-total {
  margin-top: 0 !important;
}
/* =========================================================
   УБРАТЬ ПОСЛЕДНЮЮ НИЖНЮЮ ПОЛОСУ ПЕРЕД КНОПКАМИ
   ========================================================= */

/* контейнер инпутов и футера без фона/границ */
.product-modal-inputs,
.amount-control,
.modal-footer-buttons {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* убрать все псевдоэлементы у зоны под ценой */
.product-modal-inputs::before,
.product-modal-inputs::after,
.amount-control::before,
.amount-control::after,
.modal-footer-buttons::before,
.modal-footer-buttons::after {
  content: none !important;
  display: none !important;
}

/* убрать зазор/фон между ценой и кнопками */
.product-modal-inputs {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.amount-control {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.amount-control-total {
  margin-bottom: 12px !important;
}

/* кнопки чуть выше и без подложки */
.modal-footer-buttons {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* если линия рисуется последним div внутри модалки */
.product-modal > div:last-of-type {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   HOVER-ПОДСВЕТКА КАРТОЧКИ ТОВАРА
   срабатывает только при наведении
   ========================================================= */

/* плавность */
.product-card,
.products-grid > div,
.products-list > div,
.products-container .card,
.products-container .product,
.products-container .product-card {
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* внутренняя тонкая рамка */
.product-card::before,
.products-grid > div::before,
.products-list > div::before,
.products-container .card::before,
.products-container .product::before,
.products-container .product-card::before {
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease !important;
}

/* В ОБЫЧНОМ СОСТОЯНИИ — без яркой подсветки */
.product-card,
.products-grid > div,
.products-list > div,
.products-container .card,
.products-container .product,
.products-container .product-card {
  border-color: rgba(255, 140, 0, 0.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 0, 0.02),
    0 0 0 rgba(0, 0, 0, 0) !important;
}

.product-card::before,
.products-grid > div::before,
.products-list > div::before,
.products-container .card::before,
.products-container .product::before,
.products-container .product-card::before {
  border-color: rgba(255, 140, 0, 0.12) !important;
  box-shadow: none !important;
}

/* ПОДСВЕТКА ТОЛЬКО ПРИ НАВЕДЕНИИ */
.product-card:hover,
.products-grid > div:hover,
.products-list > div:hover,
.products-container .card:hover,
.products-container .product:hover,
.products-container .product-card:hover {
  border-color: rgba(255, 186, 59, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 186, 59, 0.22),
    0 0 12px rgba(255, 160, 30, 0.18),
    0 0 26px rgba(255, 160, 30, 0.12) !important;
  transform: translateY(-1px) !important;
}

.product-card:hover::before,
.products-grid > div:hover::before,
.products-list > div:hover::before,
.products-container .card:hover::before,
.products-container .product:hover::before,
.products-container .product-card:hover::before {
  border-color: rgba(255, 186, 59, 0.60) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 186, 59, 0.04),
    0 0 10px rgba(255, 160, 30, 0.10) !important;
}

/* можно чуть усилить и картинку при hover */
.product-card:hover img,
.products-grid > div:hover img,
.products-list > div:hover img,
.products-container .card:hover img,
.products-container .product:hover img,
.products-container .product-card:hover img {
  filter:
    drop-shadow(0 0 10px rgba(255, 170, 40, 0.10))
    drop-shadow(0 0 18px rgba(0, 0, 0, 0.30)) !important;
}
/* =========================================================
   PRODUCT CARD TEXT — FIX ПО РЕАЛЬНЫМ КЛАССАМ
   ========================================================= */

/* сама карточка */
.product-card {
  position: relative !important;
  overflow: hidden !important;
}

/* нижний блок карточки */
.product-card-footer {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  z-index: 5 !important;

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

  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* внутренний правый контейнер цены */
.product-card-footer > div {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* название */
.product-card-name {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;

  color: #ead8b7 !important;
  font-size: 17px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  text-align: left !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
  opacity: 1 !important;

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

/* цена */
.product-card-price {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;

  color: #f6e6c2 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-align: right !important;
  white-space: nowrap !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
  opacity: 1 !important;
}

/* убрать любые темные старые цвета у p */
.product-card-footer p,
.product-card-name,
.product-card-price {
  -webkit-text-fill-color: unset !important;
}

/* подложка под текст для читаемости */
.product-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 88px !important;
  z-index: 4 !important;
  pointer-events: none !important;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0.62) 100%
  ) !important;
}

/* чтобы картинка была под текстом */
.product-card img,
.product-card-image-container,
.product-card-image-container img {
  position: relative !important;
  z-index: 1 !important;
}

/* чтобы footer был выше затемнения */
.product-card-footer {
  z-index: 6 !important;
}

/* рамка должна оставаться видимой */
.product-card::before {
  z-index: 2 !important;
}

/* hover — чуть ярче текст */
.product-card:hover .product-card-name {
  color: #f3e6cb !important;
}

.product-card:hover .product-card-price {
  color: #ffe9bb !important;
}

/* адаптив */
@media (max-width: 700px) {
  .product-card-footer {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    gap: 10px !important;
  }

  .product-card-name {
    font-size: 15px !important;
    max-width: none !important;
  }

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

  .product-card::after {
    height: 78px !important;
  }
}
/* =========================================================
   RIGHT COLUMN — MONITORING + INFO BANNER
   ПОД ОБЩИЙ LEGION STYLE
   ========================================================= */

/* ---------------------------------------------------------
   1. МОНИТОРИНГ СЕРВЕРА
   --------------------------------------------------------- */

.monitoring,
.monitoring.monitoring--active {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px !important;

  border-radius: 22px !important;
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  background:
    radial-gradient(circle at top center, rgba(255, 140, 0, 0.04), transparent 40%),
    linear-gradient(180deg, #111216 0%, #08090c 100%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 0, 0.03),
    0 0 16px rgba(255, 140, 0, 0.06) !important;

  color: #ead8b7 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* убираем возможные лишние псевдоэлементы */
.monitoring::before,
.monitoring::after,
.monitoring.monitoring--active::before,
.monitoring.monitoring--active::after {
  content: none !important;
  display: none !important;
}

/* текст внутри мониторинга */
.monitoring,
.monitoring * {
  color: #ead8b7 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* если внутри есть слабый/вторичный текст */
.monitoring small,
.monitoring .muted,
.monitoring .secondary,
.monitoring span:last-child {
  color: #bca98a !important;
}

/* полоска/бар, если есть */
.monitoring [class*="progress"],
.monitoring [class*="bar"],
.monitoring [class*="track"] {
  background: linear-gradient(180deg, #171920 0%, #0c0d12 100%) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 140, 0, 0.10) !important;
  box-shadow: none !important;
}

/* заполнение полоски */
.monitoring [class*="fill"],
.monitoring [class*="progress-value"],
.monitoring [style*="width"] {
  border-radius: 999px !important;
}

/* ---------------------------------------------------------
   2. БАННЕР "КАК ПОЛУЧИТЬ ТОВАР?!"
   --------------------------------------------------------- */

/* внешний контейнер, если используется */
.banner-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* сама кликабельная карточка */
.banner-item-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 190px !important;
  padding: 26px 22px !important;
  margin: 0 !important;

  text-decoration: none !important;
  text-align: center !important;

  border-radius: 24px !important;
  border: 1px solid rgba(255, 140, 0, 0.18) !important;
  background:
    radial-gradient(circle at top center, rgba(255, 140, 0, 0.04), transparent 38%),
    linear-gradient(180deg, #111216 0%, #08090c 100%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 0, 0.03),
    0 0 18px rgba(255, 140, 0, 0.06) !important;

  color: #ead8b7 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* убрать лишние наложения */
.banner-item-link::before,
.banner-item-link::after,
.banner-item::before,
.banner-item::after {
  content: none !important;
  display: none !important;
}

/* hover */
.banner-item-link:hover {
  border-color: rgba(255, 186, 59, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(255, 186, 59, 0.18),
    0 0 12px rgba(255, 160, 30, 0.14),
    0 0 24px rgba(255, 160, 30, 0.10) !important;
  transform: translateY(-1px) !important;
}

/* текст внутри баннера */
.banner-item-link,
.banner-item-link * {
  color: #ead8b7 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* заголовок */
.banner-item-link strong,
.banner-item-link b,
.banner-item-link h1,
.banner-item-link h2,
.banner-item-link h3 {
  display: block !important;
  margin: 0 0 10px 0 !important;
  color: #f3e5c8 !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

/* обычный текст */
.banner-item-link p,
.banner-item-link span,
.banner-item-link div {
  margin: 0 !important;
  color: #dcc7a2 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   3. ОБЩИЕ БЛОКИ В RIGHT COLUMN
   --------------------------------------------------------- */

.right-column > div,
.banners-above-monitoring,
.banners-after-monitoring {
  box-sizing: border-box !important;
}

/* если между блоками есть белые/стандартные фоны */
.right-column .banner-item,
.right-column .monitoring {
  background-clip: padding-box !important;
}

/* ---------------------------------------------------------
   4. МОБИЛЬНАЯ АДАПТАЦИЯ
   --------------------------------------------------------- */

@media (max-width: 700px) {
  .monitoring,
  .monitoring.monitoring--active {
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  .banner-item-link {
    min-height: 160px !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  .banner-item-link strong,
  .banner-item-link b,
  .banner-item-link h1,
  .banner-item-link h2,
  .banner-item-link h3 {
    font-size: 22px !important;
  }

  .banner-item-link p,
  .banner-item-link span,
  .banner-item-link div {
    font-size: 15px !important;
  }
}
/* =========================================================
   FIX WHITE EDGES — RIGHT BANNER
   ========================================================= */

/* внешний контейнер баннера */
.banner-elem {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
}

/* если внутри есть ссылка/контент — она уже будет styled отдельно */
.banner-elem .banner-item-link {
  width: 100% !important;
  border-radius: 24px !important;
}

/* на всякий случай убираем псевдоэлементы */
.banner-elem::before,
.banner-elem::after {
  content: none !important;
  display: none !important;
}

/* если фон задается inline-стилем — перекрываем дочерним уровнем */
.banners-after-monitoring .banner-elem,
.banners-above-monitoring .banner-elem {
  background: transparent !important;
  background-color: transparent !important;
}

/* чтобы текстовый баннер не оставлял светлую подложку */
.banner-elem > * {
  box-sizing: border-box !important;
}
/* =========================================================
   RECHARGE PANEL — INPUTS WHITE FIX
   ========================================================= */

/* сами обертки инпутов */
.recharge-panel-input,
.promo-wrapper.recharge-panel-input,
.recharge-panel-input.transition-all.input-error {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* сами input внутри */
.recharge-panel-input-raw,
.recharge-panel-input input,
input.recharge-panel-input-raw {
  width: 100% !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  -webkit-text-fill-color: #1f1f1f !important;
}

/* placeholder */
.recharge-panel-input-raw::placeholder,
.recharge-panel-input input::placeholder,
input.recharge-panel-input-raw::placeholder {
  color: #8a8a8a !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #8a8a8a !important;
}

/* autofill */
.recharge-panel-input-raw:-webkit-autofill,
.recharge-panel-input input:-webkit-autofill,
input.recharge-panel-input-raw:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1f1f1f !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* ошибка email — только красная рамка, но внутри белое */
.recharge-panel-input.transition-all.input-error,
.recharge-panel-input.input-error {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #d96b6b !important;
}

/* кнопка применить */
.recharge-panel-section .promo-wrapper + button,
.recharge-panel-section button,
button[class*="promo"],
button[class*="apply"] {
  background: linear-gradient(180deg, #f0ab46 0%, #cf7f18 100%) !important;
  color: #1b1208 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* убрать черные внутренние капсулы/псевдоэлементы */
.recharge-panel-input::before,
.recharge-panel-input::after,
.promo-wrapper.recharge-panel-input::before,
.promo-wrapper.recharge-panel-input::after,
.recharge-panel-input-raw::before,
.recharge-panel-input-raw::after {
  content: none !important;
  display: none !important;
}