/* DigiStore / LicenceHub inspired theme */
:root{
  --bg:#0b1020;
  --bg2:#0f1730;
  --surface:rgba(16,26,51,.72);
  --surface2:rgba(16,26,51,.92);
  --border:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --text-dark:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.45);
  --primary:#7c5cff;
  --primary2:#21d4fd;
  --success:#2ecc71;
  --warning:#f39c12;
  --danger:#ff4d6d;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:24px;
}

body.light-mode {
  --bg:#f5f7fb;
  --bg2:#ffffff;
  --surface:#ffffff;
  --surface2:#f1f4f9;
  --border:rgba(0,0,0,.08);
  --text-dark:#1a1f36;
  --muted:rgba(0,0,0,.62);
  --muted2:rgba(0,0,0,.45);
}

/* Ensure text is correct weight */
body { --text: var(--text-dark); transition: background 0.3s, color 0.3s; }

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.25), transparent 70%),
    radial-gradient(900px 500px at 10% 10%, rgba(33,212,253,.18), transparent 65%),
    linear-gradient(180deg, rgba(15,23,48,.25), rgba(11,16,32,1)),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* Top nav */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(16,26,51,.75);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-badge{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(33,212,253,.55));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  display:grid;place-items:center;font-weight:900;
}
.brand small{display:block;color:var(--muted2);font-weight:600;margin-top:-2px}
.nav-center{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:6px;border-radius:999px;
  display:flex;gap:6px;align-items:center;
}
.pill{
  padding:8px 14px;border-radius:999px;
  color:var(--muted);
  font-weight:700;font-size:.92rem;
  transition:.2s;
}
.pill:hover{color:var(--text);background:rgba(255,255,255,.05)}
.pill.active{color:white;background:rgba(124,92,255,.55);border:1px solid rgba(124,92,255,.55)}
.nav-actions{display:flex;gap:10px;align-items:center}
.icon-btn{
  width:40px;height:40px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  display:grid;place-items:center;cursor:pointer;
  position:relative;transition:.2s;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 16px 50px rgba(0,0,0,.35)}
.badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--primary);border:1px solid rgba(255,255,255,.12);
  font-size:.72rem;font-weight:800;display:grid;place-items:center;
}
.btn{
  border:none;cursor:pointer;
  padding:10px 14px;border-radius:14px;
  font-weight:800;
}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), rgba(124,92,255,.7));
  color:white;box-shadow:0 12px 40px rgba(124,92,255,.25);
  border:1px solid rgba(255,255,255,.10);
}
.btn-ghost{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
}

/* Hero */
.hero{padding:34px 0 10px}
.hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:18px;align-items:stretch}
.kicker{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--muted);font-weight:800;font-size:.85rem;
}
.hero h1{font-size:3.1rem;line-height:1.05;margin-top:14px}
.grad{
  background:linear-gradient(135deg, rgba(255,255,255,1), rgba(124,92,255,.85));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p{margin-top:14px;max-width:56ch;color:var(--muted);line-height:1.6}
.hero-cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.stats-row{
  margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.mini-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}
.mini-card strong{font-size:1.25rem}
.mini-card span{display:block;margin-top:4px;color:var(--muted2);font-weight:700;font-size:.85rem}

.promo{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:24px;position:relative;overflow:hidden;
  min-height:360px;display:flex;align-items:center;
}
.promo::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle at 30% 20%, rgba(33,212,253,.25), transparent 60%),
             radial-gradient(circle at 70% 60%, rgba(124,92,255,.25), transparent 60%);
}
.promo-inner{position:relative; width:100%; display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:20px;}
.promo h2{font-size:2.4rem; line-height:1.1; margin-bottom:12px; font-weight:1000;}
.promo .sub{color:var(--muted); font-size:1.15rem; font-weight:700; margin-bottom:20px;}
.promo .shot{
  border-radius:24px; height:280px; width:100%;
  background:linear-gradient(135deg, rgba(0,0,0,.2), rgba(0,0,0,.4));
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center; overflow:hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
}
.promo .shot img{max-height:92%; max-width:92%; width:auto; height:auto; object-fit:contain; border-radius:16px; filter: drop-shadow(0 15px 35px rgba(0,0,0,0.4));}
.promo .shop-btn{width:fit-content;}

@media (max-width: 768px) {
  .promo { min-height: fit-content; padding: 20px; }
  .promo-inner { grid-template-columns: 1fr; text-align:center; }
  .promo .shop-btn { margin: 0 auto; }
  .promo .shot { height: 220px; }
  .promo h2 { font-size: 1.8rem; }
}

/* Sections */
.section{padding:18px 0 26px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 0}
.section-head h3{font-size:1.35rem}
.section-head p{color:var(--muted2);font-weight:700}
.link{color:rgba(160,196,255,.9);font-weight:800}
.divider{height:1px;background:var(--border);margin:14px 0}

/* Carousel */
.carousel{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius2);
  overflow:hidden;
  position:relative;
}
.carousel-track{
  display:flex;
  transition:transform .55s ease;
  will-change:transform;
}
.slide{
  min-width:100%;
  padding:18px;
}
.slide-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:center;
}

/* Light premium slide (like screenshot) */
.slide-surface{
  background:
    radial-gradient(700px 350px at 85% 30%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(700px 350px at 65% 65%, rgba(33,212,253,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.96));
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  overflow:hidden;
  padding:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.18);
}
.slide-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.s-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  font-weight:900;font-size:.78rem;letter-spacing:.3px;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.18);
  color:#2b2363;
}
.s-pill.secondary{
  background:rgba(33,212,253,.12);
  border-color:rgba(33,212,253,.18);
  color:#0b3e4a;
}
.s-title{
  margin-top:14px;
  font-size:3.4rem;
  line-height:.98;
  letter-spacing:-.8px;
  font-weight:1000;
  color:#101326;
}
.s-title .accent{
  background:linear-gradient(135deg, rgba(124,92,255,1), rgba(33,212,253,1));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.s-subtitle{margin-top:10px;font-weight:900;color:rgba(16,19,38,.72)}
.s-desc{margin-top:12px;color:rgba(16,19,38,.62);line-height:1.7;max-width:58ch}
.s-features{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.s-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  font-weight:900;font-size:.78rem;
  color:rgba(16,19,38,.70);
  background:rgba(255,255,255,.75);
  border:1px solid rgba(16,19,38,.08);
}
.s-priceRow{margin-top:18px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.s-old{color:rgba(16,19,38,.45);text-decoration:line-through;font-weight:900}
.s-price{font-size:2.6rem;font-weight:1000;color:#101326;letter-spacing:-.5px}
.s-off{
  padding:8px 12px;border-radius:999px;
  background:rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.18);
  color:#2b2363;
  font-weight:1000;font-size:.78rem;
}
.s-actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn-blue{
  background:linear-gradient(135deg, rgba(124,92,255,1), rgba(33,212,253,1));
  color:white;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 60px rgba(124,92,255,.25);
}
.btn-outline-light{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(16,19,38,.10);
  color:#101326;
}
.slide-side{display:grid;place-items:center}
.mock-card{
  width:min(340px, 100%);
  border-radius:26px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,19,38,.10);
  box-shadow:0 35px 90px rgba(124,92,255,.20);
  padding:16px;
}
.mock-head{display:flex;justify-content:space-between;align-items:center}
.mock-icon{
  width:42px;height:42px;border-radius:14px;
  background:rgba(16,19,38,.06);
  border:1px solid rgba(16,19,38,.08);
  display:grid;place-items:center;
  color:#101326;
}
.mock-body{margin-top:12px}
.mock-kicker{font-size:.72rem;font-weight:1000;color:rgba(16,19,38,.55);letter-spacing:.25px}
.mock-title{margin-top:4px;font-weight:1000;font-size:1.15rem;color:#101326}
.mock-sub{margin-top:2px;color:rgba(16,19,38,.55);font-weight:900;font-size:.78rem}
.mock-pills{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.mock-pill{
  padding:6px 10px;border-radius:999px;
  background:rgba(124,92,255,.10);
  border:1px solid rgba(124,92,255,.14);
  font-weight:1000;font-size:.72rem;color:#2b2363;
}
.mock-pill.secondary{background:rgba(33,212,253,.10);border-color:rgba(33,212,253,.14);color:#0b3e4a}
.mock-priceRow{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mock-price{font-size:2.0rem;font-weight:1000;color:#101326}
.mock-off{
  width:58px;height:58px;border-radius:999px;
  background:linear-gradient(135deg, rgba(124,92,255,1), rgba(33,212,253,1));
  color:white;display:grid;place-items:center;
  font-weight:1000;font-size:.78rem;text-align:center;
  box-shadow:0 18px 60px rgba(33,212,253,.25);
}
.mock-buy{margin-top:12px}
.slide-footer{
  margin-top:16px;display:flex;gap:14px;flex-wrap:wrap;
  color:rgba(16,19,38,.55);font-weight:900;font-size:.78rem;
}
.slide-footer span{display:inline-flex;align-items:center;gap:8px}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:14px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  color:#101326;cursor:pointer;
  display:grid;place-items:center;
  z-index:3;
  box-shadow:0 18px 60px rgba(0,0,0,.16);
}
.carousel-btn:hover{filter:brightness(1.1)}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.06);
  padding:8px 10px;border-radius:999px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(16,19,38,.25);
  cursor:pointer;
}
.dot.active{background:rgba(124,92,255,.95)}

/* Product grid/cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  background:rgba(16,26,51,.72);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  overflow:hidden;
  transition:.2s;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(124,92,255,.35)}
.thumb{
  height:150px;background:linear-gradient(135deg, rgba(33,212,253,.22), rgba(124,92,255,.35));
  display:flex;align-items:flex-start;justify-content:flex-start;padding:10px;gap:8px;
  position:relative;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.9);
  font-size:.72rem;font-weight:900;
}
.chip.hot{background:rgba(255,77,109,.14);border-color:rgba(255,77,109,.25)}
.chip.trending{background:rgba(33,212,253,.12);border-color:rgba(33,212,253,.22)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.body{padding:14px}
.title{font-weight:900}
.meta{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-weight:900;color:rgba(255,255,255,.92)}
.price small{color:var(--muted2);text-decoration:line-through;font-weight:800;margin-left:6px}
.rating{color:rgba(255,206,86,.92);font-weight:900;font-size:.85rem}
.card-actions{margin-top:12px;display:flex;gap:10px}
.btn-full{width:100%}
.btn-whatsapp{
  background:rgba(37, 211, 102, .14);
  border:1px solid rgba(37, 211, 102, .28);
  color:rgba(255,255,255,.92);
}
.btn-whatsapp:hover{filter:brightness(1.08)}

/* Toolbars */
.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:12px;
}
.input, .select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;border-radius:14px;outline:none;
}
.input::placeholder{color:var(--muted2)}
.select{cursor:pointer}

/* Modal */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);z-index:100}
.overlay.active{display:flex;align-items:center;justify-content:center}
.modal{
  width:min(980px,92vw);
  background:rgba(16,26,51,.94);
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modal-head{
  padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--border);
}
.modal-head h3{font-size:1.05rem}
.modal-close{background:none;border:none;color:var(--muted);font-size:1.6rem;cursor:pointer}
.modal-body{padding:18px}

/* Layout helpers */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.panel{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:22px;
  padding:16px;
}
.panel h4{font-size:1rem}
.subtle{color:var(--muted);font-weight:700}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background:rgba(15,23,48,.55);
  padding:22px 0;margin-top:22px;
  color:var(--muted);
}

/* NUI Card Style */
.nui-card {
  background: #25283c;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nui-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  background: #2a2e45;
  border-color: rgba(124, 92, 255, 0.25);
}
.nui-thumb {
  height: 180px;
  position: relative;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nui-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}
.nui-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 4rem;
  background: rgba(255,255,255,0.03); border-radius: 16px;
}
.nui-chips {
  position: absolute;
  top: 24px; left: 24px; right: 24px;
  display: flex; gap: 8px; z-index: 2;
}
.nui-chip {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5);
}
.nui-hot { background: #fd7e14; }
.nui-trending { background: #3b82f6; }

.nui-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nui-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.nui-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.nui-rating-stars {
  color: #fbbf24;
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.nui-rating-val {
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 600;
}
.nui-price-block {
  display: flex;
  align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 16px;
  margin-bottom: 14px;
}
.nui-price-lbl {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.nui-price-val {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
}
.nui-price-icon {
  width: 28px; height: 28px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 0.9rem;
}

.nui-plans {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
.nui-plan-pill {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255,255,255,0.03);
}
.nui-plan-pill.active {
  background: rgba(124, 92, 255, 0.18);
  border-color: rgba(124, 92, 255, 0.5);
  color: #a78bfa;
}

.nui-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.nui-actions-row {
  display: flex;
  gap: 8px;
}
.nui-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.92rem;
  border: none; cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  text-decoration: none;
  width: 100%;
}
.nui-btn-primary {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124,92,255,0.3);
}
.nui-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.nui-btn-whatsapp {
  background: transparent;
  border: 1.5px solid #25d366 !important;
  color: #25d366;
  flex: 1;
}
.nui-btn-whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
}
.nui-btn-cart {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.75);
  flex: 1;
}
.nui-btn-cart:hover {
  background: rgba(255,255,255,0.06);
}

/* Global Responsiveness */
@media (max-width: 1024px) {
  :root { --max: 940px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root { --max: 100%; --radius: 12px; --radius2: 16px; }
  .nav { padding: 10px 0; }
  .brand-badge { width: 32px; height: 32px; font-size: 0.9rem; }
  .brand { font-size: 0.95rem; }
  .nav-center { display: none; } /* Hide on mobile to save space */
  
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero h1 { font-size: 2.2rem; }
  .hero-cta { justify-content: center; }
  .stats-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mini-card { padding: 10px; }
  .mini-card strong { font-size: 1.1rem; }
  
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .two-col { grid-template-columns: 1fr; }
  
  .card .body { padding: 10px; }
  .card .title { font-size: 0.9rem; }
  .price { font-size: 1rem; }
  
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Mobile Header Fixes */
@media (max-width: 600px) {
  .nav { gap: 8px; justify-content: space-between; }
  .brand div { display: none; } /* Hide Farhan Computer text to save space */
  .brand-badge { width: 44px; height: 44px; font-size: 1.1rem; }
  .nav-actions { gap: 6px; }
  .icon-btn { width: 36px; height: 36px; font-size: 0.9rem; }
  .btn-ghost { padding: 8px 10px; font-size: 0.85rem; }
  
  .hero h1 { font-size: 1.8rem; margin-top: 10px; letter-spacing: -0.5px; }
  .hero p { font-size: 0.9rem; }
  
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card .body { padding: 8px; }
  .card .title { font-size: 0.85rem; line-height: 1.2; height: 32px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .price { font-size: 0.95rem; }
  .card .thumb { height: 120px; }
  .card-actions { gap: 6px; }
  .btn-sm { padding: 6px 8px; font-size: 0.72rem; }
  
  .stats-row { grid-template-columns: repeat(3, 1fr); margin-top: 15px; }
  .mini-card strong { font-size: 1rem; }
  .mini-card span { font-size: 0.7rem; }
}

@media (max-width: 480px) {
  .modal { width: 95vw; border-radius: 18px; }
  .modal-body { padding: 14px; }
  
  /* Tables on mobile */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
  table { min-width: 600px; }
}

@media (max-width: 380px) {
  .brand-badge { width: 38px; height: 38px; font-size: 0.9rem; }
  .icon-btn { width: 32px; height: 32px; }
}

/* Fix for Admin forms on mobile */
.responsive-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .responsive-form-grid { grid-template-columns: 1fr; }
}

/* Floating WhatsApp & Dark Toggle */
.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

.float-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid; place-items:center;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
  border: none;
}
.float-btn:hover { transform: scale(1.1) translateY(-5px); }

.whatsapp-btn { background: #25d366; color: white; font-size: 1.5rem; }
.theme-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 1.2rem; }

/* Stock Badge */
.stock-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase;
  z-index: 5;
}
.stock-in { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.stock-out { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }

/* Tracking Timeline */
.timeline { position: relative; padding: 20px 0; margin-top: 15px; }
.timeline::before {
  content: ""; position: absolute; left: 10px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.t-item { position: relative; padding-left: 35px; margin-bottom: 20px; }
.t-dot {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--border);
  display: grid; place-items: center; font-size: 0.7rem;
}
.t-item.active .t-dot { border-color: var(--primary); color: var(--primary); background: rgba(108,99,255,0.1); }
.t-item.active .t-title { color: var(--primary); }
.t-title { font-weight: 800; font-size: 0.9rem; }
.t-desc { font-size: 0.8rem; color: var(--muted); }

/* Wishlist Button Overlay */
.wish-btn {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
  display: grid; place-items: center;
  cursor: pointer; color: white;
  z-index: 6; transition: 0.2s;
}
.wish-btn:hover { background: rgba(255,77,109,0.3); color: #ff4d6d; }
.wish-btn.active { background: #ff4d6d; color: white; }



/* --- CATEGORY TABS & SECTIONS (CLEAN VERSION) --- */
.category-tabs { display: flex; gap: 12px; overflow-x: auto; padding: 15px 0 35px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.cat-pill { 
  padding: 10px 24px; border-radius: 40px; background: var(--surface2); 
  border: 1px solid var(--border); color: var(--text-dark); font-weight: 700; 
  cursor: pointer; white-space: nowrap; transition: 0.3s;
}
.cat-pill.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 10px 25px rgba(124,92,255,0.3); }

.cat-section { margin-top: 60px; }
.cat-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.cat-title { font-size: 1.7rem; font-weight: 900; margin: 0; }
.cat-line { flex: 1; height: 1px; background: var(--border); opacity: 0.4; }

/* --- GLOBAL PRO ACTIONS --- */
.floating-actions { position: fixed; bottom: 25px; right: 25px; display: flex; flex-direction: column; gap: 12px; z-index: 1000; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 35px rgba(0,0,0,0.4); transition: 0.3s; font-size: 1.4rem; border:none; text-decoration:none; }
.whatsapp-btn { background: #25d366; color: white; }
.theme-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text-dark); }
.cat-count { font-size: 0.8rem; background: var(--border); padding: 2px 8px; border-radius: 20px; color: var(--muted); margin-left: 8px; font-weight: 600; }
.link.text-primary { color: var(--primary); font-weight: 700; text-decoration: none; transition: 0.2s; }
.link.text-primary:hover { opacity: 0.8; text-decoration: underline; }
/* --- 3-COLUMN MINI LISTS --- */
.list-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.mini-head { margin-bottom: 15px !important; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.mini-head h3 { font-size: 1.1rem !important; font-weight: 800; letter-spacing: 0.5px; }

.small-item { 
  display: flex; align-items: center; gap: 12px; padding: 12px; 
  background: rgba(255,255,255,0.02); border: 1px solid var(--border); 
  border-radius: 16px; margin-bottom: 10px; cursor: pointer; transition: 0.2s;
}
.small-item:hover { background: rgba(124,92,255,0.08); border-color: rgba(124,92,255,0.3); transform: translateX(5px); }
.small-info { flex: 1; }
.small-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; color: var(--text); }
.small-price { font-weight: 800; color: var(--primary); font-size: 0.85rem; }
.small-arrow { opacity: 0; color: var(--primary); font-weight: 900; transition: 0.3s; }
.small-item:hover .small-arrow { opacity: 1; transform: translateX(3px); }
/* --- 3-COLUMN LIST REFINEMENT --- */
.list-col { 
  background: rgba(255,255,255,0.015); 
  border: 1px solid var(--border); 
  border-radius: 24px; 
  padding: 16px; 
  transition: 0.3s;
}
.list-col:hover { background: rgba(255,255,255,0.03); }

/* --- WHATSAPP PILL DESIGN --- */
.float-btn.whatsapp-btn {
  width: auto !important; 
  height: 52px !important; 
  border-radius: 999px !important; 
  padding: 0 25px !important; 
  display: flex !important; 
  align-items: center !important; 
  gap: 10px;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
}
/* --- SOCIAL PROOF POPUP --- */
.social-popup {
  position: fixed; bottom: 20px; left: 20px;
  background: rgba(30, 20, 50, 0.95);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 15px;
  z-index: 9999;
  box-shadow: 0 15px 45px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  transform: translateX(-150%);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.social-popup.show { transform: translateX(0); }
.social-thumb { 
  width: 45px; height: 45px; 
  background: var(--surface2); 
  border-radius: 12px; 
  display: grid; place-items: center; 
  font-size: 1.5rem; 
}
.social-info { font-size: 0.85rem; }
.social-info strong { color: var(--primary); display: block; margin-bottom: 2px; }
.social-info small { color: #2ecc71; font-weight: 700; opacity: 0.8; }