/* =============================================
   SHOP.EmpireG.RU — DLE 19.1 Template
   Dark + Light theme | RU/EN | Mobile-first
   Специализация: игровые аккаунты и ключи
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ─── THEME VARIABLES ─────────────────────── */
:root {
  /* EmpireG brand: фиолетово-золотая гамма */
  --accent:       #a855f7;
  --accent-2:     #fbbf24;
  --accent-dim:   rgba(168,85,247,0.12);
  --accent-glow:  rgba(168,85,247,0.4);
  --accent-b:     rgba(168,85,247,0.3);
  --gold:         #fbbf24;
  --gold-dim:     rgba(251,191,36,0.12);
  --gold-glow:    rgba(251,191,36,0.35);
  --warn:         #f43f5e;
  --green:        #10b981;
  --info:         #38bdf8;
  --radius:       8px;
  --radius-lg:    14px;
  --radius-l:     14px;
  --font-d:       'Orbitron', sans-serif;
  --font-b:       'Rajdhani', sans-serif;
  --font-m:       'JetBrains Mono', monospace;
  --tr:           0.2s ease;
}

/* DARK */
[data-theme="dark"], :root {
  --bg:       #09090f;
  --bg-s:     #0f0f1a;
  --bg-c:     #13131f;
  --bg-h:     #1a1a2e;
  --tx:       #e8e0f0;
  --tx-m:     #7c6e96;
  --tx-f:     #2d2a3e;
  --brd:      rgba(168,85,247,0.10);
  --brd2:     rgba(255,255,255,0.05);
  --sh:       rgba(0,0,0,0.6);
  --hbg:      rgba(9,9,15,0.92);
  --hero-g:   rgba(168,85,247,0.08);
  --hero-g2:  rgba(251,191,36,0.05);
}

/* LIGHT */
[data-theme="light"] {
  --bg:       #f5f3ff;
  --bg-s:     #ffffff;
  --bg-c:     #ffffff;
  --bg-h:     #ede8ff;
  --tx:       #1a0a2e;
  --tx-m:     #4a3d66;
  --tx-f:     #b8aad4;
  --brd:      rgba(124,58,237,0.18);
  --brd2:     rgba(0,0,0,0.09);
  --sh:       rgba(100,50,200,0.10);
  --hbg:      rgba(255,255,255,0.95);
  --hero-g:   rgba(168,85,247,0.10);
  --hero-g2:  rgba(251,191,36,0.08);
}

/* ─── DLE TAG LEAK SAFETY ────────────────── */
/* Hide raw DLE conditional tag text ([not-logged] etc.) that may leak as text nodes */
/* font-size:0 on container hides text nodes, explicit sizes on children restore them */
.header-right { font-size: 0; line-height: 0; }
.header-right > *, .header-right .header-auth,
.header-right .header-controls, .header-right .header-social,
.header-right .search-form, .header-right .lang-sep { font-size: 12px; line-height: normal; }

/* ─── RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-m);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background .3s, color .3s;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%, var(--hero-g) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, var(--hero-g2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 90% 20%, rgba(168,85,247,0.04) 0%, transparent 50%);
}
a { color: var(--accent); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── LAYOUT ─────────────────────────────── */
.wrapper { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.grid-main {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 24px;
  align-items: start;
  padding: 24px 0 48px;
}

/* ─── HEADER ─────────────────────────────── */
#header {
  background: var(--hbg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--brd);
  position: sticky; top: 0; z-index: 200;
  transition: background .3s;
}
/* Золотая линия сверху — фирменный элемент EmpireG */
#header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), var(--gold), transparent);
}
.header-inner { display: flex; align-items: center; gap: 18px; height: 64px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-weight: 900; font-size: 17px; color: var(--gold);
  box-shadow: 0 0 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1);
  flex-shrink: 0; position: relative; overflow: hidden;
}
.logo-mark::after {
  content: '👑';
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; opacity: 0.7;
}
.logo-text { font-family: var(--font-d); font-weight: 700; font-size: 15px; color: var(--tx); letter-spacing: 1px; }
.logo-text .empire { color: var(--accent); }
.logo-text .g { color: var(--gold); }
.logo-sub { font-size: 9px; color: var(--tx-m); font-family: var(--font-b); letter-spacing: 2px; text-transform: uppercase; display: block; line-height: 1; }

/* Nav */
#nav { flex: 1; overflow: hidden; }
#nav ul { display: flex; gap: 1px; }
#nav ul li a {
  display: block; padding: 7px 10px; border-radius: var(--radius);
  color: var(--tx-m); font-family: var(--font-b); font-size: 13px; font-weight: 600;
  transition: .2s; white-space: nowrap; letter-spacing: .3px;
}
#nav ul li a:hover, #nav ul li.active a {
  background: var(--accent-dim); color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Header right */
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

/* Search */
.search-form {
  display: flex; align-items: center;
  background: var(--bg-h); border: 1px solid var(--brd); border-radius: var(--radius);
  padding: 0 10px; gap: 8px; transition: .2s; overflow: hidden;
}
.search-form:focus-within { border-color: var(--accent); background: var(--bg-c); }
.search-form input {
  background: transparent; border: none; outline: none;
  color: var(--tx); font-family: var(--font-m); font-size: 13px; width: 160px; padding: 8px 0;
}
.search-form input::placeholder { color: var(--tx-f); }
.search-form button { background: none; border: none; cursor: pointer; color: var(--tx-m); display: flex; padding: 0; }
.search-form button:hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius);
  font-family: var(--font-b); font-weight: 600; font-size: 13px;
  cursor: pointer; border: 1px solid transparent; transition: .2s; white-space: nowrap; letter-spacing: .3px;
}
.btn-ghost { background: transparent; border-color: var(--brd); color: var(--tx-m); }
.btn-ghost:hover { border-color: var(--accent-b); color: var(--accent); background: var(--accent-dim); }
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; border-color: transparent;
  box-shadow: 0 0 16px var(--accent-glow);
}
.btn-primary:hover { background: linear-gradient(135deg, #a855f7, #c084fc); transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
.btn-gold {
  background: linear-gradient(135deg, #d97706, #fbbf24);
  color: #000; border-color: transparent;
  box-shadow: 0 0 12px var(--gold-glow);
  font-weight: 700;
}
.btn-gold:hover { background: linear-gradient(135deg, #fbbf24, #fde68a); transform: translateY(-1px); }

/* Controls */
.header-controls { display: flex; align-items: center; gap: 4px; }
.ctrl-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--brd); background: var(--bg-c); border-radius: var(--radius);
  cursor: pointer; color: var(--tx-m); font-size: 11px; font-family: var(--font-b); font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: .2s; flex-shrink: 0;
}
.ctrl-btn:hover, .ctrl-btn.active { background: var(--accent-dim); border-color: var(--accent-b); color: var(--accent); }
.ctrl-btn.theme-btn { font-size: 15px; }
.lang-sep { color: var(--tx-f); font-size: 11px; padding: 0 1px; }

/* Social links in header */
.header-social { display: flex; align-items: center; gap: 6px; }
.social-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 10px;
  border-radius: var(--radius); font-family: var(--font-b); font-weight: 600; font-size: 11px;
  border: 1px solid var(--brd); color: var(--tx-m); transition: .2s; white-space: nowrap;
}
.social-btn.tg:hover { background: rgba(0,136,204,0.12); border-color: rgba(0,136,204,0.3); color: #29b6f6; }


/* Mobile toggle */
.mobile-toggle {
  display: none; width: 36px; height: 36px;
  border: 1px solid var(--brd); background: var(--bg-c); border-radius: var(--radius);
  cursor: pointer; color: var(--tx-m); align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── MOBILE DRAWER ──────────────────────── */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.mobile-nav.open { pointer-events: all; }
.nav-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); opacity: 0; transition: .3s; }
.mobile-nav.open .nav-overlay { opacity: 1; }
.nav-drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 270px;
  background: var(--bg-s); border-right: 1px solid var(--brd);
  padding: 20px; transform: translateX(-100%); transition: .3s ease; overflow-y: auto;
}
.mobile-nav.open .nav-drawer { transform: translateX(0); }
.drawer-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: 1px solid var(--brd); background: var(--bg-h); border-radius: var(--radius);
  cursor: pointer; color: var(--tx-m); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.drawer-links { display: flex; flex-direction: column; gap: 3px; margin-top: 20px; }
.drawer-links a {
  display: block; padding: 10px 12px; border-radius: var(--radius);
  color: var(--tx-m); font-family: var(--font-b); font-weight: 600; font-size: 14px; transition: .2s;
}
.drawer-links a:hover { background: var(--accent-dim); color: var(--accent); }

/* ─── TICKER ─────────────────────────────── */
.ticker-bar { background: var(--bg-s); border-bottom: 1px solid var(--brd); padding: 7px 0; overflow: hidden; }
.ticker-inner { display: flex; gap: 40px; animation: ticker 35s linear infinite; white-space: nowrap; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item { display: flex; align-items: center; gap: 8px; color: var(--tx-m); font-size: 12px; font-family: var(--font-b); }
.badge { padding: 2px 7px; border-radius: 20px; font-weight: 700; font-size: 10px; font-family: var(--font-b); letter-spacing: .3px; }
.badge-new    { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-b); }
.badge-sale   { background: var(--warn); color: #fff; }
.badge-hot    { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; }
.badge-gold   { background: linear-gradient(135deg,#d97706,#fbbf24); color: #000; }
.badge-steam  { background: #1b2838; color: #c7d5e0; border: 1px solid #2a475e; }
.badge-gog    { background: #86003c; color: #fff; }
.badge-ms     { background: #0078d4; color: #fff; }

/* ─── HERO ───────────────────────────────── */
.hero {
  background: var(--bg-s); border: 1px solid var(--brd); border-radius: var(--radius-lg);
  padding: 44px 40px; margin-bottom: 24px;
  position: relative; overflow: hidden; box-shadow: 0 4px 30px var(--sh);
}
.hero::before {
  content: ''; position: absolute; right: -80px; top: -80px; width: 350px; height: 350px;
  background: radial-gradient(circle, var(--hero-g) 0%, transparent 70%); pointer-events: none;
}
.hero::after {
  content: 'EMPIRE'; position: absolute; right: 20px; bottom: -12px;
  font-family: var(--font-d); font-weight: 900; font-size: 80px;
  color: rgba(168,85,247,0.05); letter-spacing: -2px; pointer-events: none; line-height: 1;
}
.hero-crown {
  font-size: 28px; margin-bottom: 8px; display: block;
  filter: drop-shadow(0 0 10px var(--gold-glow));
  animation: crown-pulse 3s ease-in-out infinite;
}
@keyframes crown-pulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.hero-label {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim); border: 1px solid var(--accent-b); color: var(--accent);
  padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; font-family: var(--font-b);
}
.hero h1 {
  font-family: var(--font-d); font-size: clamp(20px,3vw,40px); font-weight: 800;
  line-height: 1.1; letter-spacing: -1px; margin-bottom: 12px;
}
.hero h1 .emp { color: var(--accent); }
.hero h1 .key { color: var(--gold); }
.hero p { color: var(--tx-m); max-width: 520px; margin-bottom: 24px; font-size: 13px; line-height: 1.7; font-family: var(--font-b); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-d); font-weight: 800; font-size: 22px; color: var(--tx); }
.hero-stat .lbl { font-size: 10px; color: var(--tx-m); text-transform: uppercase; letter-spacing: .5px; font-family: var(--font-b); }

/* Platform badges in hero */
.platform-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ptag {
  display: flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: 20px; font-family: var(--font-b); font-size: 11px; font-weight: 600;
  border: 1px solid var(--brd2); background: var(--bg-h); color: var(--tx-m); transition: .2s;
}
.ptag:hover { transform: translateY(-1px); }
.ptag-steam  { border-color: #2a475e; background: rgba(27,40,56,0.4); color: #c7d5e0; }
.ptag-gog    { border-color: #86003c; background: rgba(134,0,60,0.15); color: #f43f5e; }
.ptag-ms     { border-color: #0078d4; background: rgba(0,120,212,0.12); color: #38bdf8; }
.ptag-origin { border-color: #f56c2d; background: rgba(245,108,45,0.12); color: #fb923c; }
.ptag-uplay  { border-color: #0070d1; background: rgba(0,112,209,0.12); color: #60a5fa; }

/* ─── CATEGORIES ─────────────────────────── */
.categories { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }
.category-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; background: var(--bg-c); border: 1px solid var(--brd2);
  border-radius: 30px; color: var(--tx-m); font-family: var(--font-b); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: .2s; white-space: nowrap;
}
.category-pill:hover, .category-pill.active {
  background: var(--accent-dim); border-color: var(--accent-b); color: var(--accent);
}
.category-pill .count { background: var(--bg-h); padding: 1px 5px; border-radius: 10px; font-size: 10px; color: var(--tx-f); }
.category-pill.active .count { background: var(--accent-dim); color: var(--accent); }

/* ─── SECTION HEAD ───────────────────────── */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-family: var(--font-d); font-weight: 700; font-size: 15px; color: var(--tx); letter-spacing: .5px; }
.section-title::before {
  content: ''; display: inline-block; width: 3px; height: 16px;
  background: linear-gradient(180deg, var(--gold), var(--accent));
  border-radius: 2px; margin-right: 10px; vertical-align: middle;
}
.see-all { font-size: 12px; color: var(--tx-m); font-family: var(--font-b); font-weight: 600; }
.see-all:hover { color: var(--accent); }

/* ─── PRODUCT GRID ───────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }

/* ─── PRODUCT CARD ───────────────────────── */
.product-card {
  background: var(--bg-c); border: 1px solid var(--brd2); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: .25s; box-shadow: 0 2px 12px var(--sh);
  animation: fadeUp .4s ease both; position: relative;
}
.product-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  transition: .3s;
}
.product-card:hover { border-color: var(--accent-b); transform: translateY(-3px); box-shadow: 0 8px 30px var(--sh), 0 0 0 1px var(--accent-b); }
.product-card:hover::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.product-card:nth-child(2){animation-delay:.06s}.product-card:nth-child(3){animation-delay:.12s}
.product-card:nth-child(4){animation-delay:.18s}.product-card:nth-child(5){animation-delay:.24s}
.product-card:nth-child(6){animation-delay:.30s}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.product-card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-h); }
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-badge { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; font-family:var(--font-b); }
/* Platform badge in card */
.platform-badge {
  position: absolute; bottom: 8px; right: 8px;
  padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700;
  font-family: var(--font-b); letter-spacing: .5px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pb-steam  { background: rgba(27,40,56,0.9); color: #c7d5e0; }
.pb-gog    { background: rgba(134,0,60,0.9); color: #fecdd3; }
.pb-ms     { background: rgba(0,120,212,0.9); color: #bae6fd; }
.pb-origin { background: rgba(245,108,45,0.85); color: #fff; }
.pb-uplay  { background: rgba(0,112,209,0.9); color: #bfdbfe; }
.pb-acc    { background: rgba(168,85,247,0.9); color: #fff; }
.pb-sale   { background: var(--warn); color: #fff; }
.pb-new    { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; }
.pb-hot    { background: linear-gradient(135deg,#d97706,#fbbf24); color: #000; }
.product-card-body { padding: 13px 14px 14px; flex:1; display:flex; flex-direction:column; }
.product-cat { font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:4px; font-family:var(--font-b); }
.product-name { font-family:var(--font-b); font-weight:700; font-size:14px; line-height:1.4; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--tx); }
.product-meta { display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:11px; color:var(--tx-m); }
.stars { color: var(--gold); letter-spacing:-1px; }
.product-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:6px; }
.product-price { font-family:var(--font-d); font-weight:800; font-size:17px; color:var(--accent); }
.product-price .old-price { font-size:10px; color:var(--tx-f); text-decoration:line-through; display:block; line-height:1; font-family:var(--font-m); font-weight:400; }
.btn-buy {
  display:inline-flex; align-items:center; gap:4px; padding:7px 13px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color:#fff; border-radius:var(--radius); font-family:var(--font-b); font-weight:700;
  font-size:12px; border:none; cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0;
  box-shadow: 0 0 12px var(--accent-glow);
}
.btn-buy:hover { background: linear-gradient(135deg,#a855f7,#c084fc); transform:scale(1.04); box-shadow:0 0 20px var(--accent-glow); }

/* ─── FULL STORY ─────────────────────────── */
.product-page { display:grid; grid-template-columns:1fr 330px; gap:24px; align-items:start; }
.product-gallery { background:var(--bg-c); border:1px solid var(--brd2); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; box-shadow:0 2px 12px var(--sh); }
.product-gallery img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.product-title-full { font-family:var(--font-d); font-size:clamp(16px,2.2vw,22px); font-weight:800; line-height:1.2; margin-bottom:12px; letter-spacing:-.3px; color:var(--tx); }
.product-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.tag { padding:4px 10px; background:var(--bg-h); border:1px solid var(--brd2); border-radius:20px; font-size:11px; color:var(--tx-m); font-family:var(--font-b); font-weight:600; }
.tag.tag-accent { background:var(--accent-dim); border-color:var(--accent-b); color:var(--accent); }
.tag.tag-gold   { background:var(--gold-dim); border-color:rgba(251,191,36,0.3); color:var(--gold); }
.product-desc { background:var(--bg-c); border:1px solid var(--brd2); border-radius:var(--radius-lg); padding:20px; box-shadow:0 2px 12px var(--sh); }
.product-desc h3 { font-family:var(--font-d); font-weight:700; font-size:13px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--brd2); color:var(--tx); letter-spacing:.5px; }
.product-desc p { color:var(--tx-m); font-size:13px; line-height:1.8; margin-bottom:10px; }
.product-desc ul { padding-left:20px; color:var(--tx-m); font-size:13px; line-height:2; list-style:disc; }
/* Buy Box */
.buy-box { background:var(--bg-c); border:1px solid var(--brd2); border-radius:var(--radius-lg); padding:20px; position:sticky; top:80px; box-shadow:0 4px 24px var(--sh); }
.buy-box::before { content:''; display:block; height:2px; margin:-20px -20px 16px; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.meta-row { display:flex; justify-content:space-between; font-size:12px; color:var(--tx-m); padding:7px 0; border-bottom:1px solid var(--brd2); font-family:var(--font-b); }
.meta-row:last-child { border-bottom:none; }
.meta-row strong { color:var(--tx); font-weight:700; }
.buy-box .btn-buy { width:100%; justify-content:center; padding:13px; font-size:14px; margin-bottom:8px; border-radius:var(--radius); letter-spacing:.5px; }
/* Digiseller widget overrides */
.digiseller-buy-standalone,.digi-themed { width:100%!important; font-family:var(--font-m)!important; }
.digiseller-buy-standalone * { background-color:transparent!important; border-color:var(--brd2)!important; color:inherit!important; box-shadow:none!important; }
.digiseller-buy-standalone [class*="price"],[class*="digi-price"] { font-family:var(--font-d)!important; font-size:28px!important; font-weight:800!important; color:var(--accent)!important; text-shadow:0 0 20px var(--accent-glow)!important; }
.digiseller-buy-standalone input[type="radio"],.digiseller-buy-standalone input[type="checkbox"] { accent-color:var(--accent)!important; }
.digiseller-buy-standalone input[type="submit"],.digiseller-buy-standalone button[type="submit"] { width:100%!important; padding:13px!important; background:linear-gradient(135deg,#7c3aed,#a855f7)!important; color:#fff!important; border:none!important; border-radius:var(--radius)!important; font-family:var(--font-b)!important; font-weight:700!important; font-size:14px!important; cursor:pointer!important; box-shadow:0 0 16px var(--accent-glow)!important; text-transform:uppercase!important; letter-spacing:.5px!important; }
.digiseller-buy-standalone img { display:none!important; }
.digiseller-buy-standalone h1,.digiseller-buy-standalone h2,.digiseller-buy-standalone h3 { display:none!important; }
.digiseller-buy-standalone a { color:var(--accent)!important; }
.digiseller-buy-standalone fieldset,[class*="variant"] { background:var(--bg-h)!important; border:1px solid var(--brd2)!important; border-radius:var(--radius)!important; padding:10px!important; margin-bottom:10px!important; }
/* Notices */
.notice { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:var(--radius); font-size:12px; margin-top:10px; line-height:1.6; font-family:var(--font-b); }
.notice-info { background:rgba(168,85,247,.07); border:1px solid rgba(168,85,247,.2); color:var(--tx-m); }
.notice-warn { background:rgba(244,63,94,.07); border:1px solid rgba(244,63,94,.2); color:var(--tx-m); }
.notice-gold { background:var(--gold-dim); border:1px solid rgba(251,191,36,.3); color:var(--tx-m); }

/* ─── SIDEBAR ────────────────────────────── */
#sidebar { display:flex; flex-direction:column; gap:16px; }
.sidebar-widget { background:var(--bg-c); border:1px solid var(--brd2); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 2px 12px var(--sh); }
.widget-head { padding:12px 16px; border-bottom:1px solid var(--brd2); font-family:var(--font-d); font-weight:700; font-size:12px; display:flex; align-items:center; gap:8px; color:var(--tx); letter-spacing:.5px; }
.widget-head svg { color:var(--accent); flex-shrink:0; }
.widget-head .head-gold { color:var(--gold); }
.widget-body { padding:8px 16px; }
.top-product-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--brd2); }
.top-product-item:last-child { border-bottom:none; }
.top-product-item img { width:42px; height:42px; border-radius:8px; object-fit:cover; background:var(--bg-h); flex-shrink:0; }
.top-product-name { font-size:12px; font-weight:600; font-family:var(--font-b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tx); }
.top-product-price { font-size:12px; color:var(--accent); font-weight:700; font-family:var(--font-d); }
.cat-list-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--brd2); font-size:13px; transition:.2s; color:var(--tx); cursor:pointer; font-family:var(--font-b); }
.cat-list-item:last-child { border-bottom:none; }
.cat-list-item:hover { color:var(--accent); }
.cat-list-item .cnt { background:var(--bg-h); padding:2px 6px; border-radius:10px; font-size:10px; color:var(--tx-m); }
.about-widget { border-color:rgba(168,85,247,.2)!important; background:rgba(168,85,247,.03)!important; }

/* ─── PAGINATION ─────────────────────────── */
.pagination { display:flex; gap:6px; justify-content:center; padding:24px 0; flex-wrap:wrap; }
.pagination a,.pagination span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius); font-family:var(--font-b); font-weight:700; font-size:13px; border:1px solid var(--brd2); color:var(--tx-m); background:var(--bg-c); transition:.2s; }
.pagination a:hover { border-color:var(--accent-b); color:var(--accent); background:var(--accent-dim); }
.pagination .current { background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; border-color:transparent; }

/* ─── FOOTER ─────────────────────────────── */
#footer { background:var(--bg-s); border-top:1px solid var(--brd); margin-top:48px; position:relative; }
#footer::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),var(--gold),var(--accent),transparent); }
.footer-compact { padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-left { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.footer-copy { font-size:11px; color:var(--tx-f); font-family:var(--font-b); white-space:nowrap; }
.footer-nav { display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; justify-content:center; flex:1; }
.footer-nav a { color:var(--tx-m); font-size:12px; font-family:var(--font-b); transition:.2s; white-space:nowrap; }
.footer-nav a:hover { color:var(--accent); }
.footer-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.footer-note { font-size:10px; color:var(--tx-f); font-family:var(--font-b); }

/* ─── RESPONSIVE ─────────────────────────── */
@media(max-width:1024px){
  .grid-main{grid-template-columns:1fr}
  #sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .product-page{grid-template-columns:1fr}
  .buy-box{position:static}
}
@media(max-width:768px){
  #nav{display:none}
  .mobile-toggle{display:flex}
  .mobile-nav{display:block}
  .search-form{display:none}
  .header-right .btn{display:none}
  .header-social{display:none}
  .hero{padding:24px 18px}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  #sidebar{grid-template-columns:1fr}
  .footer-compact{flex-direction:column;text-align:center}
  .footer-nav{justify-content:center}
}
@media(max-width:480px){
  .wrapper{padding:0 13px}
  .hero h1{font-size:20px}
  .hero{padding:20px 14px}
  .hero-stats{gap:14px}
  .hero-stat .num{font-size:18px}
  .categories{gap:6px}
  .category-pill{padding:6px 11px;font-size:11px}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .footer-left{flex-direction:column;gap:6px}
  .platform-tags{gap:5px}
  .ptag{font-size:10px;padding:4px 9px}
}

/* ====== DLE Additional Template Styles ====== */

/* Auth pages & forms */
.auth-page, .feedback-page, .add-news-form, .pm-page, .search-page, .search-start-page,
.static-page, .rules-page, .tags-page, .favorites-page, .newsletter-page, .profile-edit-page,
.userinfo-page, .error-page, .info-page {
  background: var(--bg-c);
  border: 1px solid var(--brd);
  border-radius: var(--radius-l);
  padding: 24px;
  margin-bottom: 20px;
}

/* Comments section */
.comments-form {
  background: var(--bg-c);
  border: 1px solid var(--brd);
  border-radius: var(--radius-l);
  padding: 20px;
  margin-top: 20px;
}

.comment-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--brd);
}
.comment-item:last-child { border-bottom: none; }

/* Related news */
.related-news .products-grid {
  gap: 12px;
}

/* Poll */
.poll-block input[type="radio"],
.poll-block input[type="checkbox"] {
  accent-color: var(--accent);
}
.poll-block .poll-bar {
  height: 6px;
  background: var(--bg-h);
  border-radius: 3px;
  margin: 4px 0;
  overflow: hidden;
}
.poll-block .poll-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s;
}

/* Navigation */
.navigation a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Breadcrumbs / speedbar */
.breadcrumbs a { color: var(--tx-m); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

/* Attachment block */
.attachment-block:hover { border-color: var(--accent); }

/* Profile popup */
.profile-popup { box-shadow: 0 8px 32px rgba(0,0,0,.4); }

/* Tags styling */
.tags-page .tag,
.tagscloud .tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-h);
  border: 1px solid var(--brd);
  border-radius: var(--radius);
  color: var(--tx-m);
  font-size: 11px;
  font-family: var(--font-b);
  text-decoration: none;
  transition: .2s;
}
.tags-page .tag:hover,
.tagscloud .tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Captcha */
.captcha-block img { height: 40px; }

/* Category list in sidebar - see below for main styles */

/* PM page */
.pm-page .pm-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--brd);
  font-size: 13px;
}

/* Pagination fix */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: var(--bg-h);
  border: 1px solid var(--brd);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--tx-m);
  font-family: var(--font-b);
  text-decoration: none;
  transition: .2s;
}
.pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination span.navigation_active,
.pagination span.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Form elements global */
select {
  padding: 10px 14px;
  background: var(--bg-h);
  border: 1px solid var(--brd);
  border-radius: var(--radius);
  color: var(--tx);
  font-size: 13px;
  font-family: var(--font-m);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Mobile responsive for new elements */
@media (max-width: 768px) {
  .auth-page, .feedback-page, .add-news-form, .pm-page, .search-page, .search-start-page,
  .static-page, .rules-page, .tags-page, .favorites-page, .newsletter-page, .profile-edit-page,
  .userinfo-page, .error-page, .info-page {
    padding: 16px;
  }
  .comments-form { padding: 14px; }
}

/* Header auth buttons (login.tpl) */
.header-auth {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sidebar catlist links */
.catlist {
  display: flex;
  flex-direction: column;
}
.catlist a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  color: var(--tx-m);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--brd);
  transition: color .15s, background .15s;
}
.catlist a svg {
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .15s;
}
.catlist a:hover svg {
  opacity: 1;
  stroke: var(--accent);
}
.catlist a:last-child { border-bottom: none; }
.catlist a:hover {
  color: var(--accent);
  background: var(--bg-h);
}

/* ========== DLE System Modals ========== */
/* Login popup */
.ui-widget-overlay {
  background: rgba(0,0,0,.7) !important;
  backdrop-filter: blur(4px);
}
.ui-dialog {
  background: var(--bg-c) !important;
  border: 1px solid var(--brd) !important;
  border-radius: var(--radius-l) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--brd) !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
}
.ui-dialog .ui-dialog-title {
  color: var(--tx) !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  color: var(--tx-m) !important;
  opacity: .7;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  opacity: 1;
}
.ui-dialog .ui-dialog-content {
  background: var(--bg-c) !important;
  color: var(--tx) !important;
  padding: 20px !important;
}
.ui-dialog input[type="text"],
.ui-dialog input[type="password"],
.ui-dialog input[type="email"] {
  width: 100% !important;
  padding: 10px 14px !important;
  background: var(--bg-h) !important;
  border: 1px solid var(--brd) !important;
  border-radius: var(--radius) !important;
  color: var(--tx) !important;
  font-size: 13px !important;
  font-family: var(--font-m) !important;
  box-sizing: border-box !important;
}
.ui-dialog input[type="text"]:focus,
.ui-dialog input[type="password"]:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
.ui-dialog label {
  color: var(--tx-m) !important;
  font-size: 12px !important;
}
.ui-dialog .ui-button,
.ui-dialog button[type="submit"],
.ui-dialog input[type="submit"] {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-family: var(--font-b) !important;
  cursor: pointer !important;
  transition: .2s !important;
}
.ui-dialog .ui-button:hover,
.ui-dialog button[type="submit"]:hover {
  filter: brightness(1.15) !important;
}
/* DLE fast login form */
#dlefastloginform,
.dle-popup-login {
  background: var(--bg-c) !important;
  color: var(--tx) !important;
}
/* DLE info/error messages */
.dle-info, .dle-error, .dle-success {
  background: var(--bg-c) !important;
  border: 1px solid var(--brd) !important;
  color: var(--tx) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
}
/* DLE pagination override */
.pnavi, .navigation {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.pnavi span, .pnavi a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: var(--bg-h);
  border: 1px solid var(--brd);
  border-radius: var(--radius);
  color: var(--tx-m);
  font-size: 12px;
  font-family: var(--font-b);
  text-decoration: none;
  transition: .2s;
}
.pnavi a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pnavi .swchItemA, .pnavi span.navi_current {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ========== GOOGLE TRANSLATE WIDGET ========== */
/* === LANG SWITCHER === */
.lang-switcher { display: inline-flex; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--brd); }
.lang-btn { background: transparent; border: none; color: var(--tx-m); font-size: 11px; font-family: var(--font-b); font-weight: 700; padding: 4px 10px; cursor: pointer; transition: all .2s; letter-spacing: .3px; }
.lang-btn:hover { color: var(--tx); background: var(--bg-h); }
.lang-btn.active { background: var(--accent); color: #fff; }
/* Hide Google Translate UI but keep functional */
#google_translate_element { position: fixed !important; left: -9999px !important; top: -9999px !important; opacity: 0 !important; }
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
iframe.goog-te-banner-frame { display: none !important; }

/* Fix Google Translate on dark theme */
/* Google Translate dark theme overrides */
[data-theme="dark"] .goog-te-combo { background: var(--bg-h); color: var(--tx-m); }
[data-theme="dark"] .goog-te-combo option { background: var(--bg-c); color: var(--tx); }

/* ========== USER SIDE PANEL (slide from right) ========== */
/* Styles are in login.tpl <style> block for DLE processing. */

/* ========== SCROLL NAV (sticky left) ========== */
.scroll-nav {
  position: fixed; left: 14px; bottom: 50%; transform: translateY(50%);
  z-index: 900; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.scroll-nav.visible { opacity: 1; pointer-events: auto; }
.scroll-nav-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-c); border: 1px solid var(--brd);
  color: var(--tx-m); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px var(--sh); transition: all .2s;
}
.scroll-nav-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
@media(max-width:768px) {
  .scroll-nav { left: 8px; }
  .scroll-nav-btn { width: 34px; height: 34px; }
}

/* ========== LANG BTN LOADING ========== */
.lang-btn.loading { opacity: .5; pointer-events: none; }
.lang-btn.loading::after { content: '…'; }

/* ========== LIGHT THEME EXTRA FIXES ========== */
[data-theme="light"] .hero { background: var(--bg-c); border-color: var(--brd); }
[data-theme="light"] .hero p { color: #4a3d66; }
[data-theme="light"] .product-card { background: var(--bg-c); border-color: var(--brd); }
[data-theme="light"] .product-name a { color: var(--tx); }
[data-theme="light"] .ticker-item { color: #4a3d66; }
[data-theme="light"] .sidebar-widget { border-color: var(--brd); }
[data-theme="light"] .widget-body { color: #4a3d66; }
[data-theme="light"] .notice { color: #4a3d66; }
[data-theme="light"] .category-pill { color: #4a3d66; border-color: var(--brd); }
[data-theme="light"] .footer-brand p, [data-theme="light"] .footer-col a, [data-theme="light"] .footer-bottom { color: #4a3d66; }
[data-theme="light"] .footer-nav a { color: #4a3d66; }
[data-theme="light"] .footer-copy { color: #6b5b8a; }
[data-theme="light"] .footer-note { color: #6b5b8a; }
[data-theme="light"] .search-form { background: #f0ebff; border-color: var(--brd); }
[data-theme="light"] .search-form:focus-within { background: #fff; border-color: var(--accent); }
[data-theme="light"] .scroll-nav-btn { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }