@media screen and (max-width: 767px) {
    
    /* Reseta a tabela para blocos */
    #VendasItensList_datagrid, 
    #VendasItensList_datagrid thead, 
    #VendasItensList_datagrid tbody {
        display: block;
        width: 100% !important;
    }

    /* Esconde o cabeçalho original */
    #VendasItensList_datagrid thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Transforma a linha (tr) em um Card e ativa o Flexbox em grade */
    #VendasItensList_datagrid tr {
        display: flex;
        flex-wrap: wrap; /* Permite que os itens "quebrem" para a linha de baixo */
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        padding: 5px;
        box-sizing: border-box;
        
        /* Centraliza verticalmente todos os itens flexíveis (id, produto, icon, etc) */
        align-items: center; 
    }

    /* Configuração padrão de cada célula (td) */
    #VendasItensList_datagrid td {
        box-sizing: border-box;
        border: none;
        padding: 5px !important;
        
        /* Empilha o Rótulo em cima e o Valor embaixo */
        display: flex;
        flex-direction: column; 
        align-items: flex-start !important; /* Padrão alinhado à esquerda */
        text-align: left !important;
        
        /* Previne que o conteúdo force a largura */
        flex-shrink: 0; 
    }

    /* --- DEFINIÇÃO DAS LARGURAS E ALINHAMENTOS --- */
    
    /* Linha 1 do Card: Id (25%) + Produto (75%) - Mantém à esquerda */
    #VendasItensList_datagrid td:nth-of-type(1) { 
        width: 25% !important; 
        border-bottom: 1px solid #eee; 
    }
    #VendasItensList_datagrid td:nth-of-type(2) { 
        width: 75% !important; 
        border-bottom: 1px solid #eee; 
    }
    
    /* Linha 2 do Card: Qtd, Unit, Total e Ação (25% cada) */
    
    /* Qtd - Alinhado à direita */
    #VendasItensList_datagrid td:nth-of-type(3) { 
        width: 25% !important; 
        align-items: flex-end !important; /* Joga para a direita */
        text-align: right !important; 
    }
    
    /* Unit - Alinhado à direita */
    #VendasItensList_datagrid td:nth-of-type(4) { 
        width: 30% !important; 
        align-items: flex-end !important; 
        text-align: right !important; 
    }
    
    /* Total - Alinhado à direita */
    #VendasItensList_datagrid td:nth-of-type(5) { 
        width: 35% !important; 
        align-items: flex-end !important; 
        text-align: right !important; 
    }

    /* Nova coluna Ação - Centralizada verticalmente no fim do card */
    #VendasItensList_datagrid td:nth-of-type(6) { 
        width: 5% !important; 
        align-items: center !important;  /* Centraliza horizontalmente */
        text-align: center !important; 
        border-bottom: 0; /* Remove borda inferior na última célula */
    }

    /* Estilo para aumentar o tamanho do ícone */
    /* #VendasItensList_datagrid .large-icon {
        font-size: 1.5rem; 
        display: block; 
    } */

    /* Estilo para os rótulos gerados */
    #VendasItensList_datagrid td::before {
        font-size: 0.75em;
        text-transform: uppercase;
        color: #888;
        font-weight: bold;
        margin-bottom: 4px;
        display: block; /* Garante que o rótulo ocupe sua própria linha */
    }

    /* Injeção dos nomes das colunas */
    #VendasItensList_datagrid td:nth-of-type(1)::before { content: "Id"; }
    #VendasItensList_datagrid td:nth-of-type(2)::before { content: "Produto"; }
    #VendasItensList_datagrid td:nth-of-type(3)::before { content: "Qtd"; }
    #VendasItensList_datagrid td:nth-of-type(4)::before { content: "Unit"; }
    #VendasItensList_datagrid td:nth-of-type(5)::before { content: "Total"; }
    
    /* Novo rótulo para a coluna de ação (se desejar mostrar) */
    #VendasItensList_datagrid td:nth-of-type(6)::before { content: ""; } /* Pode deixar vazio ou colocar content: "Ação" */
}