:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --soft:#111c33;
  --border:rgba(148,163,184,.18);
  --accent:#f97316;
  --accent2:#22c55e;
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:18px;
  --icon-diamond:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M12%202%204%209l8%2013%208-13-8-7zm0%203%205%204H7l5-4z%27/%3E%3C/svg%3E");
}

/* =====================================================
   НОВИНКИ (compilation-swiper)
   - горизонтальная прокрутка (touch/мышь)
   - квадратные айтемы 1:1 (4:4)
   - стрелки только на ПК
   ===================================================== */

.compilation-swiper{ position:relative; }

/* Трек со скроллом */
.compilation-swiper .compilation{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

/* скрываем полосу прокрутки (не везде) */
.compilation-swiper .compilation::-webkit-scrollbar{ height:0; }

.compilation-swiper .compilation .item{
  flex:0 0 auto;
  width:108px;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--card);
}

.compilation-swiper .compilation .item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ПК: крупнее и растягиваем по ширине контейнера */
@media (min-width: 900px){
  .compilation-swiper .compilation .item{ width:140px; }
}

/* Мобилка: без стрелок, только свайп/скролл */
@media (max-width: 899px){
  .compilation-swiper .comp-btn{ display:none !important; }
  .compilation-swiper .compilation{ gap:8px !important; }
}


/* Light theme */
html[data-theme="light"],
html[data-bs-theme="light"]{
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#5b647a;
  --text:#121521;
  --soft:#eef1f8;
  --border:rgba(18,21,33,.12);
  --shadow:0 18px 40px rgba(0,0,0,.12);
  --icon-diamond:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23121521%27%3E%3Cpath%20d%3D%27M12%202%204%209l8%2013%208-13-8-7zm0%203%205%204H7l5-4z%27/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(1200px 500px at 50% 0%, rgba(249,115,22,.22), transparent 55%),
              radial-gradient(900px 400px at 10% 10%, rgba(34,197,94,.16), transparent 55%),
              #070b14;
  color:var(--text);
}

html[data-theme="light"] body,
html[data-bs-theme="light"] body{
  background: radial-gradient(1000px 500px at 50% 0%, rgba(249,115,22,.18), transparent 55%),
              radial-gradient(900px 500px at 0% 10%, rgba(34,197,94,.12), transparent 55%),
              var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,11,20,.72);
  border-bottom:1px solid var(--border);
}
.nav-top{display:flex;align-items:center;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:180px}
.brand img{width:36px;height:36px;border-radius:12px}
.brand .title{font-weight:800;letter-spacing:.3px}
.search{
  flex:1;
  position:relative;
}
.search input{
  width:100%;
  height:44px;
  padding:0 44px 0 44px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.72);
  color:var(--text);
  outline:none;
}
.search .ico{
  position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;opacity:.85
}
.search .ico.left{left:16px}
.search .ico.right{right:16px;cursor:pointer;display:none}
.search.hasText .ico.right{display:block}
.search-results{
  position:absolute;left:0;right:0;top:52px;
  background: rgba(15,23,42,.96);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:none;
}
.search-results.open{display:block}
.search-item{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer}
.search-item:hover{background: rgba(148,163,184,.08)}
.search-item img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.search-item .name{font-weight:650}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:42px;height:42px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(15,23,42,.72);
  border:1px solid var(--border);
  cursor:pointer;
}
.btn{
  height:42px;padding:0 16px;border-radius:999px;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(249,115,22,.95), rgba(249,115,22,.75));
  color:#130a02;
  font-weight:800;
}
.nav-bottom{
  border-top:1px solid var(--border);
  padding:10px 0;
}
.nav-links{display:flex;align-items:center;gap:18px;overflow:auto;white-space:nowrap}
.nav-links a{opacity:.82}
.nav-links a.current{opacity:1;font-weight:800}
.pill{padding:8px 12px;border-radius:999px;background:rgba(148,163,184,.08);border:1px solid var(--border)}
.switch{
  margin-left:auto;display:flex;align-items:center;gap:10px;
}
.main{padding:22px 0 90px}
.section{margin-top:18px}
.section-title{display:flex;align-items:center;gap:10px;font-weight:900}
.section-title .dot{
  width:10px;height:10px;border-radius:99px;background:var(--accent)
}
.slider{
  margin-top:14px;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(15,23,42,.65);
  box-shadow: var(--shadow);
  position:relative;
  opacity:0;
  transition: opacity .25s;
}
.slider.is-ready{opacity:1}
.slides{display:flex;transition: transform .35s ease}
.slide{min-width:100%}
.slide img{width:100%;height:auto;display:block}
.slider .arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:999px;
  background: rgba(7,11,20,.6);
  border:1px solid var(--border);
  display:grid;place-items:center;
  cursor:pointer;
}
.slider .arrow.left{left:14px}
.slider .arrow.right{right:14px}
.slider .dots{
  position:absolute;bottom:12px;left:0;right:0;
  display:flex;justify-content:center;gap:8px
}
.slider .dots button{
  width:10px;height:10px;border-radius:99px;border:0;
  background: rgba(226,232,240,.35);
  cursor:pointer;
}
.slider .dots button.active{background: rgba(249,115,22,.9)}
.compilation{
  display:flex;gap:12px;overflow:auto;padding-bottom:8px;margin-top:12px
}
.compilation .item{
  width:150px;flex:0 0 auto;
  background: rgba(15,23,42,.65);
  border:1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
}
.compilation .item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.compilation .item .cap{padding:10px 10px 12px;font-weight:750;opacity:.92}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.filter{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:16px;
  background: rgba(15,23,42,.55);
  border:1px solid var(--border);
  cursor:pointer;
}
.filter.selected{outline:2px solid rgba(249,115,22,.45)}
.filter .ico{
  width:32px;height:32px;border-radius:12px;
  display:grid;place-items:center;
  background: rgba(148,163,184,.10);
}
.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:18px;
}
@media (min-width:720px){
  .grid{grid-template-columns: repeat(4,minmax(0,1fr)); gap:18px}
}
.card{
  background: rgba(15,23,42,.62);
  border:1px solid var(--border);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover{transform: translateY(-2px); border-color: rgba(249,115,22,.35)}
.card .cover{position:relative;padding:10px}
.badge{
  position:absolute;left:18px;top:18px;
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  background: rgba(7,11,20,.55);
  border:1px solid var(--border);
  font-weight:800;font-size:12px;
}
.badge.green{background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25)}
.badge.orange{background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.25)}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:18px}
.card .name,
.card-title{
  padding:12px 12px 0;
  font-weight:850;
  font-size:13px;
  line-height:1.25;
  text-align:center;
  color:var(--text);
}
.card .sub,
.card-sub{
  padding:4px 12px 14px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
.footer{
  margin-top:26px;
  border-top:1px solid var(--border);
  padding:26px 0 90px;
  background: rgba(7,11,20,.55);
}
.footer-top{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.social{display:flex;gap:10px}
.social a{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--border);background:rgba(15,23,42,.55)}
.social img{width:20px;height:20px}
.footer-text{margin-top:14px;color:var(--muted);line-height:1.45}
.footer-copy{margin-top:14px;display:flex;align-items:center;gap:10px;color:rgba(226,232,240,.85)}
.footer-copy img{width:26px;height:26px;border-radius:10px}
.footer-law{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted)}
.footer-law a{color:rgba(226,232,240,.78)}
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  border-top:1px solid var(--border);
  background: rgba(7,11,20,.85);
  backdrop-filter: blur(10px);
}
.bottom-nav .wrap{
  max-width:520px;margin:0 auto;
  display:flex;justify-content:space-around;
  padding:10px 14px;
}
.bottom-nav a{
  width:54px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  color:rgba(226,232,240,.85);
}
.bottom-nav a.active{
  background: rgba(249,115,22,.16);
  color: rgba(249,115,22,.95);
  border:1px solid rgba(249,115,22,.25);
}
body.light{
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#475569;
  background: radial-gradient(1200px 500px at 50% 0%, rgba(249,115,22,.18), transparent 55%),
              radial-gradient(900px 400px at 10% 10%, rgba(34,197,94,.12), transparent 55%),
              #f8fafc;
}
body.light .header{background: rgba(248,250,252,.72)}
body.light .slider, body.light .card, body.light .filter, body.light .compilation .item, body.light .search input, body.light .icon-btn{
  background: rgba(255,255,255,.82);
}


/* --- Generated pages helpers --- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;opacity:.8;margin:18px 0}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb .sep{opacity:.5}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:13px;margin:10px 0}
.packs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.muted{opacity:.75;font-size:14px}
.footer{padding:24px 0;opacity:.8}
.footer-copy{font-size:13px}


/* =========================
   BRIGHT THEME OVERRIDES
   ========================= */
:root{
  --bg0:#060612;
  --bg1:#0b0b1e;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.12);
  --text:#eef0ff;
  --muted:rgba(238,240,255,.70);
  --accent1:#00d4ff;
  --accent2:#7c3aed;
  --accent3:#ff005c;
  --success:#00c853;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

body{
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 20% -10%, rgba(124,58,237,.45), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,212,255,.35), transparent 55%),
    radial-gradient(1000px 650px at 50% 110%, rgba(255,0,92,.28), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}

.container{ max-width: 1200px; }

.header{
  backdrop-filter: blur(14px);
  background: rgba(10,10,30,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.logo{
  letter-spacing: .2px;
}
.logo b{
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.btn, button, .chip, .pill{
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}

.btn-primary, .btn.primary{
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(124,58,237,.35), 0 10px 26px rgba(0,212,255,.18);
}
.btn-primary:hover, .btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(124,58,237,.45), 0 18px 40px rgba(0,212,255,.22);
}

.btn-ghost, .btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover, .btn.ghost:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.card, .tile, .panel{
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.grid .item, .compilation .item, .catalog .item{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}

.grid .item:before, .compilation .item:before, .catalog .item:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(500px 200px at 20% 0%, rgba(0,212,255,.25), transparent 60%),
              radial-gradient(500px 240px at 100% 40%, rgba(124,58,237,.22), transparent 65%),
              radial-gradient(420px 220px at 30% 120%, rgba(255,0,92,.18), transparent 60%);
  opacity:.0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.grid .item:hover:before, .compilation .item:hover:before, .catalog .item:hover:before{ opacity:1; }

.grid .item:hover, .compilation .item:hover, .catalog .item:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

.compilation{
  gap: 14px;
}
.compilation .cap{
  font-weight: 700;
  background: linear-gradient(90deg, rgba(238,240,255,.98), rgba(238,240,255,.70));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.slider{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.slider .slides .slide img{
  filter: saturate(1.2) contrast(1.05);
}
.slider .arrow{
  background: rgba(10,10,30,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.slider .arrow:hover{
  transform: translateY(-1px);
  background: rgba(10,10,30,.75);
  border-color: rgba(255,255,255,.22);
}
.slider .dots button{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.18);
}
.slider .dots button.active{
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}

/* Inputs */
input[type="text"], input[type="search"], .search input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}
input::placeholder{ color: rgba(238,240,255,.55); }
input:focus{
  outline: none;
  border-color: rgba(0,212,255,.45);
  box-shadow: 0 0 0 4px rgba(0,212,255,.14);
}

/* Badges */
.badge, .tag{
  background: rgba(0,212,255,.12);
  border: 1px solid rgba(0,212,255,.22);
  color: rgba(238,240,255,.92);
}

/* Reduce motion fallback */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* -----------------------------
   NexPay-like checkout widgets
------------------------------ */

.block-checkout{ margin-top: 18px; }
.block__head{ margin-bottom: 12px; }
.block__title{ font-size: 18px; margin: 0 0 6px; }
.block__subtitle{ margin: 0; opacity: .85; }

.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 14px;
}
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
}

.form-field{ display: flex; flex-direction: column; gap: 8px; }
.form-label{ font-size: 13px; opacity: .9; }

.checkout-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.btn-primary, .btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

.btn-primary{
  background: linear-gradient(135deg, rgba(0,212,255,.95), rgba(124,92,255,.95));
  border: 1px solid rgba(255,255,255,.14);
  color: #0b1020;
}
.btn-primary:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.btn-secondary{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}

.checkout-summary{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  margin: 12px 0 14px;
}
.summary__label{ opacity: .8; font-size: 13px; margin-bottom: 4px; }
.summary__value{ font-weight: 800; }

.hint{ margin-top: 12px; opacity: .8; font-size: 13px; }

.game-packages{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 900px){
  .game-packages{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px){
  .game-packages{ grid-template-columns: 1fr; }
}

.package{
  position: relative;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.package:hover{ transform: translateY(-1px); }
.package__name{ font-weight: 800; margin-bottom: 6px; }
.package__meta{ opacity: .85; font-size: 13px; }
.package__price{ margin-top: 10px; font-weight: 900; }

.package--selected{
  border-color: rgba(0,212,255,.55);
  background: rgba(0,212,255,.08);
}
.package__badge{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,212,255,.14);
  border: 1px solid rgba(0,212,255,.28);
  font-size: 12px;
  font-weight: 800;
}

.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.modal.is-open{ display: flex; }
.modal__card{
  width: min(520px, 100%);
  border-radius: 18px;
  padding: 16px;
  background: rgba(15,22,45,.95);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.modal__title{ font-size: 18px; font-weight: 900; margin: 0 0 8px; }
.modal__text{ margin: 0 0 14px; opacity: .9; }
.modal__actions{ display:flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }



/* --- ICONS (inline SVG masks) --- */
:root{--icon-diamond:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M12%202%204%209l8%2013%208-13-8-7zm0%203%205%204H7l5-4z%27/%3E%3C/svg%3E");}
.i{display:inline-block;inline-size:1em;block-size:1em;vertical-align:-0.14em;background:currentColor;--i:none;-webkit-mask:var(--i) no-repeat center/contain;mask:var(--i) no-repeat center/contain;opacity:.95}
.i-circle-half{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%200%200%200%2020%27%20/%3E%3Cpath%20d%3D%27M12%202a10%2010%200%200%201%200%2020%27%20opacity%3D%27.35%27/%3E%3C/svg%3E");}
.i-shield{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M12%202%204%205v6c0%205.25%203.44%2010.18%208%2011%204.56-.82%208-5.75%208-11V5l-8-3z%27/%3E%3C/svg%3E");}
.i-check{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E");}
.i-zip{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M8%202h8v2H8V2zm0%204h8v2H8V6zm0%204h8v2H8v-2zm0%204h5v2H8v-2zm7%200h1v8h-1v-8z%27/%3E%3Cpath%20d%3D%27M6%202h1v20H6V2zm11%200h1v20h-1V2z%27/%3E%3C/svg%3E");}
.i-info{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27/%3E%3Cpath%20d%3D%27M12%2010v6%27/%3E%3Cpath%20d%3D%27M12%207h.01%27/%3E%3C/svg%3E");}
.i-diamond{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M12%202%204%209l8%2013%208-13-8-7zm0%203%205%204H7l5-4z%27/%3E%3C/svg%3E");}


/* --- DONATION PAGE POLISH --- */
.container-good-limited{max-width:1024px;margin-inline:auto}
.good-header{display:flex;gap:16px;align-items:center;padding:18px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.good-header-cover img{border-radius:16px;display:block;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.good-header-data h1{font-size:28px;line-height:1.15;margin:0 0 10px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(120,130,255,.12);border:1px solid rgba(120,130,255,.28);font-weight:600}
.good-banner{margin-top:14px;display:flex;gap:12px;align-items:flex-start;padding:14px 14px;border-radius:16px;background:rgba(255,180,60,.10);border:1px solid rgba(255,180,60,.28)}
.good-banner__icon{margin-top:1px;color:rgba(255,200,90,.95)}
.good-banner__text{color:rgba(255,255,255,.9);line-height:1.35}
.good-advantages{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.good-advantages_item{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-weight:500}
.block-good .packs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.package{
  position:relative;
  text-align:left;
  padding:14px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  color:var(--text);
}
.package:hover{transform:translateY(-1px);border-color:rgba(120,130,255,.35);background:rgba(120,130,255,.08)}
.package[aria-pressed="true"]{border-color:rgba(120,130,255,.55);background:rgba(120,130,255,.14)}

/* Pack layout with big icon (used on game/service pages) */
.pack{display:flex;align-items:center;gap:12px}
.pack .pimg{width:54px;height:54px;flex:0 0 54px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;overflow:hidden}
.pack .pimg img{width:100%;height:100%;object-fit:cover}
.pack .pmeta{display:block;min-width:0}
.pack .ptitle{font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pack .pprice{margin-top:6px;font-weight:900;font-size:16px}
.pack .pnote{margin-top:2px;opacity:.65;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.package__title{font-weight:700;display:flex;align-items:center;gap:8px}
.package__icon{width:18px;height:18px;object-fit:contain;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.package__title:before{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  background:rgba(120,130,255,.95);
  --i:var(--icon-diamond);
  -webkit-mask:var(--i) no-repeat center/contain;
  mask:var(--i) no-repeat center/contain;
}
.package__meta{margin-top:10px;display:flex;align-items:center;justify-content:space-between}
.package__price{font-size:18px;font-weight:800}
.checkout{margin-top:10px;padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.checkout__actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;border-radius:14px;padding:12px 14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:linear-gradient(180deg,rgba(120,130,255,1),rgba(90,100,235,1));color:#fff;box-shadow:0 10px 24px rgba(90,100,235,.25)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.9)}
.checkout__hint{margin-top:10px;color:rgba(255,255,255,.65)}

/* Checkout form fields (matches the HTML in game pages) */
.form-grid{display:grid;gap:12px}
@media (min-width:740px){.form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:12.5px;color:var(--muted)}
.field__req{color:var(--accent);margin-left:4px}
.field__input{
  width:100%;
  height:42px;
  padding:0 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  outline:none;
}
.field__input::placeholder{color:rgba(255,255,255,.55)}
html[data-theme="light"] .field__input::placeholder,
html[data-bs-theme="light"] .field__input::placeholder{color:rgba(0,0,0,.45)}
.field__input:focus{border-color:rgba(249,115,22,.55);box-shadow:0 0 0 4px rgba(249,115,22,.16)}
@media (max-width:720px){.good-header{flex-direction:column;align-items:flex-start}.good-header-cover{align-self:center}}

/* === MOBILE BOTTOM NAV FIX === */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: min(360px, calc(100vw - 28px));
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.bottom-nav .wrap{
  display:flex;
  width:100%;
  gap:14px;
  justify-content:space-between;
  margin:0 auto;
}
@media (min-width:420px){
  .bottom-nav .wrap{max-width:380px;gap:18px}
}

/* === LIGHT THEME FIX === */
[data-theme="light"]{
  /* Ensure all used variables are overridden in light mode */
  --bg:#f3f4f7;
  --bg0:#f5f6fa;
  --bg1:#ffffff;
  --card:#ffffff;
  --card2:#ffffff;
  --stroke:rgba(15,23,42,.12);
  --text:#0b1020;
  --muted:#475569;
  --shadow:0 18px 40px rgba(15,23,42,.12);
}
[data-theme="light"] body{
  background:var(--bg0);
  color:var(--text);
}
[data-theme="light"] .header,
[data-theme="light"] .nav-bottom{
  background:#ffffff;
  color:#111;
  border-bottom:1px solid #e5e7eb;
}
[data-theme="light"] .footer{
  background:#f1f2f6;
  color:#111;
}
[data-theme="light"] .section-title,
[data-theme="light"] .cap{
  color:#111;
}

/* === CARD + COMPILATION VISIBILITY === */
.compilation .cap,
.card-title,
.card-sub{
  color: var(--text);
}

/* === LOADER (smooth, non-intrusive) === */
#pageLoader{
  position:fixed;
  inset:0;
  background:rgba(11,13,18,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
html.is-loading #pageLoader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#pageLoader .loader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
#pageLoader .spinner{
  width:42px;height:42px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.8);
  animation:spin .7s linear infinite;
}
#pageLoader .loader-text{
  color:rgba(255,255,255,.75);
  font-weight:600;
  letter-spacing:.2px;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion: reduce){
  #pageLoader{transition:none}
  #pageLoader .spinner{animation:none}
}

/* Grid tuning */
.grid{
  /* Mobile: 2 cards per row */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

@media (min-width:720px){
  /* Desktop: 4 cards per row */
  .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.card{
  padding:8px;
}



/* === Micro animations === */
.card,
.panel,
.item{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,
.panel:hover,
.item:hover{
  transform: translateY(-2px);
}

[data-anim="fade"]{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
html.is-ready [data-anim="fade"]{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .card,.panel,.item,[data-anim="fade"]{transition:none;transform:none}
}

/* === Cart UI === */
.cart-list{display:grid;gap:12px}
.cart-item{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.02)}
.cart-item__cover{width:56px;height:56px;border-radius:16px;object-fit:cover;border:1px solid var(--border);background:rgba(255,255,255,.04);flex:0 0 auto}
.cart-item__meta{flex:1;min-width:0}
.cart-item__title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item__sub{margin-top:2px;color:var(--muted);display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item__icon{width:18px;height:18px;object-fit:contain;border-radius:6px;flex:0 0 auto}
.cart-item__right{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.cart-item__price{font-weight:900}

/* === Profile UI === */
.profile-wrap{max-width:980px;margin:0 auto}
.profile-grid{display:grid;gap:14px}
@media (min-width:900px){.profile-grid{grid-template-columns:360px 1fr;gap:16px;align-items:start}}
.profile-side,.profile-main{padding:16px}
.profile-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.avatar{width:64px;height:64px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.avatar.avatar-lg{width:76px;height:76px;border-radius:22px}
.avatar img{width:100%;height:100%;object-fit:cover}
.profile-title{font-weight:800;font-size:18px;letter-spacing:-.01em}
.profile-sub{color:var(--muted);margin-top:3px;font-size:13px;word-break:break-word}

.balance-card{border:1px solid var(--border);border-radius:16px;padding:14px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.balance-value{font-size:28px;font-weight:900;margin-top:6px;letter-spacing:-.02em}
.profile-mini-hint{margin-top:12px;border:1px solid var(--border);border-radius:16px;padding:14px;background:rgba(255,255,255,.02)}

.settings-section{border:1px solid var(--border);border-radius:16px;padding:14px;background:rgba(255,255,255,.02)}
.settings-section + .settings-section{margin-top:12px}
.settings-section.danger{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18)}
.settings-title{font-weight:800;letter-spacing:-.01em}
.settings-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.settings-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}

/* Toast / snackbar */
.toast-host{position:fixed;left:12px;right:12px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:520px;margin:0 auto}
@media (min-width:720px){.toast-host{left:auto;right:18px;bottom:18px;max-width:420px;margin:0}}
.toast{pointer-events:none;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(20,20,24,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.35);font-weight:600;transform:translateY(10px);opacity:0;transition:opacity .2s ease,transform .2s ease}
.toast.is-show{opacity:1;transform:translateY(0)}
.toast.is-ok{border-color:rgba(34,197,94,.28)}
.toast.is-err{border-color:rgba(239,68,68,.35)}
.row-inline{display:flex;gap:10px;align-items:center}
.row-inline input{flex:1}
.divider{height:1px;background:var(--border);margin:4px 0}
.hint{color:var(--muted);font-size:12px;margin-top:6px}


/* Reviews */
.block-reviews .reviews-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.review-form{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
}
.reviews-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.review{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
}
.review__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}
.review__name{ font-weight:800; }
.review__rating{ letter-spacing:1px; opacity:.95; }
.review__text{ color: rgba(226,232,240,.92); line-height:1.45; white-space:pre-wrap; }
.review__time{ margin-top:10px; font-size:12px; }

/* Mobile header tweaks */
@media (max-width: 560px){
  .nav-actions a.icon-btn{ display:none; } /* hide cart/profile icons in header on mobile */
  .brand{ min-width: 0; }
  .search{ flex:1; min-width:0; max-width:100%; margin-left:10px; }
  .search input{ padding-right: 30px; }
  .nav-top{ gap:10px; }
  .nav-actions .btn{ padding:10px 12px; }
}

/* Desktop: hide profile icon button in header (keep only cart + login/profile name) */
@media (min-width: 561px){
  .nav-actions a.icon-btn[href="/profile.html"]{ display:none; }
}

/* Desktop: hide redundant profile icon button in header */
@media (min-width: 561px){
  .nav-actions a.icon-btn[href="/profile.html"]{ display:none; }
}

/* Compilation & reviews responsive */
@media (max-width: 720px){
  .block-reviews .reviews-grid{ grid-template-columns: 1fr; }
}

/* Bottom nav centering */
.bottom-nav .wrap{
  width:100%;
  box-sizing:border-box;
  justify-content:space-evenly;
}


/* Profile: nicer inputs */
.money-input{ position:relative; }
.money-input__prefix{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  color: rgba(226,232,240,.9);
  font-weight:700;
  pointer-events:none;
}
.money-input__field{ padding-left:46px !important; }

.file-input{
  padding:12px 12px !important;
  line-height:1.1;
}
.file-input::file-selector-button{
  margin-right:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.9);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.file-input::file-selector-button:hover{
  background: rgba(255,255,255,.09);
}

/* Cards list */
.cards-list{ display:flex; flex-direction:column; gap:10px; }
.card-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(15,23,42,.55);
}
.card-item__left{ display:flex; flex-direction:column; gap:2px; }
.card-item__brand{ font-weight:800; }
.card-item__meta{ font-size:13px; opacity:.8; }
.card-item__actions{ display:flex; gap:10px; }


/* ===== NexPay tweaks (mobile) ===== */
@media (max-width: 560px){
  /* compilation: small boxes in a row */
  #homeCompilation.compilation{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 118px;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  #homeCompilation.compilation .item{
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
  }
  #homeCompilation.compilation img{
    width: 100%;
    height: 86px;
    object-fit: cover;
    display:block;
  }
  #homeCompilation.compilation .cap{
    font-size: 12px;
    line-height: 1.15;
    padding: 8px 8px 10px;
  }

  /* remove top padding on main for mobile */
  .main{ padding-top: 0 !important; }

  /* hide slider arrows on mobile */
  .slider .arrow{ display:none !important; }
}

.filter-ico{width:20px;height:20px;object-fit:contain;display:block}


/* v10 fixes: compilation layout + mobile main padding */
@media (min-width: 900px){
  .compilation{
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  .compilation .item{
    width: auto;
    flex: initial;
  }
  .compilation .item img{aspect-ratio: 1 / 1;}
}

@media (max-width: 640px){
  .main{padding: 0 0 90px !important;}
  .slider .arrow{display:none !important;}
  /* make compilation small boxes in a row */
  .compilation{
    gap:10px;
  }
  .compilation .item{
    width: 110px;
    border-radius: 16px;
  }
  .compilation .item .cap{
    font-size: 12px;
    padding: 8px 8px 10px;
    line-height: 1.2;
  }
}


/* Reviews page */
.review-row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.review-row:last-child{border-bottom:0}
.review-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.review-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.review-who{font-weight:800}
.review-stars{letter-spacing:1px;font-size:14px;opacity:.9}
.review-prod{margin-top:6px}
.review-link{font-weight:700;text-decoration:none}
.review-link:hover{text-decoration:underline}
.review-text{margin-top:8px;white-space:pre-wrap;line-height:1.35}

/* Checkout list */
.checkout-list{display:flex;flex-direction:column;gap:10px}
.checkout-item{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.ci-cover{width:44px;height:44px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:rgba(255,255,255,.04)}
.ci-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ci-main{flex:1 1 auto;min-width:0}
.ci-title{font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-sum{font-weight:800;white-space:nowrap}

/* Package icon (big like reference) */
.package{display:flex;gap:12px;align-items:center;text-align:left}
.package .package__icon{width:56px;height:56px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.05);flex:0 0 auto}
.package__meta{display:flex;flex-direction:column;gap:2px}
.package__title{font-weight:800}
.package__price{font-weight:800}

/* Mobile header search sizing */
@media (max-width:720px){
  .nav-top{gap:10px}
  .search{flex:1 1 auto;min-width:0}
  .search input{width:100%}
}

#hotSlider{opacity:0;transition:opacity .25s;}

/* === NexPay UI fixes (v14) === */

@media (max-width: 720px){
  /* slider arrows hidden on mobile; swipe still works */
  .slider .arrow{ display:none !important; }

  /* stretch search on mobile to the NexPay title */
  .nav-top{ gap:10px; }
  .nav-top .brand{ flex:0 0 auto; }
  .nav-top .search{ flex:1 1 auto; min-width:0; }
  .nav-top .search input{ width:100%; }
}

@media (min-width: 721px){
  /* hide duplicate profile icon in desktop header */
  .nav-actions a.icon-btn[href="/profile.html"]{ display:none !important; }
}

/* Reviews page */
.reviews-all{ display:grid; gap:12px; }
.review-card{ padding:14px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.review-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.review-card__name{ font-weight:800; }
.review-card__product{ font-size:13px; }
.review-card__rating{ font-weight:800; letter-spacing:1px; }
.review-card__text{ margin-top:10px; line-height:1.35; white-space:pre-wrap; }
.review-card__time{ margin-top:10px; font-size:12px; }

/* Blog */
.posts{ display:grid; gap:12px; }
.post-card{ display:flex; gap:12px; padding:14px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.post-card__cover{ width:92px; height:70px; border-radius:12px; overflow:hidden; flex:0 0 auto; background:rgba(255,255,255,.06); }
.post-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card__title{ font-weight:800; line-height:1.15; }
.post-card__meta{ margin-top:6px; font-size:12px; }
.post-card__text{ margin-top:8px; line-height:1.35; opacity:.92; }

/* Packs (game page) */
.pack{ width:100%; display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); cursor:pointer; text-align:left; }
.pack:hover{ background:rgba(255,255,255,.06); }
.pack .pimg{ width:60px; height:60px; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.06); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.pack .pimg img{ width:100%; height:100%; object-fit:cover; }
.pack .pmeta{ flex:1; min-width:0; }
.pack .ptitle{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pack .pprice{ margin-top:4px; font-weight:800; }
.pack .pnote{ margin-top:4px; font-size:12px; }

/* Compilation (home новинки) */
.compilation{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width: 721px){
  .compilation{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
.review-card__text{ margin-top:8px; line-height:1.35; }
.review-card__time{ margin-top:10px; font-size:13px; }

/* Blog */
.posts-grid{ display:grid; gap:12px; }
.post-card{ overflow:hidden; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.post-card__cover{ aspect-ratio: 16/9; width:100%; object-fit:cover; display:block; }
.post-card__body{ padding:14px; }
.post-card__title{ font-weight:900; margin:0 0 6px; }
.post-card__meta{ font-size:13px; margin-bottom:10px; }
.post-card__text{ line-height:1.4; }

/* Packs (bigger icons like sample) */
.pack{ width:100%; display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); text-align:left; }
.pack:hover{ background:rgba(255,255,255,.05); }
.pack .pimg{ width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
.pack .pimg img{ width:44px; height:44px; object-fit:contain; }
.pack .pmeta{ flex:1 1 auto; min-width:0; }
.pack .ptitle{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pack .pprice{ font-weight:800; margin-top:2px; }
.pack .pnote{ font-size:13px; margin-top:2px; }

/* Checkout card modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:18px; z-index:9999; }
.modal.is-open{ display:flex; }
.modal__panel{ width:min(520px, 100%); border-radius:22px; background:rgba(25,25,28,.95); border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 60px rgba(0,0,0,.55); padding:16px; }
.modal__title{ font-weight:900; font-size:18px; margin:0 0 8px; }
.modal__close{ position:absolute; right:22px; top:18px; }

/* --- NexPay patches (Jan 2026) --- */

/* prevent horizontal scroll on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* mobile search alignment */
@media (max-width: 640px) {
  .nav-top { gap: 10px; }
  .brand { flex: 0 0 auto; }
  .search { flex: 1 1 auto; min-width: 0; }
  .search input { width: 100%; }
}

/* compact top navigation (desktop) */
.nav-bottom { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-bottom .nav-links { gap: 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.nav-bottom .nav-links::-webkit-scrollbar { display: none; }
.nav-bottom .nav-links a { font-size: 13px; padding: 6px 10px; }
.nav-bottom .switch { margin-left: auto; }

/* hide extra profile icon on desktop */
@media (min-width: 900px) {
  .nav-actions a.icon-btn[aria-label="Профиль"] { display: none; }
}

/* home compilation: image-only mini boxes */
.compilation { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.compilation .item { display: block; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); aspect-ratio: 1 / 1; }
.compilation .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compilation .cap { display: none !important; }
@media (max-width: 720px) {
  .compilation { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* catalog tags/badges */
.good-cover-wrapper{ position: relative; border-radius: 16px; overflow: hidden; }
.instant-delivery-zip{ position:absolute; left: 10px; top: 10px; z-index: 2; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 8px; }
.good-cur-badge{ position:absolute; right: 10px; top: 10px; z-index:2; display:flex; align-items:center; gap:6px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.good-cur-badge img{ width: 16px; height: 16px; border-radius: 4px; }
.i.i-zip{ display:block; width: 14px; height: 14px; background: currentColor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 2px;
  clip-path: polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%);
  opacity: .9;
}

/* checkout modal */
.np-modal{ position: fixed; inset: 0; background: rgba(0,0,0,.6); display:none; align-items: center; justify-content: center; padding: 14px; z-index: 9999; }
.np-modal.is-open{ display:flex; }
.np-modal__box{ width: min(720px, 100%); max-height: 90vh; overflow: auto; border-radius: 18px; background: rgba(18,18,20,.96); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.np-modal__head{ display:flex; align-items:center; justify-content: space-between; padding: 14px 14px 0; }
.np-modal__close{ background: transparent; border: 0; color: inherit; cursor: pointer; padding: 10px; border-radius: 12px; }

/* cart fit on mobile */
@media (max-width: 640px) {
  .cart-item, .checkout-item { gap: 10px; }
  .cart-item .ci-main, .checkout-item .ci-main { min-width: 0; }
  .ci-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- FIXES v17 --- */
.section{margin-top:18px;margin-bottom:18px}
.compilation{padding-bottom:0;align-items:flex-start}
.compilation .item{display:block}
.compilation .item img{display:block}
/* tighten nav bottom a bit */
.nav-bottom .nav-links{gap:14px}



/* === FIX: home compilation spacing & wrapping === */
.compilation{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.compilation .item{
  display:block;
  width:72px;
  height:72px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.compilation .item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.container.section{ overflow: visible; }

/* --- FIXES (stable v18 patches) --- */
/* Prevent "Новинки" thumbnails from stacking */
.compilation{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px !important;
}
.compilation .item{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  aspect-ratio: 1/1;
}
.compilation .item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Catalog skeleton while JS renders */
.grid-skeleton{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
}
.sk-card{
  height: 210px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
.sk-card::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: skShimmer 1.2s infinite;
}
@keyframes skShimmer{to{transform: translateX(100%);}}

/* Hide slider arrows on touch screens */
@media (max-width: 768px){
  .slider .arrow{display:none !important;}
}

/* Hide profile icon in top header on desktop (mobile uses bottom nav) */
@media (min-width: 900px){
  .nav-actions a[aria-label="Профиль"]{display:none !important;}
}

/* ===== Search dropdown (header search) ===== */
.search{position:relative}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.35);max-height:320px;overflow:auto;z-index:60;display:none}
.search-results.show{display:block}
.search-item{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer}
.search-item:hover{background:rgba(255,255,255,.04)}
.search-item img{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.search-item .name{font-weight:700;line-height:1.1}
.search-item .meta{font-size:12px;opacity:.75;margin-top:2px}


/* --- Новинки: горизонтальная прокрутка + квадратные карточки (4:4) --- */
/*
  ВАЖНО: просили 4:4 (квадрат), и чтобы карточки/картинки занимали 100% высоты.
  Высоту блока задаём тут, а внутри элементы растягиваются на 100%.
*/
.compilation-swiper{position:relative; height:108px;}

.compilation-swiper .compilation{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:2px 2px 8px !important;
}

/* hide scrollbar */
.compilation-swiper .compilation::-webkit-scrollbar{height:0;width:0;}
.compilation-swiper .compilation{scrollbar-width:none;}

.compilation-swiper .compilation > a.item{
  flex:0 0 108px;
  width:108px;
  height:100%;
  padding:0 !important;
  aspect-ratio:1 / 1;
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
}

.compilation-swiper .compilation > a.item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* просьба: явно растягивать по высоте для блока #homeCompilation */
#homeCompilation.compilation .item{height:100%;}
#homeCompilation.compilation img{height:100%;}

/* совместимость: конкретно для id homeCompilation (как просили) */
#homeCompilation.compilation .item{height:100%;}
#homeCompilation.compilation img{height:100%;}

/* Mobile: скролл пальцем, стрелки скрываем */
@media (max-width: 768px){
  .compilation-swiper .comp-btn{display:none !important;}
  .compilation-swiper{margin-bottom:5px !important; position:relative;}
}

/* Desktop: больше размер, показываем стрелки */
@media (min-width: 769px){
  .compilation-swiper{height:170px; margin-bottom:0px !important;}
  .compilation-swiper .compilation > a.item{flex-basis:140px;width:140px;border-radius:16px; margin-bottom:10px !important;}
  .compilation-swiper .comp-btn{display:flex !important;align-items:center;justify-content:center; margin-bottom:10px !important;}
  .compilation-swiper { margin-bottom:10px !important; position:relative;}
}


/* ===== NexPay: Compilation (Новинки) fixes ===== */

/* Remove arrows (we scroll/drag instead) */
.compilation-swiper{margin-bottom:60px; position:relative;}
.compilation-swiper .comp-btn{display:none !important;}

/* Horizontal scroll + snap, square items */
.compilation-swiper .compilation{
  display:flex !important;
  align-items:stretch;
  gap:10px !important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding:12px;
  padding-bottom:6px; /* prevents shadow cropping */
}

/* scrollbar – subtle */
.compilation-swiper .compilation::-webkit-scrollbar{height:6px;}
.compilation-swiper .compilation::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;}
.compilation-swiper .compilation::-webkit-scrollbar-track{background:transparent;}

/* Item box (square) */
.compilation-swiper .compilation > a.item,
#homeCompilation.compilation .item{
  flex:0 0 auto;
  width:132px;
  aspect-ratio:1/1;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  scroll-snap-align:start;
}

.compilation-swiper .compilation > a.item img,
#homeCompilation.compilation img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Mobile: slightly smaller tiles + no "big" gaps */
@media (max-width: 640px){
  .compilation-swiper .compilation{
    gap:8px !important;
    scroll-padding:10px;
  }
  .compilation-swiper .compilation > a.item,
  #homeCompilation.compilation .item{
    width:108px;
    border-radius:14px;
  }
}

/* Desktop: make the row fill the section width nicely */
@media (min-width: 900px){
  .compilation-swiper .compilation{
    gap:12px !important;
  }
  .compilation-swiper .compilation > a.item,
  #homeCompilation.compilation .item{
    width:168px;
    border-radius:18px;
  }
}