/*
  Prime Rust — Green Premium (GameStores / CSS Modules)
  Основано на твоём примере стиля (адаптация под Prime Rust).
*/

/* -------------------- THEME -------------------- */
:root{
  --logo-url: url("https://i.postimg.cc/Y9xdDmT4/logo.png"); /* <- замени на свой логотип */

  --accent-color-800:#3fbf8c;
  --accent-color-900:#2e8b68;

  --font-color-700:#ffffff;
  --font-color-800:rgba(255,255,255,.78);
  --font-color-900:rgba(255,255,255,.55);

  --bg-color-900:#05070b;
  --bg-color-800:#0b0f18;
  --bg-color-700:#121826;

  --stroke: rgba(255,255,255,.08);
  --stroke-2: rgba(255,255,255,.12);

  --top-a:#0f2f2b;
  --top-b:#071a17;

  --pill-bg: rgba(255,255,255,.08);
  --pill-br: rgba(255,255,255,.10);
  --pill-hv: rgba(34,197,94,.22);

  --shadow-inset: inset 0 -22px 44px rgba(0,0,0,.55);
  --shadow: 0 10px 24px rgba(0,0,0,.35);

  --r10:10px;
  --r12:12px;
  --r14:14px;

  --safe-padding: 15px;
  --default-font-size: 14px;
}

/* Если сайт использует data-theme, всё равно переопределим под зелёный */
:root[data-theme]{
  --accent-color-800:#3fbf8c;
  --accent-color-900:#2e8b68;
}

/* -------------------- BASE -------------------- */
*{ box-sizing:border-box; }

body{
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
  background-color: var(--bg-color-900);
  color: var(--font-color-800);
  font-weight: 400;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  font-size: var(--default-font-size);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* лёгкая виньетка */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,0,0,.10), rgba(0,0,0,.65) 70%),
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.08), rgba(0,0,0,.70) 78%);
  z-index:0;
}
#root, .app, .wrapper, main{ position:relative; z-index:1; }

/* -------------------- BANNER -------------------- */
/* выключи это, если хочешь вернуть баннер */
.Banner-module__img{
  display:none;
}

/* -------------------- CONTAINER -------------------- */
.container{
  padding: 0 var(--safe-padding);
  margin: 0 auto;
  max-width: 1280px;
}

/* -------------------- HEADER (TOP) -------------------- */
.Header-module__wrapper{
  background: linear-gradient(180deg, var(--top-a) 0%, var(--top-b) 100%) !important;
  border-bottom: 1px solid var(--stroke) !important;
  box-shadow: var(--shadow-inset) !important;

  margin-bottom: 18px;
  padding: 0 15px;
  min-height: 64px;
  font-weight: 650;
  width: 100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  border-radius: 0 0 14px 14px;

  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(6px);
}

/* ЛОГО */
.Header-module__logo{
  font-size: 0px;
  text-transform: none;
  background: var(--logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 35px;
  margin-right: 12px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

/* -------------------- TOP MENU PILLS -------------------- */
/* Стилизуем ссылки в шапке как “пилюли” */
.Header-module__wrapper a{
  color: var(--font-color-700);
  text-decoration:none;
}

/* Часто пункты меню — это просто <a> внутри header.
   Делаем аккуратно: стилизуем все ссылки шапки, но НЕ категории магазина ниже */
.Header-module__wrapper a:not(.Categories-module__category){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  background: var(--pill-bg);
  border: 1px solid var(--pill-br);
  border-radius: var(--r12);

  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  transition: transform .15s ease, filter .15s ease, background .15s ease;
}

/* hover */
.Header-module__wrapper a:not(.Categories-module__category):hover{
  background: var(--pill-hv);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* active (если есть aria-current/page или active-класс) */
.Header-module__wrapper a[aria-current="page"],
.Header-module__wrapper a.active{
  background: linear-gradient(180deg, var(--accent-color-800), var(--accent-color-900));
  border-color: rgba(255,255,255,.14);
}

/* -------------------- MONITORING (если используешь) -------------------- */
.MonitoringServer-module__name{
  display:block;
  margin-bottom:5px;
  font-size:12px;
  color: var(--font-color-800);
}

/* -------------------- CATEGORIES -------------------- */
.Categories-module__categories{
  display:flex;
  width:100%;
  justify-content: initial;
  flex-wrap:wrap;
  margin: -5px;
  font-size: 13px;
}

.Categories-module__category{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--font-color-800);
  margin: 5px;
  padding: 8px 12px;
  transition: .2s ease;
}

.Categories-module__category.Categories-module__active,
.Categories-module__category:hover{
  border-radius: 10px;
  border-color: rgba(63,191,140,.55);
  background: rgba(63,191,140,.12);
  color: var(--font-color-700);
}

/* -------------------- BUTTONS -------------------- */
.Button-module__btn{
  border-radius: 10px;
}

.Button-module__btn.Button-module__gray{
  color: var(--font-color-800);
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  border-radius: 10px;
}
.Button-module__btn.Button-module__gray:hover,
.Button-module__btn.Button-module__gray:focus{
  background-color: rgba(255,255,255,.12);
}

.Button-module__btn.Button-module__accent{
  color: #071a17;
  background: linear-gradient(180deg, var(--accent-color-800), var(--accent-color-900));
  border-color: rgba(255,255,255,.08);
  border-radius: 10px;
  font-weight: 800;
}
.Button-module__btn.Button-module__accent:hover,
.Button-module__btn.Button-module__accent:focus{
  filter: brightness(1.06);
}

/* -------------------- SEARCH -------------------- */
.Search-module__wrapper{
  width:100%;
  display:flex;
  height: 38px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 14px;
}

.Search-module__wrapper input,
.Search-module__wrapper .Search-module__input{
  width:100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--font-color-700);
  padding: 0 12px;
  font-size: 13px;
}

/* -------------------- PRODUCTS GRID -------------------- */
.Products-module__wrapper{
  margin-top: 15px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap: 15px;
}

/* PRODUCT CARD */
.Product-module__wrapper{
  background: rgba(18,24,38,.78);
  position: relative;
  padding: 12px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  animation: Product-module__productAnimation .15s ease;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.Product-module__wrapper:hover{
  transform: translateY(-4px);
  border-color: rgba(63,191,140,.55);
  filter: brightness(1.03);
}

/* subtle green glow */
.Product-module__wrapper::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 20% 120%, rgba(63,191,140,.35) 0%, transparent 55%);
  opacity:.55;
  pointer-events:none;
}

/* PRICE / DISCOUNT */
.Product-module__price{
  top: 0;
  left: 0;
  background-color: rgb(0 0 0 / 28%);
  padding: 10px 10px;
  border-radius: 0 0 14px;
  display:flex;
  align-items:center;
  position:absolute;
  z-index:2;
  font-weight: 800;
  color: #caffea;
}

.Product-module__discount{
  top: 0;
  right: 0;
  background: linear-gradient(180deg, var(--accent-color-800), var(--accent-color-900));
  color: #071a17;
  padding: 10px 10px;
  border-radius: 0 0 0 14px;
  position:absolute;
  z-index:2;
  font-weight: 900;
}

/* -------------------- MODALS / MISC -------------------- */
.productModalContainsItem{
  border-radius: 12px;
  background-color: rgba(255,255,255,.06);
  padding: 10px;
  position: relative;
  display:flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,.10);
}

.productModalDescription{
  text-align:left;
  padding: 12px;
  margin-bottom: 10px;
  background-color: rgba(255,255,255,.06);
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.14);
  color: var(--font-color-800);
}

/* -------------------- SOCIAL (опционально, если блоки есть) -------------------- */
.social-box{
  text-align:center;
  display:grid;
  line-height: 2rem;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.vkontakte, .telegram, .youtube, .twitch{
  border-radius: 15px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  padding: 6px 0px 4px 0px;
  transition: .25s ease;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

.vkontakte{ background:#2c3547; }
.telegram{ background:#2c3e47; }
.youtube{ background:#472c2c; }
.twitch{ background:#3c2c47; }

.vkontakte:hover, .telegram:hover, .youtube:hover, .twitch:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* -------------------- MOBILE -------------------- */
@media (max-width: 991px){
  .Header-module__wrapper{
    padding: 0 12px;
    min-height: 60px;
  }
  .Header-module__logo{
    width: 160px;
    height: 32px;
  }
  .Header-module__wrapper a:not(.Categories-module__category){
    padding: 10px 14px;
    font-size: 13px;
  }
  .Products-module__wrapper{
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  }
}

/* ====== FULL-WIDTH TOP BAR (Prime Rust) ====== */

/* 1) Шапка/обёртка на всю ширину */
.Header-module__wrapper,
[class*="Header-module__wrapper"],
[class*="Topbar-module__wrapper"],
[class*="Layout-module__header"]{
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;

  /* если где-то стоит скругление снизу — можно оставить, но без “вложенности” */
  border-radius: 0 !important;
}

/* 2) Растянуть фон даже если шапка лежит внутри центрированного блока */
.Header-module__wrapper,
[class*="Header-module__wrapper"],
[class*="Topbar-module__wrapper"],
[class*="Layout-module__header"]{
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;

  background: linear-gradient(180deg, #0f2f2b 0%, #071a17 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 -22px 44px rgba(0,0,0,.55) !important;
}

/* 3) Внутренний контент ограничиваем по ширине и центрируем */
.Header-module__wrapper .container,
.Header-module__wrapper .container-fluid,
[class*="Header-module__wrapper"] .container,
[class*="Header-module__wrapper"] .container-fluid,
[class*="Topbar-module__wrapper"] .container,
[class*="Topbar-module__wrapper"] .container-fluid,
[class*="Layout-module__header"] .container,
[class*="Layout-module__header"] .container-fluid{
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
}

/* 4) Если у шапки есть “обёртка”, которая режет ширину — выравниваем */
#root,
.app,
.wrapper,
main{
  width: 100% !important;
  max-width: 100% !important;
}

/* 5) На всякий случай: bootstrap navbar (если где-то используется) */
.navbar{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.navbar .container,
.navbar .container-fluid{
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
}

/* ===== FIX: FULL-WIDTH HEADER (100vw inside centered container) ===== */

html, body {
  overflow-x: hidden !important;
}

/* Главная шапка / topbar (CSS-modules + запасные селекторы) */
.Header-module__wrapper,
[class*="Header-module__wrapper"],
[class*="Topbar-module__wrapper"],
[class*="Layout-module__header"],
.navbar {
  /* КЛЮЧЕВОЕ: растягиваем на ширину окна даже внутри контейнера */
  width: 100vw !important;
  max-width: 100vw !important;

  /* Центруем “полоску” относительно окна */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* Убираем “вложенный” вид */
  border-radius: 0 !important;

  /* На всякий случай */
  left: auto !important;
  right: auto !important;
}

/* Контент внутри шапки оставляем аккуратно по центру */
.Header-module__wrapper > .container,
.Header-module__wrapper > .container-fluid,
[class*="Header-module__wrapper"] > .container,
[class*="Header-module__wrapper"] > .container-fluid,
[class*="Topbar-module__wrapper"] > .container,
[class*="Topbar-module__wrapper"] > .container-fluid,
[class*="Layout-module__header"] > .container,
[class*="Layout-module__header"] > .container-fluid,
.navbar > .container,
.navbar > .container-fluid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
}

/* Если у самой шапки внутренний блок-обёртка тоже ограничивает ширину — разжимаем */
.Header-module__wrapper > div,
[class*="Header-module__wrapper"] > div,
[class*="Topbar-module__wrapper"] > div,
[class*="Layout-module__header"] > div {
  max-width: 100% !important;
}