﻿@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
nav{display:block;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1.5px solid #e0e0dc;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 1.5rem;height:64px;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--green-dark);border-radius:4px;transition:all 0.25s;}
@media(max-width:768px){.hamburger{display:flex;}.nav-links{display:none;}}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700 900;font-display:optional;src:url('/fonts/fraunces-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
--green-dark:#0d3020;
--green-mid:#134930;
--green-light:#1a6040;
--green-pale:#eef4ec;
--amber:#c8922a;
--amber-light:#faf3e8;
--earth:#4b2718;
--earth-light:#f7f0e8;
--white:#ffffff;
--cream:#f7f7f5;
--gray-100:#f2f2f0;
--gray-200:#e0e0dc;
--gray-400:#8a8a84;
--gray-700:#2e2e2a;
--text:#1a1a16;
--radius:2px;
--shadow:0 1px 4px rgba(0,0,0,0.1);
--shadow-lg:0 4px 16px rgba(0,0,0,0.12);
}

body{
font-family:'Inter','Segoe UI',system-ui,sans-serif;
color:var(--text);
background:var(--cream);
line-height:1.6;
}

h1,h2,h3,.display{
font-family:'Fraunces',Georgia,serif;
font-optical-sizing:auto;
}


.top-bar{
background:var(--green-mid);
color:rgba(255,255,255,0.88);
font-size:0.78rem;
font-weight:500;
display:flex;
justify-content:space-between;
align-items:center;
padding:0.4rem 2rem;
gap:1rem;
}

.top-bar a{color:rgba(255,255,255,0.88);text-decoration:none;}
.top-bar a:hover{color:white;}

.top-bar-left{display:flex;gap:1.5rem;align-items:center;}
.top-bar-right{display:flex;gap:1.5rem;align-items:center;}

.top-bar-item{
display:flex;
align-items:center;
gap:5px;
}

.top-bar-item svg{width:13px;height:13px;flex-shrink:0;}


nav{
position:sticky;
top:0;
z-index:100;
background:var(--white);
box-shadow:0 1px 0 var(--gray-200),0 2px 12px rgba(0,0,0,0.06);
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:0 2rem;
height:84px;
}

.nav-logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:var(--green-dark);
}

.nav-logo svg{width:32px;height:32px;}

.nav-logo span{
font-size:1.3rem;
font-weight:700;
letter-spacing:-0.3px;
}

.nav-links{
display:flex;
gap:0.2rem;
list-style:none;
align-items:center;
}

.nav-links>li{position:relative;}

.nav-links>li>a{
color:var(--gray-700);
text-decoration:none;
font-size:1.05rem;
font-weight:500;
transition:color 0.2s,background 0.2s;
padding:0.5rem 0.95rem;
display:flex;
align-items:center;
gap:4px;
border-radius:4px;
}

.nav-links>li>a:hover{color:var(--green-dark);background:var(--gray-100);}

.nav-links>li>a .chevron{
width:12px;
height:12px;
opacity:0.5;
transition:transform 0.2s;
}

.nav-links>li:hover>a .chevron{transform:rotate(180deg);}


.nav-dropdown{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
background:var(--white);
border-radius:4px;
box-shadow:var(--shadow-lg);
min-width:200px;
padding:0.5rem;
padding-top:calc(0.5rem+8px);
margin-top:-8px;
opacity:0;
pointer-events:none;
transition:opacity 0.18s,transform 0.18s;
transform:translateX(-50%) translateY(-6px);
z-index:200;
border:1px solid var(--gray-200);
}

.nav-links>li:hover .nav-dropdown{
opacity:1;
pointer-events:all;
transform:translateX(-50%) translateY(0);
}

.nav-dropdown a{
display:flex;
align-items:center;
gap:10px;
padding:0.6rem 0.8rem;
border-radius:4px;
text-decoration:none;
color:var(--gray-700);
font-size:0.86rem;
font-weight:500;
transition:background 0.15s,color 0.15s;
}

.nav-dropdown a:hover{background:var(--green-pale);color:var(--green-dark);}

.nav-dropdown a svg{width:15px;height:15px;color:var(--green-mid);flex-shrink:0;}

.nav-dropdown-divider{
height:1px;
background:var(--gray-200);
margin:0.3rem 0.5rem;
}

.nav-links a:hover{color:var(--white);}

.nav-right{
display:flex;
align-items:center;
gap:1rem;
}

.btn-cart{
background:transparent;
color:var(--green-dark);
border:2px solid var(--green-dark);
border-radius:4px;
padding:0.42rem 0.75rem;
font-size:0.82rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:background 0.2s,color 0.2s;
position:relative;
}

.btn-cart:hover{background:var(--green-dark);color:#fff;}
.btn-cart:hover .cart-badge{background:var(--amber);color:var(--green-dark);}

.cart-badge{
background:var(--green-dark);
color:white;
border-radius:50%;
width:20px;
height:20px;
font-size:0.72rem;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}


.hero{
background:var(--green-dark);
color:var(--white);
min-height:unset;
display:grid;
grid-template-columns:1fr;
position:relative;
overflow:hidden;
}

.hero-bg-pattern{
position:absolute;
inset:0;
background-image:url('images/stock/hero-right.avif');
background-size:cover;
background-position:center;
opacity:0.22;
pointer-events:none;
z-index:1;
}

.hero-content{
padding:30px 4rem 30px 5vw;
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
z-index:2;
}

.hero-right{
position:relative;
overflow:hidden;
}

.hero-right::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to right,var(--green-dark) 0%,rgba(11,33,22,0.3) 50%,transparent 100%);
z-index:1;
}

.hero-right-img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.7;
display:block;
}

.hero-right-overlay{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:3rem;
}

.hero-b2b-cards{
display:flex;
flex-direction:column;
gap:0.6rem;
}

.hero-b2b-card{
background:rgba(255,255,255,0.06);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
border-radius:4px;
padding:0.9rem 1.1rem;
display:flex;
align-items:center;
gap:0.9rem;
}

.hero-b2b-icon{
width:36px;height:36px;
background:rgba(200,151,58,0.15);
border:1px solid rgba(200,151,58,0.3);
border-radius:4px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}

.hero-b2b-icon svg{width:16px;height:16px;color:var(--amber);}
.hero-b2b-title{font-size:0.88rem;font-weight:700;color:white;font-family:'Inter',sans-serif;}
.hero-b2b-sub{font-size:0.74rem;color:rgba(255,255,255,0.5);font-family:'Inter',sans-serif;}

.hero-top-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(200,151,58,0.12);
border:1px solid rgba(200,151,58,0.35);
color:var(--amber);
border-radius:4px;
padding:0.4rem 1rem;
font-size:0.72rem;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:1.8rem;
width:fit-content;
font-family:'Inter',sans-serif;
}

.hero h1{
font-size:clamp(3rem,5vw,5rem);
font-weight:900;
line-height:1.0;
margin-bottom:1.4rem;
letter-spacing:-1.5px;
}

.hero h1 em{
font-style:italic;
color:var(--amber);
}

.hero p{
font-size:1.05rem;
color:rgba(255,255,255,0.65);
margin-bottom:2.5rem;
line-height:1.8;
max-width:460px;
}

.hero-ctas{
display:flex;
gap:1rem;
flex-wrap:wrap;
margin-bottom:3rem;
align-items:center;
}

.hero-qualifies{
display:flex;
flex-direction:column;
gap:0.7rem;
padding-top:2rem;
border-top:1px solid rgba(255,255,255,0.08);
}

.hero-qualifies-label{
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.5px;
color:rgba(255,255,255,0.3);
font-family:'Inter',sans-serif;
}

.hero-qualifies-tags{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
}

.hero-qualifies-tags span{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:4px;
padding:0.28rem 0.7rem;
font-size:0.74rem;
color:rgba(255,255,255,0.6);
font-weight:500;
font-family:'Inter',sans-serif;
letter-spacing:0.3px;
}

.hero-proof{
display:flex;
align-items:center;
gap:0.8rem;
flex-wrap:wrap;
}

.hero-proof-avatars{
display:flex;
}

.hero-proof-avatars span{
width:32px;
height:32px;
border-radius:50%;
border:2px solid var(--green-dark);
background:var(--green-mid);
display:flex;
align-items:center;
justify-content:center;
font-size:0.65rem;
font-weight:700;
color:white;
margin-left:-8px;
}

.hero-proof-avatars span:first-child{margin-left:0;}

.hero-proof-text{
font-size:0.82rem;
color:rgba(255,255,255,0.6);
line-height:1.4;
}

.hero-proof-text strong{color:rgba(255,255,255,0.9);}

.btn-primary{
background:var(--amber);
color:var(--green-dark);
border:none;
border-radius:4px;
padding:0.82rem 1.8rem;
font-size:0.9rem;
font-weight:700;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:background 0.2s,transform 0.15s;
letter-spacing:0.2px;
}

.btn-primary:hover{background:#d4a030;transform:translateY(-2px);}

.btn-outline{
background:transparent;
color:rgba(255,255,255,0.85);
border:1.5px solid rgba(255,255,255,0.22);
border-radius:4px;
padding:0.82rem 1.8rem;
font-size:0.9rem;
font-weight:600;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:border-color 0.2s,background 0.2s;
}

.btn-outline:hover{border-color:rgba(255,255,255,0.65);background:rgba(255,255,255,0.07);}

.stat-item{text-align:center;}
.stat-num{font-size:1.8rem;font-weight:800;color:var(--green-light);}
.stat-label{font-size:0.8rem;color:rgba(255,255,255,0.6);margin-top:2px;}

@media (max-width:860px){
.hero{flex-direction:column;min-height:auto;}
.hero-left{max-width:100%;padding:60px 2rem;}
.hero-right{width:100%;height:260px;}
}


.trust-bar{
background:var(--green-dark);
border-top:1px solid rgba(255,255,255,0.06);
border-bottom:1px solid rgba(255,255,255,0.04);
padding:0.75rem 2rem;
display:flex;
justify-content:center;
gap:3rem;
flex-wrap:wrap;
}

.trust-item{
display:flex;
align-items:center;
gap:8px;
font-size:0.95rem;
font-weight:600;
color:rgba(255,255,255,0.8);
letter-spacing:0.3px;
}

.trust-item svg{width:16px;height:16px;flex-shrink:0;color:var(--amber);}


.il-check-sm{display:flex;align-items:center;gap:0.75rem;font-size:0.95rem;color:var(--text);font-weight:600;}
.il-check-md{display:flex;align-items:center;gap:0.75rem;font-size:1rem;color:var(--text);font-weight:600;}
.il-proof-item{display:flex;align-items:center;gap:0.6rem;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,0.92);}
.il-stat-num{font-size:2.4rem;font-weight:500;color:var(--green-dark);line-height:1;}
.il-stat-label{font-size:1rem;color:var(--green-mid);margin-top:0.6rem;font-weight:400;}
.il-wl-card{background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.08);border-radius:4px;padding:0.75rem;}
.il-wl-title{font-weight:700;color:var(--green-dark);margin-bottom:0.2rem;font-size:0.95rem;}
.il-wl-desc{font-size:0.85rem;color:var(--gray-700);line-height:1.5;}
.il-green-heading{color:var(--green-dark);margin-bottom:0.5rem;}
.il-green-heading-lg{color:var(--green-dark);margin:1rem 0 0.5rem;}
.il-prod-thumb{width:90px;height:90px;object-fit:contain;margin-bottom:0.9rem;}
.il-list-indent{margin:0.5rem 0 1rem 1.2rem;}
.il-cover-img{width:100%;height:100%;object-fit:cover;display:block;}
.il-flex-gap{display:flex;gap:1rem;flex-wrap:wrap;}


section{padding:5rem 2rem;}
h2{font-size:clamp(2rem,3vw,2.8rem);}

.section-header{
text-align:center;
max-width:640px;
margin:0 auto 3rem;
}

.section-label{
font-size:1rem;
font-weight:800;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--green-mid);
margin-bottom:1rem;
font-family:'Inter',sans-serif;
}

.section-header h2{
font-size:clamp(2rem,3vw,2.8rem);
font-weight:900;
color:var(--green-dark);
margin-bottom:1rem;
letter-spacing:-0.5px;
line-height:1.08;
}

.section-header p{color:#555550;font-size:1.2rem;line-height:1.75;}


#shop{background:var(--cream);}

.filter-bar{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:2rem;
flex-wrap:wrap;
justify-content:center;
}

.filter-btn{
background:var(--white);
border:1.5px solid var(--gray-200);
border-radius:4px;
padding:0.4rem 1.1rem;
font-size:0.78rem;
font-weight:600;
color:var(--gray-700);
cursor:pointer;
transition:all 0.2s;
letter-spacing:0.5px;
text-transform:uppercase;
font-family:'Inter',sans-serif;
}

.filter-btn.active,.filter-btn:hover{
background:var(--green-dark);
border-color:var(--green-dark);
color:var(--white);
}


.products-grid{
display:block;
max-width:1200px;
margin:0 auto;
}

.brand-section-header{
display:flex;
align-items:center;
gap:1rem;
margin:2.5rem 0 1.25rem;
}
.brand-section-header:first-child{margin-top:0;}
.brand-section-name{
font-size:1rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--green-mid);
white-space:nowrap;
}
.brand-section-line{
flex:1;
height:1px;
background:var(--gray-200);
}
.products-brand-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
}

.product-card{
background:var(--white);
border-radius:4px;
border:1px solid var(--gray-200);
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(0,0,0,0.12);
border-color:var(--green-light);
}

.product-img{
height:260px;
background:#f4f6f2;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.product-img img{
width:100%;
height:100%;
object-fit:contain;
padding:1rem;
display:block;
}

.product-badge{
position:absolute;
top:10px;
left:10px;
background:var(--green-mid);
color:white;
font-size:0.7rem;
font-weight:700;
padding:0.2rem 0.55rem;
border-radius:4px;
text-transform:uppercase;
letter-spacing:0.3px;
}

.product-badge.new{background:var(--earth);}
.product-badge.out{background:var(--gray-400);}

.product-body{padding:1.2rem;flex:1;display:flex;flex-direction:column;}

.product-brand{
font-size:0.72rem;
font-weight:700;
color:var(--green-mid);
text-transform:uppercase;
letter-spacing:0.5px;
margin-bottom:4px;
}

.product-name{
font-size:1rem;
font-weight:700;
color:var(--green-dark);
margin-bottom:6px;
line-height:1.3;
}

.product-desc{
font-size:0.82rem;
color:var(--gray-700);
margin-bottom:0.9rem;
flex:1;
}

.product-meta{
display:flex;
align-items:center;
gap:6px;
margin-bottom:1rem;
}

.meta-tag{
background:var(--gray-200);
border-radius:4px;
padding:0.2rem 0.5rem;
font-size:0.72rem;
font-weight:600;
color:var(--gray-700);
}

.product-footer{
display:flex;
flex-direction:column;
gap:0.75rem;
border-top:1px solid var(--gray-200);
padding-top:1rem;
margin-top:auto;
}

.product-price{
font-size:1.3rem;
font-weight:800;
color:var(--earth);
text-align:center;
}

.product-price small{
font-size:0.72rem;
font-weight:500;
color:var(--gray-400);
display:block;
line-height:1;
}

.btn-add{
background:var(--green-dark);
color:var(--white);
border:none;
border-radius:4px;
padding:0.55rem 1.1rem;
font-size:0.8rem;
font-weight:700;
cursor:pointer;
transition:background 0.2s,transform 0.1s;
white-space:nowrap;
letter-spacing:0.2px;
font-family:'Inter',sans-serif;
width:100%;
}

.btn-add:hover{background:var(--green-mid);transform:scale(1.04);}
.btn-add:disabled{background:var(--gray-200);color:var(--gray-400);cursor:not-allowed;transform:none;}


.tier-pricing{
border:1px solid var(--gray-200);
border-radius:4px;
overflow:hidden;
margin-bottom:1rem;
font-size:0.75rem;
}

.tier-row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
text-align:center;
}

.tier-header{
background:var(--gray-200);
font-weight:700;
color:var(--gray-700);
text-transform:uppercase;
letter-spacing:0.3px;
}

.tier-header div,.tier-row div{
padding:0.3rem 0.4rem;
border-right:1px solid var(--gray-200);
}

.tier-header div:last-child,.tier-row div:last-child{border-right:none;}

.tier-row:not(.tier-header) div{color:var(--gray-700);}
.tier-row:not(.tier-header):nth-child(odd){background:var(--gray-100);}
.tier-best{color:var(--green-mid) !important;font-weight:700;}


#why{
background:#fff;
color:var(--text);
border-top:1px solid var(--gray-200);
border-bottom:1px solid var(--gray-200);
}

.why-inner{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:5rem;
align-items:center;
}

.why-left{display:flex;flex-direction:column;gap:1.25rem;align-items:center;text-align:center;}
.why-left h2{font-size:clamp(2rem,3vw,2.8rem);font-weight:900;color:var(--text);line-height:1.1;margin:0;}
.why-left p{font-size:1.15rem;color:#555550;line-height:1.75;margin:0;}
.why-cta{
display:inline-block;
background:var(--green-mid);
color:#fff;
padding:0.8rem 1.75rem;
font-size:0.95rem;
font-weight:700;
text-decoration:none;
border-radius:50px;
align-self:center;
transition:filter 0.18s,transform 0.18s;
}
.why-cta:hover{filter:brightness(0.92);transform:scale(1.04);}

.why-right{display:flex;flex-direction:column;}

.why-row{
display:flex;
gap:1.25rem;
align-items:flex-start;
padding:1.5rem 0;
border-bottom:1px solid var(--gray-200);
}

.why-row-icon{
width:42px;
height:42px;
background:var(--green-pale);
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.why-row-icon svg{width:20px;height:20px;color:var(--green-mid);stroke-width:2;}

.why-row-title{
font-size:1rem;
font-weight:800;
color:var(--text);
margin-bottom:0.3rem;
font-family:'Inter',sans-serif;
}

.why-row-desc{font-size:0.95rem;color:#555550;line-height:1.7;}


#testimonials{background:var(--cream);}

#testimonials .section-header h2{color:var(--green-dark);}
#testimonials .section-label{color:var(--amber);}
#testimonials .section-header p{color:var(--gray-400);}

.testimonials-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1.5rem;
max-width:1000px;
margin:0 auto;
}

.testimonial-card{
background:var(--white);
border:1px solid var(--gray-200);
border-radius:4px;
padding:1.8rem;
position:relative;
transition:transform 0.3s cubic-bezier(.22,.68,0,1.2),box-shadow 0.3s,border-color 0.3s;
}

.testimonial-card:hover{
transform:translateY(-5px);
box-shadow:0 16px 40px rgba(0,0,0,0.1);
border-color:var(--green-light);
}

.testimonial-card::before{
content:'"';
position:absolute;
top:1rem;
right:1.5rem;
font-family:'Fraunces',serif;
font-size:5rem;
color:var(--green-pale);
line-height:1;
font-weight:900;
}

.stars{color:var(--amber);font-size:0.85rem;margin-bottom:1rem;letter-spacing:2px;}

.testimonial-card p{
font-size:0.92rem;
color:var(--gray-700);
margin-bottom:1.2rem;
line-height:1.7;
position:relative;
}

.testimonial-author{
display:flex;
align-items:center;
gap:10px;
border-top:1px solid var(--gray-200);
padding-top:1rem;
}

.author-avatar{
width:38px;
height:38px;
border-radius:50%;
background:var(--green-dark);
display:flex;
align-items:center;
justify-content:center;
font-size:0.82rem;
font-weight:700;
color:white;
flex-shrink:0;
}

.author-name{font-size:0.88rem;font-weight:700;color:var(--green-dark);}
.author-role{font-size:0.75rem;color:var(--gray-400);}


.wholesale-cta-section{display:grid;grid-template-columns:1fr 500px;height:340px;align-items:stretch;gap:0;}
.wholesale-cta{
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:1.25rem;
padding:2rem 3rem;
height:100%;
box-sizing:border-box;
}
.wholesale-cta-img{overflow:hidden;}
.wholesale-cta-img img{width:100%;height:100%;object-fit:cover;display:block;}

.wholesale-cta-icon{
width:56px;height:56px;flex-shrink:0;
background:var(--green-pale);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.wholesale-cta-icon svg{width:28px;height:28px;color:var(--green-mid);}
.wholesale-cta-text{display:flex;align-items:center;gap:1.5rem;flex:1;min-width:280px;}

.wholesale-cta h3{font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:900;color:var(--green-dark);margin-bottom:0.6rem;line-height:1.15;}
.wholesale-cta p{font-size:1.15rem;color:var(--gray-700);line-height:1.7;max-width:480px;}

.btn-earth{
background:var(--green-mid);transition:filter 0.18s,transform 0.18s;
color:var(--white);
border:none;
border-radius:50px;
padding:0.75rem 1.6rem;
font-size:0.95rem;
font-weight:700;
cursor:pointer;
white-space:nowrap;
text-decoration:none;
display:inline-block;
}

.btn-earth:hover{filter:brightness(0.92);transform:scale(1.04);}


footer{
background:var(--green-dark);
color:rgba(255,255,255,0.65);
padding:3rem 2rem 1.5rem;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:2.5rem;
max-width:1200px;
margin:0 auto 2.5rem;
}

.footer-brand p{font-size:1rem;margin-top:0.8rem;max-width:260px;line-height:1.6;}

.footer-col h4{
font-size:0.95rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--white);
margin-bottom:1rem;
}

.footer-col a{
display:block;
color:rgba(255,255,255,0.6);
text-decoration:none;
font-size:1rem;
margin-bottom:0.5rem;
transition:color 0.2s;
}

.footer-col a:hover{color:var(--white);}

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:1.5rem;
text-align:center;
font-size:0.95rem;
max-width:1100px;
margin:0 auto;
}


.cart-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
z-index:200;
opacity:0;
pointer-events:none;
transition:opacity 0.25s;
}

.cart-overlay.open{opacity:1;pointer-events:all;}

.cart-drawer{
position:fixed;
top:0;
right:-420px;
width:420px;
max-width:95vw;
height:100vh;
background:var(--white);
z-index:201;
display:flex;
flex-direction:column;
transition:right 0.3s cubic-bezier(0.4,0,0.2,1);
box-shadow:var(--shadow-lg);
}

.cart-drawer.open{right:0;}

.cart-header{
padding:1.4rem 1.5rem;
border-bottom:1px solid var(--gray-200);
display:flex;
align-items:center;
justify-content:space-between;
}

.cart-header h3{font-size:1.05rem;font-weight:700;color:var(--green-dark);}

.btn-close{
background:none;
border:none;
font-size:1.4rem;
cursor:pointer;
color:var(--gray-700);
line-height:1;
padding:4px;
}

.cart-items{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;}

.cart-empty{
text-align:center;
padding:3rem 1rem;
color:var(--gray-400);
}

.cart-empty svg{width:48px;height:48px;margin-bottom:1rem;opacity:0.4;}
.cart-empty p{font-size:0.9rem;}

.cart-item{
display:flex;
align-items:center;
gap:12px;
padding:0.9rem 0;
border-bottom:1px solid var(--gray-200);
}

.cart-item-thumb{
width:56px;
height:56px;
background:var(--green-pale);
border-radius:4px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
overflow:hidden;
}
.cart-item-thumb img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

.cart-item-info{flex:1;}
.cart-item-name{font-size:0.88rem;font-weight:700;color:var(--green-dark);}
.cart-item-sub{font-size:0.75rem;color:var(--gray-400);}

.cart-item-qty{
display:flex;
align-items:center;
gap:8px;
}

.qty-btn{
width:26px;
height:26px;
border-radius:4px;
border:1.5px solid var(--gray-200);
background:var(--white);
cursor:pointer;
font-size:1rem;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
color:var(--gray-700);
transition:all 0.15s;
}

.qty-btn:hover{border-color:var(--green-mid);color:var(--green-mid);}

.qty-num{font-size:0.9rem;font-weight:700;min-width:20px;text-align:center;}

.cart-item-price{font-size:0.95rem;font-weight:700;color:var(--green-dark);min-width:56px;text-align:right;}

.cart-footer{
padding:1.2rem 1.5rem;
border-top:1px solid var(--gray-200);
}

.cart-subtotal{
display:flex;
justify-content:space-between;
margin-bottom:1rem;
font-weight:600;
}

.cart-subtotal span:last-child{font-size:1.1rem;font-weight:800;color:var(--green-dark);}

.btn-checkout{
width:100%;
background:var(--green-mid);
color:white;
border:none;
border-radius:4px;
padding:0.9rem;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:background 0.2s;
margin-bottom:0.6rem;
}

.btn-checkout:hover{background:var(--green-dark);}

.cart-secure{
text-align:center;
font-size:0.75rem;
color:var(--gray-400);
display:flex;
align-items:center;
justify-content:center;
gap:5px;
}


.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
z-index:300;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.25s;
padding:1rem;
}

.modal-overlay.open{opacity:1;pointer-events:all;}

.modal{
background:var(--white);
border-radius:4px;
width:100%;
max-width:520px;
max-height:90vh;
overflow-y:auto;
box-shadow:var(--shadow-lg);
transform:translateY(20px);
transition:transform 0.3s;
}

.modal-overlay.open .modal{transform:translateY(0);}

.modal-header{
padding:1.4rem 1.6rem;
border-bottom:1px solid var(--gray-200);
display:flex;
align-items:center;
justify-content:space-between;
}

.modal-header h3{font-weight:800;color:var(--green-dark);}

.modal-body{padding:1.6rem;}

.order-summary{
background:var(--gray-100);
border-radius:4px;
padding:1.1rem;
margin-bottom:1.5rem;
}

.order-summary h4{font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-700);margin-bottom:0.8rem;}

.order-line{
display:flex;
justify-content:space-between;
font-size:0.88rem;
margin-bottom:0.4rem;
color:var(--gray-700);
}

.order-line.total{
border-top:1px solid var(--gray-200);
margin-top:0.6rem;
padding-top:0.6rem;
font-weight:800;
color:var(--green-dark);
font-size:1rem;
}

.form-section h4{
font-size:0.82rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--gray-700);
margin-bottom:0.9rem;
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:0.8rem;}
.form-group{margin-bottom:0.8rem;}

.form-group label{
display:block;
font-size:0.8rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:4px;
}

.form-group input,.form-group select{
width:100%;
border:1.5px solid var(--gray-200);
border-radius:4px;
padding:0.55rem 0.75rem;
font-size:0.9rem;
color:var(--text);
background:var(--white);
transition:border-color 0.2s;
font-family:inherit;
}

.form-group input:focus,.form-group select:focus{
outline:none;
border-color:var(--green-mid);
box-shadow:0 0 0 3px rgba(45,106,79,0.1);
}

.card-fields{
border:1.5px solid var(--gray-200);
border-radius:4px;
overflow:hidden;
margin-bottom:0.8rem;
}

.card-field{
padding:0.7rem 0.9rem;
display:flex;
align-items:center;
gap:10px;
border-bottom:1.5px solid var(--gray-200);
}

.card-field:last-child{border-bottom:none;}
.card-field-row{display:flex;}
.card-field-row .card-field{flex:1;}
.card-field-row .card-field:first-child{border-right:1.5px solid var(--gray-200);}

.card-field svg{width:18px;height:18px;color:var(--gray-400);flex-shrink:0;}

.card-field input{
border:none;
outline:none;
font-size:0.9rem;
width:100%;
font-family:inherit;
color:var(--text);
}

.card-icons{display:flex;gap:6px;margin-bottom:1rem;}

.card-icon{
height:24px;
padding:0 6px;
background:var(--gray-200);
border-radius:4px;
display:flex;
align-items:center;
font-size:0.7rem;
font-weight:700;
color:var(--gray-700);
}

.stripe-note{
display:flex;
align-items:center;
gap:6px;
font-size:0.75rem;
color:var(--gray-400);
margin-bottom:1.2rem;
}

.btn-pay{
width:100%;
background:var(--green-mid);
color:white;
border:none;
border-radius:4px;
padding:0.9rem;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:background 0.2s;
}

.btn-pay:hover{background:var(--green-dark);}

.success-state{
text-align:center;
padding:2.5rem 1.5rem;
display:none;
}

.success-icon{
width:64px;
height:64px;
background:var(--green-pale);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 1.2rem;
}

.success-icon svg{width:32px;height:32px;color:var(--green-mid);}

.success-state h3{font-size:1.3rem;font-weight:800;color:var(--green-dark);margin-bottom:0.5rem;}
.success-state p{color:var(--gray-700);font-size:0.9rem;}


.scroll-top{
position:fixed;
bottom:2rem;
right:2rem;
width:44px;
height:44px;
background:var(--green-mid);
color:white;
border:none;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow);
opacity:0;
transform:translateY(10px);
transition:opacity 0.3s,transform 0.3s;
z-index:50;
}

.scroll-top.visible{opacity:1;transform:translateY(0);}
.scroll-top:hover{background:var(--green-dark);}


.quote-modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
z-index:400;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.25s;
padding:1rem;
}

.quote-modal-overlay.open{opacity:1;pointer-events:all;}

.quote-modal{
background:var(--white);
border-radius:4px;
width:100%;
max-width:560px;
max-height:90vh;
overflow-y:auto;
box-shadow:var(--shadow-lg);
transform:translateY(20px);
transition:transform 0.3s;
}

.quote-modal-overlay.open .quote-modal{transform:translateY(0);}

.quote-modal-header{
background:linear-gradient(135deg,var(--green-dark),var(--green-mid));
padding:1.6rem 2rem;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
}

.quote-modal-header h3{color:white;font-size:1.2rem;font-weight:800;margin-bottom:0.25rem;}
.quote-modal-header p{color:rgba(255,255,255,0.7);font-size:0.84rem;}

.quote-modal-body{padding:1.8rem 2rem;}

.quote-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem;margin-bottom:0.9rem;}
.quote-form-group{margin-bottom:0.9rem;}

.quote-form-group label{
display:block;
font-size:0.8rem;
font-weight:600;
color:var(--gray-700);
margin-bottom:4px;
}

.quote-form-group input,
.quote-form-group select,
.quote-form-group textarea{
width:100%;
border:1.5px solid var(--gray-200);
border-radius:4px;
padding:0.6rem 0.85rem;
font-size:0.9rem;
font-family:inherit;
color:var(--text);
background:var(--white);
transition:border-color 0.2s;
}

.quote-form-group input:focus,
.quote-form-group select:focus,
.quote-form-group textarea:focus{
outline:none;
border-color:var(--green-mid);
box-shadow:0 0 0 3px rgba(45,106,79,0.1);
}

.quote-form-group textarea{resize:vertical;min-height:90px;}

.quote-product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0.5rem;
margin-bottom:0.9rem;
}

.quote-product-check{
display:flex;
align-items:center;
gap:8px;
padding:0.55rem 0.75rem;
border:1.5px solid var(--gray-200);
border-radius:4px;
cursor:pointer;
transition:border-color 0.2s,background 0.2s;
font-size:0.83rem;
font-weight:500;
color:var(--gray-700);
}

.quote-product-check input[type="checkbox"]{accent-color:var(--green-mid);width:15px;height:15px;flex-shrink:0;}
.quote-product-check:has(input:checked){border-color:var(--green-mid);background:var(--green-pale);color:var(--green-dark);font-weight:600;}

.quote-section-label{
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--gray-400);
margin-bottom:0.6rem;
}

.quote-divider{height:1px;background:var(--gray-200);margin:1.2rem 0;}

.btn-quote-submit{
width:100%;
background:var(--green-mid);
color:white;
border:none;
border-radius:4px;
padding:0.85rem;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:background 0.2s;
margin-top:0.5rem;
}

.btn-quote-submit:hover{background:var(--green-dark);}

.quote-success{
text-align:center;
padding:2.5rem 1.5rem;
display:none;
}

.quote-success-icon{
width:64px;
height:64px;
background:var(--green-pale);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 1.2rem;
}

.quote-success-icon svg{width:32px;height:32px;color:var(--green-mid);}
.quote-success h3{font-size:1.3rem;font-weight:800;color:var(--green-dark);margin-bottom:0.5rem;}
.quote-success p{color:var(--gray-700);font-size:0.9rem;line-height:1.6;}


.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
background:none;
border:none;
padding:6px;
}

.hamburger span{
display:block;
width:22px;
height:2px;
background:white;
border-radius:4px;
transition:all 0.25s;
}

.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:var(--green-dark);
z-index:99;
flex-direction:column;
padding:90px 2rem 2rem;
overflow-y:auto;
}

.mobile-menu.open{display:flex;}

.mobile-menu a{
color:rgba(255,255,255,0.85);
text-decoration:none;
font-size:1.1rem;
font-weight:600;
padding:0.9rem 0;
border-bottom:1px solid rgba(255,255,255,0.08);
display:block;
transition:color 0.2s;
}

.mobile-menu a:hover{color:var(--green-light);}

.mobile-menu-section{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:rgba(255,255,255,0.35);
margin:1.2rem 0 0.4rem;
}

.mobile-menu-ctas{
display:flex;
flex-direction:column;
gap:0.7rem;
margin-top:1.5rem;
}

#yt-container{height:100%;}
@media (max-width:1400px){
#who-we-serve{
grid-template-columns:1fr !important;
height:auto !important;
}
#yt-container{
height:240px;
position:relative !important;
}
#who-we-serve>div:last-child{
height:auto !important;
padding:2rem 1.25rem !important;
}
}
@media (max-width:768px){
.footer-grid{grid-template-columns:1fr 1fr;}
.nav-links{display:none;}
.hamburger{display:flex;}
.wholesale-cta{text-align:center;flex-direction:column;align-items:center;padding:2.5rem 1.5rem;}
.wholesale-cta-section{grid-template-columns:1fr;height:auto;gap:0;}
.wholesale-cta-img{display:none;}
.top-bar-left{display:none;}
.quote-form-row{grid-template-columns:1fr;}
.quote-product-grid{grid-template-columns:1fr;}
.hero{flex-direction:column;min-height:unset;}
.hero-content{padding:3rem 1.5rem;max-width:100%;}
.hero-right{width:100%;height:260px;}
.hero-qualifies-tags span{font-size:0.72rem;}


.why-grid{grid-template-columns:1fr;border-radius:4px;}
.why-inner{grid-template-columns:1fr;gap:2.5rem;}
.why-left h2{font-size:1.6rem;}


#who-we-serve{
grid-template-columns:1fr !important;
height:auto !important;
}
#yt-container{
height:240px;
position:relative !important;
}
#who-we-serve>div:last-child{
height:auto !important;
padding:2rem 1.25rem !important;
}
#who-we-serve>div:last-child>div:last-child{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:0.4rem;
}


#white-label{
grid-template-columns:1fr !important;
}
#white-label>div:first-child{
height:240px;
overflow:hidden;
}
#white-label>div:last-child{
padding:2rem 1.5rem !important;
}
#white-label>div:last-child>div[style*="grid-template-columns"]{
grid-template-columns:1fr 1fr !important;
}


/* ── HERO ── */
#hero{
grid-template-columns:1fr !important;
min-height:unset !important;
}
#hero>div:first-child{
padding:2.5rem 1.5rem !important;
justify-content:flex-start !important;
gap:0.75rem;
}
#hero>div:last-child{
height:260px;
overflow:hidden;
}
#root-canvas{
height:calc(100% + 60px) !important;
}

/* ── WHO WE SERVE pumpkin section ── */
section[style*="grid-template-columns:1fr 1fr"]:not(#hero){
grid-template-columns:1fr !important;
}
section[style*="grid-template-columns:1fr 1fr"]:not(#hero)>div:first-child{
padding:2rem 1.25rem !important;
gap:1rem !important;
}
section[style*="grid-template-columns:1fr 1fr"]:not(#hero)>div:last-child{
height:240px;
overflow:hidden;
}
section[style*="grid-template-columns:1fr 1fr"]:not(#hero)>div:last-child img{
width:100%;height:100%;object-fit:cover;display:block;
}


.products-brand-grid{grid-template-columns:1fr 1fr !important;}
#category-cards-wrap>div{grid-template-columns:1fr 1fr !important;}


.section-header h2,.why-left h2{font-size:1.6rem;}
section:not(#who-we-serve):not(#white-label):not([style*="grid-template-columns"]){
padding:3rem 1.25rem;
}


#stats-strip{padding:2.5rem 1.25rem;}
#stats-strip>div{grid-template-columns:1fr 1fr !important;gap:1.5rem !important;}
footer{padding-bottom:80px;}
.scroll-top{bottom:5.5rem !important;}
#plant-type-grid,#method-grid{grid-template-columns:1fr !important;}
}

@media (max-width:480px){
.footer-grid{grid-template-columns:1fr;}
.form-row{grid-template-columns:1fr;}
.products-brand-grid{grid-template-columns:1fr !important;}
#category-cards-wrap>div{grid-template-columns:1fr !important;}
.trust-bar{gap:1rem;}
.resources-grid{grid-template-columns:1fr!important;}
}


/* ─── section ─── */


  .calc-choice {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:1rem 0.75rem; border:2px solid var(--gray-200); border-radius: 2px;
    background:#fff; cursor:pointer; transition:all 0.15s; text-align:center;
    font-family:inherit;
  }
  .calc-choice strong { font-size:0.85rem; color:var(--green-dark); display:block; margin-bottom:2px; }
  .calc-choice small { font-size:0.75rem; color:var(--gray-400); }
  .calc-choice:hover { border-color:var(--green-mid); background:var(--green-pale); }
  .calc-choice.selected { border-color:var(--green-mid); background:var(--green-pale); box-shadow:0 0 0 3px rgba(26,92,56,0.12); }

  .calc-btn-primary {
    background:var(--green-mid); color:#fff; border:none; border-radius: 2px;
    padding:0.75rem 1.6rem; font-size:0.9rem; font-weight:700; cursor:pointer;
    transition:background 0.15s; font-family:inherit;
  }
  .calc-btn-primary:hover:not(:disabled) { background:var(--green-dark); }
  .calc-btn-primary:disabled { opacity:0.4; cursor:not-allowed; }

  .calc-btn-secondary {
    background:var(--gray-100); color:var(--gray-700); border:1.5px solid var(--gray-200);
    border-radius: 2px; padding:0.75rem 1.4rem; font-size:0.9rem; font-weight:600;
    cursor:pointer; transition:background 0.15s; font-family:inherit;
  }
  .calc-btn-secondary:hover { background:var(--gray-200); }

  .calc-step-tab.active { color:#fff !important; border-bottom-color:#fff !important; }
  .calc-step-tab.done { color:rgba(255,255,255,0.9) !important; }

  .calc-result-card {
    border:2px solid var(--green-mid); border-radius: 2px; padding:1.5rem;
    margin-bottom:1rem; background:var(--green-pale);
  }
  .calc-result-secondary {
    border:1.5px solid var(--gray-200); border-radius: 2px; padding:1.2rem;
    margin-bottom:0.75rem; background:#fff;
  }
  .calc-scale-group { margin-bottom:1.2rem; }
  .calc-scale-group input[type=number]::-webkit-inner-spin-button,
  .calc-scale-group input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  .calc-scale-group input[type=number] { -moz-appearance:textfield; }
  .calc-scale-group label { display:block; font-size:0.82rem; font-weight:700; color:var(--gray-700); margin-bottom:6px; }
  .calc-scale-group input, .calc-scale-group select {
    width:100%; border:1.5px solid var(--gray-200); border-radius: 2px;
    padding:0.65rem 0.9rem; font-size:0.95rem; font-family:inherit;
    color:var(--text); background:#fff; transition:border-color 0.2s;
  }
  .calc-scale-group input:focus, .calc-scale-group select:focus {
    outline:none; border-color:var(--green-mid);
    box-shadow:0 0 0 3px rgba(26,92,56,0.1);
  }


/* ─── section ─── */


  .serve-card {
    background:#fff;border:1.5px solid var(--gray-200);border-radius: 2px;
    padding:1.5rem;display:flex;flex-direction:column;gap:0.5rem;
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s, border-color 0.3s;
  }
  .serve-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.09);
    border-color: var(--green-light);
  }
  .serve-icon { width:36px;height:36px;background:var(--green-pale);border-radius: 2px;display:flex;align-items:center;justify-content:center;margin-bottom:0.25rem; }
  .serve-icon svg { width:18px;height:18px;color:var(--green-mid); }
  .serve-title { font-weight:800;color:var(--green-dark);font-size:0.95rem; }
  .serve-detail { font-size:0.83rem;color:var(--gray-400);line-height:1.6; }


/* ─── section ─── */


  /* ── SCROLL REVEAL ── */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.08s; }
  .reveal-delay-2 { transition-delay: 0.16s; }
  .reveal-delay-3 { transition-delay: 0.24s; }
  .reveal-delay-4 { transition-delay: 0.32s; }


  @media (min-width: 768px) {
    #sticky-cta { display: none !important; }
  }

