*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

body{
background:#f8f9fa;
color:#1a202c;
}

/* ==================================================
   🌿 HEADER ECOGARDEN
==================================================*/
.topo{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 18px;
background:linear-gradient(135deg,#15803d,#16a34a);
position:sticky;
top:0;
z-index:1000;
box-shadow:0 4px 16px rgba(0,0,0,0.08);
}

.logo-area{
display:flex;
align-items:center;
}

.logo-text{
font-size:24px;
font-weight:900;
color:#ffffff;
letter-spacing:1px;
}

.topo nav{
display:flex;
align-items:center;
gap:16px;
flex-wrap:nowrap;
}

.topo nav a{
color:#ffffff;
text-decoration:none;
font-weight:600;
font-size:14px;
transition:.2s;
white-space:nowrap;
}

.topo nav a:hover{
opacity:.8;
}


/* ==================================================
   🛒 BOTÃO CARRINHO FLOAT CENTRAL
==================================================*/
.cart-btn{
position:fixed;
top:50%;
right:16px;
bottom:auto;
transform:translateY(-50%);
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#15803d;
border-radius:50%;
box-shadow:0 12px 30px rgba(0,0,0,0.2);
z-index:9999;
}

/* ==================================================
   HERO
==================================================*/
.hero{
padding:40px 16px;
text-align:center;
background:#e8f9ee;
}

.hero h1{
font-size:26px;
margin:10px 0;
}

/* ==================================================
PRODUTOS
==================================================*/
.produtos{
padding:32px 16px;
}

.produtos-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:18px;
}

/* 🔥 CARD PADRÃO */
.produto-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:.2s;
display:flex;
flex-direction:column;
height:100%;
}

.produto-card:hover{
transform:translateY(-4px);
}

/* 🔥 CONTAINER DA IMAGEM SUPER ALINHADO */
.produto-img{
width:100%;
height:170px;
background:#f5f5f5;
display:grid;
place-items:center;
overflow:hidden;
}

/* 🔥 IMAGEM COM ALINHAMENTO ABSOLUTO */
.produto-img img{
max-width:85%;
max-height:85%;
width:auto;
height:auto;
object-fit:contain;
display:block;
}

/* ==================================================
INFO PRODUTO
==================================================*/
.produto-info{
padding:16px;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.produto-info h3{
font-size:16px;
margin-bottom:6px;
min-height:38px; /* mantém altura padrão */
}

.preco{
margin:6px 0;
font-weight:700;
font-size:15px;
}

.estoque{
font-size:13px;
color:#15803d;
margin-bottom:10px;
font-weight:600;
}
/* ==================================================
   BOTÕES
==================================================*/
.btn-comprar{
width:100%;
padding:12px;
border-radius:999px;
background:#15803d;
color:#ffffff;
border:none;
cursor:pointer;
font-weight:600;
transition:.2s;
}

.btn-comprar:hover{
background:#166534;
}

.btn-comprar:active{
transform:scale(.96);
}

.btn-esgotado{
width:100%;
padding:12px;
border-radius:999px;
background:#dddddd;
border:none;
color:#666;
}

/* ==================================================
   BOX (LOGIN / CARRINHO)
==================================================*/
.box{
max-width:520px;
margin:20px auto;
padding:14px;
background:#ffffff;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.box input,
.checkout input,
.checkout select{
width:100%;
padding:14px;
border-radius:12px;
border:1px solid #ddd;
font-size:15px;
}

/* ==================================================
   ITENS CARRINHO
==================================================*/
.item{
display:flex;
gap:12px;
align-items:center;
background:#ffffff;
padding:10px;
border-radius:12px;
margin-bottom:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.item img{
border-radius:10px;
width:70px;
height:70px;
object-fit:contain;
}

.item-info{
flex:1;
}

.qtd-control{
display:flex;
align-items:center;
gap:6px;
margin-top:6px;
}

.qtd-btn{
border:none;
background:#15803d;
color:#ffffff;
width:28px;
height:28px;
border-radius:8px;
font-weight:700;
cursor:pointer;
}

.remove-btn{
background:#ff4444;
color:#ffffff;
border:none;
border-radius:8px;
padding:4px 8px;
font-size:12px;
cursor:pointer;
}

/* ==================================================
   CHECKOUT
==================================================*/
.checkout{
max-width:600px;
margin:20px auto;
padding:14px;
}

.checkout form{
display:flex;
flex-direction:column;
gap:12px;
}

/* ==================================================
   ENTREGA / PIX
==================================================*/
.opcoes-entrega{
display:flex;
gap:10px;
}

.opcao-btn{
flex:1;
padding:14px;
border-radius:12px;
border:2px solid #15803d;
background:#ffffff;
font-weight:700;
cursor:pointer;
}

.opcao-btn.active{
background:#15803d;
color:#ffffff;
}

.entrega-area{
display:none;
}

.pix-box{
display:none;
background:#e8f9ee;
padding:14px;
border-radius:12px;
font-weight:600;
color:#0b5132;
}

.pix-btn{
margin-top:8px;
padding:10px;
border:none;
background:#15803d;
color:#ffffff;
border-radius:10px;
cursor:pointer;
}

/* ==================================================
   RESPONSIVO
==================================================*/
@media(max-width:480px){

.logo-text{
font-size:20px;
}

.topo nav{
gap:10px;
}

.topo nav a{
font-size:13px;
}

.produtos-grid{
grid-template-columns:repeat(2,1fr);
}

/* 🔥 CARRINHO CENTRAL NO MOBILE */
.cart-btn{
width:52px;
height:52px;
top:50%;
right:12px;
bottom:auto;
transform:translateY(-50%);
}

}
/* ==================================================
   🛒 CARRINHO FLOAT PRO
==================================================*/
.cart-btn{
position:fixed;
top:55%;
right:14px;
transform:translateY(-50%);
width:64px;
height:64px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#16a34a;
color:#fff;
border-radius:20px;
text-decoration:none;
font-size:22px;
box-shadow:0 18px 35px rgba(0,0,0,0.25);
z-index:99999;
transition:.25s;
}

.cart-btn svg{
width:24px;
height:24px;
}

.cart-btn:hover{
transform:translateY(-50%) scale(1.08);
}

.cart-total{
font-size:11px;
font-weight:700;
margin-top:3px;
}

#cart-count{
position:absolute;
top:-6px;
right:-6px;
background:#ff4444;
color:#fff;
border-radius:999px;
padding:3px 7px;
font-size:11px;
font-weight:700;
}

/* esconder ao rolar */
.cart-hide{
opacity:0;
pointer-events:none;
}

/* MOBILE */
@media(max-width:480px){

.cart-btn{
width:56px;
height:56px;
right:10px;
}

}