/* ZATMENIE STORE — вставьте весь файл в поле «Содержимое файла CSS» */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --zat-bg: #07100f;
  --zat-bg-2: #0b1515;
  --zat-panel: #101c1b;
  --zat-panel-2: #162522;
  --zat-ink: #f3f6ee;
  --zat-muted: #8e9b94;
  --zat-line: rgba(222,235,224,.14);
  --zat-acid: #a8c97f;
  --zat-cyan: #24d1c3;
  --zat-money: #78d98b;
  --zat-gold: #d8b978;
  --zat-name: #ded2b8;
  --zat-shadow: 0 20px 50px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--zat-bg); }
body {
  margin: 0;
  color: var(--zat-ink);
  background:
    radial-gradient(circle at 96% 9%, rgba(36,209,195,.1), transparent 31rem),
    radial-gradient(circle at 4% 55%, rgba(168,201,127,.045), transparent 33rem),
    var(--zat-bg) !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #07100f; background: var(--zat-acid); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #050d0c; }
::-webkit-scrollbar-thumb { background: #3c4c46; border: 2px solid #050d0c; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--zat-acid); }

.wrapper { width: min(1500px, calc(100% - 32px)); margin-inline: auto; }

/* Шапка */
header.wrapper {
  position: sticky;
  top: 9px;
  z-index: 1000;
  margin-top: 9px;
  overflow: visible;
  border: 1px solid var(--zat-line);
  border-radius: 9px;
  background: rgba(7,16,15,.92) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}
.navbar { min-height: 72px; padding: 0 18px; }
.navbar__brand {
  display: flex !important;
  flex: 0 0 72px;
  align-self: stretch;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
}
.navbar__brand img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  border: 1px solid rgba(168,201,127,.48);
  border-radius: 50%;
  background: #eee;
  object-fit: contain;
}
.navbar__brand p {
  margin: 0;
  color: #fff;
  font: 700 24px/1 'Oswald', sans-serif;
  letter-spacing: .17em;
}
.navbar__brand p::after {
  content: '  / STORE';
  color: var(--zat-acid);
  font-size: 8px;
  letter-spacing: .25em;
}
.nav-link, .navbar__btn {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.nav-link { position: relative; color: #b9c3be !important; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 10px;
  right: calc(100% - 10px);
  bottom: 6px;
  height: 2px;
  background: var(--zat-acid);
  transition: right .22s ease;
}
.nav-link:hover::after { right: 10px; }

/* Одинаковые горизонтальные отступы между ссылками в шапке */
.navbar__nav {
  column-gap: 26px !important;
  gap: 26px !important;
}
.navbar__nav > .navbar__nav-item {
  margin: 0 !important;
  padding: 0 !important;
}
.navbar__nav > .navbar__nav-item > .nav-link {
  margin: 0 !important;
  padding-inline: 0 !important;
}

header .app-button,
header .app-button:link,
header .app-button:visited,
header .app-button:focus,
header .app-button:focus-visible,
.navbar a:not(.navbar__brand),
.navbar a:not(.navbar__brand):link,
.navbar a:not(.navbar__brand):visited,
.navbar a:not(.navbar__brand):focus,
.navbar a:not(.navbar__brand):focus-visible {
  color: #cbd4cf !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}
header .app-button:hover,
.navbar a:not(.navbar__brand):hover {
  color: #07100f !important;
  background: var(--zat-acid) !important;
  border-color: var(--zat-acid) !important;
}

/* WARGM */
.navbar a[href*="wargm" i] {
  display: flex !important;
  width: 92px;
  min-height: 46px;
  padding: 7px 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.navbar a[href*="wargm" i] img {
  display: block !important;
  width: 92px !important;
  height: 18px !important;
  max-width: 92px !important;
  max-height: 18px !important;
  margin: 0 !important;
  object-fit: contain;
}

/* GameMonitoring — широкий пункт сразу рядом с WARGM */
.navbar .zat-gamemonitoring-item {
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
  align-self: stretch;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.navbar .zat-gamemonitoring-link {
  display: flex !important;
  width: 190px !important;
  min-height: 54px;
  padding: 5px 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.navbar .zat-gamemonitoring-link img {
  display: block !important;
  width: min(190px, calc(100% - 10px)) !important;
  height: auto !important;
  max-width: 190px !important;
  max-height: 44px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

/* WARGM и GameMonitoring стоят вплотную; остальные пункты сохраняют шаг 26px */
@media (min-width: 801px) {
  .navbar__nav > .navbar__nav-item:has(> a[href*="wargm" i]) + .zat-gamemonitoring-item {
    margin-left: -26px !important;
  }
}

/* Баннер */
.banner {
  position: relative;
  height: clamp(190px, 15vw, 250px);
  min-height: 0 !important;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(168,201,127,.3) !important;
  border-radius: 9px !important;
  background: #0b1515;
  box-shadow: var(--zat-shadow), inset 0 0 0 4px rgba(7,16,15,.36);
}
.banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  filter: grayscale(1) contrast(1.12);
  transition: transform 7s ease, filter .4s ease;
}
.banner:hover img { transform: scale(1.018); filter: grayscale(1) contrast(1.2); }
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,16,15,.42), transparent 42%), linear-gradient(0deg, rgba(7,16,15,.5), transparent 44%);
}
.banner::after {
  content: 'ZATMENIE // OFFICIAL STORE';
  position: absolute;
  left: 24px;
  bottom: 19px;
  z-index: 3;
  color: var(--zat-acid);
  font: 700 10px/1 'Montserrat', sans-serif;
  letter-spacing: .2em;
  text-shadow: 0 2px 8px #000;
}

/* Каталог */
.grid-wrapper { gap: 22px !important; margin-top: 24px; }
.products-container,
.right-column > *,
.server-info,
.shop-info {
  border: 1px solid var(--zat-line) !important;
  border-radius: 9px !important;
}
.products-container { background: rgba(7,16,15,.36) !important; }
.products-types-buttons { gap: 8px !important; }
.products-types-buttons .app-button {
  min-height: 50px;
  border: 1px solid var(--zat-line) !important;
  border-radius: 7px !important;
  color: #a9b5af !important;
  background: var(--zat-panel) !important;
  font: 600 14px/1 'Oswald', sans-serif !important;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: color .2s, background .2s, border-color .2s, transform .2s !important;
}
.products-types-buttons .app-button:hover {
  color: #07100f !important;
  background: var(--zat-acid) !important;
  border-color: var(--zat-acid) !important;
  transform: translateY(-2px);
}
.products-types-buttons .app-button--active {
  color: #07100f !important;
  background: var(--zat-acid) !important;
  border-color: var(--zat-acid) !important;
  box-shadow: 4px 4px 0 rgba(168,201,127,.13);
}

.text-input, #search-input {
  min-height: 52px;
  border: 1px solid var(--zat-line) !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: var(--zat-panel) !important;
  font-family: 'Montserrat', sans-serif !important;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.text-input::placeholder, #search-input::placeholder { color: #68766f !important; }
.text-input:focus, #search-input:focus {
  border-color: rgba(168,201,127,.72) !important;
  box-shadow: 0 0 0 3px rgba(168,201,127,.08);
}

/* Карточки каталога */
.product-cards { gap: 14px !important; }
.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--zat-line) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #111e1c, #0a1514) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0 solid var(--zat-acid);
  border-radius: inherit;
  transition: border-width .2s;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168,201,127,.54) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
}
.product-card:hover::after { border-width: 1px; }
.product-card-image-container {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 64%, rgba(36,209,195,.16), transparent 48%),
    linear-gradient(145deg, #172824, #0b1715) !important;
}
.product-card-image-container::after {
  content: '';
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 3%;
  height: 42px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 69%);
}
.product-card-image-container img {
  position: relative;
  z-index: 1;
  filter: saturate(.85) contrast(1.05);
  transition: transform .38s ease, filter .3s;
}
.product-card:hover .product-card-image-container img { transform: scale(1.045); filter: saturate(1) contrast(1.1); }
.product-card-footer {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) auto;
  align-content: space-between;
  align-items: start !important;
  gap: 3px;
  height: 74px !important;
  min-height: 74px !important;
  padding: 7px 9px 6px !important;
  overflow: hidden;
  border-top: 1px solid var(--zat-line);
  background: linear-gradient(145deg, #13211f, #0a1514) !important;
}
.product-card-name {
  display: -webkit-box;
  align-self: center;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  color: var(--zat-name) !important;
  font: 600 18px/1.08 'Oswald', sans-serif !important;
  letter-spacing: .025em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-card-price {
  width: 100%;
  margin: 0 !important;
  justify-self: stretch;
  color: var(--zat-money) !important;
  font: 700 19px/.95 'Oswald', sans-serif !important;
  letter-spacing: .05em;
  text-align: right;
  text-shadow: 0 0 12px rgba(120,217,139,.17);
}
.product-card-price .zat-currency {
  margin-left: .14em;
  color: var(--zat-gold) !important;
  font-size: .65em;
  font-weight: 600;
  letter-spacing: .1em;
}

/* Боковая колонка */
.right-column { position: sticky; top: 98px; align-self: start; }
.right-column > * {
  border-color: var(--zat-line) !important;
  background: linear-gradient(145deg, var(--zat-panel-2), var(--zat-panel)) !important;
  box-shadow: var(--zat-shadow);
}
.right-column h1,
.right-column h2,
.right-column h3,
.right-column h4 {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Окно позиции — компоновка в стиле Wiki ZATMENIE */
.modal-overlay {
  padding: 18px !important;
  background: rgba(2,7,6,.82) !important;
  backdrop-filter: blur(8px);
}
.modal {
  width: min(980px, calc(100vw - 36px)) !important;
  max-width: 980px !important;
  max-height: calc(100vh - 36px) !important;
  margin: auto !important;
  inset: auto !important;
  transform: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(168,201,127,.34) !important;
  border-radius: 14px !important;
  color: var(--zat-ink) !important;
  background: var(--zat-panel) !important;
  box-shadow: 0 38px 110px rgba(0,0,0,.7) !important;
}
.modal-content {
  max-height: calc(100vh - 38px) !important;
  padding: 0 !important;
  overflow: auto !important;
  background: transparent !important;
}
.product-modal {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-template-columns: minmax(340px,.96fr) minmax(0,1.04fr) !important;
  grid-template-areas:
    'title gallery'
    'description gallery'
    'inputs gallery' !important;
  grid-template-rows: auto minmax(160px,1fr) auto !important;
  min-height: 550px;
  padding: 0 !important;
  background: transparent !important;
}
.product-modal-title {
  grid-area: title;
  align-self: end;
  margin: 0 !important;
  padding: 38px 38px 18px !important;
  color: var(--zat-name) !important;
  font: 700 clamp(28px,3vw,43px)/.96 'Oswald', sans-serif !important;
  letter-spacing: -.01em;
  text-align: left !important;
  text-transform: uppercase;
}
.product-modal-title::before {
  content: 'ZATMENIE // STORE';
  display: block;
  margin-bottom: 14px;
  color: var(--zat-acid);
  font: 800 8px/1 'Montserrat', sans-serif;
  letter-spacing: .18em;
}
.product-modal-gallery {
  grid-area: gallery;
  position: relative;
  display: grid !important;
  width: auto !important;
  max-width: none !important;
  place-items: center;
  min-width: 0;
  min-height: 550px !important;
  overflow: hidden;
  border-left: 1px solid var(--zat-line);
  background:
    radial-gradient(circle at 50% 57%, rgba(36,209,195,.2), transparent 45%),
    radial-gradient(circle at 15% 12%, rgba(168,201,127,.07), transparent 35%),
    linear-gradient(145deg, #172824, #091412) !important;
}
.product-modal-gallery::before {
  content: 'OFFICIAL STORE';
  position: absolute;
  left: 22px;
  top: 20px;
  z-index: 2;
  color: rgba(168,201,127,.62);
  font: 800 7px/1 'Montserrat',sans-serif;
  letter-spacing: .18em;
}
.product-modal-gallery::after {
  content: '';
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 9%;
  height: 80px;
  background: radial-gradient(ellipse,rgba(0,0,0,.48),transparent 68%);
}
.gallery-main-image {
  position: relative;
  z-index: 1;
  width: 91% !important;
  min-width: 240px !important;
  height: 91% !important;
  max-width: 520px !important;
  max-height: 500px !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: saturate(.9) contrast(1.07);
}
.product-modal-description {
  grid-area: description;
  align-self: stretch;
  max-height: 235px !important;
  margin: 0 8px 8px 38px !important;
  padding: 0 24px 0 0 !important;
  overflow: auto !important;
  color: #9aa69f !important;
  background: transparent !important;
  font: 500 12px/1.7 'Montserrat', sans-serif !important;
  text-align: left !important;
  scrollbar-color: var(--zat-acid) #07100f;
  scrollbar-width: thin;
}
.product-modal-description ul {
  display: grid;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.product-modal-description li {
  position: relative;
  padding-left: 16px;
}
.product-modal-description li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zat-acid);
  box-shadow: 0 0 9px rgba(168,201,127,.28);
}
.product-modal-inputs {
  grid-area: inputs;
  display: grid !important;
  gap: 9px !important;
  padding: 13px 38px 30px !important;
  border-top: 1px solid var(--zat-line);
  background: rgba(7,16,15,.35) !important;
}
.select-container,
.select-display,
.amount-control-counter,
.amount-control-total {
  border-color: var(--zat-line) !important;
  border-radius: 7px !important;
  color: var(--zat-ink) !important;
  background: #08110f !important;
  box-shadow: none !important;
}
.select-container { width: 100% !important; }
.select-display { min-height: 50px !important; padding: 0 15px !important; }
.select-text {
  margin: 0 !important;
  color: var(--zat-name) !important;
  font: 600 14px/1.3 'Montserrat', sans-serif !important;
}
.select-arrow { color: var(--zat-acid) !important; fill: var(--zat-acid) !important; }
.amount-control { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
.amount-control-counter,
.amount-control-total { min-height: 48px !important; }
.amount-control-counter-button {
  color: var(--zat-acid) !important;
  background: transparent !important;
  font-size: 19px !important;
}
.amount-control-counter-button:hover { color: #07100f !important; background: var(--zat-acid) !important; }
.amount-control-count { color: #fff !important; font: 600 16px 'Oswald', sans-serif !important; }
.amount-control-total {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px;
  padding: 0 14px !important;
  color: var(--zat-money) !important;
  font: 700 21px 'Oswald', sans-serif !important;
}
.amount-control-total-rub {
  margin: 0 !important;
  color: var(--zat-gold) !important;
  font: 600 11px 'Oswald', sans-serif !important;
  letter-spacing: .09em;
}
.modal-footer-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 9px !important;
  margin: 0 0 0 51.1% !important;
  padding: 0 38px 34px !important;
  background: rgba(7,16,15,.35) !important;
}
.modal-close-button,
.modal-primary-button {
  min-height: 52px !important;
  border-radius: 7px !important;
  font: 700 10px 'Montserrat', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.modal-close-button {
  border: 1px solid var(--zat-line) !important;
  color: #a5b0aa !important;
  background: transparent !important;
}
.modal-close-button:hover { color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.modal-primary-button {
  border: 1px solid var(--zat-acid) !important;
  color: #07100f !important;
  background: var(--zat-acid) !important;
}
.modal-primary-button:hover { background: #bdd99b !important; }
.modal-close-button-text,
.modal-primary-button-text { margin: 0 !important; color: inherit !important; font: inherit !important; }

.cookie-banner, [class*='cookie'] { border-radius: 8px !important; }
.zat-reveal { opacity: 0; transform: translateY(15px); }
.zat-reveal.zat-visible { opacity: 1; transform: none; transition: opacity .48s ease, transform .48s ease; }

@media (max-width: 800px) {
  .wrapper { width: min(100% - 18px, 1500px); }
  header.wrapper { top: 6px; margin-top: 6px; }
  .navbar { padding-inline: 11px; }
  .navbar__nav { gap: 0 !important; }
  .navbar__brand { flex-basis: 58px; min-width: 58px; margin-right: 6px !important; }
  .navbar__brand img { width: 52px !important; height: 52px !important; max-width: 52px !important; max-height: 52px !important; }
  .navbar__brand p::after { display: none; }
  .navbar__nav-item:has(a[href*="wargm" i]) { display: flex !important; width: 100% !important; justify-content: center !important; }
  .navbar a[href*="wargm" i] { display: flex !important; width: 100% !important; max-width: none !important; min-height: 42px; margin: 0 !important; justify-content: center !important; align-items: center !important; }
  .navbar a[href*="wargm" i] img { width: 86px !important; height: 17px !important; max-width: 86px !important; max-height: 17px !important; }
  .navbar .zat-gamemonitoring-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .navbar .zat-gamemonitoring-link {
    width: 100% !important;
    min-height: 48px;
  }
  .navbar .zat-gamemonitoring-link img {
    width: 150px !important;
    max-width: 150px !important;
    max-height: 34px !important;
  }
  .banner { height: 170px; margin-top: 13px; }
  .banner::after { left: 14px; bottom: 13px; font-size: 8px; letter-spacing: .14em; }
  .grid-wrapper { margin-top: 15px; }
  .right-column { position: static; }
  .product-cards { gap: 9px !important; }
  .product-card-name { font-size: 16px !important; }

  .modal-overlay { padding: 8px !important; }
  .modal { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px) !important; border-radius: 11px !important; }
  .modal-content { max-height: calc(100vh - 18px) !important; }
  .product-modal {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: 'title' 'gallery' 'description' 'inputs' !important;
    grid-template-rows: auto auto auto auto !important;
    min-height: 0;
  }
  .product-modal-title { padding: 25px 20px 15px !important; font-size: 27px !important; }
  .product-modal-title::before { margin-bottom: 10px; }
  .product-modal-gallery { min-height: 280px !important; max-height: 340px; border-left: 0; border-top: 1px solid var(--zat-line); border-bottom: 1px solid var(--zat-line); }
  .gallery-main-image { width: 88% !important; min-width: 0 !important; height: 270px !important; }
  .product-modal-description { max-height: 175px !important; margin: 18px 10px 18px 20px !important; padding-right: 15px !important; font-size: 11px !important; }
  .product-modal-inputs { padding: 15px 20px 18px !important; }
  .amount-control { grid-template-columns: 1fr !important; }
  .modal-footer-buttons { grid-template-columns: 1fr 1.25fr !important; margin: 0 !important; padding: 0 20px 24px !important; }
}

/* Полная адаптация магазина под телефоны */
@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .wrapper { width: calc(100% - 16px) !important; }
  header.wrapper {
    top: 4px;
    width: calc(100% - 16px) !important;
    margin: 4px 8px 0 !important;
    border-radius: 8px;
  }
  .navbar { min-height: 62px; padding: 6px 9px !important; }
  .navbar__mobile { width: 100%; align-items: center !important; }
  .navbar__mobile-buttons { margin-left: auto; }
  .navbar__toggler { min-width: 44px; min-height: 44px; border-radius: 7px !important; }
  .navbar__links {
    width: 100% !important;
    padding: 10px !important;
    border-top: 1px solid var(--zat-line);
    background: #08110f !important;
  }
  .navbar__nav,
  .navbar__buttons { width: 100% !important; }
  .navbar__nav-item { display: flex !important; width: 100% !important; justify-content: center !important; }
  .navbar__nav-item .nav-link,
  .navbar__buttons > * {
    display: flex !important;
    width: 100% !important;
    min-height: 48px;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .navbar__btn--auth { border-radius: 7px !important; }

  .banner {
    width: 100%;
    height: 148px !important;
    margin-top: 11px;
    border-radius: 8px !important;
  }
  .banner img { object-position: center 52%; }
  .banner::after { max-width: calc(100% - 28px); font-size: 7px; letter-spacing: .11em; }

  .grid-wrapper { gap: 12px !important; margin-top: 12px !important; }
  .left-column,
  .products-container,
  .right-column { width: 100% !important; min-width: 0 !important; }
  .products-container { padding: 0 !important; }

  .products-types-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .products-types-buttons .app-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 47px !important;
    padding: 7px 6px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
  #search-input,
  .text-input { width: 100% !important; min-height: 50px; font-size: 14px !important; }

  .product-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .product-cards > div {
    height: auto !important;
    min-height: 0 !important;
  }
  .product-card {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 8px !important;
  }
  .product-card:hover { transform: none; }
  .product-card-image-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1.08;
  }
  .product-card-image-container img { width: 94% !important; height: 94% !important; object-fit: contain !important; }
  .product-card-footer {
    height: 88px !important;
    min-height: 88px !important;
    padding: 7px 8px 6px !important;
  }
  .product-card-name {
    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
    align-self: start !important;
    font-size: 15px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    -webkit-line-clamp: 3 !important;
  }
  .product-card-price { font-size: 18px !important; }
  .product-card-price .zat-currency { font-size: .62em !important; }

  .right-column { position: static !important; display: grid; gap: 9px; margin-top: 3px; }
  .right-column > * { width: 100% !important; margin: 0 !important; border-radius: 8px !important; }

  .modal-overlay { align-items: center !important; padding: 6px !important; }
  .modal { width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; }
  .modal-content { max-height: calc(100dvh - 14px) !important; }
  .product-modal-title { padding: 21px 17px 13px !important; font-size: 25px !important; }
  .product-modal-gallery { min-height: 235px !important; max-height: 285px !important; }
  .gallery-main-image { width: 92% !important; height: 235px !important; max-height: 235px !important; }
  .product-modal-description { max-height: 145px !important; margin: 15px 8px 15px 17px !important; font-size: 10px !important; line-height: 1.6 !important; }
  .product-modal-inputs { gap: 7px !important; padding: 13px 17px 15px !important; }
  .select-display { min-height: 47px !important; }
  .amount-control { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .amount-control-counter,
  .amount-control-total { min-height: 46px !important; }
  .modal-footer-buttons { gap: 7px !important; padding: 0 17px 20px !important; }
  .modal-close-button,
  .modal-primary-button { min-height: 49px !important; }

  .cookie-banner {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
}

@media (max-width: 350px) {
  .product-cards { grid-template-columns: 1fr !important; }
  .product-card-image-container { aspect-ratio: 1.45 / 1; }
  .product-card-name { font-size: 17px !important; }
}

/* Компактное окно позиции для мобильных браузеров с крупными панелями */
@media (max-width: 600px) {
  .modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
    overflow: hidden !important;
  }
  .modal-content {
    max-height: calc(100dvh - 18px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .product-modal-title {
    padding: 15px 15px 11px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .product-modal-title::before {
    margin-bottom: 7px;
    font-size: 6px;
  }
  .product-modal-gallery {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
  }
  .product-modal-gallery::before { left: 15px; top: 13px; font-size: 6px; }
  .product-modal-gallery::after { bottom: 3%; height: 42px; }
  .gallery-main-image {
    width: 90% !important;
    height: 195px !important;
    max-height: 195px !important;
  }
  .product-modal-description {
    max-height: 108px !important;
    margin: 11px 6px 11px 15px !important;
    padding-right: 12px !important;
    font-size: 9.5px !important;
    line-height: 1.55 !important;
  }
  .product-modal-description ul { gap: 5px; }
  .product-modal-description::-webkit-scrollbar { width: 4px; }
  .product-modal-description::-webkit-scrollbar-track { background: #07100f; }
  .product-modal-description::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--zat-acid); }
  .product-modal-inputs {
    gap: 6px !important;
    padding: 10px 15px 11px !important;
  }
  .select-display { min-height: 43px !important; padding-inline: 12px !important; }
  .select-text { font-size: 12px !important; }
  .amount-control { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .amount-control-counter,
  .amount-control-total { min-height: 43px !important; }
  .amount-control-total { font-size: 19px !important; }
  .modal-footer-buttons {
    position: sticky !important;
    bottom: 0;
    z-index: 8;
    grid-template-columns: .8fr 1.2fr !important;
    gap: 6px !important;
    padding: 9px 15px max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--zat-line);
    background: rgba(8,17,15,.98) !important;
    backdrop-filter: blur(12px);
  }
  .modal-close-button,
  .modal-primary-button {
    min-height: 45px !important;
    padding-inline: 8px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 600px) and (max-height: 690px) {
  .product-modal-gallery { height: 165px !important; min-height: 165px !important; max-height: 165px !important; }
  .gallery-main-image { height: 158px !important; max-height: 158px !important; }
  .product-modal-description { max-height: 82px !important; }
}

/* Компактное уведомление Cookies на телефонах */
@media (max-width: 600px) {
  .cookie-banner {
    position: fixed !important;
    inset: auto 9px max(9px, env(safe-area-inset-bottom)) 9px !important;
    z-index: 10000 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(168,201,127,.5) !important;
    border-radius: 12px !important;
    color: var(--zat-ink) !important;
    background: rgba(8,17,15,.97) !important;
    box-shadow: 0 22px 65px rgba(0,0,0,.62) !important;
    backdrop-filter: blur(16px);
  }
  .cookie-content {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 15px !important;
    color: inherit !important;
    background: transparent !important;
    text-align: left !important;
  }
  .cookie-content h5 {
    margin: 0 !important;
    color: var(--zat-name) !important;
    font: 600 17px/1.1 'Oswald', sans-serif !important;
    letter-spacing: .015em;
  }
  .cookie-content p {
    margin: 0 !important;
    color: #96a29c !important;
    font: 500 10px/1.5 'Montserrat', sans-serif !important;
  }
  .cookie-buttons {
    display: block !important;
    width: 100% !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
  }
  .cookie-buttons .app-button {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--zat-acid) !important;
    border-radius: 7px !important;
    color: #07100f !important;
    background: var(--zat-acid) !important;
    box-shadow: none !important;
    font: 700 10px/1 'Montserrat', sans-serif !important;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .cookie-buttons .app-button:hover,
  .cookie-buttons .app-button:focus {
    color: #07100f !important;
    background: #bdd99b !important;
    border-color: #bdd99b !important;
  }
}

/* Рулетка — отдельное компактное оформление */
.modal.zat-roulette-dialog {
  width: min(1040px, calc(100vw - 32px)) !important;
  max-width: 1040px !important;
  border-color: rgba(168,201,127,.48) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(36,209,195,.1), transparent 25rem),
    linear-gradient(145deg, #10201d, #091412 72%) !important;
  box-shadow: 0 42px 120px rgba(0,0,0,.78) !important;
}

.zat-roulette-dialog .modal-content {
  overflow-x: hidden !important;
  scrollbar-color: var(--zat-acid) #07100f;
  scrollbar-width: thin;
}

.zat-roulette-dialog [data-pm-id] {
  min-width: 0;
}

.zat-roulette-dialog .roulette-modal {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  padding: 30px 36px 24px !important;
}

.zat-roulette-dialog .roulette-modal .product-modal-title {
  margin: 0 !important;
  padding: 0 50px 22px 0 !important;
  color: var(--zat-name) !important;
  font: 700 clamp(31px, 4vw, 48px)/1 'Oswald', sans-serif !important;
  letter-spacing: -.015em;
  text-align: left !important;
  text-transform: uppercase;
}

.zat-roulette-dialog .roulette-modal .product-modal-title::before {
  content: 'ZATMENIE // РУЛЕТКА';
  display: block;
  margin-bottom: 13px;
  color: var(--zat-acid);
  font: 800 8px/1 'Montserrat', sans-serif;
  letter-spacing: .18em;
}

.zat-roulette-dialog .roulette-wrapper {
  position: relative;
  height: 178px !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(216,185,120,.34) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(90deg, rgba(4,10,9,.78), transparent 13%, transparent 87%, rgba(4,10,9,.78)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 8px),
    #0b1514 !important;
  box-shadow:
    inset 0 0 35px rgba(0,0,0,.48),
    0 14px 34px rgba(0,0,0,.2);
}

.zat-roulette-dialog .roulette-window {
  width: 120px !important;
  border-color: var(--zat-gold) !important;
  background: linear-gradient(180deg, rgba(216,185,120,.07), rgba(216,185,120,.015));
  box-shadow:
    inset 10px 0 20px -18px rgba(216,185,120,.9),
    inset -10px 0 20px -18px rgba(216,185,120,.9),
    0 0 28px rgba(216,185,120,.09);
}

.zat-roulette-dialog .roulette-window::before,
.zat-roulette-dialog .roulette-window::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-inline: 7px solid transparent;
}

.zat-roulette-dialog .roulette-window::before {
  top: 0;
  border-top: 10px solid var(--zat-gold);
}

.zat-roulette-dialog .roulette-window::after {
  bottom: 0;
  border-bottom: 10px solid var(--zat-gold);
}

.zat-roulette-dialog .roulette-track {
  gap: 12px !important;
  height: 100% !important;
}

.zat-roulette-dialog .roulette-item {
  display: flex;
  width: 100px !important;
  min-width: 100px !important;
  height: 112px !important;
  padding: 9px 7px !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(222,235,224,.09);
  border-radius: 9px !important;
  color: #c7d0cb;
  background: linear-gradient(145deg, rgba(27,42,39,.96), rgba(12,23,21,.96)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.zat-roulette-dialog .roulette-item img {
  display: block;
  width: 78px !important;
  height: 67px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 7px rgba(0,0,0,.32));
}

.zat-roulette-dialog .roulette-item-name {
  width: 100%;
  margin-top: 7px !important;
  overflow: hidden;
  color: #cbd3cf;
  font: 600 10px/1.2 'Montserrat', sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zat-roulette-dialog .roulette-modal > .product-modal-description {
  max-height: 88px !important;
  margin: 10px 2px 0 !important;
  padding: 0 !important;
  color: #99a59f !important;
  font: 500 11px/1.55 'Montserrat', sans-serif !important;
  text-align: left !important;
}

.zat-roulette-dialog .roulette-prizes {
  margin-top: 24px !important;
  padding-top: 18px;
  border-top: 1px solid var(--zat-line);
}

.zat-roulette-dialog .roulette-prizes-title {
  margin: 0 0 12px !important;
  color: var(--zat-name);
  font: 600 15px/1.2 'Oswald', sans-serif !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.zat-roulette-dialog .roulette-prizes-grid {
  display: grid !important;
  max-height: 205px;
  margin: 0 !important;
  padding: 0 3px 4px 0;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
  gap: 8px !important;
  overflow-y: auto;
  scrollbar-color: rgba(168,201,127,.55) #07100f;
  scrollbar-width: thin;
}

.zat-roulette-dialog .roulette-prize-card {
  min-width: 0;
  min-height: 92px;
  padding: 8px 6px !important;
  overflow: hidden;
  border: 1px solid rgba(222,235,224,.08);
  border-radius: 8px !important;
  background: linear-gradient(145deg, #0c1816, #08110f) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

.zat-roulette-dialog .roulette-prize-card:hover {
  border-color: rgba(168,201,127,.42);
  background: #10201d !important;
  transform: translateY(-2px);
}

.zat-roulette-dialog .roulette-prize-image {
  height: 57px !important;
  margin: 0 0 5px !important;
}

.zat-roulette-dialog .roulette-prize-image img {
  max-width: 55px !important;
  max-height: 55px !important;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.28));
}

.zat-roulette-dialog .roulette-prize-name {
  color: #aeb8b3;
  font: 500 9px/1.25 'Montserrat', sans-serif !important;
}

.zat-roulette-dialog .roulette-modal .product-modal-inputs {
  display: grid !important;
  gap: 9px !important;
  margin-top: 8px;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--zat-line);
  background: transparent !important;
}

.zat-roulette-dialog .roulette-modal .amount-control {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch;
}

.zat-roulette-dialog .roulette-modal .amount-control.zat-roulette-amount--countable {
  grid-template-columns: minmax(130px,.75fr) minmax(130px,.75fr) minmax(220px,1fr) !important;
}

.zat-roulette-dialog .roulette-modal .amount-control-total,
.zat-roulette-dialog .roulette-modal .amount-control-counter {
  min-height: 54px !important;
  border-color: rgba(168,201,127,.18) !important;
  background: rgba(5,13,12,.86) !important;
}

.zat-roulette-dialog .roulette-modal .amount-control-total {
  justify-content: flex-end !important;
  padding-inline: 18px !important;
  font-size: 24px !important;
}

.zat-roulette-dialog .zat-roulette-buy {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zat-acid) !important;
  border-radius: 7px !important;
  color: #07100f !important;
  background: var(--zat-acid) !important;
  box-shadow: 0 10px 24px rgba(120,217,139,.12) !important;
  font: 800 10px/1 'Montserrat', sans-serif !important;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.zat-roulette-dialog .zat-roulette-buy:hover,
.zat-roulette-dialog .zat-roulette-buy:focus-visible {
  border-color: #c3dca5 !important;
  background: #c3dca5 !important;
  box-shadow: 0 14px 30px rgba(168,201,127,.2) !important;
  transform: translateY(-2px);
}

.zat-roulette-dialog .zat-roulette-footer {
  position: absolute !important;
  top: 18px;
  right: 18px;
  z-index: 12;
  display: block !important;
  width: 38px;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.zat-roulette-dialog .zat-roulette-footer .modal-close-button {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid rgba(222,235,224,.16) !important;
  border-radius: 50% !important;
  color: #aab5af !important;
  background: rgba(5,13,12,.78) !important;
  cursor: pointer;
}

.zat-roulette-dialog .zat-roulette-footer .modal-close-button::before {
  content: '×';
  font: 400 24px/1 'Montserrat', sans-serif;
}

.zat-roulette-dialog .zat-roulette-footer .modal-close-button:hover {
  border-color: rgba(168,201,127,.55) !important;
  color: #fff !important;
  background: #13231f !important;
}

.zat-roulette-dialog .zat-roulette-footer .modal-close-button-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .modal.zat-roulette-dialog {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }

  .zat-roulette-dialog .roulette-modal {
    padding: 20px 14px 18px !important;
  }

  .zat-roulette-dialog .roulette-modal .product-modal-title {
    padding: 0 42px 16px 0 !important;
    font-size: clamp(27px, 9vw, 38px) !important;
  }

  .zat-roulette-dialog .roulette-wrapper {
    height: 150px !important;
    border-radius: 9px !important;
  }

  .zat-roulette-dialog .roulette-item {
    width: 100px !important;
    min-width: 100px !important;
    height: 102px !important;
  }

  .zat-roulette-dialog .roulette-prizes {
    margin-top: 18px !important;
    padding-top: 15px;
  }

  .zat-roulette-dialog .roulette-prizes-grid {
    max-height: 194px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .zat-roulette-dialog .roulette-prize-card {
    min-height: 84px;
    padding: 6px 4px !important;
  }

  .zat-roulette-dialog .roulette-prize-image {
    height: 49px !important;
  }

  .zat-roulette-dialog .roulette-prize-image img {
    max-width: 47px !important;
    max-height: 47px !important;
  }

  .zat-roulette-dialog .roulette-modal .amount-control,
  .zat-roulette-dialog .roulette-modal .amount-control.zat-roulette-amount--countable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .zat-roulette-dialog .roulette-modal .amount-control.zat-roulette-amount--countable .zat-roulette-buy {
    grid-column: 1 / -1;
  }

  .zat-roulette-dialog .roulette-modal .amount-control-total,
  .zat-roulette-dialog .roulette-modal .amount-control-counter,
  .zat-roulette-dialog .zat-roulette-buy {
    min-height: 48px !important;
  }

  .zat-roulette-dialog .zat-roulette-footer {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}