/* =====================================================================
   KJ ECOMMERCE — PREMIUM DESIGN LAYER (SOLID COLORS ONLY)
   Loads after style.css. Luxury palette applied as flat solid colors —
   no gradients anywhere, per project requirement. Adds glassmorphism,
   animated counters, page loader, GSAP scroll reveals, sticky mini-cart.
   ===================================================================== */

:root {
  /* Luxury solid palette: Royal Blue / Purple / Pink / Cyan / Orange accent */
  --kj-blue: #3654ff;
  --kj-purple: #8b3ff5;
  --kj-pink: #ff4fa3;
  --kj-cyan: #22d3ee;
  --kj-orange: #ff7a3d;
  --kj-dark: #0c0e1a;

  --clr-accent: var(--kj-purple);
  --clr-accent-2: var(--kj-pink);
  --clr-ink: #12101c;
  --clr-bg: #f7f7fb;
  --clr-glass: rgba(255,255,255,.55);
  --clr-glass-border: rgba(255,255,255,.4);
  --shadow-soft: 0 10px 40px rgba(54,84,255,.08);
  --shadow-lift: 0 24px 70px rgba(139,63,245,.18);
}

body { background: var(--clr-bg); }

/* ---------- Page Loader (solid color spinner, no gradient) ---------- */
#kjLoader {
  position: fixed; inset: 0; z-index: 99999; background: var(--kj-dark);
  display: flex; align-items: center; justify-content: center; transition: opacity .5s ease, visibility .5s ease;
}
#kjLoader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#kjLoader .kj-loader-mark {
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.15);
  border-top-color: var(--kj-purple);
  animation: kj-spin .9s linear infinite;
}
@keyframes kj-spin { to { transform: rotate(360deg); } }

/* ---------- Glass sticky header ---------- */
.site-header {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.5);
}
.site-header.scrolled { box-shadow: var(--shadow-soft); }
.brand-name { color: var(--kj-purple); }

.main-nav a::after { background: var(--kj-purple); height: 2px; border-radius: 2px; }
.icon-btn:hover { background: var(--kj-purple); }
.cart-count { background: var(--kj-pink); }
.btn-auth-solid { background: var(--kj-purple); border: none; }
.btn-auth-solid:hover { background: var(--kj-pink); }

/* Premium glass mega menu */
.mega-menu {
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow-lift);
}
.mega-menu-item:hover { background: var(--kj-purple); color: #fff !important; }

/* ---------- Hero + Buttons ---------- */
.btn-hero { background: var(--kj-purple); }
.btn-hero:hover { background: var(--kj-pink); color: #fff; }
.btn-quick-add { background: var(--kj-purple); }
.badge-sale { background: var(--kj-pink); }
.badge-new { background: var(--kj-blue); }

/* ---------- Product cards ---------- */
.product-card { border: 1px solid rgba(0,0,0,.04); }
.product-card:hover { box-shadow: var(--shadow-lift); }
.qa-btn:hover { background: var(--kj-purple); }
.price-new { color: var(--kj-purple); }

/* ---------- Why-us / testimonial glass cards ---------- */
.why-us-card, .testimonial-card { background: rgba(255,255,255,.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.5); }
.why-us-card i { color: var(--kj-purple); }

/* ---------- Flash sale banner ---------- */
.flash-sale-section { background: var(--kj-dark); }
.countdown div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }

/* ---------- Newsletter / video / offer banner ---------- */
.newsletter-strip { background: var(--kj-purple); }
.video-section { background: var(--kj-dark); }
.offer-banner::before { background: rgba(12,14,26,.4); }

/* ---------- Footer ---------- */
.site-footer { background: var(--kj-dark); }
.footer-socials a:hover { background: var(--kj-purple); }

/* =====================================================================
   ANIMATED COUNTERS SECTION — solid color block
   ===================================================================== */
.counters-section {
  background: var(--kj-purple); border-radius: var(--radius-lg); margin: 0 24px 24px; padding: 50px 24px; color: #fff;
}
.counters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.counter-item .counter-number { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.counter-item .counter-label { font-size: .9rem; opacity: .85; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
@media (max-width: 768px) { .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }

/* =====================================================================
   STICKY MINI-CART DRAWER
   ===================================================================== */
.kj-cart-drawer-overlay {
  position: fixed; inset: 0; background: rgba(12,14,26,.5); backdrop-filter: blur(3px);
  z-index: 2100; opacity: 0; visibility: hidden; transition: var(--transition);
}
.kj-cart-drawer-overlay.open { opacity: 1; visibility: visible; }
.kj-cart-drawer {
  position: fixed; top: 0; right: -420px; width: 100%; max-width: 400px; height: 100vh;
  background: #fff; z-index: 2101; box-shadow: var(--shadow-lift); transition: right .4s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
}
.kj-cart-drawer.open { right: 0; }
.kj-cart-drawer-head { padding: 22px; display: flex; justify-content: space-between; align-items: center; background: var(--kj-purple); color: #fff; }
.kj-cart-drawer-head button { background: rgba(255,255,255,.2); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; }
.kj-cart-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.kj-cart-drawer-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--clr-line); }
.kj-cart-drawer-item img { width: 56px; height: 68px; object-fit: cover; border-radius: 8px; }
.kj-cart-drawer-footer { padding: 20px 22px; border-top: 1px solid var(--clr-line); }
.kj-cart-drawer-footer .btn-hero { width: 100%; text-align: center; display: block; background: var(--kj-ink, var(--kj-purple)); }
.kj-cart-empty-msg { text-align: center; color: var(--clr-ink-soft); padding: 60px 20px; }

/* =====================================================================
   GSAP SCROLL REVEAL
   ===================================================================== */
[data-gsap-reveal] { opacity: 0; transform: translateY(40px); }

/* =====================================================================
   ADMIN PANEL — solid accent to match luxury palette
   ===================================================================== */
html[data-theme] { --a-accent: var(--kj-purple, #8b3ff5); --a-accent-2: var(--kj-pink, #ff4fa3); }
.stat-icon.bg-1 { background: var(--kj-blue); }
.stat-icon.bg-2 { background: var(--kj-cyan); }
.stat-icon.bg-3 { background: var(--kj-orange); }
.stat-icon.bg-4 { background: var(--kj-pink); }
.admin-nav a.active { background: var(--kj-purple); }
.btn-admin-primary { background: var(--kj-purple); }
.btn-admin-primary:hover { background: var(--kj-blue); }