/* ============================================================
   VORIXA E-COMMERCE v2 — Main CSS
   Purple #7C3AED | Gold #C9A84C | Dark #0D0D0D
   Screenshot-matched design
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --pur:#7C3AED; --pur2:#6D28D9; --pur3:#EDE9FE; --pur-lt:#F5F3FF;
  --gold:#C9A84C; --gold2:#F0C040; --gold3:#FFD700; --gold-dk:#A07830;
  --dark:#F2F6FB; --d2:#111118; --d3:#1A1A2A;
  --red:#EF4444; --grn:#10B981; --blu:#3B82F6; --org:#F59E0B;
  --bg:#F0F2F5; --card:#fff;
  --bdr:#E2E8F0; --bdr2:#C7D2E2;
  --txt:#212121; --txt2:#374151; --txt3:#64748B; --txt4:#94A3B8;
  --shadow:0 1px 4px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 10px 32px rgba(0,0,0,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit}

/* ── TICKER ───────────────────────────────────────────── */
.ticker{background:var(--pur);padding:7px 0;overflow:hidden;width:100%}
.ticker-inner{display:inline-flex;white-space:nowrap;animation:ticker var(--spd,28s) linear infinite}
.ticker-inner span{color:#fff;font-size:.72rem;padding:0 24px;font-weight:600}
.ticker-inner span::before{content:'◆ ';color:rgba(255,255,255,.5);font-size:.52rem}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── ALERTS ───────────────────────────────────────────── */
.site-alert{padding:8px 46px 8px 14px;text-align:center;font-size:.74rem;font-weight:700;position:relative}
.sa-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:.88rem;color:inherit;opacity:.75;padding:4px 7px}

/* ══ NAVBAR ═══════════════════════════════════════════ */
.navbar{background:var(--dark);position:sticky;top:0;z-index:999;box-shadow:0 2px 20px rgba(0,0,0,.5)}
.nav-wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.nav-top{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap}
/* Logo */
.brand-logo{display:flex;align-items:center;gap:9px;flex-shrink:0;min-width:155px}
.brand-logo img{height:38px;object-fit:contain}
.bw-name{font-size:1.2rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--gold2),var(--gold3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px;line-height:1}
.bw-tag{font-size:.4rem;color:var(--gold);letter-spacing:1.5px;font-weight:700;margin-top:2px;text-transform:uppercase;font-style:italic}
/* Search */
.nav-search{flex:1;display:flex;border-radius:6px;overflow:hidden;border:2px solid var(--pur);background:#fff;max-width:700px}
.nav-search select{background:#f8f8f8;color:#555;border:none;border-right:1px solid var(--bdr);padding:0 8px;font-size:.72rem;cursor:pointer;outline:none;min-width:90px;max-width:130px}
.nav-search input{flex:1;border:none;padding:10px 13px;font-size:.84rem;outline:none;color:var(--txt);min-width:0}
.nav-search input::placeholder{color:#aaa}
.nav-search button{background:linear-gradient(135deg,var(--pur),var(--pur2));border:none;padding:0 20px;cursor:pointer;color:#fff;font-size:.95rem;font-weight:800;flex-shrink:0;transition:.2s}
.nav-search button:hover{background:var(--gold)}
/* Nav Icons */
.nav-icons{display:flex;gap:8px;align-items:center;margin-left:auto;flex-shrink:0}
.nav-icon-btn{display:flex;flex-direction:column;align-items:center;gap:1px;color:rgba(255,255,255,.75);font-size:.58rem;font-weight:600;padding:5px 10px;border-radius:5px;transition:.2s;white-space:nowrap;text-decoration:none;border:none;background:none;cursor:pointer}
.nav-icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-icon-btn i{font-size:1.1rem}
.nav-icon-btn.btn-login{background:var(--pur);border:1px solid var(--pur);font-size:.72rem;padding:6px 14px;border-radius:5px;font-weight:700;color:#fff}
.nav-icon-btn.btn-login:hover{background:var(--pur2)}
.nav-icon-btn.admin-btn{color:var(--gold2)}
/* Category tabs */
.nav-cats{background:#fff;border-top:2px solid var(--pur);box-shadow:0 2px 6px rgba(0,0,0,.07)}
.nav-cats-inner{max-width:1400px;margin:0 auto;padding:0 16px;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-cats-inner::-webkit-scrollbar{display:none}
.nc-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 14px;cursor:pointer;border-bottom:3px solid transparent;transition:.2s;text-decoration:none;flex-shrink:0;white-space:nowrap}
.nc-item:hover,.nc-item.on{border-bottom-color:var(--pur);color:var(--pur)}
.nc-ico{font-size:1.45rem;line-height:1}
.nc-item span{font-size:.64rem;font-weight:600;color:var(--txt2);max-width:72px;text-align:center;line-height:1.3}
.nc-item:hover span,.nc-item.on span{color:var(--pur)}
.nc-all{background:var(--pur);border-radius:0;padding:9px 16px}
.nc-all span,.nc-all .nc-ico{color:#fff!important}
.nc-deals span{color:var(--red)!important;font-weight:800}
.nc-deals .nc-ico{color:var(--red)!important}

/* ══ LAYOUT ════════════════════════════════════════════ */
.container{max-width:1400px;margin:0 auto;padding:0 14px}
.section{padding:18px 0}
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:8px;flex-wrap:wrap}
.sec-title{font-size:1rem;font-weight:900;color:var(--txt);display:flex;align-items:center;gap:6px}
.sec-title .bar{width:4px;height:20px;background:linear-gradient(135deg,var(--pur),var(--pur2));border-radius:2px;display:inline-block}
.see-all{color:var(--pur);font-size:.72rem;font-weight:700;border:1.5px solid var(--pur);padding:5px 14px;border-radius:20px;transition:.2s;white-space:nowrap}
.see-all:hover{background:var(--pur);color:#fff}

/* ══ HERO ══════════════════════════════════════════════ */
.hero-wrap{position:relative;overflow:hidden;background:linear-gradient(135deg,#F5F3FF 0%,#EDE9FE 50%,#F5F3FF 100%);margin:0}
.hero-slide{display:none;position:relative}
.hero-slide.on{display:block}
.hero-slide img{width:100%;height:400px;object-fit:cover}
.hero-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 40%,transparent 70%);display:flex;align-items:center;padding:50px}
.hero-text{max-width:460px}
.hero-tag{display:inline-flex;align-items:center;gap:5px;background:var(--pur3);color:var(--pur2);font-size:.72rem;font-weight:800;padding:4px 12px;border-radius:20px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.hero-text h1{font-size:2rem;font-weight:900;color:var(--txt);line-height:1.2;margin-bottom:4px}
.hero-gold{color:var(--pur);display:block}
.hero-text p{color:var(--txt3);font-size:.84rem;margin-bottom:16px;line-height:1.7}
.hero-badges{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.hb{display:flex;align-items:center;gap:5px;color:var(--txt3);font-size:.68rem;font-weight:600}
.hb i{color:var(--pur);font-size:.9rem}
.hero-disc{position:absolute;top:24px;right:24px;background:var(--pur2);border-radius:14px;padding:16px 18px;text-align:center;box-shadow:var(--shadow-md)}
.hd-up{font-size:.62rem;color:rgba(255,255,255,.8);font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.hd-pct{font-size:2.4rem;font-weight:900;color:#fff;line-height:1}
.hd-off{font-size:.68rem;color:rgba(255,255,255,.8);font-weight:800}
.hd-sub{background:var(--gold);color:var(--dark);font-size:.66rem;font-weight:900;padding:3px 8px;border-radius:5px;margin-top:6px;display:block}
.hero-btn{background:var(--pur);color:#fff;padding:12px 28px;border-radius:8px;font-weight:900;font-size:.88rem;border:none;display:inline-flex;align-items:center;gap:8px;transition:.2s;cursor:pointer;text-decoration:none}
.hero-btn:hover{background:var(--pur2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.35);color:#fff}
.s-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.s-dot{width:8px;height:8px;border-radius:50%;background:rgba(124,58,237,.3);border:none;cursor:pointer;transition:.3s}
.s-dot.on{background:var(--pur);width:22px;border-radius:4px}
.s-arr{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:none;color:var(--pur);width:38px;height:38px;border-radius:50%;font-size:.95rem;z-index:2;display:flex;align-items:center;justify-content:center;transition:.2s;cursor:pointer;box-shadow:var(--shadow)}
.s-arr:hover{background:var(--pur);color:#fff}
.s-prev{left:12px}.s-next{right:12px}

/* ══ FEATURES ══════════════════════════════════════════ */
.feat-bar{background:var(--card);display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;margin:10px 0;box-shadow:var(--shadow)}
.feat-item{display:flex;align-items:center;gap:10px;padding:14px 16px;border-right:1px solid var(--bdr)}
.feat-item:last-child{border-right:none}
.fi-ico{font-size:1.7rem;flex-shrink:0;color:var(--pur)}
.fi-t{font-size:.76rem;font-weight:800;color:var(--txt);line-height:1.2}
.fi-s{font-size:.62rem;color:var(--txt3);margin-top:1px}

/* ══ MINI SLIDER ═══════════════════════════════════════ */
.mini-slider{position:relative;border-radius:8px;overflow:hidden;height:120px;background:var(--pur3);margin-bottom:12px}
.mini-slide{position:absolute;inset:0;display:none}
.mini-slide.on{display:block}
.mini-slide img{width:100%;height:120px;object-fit:cover}

/* ══ CATEGORIES ════════════════════════════════════════ */
.cat-row{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:6px 0;margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
.cat-scroll{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 14px;-webkit-overflow-scrolling:touch}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:.2s;text-decoration:none;flex-shrink:0;min-width:86px;border-bottom:3px solid transparent}
.cat-item:hover{border-bottom-color:var(--pur)}
.cat-ico-wrap{width:62px;height:62px;border-radius:50%;background:var(--pur-lt);display:flex;align-items:center;justify-content:center;transition:.2s;border:2px solid transparent}
.cat-item:hover .cat-ico-wrap{border-color:var(--pur);background:var(--pur3)}
.cat-ico{font-size:1.9rem;line-height:1}
.cat-nm{font-size:.64rem;font-weight:600;color:var(--txt2);text-align:center;line-height:1.3;max-width:80px}
.cat-item:hover .cat-nm{color:var(--pur)}

/* ══ PRODUCTS ══════════════════════════════════════════ */
.prod-section{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:16px;margin-bottom:10px;box-shadow:var(--shadow)}
.prod-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bdr);flex-wrap:wrap;gap:8px}
.prod-sec-title{font-size:1rem;font-weight:900;color:var(--txt);display:flex;align-items:center;gap:7px}
.psbar{width:4px;height:20px;background:linear-gradient(135deg,var(--pur),var(--pur2));border-radius:2px}
.view-all-btn{background:linear-gradient(135deg,var(--pur),var(--pur2));color:#fff;border:none;padding:7px 18px;border-radius:6px;font-size:.74rem;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:.2s}
.view-all-btn:hover{background:var(--gold);color:var(--dark)}
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--bdr)}
.prod-card{background:var(--card);cursor:pointer;transition:.15s;padding:13px 10px;position:relative}
.prod-card:hover{box-shadow:var(--shadow-lg);z-index:1;transform:scale(1.01)}
.prod-img-box{position:relative;height:170px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafafa;border-radius:5px;margin-bottom:10px}
.prod-img-box img{max-width:100%;max-height:170px;object-fit:contain;transition:.3s}
.prod-card:hover .prod-img-box img{transform:scale(1.05)}
.prod-off-badge{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:.58rem;font-weight:900;padding:3px 7px;border-radius:0 0 5px 0}
.prod-name{font-size:.76rem;font-weight:600;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin-bottom:5px}
.prod-cat{font-size:.58rem;font-weight:700;color:var(--pur);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px;display:block}
.prod-prices{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.p-cur{font-size:.9rem;font-weight:900;color:var(--txt)}
.p-old{font-size:.68rem;text-decoration:line-through;color:var(--txt4)}
.p-pct{font-size:.62rem;font-weight:800;color:var(--grn)}
.prod-rating{display:flex;align-items:center;gap:4px;margin-bottom:7px}
.pr-star{background:var(--grn);color:#fff;font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:3px}
.pr-cnt{font-size:.6rem;color:var(--txt4)}
.prod-view-btn{width:100%;padding:7px;background:var(--dark);color:#fff;border:none;border-radius:4px;font-size:.7rem;font-weight:700;cursor:pointer;transition:.2s}
.prod-view-btn:hover{background:var(--pur);color:#fff}

/* ══ FINANCIAL CARDS ═══════════════════════════════════ */
.fin-section{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:16px;margin-bottom:10px;box-shadow:var(--shadow)}
.fin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fin-card{background:linear-gradient(135deg,var(--dark),var(--d3));border-radius:10px;padding:20px 12px;text-align:center;border:1.5px solid #2a2a40;cursor:pointer;transition:.3s;display:block;position:relative;overflow:hidden}
.fin-card:hover{border-color:var(--pur);transform:translateY(-3px);box-shadow:0 8px 24px rgba(124,58,237,.2)}
.fin-ico{font-size:2rem;display:block;margin-bottom:7px}
.fin-nm{color:#fff;font-size:.8rem;font-weight:800}
.fin-sub{color:#64748B;font-size:.6rem;margin-top:3px}

/* ══ FOOTER ════════════════════════════════════════════ */
.footer{background:var(--dark);color:#555;padding:36px 0 16px;margin-top:16px}
.footer-grid{max-width:1400px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:22px}
.f-brand-logo img{height:42px;margin-bottom:9px}
.f-brand p{font-size:.7rem;color:#3a3a3a;line-height:1.8}
.f-social{display:flex;gap:7px;margin-top:10px}
.fs-btn{width:30px;height:30px;border-radius:50%;background:#1a1a2a;border:1px solid #2a2a40;display:flex;align-items:center;justify-content:center;color:#555;font-size:.8rem;transition:.2s}
.fs-btn:hover{background:var(--pur);color:#fff;border-color:var(--pur)}
.f-col h4{color:#666;font-size:.68rem;font-weight:800;margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid #1a1a2a;text-transform:uppercase;letter-spacing:.4px}
.f-col ul{list-style:none}
.f-col ul li a{color:#3a3a3a;font-size:.7rem;padding:4px 0;display:block;transition:.2s}
.f-col ul li a:hover{color:var(--pur);padding-left:4px}
.footer-btm{max-width:1400px;margin:0 auto;padding:14px 16px 0;border-top:1px solid #1a1a2a;display:flex;justify-content:space-between;font-size:.66rem;color:#222;flex-wrap:wrap;gap:5px}
.footer-btm .pur{color:var(--pur)}

/* ══ AUTH PAGES ════════════════════════════════════════ */
.auth-page{min-height:100vh;background:linear-gradient(135deg,var(--pur2) 0%,var(--dark) 60%);display:flex;align-items:center;justify-content:center;padding:18px;position:relative;overflow:hidden}
.auth-page::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(124,58,237,.3) 0%,transparent 55%),radial-gradient(ellipse at 70% 70%,rgba(201,168,76,.1) 0%,transparent 55%);pointer-events:none}
.auth-card{background:rgba(255,255,255,.97);border-radius:20px;padding:34px 30px;width:100%;max-width:460px;box-shadow:0 30px 70px rgba(0,0,0,.4);position:relative;z-index:1}
.auth-logo{display:flex;justify-content:center;margin-bottom:20px}
.auth-logo img{height:58px;object-fit:contain}
.auth-ttl{color:var(--txt);font-size:1.15rem;font-weight:900;text-align:center;margin-bottom:4px}
.auth-sub{color:var(--txt3);font-size:.74rem;text-align:center;margin-bottom:22px}
.fg{margin-bottom:13px}
.fl{font-size:.7rem;font-weight:700;color:var(--txt2);display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.fi{width:100%;padding:11px 13px;background:#F8FAFF;border:1.5px solid var(--bdr2);border-radius:9px;color:var(--txt);font-size:.84rem;transition:.2s;outline:none}
.fi:focus{border-color:var(--pur);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.fi::placeholder{color:#aaa}
textarea.fi{resize:vertical}
.fsel{width:100%;padding:11px 13px;background:#F8FAFF;border:1.5px solid var(--bdr2);border-radius:9px;color:var(--txt2);font-size:.84rem;outline:none}
.fsel:focus{border-color:var(--pur)}
.btn-pur-full{width:100%;padding:12px;background:linear-gradient(135deg,var(--pur),var(--pur2));color:#fff;border:none;border-radius:10px;font-size:.9rem;font-weight:900;cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-pur-full:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.4)}
.auth-ft{text-align:center;color:var(--txt3);font-size:.72rem;margin-top:12px}
.auth-ft a{color:var(--pur);font-weight:800}
.auth-divider{text-align:center;position:relative;margin:14px 0}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--bdr)}
.auth-divider span{background:#fff;padding:0 11px;position:relative;color:var(--txt4);font-size:.68rem}
/* Role selector */
.role-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:18px}
.role-tab{padding:8px 4px;border:2px solid var(--bdr2);border-radius:9px;text-align:center;cursor:pointer;transition:.2s;background:#F8FAFF}
.role-tab input{display:none}
.role-tab:has(input:checked),.role-tab.on{border-color:var(--pur);background:var(--pur3);color:var(--pur)}
.role-tab i{font-size:1.2rem;display:block;margin-bottom:3px;color:var(--txt3)}
.role-tab:has(input:checked) i,.role-tab.on i{color:var(--pur)}
.role-tab span{font-size:.64rem;font-weight:700;color:var(--txt3)}
.role-tab:has(input:checked) span,.role-tab.on span{color:var(--pur)}

/* ══ DASHBOARD ══════════════════════════════════════════ */
.dash-layout{display:flex;min-height:100vh;background:var(--bg)}
.dash-side{width:240px;background:var(--dark);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid #1a1a2a}
.dash-side::-webkit-scrollbar{width:3px}
.dash-side::-webkit-scrollbar-thumb{background:#2a2a40}
.dash-brand-wrap{padding:14px 16px;border-bottom:1px solid #1a1a2a;display:flex;align-items:center;gap:9px}
.dash-brand-wrap img{height:30px;object-fit:contain;flex-shrink:0}
.dbw-nm{font-size:.84rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1.5px}
.dbw-tg{font-size:.42rem;color:var(--gold-dk);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.dash-nav{padding:5px 0}
.nav-lbl{font-size:.54rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#1e1e30;padding:10px 15px 3px;display:block}
.dash-nav a{display:flex;align-items:center;gap:9px;padding:9px 15px;color:#3a3a4a;font-size:.75rem;font-weight:600;transition:.2s;border-left:3px solid transparent}
.dash-nav a:hover,.dash-nav a.on{color:var(--pur);border-left-color:var(--pur);background:rgba(124,58,237,.06)}
.dash-nav a i{font-size:.9rem;width:16px;text-align:center;flex-shrink:0}
/* Role badge in sidebar */
.role-badge{display:inline-block;font-size:.56rem;font-weight:800;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;margin-left:auto;flex-shrink:0}
.rb-admin{background:#FEF3C7;color:#92400E}
.rb-user{background:#DBEAFE;color:#1D4ED8}
.rb-dealer{background:#D1FAE5;color:#065F46}
.rb-delivery{background:#EDE9FE;color:#6D28D9}
/* Main content */
.dash-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-topbar{background:var(--card);padding:11px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.05);flex-shrink:0;gap:10px}
.dash-pg{font-size:.88rem;font-weight:900;color:var(--txt)}
.d-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pur),var(--pur2));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;color:#fff;flex-shrink:0}
.dash-content{padding:18px;flex:1}

/* ══ CARDS & COMPONENTS ═════════════════════════════════ */
.v-card{background:var(--card);border-radius:10px;border:1px solid var(--bdr);overflow:hidden;box-shadow:var(--shadow);margin-bottom:15px}
.v-card-hd{padding:12px 18px;border-bottom:1px solid #F5F7FA;font-weight:900;font-size:.84rem;color:var(--txt);display:flex;align-items:center;justify-content:space-between;gap:7px;background:#FAFBFF}
.v-card-body{padding:18px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:15px}
.stat-card{background:var(--card);border-radius:10px;padding:16px;border:1px solid var(--bdr);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);transition:.2s}
.stat-card:hover{border-color:var(--pur);transform:translateY(-2px)}
.stat-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.stat-val{font-size:1.2rem;font-weight:900;color:var(--txt);line-height:1}
.stat-lbl{font-size:.6rem;color:var(--txt4);font-weight:700;text-transform:uppercase;letter-spacing:.2px;margin-top:3px}

/* ── Wallet card ── */
.wallet-card{background:linear-gradient(135deg,var(--pur2),var(--dark));border-radius:16px;padding:22px;color:#fff;position:relative;overflow:hidden;border:1px solid #2a2a40}
.wallet-card::after{content:'₹';position:absolute;right:-8px;bottom:-16px;font-size:7rem;opacity:.06;font-weight:900;pointer-events:none}
.wallet-amt{font-size:2rem;font-weight:900;color:#fff;line-height:1}
.wallet-lbl{font-size:.62rem;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}

/* ── Refer card ── */
.refer-card{background:linear-gradient(135deg,var(--dark),var(--d3));border-radius:14px;padding:17px;color:#fff;border:1px solid #2a2a40}
.ref-code-box{background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.25);border-radius:8px;padding:8px 12px;font-size:.86rem;font-weight:900;letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:var(--gold2)}
.copy-btn{background:linear-gradient(135deg,var(--pur),var(--pur2));color:#fff;border:none;border-radius:6px;padding:4px 11px;font-size:.64rem;font-weight:900;cursor:pointer}

/* ── Table ── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vx-tbl{width:100%;border-collapse:collapse;font-size:.76rem;min-width:480px}
.vx-tbl th{background:#F8FAFC;font-weight:800;color:var(--txt2);padding:9px 12px;text-align:left;border-bottom:2px solid var(--bdr);white-space:nowrap;font-size:.66rem;text-transform:uppercase}
.vx-tbl td{padding:9px 12px;border-bottom:1px solid #F5F7FA;vertical-align:middle}
.vx-tbl tr:last-child td{border:none}
.vx-tbl tr:hover td{background:#FAFBFF}

/* ── Badges ── */
.badge{display:inline-block;font-size:.6rem;font-weight:800;padding:3px 8px;border-radius:20px}
.b-green{background:#ECFDF5;color:#065F46}.b-red{background:#FEF2F2;color:#991B1B}
.b-yellow{background:#FFFBEB;color:#92400E}.b-blue{background:#EFF6FF;color:#1D4ED8}
.b-purple{background:#EDE9FE;color:#6D28D9}.b-gray{background:#F1F5F9;color:#475569}
.b-gold{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.b-orange{background:#FFF7ED;color:#C2410C}

/* ── Status badges ── */
.status-pending{background:#FEF3C7;color:#92400E}
.status-confirmed{background:#DBEAFE;color:#1D4ED8}
.status-processing{background:#EDE9FE;color:#6D28D9}
.status-shipped{background:#FFF7ED;color:#C2410C}
.status-delivered{background:#ECFDF5;color:#065F46}
.status-cancelled{background:#FEF2F2;color:#991B1B}
.status-returned{background:#F1F5F9;color:#475569}

/* ── Flash ── */
.flash{padding:10px 14px;border-radius:9px;margin-bottom:12px;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:6px}
.flash-s{background:#ECFDF5;color:#065F46;border:1.5px solid #A7F3D0}
.flash-d{background:#FEF2F2;color:#991B1B;border:1.5px solid #FECACA}
.flash-w{background:#FFFBEB;color:#92400E;border:1.5px solid #FDE68A}

/* ── Forms ── */
.form-grp{margin-bottom:12px}
.form-lbl{font-size:.7rem;font-weight:700;color:var(--txt2);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.2px}
.form-ctrl{width:100%;padding:9px 12px;border:1.5px solid var(--bdr2);border-radius:8px;font-size:.8rem;background:#FAFBFF;transition:.2s;outline:none}
.form-ctrl:focus{border-color:var(--pur);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.08)}
textarea.form-ctrl{resize:vertical}
.upload-zone{border:2px dashed var(--bdr2);border-radius:11px;padding:16px;text-align:center;cursor:pointer;position:relative;transition:.2s;background:#FAFBFF}
.upload-zone:hover{border-color:var(--pur);background:#F5F3FF}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ── Buttons ── */
.btn{padding:8px 16px;border-radius:7px;border:none;cursor:pointer;font-weight:800;font-size:.74rem;transition:.2s;display:inline-flex;align-items:center;gap:5px}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn-pur{background:linear-gradient(135deg,var(--pur),var(--pur2));color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--dark)}
.btn-red{background:var(--red);color:#fff}
.btn-green{background:var(--grn);color:#fff}
.btn-dark{background:var(--dark);color:#fff;border:1px solid #2a2a40}
.btn-outline{background:transparent;color:var(--pur);border:1.5px solid var(--pur)}
.btn-outline:hover{background:var(--pur);color:#fff}
.btn-sm{padding:5px 11px;font-size:.68rem}
.btn-lg{padding:12px 26px;font-size:.86rem}
.btn-xl{padding:14px 32px;font-size:.94rem}

/* ── Product detail ── */
.pd-card{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:22px;margin-bottom:10px}
.pd-layout{display:grid;grid-template-columns:380px 1fr;gap:24px}
.pd-main-box{border:1px solid var(--bdr);border-radius:8px;background:#fafafa;min-height:300px;display:flex;align-items:center;justify-content:center;padding:16px;margin-bottom:10px;overflow:hidden}
.pd-main-box img{max-width:100%;max-height:290px;object-fit:contain}
.pd-thumbs{display:flex;gap:7px;flex-wrap:wrap}
.pd-th{width:54px;height:54px;border:2px solid var(--bdr);border-radius:6px;padding:3px;cursor:pointer;object-fit:contain;background:#fafafa;transition:.15s}
.pd-th:hover,.pd-th.on{border-color:var(--pur)}
.shop-now-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;background:linear-gradient(135deg,var(--pur),var(--pur2));color:#fff;border:none;border-radius:7px;font-size:.96rem;font-weight:900;cursor:pointer;text-decoration:none;letter-spacing:.3px;transition:.2s;margin-bottom:8px}
.shop-now-btn:hover{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.35)}

/* ── Shop layout ── */
.shop-layout{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.shop-side{background:var(--card);border-radius:8px;padding:16px;border:1px solid var(--bdr);position:sticky;top:80px}
.cat-filter-link{font-size:.74rem;color:var(--txt2);padding:7px 10px;border-radius:7px;transition:.2s;display:block;font-weight:600;border-left:3px solid transparent}
.cat-filter-link:hover,.cat-filter-link.on{background:var(--pur3);color:var(--pur);font-weight:800;border-left-color:var(--pur)}

/* ── Image upload section ── */
.img-section{background:#F8FAFF;border:1.5px solid var(--bdr);border-radius:12px;padding:18px;margin-bottom:14px}
.img-layout{display:grid;grid-template-columns:185px 1fr;gap:18px;align-items:start}
.main-slot{border:2px dashed var(--bdr2);border-radius:11px;min-height:165px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;position:relative;overflow:hidden;background:#fafafa;text-align:center;padding:12px}
.main-slot:hover,.main-slot.on{border-color:var(--pur);background:#F5F3FF}
.main-slot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ten-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.xslot{border:2px dashed var(--bdr2);border-radius:9px;aspect-ratio:1;position:relative;overflow:hidden;background:#fafafa;transition:.2s;cursor:pointer}
.xslot:hover,.xslot.on{border-color:var(--pur);background:#F5F3FF;border-style:solid}
.xslot input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;width:100%;height:100%}
.xslot .xph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.xslot .xph i{font-size:1.4rem;color:var(--bdr2)}
.xslot .xph b{font-size:.56rem;font-weight:800;color:var(--txt4);text-transform:uppercase;letter-spacing:.3px}
.xslot .xprev{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;background:#F5F3FF;display:none;z-index:3}
.xslot .xprev.show{display:block}
.xslot .xclear{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;border:2px solid #fff;font-size:.58rem;cursor:pointer;z-index:5;display:none;align-items:center;justify-content:center;line-height:1;padding:0}
.xslot .xclear.show{display:flex}
.xslot.on .xph{display:none}
.exist-strip{display:flex;flex-wrap:wrap;gap:6px;padding:10px;background:#F5F3FF;border:1px solid var(--pur3);border-radius:8px;margin-bottom:10px}
.exist-item{position:relative}
.exist-item img{width:64px;height:64px;object-fit:contain;border-radius:6px;border:2px solid var(--bdr);background:#fff;padding:3px}
.exist-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;border:2.5px solid #fff;font-size:.54rem;font-weight:900;text-decoration:none;display:flex;align-items:center;justify-content:center}

/* ── Order tracking ── */
.order-steps{display:flex;align-items:center;gap:0;margin:16px 0;position:relative}
.order-step{flex:1;text-align:center;position:relative;z-index:1}
.os-circle{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--bdr2);background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;font-size:.82rem;color:var(--txt4);transition:.2s}
.os-circle.done{background:var(--pur);border-color:var(--pur);color:#fff}
.os-circle.active{background:#fff;border-color:var(--pur);color:var(--pur);box-shadow:0 0 0 4px var(--pur3)}
.os-lbl{font-size:.6rem;font-weight:700;color:var(--txt4)}
.os-lbl.done,.os-lbl.active{color:var(--pur)}
.order-steps::before{content:'';position:absolute;top:18px;left:18px;right:18px;height:2px;background:var(--bdr);z-index:0}
.order-steps .progress-line{position:absolute;top:18px;left:18px;height:2px;background:var(--pur);z-index:0;transition:.5s}

/* ══ RESPONSIVE ═════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1023px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-slide img{height:280px}
  .hero-disc{display:none}
  .feat-bar{grid-template-columns:repeat(2,1fr)}
  .feat-item:nth-child(2){border-right:none}
  .feat-item:nth-child(1),.feat-item:nth-child(2){border-bottom:1px solid var(--bdr)}
  .fin-grid{grid-template-columns:repeat(4,1fr)}
  .pd-layout{grid-template-columns:1fr}
}
@media(max-width:767px){
  .nav-top{flex-wrap:wrap;gap:8px;padding:8px 0}
  .brand-logo img{height:32px}
  .bw-name{font-size:1.05rem}
  .nav-search{order:3;flex-basis:100%;max-width:100%}
  .nav-icons{gap:4px}
  .nav-icon-btn span{display:none}
  .nav-icon-btn{padding:6px 8px}
  .nav-icon-btn i{font-size:1.2rem}
  .nav-icon-btn.btn-login span{display:inline}
  .hero-slide img{height:190px}
  .hero-ov{padding:14px 16px}
  .hero-text h1{font-size:.98rem}
  .hero-text p{display:none}
  .hero-disc{display:none}
  .feat-bar{grid-template-columns:repeat(2,1fr)}
  .feat-item{border-right:none;border-bottom:1px solid var(--bdr)}
  .feat-item:nth-child(odd){border-right:1px solid var(--bdr)}
  .feat-item:nth-child(3),.feat-item:nth-child(4){border-bottom:none}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod-img-box{height:130px}
  .fin-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pd-layout{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .shop-side{position:static}
  .img-layout{grid-template-columns:1fr}
  .ten-grid{grid-template-columns:repeat(4,1fr)}
  .dash-side{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid #1a1a2a}
  .dash-nav{display:flex;overflow-x:auto;padding:4px 6px;gap:2px;scrollbar-width:none}
  .dash-nav::-webkit-scrollbar{display:none}
  .nav-lbl{display:none}
  .dash-nav a{padding:7px 11px;border-left:none;border-bottom:2px solid transparent;border-radius:6px;font-size:.68rem;white-space:nowrap;flex-shrink:0}
  .dash-nav a.on{border-bottom-color:var(--pur);background:rgba(124,58,237,.08)}
  .dash-content{padding:11px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .role-tabs{grid-template-columns:repeat(2,1fr)}
  .auth-card{padding:24px 16px}
  .container{padding:0 10px}
  .section{padding:13px 0}
}
@media(max-width:420px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .fin-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .ten-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1400px){ .prod-grid{grid-template-columns:repeat(6,1fr)} }
@media print{ .navbar,.footer,.dash-side,.hero-wrap,.ticker{display:none!important} body{background:#fff} }