/**
 * PRD 02 — UI do checkout e da caixa de pagamento.
 *
 * Escopo: body.woocommerce-checkout / body.woocommerce-cart apenas.
 *
 * Especificidade: o Customizer (wp-custom-css) imprime inline no wp_head,
 * depois deste enqueue. Toda regra que dispute #payment usa o prefixo
 * body.woocommerce-checkout para vencer sem !important — mesma técnica do
 * a.showlogin no PRD 11.
 *
 * Duplicidade conhecida: o Additional CSS do Customizer declara
 *   .woocommerce-checkout #payment { background: #FFF6EA }
 *   .woocommerce-checkout #payment div.form-row { background: transparent }
 *   #payment div.payment_box (+ ::before) { background: #FFF6EA }
 * Os mesmos valores estão versionados aqui como tokens.
 */

/* =========================================================================
 * 1. Tokens
 *
 * Reuso deliberado das custom properties do WooCommerce 11: --wc-red,
 * --wc-green e --wc-form-border-color governam borda de campo, rótulo
 * inválido e outline do aceite de termos. Re-apontá-las troca a paleta de
 * validação inteira sem duplicar os seletores do plugin.
 * ====================================================================== */

body.woocommerce-checkout,
body.woocommerce-cart {
	--claras-ink: #222222;
	--claras-ink-soft: #5a5551;
	--claras-cream-pay: #fff6ea;
	--claras-cream-bar: #f7f4f3;
	--claras-line-soft: #e3d9c8;
	--claras-surface: #ffffff;

	--claras-field-size: 16px;
	--claras-field-min: 44px;
	--claras-checkout-rail: 380px;
	--claras-rail-gap: 48px;

	/* Vermelho tijolo: 7,06:1 sobre branco · 6,51:1 sobre #F7F4F3 · 6,65:1 sobre #FFF6EA. */
	--claras-danger: #9b2c22;
	--wc-red: #9b2c22;

	/* Texto do marcador de campo inválido. CSS content não passa por i18n;
	   a loja é pt-BR e a string fica centralizada neste token. */
	--claras-invalid-note: "Confira este campo";
}

/* F15 — o verde de "campo validado" do WooCommerce vira a borda normal.
   Confirmar sucesso em cada um dos ~20 campos não informa nada e compete com
   o sinal de erro. Escopado só no checkout para não afetar rótulos de estoque. */
body.woocommerce-checkout {
	--wc-green: var(--wc-form-border-color);
}

/* A busca do cabeçalho não é impressa no checkout. A trava visual está em header-compact.css. */

/* =========================================================================
 * 2. Faixas de aviso (F02)
 *
 * O aviso "Nota: … N/A …" do SuperFrete sai por hook (lib/checkout-ui.php);
 * a orientação passa a aparecer junto ao campo Número (seção 3).
 * .woocommerce-error e .woocommerce-message ficam de fora: neles o ícone e a
 * borda vermelha são justamente o sinal.
 * ====================================================================== */

/* O tema aplica `.woocommerce { line-height: 2.5rem !important }`, que era a
   causa real da altura: 40px de entrelinha para um aviso de uma linha. */
body.woocommerce-checkout .woocommerce-info {
	padding: 11px 20px;
	margin-bottom: 14px;
	line-height: 1.45;
}

body.woocommerce-checkout .woocommerce-info::before {
	content: none;
}

/* Rede de segurança: se o SuperFrete trocar de classe e o hook não pegar. */
body.woocommerce-checkout .woocommerce-info.superfrete-number-notice {
	display: none;
}

/* O checkout.js envolve cada erro em <a href="#campo">. A regra global
   .entry-content a deixa esse link em #c4c1bf e só escurece no hover. */
body.woocommerce-checkout .entry-content .woocommerce-error a:not(.button):not(.more-link),
body.woocommerce-checkout .entry-content .woocommerce-error a:not(.button):not(.more-link):hover,
body.woocommerce-checkout .entry-content .woocommerce-error a:not(.button):not(.more-link):focus {
	color: var(--claras-ink);
}

/* =========================================================================
 * 3. Campos (F03) e texto de apoio (F02)
 *
 * 16px evita o zoom automático do iOS Safari; 44px dá alvo de toque.
 * Escopo: checkout apenas. O carrinho tem a calculadora CEP-first com
 * espaçamento compacto próprio (woo/cart-shipping-cep.css) e entra em outro
 * ciclo, com sua própria validação de layout.
 * ====================================================================== */

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select {
	font-size: var(--claras-field-size);
	min-height: var(--claras-field-min);
	padding: 10px 12px;
	line-height: 1.4;
	box-sizing: border-box;
}

body.woocommerce-checkout .woocommerce form .form-row textarea {
	min-height: 88px;
}

/* País e estado são substituídos pelo select2, que desenha a própria caixa
   (28px no CSS do WooCommerce, 34px aqui) e não herda as regras de `select`
   acima. Sem isto, os dois campos ficam abaixo do alvo de toque e fora do
   ritmo vertical dos vizinhos. */
body.woocommerce-checkout .woocommerce form .form-row .select2-container .select2-selection--single {
	height: auto;
	min-height: var(--claras-field-min);
	display: flex;
	align-items: center;
	border: 1px solid #eee9e8;
	border-radius: 0;
	box-shadow: none;
	background-color: #fff;
}

body.woocommerce-checkout .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	font-size: var(--claras-field-size);
	line-height: 1.4;
	padding: 10px 28px 10px 12px;
	color: var(--claras-ink);
}

body.woocommerce-checkout .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 6px;
}

/* O dropdown é anexado ao body, fora do form. */
body.woocommerce-checkout .select2-container .select2-results__option {
	font-size: var(--claras-field-size);
	line-height: 1.4;
	padding: 8px 12px;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus-visible,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus-visible,
body.woocommerce-checkout .woocommerce form .form-row select:focus-visible {
	outline: 2px solid var(--claras-ink);
	outline-offset: 2px;
}

/* O SuperFrete já define description = "Digite N/A se não houver número" em
   billing_number e shipping_number; o WooCommerce a renderiza com
   display:none e cor branca. Aqui ela volta a ser visível, no lugar onde a
   dúvida acontece. O aria-hidden é do core do WooCommerce e não é removido:
   a mesma informação é anunciada pelo placeholder ("Número ou N/A"), então
   isto é um ganho visual, sem regressão de leitor de tela. */
body.woocommerce-checkout .woocommerce form .form-row .description {
	display: block;
	margin: 4px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--claras-ink-soft);
	background: none;
	border: 0;
}

/* =========================================================================
 * 4. Validação (F14)
 *
 * A cor já vem do token --wc-red acima. O que falta é o sinal que não
 * depende de cor: borda mais grossa + marcador textual junto ao campo.
 * O .form-row usa ::before e ::after para clearfix, por isso o marcador vai
 * no .woocommerce-input-wrapper, que o WooCommerce sempre renderiza.
 *
 * A mensagem específica continua no grupo de avisos do topo, que o
 * WooCommerce publica com role="alert" — esse é o texto acessível; o
 * marcador abaixo é reforço visual.
 * ====================================================================== */

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid textarea {
	border-width: 2px;
}

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid .woocommerce-input-wrapper {
	display: block;
}

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid .woocommerce-input-wrapper::after {
	content: var(--claras-invalid-note);
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--claras-danger);
}

/* =========================================================================
 * 5. Grade de duas colunas (F04)
 *
 * form.checkout tem três filhos no template do WooCommerce; o link
 * "Editar carrinho" (F16) entra como quarto, e o checkout.js faz prepend de
 * .woocommerce-NoticeGroup no formulário durante o AJAX. A linha 1 é
 * reservada para esse grupo de avisos e colapsa quando não há erro.
 * ====================================================================== */

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

@media only screen and (min-width: 1022px) {

	body.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--claras-checkout-rail);
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--claras-rail-gap);
		row-gap: 0;
		align-items: start;
	}

	/* Qualquer filho inesperado (plugin) cai na coluna da esquerda em vez de
	   quebrar a grade. */
	body.woocommerce-checkout form.checkout > * {
		grid-column: 1;
		min-width: 0;
	}

	body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	body.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 2 / span 3;
	}

	body.woocommerce-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 2;
		margin-bottom: 12px;
	}

	body.woocommerce-checkout form.checkout > .claras-order-actions {
		grid-column: 2;
		grid-row: 3;
	}

	body.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 4;
		align-self: start;
	}
}

/* =========================================================================
 * 6. Resumo do pedido (F09, F11, F16)
 * ====================================================================== */

body.woocommerce-checkout .claras-order-actions {
	margin: 0 0 10px;
	padding: 0;
	text-align: right;
	line-height: 1.4;
}

body.woocommerce-checkout .entry-content a.claras-edit-cart {
	font-size: 13px;
	color: var(--claras-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

body.woocommerce-checkout .entry-content a.claras-edit-cart:hover {
	color: #000000;
	text-decoration-thickness: 2px;
}

body.woocommerce-checkout .entry-content a.claras-edit-cart:focus-visible {
	outline: 2px solid var(--claras-ink);
	outline-offset: 3px;
}

body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 16px;
	padding: 20px;
	background: var(--claras-cream-pay);
	border: 0;
	border-radius: 0;
}

body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table thead {
	display: none;
}

body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot {
	display: block;
}

body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table td {
	background: transparent;
	border: 0;
}

body.woocommerce-checkout #order_review tr.cart_item {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--claras-line-soft);
}

body.woocommerce-checkout #order_review tr.cart_item:first-child {
	padding-top: 0;
}

body.woocommerce-checkout #order_review tr.cart_item td.product-total {
	display: none;
}

body.woocommerce-checkout #order_review td.product-name {
	position: relative;
	display: block;
	min-height: 56px;
	padding: 0 68px 0 0;
	font-size: 0;
	line-height: 1.45;
}

body.woocommerce-checkout #order_review img.claras-review-thumb {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 56px;
	height: 56px;
	max-width: 56px;
	margin: 0;
	object-fit: contain;
	border-radius: 0;
}

body.woocommerce-checkout #order_review .claras-review-item-name {
	display: block;
	max-width: none;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--claras-ink);
}

body.woocommerce-checkout #order_review .claras-review-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-top: 4px;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout #order_review .claras-review-price {
	color: var(--claras-ink);
}

body.woocommerce-checkout #order_review td.product-name dl,
body.woocommerce-checkout #order_review td.product-name .variation {
	display: block;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout #order_review tfoot tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--claras-line-soft);
}

body.woocommerce-checkout #order_review tfoot tr:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

body.woocommerce-checkout #order_review tfoot th,
body.woocommerce-checkout #order_review tfoot td {
	display: block;
	width: auto;
	padding: 0;
	font-weight: 400;
	text-align: left;
}

body.woocommerce-checkout #order_review tfoot td {
	text-align: right;
}

body.woocommerce-checkout #order_review tfoot tr.order-total th,
body.woocommerce-checkout #order_review tfoot tr.order-total td {
	font-weight: 600;
}

/* Legenda do Pix no carrinho misto. Encosta na taxa e separa o total
   com um fio só. :has() já é o padrão da caixa de pagamento. */
body.woocommerce-checkout #order_review tfoot tr.fee:has(+ tr.claras-pix-discount-note) {
	border-bottom: 0;
	padding-bottom: 0;
}

body.woocommerce-checkout #order_review tfoot tr.claras-pix-discount-note {
	display: block;
	margin-top: 0;
	padding-top: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--claras-line-soft);
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout #order_review tfoot tr.claras-pix-discount-note td {
	display: block;
	width: 100%;
	text-align: left;
	color: var(--claras-ink-soft);
	font-weight: 400;
}

body.woocommerce-checkout #order_review tr.shipping {
	display: block;
	padding-top: 16px;
}

body.woocommerce-checkout #order_review tr.shipping th,
body.woocommerce-checkout #order_review tr.shipping td {
	display: block;
	width: 100%;
	text-align: left;
}

body.woocommerce-checkout #order_review tr.shipping th {
	margin: 0 0 10px;
	font-family: "Libre Baskerville", serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
}

body.woocommerce-checkout #order_review ul.woocommerce-shipping-methods {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-checkout #order_review ul.woocommerce-shipping-methods li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin: 0 0 10px;
}

body.woocommerce-checkout #order_review ul.woocommerce-shipping-methods li:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout #order_review ul.woocommerce-shipping-methods input.shipping_method {
	flex: 0 0 auto;
	margin: 3px 0 0;
}

body.woocommerce-checkout #order_review ul.woocommerce-shipping-methods label {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 400;
}

body.woocommerce-checkout #order_review .claras-total-pending {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--claras-ink-soft);
	letter-spacing: 0;
}

/* =========================================================================
 * 7. Caixa de pagamento (F05)
 * ====================================================================== */

body.woocommerce-checkout #payment {
	background: var(--claras-cream-pay);
	padding: 20px;
	border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: var(--claras-field-min);
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--claras-line-soft);
	background: transparent;
	list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input.input-radio {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--claras-ink);
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
	margin: 0 0 0 10px;
	padding: 0;
	font-size: 15px;
	line-height: 1.3;
	color: var(--claras-ink);
	text-transform: none;
	cursor: pointer;
}

/* Estado selecionado. Sem :has() o rótulo ainda engrossa (regra abaixo), então
   a degradação é silenciosa, não quebrada. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input.input-radio:checked) {
	background: var(--claras-surface);
	border-color: var(--claras-ink);
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input.input-radio:checked + label {
	font-weight: 600;
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input.input-radio:focus-visible) {
	outline: 2px solid var(--claras-ink);
	outline-offset: 2px;
}

/* Linha de apoio do Pix e do boleto: a descrição do gateway, que antes vinha
   vazia e deixava uma faixa cream de 26 px. */
body.woocommerce-checkout #payment div.payment_box {
	width: 100%;
	margin: 6px 0 0;
	padding: 0 0 0 28px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--claras-ink-soft);
	font-size: 13px;
	line-height: 1.4;
}

body.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

body.woocommerce-checkout #payment div.payment_box > p {
	margin: 0;
	padding: 0;
}

/* O formulário de cartão tem campos reais: volta ao respiro normal. */
body.woocommerce-checkout #payment div.payment_box.payment_method_wc_yapay_intermediador_cc {
	padding: 12px 0 4px 0;
	color: inherit;
	font-size: inherit;
}

/* ----- Linha do CTA ----------------------------------------------------- */

/* O tema declara padding/background com !important neste mesmo seletor; o
   escopo mantém o override restrito ao checkout. */
body.woocommerce-checkout #payment div.form-row.place-order {
	padding: 16px 0 0 !important;
	margin: 0;
	background: transparent !important;
	border-top: 1px solid var(--claras-line-soft);
}

body.woocommerce-checkout #payment .place-order #place_order {
	float: none;
	width: 100%;
	min-height: 52px;
}

body.woocommerce-checkout #payment .place-order #place_order:hover {
	background-color: #000000;
}

body.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text p {
	margin: 0;
}

body.woocommerce-checkout #payment .place-order .woocommerce-privacy-policy-text a,
body.woocommerce-checkout #payment .place-order .claras-checkout-terms-notice a {
	color: var(--claras-ink);
	text-decoration: underline;
}

body.woocommerce-checkout #payment .place-order .claras-checkout-terms-notice {
	margin: 0 0 12px;
}

/* Opt-in do MailPoet: separado do CTA, para não parecer pré-requisito. */
body.woocommerce-checkout #payment .place-order p.form-row:not(.place-order) {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--claras-line-soft);
	font-size: 13px;
	line-height: 1.45;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout .claras-place-order-note {
	margin: 12px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
	color: var(--claras-ink-soft);
}

/* =========================================================================
 * 8. Botão flutuante do WhatsApp (PRD 07 / FR-07)
 *
 * Na compra da campanha o FAB some; ajuda textual fica no início do form.
 * No checkout da loja o FAB permanece (sem sobrepor a campanha).
 * ====================================================================== */

body.claras-campanha-compra #ht-ctc-chat,
body.claras-campanha-compra .ht-ctc-chat {
	display: none !important;
}

body.woocommerce-checkout .claras-checkout-whatsapp {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.45;
}

body.woocommerce-checkout .claras-checkout-whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--claras-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.woocommerce-checkout .claras-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	justify-content: center;
	font-size: 13px;
	line-height: 1.4;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout .claras-checkout-trust a {
	color: var(--claras-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* =========================================================================
 * 8b. PRD 07 — feedback de frete, total, observações, pagamento
 * ====================================================================== */

body.woocommerce-checkout .claras-checkout-freight-status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout .claras-checkout-freight-status.is-loading {
	color: var(--claras-ink);
}

body.woocommerce-checkout .claras-checkout-freight-status.is-error {
	color: var(--claras-danger);
}

body.woocommerce-checkout .claras-total-pending {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout .order-total.claras-total-pending-shipping th {
	font-weight: 500;
}

body.woocommerce-checkout .claras-order-notes-details {
	margin: 0 0 20px;
	border: 0;
}

body.woocommerce-checkout .claras-order-notes-summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--claras-ink);
	list-style: none;
}

body.woocommerce-checkout .claras-order-notes-summary::-webkit-details-marker {
	display: none;
}

body.woocommerce-checkout .claras-payment-method-note {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout #ship-to-different-address label {
	font-size: 15px;
	font-weight: 400;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Login / cupom menos dominantes */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 8px 0;
	margin: 0 0 10px;
	background: transparent;
	border: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--claras-ink-soft);
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

/* =========================================================================
 * 8b. Gutter mobile (paridade com a landing)
 *
 * O tema aplica .site-inner { padding: 30px } até 1139px. Na história da
 * campanha o gutter é 20px. No checkout da loja (fora da landing) alinhamos.
 * Na vista ?comprar=1 o site-inner já é zerado em landing-campanha.css.
 * ====================================================================== */

@media only screen and (max-width: 1139px) {
	body.woocommerce-checkout:not(.claras-campanha) .site-inner {
		padding: 20px;
	}
}

/* =========================================================================
 * 9. Responsivo
 *
 * Breakpoints do projeto: 1022 (grade) e 767 (mobile estreito). Abaixo de
 * 1022 px nada é fixo e o resumo segue depois dos dados, como hoje.
 * Até 1021 px: uma coluna (pares first/last não apertam no mobile).
 * ====================================================================== */

@media only screen and (max-width: 1021px) {

	body.woocommerce-checkout .col2-set .form-row-first,
	body.woocommerce-checkout .col2-set .form-row-last,
	body.woocommerce-checkout .woocommerce-billing-fields .form-row-first,
	body.woocommerce-checkout .woocommerce-billing-fields .form-row-last,
	body.woocommerce-checkout .woocommerce-shipping-fields .form-row-first,
	body.woocommerce-checkout .woocommerce-shipping-fields .form-row-last,
	body.woocommerce-checkout form .form-row-first,
	body.woocommerce-checkout form .form-row-last {
		float: none;
		width: 100%;
	}

	body.woocommerce-checkout #order_review,
	body.woocommerce-checkout #customer_details {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {

	body.woocommerce-checkout #payment {
		padding: 16px;
	}

	body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
		padding: 12px;
	}

	body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table {
		padding: 16px;
	}

	/* Escala da vista ?comprar=1 vive em landing-campanha.css (buybox).
	   Não comprimir steps/summary/buy aqui — isso quebrava a paridade. */
}