/* Checkout, mesma decisão do carrinho: NÃO reescrevemos form-checkout.php. O checkout clássico do WooCommerce é obrigatório aqui (3 plugins BR: ViaCEP, CPF/CNPJ, PagSeguro transparente, dependem dos IDs padrão #billing_*_field que só existem nesse modelo). Testado ao vivo (pedido de teste completo) antes desta fase: o mecanismo de submit funciona corretamente. Só CSS por cima das classes/IDs que o Woo já gera. */ /* ATENÇÃO: o WooCommerce aplica a classe "woocommerce-checkout" tanto no (via body_class) QUANTO no

do checkout: usar só ".woocommerce-checkout" bate no body inteiro e quebra a página inteira (virou grid de 2 colunas incluindo header/footer). Sempre qualificar com "form." pra acertar só o formulário. */ form.woocommerce-checkout{ display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--espaco-2xl); align-items: start; } /* Posicionamento explícito dos 3 filhos diretos que o Woo renderiza aqui (confirmado ao vivo via inspeção do HTML renderizado em staging, 01/08/2026): #customer_details.col2-set (campos de cobrança/endereço), h3#order_review_heading ("Seu pedido") e #order_review (resumo do pedido). Sem isso, o auto-placement do grid põe .col2-set em col1/linha1 e o h3 em col2/linha1 (curto); como a linha 1 fica alta (dominada pelo .col2-set), sobra vão vazio sob o h3 e o #order_review, sem espaço reservado na linha 1, cai pro auto-placement seguinte na MESMA coluna 1, empurrado pra baixo do formulário de cobrança em vez de ficar do lado. Fixamos: coluna 1 = .col2-set do topo ao fim (2 linhas); coluna 2 = h3 na linha 1 e #order_review na linha 2, empilhados ao lado. */ form.woocommerce-checkout > .col2-set{ grid-column: 1; grid-row: 1 / 3; } form.woocommerce-checkout > #order_review_heading{ grid-column: 2; grid-row: 1; } form.woocommerce-checkout > #order_review{ grid-column: 2; grid-row: 2; } @media (max-width: 900px){ form.woocommerce-checkout{ grid-template-columns: 1fr; } /* Reset do posicionamento explícito acima: com 1 coluna só, manter grid-column:2 criaria uma coluna implícita extra e quebraria o empilhamento mobile que já funciona hoje. Volta pro auto-placement (ordem natural do DOM = mesma ordem visual desejada no mobile). */ form.woocommerce-checkout > .col2-set, form.woocommerce-checkout > #order_review_heading, form.woocommerce-checkout > #order_review{ grid-column: auto; grid-row: auto; } } /* Achado real (Swarm Checkout Conversion UX, 13/08/2026, inspecao ao vivo da cadeia de ancestrais de form.checkout): nao existe page-checkout.php dedicado, o checkout cai no page.php generico, que embrulha o conteudo em ".conteudo-pagina" (institutional.css), travada em 800px de largura de leitura -- certo pra texto institucional (Sobre, blog), errado pro formulario de 2 colunas com widget de pagamento embutido. Confirmado: form.checkout ficava preso a 800px dentro de um article.container de 1240px (--largura-container), sobrando ~440px vazios em 1440px de viewport e espremendo o payment_box do Mercado Pago pra 228px de largura quando selecionado -- essa e a causa raiz do "espremido" reportado, nao a proporcao entre as colunas (1.4fr:1fr ja estava correta). Libera so aqui via classe de body que o WooCommerce ja aplica na pagina de checkout, sem tocar no page.php (compartilhado com Politica de Privacidade e outras paginas institucionais que precisam continuar limitadas a 800px). */ body.woocommerce-checkout .conteudo-pagina{ max-width: none; } /* Peso visual dos avisos do topo (Swarm Checkout Conversion UX, 13/08/2026): ".woocommerce-message" (produto adicionado) e ".woocommerce-info" (toggles "ja e cliente"/"tem um cupom") vem estilizados em woocommerce-notices.css com padding generoso + sombra, pensados pra Loja/Carrinho, onde a notice aparece sozinha flutuando sobre a grade de produtos. No Checkout as 3 aparecem empilhadas antes do formulario e competem em peso visual com o proprio formulario. Reduzimos aqui, so no Checkout (nao mexe em woocommerce-notices.css, Carrinho continua com o tratamento original): menos padding vertical, sem sombra, menos espaco entre elas. Mantido: cor, borda esquerda, icone, link, area clicavel de 44px dos toggles (showlogin/showcoupon), nada de funcionalidade muda. */ body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-info{ padding-top: var(--espaco-sm); padding-bottom: var(--espaco-sm); margin-bottom: var(--espaco-sm); box-shadow: none; } .woocommerce-checkout h3{ margin-bottom: var(--espaco-md); } /* Campos de formulário: form-row/form-row-first/last/wide são classes nativas do Woo (inclusive as adicionadas pelo Extra Checkout Fields BR) */ .woocommerce-checkout .form-row{ margin-bottom: var(--espaco-md); } .woocommerce-checkout .form-row label{ display: block; font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cor-cacau-70); margin-bottom: var(--espaco-2xs); } .woocommerce-checkout .form-row .required{ color: var(--cor-terracota); } /* 21/08/2026 (achado real do Ricardo, testando o checkout ao vivo com itens de verdade no carrinho): a label acima já tinha o tratamento certo (uppercase, pequena, negrito) desde 13/08, mas o CAMPO em si nunca ganhou nenhuma regra de fundo/borda/raio/padding — só "width:100%" e "min-height:44px" (alvo de toque, item 8 abaixo). Resultado: campo de input renderizava com a caixa branca padrão do navegador, cantos retos, sem nenhum contato visual com o resto do site. Corrigido seguindo o mesmo vocabulário já usado no resto do tema (raio/borda/foco dos componentes de vidro e do buttons.css), não inventado do zero. */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea{ width: 100%; /* Item 8 (mapeamento Fase 2): campos medidos ao vivo com 37-40px de altura, levemente abaixo do mínimo de 44px recomendado pra alvo de toque. min-height só estabelece um piso, não acha nenhum campo que já seja maior (textarea de observações do pedido, por exemplo). */ min-height: 44px; padding: var(--espaco-sm) var(--espaco-md); background: var(--cor-branco); border: 1px solid rgba(51, 41, 31, 0.18); border-radius: var(--raio-sm); font-family: var(--fonte-corpo); font-size: var(--texto-base); color: var(--cor-cacau); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .woocommerce-checkout .form-row textarea{ min-height: 90px; resize: vertical; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus{ outline: none; border-color: var(--cor-mata); box-shadow: 0 0 0 3px rgba(47, 74, 51, 0.14); } .woocommerce-checkout .form-row input.input-text::placeholder, .woocommerce-checkout .form-row textarea::placeholder{ color: var(--cor-cacau-45); } /* Select2 (WooCommerce carrega por padrão no campo País — Extra Checkout Fields Brazil troca Estado por