@media (max-width: 732px) {
    
    /* 1. TRAVA DE SEGURANÇA GERAL */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0; padding: 0;
    }

    body {
        background-color: var(--cor-marrom-forte);
        padding-top: 120px;
        /* Importante: permite que o JS trave o scroll depois */
        overscroll-behavior-y: none; 
    }

    /* 2. CABEÇALHO FIXO */
    header {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        z-index: 999;
        background-color: var(--cor-marrom);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
    }

    header img { display: none; }

    header ul {
        display: flex; flex-direction: row; flex-wrap: wrap;
        justify-content: center; align-items: center;
        gap: 15px; padding: 0; margin: 5px 0; width: 100%;
    }

    header ul li { display: flex !important; align-items: center; gap: 6px; font-size: 0.9rem; }

    .header-search-cart {
        display: flex; justify-content: center; align-items: center;
        gap: 10px; width: 100%; padding: 0 5px;
    }

    .InputBusca { flex: 1; width: auto !important; margin: 0; }

    /* Ícones Mobile */
    .header-search-cart > i, .btn-cart-mobile {
        display: block !important;
        font-size: 24px; color: var(--cor-vermelha);
        padding: 8px; cursor: pointer;
    }

    /* Esconde Sidebar Desktop */
    .carrinho { display: none !important; }

    /* 3. CONTADOR (BADGE) */
    .cart-icon-wrap {
        position: relative; display: flex !important;
        align-items: center; justify-content: center;
        cursor: pointer; padding: 5px;
    }
    .cart-icon-wrap i { font-size: 24px; color: var(--cor-vermelha); }
    #cart-count {
        position: absolute; top: -5px; right: -5px;
        background-color: var(--cor-vermelha); color: white;
        font-size: 0.75rem; font-weight: bold;
        width: 20px; height: 20px;
        border-radius: 50%; border: 2px solid #E6E1C7;
        display: none; align-items: center; justify-content: center;
        z-index: 10;
    }

    /* 4. LISTA DE PRODUTOS */
    .container { display: flex; flex-direction: column; padding: 10px; width: 100%; }
    .lista-produtos {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px; width: 100%;
    }

    .produto {
        width: 100%; margin: 0; padding: 10px 5px;
        display: flex; flex-direction: column;
        align-items: center; text-align: center; justify-content: space-between;
        box-shadow: 0 3px 8px rgba(0,0,0,0.06); border-radius: 10px;
    }

    .produto .thumb {
        width: 100%; aspect-ratio: 1 / 1; height: auto;
        margin: 5px auto 10px auto;
        display: flex; align-items: center; justify-content: center;
    }
    .produto .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

    .produto h3 {
        font-size: 1.1rem; height: 38px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 4px; line-height: 1.1; overflow: hidden;
    }

    .produto .preco-box {
        min-height: 40px; display: flex; flex-direction: column;
        justify-content: center; align-items: center; margin-bottom: 6px;
    }
    .preco-novo { font-size: 0.95rem; line-height: 1.2; }
    .preco-antigo { font-size: 1rem; margin-right: 0; margin-bottom: 2px; }

    .produto .cortes { display: none !important; }
    
    .btn-select-corte {
        display: block; width: 100%; padding: 8px 4px; font-size: 0.75rem;
        background: #f8f8f8; border: 1px solid #ccc; border-radius: 6px;
        margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .produto .qtd-box { width: 100%; justify-content: center; gap: 5px; margin: 5px 0; }
    .produto .input-qtd { width: 40px; padding: 4px; text-align: center; font-size: 0.9rem; }
    .produto .btn-add-prod { width: 100%; font-size: 0.8rem; padding: 10px 5px; margin-top: auto; border-radius: 6px; }

    /* 5. SIDEBAR CARRINHO (CORRIGIDO PARA NÃO ROLAR O FUNDO) */
    .sidebar-cart {
        position: fixed !important;
        top: 0; right: -100%; /* Começa escondido */
        width: 85%; max-width: 400px;
        height: 100% !important; /* Altura total da tela */
        
        display: flex !important;
        flex-direction: column; /* Organiza Topo + Conteúdo */
        
        background: #fff;
        z-index: 99999;
        transition: right 0.3s ease;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    .sidebar-cart.show { right: 0; }

    /* Topo Fixo */
    .sidebar-header {
        flex-shrink: 0; /* Não encolhe */
        padding: 15px;
        background: #f4f4f4;
        border-bottom: 1px solid #ddd;
        display: flex; justify-content: space-between; align-items: center;
    }

    /* Miolo que Rola (Produtos + Inputs + Botão) */
    .sidebar-scroll-content {
        flex: 1; /* Ocupa todo o espaço restante */
        overflow-y: auto !important; /* Cria a rolagem AQUI DENTRO */
        overflow-x: hidden;
        padding: 15px;
        -webkit-overflow-scrolling: touch; /* Rolagem suave no iPhone */
    }

    /* 6. OUTROS ELEMENTOS */
    .filtros { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 5px; }
    .footer-content { flex-direction: column; text-align: center; padding: 0 15px; }
    .footer-section { margin-bottom: 20px; }
    .footer-section h3::after { left: 50%; transform: translateX(-50%); }
    .social-links, .payment-icons { justify-content: center; }
    .footer-section ul { align-items: center; }

    .toast { bottom: 80px; width: 90%; font-size: 0.9rem; padding: 14px 20px; }
    .btn-topo { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 1rem; }

    /* Banner e Modal */
    .banner-carousel { padding: 0 10px; margin-top: 10px; }
    .banner-slide { height: 160px; }
    .banner-texto h2 { font-size: 1.3rem; }
    .modal-produto-content { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
    .modal-produto-header { height: 30vh; }
}