/* =========================================================
   EMI STORE — Premium Mobile-App Style System
   ========================================================= */

:root{
  --brand-1:#0B3D2E;      /* deep emerald */
  --brand-2:#10B981;      /* emerald */
  --brand-3:#059669;
  --gold:#D4A017;         /* EMI / premium accent */
  --gold-soft:#F4C430;
  --bg:#F6F8F7;
  --bg-dark:#0E1512;
  --card:#FFFFFF;
  --card-dark:#161F1B;
  --text:#0F1B17;
  --text-dark:#EAF3EF;
  --muted:#6B7A75;
  --muted-dark:#93A79E;
  --border:rgba(15,27,23,0.08);
  --border-dark:rgba(255,255,255,0.08);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-soft:0 8px 30px rgba(11,61,46,0.08);
  --shadow-card:0 4px 18px rgba(11,61,46,0.06);
  --shadow-pop:0 14px 40px rgba(11,61,46,0.16);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html.dark{
  --bg:var(--bg-dark);
  --card:var(--card-dark);
  --text:var(--text-dark);
  --muted:var(--muted-dark);
  --border:var(--border-dark);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Poppins','Hind Siliguri',system-ui,-apple-system,sans-serif;
  font-size:14px;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior:smooth;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,h4,.display{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-0.02em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* App shell: constrain to a phone-like column on wide screens */
.app-shell{max-width:520px;margin:0 auto;position:relative;background:var(--bg);min-height:100vh;
  box-shadow:0 0 60px rgba(0,0,0,0.06);}
@media(min-width:521px){ body{background:#E9EEEC;} }

/* ---------- Top App Bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  background:rgba(255,255,255,0.72);
  border-bottom:1px solid var(--border);
  padding:8px 12px;
  transform:translateY(0);
  transition:transform .28s ease;
  will-change:transform;
  display:flex;align-items:center;flex-wrap:nowrap;gap:6px;
}
.topbar.hide-on-scroll{ transform:translateY(-100%); }
html.dark .topbar{background:rgba(14,21,18,0.72);}
/* topbar-row is kept in the markup for backwards compatibility, but every theme now lays the
   search bar out inline with the logo/lang/theme/bell buttons (like theme3 used to, uniquely) —
   so topbar-row's children become direct flex items of .topbar via display:contents. */
.topbar-row{display:contents;}
.brand-logo{order:1;
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#6366F1 0%,#8B5CF6 100%);
  color:#fff;font-weight:800;font-size:15px;font-family:'Poppins',sans-serif;
  flex-shrink:0;position:relative;
  box-shadow:0 4px 12px rgba(99,102,241,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand-text-wrap{order:2;flex:0 1 auto !important;min-width:0;max-width:26vw;overflow:hidden;}
.brand-logo::before{display:none;}
.brand-logo:active{transform:scale(0.94);}
.brand-logo-img{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.12);overflow:hidden;padding:0;border-radius:10px;}
.brand-logo-img::before{display:none;}
.brand-logo-img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.lang-btn{order:4;
  width:22px;height:17px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:7.5px;font-weight:700;letter-spacing:0.2px;
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  flex-shrink:0;transition:transform .15s ease,color .15s ease;
}
.theme-switch-btn{order:5;width:22px;height:17px;font-size:7.5px;}
.lang-btn:active{transform:scale(0.9);}
.icon-btn{order:6;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);position:relative;color:var(--text);
  box-shadow:var(--shadow-card);flex-shrink:0;transition:transform .15s ease;
}
.icon-btn i{width:16px;height:16px;}
.icon-btn:active{transform:scale(0.9);}
.badge-dot{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#FF5F6D,#FFC371);border:2px solid var(--card);
}
.search-bar{
  order:3;flex:1 1 auto;min-width:0;
  margin-top:0;display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--border);border-radius:999px;
  padding:7px 12px;box-shadow:none;position:relative;
}
.search-bar input{border:none;outline:none;background:none;flex:1;min-width:0;font-size:11.5px;color:var(--text);}
.search-suggestions{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-pop);
  overflow:hidden;z-index:50;display:none;
}
.search-suggestions.show{display:block;animation:dropIn .18s ease;}
.search-suggestions .sug-item{padding:11px 14px;font-size:12px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);}
.search-suggestions .sug-item:last-child{border-bottom:none;}
.search-suggestions .sug-item:active{background:rgba(16,185,129,0.08);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:16px;font-weight:600;font-size:13px;
  position:relative;overflow:hidden;transition:transform .15s ease, box-shadow .2s ease;
  isolation:isolate;
}
.btn:active{transform:scale(0.97);}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  color:#fff;box-shadow:0 10px 24px rgba(16,185,129,0.35);
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#2b2103;box-shadow:0 10px 24px rgba(212,160,23,0.35);
}
.btn-outline{background:var(--card);border:1.5px solid var(--border);color:var(--text);}
.btn-ghost{background:rgba(16,185,129,0.1);color:var(--brand-2);}
.btn-block{width:100%;}
.btn-sm{padding:9px 14px;font-size:11.5px;border-radius:12px;}

/* Ripple effect */
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rippleAnim .6s linear;
  background:rgba(255,255,255,0.55);pointer-events:none;}
html.dark .btn-outline .ripple, html.dark .btn-ghost .ripple{background:rgba(255,255,255,0.18);}
@keyframes rippleAnim{to{transform:scale(3.5);opacity:0;}}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border-radius:var(--radius-md);border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.glass{
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,0.25);
}

/* ---------- Hero / Promo Slider — Premium redesign ---------- */
.hero-wrap{padding:12px 14px 6px;}
.hero-slider{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px; -ms-overflow-style:none; scrollbar-width:none;
}
.hero-slider::-webkit-scrollbar{display:none;}
.hero-slide{
  scroll-snap-align:start;flex:0 0 100%;min-height:190px;border-radius:20px;
  padding:24px 22px;position:relative;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
}
/* Slide 1 — Deep purple EMI promo */
.hero-slide.s1{
  background:linear-gradient(135deg,#3730A3 0%,#6366F1 50%,#8B5CF6 100%);
}
/* Slide 2 — Warm amber sale */
.hero-slide.s2{
  background:linear-gradient(135deg,#92400E 0%,#D97706 50%,#F59E0B 100%);
}
/* Slide 3 — Rose red offer */
.hero-slide.s3{
  background:linear-gradient(135deg,#9F1239 0%,#E11D48 50%,#F43F5E 100%);
}
/* Decorative circles */
.hero-slide::before{
  content:'';position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,0.10);pointer-events:none;
}
.hero-slide::after{
  content:'';position:absolute;right:30px;bottom:-60px;width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,0.07);pointer-events:none;
}
.hero-eyebrow{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,0.22);padding:4px 10px;border-radius:20px;
  width:fit-content;backdrop-filter:blur(4px);
}
.hero-title{font-size:18px;font-weight:800;line-height:1.25;max-width:72%;letter-spacing:-0.02em;}
.hero-sub{font-size:10px;opacity:.88;max-width:70%;line-height:1.5;}
.hero-cta-pill{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.22);
  backdrop-filter:blur(6px);color:#fff;font-size:10.5px;font-weight:700;
  padding:8px 16px;border-radius:20px;border:1.5px solid rgba(255,255,255,0.35);
  width:fit-content;margin-top:2px;transition:background .2s;
}
.hero-cta-pill:hover,.hero-cta-pill:active{background:rgba(255,255,255,0.32);}
.hero-dots{display:flex;gap:5px;justify-content:center;margin-top:8px;}
.hero-dot{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,0.15);transition:.25s;}
.hero-dot.active{width:20px;border-radius:4px;background:#6366F1;}
html.dark .hero-dot{background:rgba(255,255,255,0.25);}
html.dark .hero-dot.active{background:#818CF8;}
.hero-img{position:absolute;right:10px;bottom:0;height:90%;width:auto;object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,0.3));pointer-events:none;}

/* Full-banner slides: uploaded image already contains its own text/design,
   so it fills a fixed 16:9 box and is cropped (never stretched or distorted)
   no matter what size the source image is. This keeps every banner a
   consistent, predictable size regardless of what gets uploaded later. */
.hero-slide.has-image{
  padding:0;aspect-ratio:16/9;min-height:0;justify-content:flex-start;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);background:#0b0b12;
}
.hero-slide.has-image::before,.hero-slide.has-image::after{display:none;}
.hero-slide.has-image .hero-banner-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:none;pointer-events:none;
}

/* ---------- Installment Plans grid ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.plan-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:8px 6px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-card);min-width:0;}
.plan-card.popular{border-color:var(--brand-2);}
.plan-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--brand-3),var(--brand-2));
  color:#fff;font-size:5.8px;font-weight:700;padding:2px 6px;border-radius:20px;white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,0.18);}
.plan-main{margin-bottom:4px;display:flex;flex-direction:column;}
.plan-m{font-size:9px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.plan-r{font-size:7px;font-weight:700;color:var(--brand-2);margin-top:1px;}
.plan-features{list-style:none;flex:1;margin:0 0 6px;padding:0;}
.plan-features li{font-size:6px;color:var(--muted);line-height:1.4;padding-left:7px;position:relative;}
.plan-features li::before{content:'';position:absolute;left:0;top:5px;width:3px;height:3px;border-radius:50%;background:var(--brand-2);}
.plan-btn{text-align:center;border:1.5px solid var(--brand-2);color:var(--brand-2);border-radius:var(--radius-sm);
  padding:5px 0;font-size:6.5px;font-weight:700;background:transparent;display:block;white-space:nowrap;}
.plan-card.popular .plan-btn{background:linear-gradient(135deg,var(--brand-3),var(--brand-2));color:#fff;border:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.16);}

/* ---------- Section headers ---------- */
.section{padding:10px 14px 2px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.section-title{font-size:13px;font-weight:700;color:#111827;letter-spacing:-0.01em;}
html.dark .section-title{color:var(--text-dark);}
.section-link{font-size:10.5px;color:#6366F1;font-weight:600;display:flex;align-items:center;gap:2px;}
.section-link::after{content:'›';font-size:13px;line-height:1;}

/* ---------- Categories — clean white circle, Daraz/Shopee style ---------- */
.cat-scroll{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:38px;}
.cat-item:active .cat-ring{transform:scale(0.92);}

/* Single uniform white circle with subtle border — NO conic gradient, NO glow.
   Fixed width/height + flex-shrink:0 + box-sizing:border-box guarantee every
   category renders at the exact same size regardless of icon or label length. */
.cat-ring{
  width:33px;height:33px;min-width:33px;min-height:33px;max-width:33px;max-height:33px;
  box-sizing:border-box;border-radius:50%;
  background:#FFFFFF;
  border:1.5px solid #E5E7EB;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .2s ease;
  animation:none !important;
}
html.dark .cat-ring{background:#1E2923;border-color:rgba(255,255,255,0.12);}
.cat-item:active .cat-ring{transform:scale(0.92);box-shadow:0 1px 4px rgba(0,0,0,0.08);}

/* Colored icons — each position gets its own color */
.cat-item:nth-of-type(6n+1) .cat-icon{ color:#7C3AED; }
.cat-item:nth-of-type(6n+2) .cat-icon{ color:#2563EB; }
.cat-item:nth-of-type(6n+3) .cat-icon{ color:#DC2626; }
.cat-item:nth-of-type(6n+4) .cat-icon{ color:#059669; }
.cat-item:nth-of-type(6n+5) .cat-icon{ color:#D97706; }
.cat-item:nth-of-type(6n)   .cat-icon{ color:#DB2777; }

/* Icon container — transparent, just for sizing */
.cat-icon{
  width:100%;height:100%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:none;box-shadow:none;
  transition:transform .18s ease;
}
.cat-icon svg,
.cat-icon i{width:13px !important;height:13px !important;flex-shrink:0;}
.cat-item:active .cat-icon{transform:scale(0.9);}
.cat-label{
  font-size:7.5px;line-height:1.2;text-align:center;
  color:#374151;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38px;
}
html.dark .cat-label{color:var(--muted);}

/* ---------- Product Grid & Card ---------- */

/* Premium two-tone pill "বিস্তারিত দেখুন" button */
.card-buy-btn{
  display:flex;align-items:center;gap:5px;width:100%;
  margin:6px auto 0;padding:5px 12px 5px 4px;border-radius:999px;
  font-size:9.5px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.01em;
  background:linear-gradient(90deg,#FBBF24 0%,#EA580C 100%);
  box-shadow:0 0 8px rgba(234,88,12,0.4);
  transition:opacity .2s ease,box-shadow .2s ease,transform .15s ease;
  position:relative;overflow:hidden;border:none;max-width:100%;
}
.card-buy-btn.cbb-purple{
  background:linear-gradient(90deg,#EC4899 0%,#7C3AED 100%);
  box-shadow:0 0 8px rgba(124,58,237,0.4);
}
.card-buy-btn:active{transform:scale(0.96);}
.card-buy-btn .cbb-icon{
  width:16px;height:16px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.card-buy-btn .cbb-icon i{width:9px;height:9px;color:#EA580C;}
.card-buy-btn.cbb-purple .cbb-icon i{color:#7C3AED;}
.card-buy-btn .cbb-arrow{margin-left:auto;width:10px;height:10px;flex-shrink:0;}
.card-buy-btn.buy-active{
  background:linear-gradient(90deg,#F43F5E 0%,#F59E0B 100%);
  box-shadow:0 0 8px rgba(244,63,94,0.4);
}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.product-card{
  background:#ffffff;border-radius:14px;overflow:hidden;
  border:1px solid rgba(0,0,0,0.07);
  box-shadow:0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;position:relative;
  display:flex;flex-direction:column;height:100%;
}
html.dark .product-card{background:var(--card-dark);border-color:rgba(255,255,255,0.08);box-shadow:0 2px 12px rgba(0,0,0,0.22);}
.product-card:active{transform:scale(0.97);box-shadow:0 1px 4px rgba(0,0,0,0.08);}
/* Thin 5-colour borders — each product card cycles through one of 5 accent colours */
.product-card.pc-border-1{border:1.5px solid #8B5CF6 !important;}
.product-card.pc-border-2{border:1.5px solid #3B82F6 !important;}
.product-card.pc-border-3{border:1.5px solid #F43F5E !important;}
.product-card.pc-border-4{border:1.5px solid #10B981 !important;}
.product-card.pc-border-5{border:1.5px solid #F59E0B !important;}
html.dark .product-card.pc-border-1{border-color:#A78BFA !important;}
html.dark .product-card.pc-border-2{border-color:#60A5FA !important;}
html.dark .product-card.pc-border-3{border-color:#FB7185 !important;}
html.dark .product-card.pc-border-4{border-color:#34D399 !important;}
html.dark .product-card.pc-border-5{border-color:#FBBF24 !important;}
.product-img-wrap{position:relative;aspect-ratio:1/1;background:#F8F9FA;overflow:hidden;padding:6%;}
html.dark .product-img-wrap{background:#1A201E;}
.product-img-wrap img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease;}
.product-badge{
  position:absolute;top:5px;left:5px;background:#6366F1;
  color:#fff;font-size:6.5px;font-weight:800;padding:2.5px 6px;border-radius:6px;letter-spacing:.03em;
}
.wish-btn{
  position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  color:#D64545;transition:transform .15s ease;box-shadow:0 1px 5px rgba(17,24,39,0.12);border:none;
}
.wish-btn i{width:8px;height:8px;}
.wish-btn:active{transform:scale(0.8);}
.wish-btn.active i{fill:#D64545;}
.product-info{padding:5px 5px 6px;display:flex;flex-direction:column;flex:1;}
.product-name{font-size:8.5px;font-weight:600;line-height:1.25;color:var(--text);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:21px;margin-bottom:0;}
.product-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin-top:2px;}
.price-now{font-size:11px;font-weight:800;color:#EF4444;letter-spacing:-.03em;}
html.dark .price-now{color:#F87171;}
.price-old{font-size:7.5px;color:var(--muted);text-decoration:line-through;}
.emi-chip{
  display:inline-flex;align-items:center;gap:3px;margin-top:2px;font-size:6px;font-weight:700;
  background:rgba(99,102,241,0.08);color:#4F46E5;
  padding:2px 5px;border-radius:20px;line-height:1.3;border:1px solid rgba(99,102,241,0.18);
  width:fit-content;
}
.emi-chip i{width:7px !important;height:7px !important;flex-shrink:0;}
html.dark .emi-chip{color:#A5B4FC;background:rgba(99,102,241,0.14);border-color:rgba(99,102,241,0.25);}
.rating-row{display:flex;align-items:center;gap:3px;margin-top:auto;padding-top:2px;font-size:6.5px;color:var(--muted);font-weight:500;margin-bottom:2px;}
.rating-row i{width:7px !important;height:7px !important;}

/* ---------- Skeleton loading ---------- */
.skeleton{
  background:linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.11) 37%, rgba(0,0,0,0.06) 63%);
  background-size:400% 100%; animation:skeletonShimmer 1.4s ease infinite; border-radius:10px;
}
html.dark .skeleton{background:linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);background-size:400% 100%;}
@keyframes skeletonShimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
.skeleton-card{height:0;padding-bottom:150%;position:relative;}
.skeleton-line{height:12px;margin-top:8px;}

/* ---------- EMI Offer Banner ---------- */
.emi-offer-card{
  border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#1E1B4B,#4338CA 60%,#7C3AED);box-shadow:var(--shadow-pop);
}
.emi-offer-card h3{font-size:16px;margin:0 0 6px;}
.emi-offer-card p{font-size:11px;opacity:.9;margin:0 0 14px;max-width:85%;}
.emi-steps{display:flex;gap:10px;}
.emi-step{flex:1;background:rgba(255,255,255,0.14);border-radius:14px;padding:12px 10px;text-align:center;}
.emi-step .num{font-size:16px;font-weight:800;}
.emi-step .lbl{font-size:9px;opacity:.85;margin-top:2px;}

/* ---------- Reviews ---------- */
.review-card{width:250px;flex:0 0 auto;padding:16px;border-radius:var(--radius-md);}
.review-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none;}
.review-scroll::-webkit-scrollbar{display:none;}
.stars{color:var(--gold);font-size:11.5px;letter-spacing:1px;}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;}

/* Continuous auto-scrolling review marquee — loops non-stop, pauses on touch/hover */
.review-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.review-track{display:flex;gap:12px;width:max-content;animation:review-marquee-scroll 42s linear infinite;}
.review-marquee.paused .review-track{animation-play-state:paused;}
@keyframes review-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- FAQ Accordion ---------- */
.faq-item{border-bottom:1px solid var(--border);padding:11px 0;}
.faq-q{display:flex;align-items:center;justify-content:between;justify-content:space-between;font-weight:600;font-size:10.5px;}
.faq-icon{transition:transform .25s ease;color:var(--brand-2);}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:9.5px;color:var(--muted);line-height:1.6;}
.faq-item.open .faq-a{max-height:200px;padding-top:8px;}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg, transparent, rgba(11,61,46,0.04));padding:26px 16px 100px;margin-top:10px;}
.footer-cols{display:flex;flex-wrap:wrap;gap:20px;}
.footer-col h4{font-size:11px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.footer-col a{display:block;font-size:11px;margin-bottom:8px;color:var(--text);}
.footer-bottom{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);text-align:center;}

/* ---------- Bottom Navigation ---------- */
.bottom-nav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;max-width:520px;width:100%;z-index:50;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;
  padding:8px 6px calc(8px + var(--safe-bottom));box-shadow:0 -8px 30px rgba(0,0,0,0.06);
}
html.dark .bottom-nav{background:rgba(14,21,18,0.85);}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);flex:1;padding:6px 0;position:relative;}
.nav-item i{width:22px;height:22px;}
.nav-item span{font-size:8.5px;font-weight:600;}
.nav-item.active{color:var(--brand-2);}
.nav-item.active::before{
  content:'';position:absolute;top:-8px;width:26px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-2),var(--gold));
}
.fab{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  display:flex;align-items:center;justify-content:center;color:#2b2103;
  box-shadow:0 10px 24px rgba(212,160,23,0.45);border:4px solid var(--bg);
}
.fab:active{transform:translateX(-50%) scale(0.9);}

/* ---------- Product Details Page ---------- */
.pd-gallery{position:relative;}
.pd-main-img{aspect-ratio:1/1;background:#EEF3F1;border-radius:0 0 28px 28px;overflow:hidden;}
.pd-main-img img,.pd-main-img video{width:100%;height:100%;object-fit:cover;}
.pd-thumbs{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;}
.pd-thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;border:2px solid transparent;flex-shrink:0;opacity:.7;}
.pd-thumb.active{border-color:var(--brand-2);opacity:1;}
.pd-float-back{position:absolute;top:16px;left:16px;z-index:5;}
.pd-float-actions{position:absolute;top:16px;right:16px;z-index:5;display:flex;gap:8px;}

.tab-bar{display:flex;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:5px;margin:16px;}
.tab-btn{flex:1;text-align:center;padding:9px 4px;border-radius:10px;font-size:11px;font-weight:600;color:var(--muted);transition:.2s;}
.tab-btn.active{background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;}
.tab-panel{display:none;padding:0 16px 16px;}
.tab-panel.active{display:block;animation:fadeUp .25s ease;}

.spec-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--border);font-size:11.5px;}
.spec-row span:first-child{color:var(--muted);}
.spec-row span:last-child{font-weight:600;text-align:right;}

/* EMI Calculator */
.emi-calc-card{
  border-radius:var(--radius-lg);padding:18px;background:linear-gradient(160deg, rgba(16,185,129,0.08), rgba(212,160,23,0.08));
  border:1px solid var(--border);
}
.month-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.month-chip{padding:9px 16px;border-radius:12px;background:var(--card);border:1.5px solid var(--border);font-size:11.5px;font-weight:600;transition:.15s;}
.month-chip.active{background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(16,185,129,0.3);}
.month-chip:active{transform:scale(0.95);}

/* Hero monthly-installment figure — the single largest, most prominent number on the page */
.emi-monthly-hero{
  margin:4px 0 14px;padding:20px 16px;border-radius:20px;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  box-shadow:0 12px 28px rgba(11,61,46,0.28);position:relative;overflow:hidden;
}
.emi-monthly-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 22% 18%, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.emi-monthly-hero-label{font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.82);letter-spacing:.03em;}
.emi-monthly-hero-amount{font-size:36px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.12;transition:opacity .15s ease;}
.emi-monthly-hero-months{font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.78);}
.emi-result{background:var(--card);border-radius:16px;padding:16px;margin-top:10px;box-shadow:var(--shadow-card);}
.emi-result-row{display:flex;justify-content:space-between;padding:6px 0;font-size:11.5px;color:var(--muted);}
.emi-result-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:12px;font-size:13px;font-weight:800;color:var(--text);}
.emi-result-row .val{color:var(--text);font-weight:600;}
.slider-wrap{margin:14px 0 4px;}
input[type=range]{width:100%;accent-color:var(--brand-2);}

.sticky-buy-bar{
  position:sticky;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);
  padding:12px 16px calc(12px + var(--safe-bottom));display:flex;gap:10px;z-index:30;
}

/* ---------- Checkout Steps ---------- */
.stepper{display:flex;align-items:center;padding:16px;gap:4px;}
.step-dot{
  width:28px;height:28px;border-radius:50%;background:var(--card);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--muted);flex-shrink:0;transition:.25s;
}
.step-dot.active{background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;border-color:transparent;}
.step-dot.done{background:var(--brand-2);color:#fff;border-color:transparent;}
.step-line{flex:1;height:2px;background:var(--border);}
.step-line.done{background:var(--brand-2);}
.checkout-step{display:none;padding:6px 16px 16px;animation:fadeUp .3s ease;}
.checkout-step.active{display:block;}

.form-group{margin-bottom:14px;}
.form-label{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block;}
.form-input, .form-select, textarea.form-input{
  width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--card);font-size:12px;color:var(--text);outline:none;transition:.2s;
}
.form-input:focus, .form-select:focus, textarea.form-input:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(16,185,129,0.12);}
.upload-box{
  border:1.5px dashed var(--border);border-radius:16px;padding:20px;text-align:center;font-size:11px;color:var(--muted);
  position:relative;transition:border-color .2s ease,background .2s ease;
}
.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-box.uploaded{border-style:solid;border-color:#10B981;background:rgba(16,185,129,0.08);color:#0B3D2E;}
.upload-box .upload-filename{display:block;font-size:9.5px;margin-top:4px;font-weight:600;word-break:break-all;color:#0B3D2E;}
.upload-box .upload-default-content{display:block;}
.upload-box.uploaded .upload-default-content{display:none;}
.upload-box .upload-confirm-content{display:none;}
.upload-box.uploaded .upload-confirm-content{display:block;}
.pay-method{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px solid var(--border);margin-bottom:10px;}
.pay-method.selected{border-color:var(--brand-2);background:rgba(16,185,129,0.06);}
.pay-logo{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:8.5px;color:#fff;}

/* ---------- Payment Tiles (grid style, icon + name + status) ---------- */
.pay-tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:4px;}
.pay-tile{position:relative;display:block;border:1.5px solid var(--border);border-radius:16px;padding:16px 10px 14px;text-align:center;cursor:pointer;background:var(--card);transition:border-color .18s ease,background .18s ease,transform .12s ease;}
.pay-tile:active{transform:scale(0.97);}
.pay-tile input[type=radio]{position:absolute;top:10px;right:10px;width:15px;height:15px;accent-color:var(--brand-2);margin:0;}
.pay-tile .pt-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;color:#fff;font-weight:800;font-size:8.5px;letter-spacing:0.2px;}
.pay-tile .pt-name{font-size:12px;font-weight:700;}
.pay-tile .pt-sub{font-size:8.5px;font-weight:600;margin-top:2px;color:var(--brand-2);}
.pay-tile.selected{border-color:var(--brand-2);background:rgba(16,185,129,0.07);box-shadow:0 0 0 3px rgba(16,185,129,0.10);}

/* ---------- Locked / read-only amount display ---------- */
.locked-amount{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--border);border-radius:16px;padding:14px 16px;background:var(--card);}
.locked-amount .la-value{font-size:20px;font-weight:800;color:var(--brand-1);}
html.dark .locked-amount .la-value{color:var(--brand-2);}
.locked-amount .la-lock{display:flex;align-items:center;gap:4px;font-size:8.5px;color:var(--muted);font-weight:600;background:rgba(107,122,117,0.1);padding:5px 9px;border-radius:20px;white-space:nowrap;}

/* ---------- Send-money reveal box with copy button ---------- */
.sendto-box{display:none;align-items:center;justify-content:space-between;gap:10px;border:1.5px dashed var(--brand-2);border-radius:14px;padding:12px 14px;background:rgba(16,185,129,0.06);margin:12px 0 16px;}
.sendto-box .sb-label{font-size:8.5px;color:var(--muted);font-weight:600;}
.sendto-box .sb-number{font-size:14px;font-weight:800;letter-spacing:0.2px;font-family:monospace;margin-top:2px;word-break:break-all;}
.sendto-copy{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:700;flex-shrink:0;transition:background .2s ease;}
.sendto-copy.copied{background:linear-gradient(135deg,var(--gold),var(--gold-soft));}

/* ---------- Thin colorful gradient border frame ---------- */
.colorful-frame{position:relative;border-radius:24px;padding:2px;background:linear-gradient(120deg,#ff5f6d,#ffc371,#47cf73,#22c1e0,#8b5cf6,#ff5f6d);background-size:280% 280%;animation:cf-move 7s ease infinite;}
.colorful-frame-inner{border-radius:22px;background:var(--bg);overflow:hidden;}
.colorful-frame.tight{border-radius:18px;}
.colorful-frame.tight > .colorful-frame-inner{border-radius:16px;background:var(--card);}
@keyframes cf-move{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* ---------- Misc animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .35s ease both;}
.pulse-success{animation:pulseSuccess 1.4s ease infinite;}
@keyframes pulseSuccess{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.35);}50%{box-shadow:0 0 0 14px rgba(16,185,129,0);}}

/* Toast */
.toast{
  position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#111;color:#fff;padding:12px 18px;border-radius:14px;font-size:11.5px;
  opacity:0;pointer-events:none;transition:.3s ease;z-index:100;box-shadow:var(--shadow-pop);max-width:420px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Dark mode toggle switch */
.switch{width:44px;height:26px;background:var(--border);border-radius:20px;position:relative;flex-shrink:0;transition:.25s;}
.switch.on{background:linear-gradient(135deg,var(--brand-2),var(--brand-1));}
.switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.switch.on .knob{left:21px;}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:10px;}

/* ============================================================
   Design System Extensions — reusable premium components
   (used by about/contact/faq/return_policy/categories/wishlist etc.)
   ============================================================ */

/* Product card image zoom + lift on hover (progressive enhancement) */
@media (hover:hover){
  .product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
  .product-card:hover .product-img-wrap img{ transform:scale(1.06); }
  .cat-item:hover .cat-icon{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(16,185,129,0.22); }
}

/* Reusable page hero banner (about / contact / faq / return-policy) */
.page-hero{
  margin:14px 16px 4px;border-radius:var(--radius-lg);padding:26px 22px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0B3D2E 0%,#10B981 55%,#059669 100%);color:#fff;box-shadow:var(--shadow-pop);
}
.page-hero::after{content:'';position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.12);}
.page-hero::before{content:'';position:absolute;left:-30px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(212,160,23,0.18);}
.page-hero .icon-badge{
  width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,0.16);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;position:relative;z-index:1;
}
.page-hero h1{font-size:17.5px;margin:0 0 8px;position:relative;z-index:1;}
.page-hero p{font-size:11px;opacity:.92;margin:0;max-width:88%;line-height:1.7;position:relative;z-index:1;}

/* Icon feature grid (mission/vision/why-us style tiles) */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.feature-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 14px;box-shadow:var(--shadow-card);transition:transform .18s ease;}
.feature-tile:active{transform:scale(0.97);}
.feature-tile .fi{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;background:linear-gradient(160deg,rgba(16,185,129,0.16),rgba(212,160,23,0.16));color:var(--brand-1);}
html.dark .feature-tile .fi{color:var(--brand-2);}
.feature-tile h4{font-size:11px;margin:0 0 4px;}
.feature-tile p{font-size:9.5px;color:var(--muted);margin:0;line-height:1.6;}

/* Stat strip (used on About page) */
.stat-strip{display:flex;gap:10px;}
.stat-strip .stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 10px;text-align:center;box-shadow:var(--shadow-card);}
.stat-strip .stat .num{font-size:15px;font-weight:800;color:var(--brand-1);}
html.dark .stat-strip .stat .num{color:var(--brand-2);}
.stat-strip .stat .lbl{font-size:9px;color:var(--muted);margin-top:2px;}

/* Contact method tiles */
.contact-tile{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);margin-bottom:10px;transition:transform .15s ease;}
.contact-tile:active{transform:scale(0.98);}
.contact-tile .ci{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;}
.contact-tile .label{font-size:9.5px;color:var(--muted);}
.contact-tile .value{font-size:11.5px;font-weight:700;}

/* Generic empty-state block (wishlist / search / notifications / compare) */
.empty-state{text-align:center;padding:50px 20px;}
.empty-state .ei{width:64px;height:64px;border-radius:50%;background:rgba(16,185,129,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.empty-state .ei i{color:var(--brand-2);}
.empty-state p{font-size:11.5px;color:var(--muted);margin:0 0 18px;line-height:1.6;}

/* Numbered policy steps (Return Policy page) */
.policy-step{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed var(--border);}
.policy-step:last-child{border-bottom:none;}
.policy-step .pn{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.policy-step .pt{font-size:11px;color:var(--muted);line-height:1.7;}
.policy-step .pt strong{color:var(--text);font-weight:700;}
.chat-fab{
  position:fixed;left:50%;transform:translateX(146px);bottom:84px;z-index:60;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(18,140,126,0.4);border:3px solid var(--bg);
}
@media(max-width:520px){ .chat-fab{ left:auto; right:14px; transform:none; } }
.chat-fab:active{transform:scale(0.9);}
@media(max-width:520px){ .chat-fab:active{transform:scale(0.9);} }
.chat-fab .dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#FF5F6D;border:2px solid var(--bg);}

.whatsapp-fab{
  position:fixed;left:50%;transform:translateX(146px);bottom:148px;z-index:60;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(18,140,126,0.4);border:3px solid var(--bg);
  transition:transform .15s ease;
}
@media(max-width:520px){ .whatsapp-fab{ left:auto; right:14px; transform:none; } }
.whatsapp-fab:active{transform:scale(0.9);}
@media(max-width:520px){ .whatsapp-fab:active{transform:scale(0.9);} }

/* ── Contact Picker (shows on FAB click) ── */
.chat-picker{
  position:fixed;inset:0;background:rgba(11,20,17,0.45);z-index:70;display:none;
  align-items:flex-end;justify-content:center;
}
.chat-picker.show{display:flex;animation:fadeIn .18s ease;}
.chat-picker-box{
  width:100%;max-width:520px;background:var(--card);
  border-radius:24px 24px 0 0;padding:16px 14px 24px;
  animation:chatSlideUp .28s ease;
}
.chat-picker-title{
  font-size:13px;font-weight:700;color:var(--muted);text-align:center;
  margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase;
}
.chat-picker-opt{
  display:flex;align-items:center;gap:14px;padding:13px 12px;
  border-radius:16px;width:100%;background:transparent;text-align:left;
  border:1px solid transparent;margin-bottom:6px;
  transition:background .15s ease,border-color .15s ease;
}
.chat-picker-opt:active,.chat-picker-opt:hover{background:var(--bg);border-color:var(--border);}
.chat-picker-icon{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.chat-picker-opt-title{font-size:13px;font-weight:700;color:var(--text);}
.chat-picker-opt-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.chat-picker-cancel{
  width:100%;margin-top:8px;padding:13px;border-radius:16px;
  background:rgba(214,69,69,0.08);color:#D64545;font-size:13px;font-weight:700;
  border:none;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.chat-overlay{
  position:fixed;inset:0;background:rgba(11,20,17,0.45);z-index:70;display:none;
  align-items:flex-end;justify-content:center;
}
.chat-overlay.show{display:flex;animation:fadeUp .2s ease;}
.chat-panel{
  width:100%;max-width:520px;background:var(--card);border-radius:24px 24px 0 0;
  box-shadow:0 -20px 50px rgba(0,0,0,0.25);display:flex;flex-direction:column;
  height:78vh;max-height:640px;animation:chatSlideUp .3s ease;
}
@keyframes chatSlideUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.chat-header{
  position:relative;
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));border-radius:24px 24px 0 0;color:#fff;
}
.chat-header .avatar{background:rgba(255,255,255,0.2);}
.chat-header .title{font-weight:700;font-size:12.5px;}
.chat-header .status{font-size:9px;opacity:.85;display:flex;align-items:center;gap:5px;}
.chat-header .status::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ADE80;}
.chat-close{margin-left:auto;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;color:#fff;}
.chat-contact-trigger{width:28px;height:28px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.75);flex-shrink:0;}
.chat-contact-trigger:active{background:rgba(255,255,255,0.18);}
.chat-contact-popup{
  position:absolute;top:52px;right:52px;z-index:80;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);padding:6px;min-width:190px;
  display:none;flex-direction:column;gap:2px;
  animation:fadeUp .15s ease;
}
.chat-contact-popup.show{display:flex;}
.chat-contact-option{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  font-size:11.5px;font-weight:600;color:var(--text);text-align:left;width:100%;background:transparent;
}
.chat-contact-option:active{background:var(--bg);}
.chat-contact-option .cico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.msg-row{display:flex;gap:8px;max-width:85%;}
.msg-row.user{align-self:flex-end;flex-direction:row-reverse;}
.msg-bubble{padding:10px 14px;border-radius:16px;font-size:11.5px;line-height:1.5;}
.msg-row.bot .msg-bubble{background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px;}
.msg-row.user .msg-bubble{background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;border-bottom-right-radius:4px;}
.msg-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand-1));}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;}
.chat-quick button{background:rgba(16,185,129,0.1);color:var(--brand-1);border:1px solid rgba(16,185,129,0.25);padding:7px 12px;border-radius:20px;font-size:10px;font-weight:600;}
html.dark .chat-quick button{color:var(--brand-2);}
.chat-input-row{display:flex;gap:8px;padding:12px 16px calc(12px + var(--safe-bottom));border-top:1px solid var(--border);background:var(--card);}
.chat-input-row input{flex:1;border:1.5px solid var(--border);border-radius:20px;padding:11px 16px;font-size:11.5px;background:var(--bg);color:var(--text);outline:none;}
.chat-input-row input:focus{border-color:var(--brand-2);}
.chat-send{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand-2),var(--brand-1));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.typing-dots{display:flex;gap:3px;padding:12px 4px;}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typingBounce 1.2s infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

/* =========================================================
   THEME 2 — "Sharp / Corporate" — a fully different design skin
   Activated via <html data-theme="theme2">. Same markup/features
   as Theme 1, but a different visual language: square geometry,
   flat solid surfaces, a distinct typeface, a different logo
   treatment, and a different rhythm of borders/accents instead
   of soft shadows and glass blur.
   Compound selectors below (with/without .dark) are used instead
   of relying on source order, so dark mode + theme2 always resolve
   correctly regardless of which class the browser applied first.
   ========================================================= */
html[data-theme="theme2"]{
  --brand-1:#0B2545;
  --brand-2:#1D4E89;
  --brand-3:#153A63;
  --gold:#B8860B;
  --gold-soft:#C9971E;
  --radius-lg:6px;
  --radius-md:4px;
  --radius-sm:2px;
  --shadow-soft:0 1px 3px rgba(11,37,69,0.08);
  --shadow-card:0 1px 2px rgba(11,37,69,0.06);
  --shadow-pop:0 6px 16px rgba(11,37,69,0.16);
}
html[data-theme="theme2"]:not(.dark){
  --bg:#F3F5F8;
  --card:#FFFFFF;
  --text:#0E1726;
  --muted:#5B6B80;
  --border:rgba(11,37,69,0.14);
}
html[data-theme="theme2"].dark{
  --bg:#0B1220;
  --card:#131B2C;
  --text:#E7ECF5;
  --muted:#8496AE;
  --border:rgba(255,255,255,0.10);
}

/* Distinct typography: condensed geometric display font for headings/brand */
html[data-theme="theme2"] body{font-family:'Hind Siliguri','Space Grotesk','Poppins',system-ui,sans-serif;}
html[data-theme="theme2"] h1,html[data-theme="theme2"] h2,html[data-theme="theme2"] h3,html[data-theme="theme2"] h4,
html[data-theme="theme2"] .display,
html[data-theme="theme2"] .hero-title,
html[data-theme="theme2"] .section-title,
html[data-theme="theme2"] .price-now{
  font-family:'Space Grotesk','Hind Siliguri',sans-serif;letter-spacing:-0.01em;
}

/* Topbar: flat solid, sharp bottom rule instead of glass blur */
html[data-theme="theme2"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);border-bottom:2px solid var(--brand-1);padding-bottom:10px;}

/* Logo: square monogram badge with a hard outline instead of the 3D glossy gem */
html[data-theme="theme2"] .brand-logo{
  border-radius:6px;box-shadow:none;background:var(--brand-1);border:1.5px solid var(--brand-1);
  transform:none;text-shadow:none;font-family:'Space Grotesk','Poppins',sans-serif;
}
html[data-theme="theme2"] .brand-logo::before{display:none;}
html[data-theme="theme2"] .brand-logo-img{border-radius:6px;box-shadow:none;border:1.5px solid var(--brand-1);}
html[data-theme="theme2"] .lang-btn,
html[data-theme="theme2"] .icon-btn{border-radius:4px;}

/* Buttons: flat, bordered, no gradients/glow */
html[data-theme="theme2"] .btn{border-radius:var(--radius-sm);font-weight:700;letter-spacing:0.01em;}
html[data-theme="theme2"] .btn-primary{background:var(--brand-1);box-shadow:none;}
html[data-theme="theme2"] .btn-gold{background:var(--gold);color:#fff;box-shadow:none;}
html[data-theme="theme2"] .btn-outline{border-width:2px;border-radius:var(--radius-sm);}
html[data-theme="theme2"] .btn-ghost{background:rgba(29,78,137,0.1);color:var(--brand-2);border-radius:var(--radius-sm);}
html[data-theme="theme2"] .btn-sm{border-radius:var(--radius-sm);}

/* Cards / surfaces: flat, left-accent bar instead of soft shadow */
html[data-theme="theme2"] .card{box-shadow:none;border:1px solid var(--border);border-left:3px solid var(--brand-2);border-radius:var(--radius-md);}
html[data-theme="theme2"] .glass{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--border);}

/* Hero slider: flat solid panels, sharp corners, diagonal gradient */
html[data-theme="theme2"] .hero-slide{border-radius:var(--radius-lg);box-shadow:none;}
html[data-theme="theme2"] .hero-slide.s1{background:linear-gradient(100deg,#0B2545 0%,#1D4E89 100%);}
html[data-theme="theme2"] .hero-slide.s2{background:linear-gradient(100deg,#5C4208 0%,#B8860B 100%);}
html[data-theme="theme2"] .hero-slide.s3{background:linear-gradient(100deg,#101B33 0%,#3A4E7A 100%);}
html[data-theme="theme2"] .hero-eyebrow{border-radius:2px;}
html[data-theme="theme2"] .hero-dot{border-radius:2px;}
html[data-theme="theme2"] .hero-dot.active{border-radius:2px;}

/* Categories: square icon tiles, solid navy fill instead of soft gradient */
html[data-theme="theme2"] .cat-icon{border-radius:8px;background:var(--brand-1);color:#fff;}
html[data-theme="theme2"].dark .cat-icon{background:var(--brand-2);}

/* Product cards: flat, bordered, accent top-bar instead of shadow */
html[data-theme="theme2"] .product-card{box-shadow:none;border:1px solid var(--border);border-top:3px solid var(--brand-2);border-radius:var(--radius-md);}
html[data-theme="theme2"] .product-badge{border-radius:2px;background:var(--gold);color:#fff;}
html[data-theme="theme2"] .wish-btn{backdrop-filter:none;border-radius:3px;background:var(--card);border:1px solid var(--border);}

/* Bottom nav: flat, top rule instead of blur */
html[data-theme="theme2"] .bottom-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);border-top:2px solid var(--border);}

/* Section headers: uppercase corporate label style */
html[data-theme="theme2"] .section-title{text-transform:uppercase;letter-spacing:.04em;}
html[data-theme="theme2"] .section-link{text-transform:uppercase;letter-spacing:.03em;}

/* Steps / tabs / chips: square edges everywhere */
html[data-theme="theme2"] .tab-btn,
html[data-theme="theme2"] .month-chip,
html[data-theme="theme2"] .step-dot,
html[data-theme="theme2"] .emi-chip,
html[data-theme="theme2"] .status-pill,
html[data-theme="theme2"] .negotiation-pill,
html[data-theme="theme2"] .form-input,
html[data-theme="theme2"] .form-select,
html[data-theme="theme2"] textarea.form-input,
html[data-theme="theme2"] .upload-box{border-radius:3px;}

/* =========================================================
   THEME 3 — "কিস্তি স্টোর" (Kisti Store) — warm orange, soft,
   rounded consumer-app skin transferred from the design mock.
   Activated via <html data-theme="theme3">. Same markup as
   Theme 1/2, restyled with the orange/cream design language:
   pill search bars, soft shadows, gradient hero + buttons,
   fully-rounded cards, orange-light tinted accents.
   ========================================================= */
html[data-theme="theme3"]{
  --brand-1:#D8420F;
  --brand-2:#F4511E;
  --brand-3:#FF7A45;
  --gold:#0D9488;
  --gold-soft:#2DD4BF;
  --radius-lg:20px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-soft:0 10px 28px rgba(244,81,30,0.14);
  --shadow-card:0 4px 18px rgba(31,41,55,0.06);
  --shadow-pop:0 14px 34px rgba(244,81,30,0.22);
}
html[data-theme="theme3"]:not(.dark){
  --bg:#FAFAF9;
  --card:#FFFFFF;
  --text:#1F2937;
  --muted:#6B7280;
  --border:#ECECEC;
}
html[data-theme="theme3"].dark{
  --bg:#15100E;
  --card:#221A16;
  --text:#F7EFE9;
  --muted:#B5A69C;
  --border:rgba(255,255,255,0.08);
}
html[data-theme="theme3"].dark .topbar{box-shadow:0 2px 10px rgba(0,0,0,0.3);}
html[data-theme="theme3"].dark .hero-slide.s1{color:#4A2B10;}
html[data-theme="theme3"].dark .hero-slide.s2{color:#0B3D34;}
html[data-theme="theme3"].dark .hero-slide.s3{color:#3B1F6B;}

/* Typography: rounded humanist Bengali/Latin face used throughout the mock */
html[data-theme="theme3"] body{font-family:'Hind Siliguri','Poppins',system-ui,sans-serif;}
html[data-theme="theme3"] h1,html[data-theme="theme3"] h2,html[data-theme="theme3"] h3,html[data-theme="theme3"] h4,
html[data-theme="theme3"] .display,
html[data-theme="theme3"] .hero-title,
html[data-theme="theme3"] .section-title,
html[data-theme="theme3"] .price-now{
  font-family:'Hind Siliguri','Poppins',sans-serif;letter-spacing:-0.01em;
}

/* Topbar: solid warm surface, soft shadow instead of glass blur (layout/order now shared in base) */
html[data-theme="theme3"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);border-bottom:none;box-shadow:0 2px 10px rgba(31,41,55,0.05);}

/* Logo: soft glossy orange sphere (matches .logo in the mock) */
html[data-theme="theme3"] .brand-logo{
  width:24px;height:24px;font-size:11px;
  border-radius:50%;background:linear-gradient(150deg,#FF7A45,var(--brand-2) 60%,var(--brand-1));
  box-shadow:0 3px 8px rgba(244,81,30,0.35);transform:none;text-shadow:none;
}
html[data-theme="theme3"] .brand-logo::before{display:none;}
html[data-theme="theme3"] .brand-logo-img{border-radius:50%;box-shadow:0 3px 8px rgba(244,81,30,0.35);border:none;}
html[data-theme="theme3"] .lang-btn,
html[data-theme="theme3"] .icon-btn{border-radius:50%;background:var(--card);box-shadow:var(--shadow-card);border:1px solid var(--border);}

/* Search bar: full pill shape on a soft grey fill, sits inline in the single header row */
html[data-theme="theme3"] .search-bar{border-radius:999px;background:#F2F1EE;border:1px solid var(--border);margin-top:0;padding:6px 12px;box-shadow:none;}
html[data-theme="theme3"] .search-bar input{font-size:11.5px;min-width:0;}
html[data-theme="theme3"].dark .search-bar{background:#2B221C;}

/* Buttons: warm gradient, soft glow, fully rounded */
html[data-theme="theme3"] .btn{border-radius:var(--radius-sm);font-weight:700;}
html[data-theme="theme3"] .btn-primary{background:linear-gradient(135deg,#FF7A45,var(--brand-2));box-shadow:0 6px 16px rgba(244,81,30,0.35);}
html[data-theme="theme3"] .btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#fff;box-shadow:0 6px 16px rgba(13,148,136,0.3);}
html[data-theme="theme3"] .btn-outline{border-width:1.5px;border-color:var(--brand-2);color:var(--brand-2);border-radius:var(--radius-sm);}
html[data-theme="theme3"] .btn-ghost{background:#FFF3EC;color:var(--brand-2);border-radius:var(--radius-sm);}
html[data-theme="theme3"] .btn-sm{border-radius:var(--radius-sm);}

/* Cards / surfaces: fully rounded, soft shadow, no borders */
html[data-theme="theme3"] .card{box-shadow:var(--shadow-card);border:none;border-radius:var(--radius-md);}
html[data-theme="theme3"] .glass{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--border);box-shadow:var(--shadow-card);}

/* Hero slider: cream/peach gradient panels like the mock's hero */
html[data-theme="theme3"] .hero-slide{border-radius:var(--radius-lg);box-shadow:0 10px 28px rgba(244,140,60,0.22);}
html[data-theme="theme3"] .hero-slide.s1{background:radial-gradient(120% 140% at 100% 0%,#FFD9B0 0%,transparent 55%),linear-gradient(120deg,#FFF0E1 0%,#FFDCB4 55%,#FFC896 100%);color:#4A2B10;}
html[data-theme="theme3"] .hero-slide.s2{background:radial-gradient(120% 140% at 100% 0%,#D8F5EE 0%,transparent 55%),linear-gradient(120deg,#E6FBF7 0%,#BEF0E4 55%,#8FE3D2 100%);color:#0B3D34;}
html[data-theme="theme3"] .hero-slide.s3{background:radial-gradient(120% 140% at 100% 0%,#EAE0FF 0%,transparent 55%),linear-gradient(120deg,#F3EEFF 0%,#DCCCFF 55%,#C4ACFB 100%);color:#3B1F6B;}
html[data-theme="theme3"] .hero-eyebrow{border-radius:999px;}
html[data-theme="theme3"] .hero-dot{border-radius:999px;background:rgba(255,255,255,0.55);}
html[data-theme="theme3"] .hero-dot.active{background:var(--brand-2);width:17px;border-radius:999px;}

/* Categories: circular tile with gradient label bar, like .cat in the mock */
html[data-theme="theme3"] .cat-icon{border-radius:50%;background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%), linear-gradient(120deg,#FF7A45,var(--brand-2));color:#fff;}
html[data-theme="theme3"].dark .cat-icon{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.32), rgba(255,255,255,0) 46%), linear-gradient(120deg,var(--brand-3),var(--brand-2));}
html[data-theme="theme3"] .cat-item:nth-of-type(4n+2) .cat-icon{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%), linear-gradient(120deg,#A78BFA,#8B5CF6);}
html[data-theme="theme3"] .cat-item:nth-of-type(4n+3) .cat-icon{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%), linear-gradient(120deg,#2DD4BF,#0D9488);}
html[data-theme="theme3"] .cat-item:nth-of-type(4n+4) .cat-icon{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%), linear-gradient(120deg,#84CC16,#65A30D);}

/* Product cards: fully rounded, soft shadow, heart wishlist pinned */
html[data-theme="theme3"] .product-card{box-shadow:var(--shadow-card);border:none;border-radius:var(--radius-md);}
html[data-theme="theme3"] .product-badge{border-radius:999px;background:linear-gradient(135deg,#FF7A45,var(--brand-2));color:#fff;}
html[data-theme="theme3"] .wish-btn{backdrop-filter:none;border-radius:50%;background:var(--card);box-shadow:0 2px 6px rgba(31,41,55,0.15);border:none;}

/* Bottom nav: solid white, soft top shadow, pill highlight on active */
html[data-theme="theme3"] .bottom-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -4px 14px rgba(31,41,55,0.04);}
html[data-theme="theme3"] .nav-item.active::before{background:var(--brand-2);border-radius:999px;}
html[data-theme="theme3"] .fab{background:linear-gradient(135deg,#FF7A45,var(--brand-2));box-shadow:0 10px 24px rgba(244,81,30,0.4);color:#fff;}

/* Section headers: plain, warm accent link color */
html[data-theme="theme3"] .section-link{color:var(--brand-2);font-weight:600;}

/* Steps / tabs / chips / inputs: fully pill / soft-rounded */
html[data-theme="theme3"] .tab-btn,
html[data-theme="theme3"] .month-chip,
html[data-theme="theme3"] .step-dot,
html[data-theme="theme3"] .emi-chip,
html[data-theme="theme3"] .status-pill,
html[data-theme="theme3"] .negotiation-pill{border-radius:999px;}
html[data-theme="theme3"] .form-input,
html[data-theme="theme3"] .form-select,
html[data-theme="theme3"] textarea.form-input,
html[data-theme="theme3"] .upload-box{border-radius:var(--radius-sm);border-color:var(--border);}
html[data-theme="theme3"] .tab-btn.active,
html[data-theme="theme3"] .month-chip.active,
html[data-theme="theme3"] .emi-chip.active{background:linear-gradient(135deg,#FF7A45,var(--brand-2));color:#fff;box-shadow:0 4px 10px rgba(244,81,30,0.3);}

/* Hero: rounded pill CTA button, matching the mock */
html[data-theme="theme3"] .hero-slide .btn-primary{border-radius:999px;padding:9px 16px;font-size:11px;}
html[data-theme="theme3"] .hero-eyebrow{background:rgba(255,255,255,0.5);}

/* Installment plans: fully rounded cards, warm-tinted popular card */
html[data-theme="theme3"] .plan-card{border-radius:var(--radius-lg);border-color:var(--border);}
html[data-theme="theme3"] .plan-card.popular{background:#FFF3EC;border-color:var(--brand-2);}
html[data-theme="theme3"].dark .plan-card.popular{background:rgba(244,81,30,0.12);}
html[data-theme="theme3"] .plan-btn{border-radius:var(--radius-sm);}

/* =========================================================
   THEME 4 — "Purple EMI" flat mobile-app style
   Ported from the client's emi-store.html mockup: solid violet
   brand colour, Baloo Da 2 headings/prices, flat pill badges,
   plain white surfaces (no glass blur), colour-coded category
   circles, and a solid purple FAB in the bottom nav.
   ========================================================= */
html[data-theme="theme4"]{
  --brand-1:#4a2fd8;      /* purple-dark */
  --brand-2:#5b3df0;      /* purple */
  --brand-3:#4a2fd8;
  --gold:#e8590c;         /* orange accent (price) */
  --gold-soft:#e8590c;
  --bg:#f6f5fb;
  --text:#1a1a2e;
  --muted:#6b6b80;
  --border:#ececf5;
  --shadow-card:0 2px 8px rgba(26,26,46,0.06);
}
html[data-theme="theme4"] body{font-family:'Hind Siliguri','Poppins',system-ui,sans-serif;}
html[data-theme="theme4"] h1,html[data-theme="theme4"] h2,html[data-theme="theme4"] h3,html[data-theme="theme4"] h4,
html[data-theme="theme4"] .display,
html[data-theme="theme4"] .hero-title,
html[data-theme="theme4"] .section-title{
  font-family:'Baloo Da 2','Hind Siliguri',sans-serif;font-weight:600;letter-spacing:.2px;
}
html[data-theme="theme4"] .price-now{font-family:'Baloo Da 2','Hind Siliguri',sans-serif;color:var(--gold) !important;}
html[data-theme="theme4"].dark .price-now{color:#ff8a4c !important;}

/* Topbar: flat white surface, no blur */
html[data-theme="theme4"] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);border-bottom:1px solid var(--border);box-shadow:none;}
html[data-theme="theme4"] .brand-logo{border-radius:12px;background:var(--brand-2);box-shadow:none;}
html[data-theme="theme4"] .brand-logo-img{border-radius:12px;box-shadow:none;}
html[data-theme="theme4"] .lang-btn,
html[data-theme="theme4"] .icon-btn,
html[data-theme="theme4"] .theme-switch-btn{box-shadow:none;}
html[data-theme="theme4"] .search-bar{border-radius:12px;box-shadow:none;background:#eef0f6;border:1px solid var(--border);}

/* Buttons: solid purple, no gradients */
html[data-theme="theme4"] .btn{border-radius:10px;font-weight:600;}
html[data-theme="theme4"] .btn-primary{background:var(--brand-2);box-shadow:none;}
html[data-theme="theme4"] .btn-gold{background:var(--gold);color:#fff;box-shadow:none;}
html[data-theme="theme4"] .btn-outline{border-color:var(--brand-2);color:var(--brand-2);}
html[data-theme="theme4"] .btn-ghost{background:#eee9fd;color:var(--brand-1);}

/* Cards / surfaces: flat, thin border, minimal shadow */
html[data-theme="theme4"] .card{box-shadow:none;border:1px solid var(--border);border-radius:11px;}
html[data-theme="theme4"] .glass{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--border);box-shadow:none;}

/* Hero slider: purple gradient panel like the mock's PS5/EMI promo tone */
html[data-theme="theme4"] .hero-slide{border-radius:16px;box-shadow:none;}
html[data-theme="theme4"] .hero-slide.s1{background:linear-gradient(135deg,#4a2fd8,#5b3df0 60%,#7c4dff);}
html[data-theme="theme4"] .hero-slide.s2{background:linear-gradient(135deg,#e8590c,#ff9800);}
html[data-theme="theme4"] .hero-slide.s3{background:linear-gradient(135deg,#2f9e44,#51cf66);}
html[data-theme="theme4"] .hero-slide .btn-primary{border-radius:8px;}

/* Categories: colour-coded flat circles, exactly matching the mock's palette */
html[data-theme="theme4"] .cat-ring{border-radius:50%;background:#efe9ff;border:none;box-shadow:none;}
html[data-theme="theme4"] .cat-icon{color:#7c4dff;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+1) .cat-ring{background:#efe9ff;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+1) .cat-icon{color:#7c4dff;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+2) .cat-ring{background:#e6f0ff;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+2) .cat-icon{color:#2f7bff;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+3) .cat-ring{background:#ffe9e9;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+3) .cat-icon{color:#ff4d4d;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+4) .cat-ring{background:#e6f7ea;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+4) .cat-icon{color:#2f9e44;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+5) .cat-ring{background:#fff1e0;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n+5) .cat-icon{color:#ff9800;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n) .cat-ring{background:#efe9ff;}
html[data-theme="theme4"] .cat-item:nth-of-type(6n) .cat-icon{color:#7c4dff;}
html[data-theme="theme4"].dark .cat-ring{background:#232338;}

/* Product cards: flat white card, thin border, purple badge/button */
html[data-theme="theme4"] .product-card{box-shadow:none;border:1px solid var(--border);border-radius:11px;}
/* Keep the 5-colour thin borders in theme4 too — don't flatten them back to gray */
html[data-theme="theme4"] .product-img-wrap{background:#eef0f6;border-radius:8px;margin:4px;width:calc(100% - 8px);}
html[data-theme="theme4"].dark .product-img-wrap{background:#232338;}
html[data-theme="theme4"] .product-badge{background:var(--brand-2);border-radius:5px;font-weight:700;}
html[data-theme="theme4"] .wish-btn{border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);backdrop-filter:none;}
html[data-theme="theme4"] .emi-chip{background:#eee9fd;color:var(--brand-1);border-radius:5px;border:none;}
html[data-theme="theme4"].dark .emi-chip{background:rgba(124,77,255,0.16);color:#c9b8ff;}
html[data-theme="theme4"] .rating-row i{color:#2f9e44 !important;}
html[data-theme="theme4"] .card-buy-btn{background:linear-gradient(90deg,#F97316,#7C3AED);border-radius:999px;box-shadow:0 0 6px rgba(124,58,237,0.35);}
html[data-theme="theme4"] .card-buy-btn.buy-active{background:linear-gradient(90deg,#F43F5E,#F59E0B);box-shadow:0 0 6px rgba(244,63,94,0.35);}

/* Bottom nav: flat white bar, purple active state, solid purple FAB with white ring */
html[data-theme="theme4"] .bottom-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -2px 10px rgba(26,26,46,0.05);}
html[data-theme="theme4"] .nav-item.active{color:var(--brand-2);}
html[data-theme="theme4"] .nav-item.active::before{background:var(--brand-2);border-radius:999px;}
html[data-theme="theme4"] .fab{background:var(--brand-2);box-shadow:0 4px 10px rgba(91,61,240,.4);border:4px solid var(--card);}
html[data-theme="theme4"] .whatsapp-fab{background:#25D366;box-shadow:0 3px 8px rgba(0,0,0,.2);}

/* Section headers & chips: solid purple accents, small pill radius */
html[data-theme="theme4"] .section-link{color:var(--brand-2);font-weight:600;}
html[data-theme="theme4"] .tab-btn,
html[data-theme="theme4"] .month-chip,
html[data-theme="theme4"] .status-pill,
html[data-theme="theme4"] .negotiation-pill{border-radius:7px;}
html[data-theme="theme4"] .tab-btn.active,
html[data-theme="theme4"] .month-chip.active,
html[data-theme="theme4"] .emi-chip.active{background:var(--brand-2);color:#fff;box-shadow:none;}
html[data-theme="theme4"] .form-input,
html[data-theme="theme4"] .form-select,
html[data-theme="theme4"] textarea.form-input,
html[data-theme="theme4"] .upload-box{border-radius:8px;border-color:var(--border);}

/* Installment plans */
html[data-theme="theme4"] .plan-card{border-radius:14px;border-color:var(--border);box-shadow:none;}
html[data-theme="theme4"] .plan-card.popular{background:#eee9fd;border-color:var(--brand-2);}
html[data-theme="theme4"].dark .plan-card.popular{background:rgba(91,61,240,0.14);}
html[data-theme="theme4"] .plan-btn{background:var(--brand-2);border-radius:8px;box-shadow:none;}

/* On-site theme switch button */
.theme-switch-btn{
  width:28px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:0.2px;
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  flex-shrink:0;transition:transform .15s ease,color .15s ease;
}
html[data-theme="theme2"] .theme-switch-btn{border-radius:4px;}
.theme-switch-btn:active{transform:scale(0.9);}

/* =========================================================
   UNIFIED COLORFUL BUTTON DESIGN — applies to every action
   button across the whole site, in every theme. Tapping a
   button swaps it to a second gradient colour that stays
   until a different button is tapped.
   ========================================================= */
.btn-primary,
.btn-outline,
.btn-gold,
.btn-ghost,
.plan-btn,
html[data-theme="theme2"] .btn-primary,
html[data-theme="theme2"] .btn-outline,
html[data-theme="theme2"] .btn-gold,
html[data-theme="theme2"] .btn-ghost,
html[data-theme="theme3"] .btn-primary,
html[data-theme="theme3"] .btn-outline,
html[data-theme="theme3"] .btn-gold,
html[data-theme="theme3"] .btn-ghost{
  background:linear-gradient(135deg,#6366F1,#A855F7) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 4px 14px rgba(99,102,241,0.35) !important;
  transition:background .3s ease,box-shadow .3s ease,transform .15s ease;
}
.btn-primary.buy-active,
.btn-outline.buy-active,
.btn-gold.buy-active,
.btn-ghost.buy-active,
.plan-btn.buy-active{
  background:linear-gradient(135deg,#F43F5E,#F59E0B) !important;
  box-shadow:0 4px 14px rgba(244,63,94,0.4) !important;
}

/* =========================================================
   NEON AUTH PAGES — Login / Register
   A deliberately separate, self-contained dark UI used only on
   login.php and register.php (wrapped in .auth-neon). Ignores the
   site's light/dark toggle and theme1/2/3 switch on purpose —
   this is a fixed "identity" screen, always dark with a
   multi-colour glow, regardless of the storefront's design theme.
   ========================================================= */
.auth-neon{
  position:relative;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(50% 35% at 0% 15%, rgba(33,212,253,0.16), transparent 60%),
    linear-gradient(180deg,#0B0A1F 0%,#130E28 55%,#0C0A1C 100%);
  color:#F3F1FF;
  font-family:'Poppins','Hind Siliguri',system-ui,sans-serif;
}
.auth-neon .orb{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:0;}
.auth-neon .orb-a{width:220px;height:220px;top:-60px;right:-60px;background:rgba(236,72,153,0.30);}
.auth-neon .orb-b{width:180px;height:180px;bottom:120px;left:-70px;background:rgba(43,134,197,0.28);}
.auth-neon .spark{position:absolute;color:rgba(255,255,255,0.55);z-index:1;}

.auth-neon-top{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 0;flex-shrink:0;}
.auth-neon-backbtn{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;color:#EDEBFF;
}
.auth-neon-backbtn:active{background:rgba(255,255,255,0.12);}
.auth-neon-brand{flex:1;display:flex;align-items:center;gap:9px;min-width:0;}
.auth-neon-mark{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#7C3AED,#22D3EE);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 16px rgba(124,58,237,0.45);
}
.auth-neon-brand .name{
  font-size:13.5px;font-weight:800;letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,#fff,#C7B8FF);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-neon-help{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:#C9C3E8;}
.auth-neon-help .hi{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;color:#EDEBFF;
}
.auth-neon-help .ht{font-size:9px;font-weight:600;}

.auth-hero{position:relative;z-index:2;padding:10px 20px 0;flex-shrink:0;}
.auth-hero h1{
  margin:0;font-size:19px;line-height:1.25;font-weight:800;letter-spacing:-0.01em;color:#fff;
}
.auth-hero h1 .grad{
  display:inline;
  background:linear-gradient(90deg,#F472B6,#A855F7,#6366F1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-hero p{font-size:10.5px;color:#B4ADD6;margin:4px 0 0;line-height:1.45;max-width:92%;}

.auth-badges{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;padding:8px 20px 0;flex-shrink:0;}
.auth-badge{
  display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  font-size:10px;font-weight:700;border:1px solid;white-space:nowrap;
}
.auth-badge.b-green{color:#6EE7B7;border-color:rgba(110,231,183,0.35);background:rgba(52,211,153,0.08);}
.auth-badge.b-amber{color:#FCD34D;border-color:rgba(252,211,77,0.35);background:rgba(251,191,36,0.08);}
.auth-badge.b-pink{color:#F9A8D4;border-color:rgba(249,168,212,0.35);background:rgba(244,114,182,0.08);}

.auth-card-wrap{position:relative;z-index:2;padding:12px 20px 20px;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;}
.auth-card{
  background:rgba(21,16,42,0.55);border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:16px 16px;backdrop-filter:blur(18px);
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.auth-section-label{display:flex;align-items:center;gap:9px;margin:2px 0 14px;}
.auth-section-label .si{
  width:28px;height:28px;border-radius:9px;background:rgba(124,58,237,0.18);
  border:1px solid rgba(124,58,237,0.35);display:flex;align-items:center;justify-content:center;color:#C7B8FF;flex-shrink:0;
}
.auth-section-label b{font-size:12.5px;font-weight:700;color:#F3F1FF;}

.auth-alert{
  background:rgba(244,63,94,0.12);border:1px solid rgba(244,63,94,0.35);color:#FCA5B7;
  padding:9px 14px;border-radius:12px;font-size:11px;margin-bottom:10px;
}
.auth-note-banner{
  background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:#8CF0C4;
  padding:8px 12px;border-radius:10px;font-size:10.5px;margin-bottom:14px;
}

/* the signature element: every field ring blends 3-4 colours */
.field-ring{
  position:relative;padding:1.6px;border-radius:15px;margin-bottom:10px;
  background:linear-gradient(120deg,#F472B6,#A855F7,#6366F1,#22D3EE);
  transition:filter .2s ease,box-shadow .2s ease;
}
.field-ring:focus-within{filter:brightness(1.35);box-shadow:0 0 0 5px rgba(124,58,237,0.15);}
.field-ring-inner{
  display:flex;align-items:center;gap:10px;background:#150F2B;border-radius:13.5px;padding:0 14px;
}
.field-ring-inner > i{color:#B9AEE0;flex-shrink:0;}
.field-ring-inner .flag{font-size:14px;flex-shrink:0;}
.field-ring-inner input,.field-ring-inner select{
  flex:1;min-width:0;background:transparent;border:none;outline:none;color:#F5F3FF;
  font-size:13px;padding:10px 0;font-family:'Hind Siliguri','Poppins',sans-serif;
}
.field-ring-inner input::placeholder{color:#726C93;}
.field-ring-inner .eye-btn{background:none;color:#B9AEE0;flex-shrink:0;display:flex;padding:4px;}
.field-link-row{display:flex;justify-content:flex-end;margin:-3px 0 12px;}
.field-link-row a{font-size:10.5px;color:#C7B8FF;font-weight:700;text-decoration:none;}

.pw-strength{display:flex;align-items:center;gap:10px;margin:2px 0 16px;font-size:9.5px;color:#8E87B5;}
.pw-strength .bars{flex:1;display:flex;gap:4px;}
.pw-strength .bars span{height:4px;flex:1;border-radius:3px;background:rgba(255,255,255,0.08);transition:background .2s ease;}
.pw-strength .label{font-weight:700;}
.pw-hint{font-size:10px;color:#8E87B5;margin:-4px 0 16px;line-height:1.6;}

.auth-cta{
  width:100%;border:none;border-radius:14px;padding:13px;font-size:13px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;
  background:linear-gradient(90deg,#7C3AED,#6366F1,#22D3EE);
  box-shadow:0 10px 26px rgba(99,102,241,0.35);
}
.auth-cta:active{transform:scale(0.98);}
.auth-switch{text-align:center;font-size:11.5px;color:#9C94C4;margin-top:12px;}
.auth-switch a{color:#C7B8FF;font-weight:700;}

.auth-google-btn{
  width:100%;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:12px;font-size:12.5px;font-weight:700;
  color:#EDEBFA;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;margin-bottom:14px;transition:background .15s ease;
}
.auth-google-btn:active{background:rgba(255,255,255,0.1);transform:scale(0.98);}
.auth-divider{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:10.5px;color:#8E87B5;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.12);}

/* ============ PWA INSTALL APP TOAST ============ */
.pwa-install-toast{
  position:fixed;left:12px;right:12px;bottom:calc(var(--bottom-nav-h,64px) + 14px);
  max-width:420px;margin:0 auto;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,0.22);
  display:flex;align-items:center;gap:12px;padding:12px 12px;
  z-index:999;
  transform:translateY(120%);opacity:0;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .38s ease;
  pointer-events:none;
}
.pwa-install-toast.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.pwa-install-toast .pwa-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.pwa-install-toast .pwa-body{flex:1;min-width:0;}
.pwa-install-toast .pwa-title{font-size:12.5px;font-weight:800;color:var(--text);line-height:1.3;}
.pwa-install-toast .pwa-sub{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pwa-install-toast .pwa-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.pwa-install-toast .pwa-install-btn{
  border:none;border-radius:10px;padding:8px 12px;font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-2));white-space:nowrap;
}
.pwa-install-toast .pwa-install-btn:active{transform:scale(0.96);}
.pwa-install-toast .pwa-close-btn{
  border:none;background:none;color:var(--muted);width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;
}
.pwa-install-toast .pwa-close-btn:active{background:var(--border);}
@media (min-width:520px){ .pwa-install-toast{left:auto;right:20px;bottom:24px;width:360px;} }