, th/td usam "flex" pra manter a mesma proporção
* 2:1 que a tabela tinha (rótulo bem mais largo que o valor), exceto a
* linha de Envio, que usa flex-direction:column pra empilhar texto/opções
* de frete e a calculadora de CEP ocupando a largura inteira.
* O CARRINHO não precisa de nada disso (".cart_totals table"): desde que
* frete e cupom saíram de dentro dela, uma tabela de verdade já funciona
* sem truque nenhum. */
#order_review table.woocommerce-checkout-review-order-table {
display: flex;
flex-direction: column;
}
#order_review table.woocommerce-checkout-review-order-table thead,
#order_review table.woocommerce-checkout-review-order-table tbody,
#order_review table.woocommerce-checkout-review-order-table tfoot {
/* !important: o Astra tem ".woocommerce table.shop_table_responsive tr
* { display:block }" com 2 classes (especificidade maior que a nossa 1
* classe) — sem isso, o celular volta pro table/tr de verdade e perde
* o flex das linhas de baixo. */
display: contents !important;
}
#order_review table.woocommerce-checkout-review-order-table tr {
display: flex !important;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid #E7E4EF;
}
#order_review table.woocommerce-checkout-review-order-table tr.cart_item {
align-items: center;
}
#order_review table.woocommerce-checkout-review-order-table tr:last-child {
border-bottom: 0;
}
#order_review table.woocommerce-checkout-review-order-table th,
#order_review table.woocommerce-checkout-review-order-table td {
border-bottom: 0 !important;
}
#order_review table.woocommerce-checkout-review-order-table th {
flex: 2 1 0;
min-width: 0;
}
#order_review table.woocommerce-checkout-review-order-table td {
flex: 1 1 0;
min-width: 0;
}
/* Especificidade igual à regra geral das linhas ("tr { align-items: baseline }"
* acima) — com o seletor curto, ela ganhava e o | com as opções de frete
* ficava do tamanho do conteúdo em vez de ocupar a largura inteira. */
#order_review table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
flex-direction: column;
align-items: stretch;
}
tr.woocommerce-shipping-totals td {
padding-top: 0;
/* O Woo imprime nessa ordem: texto/opções de frete primeiro, calculadora
* de CEP depois — mas faz mais sentido pedir o CEP ANTES de mostrar
* opção nenhuma. display:flex nos filhos deixa reordenar com "order"
* sem mexer no HTML. */
/* !important pelo mesmo motivo de sempre: Astra tem um "display:block"
* pro mesmo td que ganha em telas pequenas sem o reforço. */
display: flex !important;
flex-direction: column;
}
/* order vai no |