/* ══════════════════════════════════════════════════════════════
   PIXLHUB — REDESIGNED DESIGN SYSTEM
   Dark Predator Edition
══════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS (loaded in header) ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  /* Brand palette */
  --violet: #6d28d9;
  --violet-l: #8b5cf6;
  --violet-ll: #c4b5fd;
  --violet-d: #4c1d95;
  --orange: #f97316;
  --orange-l: #fb923c;
  --orange-d: #c2410c;
  --red: #ef4444;
  --green: #10b981;
  --yellow: #f59e0b;
  --blue: #3b82f6;

  /* --purple aliases — many pages use these names */
  --purple:   #6d28d9;
  --purple-l: #8b5cf6;
  --purple-ll:#c4b5fd;
  --purple-d: #4c1d95;

  /* Surfaces */
  --bg: #070709;
  --bg2: #0c0c10;
  --surface: #111116;
  --surface2: #18181f;
  --surface3: #1e1e27;
  --glass: rgba(17,17,22,0.7);

  /* Borders */
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --border-v: rgba(109,40,217,0.3);

  /* Text */
  --text: #f0f0f8;
  --text2: #9090a8;
  --text3: #505068;

  /* Type */
  --font: 'Inter', 'Noto Kufi Arabic', sans-serif;
  --display: 'Bebas Neue', 'Noto Kufi Arabic', sans-serif;

  /* UI */
  --hdr: 68px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-v: 0 0 40px rgba(109,40,217,0.15);

  /* Gradients */
  --grad-v: linear-gradient(135deg, var(--violet), var(--violet-l));
  --grad-fire: linear-gradient(135deg, var(--violet), var(--orange));
}

[data-theme=light] {
  --bg: #f5f5f7;
  --bg2: #ececf0;
  --surface: #ffffff;
  --surface2: #f5f5f7;
  --surface3: #ececf0;
  --glass: rgba(255,255,255,0.85);
  --border: rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.12);
  --border-v: rgba(109,40,217,0.25);
  --text: #0a0a0f;
  --text2: #505068;
  --text3: #9090a8;
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration:none; color:inherit }
img { max-width:100%; display:block }
button { cursor:pointer; border:none; outline:none; background:none; font-family:var(--font) }
input, select, textarea { font-family:var(--font) }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--violet) }

/* Focus */
:focus-visible { outline:2px solid var(--violet-l); outline-offset:2px; border-radius:4px }

/* ══════════════════════════════════════
   UTILITY CLASSES
══════════════════════════════════════ */
.container { max-width:1440px; margin:0 auto; padding:0 28px }
.section-pad { padding:80px 0 }
.sec-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--violet-l); margin-bottom:12px;
}
.sec-eyebrow i { font-size:10px }
.section-title {
  font-family:var(--display); font-size:clamp(28px, 3.5vw, 46px);
  font-weight:400; letter-spacing:.02em; line-height:1;
  margin-bottom:8px;
}
.section-sub { font-size:14px; color:var(--text2); }
.sec-hdr { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:12px }

/* Gradient text */
.g-text {
  background: var(--grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════
   BUTTON SYSTEM
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius);
  font-size:13px; font-weight:700; letter-spacing:.01em;
  transition:all .2s; cursor:pointer; white-space:nowrap;
  font-family:var(--font);
}
.btn-primary {
  background: var(--grad-v);
  color:#fff;
  box-shadow: 0 4px 20px rgba(109,40,217,0.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(109,40,217,0.5); filter:brightness(1.1) }
.btn-primary:active { transform:translateY(0) }

.btn-secondary {
  background:var(--surface2); border:1px solid var(--border2);
  color:var(--text2);
}
.btn-secondary:hover { background:var(--surface3); color:var(--text); border-color:var(--border-v) }

.btn-outline {
  background:transparent; border:1px solid var(--border-v);
  color:var(--violet-ll);
}
.btn-outline:hover { background:rgba(109,40,217,0.1); border-color:var(--violet-l) }

.btn-ghost {
  background:transparent; color:var(--text2);
  padding:8px 12px;
}
.btn-ghost:hover { color:var(--text) }

.btn-sm { padding:8px 16px; font-size:12px }
.btn-fire {
  background: var(--grad-fire);
  color:#fff;
  box-shadow:0 4px 20px rgba(249,115,22,0.3);
}
.btn-fire:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(249,115,22,0.45) }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
#site-header {
  position:sticky; top:0; z-index:500;
  height:var(--hdr);
  background:rgba(7,7,9,0.85);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
[data-theme=light] #site-header { background:rgba(245,245,247,0.92) }

.hdr-inner {
  display:flex; align-items:center; gap:16px;
  max-width:1440px; margin:0 auto; padding:0 28px; height:100%;
}

/* Logo */
.hdr-logo { display:flex; align-items:center; gap:11px; flex-shrink:0 }
.hdr-logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--grad-fire);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
  box-shadow:0 0 20px rgba(109,40,217,0.4);
  transition:transform .2s, box-shadow .2s;
}
.hdr-logo:hover .hdr-logo-icon { transform:rotate(-5deg) scale(1.05); box-shadow:0 0 30px rgba(249,115,22,0.5) }
.hdr-logo-text {
  font-family:var(--display); font-size:22px; letter-spacing:.08em;
  background:var(--grad-fire);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Nav */
.hdr-nav { display:flex; align-items:center; gap:1px }
.hdr-nav a {
  padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--text2);
  transition:all .15s; position:relative;
}
.hdr-nav a::after {
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:0; height:2px; border-radius:1px;
  background:var(--grad-fire); transition:width .2s;
}
.hdr-nav a:hover { color:var(--text); background:rgba(255,255,255,0.04) }
.hdr-nav a.active { color:var(--violet-ll) }
.hdr-nav a.active::after { width:20px }

/* Search */
.hdr-search { flex:1; max-width:380px; position:relative }
.hdr-search input {
  width:100%; padding:10px 16px 10px 40px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text);
  font-size:13px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.hdr-search input:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(109,40,217,0.15) }
.hdr-search input::placeholder { color:var(--text3) }
.hdr-search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:13px; pointer-events:none }

/* Actions */
.hdr-actions { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0 }
.hdr-btn {
  width:38px; height:38px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--text2);
  transition:all .15s; position:relative; flex-shrink:0;
}
.hdr-btn:hover { background:var(--surface2); color:var(--text); border-color:var(--border2) }
.hdr-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--orange);
  color:#fff; font-size:9px; font-weight:800;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 0 8px rgba(249,115,22,0.5);
}
.hdr-badge.visible { display:flex }
.hdr-badge.bump { animation:bump .3s ease }
@keyframes bump { 0%,100%{transform:scale(1)} 50%{transform:scale(1.6)} }

/* User dropdown */
.hdr-user-wrap { position:relative }
.hdr-user-btn {
  display:flex; align-items:center; gap:9px;
  padding:7px 13px; border-radius:10px;
  background:rgba(109,40,217,0.1); border:1px solid var(--border-v);
  cursor:pointer; transition:all .15s;
  font-size:13px; font-weight:600; color:var(--violet-ll);
}
.hdr-user-btn:hover { background:rgba(109,40,217,0.18) }
.hdr-user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--grad-fire);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; overflow:hidden; flex-shrink:0;
}
.hdr-user-avatar img { width:100%; height:100%; object-fit:cover }

.role-pip { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px }
.role-user{background:var(--text3)}.role-vip{background:var(--yellow)}.role-mod{background:var(--blue)}
.role-admin{background:var(--violet)}.role-superadmin{background:var(--red)}

.user-dropdown {
  position:absolute; top:calc(100%+10px); right:0;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:var(--radius-lg); padding:6px;
  min-width:220px; z-index:600;
  box-shadow:var(--shadow); animation:fadeDown .2s; display:none;
}
.hdr-user-wrap:hover .user-dropdown { display:block }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.ud-head { padding:10px 12px; border-bottom:1px solid var(--border); margin-bottom:4px }
.ud-name { font-weight:700; font-size:14px }
.ud-email { font-size:11px; color:var(--text3); margin-top:1px }
.ud-role-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:5px }
.rb-user{background:rgba(148,163,184,.12);color:var(--text2)} .rb-vip{background:rgba(245,158,11,.12);color:var(--yellow)}
.rb-mod{background:rgba(59,130,246,.12);color:var(--blue)} .rb-admin{background:rgba(109,40,217,.12);color:var(--violet-ll)}
.rb-superadmin{background:rgba(239,68,68,.12);color:var(--red)}

.ud-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--text2);
  transition:all .12s; cursor:pointer; width:100%;
  background:none; border:none; font-family:var(--font);
}
.ud-item:hover { background:rgba(255,255,255,0.05); color:var(--text) }
.ud-item i { width:16px; text-align:center; font-size:13px; color:var(--text3) }
.ud-divider { height:1px; background:var(--border); margin:4px 0 }
.ud-logout { color:var(--red)!important } .ud-logout i { color:var(--red)!important }

.hdr-login {
  display:flex; align-items:center; gap:7px;
  padding:8px 18px; border-radius:9px;
  background:var(--grad-v); color:#fff;
  font-size:13px; font-weight:700;
  transition:all .15s; box-shadow:0 2px 12px rgba(109,40,217,0.35);
}
.hdr-login:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(109,40,217,0.5); filter:brightness(1.1) }

/* Mobile nav */
.mob-menu-btn {
  width:38px; height:38px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  display:none; align-items:center; justify-content:center;
  font-size:17px; color:var(--text);
}
.mob-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:498; display:none; backdrop-filter:blur(4px) }
.mob-overlay.open { display:block }
.mob-nav {
  position:fixed; top:0; left:-300px; width:280px; height:100vh;
  background:var(--surface2); border-right:1px solid var(--border2);
  z-index:499; transition:left .3s cubic-bezier(.22,.68,0,1.1);
  padding:20px; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px;
}
.mob-nav.open { left:0 }
.mob-nav-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px }
.mob-nav a {
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--text2);
  transition:all .15s;
}
.mob-nav a:hover { background:rgba(255,255,255,0.05); color:var(--text) }
.mob-nav a.active { background:rgba(109,40,217,0.12); color:var(--violet-ll) }
.mob-divider { height:1px; background:var(--border); margin:8px 0 }

/* ══════════════════════════════════════
   CART DRAWER
══════════════════════════════════════ */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); z-index:900; opacity:0; pointer-events:none; transition:opacity .3s }
.cart-overlay.open { opacity:1; pointer-events:all }
.cart-drawer {
  position:fixed; top:0; right:-460px; width:440px; max-width:100vw;
  height:100vh; background:var(--surface2); border-left:1px solid var(--border2);
  z-index:901; display:flex; flex-direction:column;
  transition:right .32s cubic-bezier(.22,.68,0,1.2);
  box-shadow:-24px 0 80px rgba(0,0,0,0.6);
}
.cart-drawer.open { right:0 }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--border); flex-shrink:0 }
.drawer-title { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:20px; letter-spacing:.04em }
.drawer-count-pill { background:var(--grad-v); color:#fff; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:700; font-family:var(--font) }
.drawer-close { width:34px; height:34px; border-radius:8px; background:var(--surface3); border:1px solid var(--border2); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; transition:all .15s }
.drawer-close:hover { background:rgba(239,68,68,0.15); color:var(--red) }
.drawer-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px }
.drawer-body::-webkit-scrollbar { width:4px }
.drawer-body::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:4px }
.drawer-item { display:flex; align-items:flex-start; gap:12px; background:var(--surface3); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; transition:border-color .15s }
.drawer-item:hover { border-color:var(--border-v) }
.di-img { width:64px; height:56px; border-radius:8px; background:var(--bg2); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden }
.di-img img { width:100%; height:100%; object-fit:cover }
.di-info { flex:1; min-width:0 }
.di-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px }
.di-price { font-size:11px; color:var(--text3); margin-bottom:8px }
.di-controls { display:flex; align-items:center; gap:6px }
.qty-btn { width:27px; height:27px; border-radius:6px; background:var(--surface); border:1px solid var(--border2); color:var(--text2); display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; transition:all .12s }
.qty-btn:hover { border-color:var(--violet); color:var(--violet-ll) }
.qty-val { min-width:28px; text-align:center; font-size:13px; font-weight:700 }
.di-remove { margin-left:4px; width:27px; height:27px; border-radius:6px; background:transparent; border:1px solid var(--border); color:var(--text3); display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; transition:all .12s }
.di-remove:hover { background:rgba(239,68,68,0.12); color:var(--red); border-color:rgba(239,68,68,0.3) }
.di-subtotal { font-family:var(--display); font-size:15px; letter-spacing:.03em; color:var(--violet-ll); white-space:nowrap; flex-shrink:0 }
.drawer-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding:40px 20px; gap:12px }
.drawer-empty-icon { width:72px; height:72px; border-radius:50%; background:rgba(109,40,217,0.08); border:2px dashed rgba(109,40,217,0.2); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--violet-l); margin-bottom:8px }
.drawer-empty h3 { font-family:var(--display); font-size:20px; letter-spacing:.04em }
.drawer-empty p { font-size:13px; color:var(--text3) }

.drawer-login-prompt { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding:40px 20px; gap:12px }
.drawer-login-prompt i.fa-lock { width:72px; height:72px; border-radius:50%; background:rgba(109,40,217,0.08); border:2px dashed rgba(109,40,217,0.2); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--violet-l); margin-bottom:8px }
.drawer-login-prompt h3 { font-family:var(--display); font-size:20px; letter-spacing:.04em }
.drawer-login-prompt p { font-size:13px; color:var(--text3) }
.drawer-login-prompt > a { padding:11px 28px; background:var(--grad-v); color:#fff; border-radius:var(--radius); font-size:13px; font-weight:700; transition:filter .15s }
.drawer-login-prompt > a:hover { filter:brightness(1.1) }
.drawer-login-prompt p a { color:var(--violet-ll); font-weight:600 }
.drawer-login-prompt p a:hover { text-decoration:underline }
.drawer-foot { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; gap:10px }
.drawer-summary { display:flex; flex-direction:column; gap:6px }
.ds-row { display:flex; justify-content:space-between; font-size:13px; color:var(--text2) }
.ds-total { font-family:var(--display); font-size:18px; letter-spacing:.04em; color:var(--text); padding-top:8px; border-top:1px solid var(--border); margin-top:4px }
.drawer-checkout-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; background:var(--grad-v); color:#fff;
  border-radius:var(--radius); font-size:15px; font-weight:700;
  font-family:var(--display); letter-spacing:.04em;
  cursor:pointer; transition:all .15s;
  box-shadow:0 4px 20px rgba(109,40,217,0.4);
  text-decoration:none;
}
.drawer-checkout-btn:hover { filter:brightness(1.1); transform:translateY(-1px) }
.drawer-checkout-btn:active { transform:scale(.98) }
.drawer-clear-btn { width:100%; padding:9px; background:transparent; border:1px solid var(--border2); border-radius:var(--radius); font-size:12px; color:var(--text3); cursor:pointer; transition:all .15s; font-family:var(--font) }
.drawer-clear-btn:hover { border-color:var(--red); color:var(--red) }

/* ══════════════════════════════════════
   WISHLIST DRAWER
══════════════════════════════════════ */
.wish-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); z-index:900; opacity:0; pointer-events:none; transition:opacity .3s }
.wish-overlay.open { opacity:1; pointer-events:all }
.wish-drawer { position:fixed; top:0; right:-460px; width:440px; max-width:100vw; height:100vh; background:var(--surface2); border-left:1px solid var(--border2); z-index:901; display:flex; flex-direction:column; transition:right .32s cubic-bezier(.22,.68,0,1.2); box-shadow:-24px 0 80px rgba(0,0,0,0.6) }
.wish-drawer.open { right:0 }
.wish-header { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--border); flex-shrink:0 }
.wish-title { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:20px; letter-spacing:.04em }
.wish-count-pill { background:var(--red); color:#fff; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:700 }
.wish-close { width:34px; height:34px; border-radius:8px; background:var(--surface3); border:1px solid var(--border2); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; transition:all .15s }
.wish-close:hover { background:rgba(239,68,68,0.15); color:var(--red) }
.wish-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px }
.wish-body::-webkit-scrollbar { width:4px }
.wish-body::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:4px }
.wish-item { display:flex; align-items:center; gap:12px; background:var(--surface3); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; transition:border-color .15s }
.wish-item:hover { border-color:var(--border2) }
.wi-img { width:64px; height:56px; border-radius:8px; background:var(--bg2); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; cursor:pointer }
.wi-img img { width:100%; height:100%; object-fit:cover }
.wi-info { flex:1; min-width:0 }
.wi-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; cursor:pointer }
.wi-title:hover { color:var(--violet-ll) }
.wi-price { font-family:var(--display); font-size:16px; letter-spacing:.03em; color:var(--violet-ll) }
.wi-actions { display:flex; gap:7px; margin-top:8px }
.wi-add-btn { flex:1; padding:7px 10px; background:var(--grad-v); color:#fff; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; transition:all .15s; font-family:var(--font) }
.wi-add-btn:hover { filter:brightness(1.1) }
.wi-remove-btn { width:32px; height:32px; border-radius:7px; background:transparent; border:1px solid var(--border2); color:var(--text3); display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; transition:all .12s }
.wi-remove-btn:hover { background:rgba(239,68,68,0.12); color:var(--red); border-color:rgba(239,68,68,0.3) }
.wish-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding:40px 20px; gap:12px }
.wish-empty-icon { width:72px; height:72px; border-radius:50%; background:rgba(239,68,68,0.08); border:2px dashed rgba(239,68,68,0.2); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--red); margin-bottom:8px }
.wish-empty h3 { font-family:var(--display); font-size:20px; letter-spacing:.04em }
.wish-empty p { font-size:13px; color:var(--text3) }
.wish-foot { padding:12px 20px; border-top:1px solid var(--border); flex-shrink:0 }
.wish-view-all { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; background:var(--surface3); border:1px solid var(--border2); border-radius:var(--radius); font-size:13px; font-weight:600; color:var(--text2); transition:all .15s }
.wish-view-all:hover { color:var(--text); border-color:var(--border-v) }

.wish-login-prompt { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding:40px 20px; gap:12px }
.wish-login-prompt i.fa-lock { width:72px; height:72px; border-radius:50%; background:rgba(239,68,68,0.08); border:2px dashed rgba(239,68,68,0.2); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--red); margin-bottom:8px }
.wish-login-prompt h3 { font-family:var(--display); font-size:20px; letter-spacing:.04em }
.wish-login-prompt p { font-size:13px; color:var(--text3) }
.wish-login-prompt > a { padding:11px 28px; background:var(--grad-v); color:#fff; border-radius:var(--radius); font-size:13px; font-weight:700; transition:filter .15s }
.wish-login-prompt > a:hover { filter:brightness(1.1) }
.wish-login-prompt p a { color:var(--violet-ll); font-weight:600 }
.wish-login-prompt p a:hover { text-decoration:underline }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
#toast-wrap { position:fixed; bottom:28px; right:28px; z-index:2000; display:flex; flex-direction:column; gap:10px; pointer-events:none }
.toast {
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; border-radius:var(--radius-lg);
  background:var(--surface2); border:1px solid var(--border2);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  font-size:14px; font-weight:600;
  animation:toastIn .35s cubic-bezier(.22,.68,0,1.2) both;
  pointer-events:all; min-width:240px; max-width:340px;
}
.toast.out { animation:toastOut .28s ease forwards }
.toast i { font-size:15px; flex-shrink:0 }
.toast.success { border-color:rgba(16,185,129,0.3); }
.toast.success i { color:var(--green) }
.toast.error { border-color:rgba(239,68,68,0.3) }
.toast.error i { color:var(--red) }
.toast.info { border-color:var(--border-v) }
.toast.info i { color:var(--violet-ll) }
@keyframes toastIn { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(8px)} }

/* ══════════════════════════════════════
   HERO SLIDESHOW
══════════════════════════════════════ */
.hero {
  position:relative;
  height:calc(100vh - var(--hdr));
  min-height:580px; max-height:860px;
  overflow:hidden;
  background:var(--bg);
  direction:ltr;
}

/* Pixlhub-eye signature: glowing gradient orb */
.hero::before {
  content:'';
  position:absolute;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(109,40,217,0.22) 0%, rgba(249,115,22,0.08) 40%, transparent 70%);
  top:-200px; right:-100px; pointer-events:none; z-index:1;
  animation:pixlhubEye 8s ease-in-out infinite alternate;
}
@keyframes pixlhubEye { from{transform:scale(1) translate(0,0)} to{transform:scale(1.15) translate(-30px,20px)} }

.slides-track { display:flex; height:100%; transition:transform .8s cubic-bezier(.77,0,.18,1); direction:ltr }
.slide { min-width:100%; height:100%; position:relative; display:flex; align-items:center; direction:ltr }
.slide-bg { position:absolute; inset:0 }
.slide-bg-img { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.18; transition:opacity .5s }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(115deg, rgba(7,7,9,.97) 0%, rgba(7,7,9,.7) 55%, rgba(7,7,9,.2) 100%) }
.slide-content { position:relative; z-index:2; max-width:1440px; margin:0 auto; padding:0 60px; width:100% }

.slide-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:30px;
  background:rgba(109,40,217,0.12); border:1px solid rgba(109,40,217,0.3);
  color:var(--violet-ll); font-size:12px; font-weight:700; letter-spacing:.06em;
  margin-bottom:20px; animation:heroUp .6s .1s both;
}

.slide-title {
  font-family:var(--display);
  font-size:clamp(42px, 7vw, 96px);
  letter-spacing:.04em;
  line-height:.95;
  margin-bottom:20px;
  text-transform:uppercase;
  animation:heroUp .6s .2s both;
}
.slide-title .accent {
  background:var(--grad-fire);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.slide-sub {
  font-size:clamp(14px,1.4vw,17px); color:var(--text2);
  max-width:500px; margin-bottom:36px; line-height:1.7;
  animation:heroUp .6s .3s both;
}

.slide-btns { display:flex; gap:12px; flex-wrap:wrap; animation:heroUp .6s .4s both }
.slide-btns .btn { padding:14px 28px; font-size:14px }

.slide-stats { display:flex; gap:44px; margin-top:52px; animation:heroUp .6s .5s both }
.slide-stat-num { font-family:var(--display); font-size:32px; letter-spacing:.04em; color:var(--violet-ll); line-height:1 }
.slide-stat-lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; margin-top:4px }

@keyframes heroUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

.hero-arr {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.06); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text2); display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; transition:all .2s;
}
.hero-arr:hover { background:var(--violet); border-color:var(--violet); color:#fff }
.hero-arr.prev { left:24px } .hero-arr.next { right:24px }

.hero-dots { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:10 }
.hero-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.2); cursor:pointer; transition:all .3s }
.hero-dot.active { width:28px; border-radius:4px; background:var(--grad-fire) }

/* ══════════════════════════════════════
   CATEGORY GRID
══════════════════════════════════════ */
.cat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:14px;
}

.cat-card {
  position:relative;
  background:linear-gradient(145deg,#12082a,#0e0e1a);
  border:1px solid rgba(109,40,217,0.18);
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, border-color .28s;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  padding:28px 14px 20px;
  text-align:center;
  gap:0;
}
.cat-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(109,40,217,0.10) 0%,transparent 60%);
  opacity:0;
  transition:opacity .28s;
}
.cat-card:hover {
  transform:translateY(-7px) scale(1.03);
  box-shadow:0 20px 48px rgba(109,40,217,0.32), 0 0 0 1px rgba(139,92,246,0.35) inset;
  border-color:rgba(139,92,246,0.55);
}
.cat-card:hover::before { opacity:1 }

/* Icon bubble */
.cat-icon-wrap {
  width:72px; height:72px;
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(109,40,217,0.22),rgba(139,92,246,0.08));
  border:1px solid rgba(139,92,246,0.22);
  margin-bottom:16px;
  position:relative;
  transition:background .28s, box-shadow .28s;
  flex-shrink:0;
}
.cat-card:hover .cat-icon-wrap {
  background:linear-gradient(135deg,rgba(109,40,217,0.45),rgba(139,92,246,0.20));
  box-shadow:0 8px 24px rgba(109,40,217,0.35);
}
.cat-icon-wrap svg { width:36px; height:36px; display:block; }

/* Glow dot behind icon */
.cat-icon-wrap::after {
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:28px;
  background:radial-gradient(circle,rgba(139,92,246,0.18) 0%,transparent 70%);
  opacity:0;
  transition:opacity .28s;
}
.cat-card:hover .cat-icon-wrap::after { opacity:1 }

.cat-card-body { width:100%; }
.cat-name {
  font-size:12.5px; font-weight:800; color:#e2d9f3;
  margin-bottom:5px; letter-spacing:.01em;
  line-height:1.25;
}
.cat-cnt {
  font-size:10.5px; color:rgba(167,139,250,0.75);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}

/* Bottom accent line */
.cat-card::after {
  content:'';
  position:absolute; bottom:0; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  border-radius:2px;
  opacity:0; transition:opacity .28s;
}
.cat-card:hover::after { opacity:1 }

/* Legacy fields - hide */
.cat-img-area, .cat-img-overlay, .cat-bottom-bar { display:none !important }

/* ══════════════════════════════════════
   PRODUCT CARDS
══════════════════════════════════════ */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px }
.prod-scroll { display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory }
.prod-scroll::-webkit-scrollbar { height:3px }
.prod-scroll::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:3px }
.prod-scroll .prod-card { min-width:260px; scroll-snap-align:start }

.prod-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:all .25s; position:relative;
  cursor:pointer;
}
.prod-card:hover {
  transform:translateY(-5px);
  border-color:var(--border-v);
  box-shadow:0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(109,40,217,0.1), var(--shadow-v);
}

.prod-img {
  height:200px; background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  padding:20px; position:relative; overflow:hidden;
}
/* Subtle grid pattern on product image bg */
.prod-img::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(109,40,217,0.08) 1px, transparent 1px);
  background-size:20px 20px; opacity:.5;
}
.prod-img img { max-height:100%; max-width:100%; object-fit:contain; position:relative; z-index:1; transition:transform .35s }
.prod-card:hover .prod-img img { transform:scale(1.07) }
.prod-img .no-img { width:54px; height:54px; border-radius:12px; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--text3); position:relative; z-index:1 }

.prod-badge-wrap { position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; gap:4px }
.prod-badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em }
.pb-hot { background:var(--red); color:#fff }
.pb-new { background:var(--green); color:#fff }
.pb-custom { background:rgba(109,40,217,0.15); color:var(--violet-ll); border:1px solid rgba(109,40,217,0.3) }
.pb-used { background:#475569; color:#fff }
.pb-open { background:var(--blue); color:#fff }
.pb-sale { background:var(--orange); color:#fff }
.pb-free { background:var(--green); color:#fff }

.prod-wish {
  position:absolute; top:10px; right:10px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(7,7,9,0.65); backdrop-filter:blur(6px);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text2); cursor:pointer;
  transition:all .18s; opacity:0;
}
.prod-card:hover .prod-wish, .prod-wish.active { opacity:1 }
.prod-wish:hover, .prod-wish.active { color:var(--red); background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.3) }

.prod-body { padding:16px; display:flex; flex-direction:column; flex:1 }
.prod-meta { font-size:10px; color:var(--text3); margin-bottom:5px; display:flex; align-items:center; gap:5px }
.prod-meta .cat-pill { background:rgba(109,40,217,0.1); color:var(--violet-l); padding:2px 7px; border-radius:5px; font-weight:700 }
.prod-title { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

.prod-stock { font-size:10px; margin-top:8px; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:5px }
.in-stock { background:rgba(16,185,129,0.08); color:var(--green) }
.low-stock { background:rgba(245,158,11,0.08); color:var(--yellow) }
.out-stock { background:rgba(239,68,68,0.08); color:var(--red) }

.prod-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:8px }
.prod-price { font-family:var(--display); font-size:22px; letter-spacing:.03em; color:var(--violet-ll); line-height:1 }
.prod-compare { font-size:11px; color:var(--text3); text-decoration:line-through }
.prod-discount { font-size:10px; font-weight:800; color:var(--orange); background:rgba(249,115,22,0.12); padding:2px 6px; border-radius:4px }
.prod-add {
  padding:9px 14px; background:var(--grad-v); color:#fff;
  border-radius:var(--radius); font-size:12px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:all .18s;
  display:flex; align-items:center; gap:6px; font-family:var(--font);
  box-shadow:0 2px 10px rgba(109,40,217,0.3);
}
.prod-add:hover { filter:brightness(1.15); transform:translateY(-1px) }

/* Scroll nav */
.scroll-nav { display:flex; gap:6px }
.scroll-nav button { width:36px; height:36px; border-radius:9px; background:var(--surface); border:1px solid var(--border2); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s }
.scroll-nav button:hover { background:var(--violet); color:#fff; border-color:var(--violet) }

/* ══════════════════════════════════════
   BUILD BANNER
══════════════════════════════════════ */
.build-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #08050f 0%, #12082a 50%, #08050f 100%);
  border-radius:var(--radius-xl); padding:64px 56px;
  border:1px solid rgba(109,40,217,0.2);
}
.build-banner::before {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(109,40,217,0.15) 0%, rgba(249,115,22,0.05) 50%, transparent 70%);
  top:-200px; right:-100px; pointer-events:none;
  animation:pixlhubEye 10s ease-in-out infinite alternate;
}
.build-banner-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center }
.build-banner h2 { font-family:var(--display); font-size:clamp(28px,4vw,56px); letter-spacing:.04em; line-height:.95; margin-bottom:14px }
.build-banner h2 span { background:var(--grad-fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.build-banner p { font-size:15px; color:var(--text2); line-height:1.75; max-width:520px; margin-bottom:28px }
.build-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px }
.build-chip {
  padding:6px 14px; border-radius:30px; font-size:11px; font-weight:700;
  border:1px solid rgba(109,40,217,0.25); color:var(--violet-ll);
  background:rgba(109,40,217,0.07);
}
.build-visual {
  width:280px; height:220px; background:var(--surface2);
  border-radius:var(--radius-lg); display:flex; align-items:center;
  justify-content:center; font-size:80px; border:1px solid var(--border);
  flex-shrink:0; position:relative; overflow:hidden;
}
.build-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center, rgba(109,40,217,0.1), transparent 70%);
}

/* ══════════════════════════════════════
   PREBUILT CARDS
══════════════════════════════════════ */
.prebuilt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px }

.pb-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all .25s; position:relative;
}
.pb-card:hover { transform:translateY(-5px); border-color:var(--border-v); box-shadow:0 16px 44px rgba(109,40,217,0.12) }

.pb-img { height:175px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:60px; background:linear-gradient(135deg, var(--bg2), var(--surface2)) }
.pb-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45 }
.pb-badge { position:absolute; top:10px; right:10px; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em }
.pb-body { padding:20px }
.pb-tier { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--violet-l); margin-bottom:5px }
.pb-name { font-family:var(--display); font-size:20px; letter-spacing:.04em; margin-bottom:14px }
.pb-specs { display:flex; flex-direction:column; gap:6px; margin-bottom:18px }
.pb-spec { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2) }
.pb-spec i { width:14px; color:var(--violet-l); flex-shrink:0; font-size:11px }
.pb-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px }
.pb-price { font-family:var(--display); font-size:28px; letter-spacing:.04em; color:var(--violet-ll) }
.pb-compare { font-size:13px; color:var(--text3); text-decoration:line-through }
.pb-acts { display:flex; gap:9px }
.pb-acts .btn { flex:1; justify-content:center; font-size:12px; padding:10px }

/* ══════════════════════════════════════
   BRANDS
══════════════════════════════════════ */
.brands-scroll { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none }
.brands-scroll::-webkit-scrollbar { display:none }
.brand-item {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); cursor:pointer; transition:all .22s;
  min-width:84px; text-decoration:none;
}
.brand-item:hover { border-color:var(--border-v); transform:translateY(-3px); background:var(--surface2) }
.brand-logo { width:44px; height:30px; display:flex; align-items:center; justify-content:center }
.brand-logo img { max-width:44px; max-height:28px; object-fit:contain; filter:brightness(0) invert(1); opacity:.6; transition:opacity .2s }
[data-theme=light] .brand-logo img { filter:none; opacity:.7 }
.brand-item:hover .brand-logo img { opacity:1 }
.brand-name { font-size:10px; font-weight:700; color:var(--text3); text-align:center; white-space:nowrap }

/* ══════════════════════════════════════
   GIVEAWAY BANNER
══════════════════════════════════════ */
.giveaway-banner {
  background:linear-gradient(135deg, rgba(109,40,217,0.1), rgba(249,115,22,0.06));
  border:1px solid rgba(109,40,217,0.2); border-radius:var(--radius-xl);
  padding:52px; display:grid; grid-template-columns:1fr auto;
  gap:40px; align-items:center; position:relative; overflow:hidden;
}
.giveaway-banner::before { content:'🎁'; position:absolute; right:-30px; top:50%; transform:translateY(-50%); font-size:200px; opacity:.05; pointer-events:none }
.gw-title { font-family:var(--display); font-size:clamp(24px, 3.5vw, 44px); letter-spacing:.04em; margin-bottom:12px }
.gw-prize { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:20px; background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); color:var(--yellow); font-size:13px; font-weight:700; margin-bottom:14px }
.gw-desc { font-size:15px; color:var(--text2); line-height:1.7; margin-bottom:22px; max-width:500px }
.gw-meta { display:flex; gap:28px; font-size:12px; color:var(--text3); margin-bottom:28px; flex-wrap:wrap }
.gw-meta span { display:flex; align-items:center; gap:7px }
.gw-meta i { color:var(--violet-l) }
.gw-img-wrap { width:210px; height:165px; border-radius:var(--radius-lg); overflow:hidden; flex-shrink:0; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:60px; border:1px solid var(--border) }
.gw-img-wrap img { width:100%; height:100%; object-fit:cover }

/* ══════════════════════════════════════
   CTA SECTION
══════════════════════════════════════ */
.cta-section {
  background:linear-gradient(135deg, rgba(109,40,217,0.1) 0%, rgba(249,115,22,0.06) 100%);
  border:1px solid rgba(109,40,217,0.15);
  border-radius:var(--radius-xl); padding:80px 56px;
  text-align:center; position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(109,40,217,0.12), transparent 70%);
  top:-150px; left:50%; transform:translateX(-50%); pointer-events:none;
}
.cta-section h2 { font-family:var(--display); font-size:clamp(30px,5vw,60px); letter-spacing:.06em; margin-bottom:16px; position:relative }
.cta-section p { font-size:16px; color:var(--text2); max-width:500px; margin:0 auto 36px; position:relative; line-height:1.7 }
.cta-nl { display:flex; gap:0; max-width:440px; margin:0 auto; position:relative }
.cta-nl input {
  flex:1; padding:14px 18px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(109,40,217,0.3);
  border-right:none; border-radius:10px 0 0 10px;
  color:var(--text); font-size:14px; outline:none;
  transition:border-color .2s;
}
.cta-nl input:focus { border-color:var(--violet) }
.cta-nl input::placeholder { color:var(--text3) }
.cta-nl button {
  padding:14px 24px; background:var(--grad-fire); color:#fff;
  border-radius:0 10px 10px 0; font-size:14px; font-weight:800;
  transition:filter .15s; font-family:var(--font);
}
.cta-nl button:hover { filter:brightness(1.12) }
.cta-perks { display:flex; justify-content:center; gap:20px; margin-top:28px; flex-wrap:wrap; position:relative }
.cta-perk { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text2) }
.cta-perk i { color:var(--violet-l) }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:64px 0 0;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:48px; max-width:1440px; margin:0 auto; padding:0 28px;
}
.footer-col h4 { font-family:var(--display); font-size:18px; letter-spacing:.06em; margin-bottom:18px; color:var(--text) }
.footer-col p { font-size:13px; color:var(--text2); line-height:1.75; margin-bottom:20px }
.footer-col a { display:block; font-size:13px; color:var(--text2); margin-bottom:9px; transition:color .15s }
.footer-col a:hover { color:var(--violet-ll) }

.social-row { display:flex; gap:9px }
.social-btn {
  width:36px; height:36px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--text); transition:all .18s;
  text-decoration:none;
}
.social-btn:hover { background:var(--violet); border-color:var(--violet); color:#fff; transform:translateY(-2px) }
.social-btn .fab, .social-btn .fas, .social-btn i { display:flex; align-items:center; justify-content:center; width:100%; height:100%; line-height:1; }

.nl-form { display:flex; gap:0; margin-top:4px }
.nl-form input {
  flex:1; padding:10px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-right:none; border-radius:8px 0 0 8px;
  color:var(--text); font-size:13px; outline:none;
}
.nl-form input:focus { border-color:var(--violet-l) }
.nl-form input::placeholder { color:var(--text3) }
.nl-form button {
  padding:10px 14px; background:var(--grad-v); color:#fff;
  border-radius:0 8px 8px 0; font-size:13px; transition:filter .15s;
}
.nl-form button:hover { filter:brightness(1.1) }

.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1440px; margin:48px auto 0; padding:20px 28px;
  border-top:1px solid var(--border);
  font-size:12px; color:var(--text3); flex-wrap:wrap; gap:12px;
}
.footer-bottom a { color:var(--text3); transition:color .15s }
.footer-bottom a:hover { color:var(--violet-ll) }
.footer-ver { font-size:11px; color:var(--text3) }

/* ══════════════════════════════════════
   SCROLL ANIMATION
══════════════════════════════════════ */
.cw-observe { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease }
.cw-visible { opacity:1; transform:none }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr }
  .cat-grid { grid-template-columns:repeat(4, 1fr); gap:12px }
}
@media (max-width:900px) {
  .hdr-nav { display:none }
  .hdr-search { max-width:240px }
  .mob-menu-btn { display:flex }
  .build-banner-inner { grid-template-columns:1fr }
  .build-visual { display:none }
  .build-banner { padding:40px 28px }
  .giveaway-banner { grid-template-columns:1fr }
  .gw-img-wrap { display:none }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
  .cat-grid { grid-template-columns:repeat(3, 1fr); gap:10px }
}
@media (max-width:640px) {
  .container { padding:0 18px }
  .section-pad { padding:56px 0 }
  .hero { min-height:520px; max-height:680px }
  .slide-content { padding:0 24px }
  .slide-stats { gap:24px }
  .cat-grid { grid-template-columns:repeat(3, 1fr); gap:10px }
  .prod-grid { grid-template-columns:repeat(2,1fr); gap:10px }
  .cta-section { padding:52px 24px }
  .footer-grid { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center }
}
@media (max-width:380px) {
  .prod-grid { grid-template-columns:1fr }
  .hdr-search { display:none }
}

/* ══════════════════════════════════════
   SEARCH AUTOCOMPLETE
══════════════════════════════════════ */
.search-drop { position:absolute; top:calc(100%+6px); left:0; right:0; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius-lg); overflow:hidden; z-index:600; box-shadow:var(--shadow); max-height:320px; overflow-y:auto; display:none }
.search-drop.open { display:block }
.sdrop-item { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background .12s; text-decoration:none; color:var(--text) }
.sdrop-item:hover { background:rgba(255,255,255,0.04) }
.sdrop-img { width:38px; height:38px; border-radius:7px; object-fit:cover; background:var(--surface3); flex-shrink:0 }
.sdrop-title { font-size:13px; font-weight:600; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.sdrop-price { font-size:12px; color:var(--violet-l); font-weight:700 }

/* ══════════════════════════════════════
   SECTION 2: ADMIN
  (unchanged — scoped under .adm-layout)
══════════════════════════════════════ */

/* ══════════════════════════════════════
   LIGHT MODE FIXES
══════════════════════════════════════ */

/* ── Hero / Slideshow ── */
[data-theme=light] .slide-overlay {
  background: linear-gradient(115deg, rgba(245,245,247,.65) 0%, rgba(245,245,247,.25) 38%, rgba(245,245,247,.00) 100%);
}
[data-theme=light] .slide-bg-img { opacity: .90 }
[data-theme=light] .slide-title { color: #0a0a0f }
[data-theme=light] .slide-title .accent {
  background: var(--grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=light] .slide-sub { color: var(--text2) }
[data-theme=light] .slide-badge {
  background: rgba(109,40,217,0.10);
  border-color: rgba(109,40,217,0.30);
  color: var(--violet);
}
[data-theme=light] .slide-stat-num { color: var(--violet) }
[data-theme=light] .slide-stat-lbl { color: var(--text3) }

/* Hero arrows — visible on light bg */
[data-theme=light] .hero-arr {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.15);
  color: #333;
}
[data-theme=light] .hero-arr:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
/* Hero dots — visible on light bg */
[data-theme=light] .hero-dot { background: rgba(0,0,0,0.18) }

/* ── Category cards — hardcoded dark gradients ── */
[data-theme=light] .cat-card {
  background: linear-gradient(145deg, #f0eaff, #f8f5ff);
  border-color: rgba(109,40,217,0.15);
}
[data-theme=light] .cat-card:hover {
  box-shadow: 0 20px 48px rgba(109,40,217,0.18), 0 0 0 1px rgba(109,40,217,0.25) inset;
}
[data-theme=light] .cat-name { color: #1a0a3e }
[data-theme=light] .cat-cnt { color: rgba(109,40,217,0.70) }
[data-theme=light] .cat-icon-wrap {
  background: linear-gradient(135deg, rgba(109,40,217,0.14), rgba(139,92,246,0.06));
  border-color: rgba(109,40,217,0.20);
}

/* ── Build Banner — hardcoded dark bg ── */
[data-theme=light] .build-banner {
  background: linear-gradient(135deg, #f0eaff 0%, #fdf4ff 50%, #f0eaff 100%);
  border-color: rgba(109,40,217,0.20);
}
[data-theme=light] .build-banner p { color: var(--text2) }
[data-theme=light] .build-chip {
  border-color: rgba(109,40,217,0.22);
  color: var(--violet);
  background: rgba(109,40,217,0.07);
}
[data-theme=light] .build-visual {
  background: rgba(109,40,217,0.06);
  border-color: rgba(109,40,217,0.15);
}

/* ── Giveaway + CTA banners ── */
[data-theme=light] .giveaway-banner {
  background: linear-gradient(135deg, rgba(109,40,217,0.07), rgba(249,115,22,0.04));
  border-color: rgba(109,40,217,0.18);
}
[data-theme=light] .cta-section {
  background: linear-gradient(135deg, rgba(109,40,217,0.07) 0%, rgba(249,115,22,0.04) 100%);
  border-color: rgba(109,40,217,0.15);
}
[data-theme=light] .cta-nl input {
  background: rgba(255,255,255,0.85);
  border-color: rgba(109,40,217,0.25);
  color: var(--text);
}
[data-theme=light] .cta-nl input::placeholder { color: var(--text3) }

/* ── btn-outline — fix invisible light text ── */
[data-theme=light] .btn-outline {
  color: var(--violet);
  border-color: rgba(109,40,217,0.40);
}
[data-theme=light] .btn-outline:hover {
  background: rgba(109,40,217,0.08);
  border-color: var(--violet);
}

/* ── btn-secondary — fix on light ── */
[data-theme=light] .btn-secondary {
  background: #fff;
  border-color: rgba(0,0,0,0.14);
  color: #333;
}
[data-theme=light] .btn-secondary:hover {
  background: #f0eaff;
  border-color: rgba(109,40,217,0.30);
  color: var(--violet);
}

/* ── Navigation hover — rgba(255,255,255,0.04) invisible on light ── */
[data-theme=light] .hdr-nav a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
[data-theme=light] .hdr-nav a.active { color: var(--violet) }

/* ── User dropdown hover ── */
[data-theme=light] .ud-item:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
[data-theme=light] .user-dropdown {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── Mobile nav hover ── */
[data-theme=light] .mob-nav a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
[data-theme=light] .mob-nav a.active {
  background: rgba(109,40,217,0.10);
  color: var(--violet);
}
[data-theme=light] .mob-nav {
  box-shadow: 4px 0 24px rgba(0,0,0,0.10);
}

/* ── Search dropdown hover ── */
[data-theme=light] .sdrop-item:hover { background: rgba(0,0,0,0.04) }
[data-theme=light] .search-drop {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── Cart / Wish drawer shadows ── */
[data-theme=light] .cart-drawer,
[data-theme=light] .wish-drawer {
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
[data-theme=light] .drawer-clear-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ── Product cards ── */
[data-theme=light] .prod-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(109,40,217,0.10);
}
[data-theme=light] .prod-wish {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.12);
  color: #555;
}

/* ── Scroll nav buttons ── */
[data-theme=light] .scroll-nav button {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  color: #444;
}
[data-theme=light] .scroll-nav button:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}

/* ── Social buttons in footer ── */
[data-theme=light] .social-btn {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  color: #333;
}

/* ── Footer newsletter input ── */
[data-theme=light] .nl-form input {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  color: var(--text);
}

/* ── Login page heading — "JOIN THE" text cut (gradient bg issue) ── */
[data-theme=light] body.login-page,
[data-theme=light] .login-wrap { background: var(--bg) }

/* ── AI Assistant page stats boxes ── */
[data-theme=light] .ai-stat-val,
[data-theme=light] .ai-stat-lbl { color: var(--text) }

/* ── Prebuilt cards ── */
[data-theme=light] .pb-card:hover {
  box-shadow: 0 16px 44px rgba(109,40,217,0.10);
}
[data-theme=light] .pb-img {
  background: linear-gradient(135deg, #ede9ff, #f5f3ff);
}

/* ── Toast notifications ── */
[data-theme=light] .toast {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── Qty buttons in cart ── */
[data-theme=light] .qty-btn {
  background: #fff;
  border-color: rgba(0,0,0,0.14);
  color: #444;
}
[data-theme=light] .qty-btn:hover { border-color: var(--violet); color: var(--violet) }

/* ── Build PC page hero (same slide-overlay logic) ── */
[data-theme=light] .bpc-hero-overlay,
[data-theme=light] .pc-hero-overlay {
  background: linear-gradient(115deg, rgba(245,245,247,.96) 0%, rgba(245,245,247,.75) 52%, rgba(245,245,247,.10) 100%);
}

/* ── violet-ll elements too faint in light mode ── */
[data-theme=light] .prod-price { color: var(--violet) }
[data-theme=light] .wi-price { color: var(--violet) }
[data-theme=light] .di-subtotal { color: var(--violet) }
[data-theme=light] .pb-price { color: var(--violet) }
[data-theme=light] .hdr-nav a.active { color: var(--violet) }
[data-theme=light] .mob-nav a.active { color: var(--violet) }

/* ── Small colour fixes (light mode) ── */
/* 1. Category pill on product cards */
[data-theme=light] .prod-meta .cat-pill { color: var(--violet) }

/* 2. Giveaway meta icons & text */
[data-theme=light] .gw-meta { color: var(--text2) }
[data-theme=light] .gw-meta i { color: var(--violet) }
/* ══════════════════════════════════════
   INTERNATIONALIZATION — Language switch
   button + RTL (Kurdish Sorani) support
══════════════════════════════════════ */
.hdr-lang-btn {
  width:auto; min-width:38px; padding:0 10px;
  font-family:'Noto Kufi Arabic', var(--font);
  font-size:12px; font-weight:800; letter-spacing:.02em;
}
[dir="rtl"] body { font-family:'Noto Kufi Arabic', var(--font); }
[dir="rtl"] { direction: rtl; }

/* Mirror header layout */
[dir="rtl"] .hdr-search-icon { left:auto; right:14px; }
[dir="rtl"] #hdr-search-input { padding-left:14px; padding-right:38px; text-align:right; }
[dir="rtl"] .mob-nav a i,
[dir="rtl"] .ud-item i,
[dir="rtl"] .hdr-login i { margin-right:0; margin-left:8px; }
[dir="rtl"] .drawer-title,
[dir="rtl"] .wish-title { flex-direction:row-reverse; }
[dir="rtl"] .hdr-badge { right:auto; left:-5px; }
[dir="rtl"] .user-msg-close { margin-right:auto; margin-left:0; }
[dir="rtl"] .sb-role-bar { left:auto; right:0; }

/* Cart/wishlist drawers slide in from the opposite (reading-start) edge in RTL */
[dir="rtl"] .cart-drawer { right:auto; left:-460px; border-left:none; border-right:1px solid var(--border2); }
[dir="rtl"] .wish-drawer { right:auto; left:-460px; border-left:none; border-right:1px solid var(--border2); }
[dir="rtl"] .cart-drawer.open,
[dir="rtl"] .wish-drawer.open { left:0; right:auto; }

/* Numerals & prices stay LTR even inside RTL text for readability */
[dir="rtl"] .prod-price,
[dir="rtl"] .wi-price,
[dir="rtl"] .di-subtotal,
[dir="rtl"] .pb-price,
[dir="rtl"] .cart-badge,
[dir="rtl"] .hdr-badge { direction: ltr; unicode-bidi: isolate; }