/* ===== Root Variables ===== */
:root{
  --green:#16A34A;
  --green-dark:#0F7A38;
  --green-light:#E8F8EF;
  --orange:#FF7A1A;
  --gray:#F4F6F5;
  --gray-mid:#E5E9E7;
  --text:#1B231E;
  --text-muted:#6B7570;
  --white:#ffffff;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 8px 24px rgba(22,163,74,0.08);
  --shadow-lg:0 20px 48px rgba(15,40,25,0.14);
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--text);background:var(--white);line-height:1.5;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;outline:none;}
h1,h2,h3,h4{font-family:var(--font-display);}

/* ===== Loading Screen ===== */
#loading-screen{position:fixed;inset:0;background:var(--green);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:opacity .6s ease, visibility .6s ease;}
#loading-screen.hide{opacity:0;visibility:hidden;}
.loader-basket{font-size:52px;animation:bounce 1s infinite;}
#loading-screen p{margin-top:14px;font-family:var(--font-display);font-weight:700;letter-spacing:2px;font-size:20px;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ===== Scroll Progress ===== */
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--orange);width:0%;z-index:2000;transition:width .1s;}

/* ===== Navbar ===== */
.navbar{position:sticky;top:0;width:100%;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid var(--gray-mid);transition:box-shadow .3s;}
.navbar.scrolled{box-shadow:0 4px 20px rgba(0,0,0,0.06);}
.nav-container{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px;}
.logo{font-family:var(--font-display);font-weight:700;font-size:22px;display:flex;align-items:center;gap:8px;color:var(--text);}
.logo i{color:var(--green);}
.logo span{color:var(--green);}
.nav-links{display:flex;gap:28px;}
.nav-links a{font-weight:500;font-size:15px;color:var(--text);position:relative;padding:6px 0;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--green);transition:width .3s;}
.nav-links a:hover::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:14px;}
.search-bar{position:relative;display:flex;align-items:center;background:var(--gray);border-radius:999px;padding:9px 16px;gap:8px;width:280px;}
.search-bar i{color:var(--text-muted);}
.search-bar input{background:none;border:none;width:100%;font-size:14px;}
.search-results{position:absolute;top:110%;left:0;right:0;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;display:none;z-index:50;}
.search-results.active{display:block;}
.search-result-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--gray);}
.search-result-item img{width:36px;height:36px;object-fit:cover;border-radius:8px;}
.search-result-item:hover{background:var(--green-light);}
.icon-btn{position:relative;font-size:18px;color:var(--text);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s;}
.icon-btn:hover{background:var(--gray);}
.badge{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.btn-login{background:var(--green);color:#fff;padding:10px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:background .2s, transform .2s;}
.btn-login:hover{background:var(--green-dark);transform:translateY(-1px);}
.hamburger{display:none;font-size:20px;}

/* ===== Buttons ===== */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;transition:background .2s, transform .2s;}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);}
.btn-primary.full{width:100%;justify-content:center;}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1.5px solid #fff;color:#fff;padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;backdrop-filter:blur(6px);transition:background .2s, transform .2s;}
.btn-secondary:hover{background:rgba(255,255,255,0.3);transform:translateY(-2px);}
.btn-clear{background:var(--gray);padding:10px 20px;border-radius:999px;font-weight:600;font-size:13px;color:var(--text-muted);align-self:flex-end;}
.btn-clear:hover{background:var(--gray-mid);}

/* ===== Hero ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;color:#fff;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:zoomSlow 20s ease-in-out infinite alternate;}
@keyframes zoomSlow{from{transform:scale(1.05);}to{transform:scale(1.15);}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg, rgba(15,50,25,0.88) 0%, rgba(15,80,35,0.55) 55%, rgba(15,50,25,0.3) 100%);}
.hero-content{position:relative;max-width:1300px;margin:0 auto;padding:40px 24px;z-index:2;}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:20px;backdrop-filter:blur(6px);animation:fadeUp .8s ease;}
.hero h1{font-size:56px;font-weight:800;max-width:680px;line-height:1.15;margin-bottom:18px;animation:fadeUp 1s ease;}
.hero h1 span{color:#8CE6A8;}
.hero p{font-size:17px;max-width:540px;color:rgba(255,255,255,0.9);margin-bottom:32px;animation:fadeUp 1.2s ease;}
.hero-buttons{display:flex;gap:16px;margin-bottom:48px;animation:fadeUp 1.4s ease;}
.hero-stats{display:flex;gap:44px;animation:fadeUp 1.6s ease;}
.hero-stats strong{display:block;font-size:26px;font-family:var(--font-display);}
.hero-stats span{font-size:13px;color:rgba(255,255,255,0.8);}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.hero-floats{position:absolute;inset:0;pointer-events:none;z-index:2;}
.float-item{position:absolute;width:110px;height:110px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow-lg);border:4px solid rgba(255,255,255,0.5);animation:floaty 5s ease-in-out infinite;}
.f1{top:18%;right:12%;animation-delay:0s;}
.f2{top:52%;right:22%;width:90px;height:90px;animation-delay:1s;}
.f3{top:70%;right:6%;width:80px;height:80px;animation-delay:2s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}

/* ===== Sections ===== */
.section{max-width:1300px;margin:0 auto;padding:90px 24px;}
.section-header{text-align:center;max-width:600px;margin:0 auto 48px;}
.section-header h2{font-size:34px;font-weight:700;margin-bottom:10px;}
.section-header p{color:var(--text-muted);font-size:15px;}

/* ===== Categories ===== */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;}
.category-card{background:var(--white);border:1px solid var(--gray-mid);border-radius:var(--radius);padding:22px 18px;text-align:center;transition:transform .3s, box-shadow .3s, border-color .3s;cursor:pointer;}
.category-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--green);}
.category-card .cat-img-wrap{width:76px;height:76px;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:var(--green-light);display:flex;align-items:center;justify-content:center;position:relative;}
.category-card img{width:100%;height:100%;object-fit:cover;}
.category-card .cat-icon{position:absolute;bottom:-4px;right:-4px;background:var(--green);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;}
.category-card h4{font-size:15px;font-weight:600;margin-bottom:4px;}
.category-card span{font-size:12px;color:var(--text-muted);}

/* ===== Flash Sale ===== */
.flash-sale{background:linear-gradient(135deg,#FFF4EA,#FFEEDD);border-radius:28px;}
.flash-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:36px;}
.flash-header h2{font-size:28px;color:var(--orange);display:flex;align-items:center;gap:10px;}
.flash-header p{color:var(--text-muted);margin-top:4px;}
.countdown{display:flex;gap:10px;}
.cd-box{background:var(--text);color:#fff;border-radius:12px;padding:10px 16px;text-align:center;min-width:60px;}
.cd-box span{font-size:22px;font-weight:700;font-family:var(--font-display);display:block;}
.cd-box small{font-size:10px;color:rgba(255,255,255,0.7);}
.deals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;}

/* ===== Product Cards ===== */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;}
.product-card{background:#fff;border:1px solid var(--gray-mid);border-radius:var(--radius);overflow:hidden;transition:transform .3s, box-shadow .3s;display:flex;flex-direction:column;position:relative;}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.product-img-wrap{position:relative;background:var(--gray);aspect-ratio:1/0.9;overflow:hidden;}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.product-card:hover .product-img-wrap img{transform:scale(1.08);}
.discount-badge{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;}
.stock-badge{position:absolute;top:10px;right:44px;background:#DC2626;color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;}
.wish-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-size:14px;color:var(--text-muted);transition:color .2s, transform .2s;z-index:3;}
.wish-btn:hover{transform:scale(1.1);}
.wish-btn.active{color:#E11D48;}
.quick-view-btn{position:absolute;left:0;right:0;bottom:-40px;background:rgba(20,30,22,0.85);color:#fff;text-align:center;padding:9px 0;font-size:12px;font-weight:600;transition:bottom .3s;}
.product-card:hover .quick-view-btn{bottom:0;}
.product-info{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-brand{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.product-name{font-size:14.5px;font-weight:600;line-height:1.3;min-height:36px;}
.product-rating{font-size:12px;color:var(--orange);display:flex;align-items:center;gap:4px;}
.product-rating span{color:var(--text-muted);}
.product-weight{font-size:12px;color:var(--text-muted);}
.product-price{display:flex;align-items:center;gap:8px;margin-top:4px;}
.price-now{font-size:16px;font-weight:700;color:var(--green);}
.price-old{font-size:13px;color:var(--text-muted);text-decoration:line-through;}
.add-cart-btn{margin-top:10px;background:var(--green-light);color:var(--green-dark);border:1.5px solid var(--green);padding:9px;border-radius:10px;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s, color .2s;}
.add-cart-btn:hover{background:var(--green);color:#fff;}
.add-cart-btn.added{background:var(--green);color:#fff;}

/* ===== Filters ===== */
.filters-bar{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;background:var(--gray);padding:20px 24px;border-radius:var(--radius);margin-bottom:32px;}
.filter-group{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--text-muted);}
.filter-group select, .filter-group input[type=range]{padding:8px 10px;border-radius:8px;border:1px solid var(--gray-mid);background:#fff;font-size:13px;min-width:150px;}
.filter-group input[type=range]{padding:0;accent-color:var(--green);}

/* ===== Brands ===== */
.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;}
.brand-card{background:#fff;border:1px solid var(--gray-mid);border-radius:var(--radius-sm);padding:24px 14px;text-align:center;transition:transform .3s, box-shadow .3s;}
.brand-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green);}
.brand-card img{height:44px;object-fit:contain;margin:0 auto 10px;}
.brand-card span{font-size:13px;font-weight:600;}

/* ===== Why Us ===== */
.why-us{background:var(--green-light);border-radius:28px;}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;}
.why-card{background:#fff;padding:28px 22px;border-radius:var(--radius);text-align:center;transition:transform .3s, box-shadow .3s;}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.why-card i{font-size:30px;color:var(--green);margin-bottom:14px;}
.why-card h3{font-size:16px;margin-bottom:6px;}
.why-card p{font-size:13px;color:var(--text-muted);}

/* ===== Testimonials ===== */
.testimonial-slider{position:relative;max-width:720px;margin:0 auto;min-height:220px;}
.testimonial-card{position:absolute;inset:0;opacity:0;transform:translateX(30px);transition:opacity .5s, transform .5s;background:var(--gray);border-radius:var(--radius);padding:36px;text-align:center;}
.testimonial-card.active{opacity:1;transform:translateX(0);position:relative;}
.testimonial-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:3px solid var(--green);}
.testimonial-card .stars{color:var(--orange);margin-bottom:10px;font-size:14px;}
.testimonial-card p{font-size:15px;color:var(--text);margin-bottom:14px;font-style:italic;}
.testimonial-card h4{font-size:14px;font-weight:700;}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:24px;}
.slider-dots span{width:9px;height:9px;border-radius:50%;background:var(--gray-mid);cursor:pointer;transition:background .3s, width .3s;}
.slider-dots span.active{background:var(--green);width:24px;border-radius:6px;}

/* ===== Newsletter ===== */
.newsletter{background:linear-gradient(120deg,var(--green),var(--green-dark));color:#fff;padding:70px 24px;text-align:center;}
.newsletter-inner{max-width:560px;margin:0 auto;}
.newsletter h2{font-size:28px;margin-bottom:10px;}
.newsletter p{opacity:.9;margin-bottom:26px;font-size:14px;}
#newsletterForm{display:flex;gap:10px;}
#newsletterForm input{flex:1;padding:14px 18px;border-radius:999px;border:none;font-size:14px;}
#newsletterForm button{background:var(--text);color:#fff;padding:14px 26px;border-radius:999px;font-weight:600;transition:background .2s;}
#newsletterForm button:hover{background:#000;}
#newsletterMsg{display:block;margin-top:12px;font-size:13px;}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-info{display:flex;flex-direction:column;gap:20px;}
.info-item{display:flex;gap:16px;align-items:flex-start;}
.info-item i{background:var(--green-light);color:var(--green);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.info-item h4{font-size:14px;margin-bottom:2px;}
.info-item p{font-size:13px;color:var(--text-muted);}
.map-embed{border-radius:var(--radius);overflow:hidden;margin-top:6px;height:220px;}
.map-embed iframe{width:100%;height:100%;border:0;}
.contact-form{display:flex;flex-direction:column;gap:14px;background:var(--gray);padding:28px;border-radius:var(--radius);}
.form-row{display:flex;gap:14px;}
.contact-form input, .contact-form textarea{padding:13px 16px;border-radius:10px;border:1px solid var(--gray-mid);font-size:14px;width:100%;}
.contact-form input.error, .contact-form textarea.error{border-color:#DC2626;}
#contactMsg{font-size:13px;color:var(--green-dark);}

/* ===== Footer ===== */
.footer{background:#12291B;color:rgba(255,255,255,0.8);padding:60px 24px 0;}
.footer-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer .logo{color:#fff;margin-bottom:14px;}
.footer-col p{font-size:13px;line-height:1.7;margin-bottom:16px;}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;font-size:13px;}
.footer-col ul li a:hover{color:#8CE6A8;}
.social-icons{display:flex;gap:10px;}
.social-icons a{width:34px;height:34px;background:rgba(255,255,255,0.08);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.social-icons a:hover{background:var(--green);}
.footer-bottom{max-width:1300px;margin:0 auto;padding:22px 0;text-align:center;font-size:12px;}

/* ===== Back to Top ===== */
#backToTop{position:fixed;bottom:26px;right:26px;width:46px;height:46px;background:var(--green);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s, transform .3s, background .2s;z-index:500;}
#backToTop.show{opacity:1;visibility:visible;transform:translateY(0);}
#backToTop:hover{background:var(--green-dark);}

/* ===== Drawer ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;z-index:1500;}
.overlay.show{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100%;background:#fff;z-index:1600;transition:right .35s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,0.15);}
.drawer.open{right:0;}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--gray-mid);}
.drawer-header h3{font-size:17px;display:flex;align-items:center;gap:8px;}
.close-drawer{font-size:18px;color:var(--text-muted);}
.drawer-body{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:14px;}
.drawer-footer{padding:18px 22px;border-top:1px solid var(--gray-mid);}
.cart-total{display:flex;justify-content:space-between;margin-bottom:14px;font-size:15px;font-weight:600;}
.cart-item{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--gray);padding-bottom:14px;}
.cart-item img{width:60px;height:60px;object-fit:cover;border-radius:10px;}
.cart-item-info{flex:1;}
.cart-item-info h5{font-size:13.5px;margin-bottom:4px;}
.cart-item-info span{font-size:12px;color:var(--text-muted);}
.qty-control{display:flex;align-items:center;gap:8px;margin-top:6px;}
.qty-control button{width:24px;height:24px;background:var(--gray);border-radius:6px;font-size:13px;}
.qty-control span{font-size:13px;font-weight:600;min-width:16px;text-align:center;}
.remove-item{color:#DC2626;font-size:14px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}
.empty-state i{font-size:44px;margin-bottom:14px;color:var(--gray-mid);}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1800;opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal{background:#fff;border-radius:var(--radius);max-width:640px;width:100%;max-height:88vh;overflow-y:auto;padding:30px;position:relative;transform:scale(.92);transition:transform .3s;}
.modal-overlay.show .modal{transform:scale(1);}
.modal-close{position:absolute;top:16px;right:16px;font-size:18px;width:34px;height:34px;background:var(--gray);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.qv-grid img{border-radius:var(--radius-sm);width:100%;aspect-ratio:1;object-fit:cover;}

/* ===== Toast ===== */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:14px 26px;border-radius:999px;font-size:13.5px;font-weight:500;opacity:0;visibility:hidden;transition:opacity .3s, transform .3s;z-index:3000;display:flex;align-items:center;gap:8px;}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.toast i{color:#8CE6A8;}

/* ===== Scroll animation ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease, transform .6s ease;}
.reveal.active{opacity:1;transform:translateY(0);}

/* ===== Responsive ===== */
@media(max-width:980px){
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .nav-links{position:fixed;top:70px;left:0;width:100%;background:#fff;flex-direction:column;padding:20px 24px;gap:18px;box-shadow:0 10px 20px rgba(0,0,0,0.06);transform:translateY(-140%);opacity:0;transition:transform .3s, opacity .3s;}
  .nav-links.open{transform:translateY(0);opacity:1;}
  .search-bar{display:none;}
  .hamburger{display:flex;align-items:center;justify-content:center;}
  .hero h1{font-size:38px;}
  .hero-floats{display:none;}
  .hero-stats{gap:26px;flex-wrap:wrap;}
  .form-row{flex-direction:column;}
}
@media(max-width:600px){
  .section{padding:60px 20px;}
  .flash-header{flex-direction:column;align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;}
  .btn-login{display:none;}
  #newsletterForm{flex-direction:column;}
  .qv-grid{grid-template-columns:1fr;}
}