:root{
  --primary:#1D712C;
  --primary-light:#2AA145;
  --primary-dark:#0f4d1b;
  --bg:#0f1512;
  --bg-soft:#15201b;
  --card:#152821;
  --text:#f7fff9;
  --muted:#9fc8b1;
  --border:#264333;
  --radius:14px;
  font-family:"Inter", "Segoe UI", Roboto, sans-serif;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(135deg,#07110d 0%, #0d1a14 50%, #081410 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:18px}

/* Header */
.header{position:sticky;top:0;z-index:999;background:linear-gradient(180deg, rgba(10,20,15,0.65), rgba(5,10,8,0.3));backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex;align-items:center;gap:20px;padding:12px 0}
.logo{font-weight:900;font-size:24px;color:transparent;background:linear-gradient(90deg,#4CFF75,#2AA145);-webkit-background-clip:text;text-decoration:none}
.nav{margin-left:20px;display:flex;gap:14px}
.nav a{color:var(--text);opacity:0.9;text-decoration:none;font-weight:600}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Search */
.search-area{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:6px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.search-area input{background:transparent;border:0;color:var(--text);padding:8px;min-width:260px}
.icon-btn{background:transparent;border:0;color:var(--text);cursor:pointer;font-size:18px}

/* Buttons */
.btn{border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:800}
.btn.primary{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:white;box-shadow:0 8px 26px rgba(0,0,0,0.6)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}
.btn.small{padding:6px 8px;font-size:13px;border-radius:8px}

/* HERO */
.hero{display:flex;gap:30px;align-items:center;padding:34px 0}
.hero-left{flex:1}
.hero-right{width:420px}
.hero h1{font-size:44px;margin:0;line-height:1.02;font-weight:900}
.hero-sub{color:var(--muted);margin-top:8px;max-width:520px}
.hero-ctas{display:flex;gap:12px;margin-top:16px}
.promo-strip{display:flex;gap:12px;margin-top:18px}
.promo{background:linear-gradient(90deg,#0f4d1b, #2aa145);padding:8px 12px;border-radius:8px;font-weight:700;color:#07110d}

/* hero carousel */
.hero-carousel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
.hero-carousel img{width:100%;height:260px;object-fit:cover;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.6)}

/* Layout: filters + listings */
.products{display:flex;gap:22px;padding:28px 0}
.filters{width:260px;background:linear-gradient(160deg,#12231c,#0f1b17);padding:16px;border-radius:12px;border:1px solid var(--border)}
.filter-group{margin-bottom:12px}
.filter-group label{display:block;color:var(--muted);margin-bottom:6px}
.filter-group select, .filter-group input{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.filter-group input::placeholder{color:rgba(255,255,255,0.25)}

/* Listing */
.product-listing{flex:1}
.listing-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.view-controls button{background:transparent;border:0;color:var(--muted);cursor:pointer}

/* product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:linear-gradient(160deg,#12261f,#0f241b);border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:10px}
.card h4{margin:10px 0 6px 0}
.card .meta{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:900;color:#e9ffea}

/* badges & rating */
.badge{display:inline-block;padding:6px 8px;border-radius:8px;background:linear-gradient(90deg,#2aa145,#1d712c);color:#07110d;font-weight:800;margin-right:6px;font-size:12px}
.rating{color:#ffd86b;font-weight:700;font-size:13px}

/* brands */
.brands{padding:26px 0}
.brands-row{display:flex;gap:18px;align-items:center}
.brands-row img{height:36px;opacity:0.95;filter:grayscale(0.2);background:transparent;padding:6px;border-radius:8px}

/* offers */
.offers-grid{display:flex;gap:18px;flex-wrap:wrap}
.offer-card{background:linear-gradient(160deg,#13221b,#0f2118);border-radius:12px;display:flex;gap:12px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
.offer-card img{width:140px;height:96px;object-fit:cover;border-radius:8px}
.offer-card .price{font-weight:900;color:#fff}
.offer-card .old{margin-left:8px;color:rgba(255,255,255,0.25);text-decoration:line-through;font-weight:700}

/* testimonials */
.testimonials{padding:28px 0}
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
blockquote{background:linear-gradient(160deg,#112520,#0e1814);padding:16px;border-radius:12px;color:var(--muted);font-style:italic}

/* footer */
.footer{padding:28px 0;margin-top:40px;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* cart panel */
.cart-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;background:linear-gradient(160deg,#0f2418,#12251a);padding:18px;border-left:1px solid var(--border);z-index:999;transition:right .28s ease}
.cart-panel.open{right:0}
.cart-header{display:flex;justify-content:space-between;align-items:center}
.cart-items{overflow:auto;max-height:58vh;padding-top:12px}
.cart-item{display:flex;gap:10px;padding:10px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));align-items:center}
.cart-item img{width:80px;height:60px;object-fit:cover;border-radius:8px}
.cart-row{display:flex;justify-content:space-between;align-items:center;padding-top:8px}

/* wishlist popup */
.wishlist-popup{position:fixed;bottom:22px;right:22px;background:linear-gradient(160deg,#112a1f,#0f1f18);padding:12px;border-radius:12px;border:1px solid var(--border);z-index:990}
.wishlist-popup.hidden{display:none}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:1000}
.modal.hidden{display:none}
.modal-inner{background:linear-gradient(160deg,#0f2418,#11261d);padding:18px;border-radius:12px;width:96%;max-width:760px;position:relative}

/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:18px}
.pagination button{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}

/* responsive */
@media (max-width:900px){
  .products{flex-direction:column}
  .filters{width:100%}
  .hero{flex-direction:column}
  .hero-right{width:100%}
}
