:root{
  --green:#16a34a; --green-dark:#0f7a38; --green-light:#e7f9ee;
  --gold:#ff7a45; --gold-light:#fff0e8;
  --orange:#ff7a45; --orange-dark:#e85f2b;
  --text:#161d1a; --muted:#697169; --border:#e7e9e4;
  --cream:#faf8f3; --radius:18px; --radius-sm:12px;
  --shadow-sm:0 3px 14px rgba(15,60,30,0.07);
  --shadow-md:0 14px 36px rgba(15,60,30,0.11);
  --shadow-lg:0 26px 60px rgba(15,60,30,0.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',-apple-system,'Segoe UI',sans-serif; color:var(--text); background:#fff; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.logo,.product-name,.footer-logo{font-family:'Plus Jakarta Sans','Inter',sans-serif;}
a{text-decoration:none; color:inherit;}
img{max-width:100%;}

/* Top bar */
.topbar{background:var(--green-dark); color:#e4efe7; font-size:12.5px; padding:9px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; letter-spacing:0.01em;}
.topbar-left{display:flex; align-items:center; gap:8px;}
.topbar-right{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.topbar-right a{display:flex; align-items:center; gap:6px; opacity:0.85; transition:opacity 0.15s;}
.topbar-right a:hover{opacity:1;}
.flag-select{display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.08); padding:4px 10px; border-radius:20px;}

/* Header */
header{padding:20px 28px; display:flex; align-items:center; gap:34px; max-width:1440px; margin:0 auto; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:10px; font-size:26px; font-weight:800; color:var(--green);}
.logo i{font-size:28px;}
.logo small{display:block; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:0.3px; font-family:'Inter',sans-serif;}
.search-bar{flex:1; display:flex; min-width:220px; box-shadow:var(--shadow-sm); border-radius:30px; overflow:hidden; transition:0.2s;}
.search-bar:focus-within{box-shadow:var(--shadow-md);}
.search-bar input{flex:1; padding:15px 22px; border:1.5px solid var(--border); border-right:none; border-radius:30px 0 0 30px; font-size:14px; font-family:inherit;}
.search-bar input:focus{outline:none; border-color:var(--green);}
.search-bar button{background:var(--green); color:#fff; border:none; padding:0 30px; border-radius:0 30px 30px 0; font-weight:800; cursor:pointer; transition:background 0.15s;}
.search-bar button:hover{background:var(--green-dark);}
.header-actions{display:flex; align-items:center; gap:28px;}
.header-actions .item{display:flex; align-items:center; gap:10px; font-size:13px; cursor:pointer; position:relative;}
.header-actions .item i{font-size:19px; color:var(--green); background:var(--green-light); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:0.2s;}
.header-actions .item:hover i{background:var(--green); color:#fff; transform:scale(1.06);}
.cart-badge{background:var(--orange); color:#fff; font-size:11px; font-weight:800; border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; margin-left:4px;}

/* Nav */
nav.mainnav{background:var(--green); position:sticky; top:0; z-index:500; box-shadow:0 1px 0 rgba(0,0,0,0.04);}
.nav-inner{max-width:1440px; margin:0 auto; display:flex; align-items:stretch;}
.cat-toggle{background:var(--green-dark); color:#fff; padding:15px 24px; font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:10px; white-space:nowrap; cursor:pointer;}
.nav-links{display:flex; gap:6px; align-items:center; padding:0 14px; flex-wrap:wrap;}
.nav-links a{padding:15px 14px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.82); border-bottom:2px solid transparent; transition:0.15s;}
.nav-links a.active, .nav-links a:hover{color:#fff; border-bottom-color:var(--gold);}
.nav-hamburger{display:none; background:none; border:none; color:#fff; font-size:18px; padding:15px 18px; cursor:pointer;}

/* Generic page layout */
.layout{max-width:1440px; margin:0 auto; display:flex; gap:26px; padding:26px 28px;}
.sidebar{width:240px; flex-shrink:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); height:fit-content; box-shadow:var(--shadow-sm); position:sticky; top:78px; max-height:calc(100vh - 96px); overflow-y:auto; overflow-x:hidden;}
.sidebar li{list-style:none;}
.sidebar a{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-size:14px; border-bottom:1px solid var(--border); transition:0.15s;}
.sidebar a:last-child{border-bottom:none;}
.sidebar a:hover, .sidebar a.active{background:var(--green-light); color:var(--green); padding-left:22px;}
.sidebar .cat-icon{display:flex; align-items:center; gap:10px;}
.main-content{flex:1; min-width:0;}

.page-hero{background:linear-gradient(135deg,var(--green-light) 0%,#f3faf5 100%); padding:44px 24px; text-align:center;}
.page-hero h1{color:var(--green-dark); font-size:32px; font-weight:800;}
.breadcrumb{font-size:13px; color:var(--muted); margin-top:10px;}
.breadcrumb a{color:var(--green); font-weight:600;}

/* Hero (home) */
.hero{background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%); border-radius:24px; padding:56px; display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);}
.hero:before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,122,69,0.22), transparent 55%);}
.hero-text{position:relative; z-index:1;}
.hero-text h1{font-size:46px; color:#fff; line-height:1.12; margin-bottom:16px; font-weight:800; letter-spacing:-0.01em;}
.hero-text p{color:rgba(255,255,255,0.85); margin-bottom:28px; font-size:16px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:30px; font-weight:800; font-size:14px; border:none; cursor:pointer; transition:0.2s;}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--orange-dark)); color:#fff; box-shadow:0 8px 20px rgba(255,122,69,0.35);}
.btn-primary:hover{background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,122,69,0.4);}
.hero-badge{position:absolute; top:24px; right:24px; background:var(--gold); color:#fff; border-radius:50%; width:92px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; text-align:center; line-height:1.1; box-shadow:var(--shadow-md); z-index:1;}
.hero-badge span{font-size:20px;}
.hero-icon{font-size:130px; color:rgba(255,255,255,0.92); position:relative; z-index:1; filter:drop-shadow(0 14px 24px rgba(0,0,0,0.25));}
.trust-row{display:flex; gap:30px; margin-top:24px; flex-wrap:wrap; position:relative; z-index:1;}
.trust-row div{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.85);}
.trust-row i{color:var(--gold);}

/* Category icons row */
.cat-icons{display:grid; grid-template-columns:repeat(auto-fit, minmax(96px,1fr)); gap:18px; margin:34px 0; text-align:center;}
.cat-icons a{display:flex; flex-direction:column; align-items:center; gap:11px; font-size:12.5px; font-weight:700; color:#333; transition:0.2s;}
.cat-icons .icon-circle{width:72px; height:72px; border-radius:24px; background:var(--green-light); display:flex; align-items:center; justify-content:center; font-size:27px; color:var(--green); transition:0.2s; box-shadow:var(--shadow-sm);}
.cat-icons a:hover{transform:translateY(-4px);}
.cat-icons a:hover .icon-circle, .cat-icons a.active .icon-circle{background:var(--green); color:#fff; box-shadow:var(--shadow-md);}

/* Promo banners */
.promos{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin:34px 0;}
.promo{border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm); transition:0.2s;}
.promo:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.promo h3{font-size:20px; font-weight:800;}
.promo p{font-size:13px; color:#4a4a4a;}
.promo-1{background:var(--green-light);}
.promo-2{background:var(--gold-light);}
.promo-3{background:#fbe9e9;}
.promo .btn{align-self:flex-start; padding:11px 22px; font-size:13px;}
.promo-2 .btn{background:var(--orange); color:#fff; box-shadow:none;}
.promo-3 .btn{background:#c1544e; color:#fff; box-shadow:none;}

/* Trust badges bottom */
.badges{display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; padding:30px 24px; border-top:1px solid var(--border); margin-top:24px; background:var(--cream); border-radius:var(--radius);}
.badges div{display:flex; align-items:center; gap:12px; font-size:13px;}
.badges i{font-size:27px; color:var(--green);}
.badges b{display:block; font-size:14px;}
.badges span{color:var(--muted); font-size:12px;}

/* Products */
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.toolbar select{padding:9px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:inherit;}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:22px;}
.product-card{border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:9px; position:relative; transition:0.22s; background:#fff;}
.product-card:hover{box-shadow:var(--shadow-md); transform:translateY(-5px); border-color:transparent;}
.product-img{background:var(--green-light); border-radius:var(--radius-sm); height:116px; display:flex; align-items:center; justify-content:center; font-size:46px; color:var(--green); overflow:hidden;}
.product-badge{position:absolute; top:14px; left:14px; background:var(--orange); color:#fff; font-size:11px; font-weight:800; padding:4px 11px; border-radius:20px; z-index:1;}
.product-cat{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; font-weight:700;}
.product-name{font-size:14.5px; font-weight:700; line-height:1.3; min-height:36px;}
.product-price{display:flex; align-items:baseline; gap:8px;}
.product-price .now{font-size:17px; font-weight:800; color:var(--green-dark);}
.product-price .was{font-size:12px; color:var(--muted); text-decoration:line-through;}
.add-cart-btn{background:var(--green); color:#fff; border:none; padding:12px; border-radius:var(--radius-sm); font-weight:800; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:0.15s;}
.add-cart-btn:hover{background:var(--green-dark); transform:translateY(-1px);}
.add-cart-btn.added{background:var(--orange);}
.pagination{display:flex; justify-content:center; gap:8px; margin:34px 0;}
.pagination button{width:38px; height:38px; border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm); cursor:pointer; font-weight:600; transition:0.15s;}
.pagination button.active{background:var(--green); color:#fff; border-color:var(--green); box-shadow:var(--shadow-sm);}

/* Cart page */
.cart-table{width:100%; border-collapse:collapse;}
.cart-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); padding:12px 10px; border-bottom:2px solid var(--border);}
.cart-table td{padding:16px 10px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle;}
.cart-item-info{display:flex; align-items:center; gap:14px;}
.cart-item-icon{width:54px; height:54px; background:var(--green-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--green); overflow:hidden;}
.qty-control{display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius-sm); width:fit-content;}
.qty-control button{width:32px; height:32px; border:none; background:#fff; cursor:pointer; font-weight:700;}
.qty-control input{width:38px; text-align:center; border:none; font-size:14px;}
.remove-btn{color:#c1544e; cursor:pointer; font-size:13px; font-weight:600;}
.cart-summary{background:var(--green-light); border-radius:var(--radius); padding:24px; max-width:340px; margin-left:auto; margin-top:20px;}
.cart-summary .row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px;}
.cart-summary .total{font-size:18px; font-weight:800; color:var(--green-dark); border-top:1px solid #cfe6d6; padding-top:10px; margin-top:6px;}
.empty-cart{text-align:center; padding:70px 20px; color:var(--muted);}
.empty-cart i{font-size:50px; color:var(--border); margin-bottom:16px;}

/* Checkout */
.checkout-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start;}
.checkout-form{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm);}
.checkout-form h2{font-size:18px; margin-bottom:18px; font-weight:800;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.form-group input, .form-group select{width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:inherit;}
.form-group input:focus, .form-group select:focus{outline:none; border-color:var(--green);}
.form-group input:disabled{background:#f4f4f4; color:var(--muted);}
.country-lock{background:var(--green-light); border:1px solid #bfe0cb; border-radius:var(--radius-sm); padding:13px 16px; font-size:13px; color:var(--green-dark); display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.payment-options{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.payment-options label{display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 16px; font-size:14px; cursor:pointer; transition:0.15s;}
.payment-options label:has(input:checked){border-color:var(--green); background:var(--green-light);}
.payment-options input{accent-color:var(--green);}
.order-summary-box{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm);}
.order-summary-box h3{font-size:16px; margin-bottom:14px; font-weight:800;}
.summary-item{display:flex; justify-content:space-between; font-size:13px; padding:9px 0; border-bottom:1px solid var(--border);}
.error-banner{background:#fdecea; border:1px solid #f5b5ac; color:#a02c1f; padding:13px 16px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; display:none;}
.error-banner.show{display:block;}

/* Success page */
.success-box{max-width:560px; margin:70px auto; text-align:center; padding:44px 26px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.success-icon{font-size:62px; color:var(--green); margin-bottom:18px;}
.order-id{background:var(--green-light); border-radius:var(--radius-sm); padding:15px; font-weight:700; color:var(--green-dark); margin:22px 0; font-size:16px;}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.contact-info div{margin-bottom:20px; display:flex; gap:14px; align-items:flex-start;}
.contact-info i{color:var(--green); font-size:20px; margin-top:2px;}
.contact-form{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm);}

/* Footer */
footer{background:var(--green-dark); color:#dcefe2; padding:52px 28px 24px;}
.footer-inner{max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:34px;}
.footer-inner h4{color:#fff; font-size:15px; margin-bottom:16px; font-weight:700;}
.footer-inner ul{list-style:none;}
.footer-inner li{margin-bottom:10px; font-size:13px;}
.footer-inner a{transition:0.15s;}
.footer-inner a:hover{color:#fff;}
.footer-logo{display:flex; align-items:center; gap:8px; color:#fff; font-weight:800; font-size:20px; margin-bottom:12px;}
.footer-inner p{font-size:13px; line-height:1.65; margin-bottom:16px; color:#bcdcc6;}
.socials{display:flex; gap:12px;}
.socials a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; transition:0.2s;}
.socials a:hover{background:var(--orange); transform:translateY(-2px);}
.newsletter{display:flex; margin-top:10px; border-radius:30px; overflow:hidden;}
.newsletter input{flex:1; padding:12px 16px; border:none; font-size:13px;}
.newsletter button{background:var(--orange); color:#fff; border:none; padding:0 20px; font-weight:800; cursor:pointer; transition:0.15s;}
.newsletter button:hover{background:var(--orange-dark);}
.payments{display:flex; gap:10px; margin-top:16px; font-size:23px;}
.footer-bottom{text-align:center; padding-top:26px; margin-top:26px; border-top:1px solid rgba(255,255,255,0.12); font-size:12px; color:#9fc4ab;}

.toast-msg{position:fixed; top:20px; right:20px; background:var(--green-dark); color:#fff; padding:15px 22px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); z-index:2000; display:flex; align-items:center; gap:10px; transform:translateX(120%); transition:transform 0.3s ease;}
.toast-msg.show{transform:translateX(0);}

@media(max-width:760px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--green); padding:6px 0; gap:0; box-shadow:0 10px 24px rgba(0,0,0,0.15); z-index:400;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 20px; border-bottom:1px solid rgba(255,255,255,0.08);}
  .nav-hamburger{display:block; margin-left:auto;}
  .nav-inner{position:relative;}
}
@media(max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{width:100%; position:static; max-height:none; overflow:visible;}
  .hero{flex-direction:column; text-align:center;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .checkout-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .topbar{flex-direction:column; align-items:center; gap:8px; padding:12px 20px; text-align:center;}
  .topbar-left{text-align:center; justify-content:center;}
  .topbar-right{justify-content:center; gap:14px 20px; row-gap:8px;}
  .header-actions{gap:16px;}
  .hero-text h1{font-size:30px;}
}

/* Homepage product sections */
.section-head{display:flex; justify-content:space-between; align-items:center; margin:40px 0 20px;}
.section-head h2{font-size:22px; font-weight:800; color:var(--text);}
.section-head a{color:var(--green); font-weight:700; font-size:13px;}
.section-head a:hover{color:var(--green-dark);}

.product-img img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm);}
.cart-item-icon img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}