/* =========================================================
   VALLHALA-RUST — custom theme for GameStores template_5
   Only CSS/JS are editable, so everything below overrides
   the shipped template classes. Safe to paste as-is into
   the site's custom.css field.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Oswald:wght@400;500;600&display=swap');

:root{
  --vr-bg:            #121212;
  --vr-bg-soft:       #181818;
  --vr-panel:         #1c1c1c;
  --vr-panel-2:       #212121;
  --vr-border:        #2c2c2c;
  --vr-border-soft:   #262626;
  --vr-text:          #e7e3dc;
  --vr-text-dim:      #9a9690;
  --vr-rust:          #ce4b27;
  --vr-rust-2:        #ff6a3a;
  --vr-rust-dark:     #8a2f16;
  --vr-gold:          #d9a441;
  --vr-green:         #6bbf59;
  --vr-red:           #c3392e;
  --vr-radius:        10px;
  --vr-radius-sm:     6px;
  --vr-shadow:        0 10px 30px rgba(0,0,0,.45);
  --vr-glow:          0 0 0 1px rgba(206,75,39,.35), 0 0 22px rgba(206,75,39,.18);
}

/* ---------- base ---------- */
html, body{
  background: var(--vr-bg) !important;
  color: var(--vr-text);
}

body{
  background:
    radial-gradient(1100px 500px at 12% -10%, rgba(206,75,39,.10), transparent 60%),
    radial-gradient(900px 460px at 105% 0%, rgba(217,164,65,.07), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 26px),
    var(--vr-bg) !important;
  font-family: 'Oswald', 'Roboto', sans-serif;
}

*{
  scrollbar-color: var(--vr-rust) #1a1a1a;
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: #161616; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--vr-rust-2), var(--vr-rust-dark));
  border-radius: 8px;
  border: 2px solid #161616;
}

a{ color: var(--vr-rust-2); }

/* ---------- loader ---------- */
.gs-loader{ background-color: var(--vr-bg) !important; }
.gs-loader__spinner{
  border-color: var(--vr-rust) !important;
  border-bottom-color: #161616 !important;
}

/* ---------- copyright badge (bottom-left) ---------- */
.DesktopCopyright-module__wrapper{
  background-color: rgba(20,20,20,.85) !important;
  border: 1px solid var(--vr-border-soft);
  backdrop-filter: blur(6px);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: .02em;
}
.DesktopCopyright-module__link{ color: var(--vr-rust-2) !important; }

/* ---------- banner ---------- */
.bannerContainer{
  padding: 18px 0 6px;
}
.Banner-module__img{
  border-radius: var(--vr-radius);
  border: 1px solid var(--vr-border);
  box-shadow: var(--vr-shadow);
  filter: saturate(1.05) contrast(1.03);
  transition: transform .5s ease, box-shadow .5s ease;
}
.Banner-module__img:hover{
  transform: scale(1.006);
  box-shadow: var(--vr-shadow), var(--vr-glow);
}

/* ---------- header ---------- */
.headerContainer{
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 10px;
  transition: padding .2s ease;
}
.headerContainer.vr-scrolled{ padding-top: 4px; }
.headerContainer.vr-scrolled .Header-module__wrapper{
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.Header-module__wrapper{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(18,18,18,.97), rgba(18,18,18,.92));
  border: 1px solid var(--vr-border-soft);
  border-radius: var(--vr-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  position: relative;
  /* ВАЖНО: тут намеренно нет backdrop-filter и overflow:hidden. Они превращают шапку
     в «контейнер» для position:fixed-потомков и обрезают по её высоте выезжающее
     мобильное меню (а в нём — язык и кнопки навигации). */
}
.Header-module__wrapper::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-radius: 0 0 var(--vr-radius) var(--vr-radius);
  pointer-events: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vr-rust), var(--vr-gold), transparent);
  opacity: .8;
}
.Header-module__logoWrapper{ margin: 0; }
.Header-module__logo{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vr-text) !important;
  text-shadow: 0 0 18px rgba(206,75,39,.45);
  position: relative;
  padding-left: 14px;
}
.Header-module__logo::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 22px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--vr-rust-2), var(--vr-rust-dark));
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255,106,58,.6);
}

/* ---------- header nav: «Магазин» / «Правила» / «Баны» как кнопки ----------
   «Правила» и «Баны» добавляет custom.js (см. syncNav), иконки — через mask,
   активная страница подсвечивается атрибутом data-vr-active. */
.HeaderNav-module__wrapper{
  display: flex;
  align-items: center;
  gap: 8px;
}
.HeaderNav-module__link{
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--vr-text-dim) !important;
  background: var(--vr-panel-2);
  border: 1px solid var(--vr-border);
  padding: 9px 16px;
  border-radius: var(--vr-radius-sm);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              transform .15s ease, box-shadow .2s ease;
}
.HeaderNav-module__link::before{
  content: "";
  display: none;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--vr-ico) center / contain no-repeat;
          mask: var(--vr-ico) center / contain no-repeat;
}
.HeaderNav-module__link[data-vr-icon]::before{ display: block; }
.HeaderNav-module__link[data-vr-icon="shop"]{  --vr-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%208h14l-1%2012H6L5%208z'/%3E%3Cpath%20d='M9%208V7a3%203%200%200%201%206%200v1'/%3E%3C/svg%3E"); }
.HeaderNav-module__link[data-vr-icon="rules"]{ --vr-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h9l4%204v14H6z'/%3E%3Cpath%20d='M14%203v5h5'/%3E%3Cpath%20d='M9%2013h7M9%2017h7'/%3E%3C/svg%3E"); }
.HeaderNav-module__link[data-vr-icon="bans"]{  --vr-ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M5.7%205.7l12.6%2012.6'/%3E%3C/svg%3E"); }

.HeaderNav-module__link:hover{
  color: var(--vr-text) !important;
  background: rgba(206,75,39,.12);
  border-color: var(--vr-rust);
  transform: translateY(-1px);
}
.HeaderNav-module__link:focus-visible{
  outline: 2px solid var(--vr-rust-2);
  outline-offset: 2px;
}
.HeaderNav-module__link[data-vr-active="true"]{
  color: #fff !important;
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark));
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(206,75,39,.3);
}

/* в выезжающем мобильном меню кнопки идут столбцом на всю ширину */
.PlayerMenuMobile-module__nav{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.PlayerMenuMobile-module__nav .HeaderNav-module__link{
  width: 100%;
  padding: 12px 16px;
  justify-content: flex-start;
}

.PlayerMenu-module__wrapper{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ---------- language switcher ----------
   Десктоп: список языков выезжает ВЛЕВО от кнопки (горизонтальная «плашка»
   с хвостиком-стрелкой). Мобильное меню: раскрывается под кнопкой, т.к. слева
   от неё в выезжающей панели нет места.
   Открытием управляет custom.js через атрибут data-vr-open на обёртке —
   поэтому все правила видимости ниже с !important и не зависят от родного CSS. */
.LangSwitcher-module__wrapper .LangSwitcher-module__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vr-panel-2);
  border: 1px solid var(--vr-border);
  color: var(--vr-text-dim);
  border-radius: var(--vr-radius-sm);
  padding: 7px 12px;
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.LangSwitcher-module__btn:hover{
  color: var(--vr-text);
  border-color: var(--vr-rust);
}
/* стрелка на кнопке: « < » в закрытом виде, « > » когда список открыт */
.LangSwitcher-module__btn::before{ content: none !important; }
.LangSwitcher-module__btn::after{
  content: "";
  flex: 0 0 auto;
  position: static;
  width: 6px;
  height: 6px;
  margin: 0 0 0 2px;
  background: none;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.LangSwitcher-module__wrapper[data-vr-open="true"] .LangSwitcher-module__btn{
  color: var(--vr-text);
  border-color: var(--vr-rust);
  box-shadow: 0 0 0 3px rgba(206,75,39,.14);
}
.LangSwitcher-module__wrapper[data-vr-open="true"] .LangSwitcher-module__btn::after{
  transform: rotate(225deg);
}

/* --- десктоп: всплывающая плашка слева от кнопки --- */
.PlayerMenu-module__langSwitcher{
  position: relative;
  display: flex;
  align-items: center;
}
.PlayerMenu-module__langSwitcher .LangSwitcher-module__list{
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 12px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 50;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 5px !important;
  background: var(--vr-panel) !important;
  border: 1px solid var(--vr-border) !important;
  border-radius: var(--vr-radius-sm) !important;
  box-shadow: var(--vr-shadow), 0 0 0 1px rgba(206,75,39,.16) !important;
  overflow: visible !important;
  /* закрыто */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(14px, -50%) !important;
  transform-origin: right center;
  transition: opacity .18s ease,
              transform .24s cubic-bezier(.2,.8,.2,1),
              visibility 0s linear .24s;
}
/* хвостик плашки, направленный на кнопку */
.PlayerMenu-module__langSwitcher .LangSwitcher-module__list::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 10px;
  height: 10px;
  background: var(--vr-panel);
  border-top: 1px solid var(--vr-border);
  border-right: 1px solid var(--vr-border);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.PlayerMenu-module__langSwitcher[data-vr-open="true"] .LangSwitcher-module__list{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(0, -50%) !important;
  transition: opacity .18s ease,
              transform .24s cubic-bezier(.2,.8,.2,1),
              visibility 0s;
}

/* --- мобильное меню: раскрывается под кнопкой --- */
.PlayerMenuMobile-module__langSwitcher .LangSwitcher-module__list{
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 4px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 5px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  background: var(--vr-panel) !important;
  border: 1px solid transparent !important;
  border-radius: var(--vr-radius-sm) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: max-height .25s ease, margin .25s ease, padding .25s ease,
              opacity .2s ease, visibility 0s linear .25s;
}
.PlayerMenuMobile-module__langSwitcher[data-vr-open="true"] .LangSwitcher-module__list{
  max-height: 140px !important;
  margin-top: 8px !important;
  padding: 5px !important;
  border-color: var(--vr-border) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: max-height .25s ease, margin .25s ease, padding .25s ease,
              opacity .2s ease, visibility 0s;
}

/* --- пункты списка (общие для обоих вариантов) --- */
.LangSwitcher-module__lang{
  position: relative;
  width: auto !important;
  padding: 8px 11px !important;
  color: var(--vr-text-dim) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              opacity .2s ease, transform .2s ease;
}
.LangSwitcher-module__lang:hover,
.LangSwitcher-module__lang:focus-visible{
  background: rgba(206,75,39,.16) !important;
  color: var(--vr-text) !important;
  outline: none;
}
.LangSwitcher-module__lang[data-vr-current="true"]{
  color: #fff !important;
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark)) !important;
  box-shadow: 0 3px 10px rgba(206,75,39,.3);
}
/* пункты «выезжают» по очереди при открытии */
.PlayerMenu-module__langSwitcher .LangSwitcher-module__lang{
  opacity: 0;
  transform: translateX(8px);
}
.PlayerMenu-module__langSwitcher[data-vr-open="true"] .LangSwitcher-module__lang{
  opacity: 1;
  transform: none;
}
.PlayerMenu-module__langSwitcher[data-vr-open="true"] .LangSwitcher-module__lang:nth-child(1){ transition-delay: .03s; }
.PlayerMenu-module__langSwitcher[data-vr-open="true"] .LangSwitcher-module__lang:nth-child(2){ transition-delay: .07s; }
.PlayerMenu-module__langSwitcher[data-vr-open="true"] .LangSwitcher-module__lang:nth-child(3){ transition-delay: .11s; }

@media (prefers-reduced-motion: reduce){
  .PlayerMenu-module__langSwitcher .LangSwitcher-module__list,
  .PlayerMenuMobile-module__langSwitcher .LangSwitcher-module__list,
  .LangSwitcher-module__lang,
  .LangSwitcher-module__btn::after{ transition: none !important; }
}

.PlayerMenu-module__loginLink{
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff !important;
  padding: 9px 18px;
  border-radius: var(--vr-radius-sm);
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark));
  box-shadow: 0 6px 16px rgba(206,75,39,.3);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.PlayerMenu-module__loginLink:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 20px rgba(206,75,39,.42);
}

.PlayerMenuMobile-module__mobileMenuBtn{
  background: var(--vr-panel-2);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius-sm);
}
.PlayerMenuMobile-module__mobileMenuBtn .PlayerMenuMobile-module__line{
  background-color: var(--vr-text) !important;
}
.PlayerMenuMobile-module__menu{
  background: var(--vr-bg-soft) !important;
  border-left: 1px solid var(--vr-border) !important;
}
.PlayerMenuMobile-module__header{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vr-text) !important;
  border-bottom: 1px solid var(--vr-border-soft) !important;
}
.PlayerMenuMobile-module__loginLink{
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark)) !important;
  color: #fff !important;
  border-radius: var(--vr-radius-sm) !important;
}

/* ---------- generic panels ---------- */
.boxHeader{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vr-text) !important;
  background: linear-gradient(90deg, rgba(206,75,39,.14), transparent) !important;
  border-left: 3px solid var(--vr-rust);
  padding: 12px 16px !important;
}
.boxBody{
  background: var(--vr-panel) !important;
  border: 1px solid var(--vr-border-soft);
  border-top: none;
}
.boxFooter{
  background: var(--vr-panel-2) !important;
  border: 1px solid var(--vr-border-soft);
  border-top: none;
}

/* ---------- monitoring widget ---------- */
.Widgets-module__widgetWrapper{
  border-radius: var(--vr-radius);
  overflow: hidden;
  box-shadow: var(--vr-shadow);
  margin-bottom: 18px;
}
.MonitoringWidget-module__body{ padding: 14px 16px !important; }
.MonitoringServer-module__wrapper{
  background: var(--vr-panel-2);
  border: 1px solid var(--vr-border-soft);
  border-radius: var(--vr-radius-sm);
  padding: 12px 14px;
  position: relative;
}
.MonitoringServer-module__name{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--vr-text) !important;
}
.MonitoringServer-module__progressWrapper{ margin: 8px 0; }
.MonitoringServer-module__progressBarWrapper{
  background: #101010 !important;
  border-radius: 6px;
  overflow: hidden;
  height: 6px;
}
.MonitoringServer-module__progressBar,
.MonitoringServer-module__progressBarAnim{
  background: linear-gradient(90deg, var(--vr-rust-dark), var(--vr-rust-2)) !important;
}
.MonitoringServer-module__info{
  font-size: 12px;
  color: var(--vr-text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.MonitoringServer-module__btn{
  background: var(--vr-panel);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius-sm);
  color: var(--vr-text-dim);
  transition: color .2s ease, border-color .2s ease;
}
.MonitoringServer-module__btn:hover{
  color: var(--vr-rust-2);
  border-color: var(--vr-rust);
}

/* status dot, injected by custom.js */
.MonitoringServer-module__wrapper::before{
  content: "";
  position: absolute;
  top: 12px; right: 14px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--vr-text-dim);
}
.MonitoringServer-module__wrapper[data-vr-status="online"]::before{
  background: var(--vr-green);
  box-shadow: 0 0 10px rgba(107,191,89,.8);
  animation: vr-pulse 1.6s ease-in-out infinite;
}
.MonitoringServer-module__wrapper[data-vr-status="offline"]::before{
  background: var(--vr-red);
  box-shadow: 0 0 8px rgba(195,57,46,.7);
}
@keyframes vr-pulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .5; transform: scale(1.25); }
}

.MonitoringWidget-module__updateBtn{
  width: 100%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark)) !important;
  border: none !important;
  border-radius: var(--vr-radius-sm) !important;
  padding: 10px !important;
  transition: filter .2s ease, transform .2s ease;
}
.MonitoringWidget-module__updateBtn:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ---------- shop ---------- */
.Shop-module__wrapper{ border-radius: var(--vr-radius); overflow: hidden; box-shadow: var(--vr-shadow); }

/* layout: product grid on the left, categories as a column on the right */
.Shop-module__wrapper > .boxBody{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--vr-panel) !important;
}

.Categories-module__categories{
  order: 2;
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
  background: transparent;
  position: sticky;
  top: 96px;
  align-self: flex-start;
}
.Categories-module__category{
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vr-text-dim) !important;
  background: var(--vr-panel-2) !important;
  border: 1px solid var(--vr-border) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: all .2s ease;
}
.Categories-module__category:hover{
  color: var(--vr-text) !important;
  border-color: var(--vr-rust) !important;
  transform: translateX(-2px);
}
.Categories-module__active{
  color: #fff !important;
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(206,75,39,.35);
}
.Categories-module__categories .Categories-module__category{
  width: 100%;
  text-align: left;
  border-radius: var(--vr-radius-sm) !important;
}

.Search-module__wrapper{
  display: none !important; /* поиск скрыт по запросу; убери эту строку, чтобы вернуть */
  margin: 4px 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vr-panel-2);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius-sm);
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.Search-module__wrapper:focus-within{
  border-color: var(--vr-rust);
  box-shadow: 0 0 0 3px rgba(206,75,39,.14);
}
.Search-module__iconWrapper{ color: var(--vr-text-dim); display: flex; }
.Search-module__input{
  background: transparent !important;
  border: none !important;
  color: var(--vr-text) !important;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  width: 100%;
}
.Search-module__input::placeholder{ color: #6e6a64; }

.Products-module__wrapper{
  order: 1;
  flex: 1 1 560px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding: 0;
  background: transparent;
}

.Product-module__wrapper{
  position: relative;
  background: linear-gradient(180deg, var(--vr-panel-2), #191919);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius);
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  opacity: 0;
  transform: translateY(10px);
  animation: vr-card-in .4s ease forwards;
}
.Product-module__wrapper:hover{
  transform: translateY(-4px);
  border-color: var(--vr-rust);
  box-shadow: 0 14px 28px rgba(0,0,0,.4), var(--vr-glow);
}
.Product-module__wrapper::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at 50% 0%, rgba(206,75,39,.18), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.Product-module__wrapper:hover::before{ opacity: 1; }

.Product-module__img{
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  transition: transform .25s ease;
}
.Product-module__wrapper:hover .Product-module__img{ transform: scale(1.08) rotate(-2deg); }

.Product-module__name{
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--vr-text);
  line-height: 1.25;
  min-height: 30px;
}

.Product-module__price{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  color: #fff;
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark));
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: 0 4px 10px rgba(206,75,39,.3);
}

.Product-module__count{
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--vr-gold);
  color: #201400;
  font-family: 'Oswald', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

@keyframes vr-card-in{
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- 3D tilt (наведение указателя) ---------- */
.Product-module__wrapper{
  --vr-rx: 0deg;
  --vr-ry: 0deg;
  --vr-mx: 50%;
  --vr-my: 50%;
  --vr-ix: 0px;
  --vr-iy: 0px;
  transform-style: preserve-3d;
  will-change: transform;
}
.Product-module__wrapper.vr-tilt{
  transform: perspective(700px) rotateX(var(--vr-rx)) rotateY(var(--vr-ry)) translateY(-6px) scale(1.045);
  border-color: var(--vr-rust);
  box-shadow: 0 22px 42px rgba(0,0,0,.45), var(--vr-glow);
  z-index: 2;
}
.Product-module__wrapper.vr-tilt::before{
  opacity: 1;
  background: radial-gradient(160px 120px at var(--vr-mx) var(--vr-my), rgba(255,255,255,.3), rgba(206,75,39,.2) 45%, transparent 72%);
}
.Product-module__wrapper.vr-tilt .Product-module__img{
  transform: translate(var(--vr-ix), var(--vr-iy)) scale(1.12);
}
@media (hover: none){
  .Product-module__wrapper.vr-tilt{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .Product-module__wrapper.vr-tilt{ transform: translateY(-4px); }
}

/* ---------- footer ---------- */
.ShopFooter-module__text{
  font-size: 11px;
  color: var(--vr-text-dim) !important;
  padding: 14px 16px 4px;
  line-height: 1.5;
}
.ShopFooter-module__links{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 16px 16px;
}
.ShopFooter-module__link{
  font-size: 11px;
  color: var(--vr-rust-2) !important;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,106,58,.35);
}
.ShopFooter-module__link:hover{ color: var(--vr-gold) !important; }

/* ---------- reveal-on-scroll (toggled by custom.js) ---------- */
.vr-in-view{ animation-play-state: running; }

/* ---------- small screens ---------- */
@media (max-width: 900px){
  .Categories-module__categories{
    order: 0;
    position: static;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .Categories-module__categories .Categories-module__category{ width: auto; text-align: center; }
  .Products-module__wrapper{ order: 1; flex: 1 1 100%; }
}

@media (max-width: 720px){
  .Header-module__wrapper{ padding: 10px 14px; gap: 14px; }
  .Header-module__logo{ font-size: 19px; }
  .Products-module__wrapper{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
  .Product-module__img{ width: 86px; height: 86px; }
}

/* =========================================================
   Виджет соцсетей (кастомный HTML-блок пользователя)
   Плавающая кнопка снизу справа + выпадающая карточка.
   ========================================================= */
.toggle-button{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark));
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(206,75,39,.4);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.toggle-button::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.toggle-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 30px rgba(206,75,39,.5);
}

.menu-list{
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 59;
  width: 280px;
  max-width: calc(100vw - 44px);
  background: var(--vr-panel);
  border: 1px solid var(--vr-border-soft);
  border-radius: var(--vr-radius);
  box-shadow: var(--vr-shadow), var(--vr-glow);
  padding: 10px;
  display: none;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s ease;
}
.menu-list.vr-social-open{
  display: block;
  animation: vr-social-in .2s ease forwards;
}
@keyframes vr-social-in{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.social{ display: flex; flex-direction: column; gap: 8px; }

.social_item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--vr-radius-sm);
}
.social_fon{
  background: var(--vr-panel-2);
  border: 1px solid var(--vr-border);
  transition: border-color .2s ease, transform .2s ease;
}
.social_fon:hover{ border-color: var(--vr-rust); transform: translateX(-2px); }

.social_background{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.social_background.vk{
  background: linear-gradient(135deg, #5a94e8, #2b5ea8);
}
.social_background.vk::after{ content: "VK"; }
.social_background.ds{
  background: linear-gradient(135deg, #8b93ff, #5865f2);
}
.social_background.ds::after{ content: "DS"; }

.social_item-left{ flex: 1 1 auto; min-width: 0; }
.social_item-title{
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  color: var(--vr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social_item-right{ flex: 0 0 auto; }
.social_item-link{
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff !important;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--vr-border);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.social_item-link:hover{
  background: linear-gradient(135deg, var(--vr-rust-2), var(--vr-rust-dark));
  border-color: transparent;
}

@media (max-width: 480px){
  .toggle-button{ right: 14px; bottom: 14px; padding: 11px 16px; font-size: 12px; }
  .menu-list{ right: 14px; bottom: 72px; }
}

body.vr-menu-open{ overflow: hidden; }