:root{--blue:#0057b8;--blue-dark:#003d82;--blue-light:#e8f1fb;--red:#e63946;--dark:#0d1b2a;--dark2:#1b2a3b;--gray:#6b7280;--light:#f5f8ff;--white:#fff;--radius:12px;--shadow:0 4px 24px rgba(0,87,184,.10);--trans:.3s ease;--gradient:linear-gradient(135deg, var(--blue), #00b4d8)}
*{margin:0;padding:0;box-sizing:border-box}
html, body{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Inter',sans-serif;color:var(--dark);background:#fff}

/* Modern Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #f8fafc; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
.container{width:90%;max-width:1240px;margin:0 auto}
.section{padding:80px 0}
.bg-light{background:var(--light)}
.bg-dark{background:var(--dark)}
.mt-1{margin-top:1rem}
.gradient-text{background:linear-gradient(135deg,var(--blue),#00b4d8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Preloader */
#preloader{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;transition:opacity .5s}
#preloader.hide{opacity:0;pointer-events:none}
.preloader-logo{width:180px;animation:pulse 1.2s infinite}
.preloader-bar{width:200px;height:4px;background:#e5e7eb;border-radius:9px;overflow:hidden}
.preloader-fill{height:100%;background:linear-gradient(90deg,var(--blue),#00b4d8);border-radius:9px;animation:load 1.6s ease infinite}
.preloader-text{font-size:.85rem;color:var(--gray)}
@keyframes load{0%{width:0}100%{width:100%}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* --- Redesigned Nav (XStore Style) --- */
.topbar-new { background: #fff; border-bottom: 1px solid #f1f5f9; padding: 0.4rem 0; font-size: 0.8rem; }
.topbar-new-inner { display: flex; justify-content: space-between; align-items: center; }
.topbar-location { display: none; }
@media (min-width: 993px) {
  .topbar-location { display: flex; align-items: center; gap: 6px; color: #64748b; font-weight: 500; }
}

/* --- Topbar Nav --- */
.topbar-nav { display: flex; gap: 1.5rem; align-items: center; }
.topbar-nav a { font-weight: 700; color: #1e293b; font-size: 0.85rem; transition: 0.3s; padding: 0.2rem 0; position: relative; }
.topbar-nav a:hover, .topbar-nav a.active { color: var(--blue); }
.topbar-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--blue); transition: 0.3s; }
.topbar-nav a:hover::after, .topbar-nav a.active::after { width: 100%; }

.topbar-links { display: flex; gap: 1.2rem; }
.topbar-links a { color: #64748b; transition: color 0.3s; }
.topbar-links a:hover { color: var(--blue); }

.nav-wrapper { position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, box-shadow 0.3s; will-change: transform; }
.nav-wrapper.nav-hidden { transform: translateY(-100%); }
.nav-wrapper.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.nav-wrapper.scrolled .navbar-main { padding: 0.4rem 0; }
.nav-wrapper.scrolled .nav-brand img { height: 38px; }
.nav-wrapper.scrolled .cat-toggle { padding: 0.6rem 1rem; min-width: 180px; font-size: 0.85rem; }
.nav-wrapper.scrolled .nav-search-bar input { padding: 0.6rem 1.2rem; }
.nav-wrapper.scrolled .navbar-bottom { background: var(--blue-dark); } /* Darken the blue slightly when sticky */

/* Main Bar (Dark) */
.navbar-main { background: var(--dark); padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-main-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-brand img { height: 48px; width: auto; filter: brightness(0) invert(1); }

/* Categories */
.nav-cat-dropdown { position: relative; }
.cat-toggle { background: var(--blue); color: #fff; border: none; padding: 0.85rem 1.2rem; border-radius: 8px; font-weight: 700; display: flex; align-items: center; gap: 0.8rem; cursor: pointer; transition: 0.3s; font-size: 0.9rem; min-width: 200px; }
.cat-toggle:hover { background: var(--blue-dark); }
.cat-menu { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 0 0 12px 12px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.3s; z-index: 100; overflow: hidden; }
.nav-cat-dropdown:hover .cat-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cat-menu a { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid #f8fafc; font-size: 0.85rem; font-weight: 600; color: #334155; transition: 0.3s; }
.cat-menu a:hover { background: #f1f5f9; color: var(--blue); padding-left: 1.5rem; }
.cat-menu a i { width: 20px; text-align: center; color: var(--blue); font-size: 0.9rem; }

/* Search Bar */
.nav-search-bar { flex: 1; max-width: 600px; }
.nav-search-bar form { position: relative; display: flex; }
.nav-search-bar input { width: 100%; padding: 0.85rem 1.5rem; border-radius: 50px; border: none; outline: none; font-size: 0.9rem; color: #1e293b; background: #fff; }
.nav-search-bar button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--blue); color: #fff; cursor: pointer; transition: 0.3s; }
.nav-search-bar button:hover { background: var(--blue-dark); }

/* Contact Card */
.nav-contact-card { display: flex; align-items: center; gap: 0.8rem; background: rgba(255,255,255,0.05); padding: 0.5rem 1rem; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s; }
.nav-contact-card:hover { background: rgba(255,255,255,0.08); border-color: var(--blue); transform: translateY(-2px); }
.contact-icon-circle { width: 38px; height: 38px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,87,184,0.3); animation: pulse-blue 2s infinite; text-decoration: none; }
@keyframes pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(0,87,184,0.4); } 70% { box-shadow: 0 0 0 10px rgba(0,87,184,0); } 100% { box-shadow: 0 0 0 0 rgba(0,87,184,0); } }

.contact-details { display: flex; flex-direction: column; line-height: 1.2; }
.contact-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 700; }
.contact-value { font-size: 0.95rem; font-weight: 800; color: #fff; text-decoration: none; transition: 0.3s; }
.contact-value:hover { color: var(--blue); }
.contact-sub-value { font-size: 0.72rem; color: #64748b; text-decoration: none; transition: 0.3s; }
.contact-sub-value:hover { color: #fff; }

/* Actions */
.nav-actions-icons { display: flex; gap: 1.2rem; align-items: center; }
.nav-icon-link { color: #fff; font-size: 1.5rem; position: relative; transition: 0.3s; }
.nav-icon-link:hover { color: #f59e0b; transform: scale(1.1); }
.nav-icon-link .cart-badge { top: -8px; right: -10px; border: 2px solid var(--dark); background: var(--red); color: #fff; font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; position: absolute; }

/* Bottom Bar (Blue) */
.navbar-bottom { background: var(--blue); border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; }
.nav-bottom-inner { display: flex; align-items: center; justify-content: center; position: relative; }

@media (min-width: 993px) {
  .nav-bottom-cta { position: absolute; right: 0; }
  .main-nav-shifted { width: 100%; justify-content: center; gap: 4rem; margin: 0; padding: 0; }
  .main-nav-shifted a { color: #fff !important; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.03em; position: relative; padding: 1rem 0; }
  .main-nav-shifted a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #cbd5e1 !important; transition: 0.3s; }
  .main-nav-shifted a:hover::after, .main-nav-shifted a.active::after { width: 100%; }
  .main-nav-shifted a:hover, .main-nav-shifted a.active { color: #cbd5e1 !important; }
}

/* --- Category Mega Menu V2 --- */
.nav-cat-links { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; width: 100%; justify-content: space-between; }
.nav-cat-links > li > a { display: flex; align-items: center; gap: 0.4rem; padding: 1rem 0; font-size: 0.82rem; font-weight: 700; color: #fff; transition: 0.3s; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.nav-cat-links > li:hover > a { color: #f59e0b; }
.nav-cat-links > li > a i { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 1px; }

.has-mega { position: static; } 

.mega-menu-v2 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
  border-top: 1px solid #f1f5f9;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1000;
  padding: 3rem 0;
}
.has-mega:hover .mega-menu-v2 { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-inner { display: grid; grid-template-columns: 200px 1fr 240px; gap: 2rem; width: 95%; max-width: 1400px; margin: 0 auto; }
.mega-col h4 { font-size: 0.95rem; font-weight: 800; color: var(--dark); margin-bottom: 1.2rem; border-bottom: 2px solid var(--blue); display: inline-block; padding-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mega-sub-links { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; }
.mega-sub-links a { color: #475569; font-size: 0.85rem; font-weight: 600; transition: 0.3s; display: block; padding: 0.1rem 0; }
.mega-sub-links a:hover { color: var(--blue); transform: translateX(5px); }

/* Showcase Slider */
.mega-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mega-p-card { background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 0.7rem; transition: 0.3s; display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; min-width: 0; }
.mega-p-card:hover { border-color: var(--blue); transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
.mega-p-img { height: 100px; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid #f8fafc; }
.mega-p-img img { width: 100%; height: 100%; object-fit: contain; }
.mega-p-info h5 { font-size: 0.72rem; font-weight: 700; color: var(--dark); margin: 0; line-height: 1.3; height: 1.8rem; overflow: hidden; }
.mega-p-price { font-size: 0.78rem; font-weight: 800; color: var(--blue); display: block; margin-top: 2px; }

.featured-cat { background: #f8fafc; border-radius: 20px; padding: 2rem; position: relative; overflow: hidden; }

/* More Categories Dropdown Customization */
.more-cats-dropdown .mega-inner { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem; }
.more-cats-dropdown .mega-col h4 { display: none; }
.more-cats-dropdown .mega-sub-links li a { font-size: 0.85rem; padding: 0.4rem 0; border-bottom: 1px solid #f8fafc; }
.more-cats-dropdown .mega-sub-links li a i { color: var(--blue); margin-right: 8px; font-size: 0.7rem; }
.more-cats-dropdown .mega-sub-links li:last-child a { border-bottom: none; }
.sub-cat-list { display: block; overflow: hidden; list-style: none; padding: 0; margin: 0; }
.sub-cat-list.collapsed { display: none; }
.cat-link-wrap { display: flex; align-items: center; justify-content: space-between; position: relative; transition: 0.3s; }
.cat-link-wrap:hover { background: #f8fafc; }
.cat-link-wrap.active { background: #f1f5f9; }
.cat-link-wrap.active .cat-main-link { color: var(--blue); font-weight: 700; }

.cat-main-link { flex: 1; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0; color: #475569; font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: 0.3s; }
.cat-main-link i { width: 20px; text-align: center; color: #94a3b8; font-size: 0.95rem; }
.cat-link-wrap:hover .cat-main-link { color: var(--blue); }

.sub-toggle-btn { background: none; border: none; padding: 10px; cursor: pointer; color: #94a3b8; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.sub-toggle-btn:hover { color: var(--blue); }
.sub-toggle-btn.open { transform: rotate(90deg); color: var(--blue); }

.cf-count { font-size: 0.72rem; font-weight: 700; color: #94a3b8; background: #f1f5f9; padding: 2px 8px; border-radius: 50px; margin-left: 5px; }

/* Ratings */
.product-rating { display: flex; align-items: center; gap: 2px; margin: 4px 0; color: #f59e0b; font-size: 0.75rem; }
.product-rating i { font-size: 0.7rem; }
.rating-count { color: #94a3b8; font-size: 0.7rem; margin-left: 4px; font-weight: 500; }

.mega-p-info .product-rating { margin: 2px 0; font-size: 0.65rem; }
.mega-p-info .product-rating i { font-size: 0.6rem; }

.nav-promo-links { display: flex; gap: 1.5rem; }
.promo-link { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.promo-link.active { color: var(--blue); }
.promo-link i { margin-right: 0.3rem; }

/* Mobile Menu Trigger */
.hamburger-new { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; }
.hamburger-new span { display: block; width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: 0.3s; }

/* Mega dropdown */
.has-dropdown { position: relative; }
.dropdown-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 87, 184, 0.15);
  min-width: 680px;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin-top: 10px;
}
.has-dropdown:hover .dropdown-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-container {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 2rem;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.mega-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s;
  color: var(--dark);
}
.mega-item i {
  width: 40px; height: 40px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s;
}
.mega-item:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,87,184,0.08);
  color: var(--blue);
}
.mega-item:hover i {
  background: var(--blue);
  color: #fff;
  transform: scale(1.1);
}
.mega-featured {
  background: var(--dark);
  border-radius: 12px;
  padding: 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mega-featured::after {
  content: '';
  position: absolute;
  top: -20%; right: -20%; width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(0,87,184,0.3) 0%, transparent 70%);
}
.mega-featured h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.mega-featured p { font-size: 0.78rem; color: #94a3b8; line-height: 1.5; margin-bottom: 1.2rem; position: relative; z-index: 1; }
.mega-featured .btn-xs { position: relative; z-index: 1; }

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:all var(--trans)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Search */
.search-overlay{display:none;background:var(--blue-light);padding:1rem 0}
.search-overlay.open{display:block}
.search-form{display:flex;align-items:center;gap:.5rem}
.search-input{flex:1;padding:.75rem 1rem;border:1.5px solid var(--blue);border-radius:8px;font-size:1rem;outline:none}
.search-submit,.search-close{padding:.7rem 1rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem}
.search-submit{background:var(--blue);color:#fff}
.search-close{background:#e5e7eb;color:var(--dark)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.93rem;cursor:pointer;border:2px solid transparent;transition:all var(--trans)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-2px)}
.btn-outline-primary{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-outline-primary:hover{background:var(--blue);color:#fff}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--blue)}
.btn-lg{padding:.7rem 1.5rem;font-size:.95rem}
.btn-sm{padding:.45rem 1rem;font-size:.82rem}
.btn-xs{padding:.3rem .7rem;font-size:.78rem}

/* ── Hero (Modern Full-Bleed Design) ────────────────────────── */
.hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;background:var(--dark)}
.hero-bg-img{position:absolute;inset:0;background-image:url('../images/hero-image.png');background-size:cover;background-position:center;z-index:1}
.hero-gradient{position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%,rgba(13,27,42,0.85) 45%,transparent 100%);z-index:2}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:60px 60px;z-index:3}
.hero-body{position:relative;z-index:10;padding-top:40px}
.hero-content{max-width:800px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:0.75rem;background:rgba(0,87,184,0.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,87,184,0.3);padding:0.45rem 1rem;border-radius:50px;color:#93c5fd;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;font-size:0.68rem;margin-bottom:1.2rem;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.hero-eyebrow i{color:var(--blue);font-size:0.8rem}
.hero-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:800;color:#fff;line-height:1.1;margin-bottom:1rem}
.hero-sub{font-size:0.95rem;color:#cbd5e1;max-width:520px;line-height:1.6;margin-bottom:1.8rem}
.hero-ctas{display:flex;align-items:center;gap:1.5rem;margin-bottom:2.5rem}
.btn-ghost{color:#fff;font-weight:600;display:flex;align-items:center;gap:0.6rem;transition:all var(--trans);font-size:0.9rem;text-decoration:none}
.btn-ghost:hover{color:var(--blue);transform:translateX(5px)}

/* Inline Stats Row */
.hero-stats-row{display:flex;align-items:center;gap:2rem;margin-bottom:2.2rem}
.hsr-item{display:flex;flex-direction:column;gap:0.15rem}
.hsr-item strong{font-size:1.4rem;color:#fff;font-weight:800;line-height:1}
.hsr-item span{font-size:0.65rem;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;font-weight:600}
.hsr-div{width:1px;height:25px;background:rgba(255,255,255,0.1)}

/* Hero Trust */
.hero-trust{display:flex;gap:0.8rem;flex-wrap:wrap}
.trust-pill{display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);padding:0.45rem 1rem;border-radius:50px;font-size:0.75rem;color:#cbd5e1;font-weight:500}
.trust-pill i{color:var(--blue)}

/* Scroll Hint */
.hero-scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:#94a3b8;font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;z-index:10}
.bounce{animation:bounce 2s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}

/* Features strip (Modern Cards) */
.features-strip{background:#f8fafc;padding:3rem 0;position:relative;z-index:15}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.feature-card{background:#fff;padding:1.8rem 1.5rem;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);border:1px solid #e2e8f0;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05)}
.feature-card:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 20px 25px -5px rgba(0,87,184,0.1)}
.feature-card i{width:48px;height:48px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:1.3rem;transition:all 0.3s;flex-shrink:0}
.feature-card:hover i{background:var(--blue);color:#fff;transform:rotate(10deg)}
.feature-card h4{font-size:1.05rem;font-weight:700;color:var(--dark);margin-bottom:0}
.feature-card p{font-size:0.82rem;color:var(--gray);line-height:1.5;margin:0}

/* ── Products Carousel ── */
.products-carousel{position:relative;margin:1.5rem 0 3rem;overflow:hidden}
.carousel-track{display:flex;gap:1.5rem;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);padding:1rem .5rem 2rem;will-change:transform}

/* Carousel Columns */
.products-carousel .product-card,
.products-carousel .cat-card {
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Carousel Controls */
.carousel-controls{display:flex;justify-content:center;gap:1.5rem;margin-top:0}
.c-prev, .c-next{width:46px;height:46px;border-radius:50%;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--trans);color:var(--dark);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.c-prev:hover, .c-next:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(0,87,184,0.25)}
.c-prev:active, .c-next:active{transform:scale(0.9)}

/* Carousel Dots */
.carousel-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1.5rem}
.c-dot{width:8px;height:8px;border-radius:50%;background:#e2e8f0;cursor:pointer;transition:all var(--trans)}
.c-dot.active{background:var(--blue);width:28px;border-radius:4px}

/* ── Section Headers ── */
.section-header{text-align:center;margin-bottom:3rem}
.section-header.light h2,.section-header.light p{color:#fff}
.section-tag{display:inline-block;background:var(--blue-light);color:var(--blue);font-size:.78rem;font-weight:600;padding:.35rem 1rem;border-radius:50px;margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.05em}
.section-header h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin-bottom:.75rem}
.section-header p{color:var(--gray);max-width:560px;margin:0 auto;line-height:1.7}

/* ── Categories ── */
.categories-section{padding:5rem 0;background:#fff}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.cat-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:0.75rem;transition:all 0.3s;position:relative;text-decoration:none}
.cat-card:hover{background:#fff;border-color:var(--blue);transform:translateY(-5px);box-shadow:0 12px 24px rgba(0,87,184,0.08)}
.cat-icon{width:50px;height:50px;background:var(--blue-light);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--blue);transition:all 0.3s}
.cat-card:hover .cat-icon{background:var(--blue);color:#fff}
.cat-card h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin:0}
.cat-card p{font-size:0.85rem;color:var(--gray);line-height:1.6;margin:0;flex:1}
.cat-count{font-size:0.8rem;font-weight:600;color:var(--blue)}
.cat-arrow{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:0.8rem;color:var(--blue);transition:all 0.3s;position:absolute;bottom:1.5rem;right:1.5rem}
.cat-card:hover .cat-arrow{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateX(5px)}

@media(max-width:992px){ .cat-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:576px){ .cat-grid{grid-template-columns:1fr} }

.products-section{background:#f1f5f9 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230057b8' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 30V1.5A1.5 1.5 0 0 1 7.5 0H30v2H8v28H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");padding:4rem 0}
.section-header-flex{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;gap:2rem}
.sh-left .section-tag{background:#fff;border:1px solid #e2e8f0;margin-bottom:0.6rem}
.sh-left h2{font-size:2.4rem;font-weight:800;color:var(--dark);margin:0}
.discover-link{color:var(--blue);font-weight:700;font-size:0.9rem;text-decoration:none;display:flex;align-items:center;gap:0.5rem;transition:gap 0.3s}
.discover-link:hover{gap:0.8rem;color:var(--blue-dark)}

.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.product-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}
.product-card:hover::before {
  opacity: 1;
}
.product-img-wrap {
  height: 240px;
  padding: 30px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}
.product-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(248, 250, 252, 0.8) 100%);
  pointer-events: none;
}
.product-img-wrap img {
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 15px 15px rgba(0,0,0,0.06));
}
.product-card:hover .product-img-wrap img {
  transform: scale(1.1) translateY(-5px);
}
.product-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #ffffff;
}
.product-cat {
  font-size: 11px;
  color: #0ea5e9;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  display: inline-block;
  background: rgba(14, 165, 233, 0.1);
  padding: 4px 10px;
  border-radius: 50px;
  width: max-content;
}
.product-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
  margin: 0 0 14px;
  min-height: 48px;
  transition: color 0.3s ease;
}
.product-name a {
  color: inherit;
  text-decoration: none;
}
.product-name a:hover {
  color: #0ea5e9;
}
.product-price {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.product-price .price-now {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-price .price-old {
  font-size: 14px;
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 600;
}

.card-btns {
  display: flex;
  gap: 12px;
  margin-top: auto;
}
.btn-view-details {
  flex: 1;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  text-align: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-view-details:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
  transform: translateY(-2px);
}
.btn-compare {
  width: 46px;
  height: 46px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.btn-compare:hover {
  background: #ecfdf5;
  border-color: #10b981;
  color: #10b981;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
  transform: translateY(-2px);
}

/* About */
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-img-frame{position:relative;border-radius:16px;overflow:hidden}
.about-img-frame img{width:100%;height:420px;object-fit:cover;border-radius:16px}
.about-badge-float{position:absolute;bottom:-1rem;right:-1rem;background:#fff;border-radius:12px;padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;box-shadow:0 8px 32px rgba(0,87,184,.15);min-width:180px}
.about-badge-float i{font-size:1.8rem;color:var(--blue)}
.about-badge-float strong{display:block;font-size:.88rem;font-weight:700}
.about-badge-float span{font-size:.75rem;color:var(--gray)}
.about-text{display:flex;flex-direction:column;gap:1rem}
.about-text p{color:var(--gray);line-height:1.75;font-size:.95rem}
.about-list{display:flex;flex-direction:column;gap:.5rem}
.about-list li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:500}
.about-list i{color:var(--blue)}
.about-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:2rem;transition:all var(--trans)}
.service-card:hover{background:rgba(0,87,184,.2);border-color:rgba(0,87,184,.4);transform:translateY(-4px)}
.service-card.featured-service{background:rgba(0,87,184,.2);border-color:var(--blue)}
.service-icon{width:60px;height:60px;background:rgba(0,87,184,.3);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#93c5fd;margin-bottom:1.2rem}
.service-card h3{color:#fff;font-size:1.1rem;font-weight:700;margin-bottom:.75rem}
.service-card p{color:#94a3b8;font-size:.88rem;line-height:1.7;margin-bottom:1.2rem}
.service-link{color:#93c5fd;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:gap var(--trans)}
.service-link:hover{gap:.8rem}

/* Testimonials */
.testimonials-slider{position:relative;overflow:hidden}
.testimonial-track{display:flex;gap:1.5rem;transition:transform .5s ease}
.testimonial-card,.tcard{min-width:calc(33.333% - 1rem);background:#fff;border:1.5px solid #e5e7eb;border-radius:var(--radius);padding:2rem;flex-shrink:0}
.testimonial-stars{color:#f59e0b;font-size:1.1rem;margin-bottom:1rem}
.testimonial-card p{color:var(--gray);line-height:1.7;font-size:.9rem;margin-bottom:1.2rem;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:.8rem}
.author-avatar{width:44px;height:44px;background:var(--blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:1.1rem;flex-shrink:0}
.testimonial-author strong{display:block;font-size:.88rem;font-weight:700}
.testimonial-author span{font-size:.76rem;color:var(--gray)}
.testimonial-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}
.tctl-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid #e5e7eb;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--trans)}
.tctl-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.tctl-dots{display:flex;gap:.5rem}
.tctl-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb;cursor:pointer;transition:all var(--trans)}
.tctl-dot.active{background:var(--blue);width:20px;border-radius:4px}

/* Brands */
.brands-section{padding:2rem 0;background:var(--light);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.brands-label{text-align:center;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);margin-bottom:1.2rem;font-weight:600}
.brands-marquee{overflow:hidden}
.brands-track{display:flex;gap:2.5rem;animation:marquee 28s linear infinite;width:max-content}
.brand-item{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:600;color:var(--gray);white-space:nowrap}
.brand-item i{color:var(--blue);font-size:.6rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CTA Banner */
.cta-banner{position:relative;background:linear-gradient(135deg,var(--blue-dark),var(--blue));padding:80px 0;overflow:hidden}
.cta-overlay{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E")}
.cta-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-text h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;font-weight:800;margin-bottom:.6rem}
.cta-text p{color:rgba(255,255,255,.8);font-size:.95rem}
.cta-btns{display:flex;gap:1rem;flex-wrap:wrap}

/* Footer */
.footer { background: #08121d; color: #cbd5e1; position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,87,184,0.3), transparent); }
.footer-top { padding: 50px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }

.footer-brand .footer-logo { height: 48px; width: auto; margin-bottom: 1.2rem; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 0.9rem; line-height: 1.6; color: #94a3b8; margin-bottom: 1.5rem; max-width: 320px; }

.footer-socials { display: flex; gap: 0.8rem; }
.footer-socials a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.footer-socials a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,87,184,0.2); }

.footer-col h4 { color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem; margin-bottom: 1.5rem; position: relative; display: inline-block; }
.footer-col h4::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 24px; height: 2px; background: var(--blue); border-radius: 2px; }

.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links li a { color: #94a3b8; font-size: 0.9rem; display: flex; align-items: center; gap: 0.6rem; transition: all 0.2s; }
.footer-links li a i { font-size: 0.7rem; color: var(--blue); opacity: 0.7; transform: translateX(0); transition: all 0.2s; }
.footer-links li a:hover { color: #fff; padding-left: 5px; }
.footer-links li a:hover i { opacity: 1; transform: translateX(3px); }

.footer-contact-list { display: flex; flex-direction: column; gap: 1rem; }
.footer-contact-item { display: flex; gap: 0.8rem; align-items: flex-start; }
.fc-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(0,87,184,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; transition: all 0.3s; text-decoration: none; }
.fc-icon:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }
.fc-text { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; }
.fc-text a { color: inherit; transition: color 0.2s; }
.fc-text a:hover { color: #fff; }

.footer-bottom { background: #050b12; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.03); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom p { color: #64748b; font-size: 0.85rem; }
.footer-bottom-links { display: flex; gap: 2rem; }
.footer-bottom-links a { color: #64748b; font-size: 0.85rem; transition: color 0.2s; }
.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .footer-brand { grid-column: span 2; text-align: center; }
  .footer-brand p { margin: 1rem auto; max-width: 100%; }
  .footer-socials { justify-content: center; }
  .footer-col:last-child { grid-column: span 2; }
  .footer-contact-item { gap: 0.6rem; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
  .footer-bottom-links { gap: 1rem; margin-top: 0.5rem; }
}

/* Toast */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--dark);color:#fff;padding:.75rem 1.5rem;border-radius:50px;font-size:.88rem;display:flex;align-items:center;gap:.6rem;z-index:9999;transition:transform .3s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast i{color:#22c55e}

/* Scroll-to-top */
.scroll-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--blue);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;transform:translateY(20px);transition:all var(--trans);z-index:800}
.scroll-top.visible{opacity:1;transform:translateY(0)}

/* Purchase Notifications */
.purchase-notification {
  position: fixed;
  bottom: 2.5rem;
  left: 2.5rem;
  background: #fff;
  border-radius: 16px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 87, 184, 0.1);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
  z-index: 1000;
  max-width: 380px;
}
.purchase-notification.show { transform: translateX(0); }
.pn-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--blue-light), #eff6ff);
  color: var(--blue);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
  border: 1px solid rgba(0, 87, 184, 0.1);
}
.pn-content { font-size: 0.88rem; line-height: 1.5; color: #475569; }
.pn-content strong { color: #0f172a; font-weight: 800; display: block; margin-bottom: 2px; }
.pn-link { color: var(--blue); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.pn-link:hover { color: var(--blue-dark); text-decoration: underline; }
.pn-time { font-size: 0.75rem; color: #94a3b8; margin-top: 6px; display: flex; align-items: center; }
.pn-verified { color: #10b981; font-weight: 600; margin-left: 8px; display: flex; align-items: center; gap: 3px; font-size: 0.72rem; }
.pn-close {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  padding: 4px; font-size: 0.9rem; transition: .3s; position: absolute; top: 8px; right: 8px;
}
.pn-close:hover { color: #ef4444; }

/* Admin Layout Mobile Support */
 @media(max-width: 992px) {
   .admin-layout { grid-template-columns: 1fr; }
   .admin-sidebar { 
     position: fixed; 
     left: -260px; 
     top: 0; 
     width: 260px; 
     height: 100vh; 
     z-index: 2000; 
     transition: all var(--trans);
     box-shadow: 10px 0 30px rgba(0,0,0,0.1);
   }
   .admin-sidebar.open { left: 0; }
   .admin-main { padding: 1.5rem; width: 100%; }
   .admin-topbar { flex-direction: column; align-items: flex-start; gap: 1rem; }
   .admin-topbar h2 { font-size: 1.1rem; }
   
   /* Mobile Menu Trigger for Admin */
   .admin-toggle { 
     display: block !important; 
     width: 40px; height: 40px; 
     background: #fff; 
     border: 1.5px solid #e5e7eb; 
     border-radius: 8px; 
     color: var(--dark); 
     display: flex; align-items: center; justify-content: center;
     cursor: pointer;
     margin-right: 10px;
   }
   .topbar-new { display: block; border: none; padding: 0; }
    .topbar-new-inner { padding: 0; }
    .topbar-links, .nav-search-bar, .nav-contact-info, .navbar-bottom { display: none; }
    .hamburger-new { display: flex; }
    .nav-main-inner { gap: 1rem; }
    
    .topbar-nav {
      position: fixed;
      top: 0;
      right: -100%;
      width: 300px;
      height: 100vh;
      background: #fff;
      flex-direction: column;
      padding: 5rem 2rem 2rem;
      z-index: 1000;
      transition: all var(--trans);
      box-shadow: -10px 0 30px rgba(0,0,0,0.1);
      gap: 0;
      align-items: flex-start;
    }
    .topbar-nav.open { right: 0; }
    .topbar-nav a { 
      font-size: 1.1rem; 
      width: 100%; 
      padding: 1.2rem 0; 
      border-bottom: 1px solid #f1f5f9; 
      color: var(--dark);
    }
    .topbar-nav a::after { display: none; }
    
    .nav-brand img { height: 38px; }
    .cat-toggle { min-width: auto; padding: 0.6rem 0.8rem; }
    .cat-toggle span { display: none; }
 }
 
 @media(max-width: 768px) {
  .purchase-notification { 
    left: 0.75rem; 
    right: auto; 
    bottom: 1.25rem; 
    max-width: calc(100% - 80px); 
    padding: 10px 16px;
    gap: 12px;
    border-radius: 12px;
    transform: translateX(-120%);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  }
  .purchase-notification.show { transform: translateX(0); }
  .pn-icon { width: 40px; height: 40px; font-size: 1rem; border-radius: 10px; }
  .pn-content { font-size: 0.75rem; line-height: 1.3; }
  .pn-content strong { font-size: 0.8rem; margin-bottom: 0; }
  .pn-time { margin-top: 2px; font-size: 0.65rem; }
   
   .nav-links {
     position: fixed;
     top: 0;
     right: -100%;
     width: 280px;
     height: 100vh;
     background: #fff;
     flex-direction: column;
     padding: 5rem 2rem 2rem;
     z-index: 1000;
     transition: all var(--trans);
     box-shadow: -10px 0 30px rgba(0,0,0,0.05);
     gap: 1rem;
     align-items: flex-start !important;
   }
   .nav-links.open { right: 0; }
   .nav-link { font-size: 1.1rem; width: 100%; padding: 0.8rem 0; border-bottom: 1px solid #f1f5f9; }
   .nav-link::after { display: none; }
   
   .nav-inner { padding: 0.5rem 0; }
   .nav-logo { height: 42px; }
   
   .hamburger { display: flex; z-index: 1001; }
   .nav-quote-btn { display: none; }
   
   .has-dropdown:hover .dropdown-mega { display: none; } /* Disable mega menu on mobile hover */
   
   .cat-grid{grid-template-columns:repeat(2,1fr)}
   .products-grid{grid-template-columns:repeat(2,1fr)}
   .about-inner{grid-template-columns:1fr; gap: 2rem; }
   .services-grid{grid-template-columns:1fr}
 
   .features-grid{grid-template-columns:repeat(2,1fr)}
   .testimonial-card{min-width:calc(100%)}
   
   .section { padding: 50px 0; }
 }

@media(max-width:600px){
  .hero-title{font-size:2.2rem}
  .hero-sub{font-size:.95rem}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .hero-stats-row{gap:1.5rem}
  .hsr-div{display:none}
  .hsr-item strong{font-size:1.5rem}
  .cat-grid,.products-grid{grid-template-columns:1fr}

  .cta-content{flex-direction:column}
  .topbar-left{display:none}
  .topbar-right{gap:0.5rem;justify-content:center;width:100%;font-size:0.75rem;flex-wrap:wrap}
  .features-grid{grid-template-columns:1fr}
  .testimonial-card{min-width:100%}
  .chat-grabber{width:220px;right:0}
}

/* ── Chatbot ── */
.chatbot-wrapper{position:fixed;bottom:2rem;right:2rem;z-index:1000}
.chat-toggle{width:60px;height:60px;background:#25D366;border:none;border-radius:50%;color:#fff;font-size:2rem;cursor:pointer;box-shadow:0 8px 32px rgba(37,211,102,0.3);display:flex;align-items:center;justify-content:center;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;z-index:10}
.chat-toggle:hover{transform:scale(1.1);background:#128C7E}
.chat-toggle .chat-close-icon{display:none}
.chat-toggle.active .chat-open-icon{display:none}
.chat-toggle.active .chat-close-icon{display:block}
.chat-notification{position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;font-size:0.7rem;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #fff}

.chat-grabber{background:#fff;padding:1rem 1.5rem;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,0.12);width:260px;position:absolute;bottom:80px;right:0;animation:float 3s ease-in-out infinite;border:1px solid #e2e8f0;opacity:0;transform:translateY(20px);transition:all 0.5s;pointer-events:none;z-index:5}
.chat-grabber.show{opacity:1;transform:translateY(0);pointer-events:all}
.grabber-content p{font-size:0.88rem;line-height:1.4;margin:0;color:var(--dark);font-weight:500}
.grabber-close{position:absolute;top:5px;right:10px;cursor:pointer;color:#94a3b8;font-size:1.1rem;transition:color 0.3s}
.grabber-close:hover{color:#ef4444}
.grabber-arrow{position:absolute;bottom:-10px;right:25px;width:20px;height:20px;background:#fff;transform:rotate(45deg);border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}

/* ── WhatsApp Assistant Window ── */
.wa-window {
  width: 340px !important;
  max-width: calc(100vw - 2rem);
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
  position: absolute !important;
  bottom: 80px !important;
  right: 0 !important;
  z-index: 100 !important;
  overflow: hidden !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f1f5f9 !important;
  display: block !important;
}
.wa-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.wa-window-header {
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(to bottom, #f8fafc, #fff);
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}
.wa-window-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.3s;
}
.wa-window-close:hover { color: #ef4444; }

.wa-assistant-badge {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}
.wa-avatar {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 0.75rem !important;
  position: relative !important;
  display: block !important;
}
.wa-avatar img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
  display: block !important;
}
.online-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}
.wa-window-header h3 { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0; }
.wa-window-header p { font-size: 0.75rem; color: #64748b; margin: 0.2rem 0 0; }
.wa-window-header p strong { color: #22c55e; }

.wa-window-body { padding: 1.25rem 1.5rem; }
.wa-msg {
  background: #f1f5f9;
  color: #334155;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.wa-window-footer { padding: 0 1.5rem 1.5rem; }
.wa-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  padding: 0.85rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px -5px rgba(37, 211, 102, 0.3);
  transition: 0.3s;
}
.wa-start-btn:hover { background: #128C7E; transform: translateY(-2px); }

@media(max-width: 480px) {
  .wa-window { width: calc(100vw - 2rem); right: -1rem; }
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:480px){
  .chat-window{width:calc(100vw - 2rem);height:80vh;right:1rem}
  .chatbot-wrapper{right:1rem;bottom:1rem}
}

@media(max-width: 992px) {
  .nav-cat-dropdown, .nav-contact-card, .navbar-bottom { display: none !important; }
  .nav-search-bar { max-width: 300px; flex: 1; }
  .hamburger-new { display: flex !important; }
  .nav-main-inner { justify-content: space-between; }
}

.mobile-phone-btn, .nav-quote-btn { display: none; }

@media(max-width: 768px) {
  .nav-search-bar { display: none; }
  .nav-brand img { height: 32px; }
  .nav-actions-icons { gap: 0.75rem; align-items: center; }
  
  .mobile-phone-btn { display: flex !important; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 800; background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 50px; }
  .mobile-phone-btn i { font-size: 0.9rem; color: #25D366; } /* Green phone icon */
  
  .nav-quote-btn { 
    display: flex; 
    background: var(--blue); 
    color: #fff; 
    padding: 7px 14px; 
    border-radius: 50px; 
    font-size: 0.7rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 0.03em; 
    white-space: nowrap; 
    box-shadow: 0 4px 12px rgba(0,87,184,0.2);
  }

  .section-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 2rem;
  }
  .sh-left h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
}