:root{
    --verde:#07812f;
    --verde2:#005d24;
    --verde3:#009c3b;
    --texto:#101114;
    --muted:#8b8f96;
    --fundo:#f3f6f8;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--fundo);
    color:var(--texto);
}
.topo{
    background:linear-gradient(135deg,#006326,#008c38);
    color:white;
    padding:18px 18px 22px;
    border-radius:0;
    box-shadow:none;
}
.topo{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:center;
}
.menu-btn{
    width:132px;
    height:52px;
    border:0;
    border-radius:16px;
    background:rgba(255,255,255,.16);
    color:white;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    gap:9px;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(0,0,0,.12);
}
.menu-btn .menu-linhas{
    display:flex;
    flex-direction:column;
    gap:5px;
    flex-shrink:0;
}
.menu-btn .menu-linhas span{
    width:24px;
    height:3px;
    border-radius:999px;
    background:#fff;
    display:block;
}
.menu-btn .menu-texto{
    font-size:14px;
    font-weight:900;
    line-height:1;
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.25);
    white-space:nowrap;
}
.logo{
    font-size:34px;
    font-weight:900;
    font-style:italic;
    line-height:.95;
    letter-spacing:-1.3px;
    display:inline-flex;
    align-items:flex-end;
    gap:1px;
    text-transform:uppercase;
    color:#fff;
    text-shadow:
        0 2px 0 rgba(0,0,0,.28),
        0 5px 12px rgba(0,0,0,.32),
        1px 1px 0 rgba(255,255,255,.20);
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.logo .logo-numero{
    color:#ff8a00;
    font-size:45px;
    font-weight:1000;
    letter-spacing:-2px;
    margin-left:2px;
    text-shadow:
        0 2px 0 #9b4200,
        0 5px 0 rgba(80,35,0,.35),
        0 9px 16px rgba(0,0,0,.38),
        1px 1px 0 rgba(255,255,255,.35);
}
.logo span:not(.logo-numero){display:none;}
.logo:after{content:"";}
.sub{
    grid-column:2 / -1;
    font-size:15px;
    opacity:1;
    margin-top:-4px;
}
.sub-destaque{
    display:inline-block;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    border-radius:15px;
    padding:8px 10px;
    box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter:blur(4px);
    line-height:1.25;
}
.sub-chamada{
    display:block;
    font-size:13px;
    font-weight:900;
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.25);
    margin-bottom:5px;
}
.sub-info{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.sub-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:#fff;
    color:var(--verde2);
    border-radius:999px;
    padding:4px 8px;
    font-size:12px;
    font-weight:900;
    box-shadow:0 5px 12px rgba(0,0,0,.16);
}
.sub-pill.laranja{
    color:#fff;
    background:linear-gradient(180deg,#ff9d1c,#ff7800);
    text-shadow:0 1px 2px rgba(0,0,0,.24);
}
.banner{
    display:contents;
}
.banner h1,.banner p{display:none}
.acoes-topo{
    grid-row:1 / span 2;
    grid-column:3;
    display:flex;
    gap:18px;
    margin:0;
    align-items:center;
}
.btn{
    border:0;
    border-radius:14px;
    padding:12px 18px;
    font-weight:800;
    text-decoration:none;
    text-align:left;
    font-size:15px;
    box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.btn-whats{
    background:#0bbf50;
    color:white;
    min-width:245px;
} 

.btn-carrinho{
    background:#fff;
    color:var(--verde2);
    min-width:160px;
}
.btn-carrinho:before{content:"🛒 ";}
 .btn-carrinho{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.contador-topo{
    min-width:26px;
    height:26px;
    padding:0 8px;
    border-radius:999px;
    background:var(--verde);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
    line-height:1;
}

.container{
    max-width:1420px;
    margin:0 auto 0;
    padding:0 26px 26px;
}
.filtros{
    background:transparent;
    margin:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
    position:relative;
    top:auto;
    z-index:5;
}
.busca{
    width:100%;
    height:62px;
    border:0;
    border-radius:12px;
    padding:0 18px;
    font-size:18px;
    outline:none;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.busca::placeholder{color:#6f747b}
.categorias{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px 0 0;
}
.cat{
    width:100%;
    text-align:left;
    white-space:nowrap;
    border:1.5px solid #e3eee7;
    background:#f8fbf9;
    color:var(--verde2);
    border-radius:12px;
    padding:16px 18px;
    font-weight:900;
    font-size:16px;
    cursor:pointer;
}
.cat.ativa{
    background:var(--verde);
    color:white;
    box-shadow:0 5px 12px rgba(0,128,48,.18);
}

/* Layout dos produtos igual ao modelo enviado */
.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:12px;
}
.card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 22px rgba(20,35,50,.08);
    border:1px solid #edf1f4;
    padding:20px 20px 18px;
}
.produto-topo{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:26px;
    align-items:start;
    padding-bottom:20px;
    border-bottom:1px solid #eef0f2;
}
.foto{
    width:100%;
    height:130px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.foto img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.info{padding:0}
.categoria{
    font-size:20px;
    font-weight:900;
    color:#08090b;
    text-transform:none;
    margin-bottom:10px;
}
.nome{
    font-size:18px;
    font-weight:400;
    line-height:1.25;
    min-height:60px;
    color:#08090b;
    margin:0 0 14px;
}
.ean{
    font-size:16px;
    color:#9ca0a7;
    margin:0;
}
.produto-meio{
    display:grid;
    grid-template-columns:1fr 132px;
    gap:18px;
    align-items:start;
    margin-top:28px;
}
.preco{
    font-size:22px;
    font-weight:900;
    color:#000;
    margin:0 0 12px;
}
.preco span{font-weight:900}
.obs-preco{
    font-size:18px;
    color:#111;
    line-height:1.45;
}
.caixa-info{
    text-align:left;
    color:#111;
    font-size:18px;
}
.caixa-icone{
    width:68px;
    height:68px;
    border:1.7px solid var(--verde);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 8px;
    overflow:hidden;
    background:#fff;
}
.caixa-icone img{
    width:78%;
    height:78%;
    object-fit:contain;
    display:block;
}
.aprox{
    margin-top:10px;
    font-size:15px;
    white-space:nowrap;
}
.controle-qtd-card{
    margin-top:24px;
    border:2px solid var(--verde);
    border-radius:10px;
    height:58px;
    display:grid;
    grid-template-columns:84px 1fr 84px;
    align-items:center;
    overflow:hidden;
    background:white;
}
.controle-qtd-card button{
    border:0;
    background:white;
    color:var(--verde);
    font-size:32px;
    font-weight:500;
    height:100%;
    cursor:pointer;
}
.controle-qtd-card span{
    text-align:center;
    color:var(--verde);
    font-size:20px;
    font-weight:900;
}
.btn-comprar{
    width:100%;
    margin-top:10px;
    border:0;
    border-radius:9px;
    background:linear-gradient(180deg,#00a83f,#008932);
    color:white;
    padding:14px 12px;
    font-weight:800;
    font-size:21px;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(0,128,48,.18);
}
.btn-comprar:active,.controle-qtd-card button:active{transform:scale(.98)}

.menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.52);
    z-index:30;
}
.menu-overlay.ativo{display:block}
.menu-lateral{
    position:fixed;
    top:0;
    left:0;
    width:82%;
    max-width:340px;
    height:100%;
    background:#fff;
    z-index:31;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 32px rgba(0,0,0,.22);
    padding:18px;
    overflow:auto;
}
.menu-lateral.ativo{transform:translateX(0)}
.menu-lateral-topo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:12px;
    border-bottom:1px solid #edf1f4;
}
.menu-lateral-topo strong{
    color:var(--verde2);
    font-size:22px;
}
.fechar-menu{
    width:42px;
    height:42px;
    border:0;
    border-radius:12px;
    background:#eaf7ef;
    color:var(--verde2);
    font-size:26px;
    font-weight:900;
    cursor:pointer;
}

body.modal-travado{
    overflow:hidden;
    position:fixed;
    width:100%;
    left:0;
    right:0;
}
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:200;
    padding:14px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    overscroll-behavior:contain;
    touch-action:none;
}
.modal.ativo{display:flex;align-items:center;justify-content:center}
.modal-box{
    background:white;
    width:100%;
    max-width:560px;
    margin:0 auto;
    border-radius:24px;
    padding:16px;
    max-height:92dvh;
    overflow-y:auto;
    overflow-x:hidden;
    padding-bottom:26px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:auto;
}
@supports not (height: 100dvh){
    .modal-box{max-height:calc(100vh - 28px)}
}
.item-carrinho{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #eee;
}
.item-carrinho small{display:block;color:#6b7280;margin-top:4px}
.qtd{display:flex;align-items:center;gap:8px}
.qtd button{
    width:30px;
    height:30px;
    border:0;
    border-radius:9px;
    background:#eaf7ef;
    color:var(--verde2);
    font-weight:900;
}
.total{font-size:20px;font-weight:900;margin:14px 0}
.finalizar{
    width:100%;
    background:#25d366;
    color:white;
    border:0;
    border-radius:15px;
    padding:14px;
    font-weight:900;
    font-size:16px;
}
.fechar{
    width:100%;
    background:#fee2e2;
    color:#b91c1c;
    border:0;
    border-radius:15px;
    padding:12px;
    margin-top:8px;
    font-weight:900;
}
.acoes-carrinho{
    position:sticky;
    bottom:0;
    background:#fff;
    padding-top:10px;
    padding-bottom:4px;
    box-shadow:0 -10px 18px rgba(255,255,255,.95);
    z-index:2;
}

.form-cliente{
    margin:14px 0 12px;
    background:#f8fbf9;
    border:1px solid #e2eee6;
    border-radius:18px;
    padding:14px;
}
.form-cliente h3{
    margin:0 0 10px;
    color:var(--verde2);
    font-size:18px;
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 92px;
    gap:10px;
}
.campo-cliente{
    width:100%;
    border:1px solid #d9e4dd;
    border-radius:12px;
    padding:12px 13px;
    font-size:15px;
    outline:none;
    background:#fff;
}
.campo-cliente:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(7,129,47,.10)}
.campo-full{grid-column:1 / -1}
.aviso-cliente{
    display:none;
    color:#b91c1c;
    background:#fee2e2;
    border-radius:12px;
    padding:10px;
    font-weight:800;
    margin:8px 0;
}

.form-pagamento{
    margin:12px 0;
    background:#fff;
    border:1px solid #e2eee6;
    border-radius:18px;
    padding:14px;
}
.form-pagamento h3{
    margin:0 0 10px;
    color:var(--verde2);
    font-size:18px;
}
.pagamento-select{
    width:100%;
    border:1px solid #d9e4dd;
    border-radius:12px;
    padding:13px;
    font-size:16px;
    font-weight:900;
    color:#123;
    background:#f8fbf9;
    outline:none;
}
.pagamento-select:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(7,129,47,.10)}
.info-pix,.troco-box{
    display:none;
    margin-top:10px;
    border-radius:12px;
    padding:10px;
    font-weight:800;
}
.info-pix{
    background:#eaf7ef;
    color:var(--verde2);
}
.troco-box{
    background:#fff8e1;
    color:#704800;
}
.troco-box input{
    width:100%;
    margin-top:8px;
    border:1px solid #ead79c;
    border-radius:12px;
    padding:12px 13px;
    font-size:15px;
    outline:none;
    background:#fff;
}
@media(max-width:430px){.form-pagamento{padding:12px}}


.confirmacao-pedido{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.58);
    z-index:300;
    padding:16px;
    align-items:center;
    justify-content:center;
    overscroll-behavior:contain;
    touch-action:none;
}
.confirmacao-pedido.ativo{display:flex}
.confirmacao-box{
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:22px;
    padding:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.28);
}
.confirmacao-box h3{
    margin:0 0 8px;
    color:var(--verde2);
    font-size:21px;
}
.confirmacao-box p{
    margin:0 0 14px;
    color:#555;
    line-height:1.35;
}
.btn-confirmacao{
    width:100%;
    border:0;
    border-radius:14px;
    padding:13px;
    font-size:15px;
    font-weight:900;
    margin-top:8px;
    cursor:pointer;
}
.btn-revisar{background:#eaf7ef;color:var(--verde2)}
.btn-continuar{background:#25d366;color:#fff}
.btn-cancelar{background:#fee2e2;color:#b91c1c}

.cupom-preview{
    display:none;
    width:100%;
    min-height:160px;
    margin:12px 0 0;
    border:1px dashed #aac9b4;
    border-radius:12px;
    padding:10px;
    font-family:monospace;
    font-size:13px;
    white-space:pre-wrap;
    background:#fff;
}
@media(max-width:430px){.form-grid{grid-template-columns:1fr 86px}.campo-cliente{font-size:14px;padding:11px}}
.vazio{text-align:center;padding:40px 10px;color:var(--muted)}
.rodape-info{
    text-align:center;
    color:#70757d;
    font-size:14px;
    padding:0 16px 20px;
}

.toast-carrinho{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.92);
    background:rgba(0,93,36,.96);
    color:#fff;
    padding:18px 22px;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.28);
    z-index:9999;
    font-size:18px;
    font-weight:900;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:.22s ease;
    width:calc(100% - 44px);
    max-width:360px;
}
.toast-carrinho.ativo{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}
.rodape-m12{
    margin:16px auto 0;
    padding:22px 16px 28px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#005d24,#07812f);
    font-size:10px;
    line-height:1.6;
}
.rodape-m12 strong{font-size:14px;display:block;margin-bottom:4px}
.rodape-m12 a{color:#fff;text-decoration:none;font-weight:900}

@media(max-width:820px){
    .topo{
        grid-template-columns:auto 1fr;
        padding:14px 14px 16px;
    }
    .logo{font-size:29px}
    .logo .logo-numero{font-size:38px}
    .menu-btn{width:126px;height:46px;border-radius:14px}
    .logo{grid-column:2;font-size:29px}
    .sub{grid-column:1 / -1;font-size:14px;margin-top:0}
    .sub-destaque{display:block;padding:7px 9px;border-radius:14px}
    .sub-info{gap:5px}
    .sub-pill{font-size:11px;padding:4px 7px}
    .acoes-topo{
        grid-row:auto;
        grid-column:1 / -1;
        width:100%;
        gap:10px;
        align-items:center;
    }
    .acoes-topo .btn{
        flex:1;
        min-width:0;
        height:44px;
        padding:0 12px;
        font-size:14px;
        border-radius:16px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
    .acoes-topo .contador-topo{
        width:28px;
        min-width:28px;
        height:28px;
        padding:0;
        font-size:13px;
    }
    .container{
        margin-top:0;
        padding:0 12px 20px;
    }
    .busca{
        height:54px;
        font-size:16px;
        padding:0 16px;
        border-radius:10px;
    }
    .categorias{
        gap:10px;
        padding:18px 0 8px;
    }
    .cat{
        padding:13px 17px;
        font-size:14px;
    }
    .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
}
@media(max-width:430px){
    .card{
        padding:18px 18px 16px;
        border-radius:14px;
    }
    .produto-topo{
        grid-template-columns:39% 1fr;
        gap:14px;
        padding-bottom:15px;
    }
    .foto{height:118px}
    .categoria{font-size:20px}
    .nome{
        font-size:19px;
        min-height:auto;
        margin-bottom:10px;
    }
    .ean{font-size:13px}
    .produto-meio{
        grid-template-columns:1fr 104px;
        gap:10px;
        margin-top:20px;
    }
    .preco{font-size:23px}
    .obs-preco{font-size:16px}
    .caixa-info{font-size:16px}
    .caixa-icone{
        width:60px;
        height:60px;
    }
    .aprox{font-size:13px}
    .controle-qtd-card{
        margin-top:20px;
        height:52px;
        grid-template-columns:60px 1fr 60px;
    }
    .controle-qtd-card button{font-size:30px}
    .btn-comprar{font-size:20px}
}

/* Card limpo: remove textos extras e deixa mais compacto */
.card{padding:18px 18px 16px;}
.produto-topo{grid-template-columns:120px 1fr;gap:14px;padding-bottom:14px;}
.foto{height:120px;}
.nome{font-size:18px;font-weight:800;line-height:1.2;min-height:64px;margin:0;color:#08090b;}
.produto-meio-limpo{display:block;margin-top:12px;}
.produto-meio-limpo .preco{font-size:24px;margin:0;font-weight:900;color:#000;}
@media(max-width:430px){
    .produto-topo{grid-template-columns:36% 1fr;gap:12px;}
    .foto{height:105px;}
    .nome{font-size:17px;min-height:auto;}
    .produto-meio-limpo .preco{font-size:22px;}
}



/* Ajuste solicitado: imagem maior, textos e controles menores */
.card{padding:14px 14px 13px;}
.produto-topo{grid-template-columns:145px 1fr;gap:12px;padding-bottom:10px;align-items:center;}
.foto{height:150px;}
.nome{font-size:15px;font-weight:800;line-height:1.15;min-height:52px;margin:0;color:#08090b;}
.produto-meio-limpo{margin-top:8px;}
.produto-meio-limpo .preco{font-size:21px;margin:0;font-weight:900;color:#000;}
.controle-qtd-card{margin-top:12px;height:44px;grid-template-columns:52px 1fr 52px;border-radius:9px;}
.controle-qtd-card button{font-size:24px;}
.controle-qtd-card span{font-size:17px;}
.btn-comprar{margin-top:8px;padding:10px 10px;font-size:16px;border-radius:8px;}
.toast-carrinho{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.92);
    background:rgba(0,93,36,.96);
    color:#fff;
    padding:18px 22px;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.28);
    z-index:9999;
    font-size:18px;
    font-weight:900;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:.22s ease;
    width:calc(100% - 44px);
    max-width:360px;
}
.toast-carrinho.ativo{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}
.rodape-m12{
    margin:16px auto 0;
    padding:22px 16px 28px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#005d24,#07812f);
    font-size:10px;
    line-height:1.6;
}
.rodape-m12 strong{font-size:14px;display:block;margin-bottom:4px}
.rodape-m12 a{color:#fff;text-decoration:none;font-weight:900}

@media(max-width:820px){
    .produto-topo{grid-template-columns:135px 1fr;}
    .foto{height:140px;}
    .nome{font-size:15px;min-height:48px;}
}
@media(max-width:430px){
    .card{padding:12px;}
    .produto-topo{grid-template-columns:44% 1fr;gap:10px;}
    .foto{height:138px;}
    .nome{font-size:14px;min-height:auto;}
    .produto-meio-limpo .preco{font-size:20px;}
    .controle-qtd-card{height:42px;grid-template-columns:48px 1fr 48px;margin-top:10px;}
    .controle-qtd-card button{font-size:23px;}
    .btn-comprar{font-size:15px;padding:9px 10px;}
}



/* Ajustes: produtos com nome abaixo da imagem e botões em laranja */
:root{
    --laranja:#ff8a00;
    --laranja2:#e86f00;
    --laranja3:#b94d00;
}
.btn-carrinho{
    background:linear-gradient(180deg,var(--laranja),var(--laranja2)) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 8px 20px rgba(232,111,0,.32), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.contador-topo{
    background:#fff !important;
    color:var(--laranja2) !important;
    box-shadow:0 3px 8px rgba(0,0,0,.16);
}
.produto-topo{
    display:block !important;
    grid-template-columns:none !important;
    padding-bottom:10px !important;
    border-bottom:0 !important;
    text-align:center;
}
.foto{
    width:100% !important;
    height:178px !important;
    margin:0 auto 10px !important;
    background:#fff !important;
}
.foto img{
    max-width:100%;
    max-height:100%;
    object-fit:contain !important;
}
.info{
    padding:0 !important;
}
.nome{
    display:block;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.18 !important;
    min-height:42px !important;
    margin:0 auto !important;
    color:#111 !important;
    text-align:center;
}
.produto-meio-limpo{
    margin-top:8px !important;
    text-align:center;
}
.btn-comprar{
    background:linear-gradient(180deg,var(--laranja),var(--laranja2)) !important;
    box-shadow:0 6px 14px rgba(232,111,0,.30) !important;
    color:#fff !important;
}
.controle-qtd-card{
    border-color:var(--laranja) !important;
}
.controle-qtd-card button,
.controle-qtd-card span{
    color:var(--laranja2) !important;
}
@media(max-width:820px){
    .foto{height:168px !important;}
    .nome{font-size:15.5px !important;min-height:40px !important;}
}
@media(max-width:430px){
    .foto{height:160px !important;margin-bottom:9px !important;}
    .nome{font-size:15px !important;min-height:38px !important;}
    .btn-carrinho{font-size:14px !important;}
}



/* Ajuste final: mantém nome abaixo da imagem, mas volta botões para cores anteriores */
.btn-carrinho{
    background:#fff !important;
    color:var(--verde2) !important;
}
.btn-carrinho .contador-topo{
    background:var(--verde) !important;
    color:#fff !important;
}
.btn-comprar{
    background:linear-gradient(180deg,#00a83f,#008932) !important;
    color:white !important;
    box-shadow:0 6px 14px rgba(0,128,48,.18) !important;
}
.controle-qtd-card{
    border-color:var(--verde) !important;
}
.controle-qtd-card button,
.controle-qtd-card span{
    color:var(--verde) !important;
}



/* Banner de ofertas - 1500x500 responsivo */
.banner-ofertas{
    width:100%;
    max-width:1500px;
    margin:8px auto 10px;
    padding:0 14px;
}
.banner-ofertas img{
    width:100%;
    display:block;
    aspect-ratio:3/1;
    object-fit:contain;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}
@media(max-width:820px){
    .banner-ofertas{padding:0 10px;margin:8px auto 10px;}
    .banner-ofertas img{border-radius:15px;}
}
@media(max-width:480px){
    .banner-ofertas{padding:0 10px;margin:6px auto 8px;}
    .banner-ofertas img{border-radius:12px;}
}

.titulo-produtos{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:12px 4px 10px;
    color:#005d24;
    font-weight:900;
    font-size:18px;
}

.titulo-produtos small{
    background:#eaf7ef;
    color:#07812f;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
}

.sub-produtos{
    color:#6b7280;
    font-size:13px;
    margin:-4px 4px 10px;
}
.cat{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    text-align:left;
    font-size:13px; /* antes era o padrão */
    padding:10px 12px;
}

.cat-icone{
    width:24px;
    text-align:center;
    font-size:16px; /* diminui os ícones */
    flex-shrink:0;
}


.carrinho-flutuante{
    position:fixed;
    right:15px;
    bottom:15px;
    width:50px;
    height:50px;
    border:0;
    border-radius:50%;
    background:#07812f;
    color:#fff;
    font-size:22px;
    font-weight:900;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    z-index:999;
    cursor:pointer;
}

.carrinho-flutuante span{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:999px;
    background:#ff8a00;
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}


/* Ajustes solicitados */
.controle-qtd-card{display:none !important;}
.nome{text-align:left !important; min-height:auto !important;}
.produto-meio-limpo{text-align:left !important;}
.btn-comprar{margin-top:12px !important;}


.contato-link.whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.contato-link.whatsapp i{
    color:#fff !important;
    font-size:20px;
}

/* Correção: botão WhatsApp com formatação original e ícone oficial */
.btn-whats{
    background:#0bbf50 !important;
    color:#fff !important;
    min-width:0 !important;
    width:100% !important;
    flex:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    text-align:center !important;
    text-decoration:none !important;
}
.btn-whats i{
    color:#fff !important;
    font-size:20px !important;
    line-height:1 !important;
}
@media(max-width:380px){
    .menu-btn{width:112px;gap:7px;}
    .menu-btn .menu-texto{font-size:12px;}
    .menu-btn .menu-linhas span{width:21px;}
}



/* =======================================================
   OFERTAS DO DIA - visual melhorado
======================================================= */
.ofertas-box{
    margin:12px 0 16px;
}

.ofertas-titulo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 4px 8px;
    color:#005d24;
    font-weight:900;
    font-size:19px;
}

.ofertas-titulo small{
    background:#fff3cd;
    color:#b45309;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    white-space:nowrap;
}

.ofertas-validade{
    margin:0 4px 10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:1px solid #ffe08a;
    color:#8a4b00;
    border-radius:999px;
    padding:7px 11px;
    font-size:13px;
    font-weight:900;
    box-shadow:0 5px 14px rgba(0,0,0,.06);
}

.ofertas-lista{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
    gap:12px;
}

.oferta-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#fff9df,#ffffff 62%);
    border:1px solid #ffe08a;
    border-radius:18px;
    padding:12px;
    box-shadow:0 9px 22px rgba(0,0,0,.09);
    display:grid;
    grid-template-columns:96px 1fr;
    gap:12px;
    align-items:center;
}

.oferta-card.destaque{
    grid-column:1/-1;
    background:linear-gradient(135deg,#fff1b8,#ffffff 60%);
    border:2px solid #ffc247;
    box-shadow:0 12px 28px rgba(255,138,0,.18);
}

.oferta-img{
    width:96px;
    height:96px;
    background:#fff;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 1px #f0f0f0;
    overflow:hidden;
}

.oferta-img img{
    max-width:92%;
    max-height:92%;
    object-fit:contain;
    display:block;
}

.oferta-conteudo{
    min-width:0;
}

.oferta-selo{
    display:inline-flex;
    align-items:center;
    background:#e53935;
    color:#fff;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    margin-bottom:6px;
    box-shadow:0 4px 10px rgba(229,57,53,.22);
}

.oferta-card strong{
    display:block;
    color:#111;
    font-size:16px;
    line-height:1.16;
    margin-bottom:4px;
    font-weight:900;
}

.oferta-card span{
    display:block;
    color:#6b7280;
    font-size:12px;
    font-weight:700;
}

.oferta-precos{
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:7px;
    margin-top:5px;
}

.oferta-preco-antigo{
    color:#9ca3af !important;
    text-decoration:line-through;
    font-size:14px !important;
    font-weight:900 !important;
    margin:0 !important;
}

.oferta-preco{
    color:#005d24 !important;
    font-size:24px !important;
    line-height:1;
    font-weight:1000 !important;
    margin:0 !important;
}

.oferta-btn{
    width:100%;
    border:0;
    border-radius:13px;
    background:linear-gradient(180deg,#00a83f,#008932);
    color:#fff;
    font-weight:900;
    padding:11px 12px;
    cursor:pointer;
    white-space:nowrap;
    margin-top:10px;
    box-shadow:0 6px 14px rgba(0,128,48,.18);
}

.oferta-btn:active{transform:scale(.98)}

@media(max-width:520px){
    .ofertas-lista{
        grid-template-columns:1fr;
    }

    .oferta-card,
    .oferta-card.destaque{
        grid-template-columns:92px 1fr;
        gap:10px;
        padding:11px;
    }

    .oferta-img{
        width:92px;
        height:92px;
    }

    .oferta-card strong{font-size:15px;}
    .oferta-preco{font-size:22px !important;}
}

@media(max-width:360px){
    .oferta-card,
    .oferta-card.destaque{
        grid-template-columns:1fr;
        text-align:center;
    }
    .oferta-img{margin:0 auto;}
    .oferta-precos{justify-content:center;}
}



/* =======================================================
   MENU DE CATEGORIAS IGUAL AO INDEX MODELO
   Remove menu hambúrguer do topo e exibe categorias horizontais
======================================================= */
.menu-btn,
.menu-overlay,
.menu-lateral{
    display:none !important;
}

.topo{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    text-align:center !important;
    background:#0b6f22 !important;
    padding:22px 12px 18px !important;
}

.logo{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
}

.sub{
    grid-column:auto !important;
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
}

.acoes-topo{
    grid-row:auto !important;
    grid-column:auto !important;
    width:100% !important;
    max-width:760px !important;
    display:flex !important;
    justify-content:center !important;
    gap:10px !important;
    margin:0 auto !important;
}

#tituloMenuCategorias{
    margin:18px 2px 10px !important;
    color:#1d2b22 !important;
    font-size:18px !important;
    font-weight:900 !important;
    text-align:left !important;
}

#categoriasContainer{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:92px !important;
    gap:12px !important;
    overflow-x:auto !important;
    padding:4px 2px 12px !important;
    margin:0 -2px 4px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
}

#categoriasContainer::-webkit-scrollbar{
    display:none !important;
}

.btn-cat{
    min-height:96px !important;
    border:none !important;
    border-radius:24px !important;
    background:#f6f8f3 !important;
    color:#1d2b22 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px 6px !important;
    font-size:11px !important;
    font-weight:900 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.07), inset 0 0 0 1px #e2eadf !important;
    cursor:pointer !important;
    white-space:normal !important;
    text-align:center !important;
}

.btn-cat .cat-icon{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    background:linear-gradient(145deg, #0b7a22, #0ea338) !important;
    display:grid !important;
    place-items:center !important;
    color:white !important;
    font-size:24px !important;
    box-shadow:0 8px 14px rgba(11,122,34,.28) !important;
}

.btn-cat.active-cat{
    background:linear-gradient(180deg, #fff7ce, #fff) !important;
    box-shadow:0 10px 22px rgba(255,166,0,.2), inset 0 0 0 2px #ffc928 !important;
    color:#064d17 !important;
}

.btn-cat.active-cat span:not(.cat-icon){
    color:#064d17 !important;
    text-shadow:none !important;
}

@media(max-width:820px){
    .topo{
        grid-template-columns:none !important;
    }
    .logo{
        grid-column:auto !important;
    }
    .acoes-topo{
        width:100% !important;
    }
}

/* TAMANHO FINAL DO LOGO */
.logo{
    font-size:48px !important;
}

.logo .logo-numero{
    font-size:62px !important;
}

@media(max-width:820px){
    .logo{
        font-size:44px !important;
    }

    .logo .logo-numero{
        font-size:56px !important;
    }
}

@media(max-width:430px){
    .logo{
        font-size:42px !important;
    }

    .logo .logo-numero{
        font-size:52px !important;
    }
}
.filtros{
    margin-top:20px;
}

.rodape-m12{
    margin-top:20px;
    background:linear-gradient(135deg,#005d24,#07812f);
    color:#fff;
    padding:28px 16px;
    text-align:center;
}

.rodape-logo{
    font-size:24px;
    font-weight:900;
    margin-bottom:6px;
}

.rodape-slogan{
    font-size:14px;
    opacity:.9;
    margin-bottom:18px;
}

.rodape-info{
    font-size:13px;
    line-height:1.5;
    margin-bottom:20px;
}

.rodape-redes{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.rede{
    text-decoration:none;
    color:#fff;
    font-weight:700;
    padding:10px 14px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:8px;
}

.whatsapp{
    background:#25D366;
}

.facebook{
    background:#1877F2;
}

.instagram{
    background:linear-gradient(45deg,#833AB4,#E1306C,#F77737);
}

.rodape-contador{
    margin-bottom:12px;
}

.rodape-copy{
    font-size:11px;
    opacity:.8;
}