/* v17 — full design upgrade */
/* CSS Variables for theming */
:root{
  --bg:#FAFAFA;
  --card:#FFFFFF;
  --text:#212121;
  --muted:#555555;
  --accent:#2E7D32;
  --accent-2:#388E3C;
  --border:#ECECEC;
  --shadow:0 8px 30px rgba(0,0,0,.08);
}
:root.dark{
  --bg:#121212;
  --card:#1E1E1E;
  --text:#EDEDED;
  --muted:#BBBBBB;
  --accent:#66BB6A;
  --accent-2:#81C784;
  --border:#333;
  --shadow:0 12px 32px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',system-ui,Segoe UI,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Containers */
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}

/* Navbar */
.navbar{
  position:sticky;top:0;z-index:1000;background:var(--card);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{height:32px;width:auto}
.brand-name{font-family:'Poppins',sans-serif;font-weight:700}
.nav-links{display:flex;align-items:center;gap:14px;margin-left:auto}
.navbar a{color:var(--text);text-decoration:none;font-weight:600}
.navbar a:hover{color:var(--accent)}
.shop-all{padding:8px 12px;border-radius:10px;background:var(--accent);color:#fff !important}
.shop-all:hover{background:var(--accent-2)}
.site-search input{
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:transparent;color:var(--text);
}
.theme-toggle{margin-left:8px;border:1px solid var(--border);background:transparent;border-radius:8px;padding:6px 8px;cursor:pointer}

/* Dropdown */
.dropdown{position:relative}
.dropbtn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text);font-weight:600}
.dropdown-content{
  display:none;position:absolute;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
  border-radius:10px;min-width:180px;padding:8px;top:40px;left:0;
}
.dropdown-content a{display:block;padding:8px;border-radius:8px}
.dropdown-content a:hover{background:rgba(0,0,0,.04)}
.dropdown:hover .dropdown-content{display:block}

/* Hero */
.hero{background:linear-gradient(135deg, rgba(46,125,50,.08), transparent 60%), var(--bg);border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;padding:28px 0}
.hero-copy h1{font-family:'Poppins',sans-serif;margin:0 0 10px;font-size:2rem}
.hero-copy p{color:var(--muted);margin:0 0 16px}
.hero-cta{display:flex;gap:10px}
.primary-btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.primary-btn:hover{background:var(--accent-2)}
.ghost-btn{display:inline-block;border:1px solid var(--border);padding:10px 16px;border-radius:10px;text-decoration:none;color:var(--text)}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}
.hero-visual img{width:100%;max-width:220px;display:block;margin:auto}

/* Categories */
.categories{padding:16px 0}
.section-title{font-family:'Poppins',sans-serif;margin:22px 0 12px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat-card{background:var(--card);box-shadow:var(--shadow);border-radius:14px;padding:14px;text-align:center;text-decoration:none;color:var(--text);border:1px solid var(--border);transition:transform .12s ease}
.cat-card:hover{transform:translateY(-2px)}
.cat-ico{font-size:24px;margin-bottom:6px}

/* Featured & Best Sellers */
.featured-grid,.best-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:720px){.featured-grid,.best-grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease, box-shadow .2s}
.card:hover{transform:translateY(-3px)}
.card a.thumb{display:block;aspect-ratio:1/1;background:#f0f0f0}
.card a.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:12px;display:flex;flex-direction:column;gap:10px}
.card .title{font-size:.95rem;line-height:1.25rem;margin:0;min-height:2.5rem}
.buy-btn{display:inline-block;text-align:center;font-weight:700;text-decoration:none;background:var(--accent);color:#fff;padding:10px 12px;border-radius:10px}
.buy-btn:hover{background:var(--accent-2)}

/* Products grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.empty{text-align:center;color:var(--muted);padding:24px 0}
.hidden{display:none}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
@media(min-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
.blog-card{display:flex;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.blog-card .thumb{flex:0 0 160px;display:block}
.blog-card .thumb img{width:160px;height:160px;object-fit:cover;display:block}
.blog-body{padding:12px}
.blog-body h3{margin:0 0 8px}
.text-link{color:var(--accent);text-decoration:none}
.text-link:hover{text-decoration:underline}

/* Contact form */
.contact-form{display:flex;flex-direction:column;gap:12px;max-width:500px;margin:20px auto}
.contact-form input,.contact-form textarea{padding:10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text)}
.contact-form button{background:var(--accent);color:#fff;font-weight:700;border:none;padding:12px;border-radius:8px;cursor:pointer}
.contact-form button:hover{background:var(--accent-2)}
.form-message{margin-top:12px;font-size:1rem;font-weight:600;text-align:center}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--card);margin-top:32px}
.footer-inner{display:flex;flex-direction:column;gap:10px;align-items:center;padding:20px 16px;color:var(--muted)}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.footer-nav a{color:var(--text);text-decoration:none;font-weight:600}
.footer-nav a:hover{color:var(--accent)}
.social-icons{display:flex;gap:16px}

/* Mobile CTA */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;
  background:var(--accent);color:#fff;text-decoration:none;padding:12px;font-weight:800;z-index:999;border-top-left-radius:12px;border-top-right-radius:12px;
}
@media(min-width:720px){.mobile-cta{display:none}}

/* Back to Top */
#backToTop{
  display:none;position:fixed;bottom:80px;right:20px;z-index:99;font-size:18px;border:none;outline:none;background:var(--accent);color:white;cursor:pointer;padding:12px 16px;border-radius:50%;box-shadow:var(--shadow);
}
#backToTop:hover{background:var(--accent-2)}