/* =======================================================================
   NextTier – FULL standalone CSS for Game Page
   (no dependency on main_page or previous CSS)
   Date: 2025‑07‑02
   ======================================================================= */

/* ---------- Imports & Reset ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#11131a;color:#e8e8e8;line-height:1.55;
}

/* ---------- Theme variables ---------- */
:root{
  --nt-primary:#ff9944;
  --nt-primary-hover:#ffb366;
  --nt-primary-dark:#cc6c1a;
  --nt-bg:#11131a;
  --nt-bg-light:#0b101d;
  --nt-border:rgba(255,255,255,.08);
  --nt-card-bg:#1b1e28;
  --nt-text:#e8e8e8;
  --nt-text-dim:#b0b3c7;
  --nt-radius:8px;
  --nt-radius-lg:12px;
  --nt-shadow:0 4px 12px rgba(0,0,0,.5);
  --nt-transition:.24s cubic-bezier(.25,.8,.25,1);
}

/* ---------- Utilities ---------- */
.wrap{width:min(92vw,1400px);margin-inline:auto}
.text-center{text-align:center}

/* fade-in sections */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}

/* ---------- Layout ---------- */
main > section{
  padding-block:4rem;border-bottom:1px solid var(--nt-border);
  animation:fadeUp .8s ease-out both;
}
main > section:last-of-type{border-bottom:none;}
@media(max-width:600px){main > section{padding-block:3rem;}}

/* ---------- Hero ---------- */
.main-hero{
  background:url('/images/hero-bg.webp') center/cover no-repeat;
  text-align:center;padding:5rem 0 4rem;
}
.hero-inner{max-width:820px;margin-inline:auto}
.hero-title{
  font-size:clamp(1.9rem,4vw,3.2rem);font-weight:700;line-height:1.15;
}
.hero-title-gradient{
  background:linear-gradient(90deg,#78a8ff 0%,#55e0ff 30%,#b385ff 60%,#ff59d2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:var(--nt-text-dim);margin-top:.9rem}

/* ---------- Game Page Layout ---------- */
.game-container{
  display:grid;gap:2rem;grid-template-columns:280px 1fr;
}
@media(max-width:1024px){.game-container{grid-template-columns:1fr;}}
/* ---------- Sidebar ---------- */
.sidebar{
  position:sticky;top:90px;align-self:start;
  background:var(--nt-bg-light);padding:1.6rem 1.3rem;
  border:1px solid var(--nt-border);border-radius:var(--nt-radius-lg);
  max-height:calc(100vh - 120px);overflow:auto;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:4px}

.game-image-wrapper{text-align:center;margin-bottom:1.2rem}
.game-logo{width:160px;height:auto;object-fit:contain}

/* Categories & Subcats */
.menu .category{
  padding:.55rem .5rem;border-radius:6px;font-weight:600;
  color:var(--nt-text);cursor:pointer;
  display:flex;align-items:center;gap:.4rem;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.menu .category:hover{background:rgba(255,255,255,.06);}
.menu .category.active{background:var(--nt-primary-dark);}
.subcategory-list{display:none;padding-left:1.1rem;margin:.5rem 0 .8rem}
.subcategory-list.visible{display:block}
.subcategory{
  padding:.4rem .35rem;border-radius:4px;color:var(--nt-text-dim);
  cursor:pointer;display:flex;align-items:center;gap:.35rem;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.subcategory:hover{background:rgba(255,255,255,.05);color:#fff;}
.subcategory.active{background:var(--nt-primary);color:#fff;}

/* ---------- Page Title / Description ---------- */
.page-title-block h1{
  font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:700;margin-bottom:.6rem;
}
.page-title-block p{font-size:1.05rem;color:var(--nt-text-dim);max-width:720px}

/* ---------- Entity descriptions ---------- */
.entity-description,
.entity-footer-description{margin-top:1.5rem;font-size:1rem;color:var(--nt-text-dim);}
.entity-description img,
.entity-footer-description img{max-width:100%;display:block;margin:1rem auto}

/* ---------- Custom order banner ---------- */
.custom-order-banner{
  margin:2.5rem 0;background:linear-gradient(135deg,#1e2231 0%,#262b3d 100%);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--nt-radius-lg);
  padding:1.8rem 1.6rem;display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap;
}
.custom-order-banner__title{font-size:1.35rem;font-weight:700;margin-bottom:.35rem}
.custom-order-banner__subtitle{font-size:1rem;color:var(--nt-text-dim);}
.custom-order-btn{
  background:var(--nt-primary);border:none;border-radius:var(--nt-radius);
  padding:.75rem 1.6rem;font-weight:600;color:#fff;cursor:pointer;
  transition:background var(--nt-transition);
}
.custom-order-btn:hover{background:var(--nt-primary-hover);}

/* ---------- Product Grid (Offers) ---------- */
.product-grid{
  margin-top:2rem;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
@media(min-width:2000px){.product-grid{gap:2rem;}}
.coming-soon{font-size:1.2rem;color:var(--nt-text-dim);margin-top:2rem;text-align:center}

/* Product Card */
.product-card{
  background:var(--nt-card-bg);border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .28s ease,box-shadow .28s ease;
  cursor:pointer;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--nt-shadow);}
.product-img-box{position:relative;aspect-ratio:16/9;overflow:hidden}
.product-img-box img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.product-card:hover .product-img-box img{transform:scale(1.06);}
.product-content{padding:1rem 1rem 1.3rem;flex:1;display:flex;flex-direction:column;gap:.55rem}
.product-title{font-size:1rem;font-weight:600;color:#fff;flex:0}
.product-desc{font-size:.9rem;color:var(--nt-text-dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.product-price{margin-top:auto;font-weight:700;font-size:1.1rem;color:var(--nt-primary)}

/* ---------- Reviews (optional, if reused) ---------- */
.reviews-section{position:relative;overflow:hidden}
.reviews-section::before{
  content:"";position:absolute;inset:0;
  background:url("/img/noise.png");opacity:.15;pointer-events:none;
}
.reviews-slider{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:.5rem}
.review-card{
  min-width:300px;max-width:320px;background:var(--nt-card-bg);
  border:1px solid var(--nt-border);border-radius:var(--nt-radius-lg);
  padding:1.4rem 1.1rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;
  transition:transform .28s ease;
}
.review-card:hover{transform:translateY(-5px);}
.review-card .stars{color:#ffd43b;font-size:1rem;}
.review-card h4{font-size:.9rem;font-weight:600;color:#fff;}
.review-card h3{font-size:1rem;font-weight:600;color:#fff;}
.review-card p{font-size:.9rem;color:var(--nt-text-dim);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}


/* === Global product-card & shared components (from main page) === */
 main.css === */

/* ======================================================================
   NextTier – FULL consolidated styles for main page
   Includes product cards rendered via JS (class .product-card-new et al.)
   Built: 2025‑07‑02
   ====================================================================== */

/* 0. Imports & reset --------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
     background:#11131a;color:#e8e8e8;line-height:1.55;min-height:100vh}

/* 1. Theme variables --------------------------------------------------- */
:root{
  --nt-primary:#ff9944;
  --nt-primary-hover:#ffb366;
  --nt-primary-dark:#cc6c1a;
  --nt-bg:#11131a;
  --nt-bg-light:#1a1d26;
  --nt-border:rgba(255,255,255,.08);
  --nt-card-bg:#1b1e28;
  --nt-text:#e8e8e8;
  --nt-text-dim:#b0b3c7;
  --nt-radius:8px;
  --nt-radius-lg:12px;
  --nt-shadow:0 4px 10px rgba(0,0,0,.45);
  --nt-transition:.24s cubic-bezier(.25,.8,.25,1);
}

/* 2. Utilities --------------------------------------------------------- */
.container{width:min(92vw,1200px);margin-inline:auto}
.text-center{text-align:center}

/* 3. Offers grid ------------------------------------------------------- */
.offers-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-top:1.6rem;
}
@media(max-width:600px){.offers-grid{gap:1.1rem}}

/* 4. Product card ------------------------------------------------------ */
.product-card-new{
  background:var(--nt-card-bg);
  border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--nt-transition),box-shadow var(--nt-transition);
  cursor:pointer;
}
.product-card-new:hover{
  transform:translateY(-4px);
  box-shadow:var(--nt-shadow);
}
/* image box */
.product-img-box{position:relative;aspect-ratio:16/9;overflow:hidden}
.product-img-box img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease}
.product-card-new:hover .product-img-box img{transform:scale(1.06)}

/* "from price" overlay */
.product-price-from-overlay{
  position:absolute;bottom:.6rem;left:.6rem;
  background:rgba(17,19,26,.82);
  padding:.35rem .55rem;
  font-size:.85rem;
  border-radius:6px;
  color:#fff;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
/* badge */
.product-badge-new{
  position:absolute;top:.6rem;left:.6rem;
  padding:.35rem .6rem;
  font-size:.75rem;
  font-weight:600;
  border-radius:6px;
  background:var(--nt-primary);
  color:#fff;
  text-transform:uppercase;
}
.badge-hot{background:#e63946}
.badge-best-seller{background:#40c057}
.badge-new{background:#3b5bdb}
/* add dynamic hue rotate for more badges */
[class^="badge-"]:not(.badge-hot):not(.badge-best-seller):not(.badge-new){
  background:var(--nt-primary);
}
/* product content */
.product-content{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1rem 1.3rem;flex:1}
.product-title{font-size:1.05rem;font-weight:600;color:#fff}
.product-desc{font-size:.9rem;color:var(--nt-text-dim);max-height:72px;overflow:hidden}
.order-btn{
  margin-top:auto;
  align-self:flex-start;
  padding:.55rem 1.1rem;
  background:var(--nt-primary);
  border:none;
  border-radius:var(--nt-radius);
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:background var(--nt-transition);
}
.order-btn:hover{background:var(--nt-primary-hover)}

/* 5. Filter bar (scroll) ---------------------------------------------- */
.game-filter-buttons-scroll{position:relative;margin-top:1rem}
.game-filter-buttons-outer{overflow-x:auto;scroll-behavior:smooth}
.game-filter-buttons{display:flex;gap:.6rem;padding-block:.5rem}
.game-filter-buttons::-webkit-scrollbar{display:none}
.filter-btn{
  flex:0 0 auto;
  padding:.5rem 1.1rem;
  border:1px solid var(--nt-border);
  background:var(--nt-bg-light);
  border-radius:50px;font-size:.9rem;
  color:var(--nt-text-dim);cursor:pointer;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.filter-btn.active,
.filter-btn:hover{background:var(--nt-primary);color:#fff;border-color:transparent}

/* scroll arrows */
.game-filter-arrow{
  position:absolute;top:50%;translate:0 -50%;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--nt-border);
  background:linear-gradient(145deg,#1d202a,#11131a);
  display:grid;place-items:center;
  color:#fff;font-size:1.1rem;cursor:pointer;
  transition:opacity var(--nt-transition);
  opacity:.85;
}
.game-filter-arrow.disabled{opacity:.15;pointer-events:none}
.game-filter-arrow.left{left:-18px}
.game-filter-arrow.right{right:-18px}
@media(min-width:1024px){.game-filter-arrow{display:none}}

/* 6. Why‑block quick grid --------------------------------------------- */
.why-grid{display:grid;gap:1rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.why-block{background:var(--nt-card-bg);padding:1rem .9rem;border-radius:var(--nt-radius);
  text-align:center;font-size:.95rem;display:flex;flex-direction:column;gap:.45rem;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.why-emoji{font-size:1.4rem}

/* 7. Reviews slider ---------------------------------------------------- */
.reviews-slider{display:flex;overflow-x:auto;gap:1.2rem;padding-bottom:.4rem}
.reviews-slider::-webkit-scrollbar{height:8px}
.reviews-slider::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:4px}
.review-card{min-width:260px;background:var(--nt-card-bg);border:1px solid var(--nt-border);
  border-radius:var(--nt-radius);padding:1rem .9rem;flex:0 0 auto}
.review-card h4{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.review-card .stars{color:#ffd43b;font-size:.9rem;margin-bottom:.35rem}
.review-card h3{font-size:.9rem;margin-bottom:.3rem}
.review-card p{font-size:.9rem;color:var(--nt-text-dim)}

/* 8. Cookie banner ----------------------------------------------------- */
#cookieBanner{
  left:50%;translate:-50% 0;bottom:1rem;
  width:min(92vw,440px);border-radius:var(--nt-radius);
  background:rgba(26,32,39,.97);padding:1rem 1.2rem;
  color:#fff;font-size:.9rem;box-shadow:0 2px 14px rgba(0,0,0,.35)
}
#cookieAccept{background:#3590ff;border:none;border-radius:var(--nt-radius);
  padding:.5rem 1.25rem;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;
  transition:background .14s}
#cookieAccept:hover{background:#2278e7}

/* 9. Hero / games grid tweaks (reuse existing) ------------------------ */
.main-hero{padding:4rem 0 3rem;text-align:center;background:url('/images/hero-bg.webp') center/cover no-repeat}
.hero-title{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:700;line-height:1.15}
.hero-subtitle{color:var(--nt-text-dim);font-size:clamp(1rem,2.2vw,1.2rem);max-width:620px;margin:.9rem auto 0}
.highlight{color:var(--nt-primary)}

/* 10. Games grid ------------------------------------------------------- */
.games-grid{display:grid;gap:1.4rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.game-card{background:var(--nt-card-bg);border-radius:var(--nt-radius-lg);
  overflow:hidden;transition:transform var(--nt-transition),box-shadow var(--nt-transition)}
.game-card img{width:100%;height:110px;object-fit:cover;display:block}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--nt-shadow)}

/* ===== Featured games row (big cards) ===== */
.games-grid.featured-layout{
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  gap:1.4rem;
}



@media(min-width:768px){
  .games-grid.featured-layout .game-card.featured{
    grid-column: span 2;
    aspect-ratio: 16/9;
  }
  .games-grid.featured-layout .game-card.featured img{
    height:180px;
  }
}
@media(min-width:1200px){
  .games-grid.featured-layout .game-card.featured{
    grid-column: span 2;
    aspect-ratio: 16/7;
  }
}

/* ===== Gradient hero heading ===== */
.hero-title-gradient{
  background:linear-gradient(90deg,#78a8ff 0%,#55e0ff 30%,#b385ff 60%,#ff59d2 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- GLOBAL LAYOUT ---------- */

/* Центровочный контейнер
   1680 px на 4K / 2K, 1400 px на FHD, 92 vw — на планшетах и мобилках  */
.wrap{
  width: min(92vw, 1400px);
  margin-inline: auto;
}

/* Позволяем чуточку шире на ≥1600 px */
@media (min-width: 1600px){
  .wrap{ width: min(88vw, 1680px); }
}

/* Чуть увеличиваем базовый шрифт на 4K,
   чтобы текст не казался мелким */
@media (min-width: 2560px){
  html{ font-size: 18px; }        /* было 16 px */
}

/* ---------- HERO ---------- */

.main-hero{
  /* фон остаётся на всю ширину */
  background: url('/images/hero-bg.webp') center/cover no-repeat;
  padding: 5rem 0 4rem;
}
.hero-inner{ text-align: center; }

.hero-title{
  font-size: clamp(2.3rem, 4.2vw, 3.8rem);
  line-height: 1.15;
  font-weight: 700;
}
.hero-subtitle{
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  max-width: 720px;
  margin: .9rem auto 0;
}

/* ---------- GAMES GRID ---------- */

.games-grid{
  margin-top: 2rem;
  gap: 1.6rem;
  /* на очень больших — карту больше */
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px,14vw,220px), 1fr));
}
@media (min-width: 2000px){
  .games-grid{ gap: 2rem; }
}

/* Featured — уже есть, но чуть увеличим на UHD */
@media (min-width: 2000px){
  .games-grid.featured-layout .game-card.featured{ grid-column: span 3; }
}

/* ---------- OFFERS GRID / BEST DEALS ---------- */

.offers-grid{
  margin-top: 2rem;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fill,minmax(clamp(260px,20vw,320px),1fr));
}
@media (min-width: 2000px){
  .offers-grid{ gap: 2.2rem; }
}

/* ---------- WHY-GRID ---------- */

.why-grid{
  margin-top: 2rem;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

/* ---------- REVIEWS SLIDER ---------- */

.reviews-section .wrap{ overflow: hidden; }   /* чтобы скроллбар был подрезан */
.reviews-slider{ gap: 1.6rem; }               /* плавный отступ на больших */

/* ---------- COOKIE / FOOTER ширина ---------- */

#cookieBanner, footer .footer-top, footer .footer-bottom{ max-width: 92vw; }
@media (min-width:1600px){
  footer .footer-top, footer .footer-bottom{ max-width: 1400px; margin-inline:auto; }
}


/* === Consolidated NextTier additions === */

/* ======================================================================
   NextTier – FULL consolidated styles for main page
   Includes product cards rendered via JS (class .product-card-new et al.)
   Built: 2025‑07‑02
   ====================================================================== */

/* 0. Imports & reset --------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
     background:#11131a;color:#e8e8e8;line-height:1.55;min-height:100vh}

/* 1. Theme variables --------------------------------------------------- */
:root{
  --nt-primary:#ff9944;
  --nt-primary-hover:#ffb366;
  --nt-primary-dark:#cc6c1a;
  --nt-bg:#11131a;
  --nt-bg-light:#1a1d26;
  --nt-border:rgba(255,255,255,.08);
  --nt-card-bg:#1b1e28;
  --nt-text:#e8e8e8;
  --nt-text-dim:#b0b3c7;
  --nt-radius:8px;
  --nt-radius-lg:12px;
  --nt-shadow:0 4px 10px rgba(0,0,0,.45);
  --nt-transition:.24s cubic-bezier(.25,.8,.25,1);
}

/* 2. Utilities --------------------------------------------------------- */
.container{width:min(92vw,1200px);margin-inline:auto}
.text-center{text-align:center}

/* 3. Offers grid ------------------------------------------------------- */
.offers-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-top:1.6rem;
}
@media(max-width:600px){.offers-grid{gap:1.1rem}}

/* 4. Product card ------------------------------------------------------ */
.product-card-new{
  background:var(--nt-card-bg);
  border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--nt-transition),box-shadow var(--nt-transition);
  cursor:pointer;
}
.product-card-new:hover{
  transform:translateY(-4px);
  box-shadow:var(--nt-shadow);
}
/* image box */
.product-img-box{position:relative;aspect-ratio:16/9;overflow:hidden}
.product-img-box img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease}
.product-card-new:hover .product-img-box img{transform:scale(1.06)}

/* "from price" overlay */
.product-price-from-overlay{
  position:absolute;bottom:.6rem;left:.6rem;
  background:rgba(17,19,26,.82);
  padding:.35rem .55rem;
  font-size:.85rem;
  border-radius:6px;
  color:#fff;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
/* badge */
.product-badge-new{
  position:absolute;top:.6rem;left:.6rem;
  padding:.35rem .6rem;
  font-size:.75rem;
  font-weight:600;
  border-radius:6px;
  background:var(--nt-primary);
  color:#fff;
  text-transform:uppercase;
}
.badge-hot{background:#e63946}
.badge-best-seller{background:#40c057}
.badge-new{background:#3b5bdb}
/* add dynamic hue rotate for more badges */
[class^="badge-"]:not(.badge-hot):not(.badge-best-seller):not(.badge-new){
  background:var(--nt-primary);
}
/* product content */
.product-content{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1rem 1.3rem;flex:1}
.product-title{font-size:1.05rem;font-weight:600;color:#fff}
.product-desc{font-size:.9rem;color:var(--nt-text-dim);max-height:72px;overflow:hidden}
.order-btn{
  margin-top:auto;
  align-self:flex-start;
  padding:.55rem 1.1rem;
  background:var(--nt-primary);
  border:none;
  border-radius:var(--nt-radius);
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:background var(--nt-transition);
}
.order-btn:hover{background:var(--nt-primary-hover)}

/* 5. Filter bar (scroll) ---------------------------------------------- */
.game-filter-buttons-scroll{position:relative;margin-top:1rem}
.game-filter-buttons-outer{overflow-x:auto;scroll-behavior:smooth}
.game-filter-buttons{display:flex;gap:.6rem;padding-block:.5rem}
.game-filter-buttons::-webkit-scrollbar{display:none}
.filter-btn{
  flex:0 0 auto;
  padding:.5rem 1.1rem;
  border:1px solid var(--nt-border);
  background:var(--nt-bg-light);
  border-radius:50px;font-size:.9rem;
  color:var(--nt-text-dim);cursor:pointer;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.filter-btn.active,
.filter-btn:hover{background:var(--nt-primary);color:#fff;border-color:transparent}

/* scroll arrows */
.game-filter-arrow{
  position:absolute;top:50%;translate:0 -50%;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--nt-border);
  background:linear-gradient(145deg,#1d202a,#11131a);
  display:grid;place-items:center;
  color:#fff;font-size:1.1rem;cursor:pointer;
  transition:opacity var(--nt-transition);
  opacity:.85;
}
.game-filter-arrow.disabled{opacity:.15;pointer-events:none}
.game-filter-arrow.left{left:-18px}
.game-filter-arrow.right{right:-18px}
@media(min-width:1024px){.game-filter-arrow{display:none}}

/* 6. Why‑block quick grid --------------------------------------------- */
.why-grid{display:grid;gap:1rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.why-block{background:var(--nt-card-bg);padding:1rem .9rem;border-radius:var(--nt-radius);
  text-align:center;font-size:.95rem;display:flex;flex-direction:column;gap:.45rem;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.why-emoji{font-size:1.4rem}

/* 7. Reviews slider ---------------------------------------------------- */
.reviews-slider{display:flex;overflow-x:auto;gap:1.2rem;padding-bottom:.4rem}
.reviews-slider::-webkit-scrollbar{height:8px}
.reviews-slider::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:4px}
.review-card{min-width:260px;background:var(--nt-card-bg);border:1px solid var(--nt-border);
  border-radius:var(--nt-radius);padding:1rem .9rem;flex:0 0 auto}
.review-card h4{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.review-card .stars{color:#ffd43b;font-size:.9rem;margin-bottom:.35rem}
.review-card h3{font-size:.9rem;margin-bottom:.3rem}
.review-card p{font-size:.9rem;color:var(--nt-text-dim)}

/* 8. Cookie banner ----------------------------------------------------- */
#cookieBanner{
  left:50%;translate:-50% 0;bottom:1rem;
  width:min(92vw,440px);border-radius:var(--nt-radius);
  background:rgba(26,32,39,.97);padding:1rem 1.2rem;
  color:#fff;font-size:.9rem;box-shadow:0 2px 14px rgba(0,0,0,.35)
}
#cookieAccept{background:#3590ff;border:none;border-radius:var(--nt-radius);
  padding:.5rem 1.25rem;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;
  transition:background .14s}
#cookieAccept:hover{background:#2278e7}

/* 9. Hero / games grid tweaks (reuse existing) ------------------------ */
.main-hero{padding:4rem 0 3rem;text-align:center;background:url('/images/hero-bg.webp') center/cover no-repeat}
.hero-title{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:700;line-height:1.15}
.hero-subtitle{color:var(--nt-text-dim);font-size:clamp(1rem,2.2vw,1.2rem);max-width:620px;margin:.9rem auto 0}
.highlight{color:var(--nt-primary)}

/* 10. Games grid ------------------------------------------------------- */
.games-grid{display:grid;gap:1.4rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.game-card{background:var(--nt-card-bg);border-radius:var(--nt-radius-lg);
  overflow:hidden;transition:transform var(--nt-transition),box-shadow var(--nt-transition)}
.game-card img{width:100%;height:110px;object-fit:cover;display:block}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--nt-shadow)}

/* ===== Featured games row (big cards) ===== */
.games-grid.featured-layout{
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  gap:1.4rem;
}



@media(min-width:768px){
  .games-grid.featured-layout .game-card.featured{
    grid-column: span 2;
    aspect-ratio: 16/9;
  }
  .games-grid.featured-layout .game-card.featured img{
    height:180px;
  }
}
@media(min-width:1200px){
  .games-grid.featured-layout .game-card.featured{
    grid-column: span 2;
    aspect-ratio: 16/7;
  }
}

/* ===== Gradient hero heading ===== */
.hero-title-gradient{
  background:linear-gradient(90deg,#78a8ff 0%,#55e0ff 30%,#b385ff 60%,#ff59d2 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}


/* ---------- GLOBAL LAYOUT ---------- */

/* Центровочный контейнер
   1680 px на 4K / 2K, 1400 px на FHD, 92 vw — на планшетах и мобилках  */
.wrap{
  width: min(92vw, 1400px);
  margin-inline: auto;
}

/* Позволяем чуточку шире на ≥1600 px */
@media (min-width: 1600px){
  .wrap{ width: min(88vw, 1680px); }
}

/* Чуть увеличиваем базовый шрифт на 4K,
   чтобы текст не казался мелким */
@media (min-width: 2560px){
  html{ font-size: 18px; }        /* было 16 px */
}

/* ---------- HERO ---------- */

.main-hero{
  /* фон остаётся на всю ширину */
  background: url('/images/hero-bg.webp') center/cover no-repeat;
  padding: 5rem 0 4rem;
}
.hero-inner{ text-align: center; }

.hero-title{
  font-size: clamp(2.3rem, 4.2vw, 3.8rem);
  line-height: 1.15;
  font-weight: 700;
}
.hero-subtitle{
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  max-width: 720px;
  margin: .9rem auto 0;
}

/* ---------- GAMES GRID ---------- */

.games-grid{
  margin-top: 2rem;
  gap: 1.6rem;
  /* на очень больших — карту больше */
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px,14vw,220px), 1fr));
}
@media (min-width: 2000px){
  .games-grid{ gap: 2rem; }
}

/* Featured — уже есть, но чуть увеличим на UHD */
@media (min-width: 2000px){
  .games-grid.featured-layout .game-card.featured{ grid-column: span 3; }
}

/* ---------- OFFERS GRID / BEST DEALS ---------- */

.offers-grid{
  margin-top: 2rem;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fill,minmax(clamp(260px,20vw,320px),1fr));
}
@media (min-width: 2000px){
  .offers-grid{ gap: 2.2rem; }
}

/* ---------- WHY-GRID ---------- */

.why-grid{
  margin-top: 2rem;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

/* ---------- REVIEWS SLIDER ---------- */

.reviews-section .wrap{ overflow: hidden; }   /* чтобы скроллбар был подрезан */
.reviews-slider{ gap: 1.6rem; }               /* плавный отступ на больших */

/* ---------- COOKIE / FOOTER ширина ---------- */

#cookieBanner, footer .footer-top, footer .footer-bottom{ max-width: 92vw; }
@media (min-width:1600px){
  footer .footer-top, footer .footer-bottom{ max-width: 1400px; margin-inline:auto; }
}


/* === Consolidated NextTier additions === */

/* ======================================================================
   NextTier – FULL consolidated styles for main page
   Includes product cards rendered via JS (class .product-card-new et al.)
   Built: 2025‑07‑02
   ====================================================================== */

/* 0. Imports & reset --------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
     background:#11131a;color:#e8e8e8;line-height:1.55;min-height:100vh}

/* 1. Theme variables --------------------------------------------------- */
:root{
  --nt-primary:#ff9944;
  --nt-primary-hover:#ffb366;
  --nt-primary-dark:#cc6c1a;
  --nt-bg:#11131a;
  --nt-bg-light:#1a1d26;
  --nt-border:rgba(255,255,255,.08);
  --nt-card-bg:#1b1e28;
  --nt-text:#e8e8e8;
  --nt-text-dim:#b0b3c7;
  --nt-radius:8px;
  --nt-radius-lg:12px;
  --nt-shadow:0 4px 10px rgba(0,0,0,.45);
  --nt-transition:.24s cubic-bezier(.25,.8,.25,1);
}

/* 2. Utilities --------------------------------------------------------- */
.container{width:min(92vw,1200px);margin-inline:auto}
.text-center{text-align:center}

/* 3. Offers grid ------------------------------------------------------- */
.offers-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-top:1.6rem;
}
@media(max-width:600px){.offers-grid{gap:1.1rem}}

/* 4. Product card ------------------------------------------------------ */
.product-card-new{
  background:var(--nt-card-bg);
  border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--nt-transition),box-shadow var(--nt-transition);
  cursor:pointer;
}
.product-card-new:hover{
  transform:translateY(-4px);
  box-shadow:var(--nt-shadow);
}
/* image box */
.product-img-box{position:relative;aspect-ratio:16/9;overflow:hidden}
.product-img-box img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease}
.product-card-new:hover .product-img-box img{transform:scale(1.06)}

/* "from price" overlay */
.product-price-from-overlay{
  position:absolute;bottom:.6rem;left:.6rem;
  background:rgba(17,19,26,.82);
  padding:.35rem .55rem;
  font-size:.85rem;
  border-radius:6px;
  color:#fff;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
/* badge */
.product-badge-new{
  position:absolute;top:.6rem;left:.6rem;
  padding:.35rem .6rem;
  font-size:.75rem;
  font-weight:600;
  border-radius:6px;
  background:var(--nt-primary);
  color:#fff;
  text-transform:uppercase;
}
.badge-hot{background:#e63946}
.badge-best-seller{background:#40c057}
.badge-new{background:#3b5bdb}
/* add dynamic hue rotate for more badges */
[class^="badge-"]:not(.badge-hot):not(.badge-best-seller):not(.badge-new){
  background:var(--nt-primary);
}
/* product content */
.product-content{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1rem 1.3rem;flex:1}
.product-title{font-size:1.05rem;font-weight:600;color:#fff}
.product-desc{font-size:.9rem;color:var(--nt-text-dim);max-height:72px;overflow:hidden}
.order-btn{
  margin-top:auto;
  align-self:flex-start;
  padding:.55rem 1.1rem;
  background:var(--nt-primary);
  border:none;
  border-radius:var(--nt-radius);
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:background var(--nt-transition);
}
.order-btn:hover{background:var(--nt-primary-hover)}

/* 5. Filter bar (scroll) ---------------------------------------------- */
.game-filter-buttons-scroll{position:relative;margin-top:1rem}
.game-filter-buttons-outer{overflow-x:auto;scroll-behavior:smooth}
.game-filter-buttons{display:flex;gap:.6rem;padding-block:.5rem}
.game-filter-buttons::-webkit-scrollbar{display:none}
.filter-btn{
  flex:0 0 auto;
  padding:.5rem 1.1rem;
  border:1px solid var(--nt-border);
  background:var(--nt-bg-light);
  border-radius:50px;font-size:.9rem;
  color:var(--nt-text-dim);cursor:pointer;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.filter-btn.active,
.filter-btn:hover{background:var(--nt-primary);color:#fff;border-color:transparent}

/* scroll arrows */
.game-filter-arrow{
  position:absolute;top:50%;translate:0 -50%;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--nt-border);
  background:linear-gradient(145deg,#1d202a,#11131a);
  display:grid;place-items:center;
  color:#fff;font-size:1.1rem;cursor:pointer;
  transition:opacity var(--nt-transition);
  opacity:.85;
}
.game-filter-arrow.disabled{opacity:.15;pointer-events:none}
.game-filter-arrow.left{left:-18px}
.game-filter-arrow.right{right:-18px}
@media(min-width:1024px){.game-filter-arrow{display:none}}

/* 6. Why‑block quick grid --------------------------------------------- */
.why-grid{display:grid;gap:1rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.why-block{background:var(--nt-card-bg);padding:1rem .9rem;border-radius:var(--nt-radius);
  text-align:center;font-size:.95rem;display:flex;flex-direction:column;gap:.45rem;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.why-emoji{font-size:1.4rem}

/* 7. Reviews slider ---------------------------------------------------- */
.reviews-slider{display:flex;overflow-x:auto;gap:1.2rem;padding-bottom:.4rem}
.reviews-slider::-webkit-scrollbar{height:8px}
.reviews-slider::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:4px}
.review-card{min-width:260px;background:var(--nt-card-bg);border:1px solid var(--nt-border);
  border-radius:var(--nt-radius);padding:1rem .9rem;flex:0 0 auto}
.review-card h4{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.review-card .stars{color:#ffd43b;font-size:.9rem;margin-bottom:.35rem}
.review-card h3{font-size:.9rem;margin-bottom:.3rem}
.review-card p{font-size:.9rem;color:var(--nt-text-dim)}

/* 8. Cookie banner ----------------------------------------------------- */
#cookieBanner{
  left:50%;translate:-50% 0;bottom:1rem;
  width:min(92vw,440px);border-radius:var(--nt-radius);
  background:rgba(26,32,39,.97);padding:1rem 1.2rem;
  color:#fff;font-size:.9rem;box-shadow:0 2px 14px rgba(0,0,0,.35)
}
#cookieAccept{background:#3590ff;border:none;border-radius:var(--nt-radius);
  padding:.5rem 1.25rem;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;
  transition:background .14s}
#cookieAccept:hover{background:#2278e7}

/* 9. Hero / games grid tweaks (reuse existing) ------------------------ */
.main-hero{padding:4rem 0 3rem;text-align:center;background:url('/images/hero-bg.webp') center/cover no-repeat}
.hero-title{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:700;line-height:1.15}
.hero-subtitle{color:var(--nt-text-dim);font-size:clamp(1rem,2.2vw,1.2rem);max-width:620px;margin:.9rem auto 0}
.highlight{color:var(--nt-primary)}

/* 10. Games grid ------------------------------------------------------- */
.games-grid{display:grid;gap:1.4rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.game-card{background:var(--nt-card-bg);border-radius:var(--nt-radius-lg);
  overflow:hidden;transition:transform var(--nt-transition),box-shadow var(--nt-transition)}
.game-card img{width:100%;height:110px;object-fit:cover;display:block}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--nt-shadow)}

/* ===== Featured games row (big cards) ===== */
.games-grid.featured-layout{
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  gap:1.4rem;
}
@media(min-width:768px){
  .games-grid.featured-layout .game-card.featured{
    grid-column: span 2;
    aspect-ratio: 16/9;
  }
  .games-grid.featured-layout .game-card.featured img{
    height:180px;
  }
}
@media(min-width:1200px){
  .games-grid.featured-layout .game-card.featured{
    grid-column: span 2;
    aspect-ratio: 16/7;
  }
}

/* ===== Gradient hero heading ===== */
.hero-title-gradient{
  background:linear-gradient(90deg,#78a8ff 0%,#55e0ff 30%,#b385ff 60%,#ff59d2 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}


/* === Extra adaptive + visual polish (latest additions) ============= */

/* Games grid split rows */
.games-grid{display:grid;gap:1.4rem;margin-top:1.4rem;}
.big-row{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.small-row{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.big-row .game-card.featured{aspect-ratio:16/9;overflow:hidden;border-radius:var(--nt-radius-lg);}
.small-row .game-card h3{position:absolute;left:12px;bottom:12px;font-size:.95rem;font-weight:600;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.55);}
.game-card{position:relative;cursor:pointer;}
.small-row .game-card img{height:110px;}
.big-row .game-card img{height:180px;}
@media(max-width:768px){.big-row{grid-template-columns:1fr;}}

/* Why-card glow */
.why-grid{margin-top:2.2rem;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.why-card{position:relative;padding:1.8rem 1.4rem;background:var(--nt-card-bg);border-radius:var(--nt-radius-lg);text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.35);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;}
.why-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,153,68,.25),transparent 60%);opacity:0;transition:opacity .3s ease;}
.why-card:hover{transform:translateY(-6px);box-shadow:0 6px 20px rgba(0,0,0,.45);}
.why-card:hover::before{opacity:.8;}
.why-icon{font-size:2rem;margin-bottom:.9rem;}
.why-card h4{font-size:1.05rem;margin-bottom:.5rem;}
.why-card p{font-size:.9rem;color:var(--nt-text-dim);}

/* Reviews slider modern look */
.review-card{min-width:300px;max-width:320px;background:var(--nt-card-bg);border:1px solid var(--nt-border);border-radius:var(--nt-radius-lg);padding:1.4rem 1.1rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;transition:transform .28s ease;}
.review-card:hover{transform:translateY(-5px);}
.review-card .stars{color:#ffd43b;font-size:1rem;}
.review-card h4{font-size:.9rem;font-weight:600;color:#fff;}
.review-card h3{font-size:1rem;font-weight:600;color:#fff;}
.review-card p{font-size:.9rem;color:var(--nt-text-dim);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}

/* Product description clamp */
.product-desc{font-size:.9rem;color:var(--nt-text-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}


/* === Section spacing & modern visual touches (2025‑07‑02) ============ */

/* SECTION vertical rhythm */
main > section{
  padding-block:4rem;
  border-bottom:1px solid var(--nt-border);
  animation:fadeUp .8s ease-out both;
}
main > section:last-of-type{border-bottom:none;}
@media(max-width:600px){
  main > section{padding-block:3rem;}
}

/* subtle backgrounds */
.deals-section{
  background:linear-gradient(145deg,#12141e 0%,#1a1d25 50%,#10121a 100%);
}
.why-nexttier{
  background:var(--nt-bg-light);
  box-shadow:inset 0 8px 16px rgba(0,0,0,.25);
}
.reviews-section{position:relative;overflow:hidden;}
.reviews-section::before{
  content:"";position:absolute;inset:0;
  background:url("/img/noise.png");
  opacity:.15;pointer-events:none;
}

/* fade-in keyframes */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:none;}
}

/* glowing featured game hover */
.big-row .game-card.featured::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 30%,rgba(255,153,68,.12),transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.big-row .game-card.featured:hover::after{opacity:.9;}


/* ===============================================================
   2025‑07‑02  —  Patch #3
   – Fix mobile sidebar overlap
   – Align banner button right (desktop) and stacked (mobile)
   – Remove scroll inside .product-desc .ql-editor
   – Multi‑color badges
   – Card hover glow & active press effect
   – Tiny UX flourishes
   ============================================================== */

/* 1. Sidebar behaviour on mobile */
@media (max-width: 1024px){
  .sidebar{
    position:static;
    max-height:none;
    margin-bottom:2rem;
  }
}

/* 2. Custom‑order banner layout */
.custom-order-banner{flex-wrap:nowrap;}
@media (max-width: 640px){
  .custom-order-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .custom-order-btn{
    align-self:stretch;
    text-align:center;
  }
}

/* 3. Remove Quill scroll in product cards */
.product-desc .ql-editor{
  overflow:visible !important;
  max-height:none !important;
  padding:0;
}

/* 4. Badge palette */
.badge-hot,
.badge-hot-offer          { background:#e63946; }
.badge-bundle             { background:#20c997; }
.badge-time-limited       { background:#ffa94d; }
.badge-preorder           { background:#4dabf7; }
.badge-gift-inside        { background:#845ef7; }
.badge-updated            { background:#51cf66; }

/* 5. Hover glow for any card */
@media (hover:hover){
  .product-card-new:hover,
  .product-card:hover{
    box-shadow:0 6px 24px rgba(255,153,68,.25);
  }
}

/* 6. Press feedback */
:where(button, a):active{
  transform:translateY(1px);
  filter:brightness(.92);
  transition:transform .12s, filter .12s;
}

/* 7. Subtle section separator fade (top) */
main > section:not(:first-of-type){
  margin-top:1px;
  background-image:linear-gradient(to bottom,rgba(255,255,255,.02),transparent 40%);
}

/* 8. Decorative dashed underline on H2 */
:where(h2){
  position:relative;
  padding-bottom:.4rem;
}
:where(h2)::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:48px;height:2px;
  background:var(--nt-primary);
  background-image:linear-gradient(90deg,var(--nt-primary) 33%,transparent 0);
  background-size:8px 2px;
}


/* ===============================================================
   2025‑07‑03 — Patch #4
   – Footer sticks to bottom on tall screens
   – Price‑from overlay visible on hover
   – Banner button forced to the right (desktop)
   – Game logo full‑width
   ============================================================== */

/* A) Sticky footer */
html,body{height:100%;}
body{display:flex;flex-direction:column;}
main{flex:1 0 auto;}       /* главное содержимое тянется */
footer{flex-shrink:0;}     /* футер всегда после контента */

/* B) Price‑from overlay z‑index */
.product-price-from-overlay{z-index:3;} /* поверх масштабируемого img */

/* C) Banner alignment */
.custom-order-banner{display:flex;align-items:center;gap:1.6rem;}
.custom-order-banner>*:not(.custom-order-btn){flex:1 1 auto;} /* текст расширяется */
.custom-order-btn{margin-left:auto;} /* уезжает вправо */
/* на мобилке — уже задано flex-direction:column */

/* D) Game sidebar image full width */
.game-logo{width:100%;height:auto;object-fit:contain;}


/* ===============================================================
   2025‑07‑03 — Patch #5
   – Footer truly sticks to bottom (flex column)
   – Banner button forced to the right on ≥641 px
   – Game logo spans full sidebar width
   ============================================================== */

/* 1. Document flow: make footer stick even if контента мало */
html,body{height:100%;}
body{
  display:flex;flex-direction:column;
  min-height:100vh;
}
header, footer{flex-shrink:0;}
.game-container{flex:1 0 auto;}   /* тянется и заполняет свободное */

/* 2. Banner layout */
.custom-order-banner__content{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
}
@media (min-width: 641px){
  .custom-order-banner__content{flex-wrap:nowrap;}
  .custom-order-banner__content > div:first-child{flex:1 1 auto;}
  .custom-order-btn{margin-left:auto;flex:0 0 auto;}
}

/* 3. Game image full width */
.game-logo{width:100%;height:auto;object-fit:contain;}

/* 4. Ensure price-from overlay stays on hover */
.product-price-from-overlay{z-index:5;pointer-events:none;}

/* SunEditor tables: compact width + centered + container scroll */
.entity-description,
.entity-footer-description {
  overflow-x: auto; /* если таблица шире контейнера — появится горизонтальный скролл */
}

.entity-description table,
.entity-footer-description table {
  /* было: width:100%; display:block; — из-за этого таблица тянулась на всю ширину */
  width: auto;
  max-width: 100%;
  display: inline-table;      /* ширина по контенту */
  table-layout: auto;
  margin: .8rem auto;         /* центрирование */
}

.entity-description th,
.entity-description td,
.entity-footer-description th,
.entity-footer-description td {
  /* было: white-space: nowrap; — мешало сужаться колонкам */
  white-space: normal;
  word-break: break-word;     /* аккуратный перенос длинных слов/ссылок */
}


.entity-description table,
.entity-footer-description table {
  width: auto !important;        /* занимать всю ширину колонки */
  max-width: 100% !important;
  table-layout: fixed !important;/* фиксированная сетка — помогает переносам */
  display: table !important;     /* исключаем inline-table, чтобы не вылезала */
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 1rem 0;
  background: #1b1e28;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;              /* скругления по краям */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Заголовок: выразительный фон, контрастный текст */
.entity-description th,
.entity-description td,
.entity-footer-description th,
.entity-footer-description td {
  background: linear-gradient(180deg,#262b3d 0%,#20253a 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Ячейки: компактные отступы + перенос длинных слов/URL */
.entity-description th, .entity-description td,
.entity-footer-description th, .entity-footer-description td,
.spoiler-content th, .spoiler-content td {
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* “Зебра” и hover подсветка строк */
.entity-description tbody tr:nth-child(even) td,
.entity-footer-description tbody tr:nth-child(even) td,
.spoiler-content tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}
.entity-description tbody tr:hover td,
.entity-footer-description tbody tr:hover td,
.spoiler-content tbody tr:hover td {
  background: rgba(255,255,255,.05);
}

/* Картинки/медиа внутри ячеек — вписать в ячейку */
.entity-description td img,
.entity-footer-description td img,
.spoiler-content td img,
.entity-description td video,
.entity-footer-description td video,
.spoiler-content td video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Мелкий тюнинг на мобильных — чуть меньше шрифт в таблицах */
@media (max-width: 600px) {
  .entity-description table,
  .entity-footer-description table,
  .spoiler-content table {
    font-size: .95rem;
  }
}





.breadcrumbs {
  font-size: 14px;
  margin: 12px 0 24px;
  white-space: nowrap;
  overflow-x: auto;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: #777;
}
.breadcrumbs a {
  color: #3590ff;
  text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }

    /* Убрать подчеркивание у All Services и зафиксировать размеры иконки */
    .menu .category.all-services,
    .menu .category.all-services:link,
    .menu .category.all-services:visited,
    .menu .category.all-services:hover,
    .menu .category.all-services:active {
      text-decoration: none !important;
    }
    .menu .category.all-services .nav-svg svg {
      width: 28px; height: 28px; vertical-align: -3px; margin-right: 6px;
    }

    /* SunEditor content — Game page (Description / Footer Description) */
.entity-description,
.entity-footer-description {
  line-height: 1.65;
  color: #e8e8e8;
}

/* Типографика */
.entity-description p,
.entity-footer-description p { margin: .6rem 0; }
.entity-description h1,
.entity-description h2,
.entity-description h3,
.entity-footer-description h1,
.entity-footer-description h2,
.entity-footer-description h3 {
  margin: .9rem 0 .5rem;
  line-height: 1.22;
  color: #fff;
}
.entity-description a,
.entity-footer-description a {
  color: #55a8ff;
  text-decoration: underline;
}
.entity-description ul,
.entity-description ol,
.entity-footer-description ul,
.entity-footer-description ol {
  margin: .6rem 0 .6rem 1.2rem;
  padding-left: 1.1rem;
}
.entity-description li,
.entity-footer-description li { margin: .25rem 0; }

/* Картинки */
.entity-description img,
.entity-footer-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: .6rem auto;
}

/* Цитаты */
.entity-description blockquote,
.entity-footer-description blockquote {
  border-left: 3px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  padding: .7rem .9rem;
  margin: .9rem 0;
  border-radius: 6px;
  color: #dfe4f2;
}

/* Код */
.entity-description pre,
.entity-footer-description pre {
  background: #1b1f2b;
  color: #eaeefc;
  padding: .8rem 1rem;
  border-radius: 8px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95rem;
}
.entity-description code,
.entity-footer-description code {
  background: #1b1f2b;
  color: #eaeefc;
  padding: .15rem .35rem;
  border-radius: 6px;
}

/* =====================================================================
   Patch 2025‑07‑04 — Tables in entity-* match product.css
   ===================================================================== */

/* Контентные блоки: без горизонтального скролла, переносы в ячейках */
.entity-description,
.entity-footer-description {
  overflow-x: hidden !important;
}

/* Таблица не шире контейнера, фиксированная сетка, красивое оформление */
.entity-description table,
.entity-footer-description table {
  width: auto !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  display: table !important;          /* переопределяем inline-table */
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 1rem 0;
  background: #1b1e28;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;                    /* видимые скругления */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Шапка — выразительный фон, контраст */
.entity-description thead th,
.entity-footer-description thead th {
  background: linear-gradient(180deg,#262b3d 0%,#20253a 100%) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Базовые ячейки: отступы, переносы, разделители строк */
.entity-description th, .entity-description td,
.entity-footer-description th, .entity-footer-description td {
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* На всякий случай снимаем ранее заданный градиент с td (если был) */
.entity-description td,
.entity-footer-description td {
  background: transparent !important;
  color: inherit;
  letter-spacing: normal;
  font-weight: inherit;
}

/* Зебра и hover подсветка строк */
.entity-description tbody tr:nth-child(even) td,
.entity-footer-description tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}
.entity-description tbody tr:hover td,
.entity-footer-description tbody tr:hover td {
  background: rgba(255,255,255,.05);
}

/* Медиа внутри ячеек — вписываем */
.entity-description td img,
.entity-footer-description td img,
.entity-description td video,
.entity-footer-description td video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Чуть компактнее на мобилках */
@media (max-width: 600px) {
  .entity-description table,
  .entity-footer-description table {
    font-size: .95rem;
  }
}
/* Если видео встречается в коротком описании (в заголовочном блоке) */
.page-title-block .short-desc-html iframe,
.page-title-block .short-desc-html video {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border: 0;
}

/* === NT Slider (content inside SunEditor) ============================ */
.nt-slider{
  position: relative;
  overflow: hidden;
  border-radius: var(--nt-radius-lg);
  border: 1px solid var(--nt-border);
  background: #0f1218;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: block;            /* был inline-block: корректно центрируется как блок */
  /* убираем навязанное заполнение: ширину ставим из JS (px или %) */
  /* width: auto;  — не задаём, т.к. установим width инлайном через JS */
  max-width: 100%;
  margin: 1rem auto;
  user-select: none;
  cursor: pointer;
}
.nt-slides{
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}
.nt-slide{
  min-width: 100%;
  user-select: none;
}
.nt-slide img{
  display: block;
  width: 100%;                /* масштабируем под ширину слайдера */
  height: auto;
  object-fit: cover;
  -webkit-user-drag: none;    /* запрет перетаскивания картинки */
  user-drag: none;
  cursor: grab;
}

/* Arrows */
.nt-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--nt-border);
  background: rgba(17,19,26,.72);
  backdrop-filter: blur(4px);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
  z-index: 3;
}
.nt-arrow:hover{ background: rgba(17,19,26,.9); }
.nt-prev{ left: 10px; }
.nt-next{ right: 10px; }

/* Dots */
.nt-dots{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 10px;
  display: flex; gap: .4rem;
  z-index: 3;
}
.nt-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
}
.nt-dot.active{ background: #fff; }

/* Dark overlays stay visible over images */
.nt-slider::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.12), transparent 30%);
  pointer-events: none;
}

/* NT Slider x SunEditor: убрать внешние отступы у обёрток редактора и растянуть на 100% */
.nt-slide .se-component,
.nt-slide .se-image-container,
.nt-slide figure {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important; /* Ключевое: внутренняя обёртка = ширине слайдера */
}
.nt-slide .se-component img,
.nt-slide figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Также запретим drag на всякий случай на уровне контейнера */
.nt-slider img { -webkit-user-drag: none; user-drag: none; }

/* SunEditor content — Game page: short_description (в заголовочном блоке) */
.page-title-block .short-desc-html {
  line-height: 1.6;
  color: #e8e8e8;
  /* если это div.ql-editor — убираем внутренние паддинги и ограничения */
  overflow: visible !important;
  padding: 0;
  max-height: none !important;
}

.card-short-description {
  margin-left: 20px;
  padding: 0;
}

/* Типографика (компактнее, чем в основном описании) */
.page-title-block .short-desc-html p { margin: .5rem 0; }
.page-title-block .short-desc-html h1,
.page-title-block .short-desc-html h2,
.page-title-block .short-desc-html h3 {
  margin: .6rem 0 .35rem;
  line-height: 1.22;
  color: #fff;
}

/* Ссылки */
.page-title-block .short-desc-html a {
  color: #55a8ff;
  text-decoration: underline;
}

/* Списки — аккуратно и компактно */
.page-title-block .short-desc-html ul,
.page-title-block .short-desc-html ol {
  margin: .5rem 0 .5rem 1.2rem;
  padding-left: 1.1rem;
}
.page-title-block .short-desc-html li { margin: .2rem 0; }

/* Картинки */
.page-title-block .short-desc-html img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: .5rem auto;
}

/* Цитаты */
.page-title-block .short-desc-html blockquote {
  border-left: 3px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  padding: .6rem .8rem;
  margin: .7rem 0;
  border-radius: 6px;
  color: #dfe4f2;
}

/* Код */
.page-title-block .short-desc-html pre {
  background: #1b1f2b;
  color: #eaeefc;
  padding: .7rem .9rem;
  border-radius: 8px;
  overflow: auto;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size: .93rem;
}
.page-title-block .short-desc-html code {
  background: #1b1f2b;
  color: #eaeefc;
  padding: .12rem .32rem;
  border-radius: 6px;
}

/* Таблицы: ширина по контенту + центрирование + горизонтальный скролл при необходимости */
.page-title-block .short-desc-html table {
  width: auto;
  max-width: 100%;
  display: inline-table;
  table-layout: auto;
  margin: .7rem auto;
  border-collapse: collapse;
  background: #1b1e28;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
}
.page-title-block .short-desc-html thead th { background: #202435; color: #fff; }
.page-title-block .short-desc-html th,
.page-title-block .short-desc-html td {
  padding: .5rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap; /* узкие таблицы не ломаем, пусть скроллятся контейнером */
}
.page-title-block .short-desc-html tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}

/* Выравнивания (SunEditor inline) */
.page-title-block .short-desc-html [style*="text-align:center"],
.page-title-block .short-desc-html .se-text-center { text-align: center; }
.page-title-block .short-desc-html [style*="text-align:right"],
.page-title-block .short-desc-html .se-text-right { text-align: right; }
.page-title-block .short-desc-html [style*="text-align:left"],
.page-title-block .short-desc-html .se-text-left { text-align: left; }

/* Фигуры/подписи */
.page-title-block .short-desc-html figure { margin: .6rem 0; }
.page-title-block .short-desc-html figcaption {
  color: #b0b3c7; font-size: .9rem; text-align: center; margin-top: .3rem;
}

/* Видео/iframe — уже были базовые стили, дополним селекторы на случай отсутствия их выше */
.page-title-block .short-desc-html .se-video-container,
.page-title-block .short-desc-html figure.se-video-container {
  display: inline-block;
  max-width: 100%;
  margin: .8rem auto;
  background: transparent;
  border: 0;
  overflow: visible;
}
.page-title-block .short-desc-html iframe,
.page-title-block .short-desc-html video {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border: 0;
}

/* =====================================================================
   Patch 2025‑07‑05 — Tables parity with product.css + card hover parity
   ===================================================================== */

/* 1) Контейнер таблицы — строго как на product.css */
.entity-description table,
.entity-footer-description table {
  width: auto !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  display: table !important;
  margin: 1rem 0 !important;
  background: #1b1e28 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
}

/* 2) Шапка таблицы — градиент и контраст как на product.css */
.entity-description thead th,
.entity-footer-description thead th {
  background: linear-gradient(180deg,#262b3d 0%,#20253a 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

/* 3) Тело таблицы — без фонового градиента и без лишней жирности */
.entity-description tbody th,
.entity-description tbody td,
.entity-description tfoot th,
.entity-description tfoot td,
.entity-footer-description tbody th,
.entity-footer-description tbody td,
.entity-footer-description tfoot th,
.entity-footer-description tfoot td {
  background: transparent !important;     /* снимаем ранее заданный фон */
  color: var(--nt-text) !important;       /* как на product.css */
  font-weight: 400 !important;            /* обычный вес */
}

/* 4) Паддинги, переносы, разделители строк — в тон product.css */
.entity-description th, .entity-description td,
.entity-footer-description th, .entity-footer-description td {
  padding: .65rem .85rem !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* 5) Зебра и hover строк — идентично product.css */
.entity-description tbody tr:nth-child(even) td,
.entity-footer-description tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.03) !important;
}
.entity-description tbody tr:hover td,
.entity-footer-description tbody tr:hover td {
  background: rgba(255,255,255,.05) !important;
}

/* 6) Медиа внутри ячеек */
.entity-description td img,
.entity-footer-description td img,
.entity-description td video,
.entity-footer-description td video {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px !important;
}

/* 7) Мобильная подстройка размера шрифта в таблицах */
@media (max-width: 600px) {
  .entity-description table,
  .entity-footer-description table {
    font-size: .95rem !important;
  }
}

/* 8) Hover-анимации карточек — как на странице товара */
@media (hover: hover) {
  .product-card-new:hover,
  .product-card:hover {
    transform: translateY(-6px) !important;
    /* глубокая тень + тёплый подсвет */
    box-shadow: 0 8px 36px rgba(11,21,40,.32), 0 6px 24px rgba(255,153,68,.25) !important;
  }
  .product-card-new:hover .product-img-box img,
  .product-card:hover .product-img-box img {
    transform: scale(1.06) !important;
  }
}

.tawk-icon.tawk-icon-x {
  display: hide;
}