/*
 * Carrinho e checkout.
 *
 * Carregado por inc/enqueue.php em is_cart() || is_checkout().
 * Todo valor sai de tokens.css — as únicas exceções são a espessura de fio
 * (1px) das bordas e larguras de coluna de tabela, que não têm token.
 *
 * Regra de ouro desta folha: ela veste a marcação do WooCommerce sem depender
 * de JavaScript. Tudo que o cliente precisa fazer (remover item, mudar
 * quantidade, aplicar cupom, calcular frete, escolher pagamento) funciona só
 * com HTML + o JS do próprio WooCommerce.
 */

/* ==========================================================================
   1. Estrutura das duas páginas
   ========================================================================== */

.cdm-carrinho-pagina {
	margin-block: var(--cdm-e-4);
}

.cdm-checkout {
	display: grid;
	gap: var(--cdm-e-6);
	align-items: start;
	margin-block: var(--cdm-e-8);
}

.cdm-checkout__grade {
	display: grid;
	gap: var(--cdm-e-6);
	align-items: start;
}

@media (min-width: 900px) {
	.cdm-checkout__grade {
		grid-template-columns: minmax(0, 1fr) 24rem;
	}
}

/* A lateral acompanha a rolagem em telas altas: o total fica sempre à vista. */
@media (min-width: 900px) {
	.cdm-checkout__coluna--resumo {
		position: sticky;
		top: var(--cdm-e-4);
	}
}

/* ==========================================================================
   2. Cartão — superfície comum a tabelas, totais e pagamento
   ========================================================================== */

.cdm-carrinho__tabela,
.cdm-totais,
.cdm-checkout__dados > .col-1,
.cdm-checkout__dados > .col-2,
.cdm-checkout__coluna--dados .woocommerce-additional-fields,
.cdm-resumo,
.cdm-carrinho-vazio {
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
	box-shadow: var(--cdm-sombra-sm);
}

/* ==========================================================================
   3. Carrinho — tabela de itens
   ========================================================================== */

.cdm-carrinho__tabela {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
}

/* (o modo tabela antigo foi recolhido pela secao 16) */

/* --- quantidade --- */

/* .cdm-carrinho__tabela .quantity / input.qty: o box-model antigo da 1ª
   versão do carrinho saiu daqui — o layout de fileiras (seção 16) tem o seu
   próprio estilo de stepper, sem borda dupla em volta do número. */

/* --- linha de ações (cupom + atualizar) --- */

.cdm-carrinho__acoes {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--cdm-e-4);
	background: var(--cdm-cinza-100);
	border-bottom: 0;
}

/* No desktop a célula volta a ser célula de tabela — um `display:flex` num
   <td> faz o navegador ignorar o colspan="6" e espremer a linha na 1ª coluna. */
@media (min-width: 900px) {
	.cdm-carrinho__acoes {
		display: table-cell;
		text-align: right;
		border-bottom: 0;
	}

	.cdm-carrinho__cupom {
		float: left;
	}
}

.cdm-carrinho__cupom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-2);
	align-items: center;
}

.cdm-carrinho__cupom #coupon_code {
	width: 12rem;
}

/* ==========================================================================
   4. Campos e botões (vale para carrinho e checkout)
   ========================================================================== */

.cdm-carrinho-pagina input[type="text"],
.cdm-carrinho-pagina input[type="tel"],
.cdm-carrinho-pagina input[type="email"],
.cdm-carrinho-pagina select,
.cdm-checkout input[type="text"],
.cdm-checkout input[type="tel"],
.cdm-checkout input[type="email"],
.cdm-checkout input[type="password"],
.cdm-checkout input[type="number"],
.cdm-checkout input[type="date"],
.cdm-checkout select,
.cdm-checkout textarea,
.shipping-calculator-form input[type="text"],
.shipping-calculator-form select {
	width: 100%;
	padding: var(--cdm-e-3);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	transition: var(--cdm-transicao);
}

.cdm-carrinho-pagina input:focus-visible,
.cdm-carrinho-pagina select:focus-visible,
.cdm-checkout input:focus-visible,
.cdm-checkout select:focus-visible,
.cdm-checkout textarea:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 1px;
	border-color: var(--cdm-azul);
}

.cdm-checkout textarea {
	min-height: 6rem;
	resize: vertical;
}

/* Campo reprovado na validação do Woo (inclui CPF/CNPJ do plugin brasileiro). */
.cdm-checkout .woocommerce-invalid input.input-text,
.cdm-checkout .woocommerce-invalid select,
.cdm-checkout .woocommerce-invalid .select2-selection {
	border-color: var(--cdm-vermelho);
}

.cdm-checkout .woocommerce-validated input.input-text {
	border-color: var(--cdm-verde);
}

/* Botões. `.button` é a classe do WooCommerce; o tema veste sem removê-la. */
.cdm-carrinho-pagina .button,
.cdm-checkout .button,
.cdm-carrinho-vazio .button,
.cdm-totais .checkout-button,
.cdm-pagamento #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	padding: var(--cdm-e-3) var(--cdm-e-5);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	line-height: var(--cdm-altura-apertada);
	text-align: center;
	text-decoration: none;
	color: var(--cdm-texto);
	background: var(--cdm-cinza-100);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

.cdm-carrinho-pagina .button:hover,
.cdm-checkout .button:hover,
.cdm-carrinho-vazio .button:hover {
	background: var(--cdm-cinza-200);
}

.cdm-carrinho-pagina .button:focus-visible,
.cdm-checkout .button:focus-visible,
.cdm-totais .checkout-button:focus-visible,
.cdm-pagamento #place_order:focus-visible,
.cdm-carrinho-vazio .button:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 2px;
}

/* Ações de compra: verde, como manda a identidade. Os !important vencem o
   CSS do YellowPencil (mu-plugin 010 reimprime as regras dele DEPOIS das
   folhas do tema, com !important) e a folha do wc-smart-checkout. */
.cdm-totais .checkout-button,
.cdm-pagamento #place_order,
.cdm-carrinho-vazio .cdm-btn--primario {
	width: 100%;
	padding: var(--cdm-e-4) var(--cdm-e-5);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-branco) !important;
	background: var(--cdm-verde-comprar) !important;
	border-color: var(--cdm-verde-comprar) !important;
}

.cdm-totais .checkout-button:hover,
.cdm-pagamento #place_order:hover,
.cdm-carrinho-vazio .cdm-btn--primario:hover {
	background: var(--cdm-verde-comprar-fundo) !important;
	border-color: var(--cdm-verde-comprar-fundo) !important;
	color: var(--cdm-branco) !important;
}

.cdm-pagamento #place_order[disabled],
.cdm-totais .checkout-button[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

/* ==========================================================================
   5. Totais do carrinho
   ========================================================================== */

.cdm-totais {
	padding: var(--cdm-e-5);
}

.cdm-totais__titulo {
	margin: 0 0 var(--cdm-e-4);
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-totais__tabela {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--cdm-e-4);
}

.cdm-totais__tabela th,
.cdm-totais__tabela td {
	padding: var(--cdm-e-3) 0;
	font-size: var(--cdm-t-base);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-totais__tabela th {
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-fraco);
}

.cdm-totais__tabela td {
	text-align: right;
	color: var(--cdm-texto);
}

.cdm-totais__tabela .cart-discount td {
	color: var(--cdm-verde);
}

.cdm-totais__tabela .order-total th,
.cdm-totais__tabela .order-total td {
	white-space: nowrap;
	padding-top: var(--cdm-e-4);
	border-bottom: 0;
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* ==========================================================================
   6. Frete (cart-shipping.php + calculadora)
   ========================================================================== */

.cdm-frete td,
.cdm-resumo__tabela .woocommerce-shipping-totals td {
	text-align: left;
}

.cdm-frete__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--cdm-e-2);
}

.cdm-frete__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-2);
	align-items: baseline;
	font-size: var(--cdm-t-sm);
}

.cdm-frete__item label {
	cursor: pointer;
	color: var(--cdm-texto);
}

.cdm-frete__item input[type="radio"] {
	margin: 0;
	accent-color: var(--cdm-azul);
}

.cdm-frete__destino,
.woocommerce-shipping-destination {
	margin: var(--cdm-e-3) 0 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.woocommerce-shipping-calculator {
	margin-top: var(--cdm-e-3);
}

.woocommerce-shipping-calculator .shipping-calculator-button {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-link);
}

.shipping-calculator-form {
	display: grid;
	gap: var(--cdm-e-3);
	margin-top: var(--cdm-e-3);
	padding: var(--cdm-e-3);
	background: var(--cdm-cinza-100);
	border-radius: var(--cdm-raio);
}

.shipping-calculator-form .form-row {
	margin: 0;
}

/* ==========================================================================
   7. Carrinho vazio
   ========================================================================== */

.cdm-carrinho-vazio {
	max-width: var(--cdm-largura-texto);
	margin: var(--cdm-e-10) auto;
	padding: var(--cdm-e-10) var(--cdm-e-6);
	text-align: center;
}

.cdm-carrinho-vazio .cart-empty {
	margin: 0 0 var(--cdm-e-2);
	font-size: var(--cdm-t-xl);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-carrinho-vazio__texto {
	margin: 0 auto var(--cdm-e-6);
	max-width: 34rem;
	font-size: var(--cdm-t-md);
	color: var(--cdm-texto-fraco);
}

.cdm-carrinho-vazio__acao {
	margin: 0;
}

.cdm-carrinho-vazio__acao .button {
	width: auto;
	min-width: 16rem;
}

/* ==========================================================================
   8. Checkout — colunas de dados
   ========================================================================== */

.cdm-checkout__dados {
	display: grid;
	gap: var(--cdm-e-6);
}

.cdm-checkout__dados > .col-1,
.cdm-checkout__dados > .col-2,
.cdm-checkout__coluna--dados .woocommerce-additional-fields {
	padding: var(--cdm-e-5);
	min-width: 0;
}

/* A coluna 2 fica vazia quando a loja não pede endereço de entrega separado;
   sem isto sobraria um cartão em branco. */
.cdm-checkout__dados > .col-2:empty {
	display: none;
}

.cdm-checkout h3,
.cdm-checkout .woocommerce-billing-fields > h3,
.cdm-checkout .woocommerce-shipping-fields h3,
.cdm-checkout .woocommerce-additional-fields h3 {
	margin: 0 0 var(--cdm-e-4);
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-azul);
}

.cdm-checkout__titulo {
	margin: 0 0 var(--cdm-e-4);
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* --- linhas de formulário do WooCommerce ---
   Os campos do "Brazilian Market on WooCommerce" (CPF, CNPJ, tipo de pessoa,
   número, bairro, celular) entram por estes mesmos wrappers .form-row, então
   ganham o estilo sem precisar de regra própria. */

.cdm-checkout .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
.cdm-checkout .woocommerce-additional-fields__field-wrapper,
.cdm-checkout .create-account {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-4);
}

@media (min-width: 640px) {
	.cdm-checkout .woocommerce-billing-fields__field-wrapper,
	.cdm-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cdm-checkout .form-row-first {
		grid-column: 1;
	}

	.cdm-checkout .form-row-last {
		grid-column: 2;
	}

	.cdm-checkout .form-row-wide,
	.cdm-checkout .create-account,
	.cdm-checkout .woocommerce-account-fields {
		grid-column: 1 / -1;
	}
}

.cdm-checkout .form-row {
	margin: 0;
	min-width: 0;
}

.cdm-checkout .form-row label {
	display: block;
	margin-bottom: var(--cdm-e-1);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

.cdm-checkout .form-row label .required {
	color: var(--cdm-vermelho);
	text-decoration: none;
}

.cdm-checkout .form-row .optional {
	color: var(--cdm-texto-apagado);
	font-weight: var(--cdm-peso-normal);
}

.cdm-checkout .form-row.woocommerce-invalid label {
	color: var(--cdm-vermelho);
}

/* Caixas de seleção (criar conta, entrega em outro endereço, termos). */
.cdm-checkout .form-row label.checkbox,
.cdm-checkout label.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: var(--cdm-e-2);
	align-items: flex-start;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto);
	cursor: pointer;
}

.cdm-checkout input[type="checkbox"] {
	margin: 0;
	width: auto;
	accent-color: var(--cdm-azul);
}

.cdm-checkout #ship-to-different-address {
	margin: 0 0 var(--cdm-e-4);
	font-size: var(--cdm-t-md);
}

.cdm-checkout .woocommerce-shipping-fields,
.cdm-checkout .woocommerce-additional-fields {
	margin-top: var(--cdm-e-6);
}

/* Select2 do WooCommerce (país, estado). Vestido só o suficiente para casar
   com os demais campos; a mecânica continua sendo a do plugin. */
.cdm-checkout .select2-container .select2-selection--single {
	height: auto;
	padding: var(--cdm-e-2) var(--cdm-e-1);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
}

.cdm-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: var(--cdm-t-base);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto);
}

/* ==========================================================================
   9. Checkout — resumo, cupom e pagamento
   ========================================================================== */

.cdm-resumo {
	padding: var(--cdm-e-5);
	overflow: hidden;
}

.cdm-resumo__tabela {
	width: 100%;
	border-collapse: collapse;
}

.cdm-resumo__tabela thead th {
	padding: 0 0 var(--cdm-e-3);
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	color: var(--cdm-texto-apagado);
	border-bottom: 1px solid var(--cdm-borda);
}

.cdm-resumo__tabela thead th.product-total,
.cdm-resumo__tabela td.product-total,
.cdm-resumo__tabela tfoot td {
	text-align: right;
}

.cdm-resumo__tabela td,
.cdm-resumo__tabela tfoot th {
	padding: var(--cdm-e-3) 0;
	font-size: var(--cdm-t-base);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-resumo__tabela tbody td.product-name {
	color: var(--cdm-texto);
	line-height: var(--cdm-altura-apertada);
}

.cdm-resumo__tabela .product-quantity {
	color: var(--cdm-texto-apagado);
	font-weight: var(--cdm-peso-normal);
}

.cdm-resumo__tabela tfoot th {
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-fraco);
}

.cdm-resumo__tabela tfoot .cart-discount td {
	color: var(--cdm-verde);
}

.cdm-resumo__tabela tfoot .order-total th,
.cdm-resumo__tabela tfoot .order-total td {
	padding-top: var(--cdm-e-4);
	border-bottom: 0;
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* Formulário de cupom que o Woo imprime acima do checkout. */
.checkout_coupon {
	display: grid;
	gap: var(--cdm-e-3);
	margin: 0 0 var(--cdm-e-6);
	padding: var(--cdm-e-4);
	background: var(--cdm-amarelo-claro);
	border: 1px solid var(--cdm-amarelo);
	border-radius: var(--cdm-raio);
}

@media (min-width: 640px) {
	.checkout_coupon {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.checkout_coupon > p:first-child {
		grid-column: 1 / -1;
	}
}

.checkout_coupon .form-row {
	margin: 0;
}

.checkout_coupon input[type="text"] {
	width: 100%;
	padding: var(--cdm-e-3);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	background: var(--cdm-superficie);
}

/* --- formas de pagamento --- */

.cdm-pagamento {
	margin-top: var(--cdm-e-5);
}

.cdm-pagamento__lista {
	margin: 0 0 var(--cdm-e-5);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--cdm-e-2);
}

.cdm-pagamento__lista > li {
	padding: var(--cdm-e-3) var(--cdm-e-4);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
}

.cdm-pagamento__lista > li > label {
	display: flex;
	gap: var(--cdm-e-2);
	align-items: center;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto);
	cursor: pointer;
}

.cdm-pagamento__lista > li > input[type="radio"] {
	margin-right: var(--cdm-e-2);
	accent-color: var(--cdm-azul);
}

.cdm-pagamento__lista > li > label img {
	max-height: var(--cdm-e-6);
	width: auto;
	vertical-align: middle;
}

/* Caixa que o gateway abre ao ser escolhido — é aqui que o Pagar.me desenha
   os campos de cartão e o parcelamento. Só recebe respiro e fundo. */
.cdm-pagamento .payment_box {
	margin-top: var(--cdm-e-3);
	padding: var(--cdm-e-4);
	font-size: var(--cdm-t-sm);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
	background: var(--cdm-cinza-100);
	border-radius: var(--cdm-raio);
}

.cdm-pagamento .payment_box p:first-child {
	margin-top: 0;
}

.cdm-pagamento .payment_box p:last-child {
	margin-bottom: 0;
}

.cdm-pagamento__acao {
	margin: 0;
	padding: 0;
}

.cdm-pagamento .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--cdm-e-4);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-pagamento .woocommerce-privacy-policy-text {
	font-size: var(--cdm-t-xs);
}

/* ==========================================================================
   10. Avisos do WooCommerce nestas duas páginas
   ========================================================================== */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
	margin: 0 0 var(--cdm-e-5);
	padding: var(--cdm-e-4);
	list-style: none;
	font-size: var(--cdm-t-base);
	line-height: var(--cdm-altura-normal);
	border-radius: var(--cdm-raio);
	border: 1px solid var(--cdm-borda);
	background: var(--cdm-cinza-100);
	color: var(--cdm-texto);
}

.woocommerce-error {
	background: var(--cdm-superficie);
	border-color: var(--cdm-vermelho);
	color: var(--cdm-vermelho);
}

.woocommerce-message {
	background: var(--cdm-superficie);
	border-color: var(--cdm-verde);
	color: var(--cdm-verde-escuro);
}

.woocommerce-info {
	background: var(--cdm-azul-claro);
	border-color: var(--cdm-azul-claro);
	color: var(--cdm-azul-escuro);
}

.woocommerce-error li,
.woocommerce-message li {
	margin: 0;
}

/*
 * O woocommerce.css desenha um ícone próprio (fonte WooCommerce) em
 * `position: absolute; left: 1.5em` dentro do aviso, contando com o
 * `padding-left: 3.5em` que ele mesmo aplica. Nosso padding é menor, então o
 * ícone caía EM CIMA da primeira letra ("0 custo de entrega...",
 * "(v)avesseiro ... foi adicionado"). Nesses avisos não usamos ícone: o
 * contorno colorido já diz o que é.
 */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: inherit;
	font-weight: var(--cdm-peso-semi);
}

/* Overlay de "atualizando" do checkout.js. A regra do WooCommerce usa
   background branco puro; aqui vencemos só a cor, mantendo o comportamento. */
.blockUI.blockOverlay {
	background: var(--cdm-branco) !important; /* vence .blockUI inline do jQuery blockUI */
	opacity: .6 !important;                   /* idem */
}

/* ==========================================================================
   11. Impressão — o cliente às vezes imprime o resumo
   ========================================================================== */

@media print {
	.cdm-carrinho__acoes,
	.cdm-pagamento__acao,
	.cdm-totais__acao {
		display: none;
	}
}

/* ==========================================================================
   13. Pedido recebido (obrigado)
   ========================================================================== */

.cdm-obrigado {
	max-width: 56rem;
	margin-inline: auto;
}

.cdm-obrigado__cabecalho {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-8) var(--cdm-e-4);
	text-align: center;
}

.cdm-obrigado__cabecalho .woocommerce-thankyou-order-received {
	margin: 0;
	font-size: var(--cdm-t-xl);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-obrigado .cdm-obrigado__selo {
	font-size: 3rem;
	color: var(--cdm-verde);
}

.cdm-obrigado .cdm-obrigado__selo--pendente {
	color: var(--cdm-amarelo-escuro);
}

/* Pix precisa aparecer antes de dados auxiliares: esta e a unica acao que
   falta para transformar pedido criado em pedido pago. O markup interno segue
   pertencendo ao Pagar.me; aqui mudamos somente hierarquia e apresentacao. */
.cdm-pix-pagamento {
	margin: 0 0 var(--cdm-e-6);
	padding: var(--cdm-e-5);
	border: 1px solid var(--cdm-amarelo-escuro);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-amarelo-claro);
	box-shadow: var(--cdm-sombra);
	text-align: center;
}

.cdm-pix-pagamento__status {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0 0 var(--cdm-e-3);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-amarelo);
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	text-transform: uppercase;
	color: var(--cdm-azul-escuro);
}

.cdm-pix-pagamento__titulo {
	margin: 0;
	font-size: var(--cdm-t-xl);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-azul);
}

.cdm-pix-pagamento__orientacao {
	max-width: var(--cdm-largura-texto);
	margin: var(--cdm-e-3) auto var(--cdm-e-5);
	color: var(--cdm-texto-fraco);
}

.cdm-pix-pagamento .woocommerce-message {
	display: block !important;
	margin: 0;
	padding: var(--cdm-e-5);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-branco);
	color: var(--cdm-texto);
}

.cdm-pix-pagamento .woocommerce-message::before,
.cdm-pix-pagamento .pagarme-response > .title {
	content: none;
	display: none;
}

.cdm-pix-pagamento .pagarme-response > p:first-of-type {
	margin: 0;
}

.cdm-pix-pagamento .pagarme-qr-code-img {
	display: block;
	width: 100%;
	max-width: var(--cdm-largura-qr-pix);
	height: auto;
	margin: 0 auto;
}

.cdm-pix-pagamento .pagarme-payment-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--cdm-largura-qr-pix);
	min-height: var(--cdm-altura-controle);
	margin: var(--cdm-e-4) auto var(--cdm-e-5) !important;
	padding: var(--cdm-e-3) var(--cdm-e-5);
	border: 1px solid var(--cdm-amarelo-escuro);
	border-radius: var(--cdm-raio);
	background: var(--cdm-amarelo);
	box-shadow: var(--cdm-sombra-sm);
	font: inherit;
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul-escuro);
	cursor: pointer;
	transition: background var(--cdm-transicao), border-color var(--cdm-transicao);
}

.cdm-pix-pagamento .pagarme-payment-button:hover {
	border-color: var(--cdm-amarelo-escuro);
	background: var(--cdm-amarelo-escuro);
}

.cdm-pix-pagamento .pagarme-payment-button:focus-visible {
	outline: var(--cdm-e-1) solid var(--cdm-azul);
	outline-offset: var(--cdm-e-1);
}

.cdm-pix-pagamento .pagarme-flex-container {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-3);
	margin: 0 !important;
}

.cdm-pix-pagamento .pagarme-flex-container > * {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cdm-pix-pagamento .pagarme-qr-code-instruction > p {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: var(--cdm-e-3);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	background: var(--cdm-fundo-alt);
	box-shadow: none;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-pix-pagamento .pagarme-qr-code-instruction > p > span {
	height: auto;
	margin-bottom: var(--cdm-e-2);
	font-size: var(--cdm-t-xl);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-azul);
}

.cdm-pix-pagamento .pagarme-qr-code-attention > p {
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul-escuro);
}

.cdm-pix-pagamento .pagarme-response > p:last-child {
	margin: var(--cdm-e-4) 0 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

@media (min-width: 640px) {
	.cdm-pix-pagamento {
		padding: var(--cdm-e-8);
	}

	.cdm-pix-pagamento .pagarme-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cdm-pix-pagamento .pagarme-qr-code-attention {
		grid-column: 1 / -1;
	}
}

ul.cdm-obrigado__resumo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-3);
	margin: 0 0 var(--cdm-e-6);
	padding: var(--cdm-e-5);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-fundo-alt);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

@media (min-width: 640px) {
	ul.cdm-obrigado__resumo {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
}

.cdm-obrigado__resumo li {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-1);
}

.cdm-obrigado__resumo strong {
	font-size: var(--cdm-t-base);
	color: var(--cdm-texto);
}

.cdm-obrigado .woocommerce-order-details__title,
.cdm-obrigado .woocommerce-column__title {
	margin: var(--cdm-e-6) 0 var(--cdm-e-4);
	font-size: var(--cdm-t-lg);
	color: var(--cdm-azul);
}

.cdm-obrigado table.order_details {
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
	overflow: hidden;
}

.cdm-obrigado table.order_details th,
.cdm-obrigado table.order_details td {
	padding: var(--cdm-e-3) var(--cdm-e-4);
	text-align: left;
	border-top: 1px solid var(--cdm-cinza-200);
}

.cdm-obrigado table.order_details thead th {
	border-top: 0;
	background: var(--cdm-fundo-alt);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-obrigado .woocommerce-customer-details address {
	font-style: normal;
	padding: var(--cdm-e-4);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
	line-height: var(--cdm-altura-normal);
}

.cdm-obrigado .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-4);
}

@media (min-width: 640px) {
	.cdm-obrigado .woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   14. Avisos-gatilho do checkout (login e cupom) e seus formulários
   ========================================================================== */

.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
	margin-bottom: var(--cdm-e-4);
}

/* Woo injeta glifos de sua fonte de ícones antes destes avisos. Como o tema
   usa Font Awesome local, aquele caractere vira tofu; texto já explica ação. */
.woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

/* O form de login que o gatilho revela (global/form-login.php do core). */
form.woocommerce-form-login.login {
	margin-bottom: var(--cdm-e-5);
	padding: var(--cdm-e-5);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-superficie);
}

form.woocommerce-form-login.login .form-row {
	margin-bottom: var(--cdm-e-4);
}

/* O wc-smart-checkout pinta .checkout-button de roxo (cor da marca dele) com
   regra própria carregada depois desta folha. Verde é decisão de identidade
   (ação de compra); o !important vence a folha do plugin. */
.cdm-totais .checkout-button {
	color: var(--cdm-branco) !important;
	background: var(--cdm-verde-comprar) !important;
	border-color: var(--cdm-verde-comprar) !important;
}

.cdm-totais .checkout-button:hover {
	background: var(--cdm-verde-escuro) !important;
	border-color: var(--cdm-verde-escuro) !important;
}

/* ==========================================================================
   15. Lateral do carrinho — convivência com wc-table-shipping /
       wc-shipping-calculator-improvements (eles injetam a caixinha de CEP
       dentro da linha de frete) e com o botão do wc-smart-checkout
   ========================================================================== */

.cdm-totais {
	overflow: hidden; /* a tabela dos plugins tenta passar da borda arredondada */
}

.cdm-totais__tabela {
	table-layout: fixed;
}

.cdm-totais__tabela th {
	width: 34%;
}

.cdm-totais__tabela td {
	overflow-wrap: anywhere;
}

/* A caixinha de CEP que o plugin injeta dentro da célula de frete. */
.cdm-totais .shipping-calculator-form,
.cdm-totais .woocommerce-shipping-calculator {
	text-align: left;
}

/* O botão de finalizar ocupa a lateral inteira, aconteça o que acontecer
   com o wrapper que o plugin de checkout imprimir. */
.cdm-carrinho__lateral .wc-proceed-to-checkout,
.cdm-totais__acao {
	display: block;
	width: 100%;
	margin-top: var(--cdm-e-4);
}

.cdm-carrinho__lateral .checkout-button {
	display: flex !important; /* vence a folha do wc-smart-checkout */
	width: 100% !important;   /* idem */
}

/* ==========================================================================
   16. Carrinho — cópia da referência (farmaciaindiana, 30/08/2026)
   --------------------------------------------------------------------------
   Redesenha a página do carrinho por cima das seções 3 e 5. A lista continua
   sendo <table> por causa dos plugins de frete e do cart.js do Woo — as
   células viram blocos de um grid, sem cartão por item nem sombra: o
   original é uma única caixa com fio fino entre as linhas.
   ========================================================================== */

/* --- régua de etapas: ícones ligados por traço pontilhado --- */

.cdm-etapas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-4);
	margin: 0 0 var(--cdm-e-4);
}

ol.cdm-etapas__lista {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdm-etapas__item {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-apagado);
}

/* O traço pontilhado que liga uma etapa à seguinte. */
.cdm-etapas__item + .cdm-etapas__item::before {
	content: "";
	width: 2.25rem;
	height: 0;
	border-top: 1px dashed var(--cdm-cinza-300);
	margin-right: var(--cdm-e-2);
}

.cdm-etapas__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-cinza-100);
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-xs);
}

/*
 * As 3 etapas têm o MESMO tamanho de ícone e de texto, concluída ou não —
 * só a cor muda. É a cor (e o anel ao redor do ícone atual) que diz onde o
 * cliente está, nunca um ícone maior ou um texto mais pesado que o resto.
 */
.cdm-etapas__item--ativa {
	color: var(--cdm-azul);
}

.cdm-etapas__item--ativa .cdm-etapas__icone {
	background: var(--cdm-azul);
	color: var(--cdm-branco);
	box-shadow: 0 0 0 3px var(--cdm-azul-claro);
}

/* Produtos vem sempre concluída nesta página — mesmo círculo das outras
   etapas, só a cor muda pro amarelo da marca, pra distinguir "já passou" de
   "estou aqui" sem quebrar o alinhamento (mesmo width/height/font-size). */
.cdm-etapas__item--concluida {
	color: var(--cdm-texto-apagado);
}

.cdm-etapas__item--concluida .cdm-etapas__icone {
	background: var(--cdm-cinza-100);
	color: var(--cdm-amarelo);
}

@media (max-width: 767px) {
	.cdm-etapas__item:not(.cdm-etapas__item--ativa) .cdm-etapas__rotulo,
	.cdm-etapas__item + .cdm-etapas__item::before {
		display: none;
	}
}

/* Enquanto o carrinho recalcula (troca de quantidade), as duas colunas ficam
   apagadas e sem clique: o número já mudou na tela, mas o preço ainda não —
   sem isso dá pra clicar de novo e pedir três atualizações ao mesmo tempo. */
.cdm-carrinho--atualizando .cdm-carrinho__form,
.cdm-carrinho--atualizando .cdm-carrinho__lateral {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--cdm-transicao);
}

/*
 * As duas superfícies do carrinho (lista de produtos e resumo) usam a MESMA
 * moldura. Antes a lista herdava a regra genérica de "Cartão" da seção 2
 * (raio 5px, borda escura translúcida, sombra-sm) e o resumo tinha o desenho
 * novo (raio 12px, borda clara, sem sombra): lado a lado pareciam dois
 * materiais diferentes. Quem manda agora é este par de seletores.
 */
.cdm-carrinho-pagina .cdm-carrinho__form .cdm-carrinho__tabela,
.cdm-carrinho-pagina .cdm-totais {
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	box-shadow: none;
}

/* --- duas colunas --- */

.cdm-carrinho__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-4);
	align-items: start;
}

@media (min-width: 900px) {
	.cdm-carrinho__grade {
		grid-template-columns: minmax(0, 1fr) 26.875rem;
	}
}

.cdm-carrinho__principal {
	min-width: 0;
}

/* --- a caixa da lista: uma única superfície, sem cartão por item --- */

.cdm-carrinho__tabela,
.cdm-carrinho__tabela tbody {
	display: block;
	width: 100%;
	border: 0;
	background: none;
}

.cdm-carrinho__form .cdm-carrinho__tabela {
	padding: 0 var(--cdm-e-5);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
}

.cdm-carrinho__tabela thead {
	display: none;
}

@media (min-width: 768px) {
	.cdm-carrinho__tabela thead {
		display: block;
		padding: var(--cdm-e-4) 0;
		border-bottom: 1px solid var(--cdm-cinza-200);
	}

	.cdm-carrinho__tabela thead tr {
		display: grid;
		grid-template-columns: 3.5rem minmax(0, 1fr) 9rem 9rem 2.5rem;
		align-items: center;
		gap: var(--cdm-e-4);
	}

	.cdm-carrinho__tabela thead th {
		padding: 0;
		border: 0;
		background: none;
		font-size: var(--cdm-t-xs);
		font-weight: var(--cdm-peso-semi);
		text-transform: none;
		letter-spacing: 0;
		color: var(--cdm-texto-apagado);
		text-align: left;
	}

	.cdm-carrinho__tabela thead th.product-quantity {
		text-align: center;
	}

	.cdm-carrinho__tabela thead th.product-price {
		text-align: right;
	}
}

tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	grid-template-areas:
		"foto nome"
		"qtd  preco";
	gap: var(--cdm-e-2) var(--cdm-e-3);
	align-items: center;
	padding: var(--cdm-e-4) 0;
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-carrinho__tabela tbody tr.woocommerce-cart-form__cart-item:last-of-type {
	border-bottom: 0;
}

@media (min-width: 768px) {
	tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 3.5rem minmax(0, 1fr) 9rem 9rem 2.5rem;
		grid-template-areas: "foto nome qtd preco remover";
		gap: var(--cdm-e-4);
	}
}

/* As células viram blocos do grid; o rótulo herdado da seção 3 sai. */
.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td,
.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item th {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td::before {
	content: none;
}

tr.woocommerce-cart-form__cart-item td.product-thumbnail { grid-area: foto; }
tr.woocommerce-cart-form__cart-item td.product-name      { grid-area: nome; }
tr.woocommerce-cart-form__cart-item td.product-quantity  { grid-area: qtd; }
tr.woocommerce-cart-form__cart-item td.product-price     { grid-area: preco; text-align: right; }

/* O smallscreen do Woo esconde a miniatura no celular; aqui ela fica sempre. */
.woocommerce-page .cdm-carrinho__tabela td.product-thumbnail,
.woocommerce .cdm-carrinho__tabela td.product-thumbnail {
	display: block;
}

.cdm-carrinho__tabela td.product-thumbnail img {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	max-width: none;
	object-fit: contain;
	border: 0;
	border-radius: var(--cdm-raio);
}

.cdm-carrinho__tabela td.product-name a {
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-azul);
	text-decoration: none;
}

/* Sem sublinhado no hover: na referência o nome do produto não reage como
   link de navegação — só a cor já indica que é clicável. */
.cdm-carrinho__tabela td.product-name a:hover {
	text-decoration: none;
}

/* Atributos da variação: dt já vem com "Rótulo:" do core (cart-item-data.php)
   — dt flutua à esquerda, dd (contém <p>, é bloco) escoa ao lado; cada par
   quebra numa linha nova pelo clear do dt seguinte. Sem pseudo-elemento. */
.cdm-carrinho__tabela td.product-name dl.variation {
	margin: var(--cdm-e-1) 0 0;
	font-size: var(--cdm-t-xs);
	line-height: 1.6;
	color: var(--cdm-texto-apagado);
	overflow: hidden; /* contém os floats do dt */
}

.cdm-carrinho__tabela td.product-name dl.variation dt {
	float: left;
	clear: left;
	margin: 0 var(--cdm-e-1) 0 0;
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-carrinho__tabela td.product-name dl.variation dd {
	margin: 0;
	color: var(--cdm-link);
}

.cdm-carrinho__tabela td.product-name dl.variation dd p {
	margin: 0;
}

/* --- preço unitário --- */

del.cdm-carrinho__preco-antigo {
	display: block;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

@media (min-width: 768px) {
	del.cdm-carrinho__preco-antigo {
		text-align: right;
	}
}

.cdm-carrinho__preco {
	display: block;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* --- stepper de quantidade --- */

.cdm-carrinho__qtd {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-1);
}

@media (min-width: 768px) {
	.cdm-carrinho__qtd {
		justify-content: center;
		width: 100%;
	}
}

.cdm-carrinho__qtd .quantity {
	display: block;
	margin: 0;
}

.cdm-carrinho__qtd input.qty {
	width: 2rem;
	padding: 0;
	text-align: center;
	border: 0;
	background: none;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
	appearance: textfield;
	-moz-appearance: textfield;
}

.cdm-carrinho__qtd input.qty::-webkit-outer-spin-button,
.cdm-carrinho__qtd input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

button.cdm-carrinho__qtd-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--cdm-cinza-300);
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-superficie);
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-sm);
	line-height: 1;
	cursor: pointer;
	transition: var(--cdm-transicao);
}

/* No limite (estoque cheio, ou 1 unidade no "menos") o botão fica apagado:
   é o que explica, sem texto, por que o clique não muda nada. */
button.cdm-carrinho__qtd-botao[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

button.cdm-carrinho__qtd-botao:hover,
button.cdm-carrinho__qtd-botao:focus-visible {
	border-color: var(--cdm-azul);
	color: var(--cdm-azul);
}

/* Sem JS os botões não fazem nada — ficam fora da tela. */
html:not(.cdm-js-ativo) button.cdm-carrinho__qtd-botao {
	display: none;
}

/* --- remover: só a lixeira, "Remover" fica para leitor de tela --- */

.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-subtotal,
.cdm-carrinho__tabela thead th.product-subtotal {
	display: none;
}

/* No celular não há coluna própria: o ícone flutua no canto superior
   direito do cartão. No desktop vira a 5ª coluna do grid (grid-area acima). */
.cdm-carrinho__tabela td.product-remove {
	position: absolute;
	top: var(--cdm-e-4);
	right: 0;
}

.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item {
	position: relative;
	padding-right: var(--cdm-e-6);
}

@media (min-width: 768px) {
	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item {
		position: static;
		padding-right: 0;
	}

	.cdm-carrinho__tabela td.product-remove {
		position: static;
		grid-area: remover;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

a.cdm-carrinho__remover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--cdm-raio-cheio);
	color: var(--cdm-cinza-300);
	text-decoration: none;
	transition: var(--cdm-transicao);
}

a.cdm-carrinho__remover span {
	display: none;
}

a.cdm-carrinho__remover:hover,
a.cdm-carrinho__remover:focus-visible {
	color: var(--cdm-vermelho);
	background: var(--cdm-cinza-100);
}

/* A linha de ações do form some: cupom e atualizar vivem na lateral e no JS.
   display:none não impede os campos (e o nonce) de serem enviados. */
td.cdm-carrinho__acoes {
	display: none;
}

/* Compartilhamento usado pelo atendimento. Utilitario discreto: nao disputa
   atencao com cupom ou finalizar compra. */
.cdm-cart-share-entry {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--cdm-e-2);
}

button.cdm-cart-share__trigger {
	padding: var(--cdm-e-1) var(--cdm-e-2);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: var(--cdm-e-1);
	cursor: pointer;
}

button.cdm-cart-share__trigger:hover,
button.cdm-cart-share__trigger:focus-visible {
	color: var(--cdm-azul);
}

button.cdm-cart-share__trigger:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: var(--cdm-e-1);
}

html.cdm-modal-aberto {
	overflow: hidden;
}

.cdm-cart-share-modal[hidden] {
	display: none;
}

.cdm-cart-share-modal {
	position: fixed;
	inset: 0;
	z-index: var(--cdm-z-modal);
	display: grid;
	place-items: center;
	padding: var(--cdm-e-4);
}

.cdm-cart-share-modal__fundo {
	position: absolute;
	inset: 0;
	background: var(--cdm-sobreposicao);
}

.cdm-cart-share-modal__painel {
	position: relative;
	width: 100%;
	max-width: var(--cdm-largura-modal-sm);
	padding: var(--cdm-e-8);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	background: var(--cdm-superficie);
	box-shadow: var(--cdm-sombra-lg);
	transform: translateY(var(--cdm-e-2));
	opacity: 0;
	transition: transform var(--cdm-transicao), opacity var(--cdm-transicao);
}

.cdm-cart-share-modal.is-open .cdm-cart-share-modal__painel {
	transform: translateY(0);
	opacity: 1;
}

button.cdm-cart-share-modal__fechar {
	position: absolute;
	top: var(--cdm-e-3);
	right: var(--cdm-e-3);
	display: grid;
	place-items: center;
	width: var(--cdm-alvo-toque);
	height: var(--cdm-alvo-toque);
	padding: 0;
	border: 0;
	border-radius: var(--cdm-raio-cheio);
	background: transparent;
	font-size: var(--cdm-t-2xl);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-texto-fraco);
	cursor: pointer;
}

button.cdm-cart-share-modal__fechar:hover,
button.cdm-cart-share-modal__fechar:focus-visible {
	background: var(--cdm-cinza-100);
	color: var(--cdm-azul);
}

.cdm-cart-share-modal__cabecalho {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: var(--cdm-e-2);
	margin: 0 0 var(--cdm-e-5);
}

.cdm-cart-share-modal__rotulo {
	margin: 0;
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-forte);
	text-transform: uppercase;
	color: var(--cdm-amarelo-escuro);
	white-space: nowrap;
}

.cdm-cart-share-modal h2 {
	margin: 0;
	font-size: var(--cdm-t-md);
	color: var(--cdm-azul);
	white-space: nowrap;
}

.cdm-cart-share-form label,
.cdm-cart-share-result label {
	display: block;
	margin-bottom: var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
}

.cdm-cart-share-form__campos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-3);
}

.cdm-cart-share-form__campos p {
	margin: 0 0 var(--cdm-e-3);
}

.cdm-cart-share-form__campos label span {
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-cart-share-form__enviar {
	width: 100%;
}

.cdm-cart-share-form__linha,
.cdm-cart-share-result__linha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--cdm-e-2);
}

.cdm-cart-share-modal input {
	width: 100%;
	min-height: var(--cdm-altura-controle);
	padding: var(--cdm-e-3);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	font: inherit;
	color: var(--cdm-texto);
	background: var(--cdm-branco);
}

.cdm-cart-share-modal input:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: var(--cdm-e-1);
}

.cdm-cart-share-modal button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cdm-altura-controle);
	padding: var(--cdm-e-3) var(--cdm-e-5);
	border: 0;
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-azul);
	color: var(--cdm-branco);
	font-weight: var(--cdm-peso-normal);
	cursor: pointer;
}

.cdm-cart-share-modal button.button:hover,
.cdm-cart-share-modal button.button:focus-visible {
	background: var(--cdm-azul-escuro);
	color: var(--cdm-branco);
}

.cdm-cart-share-form__status {
	min-height: var(--cdm-e-5);
	margin: var(--cdm-e-2) 0 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-verde);
}

.cdm-cart-share-form__status.is-error {
	color: var(--cdm-vermelho);
}

.cdm-cart-share-result {
	padding: var(--cdm-e-4);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	background: var(--cdm-fundo-alt);
}

.cdm-cart-share-result p {
	margin: var(--cdm-e-3) 0 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

@media (max-width: 639px) {
	.cdm-cart-share-modal__cabecalho {
		flex-wrap: wrap;
	}

	.cdm-cart-share-modal__painel {
		padding: var(--cdm-e-6);
	}

	.cdm-cart-share-form__linha,
	.cdm-cart-share-result__linha {
		grid-template-columns: minmax(0, 1fr);
	}

	.cdm-cart-share-form__campos {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.cdm-cart-share-modal .button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdm-cart-share-modal__painel {
		transition: none;
	}
}

/* --- faixa de garantias: uma caixa, três colunas com fio entre elas --- */

ul.cdm-garantias {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-4);
	margin: var(--cdm-e-5) 0 0;
	padding: var(--cdm-e-4) var(--cdm-e-5);
	list-style: none;
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
}

@media (min-width: 640px) {
	ul.cdm-garantias {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cdm-garantias__item + .cdm-garantias__item {
		border-left: 1px solid var(--cdm-cinza-200);
		padding-left: var(--cdm-e-4);
	}
}

.cdm-garantias__item {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
}

.cdm-garantias__icone {
	font-size: var(--cdm-t-lg);
	color: var(--cdm-azul);
	flex: 0 0 auto;
}

.cdm-garantias__texto {
	display: flex;
	flex-direction: column;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
	line-height: var(--cdm-altura-normal);
}

.cdm-garantias__texto strong {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

/* ==========================================================================
   17. Resumo do pedido (lateral)
   ========================================================================== */

.cdm-carrinho-pagina .cdm-carrinho__lateral .cart_totals {
	float: none;
	width: 100%;
}

/* A referência usa resumo solto de até 430px. O cartão externo herdado
   deixava tudo 40px menor e duplicava borda/sombra do cartão de frete. */
.cdm-carrinho-pagina .cdm-carrinho__lateral {
	width: 100%;
	max-width: 26.875rem;
	margin-inline: auto;
}

/*
 * Cópia fiel do HTML/CSS que o cliente mandou (01/09/2026). As medidas e as
 * cores são as da referência, não as da marca — ver o bloco `--cdm-resumo-*`
 * em tokens.css sobre o porquê de terem tokens próprios.
 */
/* O padding de cima é o mesmo do <thead> da tabela de produtos (--cdm-e-4):
   assim "Resumo do pedido" nasce na mesma linha do cabeçalho "Produto", já
   que as duas colunas começam no mesmo topo. */
/* Mesmo fundo, mesmo fio e mesmo raio da tabela de produtos ao lado: as duas
   colunas são o mesmo tipo de superfície, não podem parecer materiais
   diferentes. */
.cdm-carrinho-pagina .cdm-totais {
	padding: var(--cdm-e-4) 1.375rem 1.375rem;
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	box-shadow: none;
	color: var(--cdm-resumo-texto);
}

/* Dentro do cartão branco, o cartão de entrega não precisa de sombra: viraria
   caixa dentro de caixa. Fica só o fio e o fundo mais claro. */
.cdm-carrinho-pagina .cdm-frete__cartao {
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	box-shadow: none;
}

@media (min-width: 900px) {
	.cdm-carrinho__lateral {
		position: sticky;
		top: var(--cdm-e-4);
		margin-inline: 0;
	}
}

/* `h2.` no seletor porque o base.css tem `.cdm-pagina__corpo h2 { margin:
   1.5rem 0 ... }`, que é mais específico que uma classe sozinha e empurrava
   o título 24px pra baixo — desalinhando ele do cabeçalho da tabela ao lado. */
.cdm-totais h2.cdm-totais__titulo {
	margin: 0 0 1.125rem;
	font-size: 1.3125rem;
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-texto);
}

/* --- abas Receber no Endereço / Retirar na Loja --- */

.cdm-totais__modo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
}

button.cdm-totais__modo-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 3rem;
	padding: 0 0.5rem;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-resumo-aba-texto);
	background: var(--cdm-resumo-aba-fundo);
	border: 0;
	border-radius: 1.5rem;
	cursor: pointer;
	transition: var(--cdm-transicao);
}

button.cdm-totais__modo-botao .cdm-icone {
	font-size: 1rem;
}

button.cdm-totais__modo-botao.is-ativo {
	color: var(--cdm-branco);
	background: var(--cdm-resumo-azul-aba);
}

/* --- cartão da entrega (endereço + Alterar + opção escolhida) --- */

.cdm-totais__tabela tr.cdm-frete,
.cdm-totais__tabela tr.woocommerce-shipping-totals {
	display: block;
	padding: 0 0 1.375rem;
}

.cdm-frete__cartao {
	padding: 0.875rem;
	background: var(--cdm-superficie);
	border-radius: 0.875rem;
	box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
}

.cdm-frete__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
}

.cdm-frete__destino {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--cdm-resumo-texto);
}

.cdm-frete__destino strong {
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-resumo-azul);
}

/* Botão "Alterar" e botão "Adicionar" (cupom): a mesma pílula de contorno. */
button.cdm-cep__botao,
button.cdm-totais__cupom-botao {
	flex: 0 0 auto;
	height: 2.375rem;
	padding: 0 1.25rem;
	font-family: var(--cdm-fonte);
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-resumo-azul-botao);
	background: var(--cdm-superficie);
	border: 1.5px solid var(--cdm-resumo-azul-botao);
	border-radius: 1.1875rem;
	cursor: pointer;
	transition: var(--cdm-transicao);
}

button.cdm-cep__botao:hover,
button.cdm-totais__cupom-botao:hover {
	background: var(--cdm-azul-claro);
}

/* Painel do CEP: dropdown ancorado no botão, fora do fluxo — assim abrir e
   fechar não empurra nem espreme o endereço ao lado. */
.cdm-cep {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}

.cdm-cep__painel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 5;
	display: grid;
	gap: 0.5rem;
	width: 15rem;
	padding: 0.875rem;
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: 0.75rem;
	box-shadow: var(--cdm-sombra-lg);
}

/* `hidden` é só `display:none` da folha do navegador — qualquer `display`
   nosso o atropela. Esta regra devolve o atributo ao jogo (é ele que o
   carrinho.js liga/desliga no clique do "Alterar"). */
.cdm-cep__painel[hidden] {
	display: none;
}

.cdm-cep__campo {
	margin: 0;
}

.cdm-cep__rotulo {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.75rem;
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-resumo-azul);
}

input.cdm-cep__entrada {
	width: 100%;
	height: 2.375rem;
	padding: 0 0.9375rem;
	font-family: var(--cdm-fonte);
	font-size: 0.8125rem;
	color: var(--cdm-resumo-texto);
	border: 1px solid var(--cdm-resumo-campo-fio);
	border-radius: 1.1875rem;
}

input.cdm-cep__entrada::placeholder {
	color: var(--cdm-resumo-campo-vazio);
}

button.cdm-cep__enviar {
	height: 2.375rem;
	font-family: var(--cdm-fonte);
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-branco);
	background: var(--cdm-resumo-azul-botao);
	border: 0;
	border-radius: 1.1875rem;
	cursor: pointer;
}

/* --- opção de entrega escolhida --- */

.cdm-frete__opcao,
summary.cdm-frete__opcao-resumo {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	min-height: 3.75rem;
	padding: 0.625rem 0.8125rem;
	background: var(--cdm-resumo-opcao-fundo);
	border-radius: 0.5625rem;
}

summary.cdm-frete__opcao-resumo {
	cursor: pointer;
	list-style: none;
}

summary.cdm-frete__opcao-resumo::-webkit-details-marker {
	display: none;
}

.cdm-frete__opcao-nome {
	min-width: 0;
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-forte);
	line-height: 1.3;
	color: var(--cdm-resumo-texto);
}

.cdm-frete__opcao-data {
	display: block;
	margin-top: 1px;
	font-size: 0.75rem;
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-resumo-texto-fraco);
}

.cdm-frete__opcao-preco {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 1.125rem;
	border-left: 1px solid var(--cdm-resumo-fio-claro);
	font-size: 0.875rem;
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-resumo-texto);
	white-space: nowrap;
}

.cdm-frete__opcao-seta {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--cdm-resumo-texto);
	transition: transform var(--cdm-transicao);
}

details.cdm-frete__opcao[open] .cdm-frete__opcao-seta {
	transform: rotate(180deg);
}

/* Aberto, o resumo sai de cena: ele repetiria, em cima da lista, exatamente
   a opção que já aparece marcada dentro dela. Escolher uma opção recarrega o
   resumo por AJAX e a caixa volta fechada, com o método novo. */
details.cdm-frete__opcao[open] > summary.cdm-frete__opcao-resumo {
	display: none;
}

.cdm-frete__gratis {
	font-size: 1em;
	font-weight: inherit;
	color: inherit;
	white-space: nowrap;
}

/* --- lista de alternativas, dentro do <details> aberto --- */

ul.cdm-frete__lista {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdm-frete__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 0.8125rem;
	background: var(--cdm-resumo-opcao-fundo);
	border-radius: 0.5625rem;
}

.cdm-frete__item:has(input[type="radio"]:checked) {
	outline: 1.5px solid var(--cdm-resumo-azul-botao);
}

.cdm-frete__item input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--cdm-resumo-azul-botao);
}

.cdm-frete__item label {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--cdm-resumo-texto);
	cursor: pointer;
}

.cdm-frete__item .woocommerce-Price-amount {
	font-weight: var(--cdm-peso-forte);
	white-space: nowrap;
}

/* --- cupom --- */

.cdm-totais__cupom {
	margin: 0;
}

.cdm-totais__rotulo {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-resumo-azul-botao);
}

.cdm-totais__cupom-linha {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.625rem;
}

.cdm-totais__cupom-linha input.input-text {
	width: 100%;
	min-width: 0;
	height: 2.375rem;
	padding: 0 0.9375rem;
	font-family: var(--cdm-fonte);
	font-size: 0.8125rem;
	color: var(--cdm-resumo-texto);
	border: 1px solid var(--cdm-resumo-campo-fio);
	border-radius: 1.1875rem;
}

.cdm-totais__cupom-linha input.input-text::placeholder {
	color: var(--cdm-resumo-campo-vazio);
}

/* --- extrato: Subtotal / Frete / TOTAL, com os fios da referência --- */

.cdm-totais__tabela,
.cdm-totais__tabela tbody {
	display: block;
	width: 100%;
	margin: 0;
}

/* 4px em cima + 4px embaixo = os 8px de respiro entre linhas da referência
   (lá é `margin: 8px 0`, que numa lista em coluna colapsa para 8px entre
   uma linha e a seguinte). */
.cdm-totais__tabela tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.125rem 0;
}

/* O fio acima do Subtotal é o mesmo `divider` da referência (1px, 20px de
   respiro). Vive na primeira linha do extrato porque a linha da entrega (o
   cartão) vem antes dela, dentro da mesma tabela. */
.cdm-totais__tabela tr.cart-subtotal {
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--cdm-resumo-fio);
}

.cdm-totais__tabela tr th,
.cdm-totais__tabela tr td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-resumo-texto);
	text-align: right;
}

/* Só a borda, e com peso extra: o woocommerce.css põe `border-top` em toda
   célula de .shop_table e isso desenhava meio fio entre Subtotal e Frete. Os
   únicos fios do desenho são os dois divisores, que ficam nas LINHAS. Nada
   além de `border` aqui — um seletor mais forte com outras propriedades
   passaria por cima do alinhamento e do tamanho do TOTAL, definidos abaixo. */
.woocommerce .cdm-totais table.cdm-totais__tabela tbody tr th,
.woocommerce .cdm-totais table.cdm-totais__tabela tbody tr td,
.woocommerce-page .cdm-totais table.cdm-totais__tabela tbody tr th,
.woocommerce-page .cdm-totais table.cdm-totais__tabela tbody tr td {
	border: 0;
}

/* A tabela do cartão de entrega não entra no extrato: sem fio, sem respiro
   de linha, só o cartão. */
.cdm-totais__tabela--frete,
.cdm-totais__tabela--frete tr {
	margin: 0;
	padding: 0;
	border: 0;
}

.cdm-totais__tabela tr th {
	text-align: left;
}

.cdm-totais__tabela .cart-discount td {
	color: var(--cdm-verde);
}

.cdm-totais__tabela .order-total {
	margin-top: 0.875rem;
	padding: 0.875rem 0 0;
	border-top: 1px solid var(--cdm-resumo-fio);
}

.cdm-totais__tabela .order-total th,
.cdm-totais__tabela .order-total td {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--cdm-resumo-azul);
}

/* --- formas de pagamento, logo abaixo do TOTAL --- */

ul.cdm-totais__formas {
	display: grid;
	gap: 0.375rem;
	margin: 0.75rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--cdm-resumo-fio);
	list-style: none;
}

.cdm-totais__forma {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--cdm-resumo-texto);
}

.cdm-totais__forma strong {
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-resumo-azul);
}

.cdm-totais__forma-icone {
	flex: 0 0 auto;
	width: 1rem;
	font-size: 0.875rem;
	color: var(--cdm-resumo-azul-botao);
	text-align: center;
}

/* --- botão e "Continuar comprando" --- */

.cdm-totais__acao {
	display: block;
	width: 100%;
	margin: 1.1875rem 0 0;
}

.cdm-carrinho__lateral .checkout-button {
	display: flex !important;                          /* vence a folha do wc-smart-checkout */
	width: 100% !important;                            /* idem */
	gap: 0.625rem;
	height: 3.375rem;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: var(--cdm-peso-forte);
	border-radius: 1.6875rem !important;               /* idem */
	background: var(--cdm-resumo-verde) !important;    /* idem, e o YellowPencil */
	border-color: var(--cdm-resumo-verde) !important;  /* idem */
}

.cdm-carrinho__lateral .checkout-button .cdm-icone {
	font-size: 1.25rem;
}

p.cdm-totais__continuar {
	margin: 1.125rem 0 0;
	text-align: center;
}

p.cdm-totais__continuar a {
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-resumo-azul);
	text-decoration: underline;
}

/* --- modo Retirar na Loja: sem endereço, sem troca de método ---
   Na retirada não existe endereço de entrega pra mostrar nem alterar, e o
   ponto de retirada é sempre o mesmo — a caixa vira informativa. O
   pointer-events tira o clique do summary sem precisar mexer no HTML (o
   <details> continua lá, só não abre). */

.cdm-totais--retirada .cdm-frete__topo {
	display: none;
}

.cdm-totais--retirada .cdm-frete__opcao-seta {
	display: none;
}

.cdm-totais--retirada summary.cdm-frete__opcao-resumo {
	cursor: default;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Acertos finais contra o woocommerce.css (17.z)

   Todas as regras abaixo existem por um motivo só: a tabela do resumo e a
   do cartão de entrega também carregam a classe shop_table, e o
   woocommerce.css veste essa classe com borda, cantos arredondados e
   alinhamento próprios, em seletores de peso maior que o de uma classe só.
   Nada aqui é decoração nova — é só devolver o desenho da referência.
   -------------------------------------------------------------------------- */

/* Sem moldura de tabela: os únicos fios do resumo são os dois divisores. */
.woocommerce .cdm-totais table.cdm-totais__tabela,
.woocommerce-page .cdm-totais table.cdm-totais__tabela {
	border: 0;
	border-radius: 0;
	margin: 0;
}

/* O conteúdo do cartão de entrega mora dentro de um , que herdaria o
    das linhas de valor. */
.woocommerce .cdm-totais table.cdm-totais__tabela tr.cdm-frete td,
.woocommerce .cdm-totais table.cdm-totais__tabela tr.woocommerce-shipping-totals td,
.cdm-totais__tabela tr.cdm-frete td {
	text-align: left;
}

/* Rótulos do extrato: peso normal, como na referência (o  do navegador
   nasce em negrito). */
.woocommerce .cdm-totais table.cdm-totais__tabela tbody tr th,
.cdm-totais__tabela tr th {
	font-weight: var(--cdm-peso-normal);
	text-align: left;
}

/* O TOTAL é a única linha em negrito. */
.woocommerce .cdm-totais table.cdm-totais__tabela tbody tr.order-total th,
.woocommerce .cdm-totais table.cdm-totais__tabela tbody tr.order-total td,
.cdm-totais__tabela tr.order-total th,
.cdm-totais__tabela tr.order-total td {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--cdm-resumo-azul);
}

/* --------------------------------------------------------------------------
   17.m Celular

   O woocommerce-smallscreen.css assume tabela de carrinho em modo "cartão
   por linha": ele imprime `attr(data-title) ": "` num `::before` de cada
   célula e joga tudo à direita. No nosso resumo o rótulo já está no `<th>`
   ao lado do valor, então aquilo virava "Subtotal: Subtotal R$ 66,90" —
   e na linha de entrega colava um "Entrega:" solto em cima do cartão.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* Fora os rótulos duplicados do smallscreen (nas duas tabelas). */
	.woocommerce .cdm-totais table.cdm-totais__tabela tr td::before,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr td::before,
	.woocommerce table.cdm-carrinho__tabela tr td::before,
	.woocommerce-page table.cdm-carrinho__tabela tr td::before {
		content: none;
	}

	/* O smallscreen ESCONDE o `<th>` (ele contava com o `::before` que acabou
	   de sair) — sem isto, "Subtotal" e "TOTAL" sumiriam e sobrariam só os
	   valores soltos. E ele também empilha a linha (`tr` block, `td` a 100%),
	   o que jogava o valor para baixo do rótulo; aqui a linha continua sendo
	   rótulo à esquerda e valor à direita, como no desktop. */
	.woocommerce .cdm-totais table.cdm-totais__tabela tr,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.woocommerce .cdm-totais table.cdm-totais__tabela tr th,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr th {
		display: block;
		width: auto;
		text-align: left;
	}

	.woocommerce .cdm-totais table.cdm-totais__tabela tr td,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr td {
		width: auto;
	}

	/* A linha da entrega é a exceção: ela é o cartão inteiro, em coluna. */
	.woocommerce .cdm-totais table.cdm-totais__tabela tr.cdm-frete,
	.woocommerce .cdm-totais table.cdm-totais__tabela tr.woocommerce-shipping-totals,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr.cdm-frete,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr.woocommerce-shipping-totals {
		display: block;
	}

	/* E pinta faixa alternada nas linhas: aqui o extrato é liso. */
	.woocommerce .cdm-totais table.cdm-totais__tabela tr,
	.woocommerce .cdm-totais table.cdm-totais__tabela tr td,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr td {
		background: none;
	}

	/* `!important` porque o smallscreen usa `text-align: right !important` em
	   toda célula — e o cartão de entrega (endereço, aviso de CEP, opções)
	   precisa ler da esquerda pra direita como qualquer texto. */
	.woocommerce .cdm-totais table.cdm-totais__tabela tr.cdm-frete td,
	.woocommerce .cdm-totais table.cdm-totais__tabela tr.woocommerce-shipping-totals td,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr.cdm-frete td,
	.woocommerce-page .cdm-totais table.cdm-totais__tabela tr.woocommerce-shipping-totals td {
		text-align: left !important;
	}

	/* A régua de etapas mostrava só o rótulo da etapa atual — as outras duas
	   viravam bolinhas sem legenda. Cabe as três: fonte menor e traço curto. */
	.cdm-etapas__item:not(.cdm-etapas__item--ativa) .cdm-etapas__rotulo {
		display: inline;
	}

	.cdm-etapas__item + .cdm-etapas__item::before {
		display: block;
		width: 1rem;
		margin-right: var(--cdm-e-1);
	}

	.cdm-etapas__item {
		gap: var(--cdm-e-1);
		font-size: var(--cdm-t-xs);
	}

	.cdm-etapas__icone {
		width: 1.5rem;
		height: 1.5rem;
	}

	/* Aviso "digite seu endereço" e o botão Alterar: alinhados à esquerda,
	   como o resto do cartão. */
	.cdm-totais .woocommerce-shipping-destination,
	.cdm-totais .cdm-frete__destino,
	.cdm-totais__tabela tr.cdm-frete td {
		text-align: left;
	}

	/* Botão "Alterar" mais estreito: com o padding do desktop ele empurrava o
	   CEP para uma segunda linha. */
	button.cdm-cep__botao {
		padding: 0 var(--cdm-e-3);
	}

	/* O resumo ocupa a largura toda no celular. */
	.cdm-carrinho-pagina .cdm-carrinho__lateral {
		max-width: none;
	}

	.cdm-carrinho-pagina .cdm-totais {
		padding: var(--cdm-e-4);
	}
}

/* ==========================================================================
   18. "Você também pode precisar" — prateleira de cross-sell
   ========================================================================== */

.woocommerce-page .cdm-carrinho-sugestoes,
.cdm-carrinho-sugestoes {
	float: none;
	width: 100%;
	margin: var(--cdm-e-6) 0 0;
}

@media (min-width: 900px) {
	.cdm-carrinho-pagina .cdm-carrinho-sugestoes {
		grid-column: 1 / -1;
	}
}

.cdm-carrinho-sugestoes__cabecalho {
	margin-bottom: var(--cdm-e-1);
}

h2.cdm-carrinho-sugestoes__titulo {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

.cdm-carrinho-sugestoes__titulo .cdm-icone {
	color: var(--cdm-amarelo);
}

p.cdm-carrinho-sugestoes__texto {
	margin: 0 0 var(--cdm-e-4);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.cdm-carrinho-sugestoes__grade {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 11.5rem;
	gap: var(--cdm-gap-grade);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--cdm-e-2);
	-webkit-overflow-scrolling: touch;
}

.cdm-carrinho-sugestoes__grade > * {
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.cdm-carrinho-sugestoes__grade {
		grid-auto-flow: row;
		grid-auto-columns: unset;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow-x: visible;
	}
}

/* ==========================================================================
   19. Rodapé simplificado do carrinho
   -------------------------------------------------------------------------
   Substitui o rodapé completo só em /carrinho/ — sem links institucionais,
   pra não desviar da conversão. Selo + linha legal, nada além disso.
   ========================================================================== */

/* Mesma faixa grossa do rodapé completo, para a divisão com o conteúdo ser a
   mesma no funil de compra. */
/* Fio fino e cinza, igual aos divisores do resumo — a faixa grossa e quente
   do rodapé completo pesava demais nesta página. */
footer.cdm-rodape--simples {
	background: var(--cdm-superficie);
	border-top: 1px solid var(--cdm-resumo-fio);
	padding-block: var(--cdm-e-4);
	text-align: center;
}

/* Duas colunas — cada uma com rótulo em cima e a fileira de imagens embaixo.
   Empilha e centraliza no celular (largura curta não sobra espaço pra
   espalhar); a partir de 640px abre pra pontas do container, como a
   referência — "Meios de Pagamento" na esquerda, "Segurança" na direita. */
.cdm-rodape-simples__corpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cdm-e-4);
	margin: 0 0 var(--cdm-e-3);
	text-align: left;
}

@media (min-width: 640px) {
	.cdm-rodape-simples__corpo {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
}

.cdm-rodape-simples__bloco {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-2);
}

.cdm-rodape-simples__rotulo {
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

/* .cdm-rodape-simples__bandeiras é a mesma grade cdm-rodape__miniaturas do
   rodapé completo (rodape.css) — tamanho e borda de cada caixinha vêm de lá,
   propositalmente, pra ficar idêntica à home. Só a distribuição muda: aqui é
   uma única fileira (8 colunas, sem quebra), não o bloco 4×2 da home — a
   página do carrinho tem largura de sobra pra isso, o rodapé institucional
   não. body.woocommerce-cart pra não vazar pra home. Abaixo de 640px volta
   pro bloco 4×2: 8 colunas nessa largura deixaria a bandeira ilegível.
   Coluna de largura FIXA (3rem), não `1fr`: em tela larga o `minmax(0, 1fr)`
   espalhava as 8 colunas pra preencher todo o espaço livre do flex, e cada
   bandeira crescia junto — ficava enorme comparada aos selos de segurança
   ao lado. Largura fixa mantém o mesmo tamanho da caixinha da home. */
@media (min-width: 640px) {
	body.woocommerce-cart .cdm-rodape-simples__bandeiras {
		grid-template-columns: repeat(8, 3rem);
		max-width: none;
	}
}

.cdm-rodape-simples__selos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cdm-e-3);
}

/* Mesma altura da caixinha de pagamento (3rem largura × 5/3 ≈ 1.8rem de
   altura) — os dois blocos do rodapé ficam no mesmo peso visual. */
.cdm-rodape-simples__selos img {
	height: 1.15rem;
	width: auto;
}

.cdm-rodape-simples__legal {
	margin: 0;
	text-align: center;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

/* ==========================================================================
   20. Sem barra de avisos no carrinho
   -------------------------------------------------------------------------
   Página de conversão: a barra de "Há mais de 40 anos / Lojas / WhatsApp /
   Televendas" só distrai — some junto com o rodapé completo (seção 19).
   Escopado por body class (woocommerce-cart, do core) pra não afetar
   /finalizar-compra/, que também carrega esta folha mas mantém a barra.
   ========================================================================== */

body.woocommerce-cart .cdm-cabecalho__aviso {
	display: none;
}

/* ==========================================================================
   21. Checkout de três etapas (31/08/2026)
   --------------------------------------------------------------------------
   Substitui a grade de duas colunas da seção 8. Uma coluna por etapa, na
   ordem em que a decisão acontece: quem é você → para onde vai → como paga.
   O que veio da pesquisa de checkout e está materializado aqui:

   - custo total sempre visível (coluna 3 grudada na rolagem; no celular, a
     barra fixa de total);
   - progresso explícito, mas sem esconder passo: número na etapa e visto
     verde quando os obrigatórios dela estão preenchidos;
   - um campo por linha dentro de cada etapa — formulário de coluna única
     preenche mais rápido do que dois campos lado a lado;
   - cupom e login discretos: campo de cupom em destaque faz o cliente sair
     para caçar código e não voltar;
   - âncoras de segurança coladas no botão, onde a dúvida aparece.
   ========================================================================== */

.cdm-checkout {
	margin-block: var(--cdm-e-6);
}

.cdm-checkout__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-4);
	align-items: start;
}

/* `display: contents` dissolve o #customer_details: .col-1 e .col-2 continuam
   existindo para o checkout.js do Woo, mas caem direto na grade externa e
   viram as etapas 1 e 2. Sem isto, as duas ficariam empilhadas numa coluna. */
.cdm-checkout .cdm-checkout__dados {
	display: contents;
}

@media (min-width: 1024px) {
	.cdm-checkout__grade {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24rem;
		gap: var(--cdm-e-5);
	}
}

/* --- o cartão de uma etapa --- */

.cdm-checkout .cdm-checkout__passo {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-4);
	min-width: 0;
	padding: var(--cdm-e-5);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	box-shadow: var(--cdm-sombra-sm);
}

@media (min-width: 1024px) {
	.cdm-checkout__passo--pagamento {
		position: sticky;
		top: var(--cdm-e-4);
	}
}

/* --- cabeçalho numerado --- */

.cdm-passo__cabecalho {
	display: flex;
	align-items: flex-start;
	gap: var(--cdm-e-3);
	padding-bottom: var(--cdm-e-4);
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-passo__numero {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	line-height: 1;
}

/* Etapa com todos os obrigatórios preenchidos vira visto verde. É o único
   feedback de progresso da página — e o que evita a pergunta "já dá pra
   pagar?" no meio do formulário. */
.cdm-checkout__passo--completo .cdm-passo__numero {
	background: var(--cdm-verde-comprar);
	color: var(--cdm-branco);
	font-size: 0;
}

.cdm-checkout__passo--completo .cdm-passo__numero::before {
	content: "\f00c"; /* fa-check */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: var(--cdm-t-sm);
}

.cdm-passo__texto {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-1);
	min-width: 0;
}

.cdm-passo__titulo {
	display: flex;
	flex-direction: column;
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-azul);
}

.cdm-passo__ordem {
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-forte);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cdm-texto-apagado);
}

.cdm-passo__ajuda {
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-apagado);
}

/* Os títulos que o WooCommerce imprime dentro dos blocos ("Detalhes de
   cobrança", "Seu pedido") repetiriam o cabeçalho da etapa. */
/* O módulo de hierarquia de títulos do tema rebaixa esses h3 para h2 com a
   classe .cdm-tam-h3 — por isso o seletor aceita os dois. */
.cdm-checkout .woocommerce-billing-fields > h2,
.cdm-checkout .woocommerce-billing-fields > h3,
.cdm-checkout__passo--pagamento > #order_review_heading {
	display: none;
}

/* --- campos: uma coluna por etapa --- */

.cdm-checkout .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
.cdm-checkout .woocommerce-additional-fields__field-wrapper,
.cdm-checkout .cdm-checkout__endereco {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-3);
}

/* A regra de 640px da seção 8 punha dois campos por linha em toda etapa; numa
   coluna de ~380px isso espremia rótulo e valor. Só os pares curtos voltam a
   dividir a linha, e apenas onde há largura para isso. */
@media (min-width: 640px) {
	.cdm-checkout .woocommerce-billing-fields__field-wrapper,
	.cdm-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.cdm-checkout .form-row-first,
	.cdm-checkout .form-row-last,
	.cdm-checkout .form-row-wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 480px) {
	.cdm-checkout .cdm-checkout__endereco,
	.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
	.cdm-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cdm-checkout .cdm-checkout__endereco > .form-row,
	.cdm-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
	.cdm-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}

	/* CEP, número, complemento, bairro e cidade são curtos: cabem aos pares e
	   encurtam a lista de linhas do endereço de 8 para 5. */
	.cdm-checkout #billing_postcode_field,
	.cdm-checkout #billing_number_field,
	.cdm-checkout #billing_address_2_field,
	.cdm-checkout #billing_neighborhood_field,
	.cdm-checkout #billing_city_field,
	.cdm-checkout #shipping_postcode_field,
	.cdm-checkout #shipping_number_field,
	.cdm-checkout #shipping_address_2_field,
	.cdm-checkout #shipping_neighborhood_field,
	.cdm-checkout #shipping_city_field,
	.cdm-checkout #billing_first_name_field,
	.cdm-checkout #billing_last_name_field,
	.cdm-checkout #billing_cpf_field,
	.cdm-checkout #billing_cnpj_field,
	.cdm-checkout #billing_company_field {
		grid-column: span 1;
	}
}

.cdm-checkout .form-row label {
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto-fraco);
}

/* Alvo de toque de 44px: campo baixo é a causa boba de erro de digitação no
   celular, e cada erro aqui custa um pedido. */
.cdm-checkout input[type="text"],
.cdm-checkout input[type="tel"],
.cdm-checkout input[type="email"],
.cdm-checkout input[type="password"],
.cdm-checkout input[type="number"],
.cdm-checkout input[type="date"],
.cdm-checkout select,
.cdm-checkout .select2-container .select2-selection--single {
	min-height: var(--cdm-alvo-toque);
}

/* A explicação de por que o dado é pedido ("enviamos o rastreio para cá")
   fica abaixo do campo, em letra miúda. */
.cdm-checkout .form-row .description {
	margin: var(--cdm-e-1) 0 0;
	font-size: var(--cdm-t-2xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout #billing_country_field {
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout #billing_country_field strong {
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

/* --- etapa 2: entrega em outro endereço e observação --- */

.cdm-checkout .woocommerce-shipping-fields,
.cdm-checkout .woocommerce-additional-fields {
	margin-top: 0;
	padding-top: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
}

.cdm-checkout #ship-to-different-address {
	margin: 0;
	font-size: var(--cdm-t-base);
}

.cdm-checkout #ship-to-different-address label {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto);
}

.cdm-checkout .woocommerce-additional-fields h3 {
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-checkout .woocommerce-additional-fields textarea {
	min-height: 4.5rem;
}

/* --- etapa 2: opções de frete vindas do resumo --- */

.cdm-checkout__frete[hidden] {
	display: none;
}

.cdm-checkout__frete {
	padding-top: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
}

h3.cdm-checkout__frete-titulo {
	margin: 0 0 var(--cdm-e-3);
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__lista {
	display: grid;
	gap: var(--cdm-e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdm-checkout__frete .cdm-frete__item {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
	min-height: var(--cdm-alvo-toque);
	margin: 0;
	padding: var(--cdm-e-3);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	cursor: pointer;
}

.cdm-checkout__frete .cdm-frete__item:hover {
	border-color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__item:has(input:checked) {
	border-color: var(--cdm-azul);
	background: var(--cdm-azul-claro);
}

.cdm-checkout__frete .cdm-frete__item label {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cdm-e-2);
	margin: 0;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	text-transform: none;
	color: var(--cdm-texto);
	cursor: pointer;
}

p.cdm-checkout__frete-prazo {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: var(--cdm-e-3) 0 0;
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout__frete p.cdm-frete__subtitulo {
	margin: 0 0 var(--cdm-e-2);
}

/* --- etapa 3: resumo --- */

.cdm-checkout__passo--pagamento .cdm-resumo {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

p.cdm-resumo__editar {
	margin: 0;
	font-size: var(--cdm-t-xs);
}

.cdm-resumo__editar a {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-2);
	color: var(--cdm-link);
	text-decoration: none;
}

.cdm-resumo__editar a:hover {
	text-decoration: underline;
}

/* Item com miniatura: o cliente confere o que está comprando sem sair. */
.cdm-resumo__tabela thead {
	display: none;
}

.cdm-resumo__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cdm-e-3);
}

img.cdm-resumo__foto {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	object-fit: contain;
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	background: var(--cdm-branco);
}

.cdm-resumo__nome {
	display: block;
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto);
}

.cdm-resumo__tabela tbody .product-quantity {
	color: var(--cdm-texto-apagado);
}

.cdm-resumo__tabela tbody td.product-total {
	white-space: nowrap;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
}

.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td {
	font-size: var(--cdm-t-sm);
}

/* Linha de entrega no resumo: as opções foram para a etapa 2 e aqui fica só o
   que foi escolhido — repetir a lista nas duas colunas confundiria. */
.cdm-resumo__frete {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--cdm-e-1);
	text-align: right;
}

.cdm-resumo__frete-nome {
	font-size: var(--cdm-t-2xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-resumo__frete-valor {
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
}

.cdm-resumo__tabela .woocommerce-shipping-totals td {
	text-align: right;
}

/* --- etapa 3: cupom e login, discretos de propósito --- */

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	margin: 0 0 var(--cdm-e-3);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	background: var(--cdm-fundo-alt);
	border-color: var(--cdm-cinza-200);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-fraco);
}

/* --- etapa 3: pagamento --- */

.cdm-pagamento {
	margin-top: var(--cdm-e-4);
}

.cdm-pagamento__lista > li {
	padding: var(--cdm-e-3);
	border-color: var(--cdm-cinza-200);
}

.cdm-pagamento__lista > li:has(input:checked) {
	border-color: var(--cdm-azul);
	background: var(--cdm-azul-claro);
}

.cdm-pagamento__lista > li > label {
	min-height: var(--cdm-alvo-toque);
	font-size: var(--cdm-t-sm);
}

.cdm-pagamento #place_order {
	min-height: var(--cdm-alvo-toque);
	border-radius: var(--cdm-raio-cheio) !important; /* mesma pílula do carrinho */
}

/* --- selos junto do botão --- */

ul.cdm-checkout__selos {
	display: grid;
	gap: var(--cdm-e-2);
	margin: var(--cdm-e-4) 0 0;
	padding: 0;
	list-style: none;
}

.cdm-checkout__selo {
	display: flex;
	align-items: flex-start;
	gap: var(--cdm-e-2);
	font-size: var(--cdm-t-2xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout__selo .cdm-icone {
	color: var(--cdm-verde);
}

/* A barra fixa de total do celular saiu a pedido do dono (03/09/2026). */
/* Com `display: contents` no #customer_details, os pseudo-elementos de
   clearfix que o woocommerce-layout.css pendura em `.col2-set` deixam de ser
   invisíveis e viram DOIS itens da grade — foi o que empurrava o pagamento
   para uma segunda fileira. O mesmo arquivo dá `float` e `width: 48%` às
   colunas, medidas de um layout de float que aqui não existe mais. */
.cdm-checkout .cdm-checkout__dados::before,
.cdm-checkout .cdm-checkout__dados::after {
	content: none;
}

.cdm-checkout .cdm-checkout__dados > .col-1,
.cdm-checkout .cdm-checkout__dados > .col-2 {
	float: none;
	width: auto;
}

/* Posição explícita: auto-placement em grade com itens de origens diferentes
   (core, plugins) é frágil — cada etapa fica na sua coluna, sempre. */
@media (min-width: 1024px) {
	.cdm-checkout .cdm-checkout__passo--dados {
		grid-column: 1;
	}

	.cdm-checkout .cdm-checkout__passo--entrega {
		grid-column: 2;
	}

	.cdm-checkout .cdm-checkout__passo--pagamento {
		grid-column: 3;
		grid-row: 1;
	}
}

/* --- acertos de convivência com o CSS do WooCommerce (31/08/2026) --- */

/* O woocommerce.css dá `float: right` ao #place_order. Com o botão flutuando,
   os selos logo abaixo eram espremidos ao lado dele e nasciam com 0px de
   largura, aparecendo por baixo do botão. */
.cdm-pagamento #place_order {
	float: none;
}

ul.cdm-checkout__selos {
	clear: both;
}

/* O Woo envolve todo campo num <span class="woocommerce-input-wrapper">
   inline. Input com width:100% dentro de um span inline mede a largura do
   conteúdo, não a da célula — era o que fazia Nome, Número e Bairro nascerem
   com um terço da largura enquanto E-mail saía inteiro. */
.cdm-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* País: a loja vende só para o Brasil e o campo é um <input type="hidden">
   com um rótulo ao lado. Uma linha inteira para uma informação que não muda
   afasta o CEP do topo da etapa. O input continua no formulário. */
.cdm-checkout #billing_country_field,
.cdm-checkout #shipping_country_field {
	display: none;
}

/* A divisória só faz sentido quando o endereço alternativo está aberto; com a
   caixa desmarcada sobrava um fio solto no meio da etapa 2. */
.cdm-checkout .woocommerce-shipping-fields {
	padding-top: 0;
	border-top: 0;
}

.cdm-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
	padding-top: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
}

.cdm-checkout .shipping_address {
	margin-top: var(--cdm-e-4);
}

/* Rótulo de campo em duas linhas ("Bairro (opcio nal)") vinha da coluna
   estreita mais o (opcional) em bloco. */
.cdm-checkout .form-row label .optional {
	white-space: nowrap;
}

/* Quando a loja não pede observação do pedido, o Woo ainda imprime o invólucro
   de campos adicionais vazio — sobrava um fio e um respiro no meio da etapa 2.
   `:not(:has(*))` cobre o caso de o invólucro conter só espaços em branco, em
   que `:empty` não pega. */
.cdm-checkout .woocommerce-additional-fields:not(:has(*)) {
	display: none;
}

/* CPF e CNPJ nascem `required => false` porque só um dos dois vale por vez —
   quem decide é o tipo de pessoa, e a checagem real acontece no servidor
   (CDM_Checkout::validate). O "(opcional)" herdado dessa configuração dizia ao
   cliente o contrário do que a validação faz; a descrição abaixo do campo já
   explica que o documento é para a nota fiscal. */
.cdm-checkout #billing_cpf_field label .optional,
.cdm-checkout #billing_cnpj_field label .optional {
	display: none;
}

/* O woocommerce-layout.css dá `width: 47%` a .form-row-first e .form-row-last
   — medida do layout de duas colunas por float que o Woo usa por padrão. Como
   agora cada linha é uma célula de grade, essa largura só encolhia o campo
   dentro da própria célula: era o que cortava "Barra da Ti" no bairro e o
   final do CPF. A posição de cada campo vem do grid, não do width.

   O seletor precisa dos três níveis porque o do WooCommerce é
   `.woocommerce form .form-row-first` (0,2,1) e vence `.cdm-checkout .form-row`
   (0,2,0) — foi por isso que a primeira tentativa não pegou. */
.woocommerce form.cdm-checkout .form-row,
.woocommerce-page form.cdm-checkout .form-row {
	width: auto;
}

/* Documento ocupa a linha inteira: CPF formatado tem 14 caracteres e, dividindo
   a linha com o nome, ficava com metade da largura necessária. */
@media (min-width: 480px) {
	.cdm-checkout #billing_cpf_field,
	.cdm-checkout #billing_cnpj_field {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   22. Checkout — acabamento do gabarito aprovado (31/08/2026)
   --------------------------------------------------------------------------
   Refina a seção 21 para casar com a arte enviada pelo cliente: círculo azul
   cheio na etapa, tipo de pessoa em dois botões, nome completo num campo só,
   subtítulos de seção, caixa de privacidade, frete com ícone e preço à
   direita, faixa verde de segurança, selos por forma de pagamento e botão
   retangular com cadeado. As regras daqui vencem as da 21 por virem depois.
   ========================================================================== */

/* --- cabeçalho da etapa: círculo azul cheio, sem linha embaixo --- */

.cdm-passo__cabecalho {
	padding-bottom: var(--cdm-e-2);
	border-bottom: 0;
	align-items: center;
}

.cdm-passo__numero {
	width: 2.25rem;
	height: 2.25rem;
	background: var(--cdm-azul);
	color: var(--cdm-branco);
}

.cdm-passo__titulo {
	font-size: var(--cdm-t-md);
}

/* --- subtítulos de seção ("Endereço de entrega", "Documento"…) --- */

h3.cdm-checkout__secao {
	margin: var(--cdm-e-2) 0 0;
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-texto);
}

h3.cdm-checkout__secao--documento {
	margin: 0;
}

/* --- etapa 1: sobrenome escondido (preenchido no servidor) --- */

.cdm-checkout .cdm-campo--oculto {
	display: none;
}

/* --- etapa 1: tipo de pessoa em dois botões --- */

/* A linha ganha a classe junto com os botões, então o select do plugin só
   some quando os botões existem — sem JS ele continua na tela. */
.cdm-tipo-pessoa__linha .woocommerce-input-wrapper {
	display: none;
}

.cdm-tipo-pessoa {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cdm-e-3);
}

button.cdm-tipo-pessoa__opcao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	min-height: var(--cdm-alvo-toque);
	padding: var(--cdm-e-3);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

button.cdm-tipo-pessoa__opcao:hover {
	border-color: var(--cdm-azul);
}

button.cdm-tipo-pessoa__opcao--ativa {
	color: var(--cdm-azul);
	border-color: var(--cdm-azul);
	background: var(--cdm-azul-claro);
}

button.cdm-tipo-pessoa__opcao:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 2px;
}

/* --- etapa 1: celular com a bandeira do país --- */

.cdm-telefone {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	min-height: var(--cdm-alvo-toque);
	padding-left: var(--cdm-e-3);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	transition: var(--cdm-transicao);
}

.cdm-telefone:focus-within {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 1px;
	border-color: var(--cdm-azul);
}

.cdm-checkout .cdm-telefone input[type="tel"] {
	border: 0;
	min-height: calc(var(--cdm-alvo-toque) - 2px);
}

.cdm-checkout .cdm-telefone input[type="tel"]:focus-visible {
	outline: none;
}

.cdm-checkout__pais-telefone {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.cdm-checkout__pais-telefone img {
	display: block;
	border-radius: 2px;
}

/* A dica do celular é verde no gabarito — é promessa, não aviso. */
.cdm-checkout #billing_phone_field .description {
	color: var(--cdm-verde-escuro);
}

/* --- campo validado ganha o visto verde dentro do campo --- */

.cdm-checkout #billing_email_field.woocommerce-validated,
.cdm-checkout #billing_phone_field.woocommerce-validated {
	position: relative;
}

.cdm-checkout #billing_email_field.woocommerce-validated::after,
.cdm-checkout #billing_phone_field.woocommerce-validated::after {
	content: "\f00c"; /* fa-check */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	position: absolute;
	right: var(--cdm-e-3);
	top: 2.4rem;
	color: var(--cdm-verde);
	pointer-events: none;
}

.cdm-checkout #billing_email_field.woocommerce-validated input,
.cdm-checkout #billing_phone_field.woocommerce-validated .cdm-telefone input {
	padding-right: var(--cdm-e-6);
}

/* --- etapa 1: opt-in de ofertas e caixa de privacidade --- */

.cdm-checkout .cdm-campo--ofertas {
	margin-top: var(--cdm-e-2);
}

.cdm-checkout .cdm-campo--ofertas .description {
	margin-left: calc(var(--cdm-e-4) + var(--cdm-e-2));
}

p.cdm-checkout__privacidade {
	display: flex;
	align-items: flex-start;
	gap: var(--cdm-e-2);
	margin: var(--cdm-e-4) 0 0;
	padding: var(--cdm-e-3) var(--cdm-e-4);
	background: var(--cdm-azul-claro);
	border-radius: var(--cdm-raio);
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-azul-escuro);
}

.cdm-checkout__privacidade .cdm-icone {
	color: var(--cdm-azul);
	margin-top: 2px;
}

/* --- etapa 2: CEP com o "Não sei meu CEP" na linha do rótulo --- */

.cdm-checkout__cep label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cdm-e-2);
}

a.cdm-checkout__cep-ajuda {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-1);
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-link);
	text-decoration: none;
	white-space: nowrap;
}

a.cdm-checkout__cep-ajuda:hover {
	text-decoration: underline;
}

/* No gabarito o CEP tem o link ao lado, então ocupa a linha inteira. */
@media (min-width: 480px) {
	.cdm-checkout #billing_postcode_field {
		grid-column: 1 / -1;
	}
}

/* --- etapa 2: frete com ícone, texto à esquerda e preço à direita --- */

.cdm-checkout__frete p.cdm-frete__subtitulo {
	display: none; /* o gabarito não tem o subtítulo do carrinho */
}

.cdm-checkout__frete .cdm-frete__item label {
	align-items: center;
}

.cdm-checkout__frete .cdm-frete__icone {
	flex: 0 0 auto;
	margin-right: var(--cdm-e-2);
	color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__item:has(input:checked) .cdm-frete__icone {
	color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__item .woocommerce-Price-amount {
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__gratis {
	color: var(--cdm-verde);
}

p.cdm-checkout__frete-prazo {
	padding: var(--cdm-e-3) var(--cdm-e-4);
	background: var(--cdm-fundo-alt);
	border-radius: var(--cdm-raio);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-fraco);
}

/* --- etapa 3: faixa verde e título do resumo --- */

p.cdm-checkout__seguranca {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	padding: var(--cdm-e-3) var(--cdm-e-4);
	background: var(--cdm-verde-suave);
	border: 1px solid var(--cdm-verde);
	border-radius: var(--cdm-raio);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-verde-escuro);
}

.cdm-checkout__seguranca .cdm-icone {
	color: var(--cdm-verde);
}

h3.cdm-resumo__titulo {
	margin: var(--cdm-e-4) 0 0;
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-texto);
}

.cdm-resumo__contagem {
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
}

/* --- etapa 3: itens do resumo como no gabarito --- */

img.cdm-resumo__foto {
	width: 3.5rem;
	height: 3.5rem;
}

.cdm-resumo__nome {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
}

/* Atributos da variação numa linha só, separados por barra. */
.cdm-resumo__nome dl.variation {
	display: block;
	margin: var(--cdm-e-1) 0 0;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-resumo__nome dl.variation dt,
.cdm-resumo__nome dl.variation dd {
	display: inline;
	margin: 0;
}

.cdm-resumo__nome dl.variation dd p {
	display: inline;
	margin: 0;
}

.cdm-resumo__nome dl.variation dd + dt::before {
	content: " | ";
}

/* Linha de entrega ainda por calcular. */
.cdm-resumo__frete-pendente {
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

/* --- etapa 3: formas de pagamento com selo --- */

h3.cdm-pagamento__titulo {
	margin: var(--cdm-e-4) 0 var(--cdm-e-2);
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-texto);
}

.cdm-pagamento {
	margin-top: 0;
}

.cdm-pagamento__selo {
	display: inline-block;
	padding: 2px var(--cdm-e-2);
	border-radius: var(--cdm-raio-cheio);
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-medio);
	line-height: var(--cdm-altura-apertada);
	white-space: nowrap;
}

.cdm-pagamento__selo--verde {
	background: var(--cdm-verde-suave);
	color: var(--cdm-verde-escuro);
}

.cdm-pagamento__selo--neutro {
	background: var(--cdm-fundo-alt);
	color: var(--cdm-texto-fraco);
}

.cdm-pagamento__lista > li > label {
	flex-wrap: wrap;
}

.cdm-pagamento__lista > li > label img {
	margin-left: auto;
}

/* --- botão retangular com cadeado e a linha de termos --- */

.cdm-pagamento #place_order {
	border-radius: var(--cdm-raio) !important; /* vence a pílula da seção 21 */
}

.cdm-pagamento #place_order::before {
	content: "\f023"; /* fa-lock */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: var(--cdm-t-sm);
}

p.cdm-checkout__termos {
	margin: var(--cdm-e-3) 0 0;
	font-size: var(--cdm-t-2xs);
	line-height: var(--cdm-altura-normal);
	text-align: center;
	color: var(--cdm-texto-apagado);
}

.cdm-checkout__termos a {
	color: var(--cdm-link);
	font-weight: var(--cdm-peso-medio);
}

/* --- fidelidade ao gabarito, segunda passada (31/08/2026) --- */

/* Rótulos escuros e firmes, como na arte — o cinza anterior lia fraco. */
.cdm-checkout .form-row label {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
	margin-bottom: var(--cdm-e-2);
}

/* Cartão e campo com canto mais generoso, como na arte. */
.cdm-checkout .cdm-checkout__passo {
	border-radius: var(--cdm-raio-lg);
	gap: var(--cdm-e-5);
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
.cdm-checkout .woocommerce-additional-fields__field-wrapper,
.cdm-checkout .cdm-checkout__endereco {
	gap: var(--cdm-e-4);
}

/* O checkout do gabarito é limpo: sem barra de "adicionado ao carrinho" nem
   os gatilhos de login e cupom no topo. Os erros de validação
   (.woocommerce-error) continuam aparecendo — esses não podem sumir. O
   formulário de cupom segue acessível pela página do carrinho. */
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login.login {
	display: none;
}

/* O "(opcional)" não existe na arte — a ausência de asterisco já diz. */
.cdm-checkout .form-row label .optional {
	display: none;
}

/* Lupa do "Não sei meu CEP" no tamanho do texto, link na ponta direita da
   linha do rótulo. Os três níveis vencem o display:block da seção 8. */
.cdm-checkout .form-row.cdm-checkout__cep label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

a.cdm-checkout__cep-ajuda .cdm-icone {
	font-size: var(--cdm-t-2xs);
}

/* Chevron discreto ao lado da bandeira, como num seletor de país. */
.cdm-checkout__pais-telefone {
	gap: var(--cdm-e-1);
}

.cdm-checkout__pais-telefone .cdm-icone {
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
}

/* A descrição do opt-in ("Você pode cancelar quando quiser.") na linha de
   baixo, alinhada com o texto da caixa. */
.cdm-checkout .cdm-campo--ofertas label.checkbox {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto);
}

.cdm-checkout .cdm-campo--ofertas .description {
	display: block;
	margin: var(--cdm-e-1) 0 0 calc(var(--cdm-e-4) + var(--cdm-e-2));
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
}

/* Placeholders discretos. */
.cdm-checkout input::placeholder,
.cdm-checkout textarea::placeholder {
	color: var(--cdm-texto-apagado);
	opacity: 1;
}

/* O gabarito fecha a etapa 1 na caixa de privacidade — o convite "Criar uma
   conta?" não existe nele. A compra segue como visitante; quem quiser conta
   cria pela página Minha Conta. */
body.woocommerce-checkout .woocommerce-account-fields {
	display: none;
}

/* ==========================================================================
   23. Checkout — medidas do mock HTML do cliente (01/09/2026)
   --------------------------------------------------------------------------
   O cliente converteu o gabarito em HTML. Daqui saem as medidas que a arte
   não deixava ler: círculo de 42px, campo de 42px com canto de 8px, botões
   de tipo de pessoa com 48px, foto do item com 72px, botão de 48px, lista de
   frete num bloco só com fio entre as linhas e a faixa de privacidade
   sangrando até a borda do cartão.
   ========================================================================== */

.cdm-checkout .cdm-checkout__passo {
	overflow: hidden; /* a faixa de privacidade sangra até a borda */
	padding: var(--cdm-e-6);
	gap: var(--cdm-e-4);
}

.cdm-passo__cabecalho {
	gap: var(--cdm-e-3);
	padding-bottom: var(--cdm-e-3);
}

.cdm-passo__numero {
	width: 2.625rem;
	height: 2.625rem;
	font-size: var(--cdm-t-md);
	box-shadow: var(--cdm-sombra-sm);
}

.cdm-passo__titulo {
	font-size: var(--cdm-t-lg);
}

.cdm-passo__ajuda {
	color: var(--cdm-texto-fraco);
}

h3.cdm-checkout__secao {
	font-size: var(--cdm-t-md);
	margin: 0;
}

/* --- campos: 42px, canto 8px, rótulo 12px --- */

.cdm-checkout .form-row label {
	font-size: var(--cdm-t-xs);
	margin-bottom: var(--cdm-e-2);
}

.cdm-checkout input[type="text"],
.cdm-checkout input[type="tel"],
.cdm-checkout input[type="email"],
.cdm-checkout input[type="password"],
.cdm-checkout input[type="number"],
.cdm-checkout input[type="date"],
.cdm-checkout select,
.cdm-checkout .select2-container .select2-selection--single,
.cdm-telefone {
	min-height: 2.625rem;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: var(--cdm-raio);
}

.cdm-checkout input:focus-visible,
.cdm-checkout select:focus-visible,
.cdm-telefone:focus-within {
	outline: 3px solid var(--cdm-azul-claro);
	outline-offset: 0;
	border-color: var(--cdm-azul);
}

.cdm-checkout .cdm-telefone input[type="tel"] {
	min-height: calc(2.625rem - 2px);
}

/* Prefixo do celular como caixa própria, à esquerda do campo. */
.cdm-telefone {
	padding-left: 0;
}

.cdm-checkout__pais-telefone {
	justify-content: center;
	width: 4.75rem;
	height: 100%;
	min-height: calc(2.625rem - 2px);
	border-right: 1px solid var(--cdm-borda);
}

/* Campo validado: borda verde além do visto. */
.cdm-checkout .woocommerce-validated input.input-text,
.cdm-checkout .woocommerce-validated .cdm-telefone {
	border-color: var(--cdm-verde);
}

/* --- tipo de pessoa: 48px --- */

button.cdm-tipo-pessoa__opcao {
	min-height: 3rem;
	color: var(--cdm-texto);
}

/* --- opt-in e faixa de privacidade sangrando o cartão --- */

.cdm-checkout .cdm-campo--ofertas {
	margin-top: var(--cdm-e-3);
}

p.cdm-checkout__privacidade {
	margin: var(--cdm-e-4) calc(-1 * var(--cdm-e-6)) calc(-1 * var(--cdm-e-6));
	padding: var(--cdm-e-4) var(--cdm-e-6);
	border-top: 1px solid var(--cdm-cinza-200);
	border-radius: 0;
	background: var(--cdm-fundo-alt);
	color: var(--cdm-texto-fraco);
}

.cdm-checkout__privacidade .cdm-icone {
	display: grid;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	margin: 0;
	border: 1px solid var(--cdm-azul);
	border-radius: var(--cdm-raio);
	font-size: var(--cdm-t-xs);
}

/* --- CEP: campo à esquerda, link à direita na linha do campo --- */

.cdm-checkout .form-row.cdm-checkout__cep {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--cdm-e-3);
	align-items: end;
}

.cdm-checkout .form-row.cdm-checkout__cep label {
	display: block;
	grid-column: 1 / -1;
}

.cdm-checkout .form-row.cdm-checkout__cep .woocommerce-input-wrapper {
	grid-column: 1;
}

.cdm-checkout .form-row.cdm-checkout__cep a.cdm-checkout__cep-ajuda {
	grid-column: 2;
	min-height: 2.625rem;
	align-items: center;
	font-size: var(--cdm-t-xs);
}

/* O link sai do rótulo e vai para depois do campo (checkout.js). */
.cdm-checkout .form-row.cdm-checkout__cep label a.cdm-checkout__cep-ajuda {
	display: none;
}

/* --- frete: um bloco só, fio entre linhas, linha ativa com contorno --- */

.cdm-checkout__frete .cdm-frete__lista {
	gap: 0;
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	overflow: hidden;
}

.cdm-checkout__frete .cdm-frete__item {
	border: 0;
	border-bottom: 1px solid var(--cdm-cinza-200);
	border-radius: 0;
	padding: var(--cdm-e-3) var(--cdm-e-4);
}

.cdm-checkout__frete .cdm-frete__item:last-child {
	border-bottom: 0;
}

.cdm-checkout__frete .cdm-frete__item:has(input:checked) {
	background: var(--cdm-azul-claro);
	outline: 1px solid var(--cdm-azul);
	outline-offset: -1px;
}

.cdm-checkout__frete .cdm-frete__item label {
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
}

p.cdm-checkout__frete-prazo {
	margin-top: var(--cdm-e-4);
}

/* --- resumo: foto 72px, total 19px --- */

img.cdm-resumo__foto {
	width: 4.5rem;
	height: 4.5rem;
}

.cdm-resumo__nome {
	font-size: var(--cdm-t-xs);
}

.cdm-resumo__tabela tfoot .order-total th {
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-texto);
}

.cdm-resumo__tabela tfoot .order-total td {
	font-size: var(--cdm-t-xl);
}

/* --- pagamento: linhas de 40px e botão de 48px --- */

.cdm-pagamento__lista > li {
	padding: var(--cdm-e-2) var(--cdm-e-3);
}

.cdm-pagamento__lista > li > label {
	min-height: 2.5rem;
	font-size: var(--cdm-t-xs);
}

.cdm-pagamento #place_order {
	min-height: 3rem;
	border-radius: var(--cdm-raio-sm) !important;
	box-shadow: var(--cdm-sombra-sm);
}

/* --- faixa de benefícios abaixo das três colunas --- */

ul.cdm-checkout__beneficios {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cdm-e-3);
	margin: var(--cdm-e-5) 0 0;
	padding: var(--cdm-e-4) var(--cdm-e-6);
	list-style: none;
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
	box-shadow: var(--cdm-sombra-sm);
}

@media (min-width: 640px) {
	ul.cdm-checkout__beneficios {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	ul.cdm-checkout__beneficios {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cdm-checkout__beneficio + .cdm-checkout__beneficio {
		border-left: 1px solid var(--cdm-cinza-200);
		padding-left: var(--cdm-e-5);
	}
}

.cdm-checkout__beneficio {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
}

.cdm-checkout__beneficio .cdm-icone {
	font-size: var(--cdm-t-xl);
	color: var(--cdm-verde);
}

.cdm-checkout__beneficio strong {
	display: block;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-azul);
}

.cdm-checkout__beneficio span {
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
}

/* O woocommerce.css trata `.description` como balão flutuante: fica
   display:none e só aparece no foco do campo. No mock a dica é texto fixo
   abaixo do campo ("Enviaremos atualizações do seu pedido", "Você pode
   cancelar quando quiser."). Os três níveis vencem o seletor do Woo. */
.woocommerce form.cdm-checkout .form-row .description,
.woocommerce-page form.cdm-checkout .form-row .description {
	display: block;
	position: static;
	margin: var(--cdm-e-1) 0 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: var(--cdm-t-2xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-apagado);
}

.woocommerce form.cdm-checkout .form-row .description::before,
.woocommerce-page form.cdm-checkout .form-row .description::before {
	content: none;
}

.woocommerce form.cdm-checkout #billing_phone_field .description {
	color: var(--cdm-verde-escuro);
}

/* Regra da época do campo único "Nome completo" — desde 04/09/2026 o par
   nome/sobrenome voltou à tela e divide a linha (seção 52), então esta regra
   está desligada. Fica registrada para quem for procurar por que o nome já
   ocupou a linha inteira. */
@media (min-width: 480px) {
	.cdm-checkout #billing_first_name_field.cdm-campo--linha-inteira {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   24. Ajustes apontados pelo cliente no inspetor (01/09/2026)
   ========================================================================== */

/* O título da página repete o que as três etapas já dizem; o gabarito não o
   tem. O <form> continua com aria-label="Checkout" para leitor de tela. */
body.woocommerce-checkout .cdm-pagina__titulo {
	display: none;
}

/* Bordas dos campos: o woocommerce.css aplica `border: var(--wc-form-border-
   width) solid var(--wc-form-border-color)` em `.woocommerce form .form-row
   .input-text` — e essa variável nasce rgba(32,7,7,.8), quase preta, o que
   vencia o cinza do tema por especificidade. Redefinir a variável dentro do
   formulário resolve na fonte; a regra direta abaixo é a rede de segurança. */
.cdm-checkout {
	--wc-form-border-color: var(--cdm-borda);
	--wc-form-border-width: 1px;
	--wc-form-border-radius: var(--cdm-raio);
}

.woocommerce form.cdm-checkout .form-row .input-text,
.woocommerce form.cdm-checkout .form-row select,
.woocommerce-page form.cdm-checkout .form-row .input-text,
.woocommerce-page form.cdm-checkout .form-row select {
	border: 1px solid var(--cdm-borda);
}

.woocommerce form.cdm-checkout .form-row.woocommerce-validated .input-text,
.woocommerce-page form.cdm-checkout .form-row.woocommerce-validated .input-text {
	border-color: var(--cdm-verde);
}

.woocommerce form.cdm-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-page form.cdm-checkout .form-row.woocommerce-invalid .input-text {
	border-color: var(--cdm-vermelho);
}

/* Resumo sem grade: o woocommerce.css desenha moldura em `table.shop_table`
   e o tema punha fio em toda célula. No gabarito os itens ficam soltos, há
   um fio acima do subtotal e outro acima do total — só isso. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela,
.woocommerce-page form.cdm-checkout table.cdm-resumo__tabela {
	border: 0;
	border-radius: 0;
}

.cdm-resumo__tabela tbody td,
.cdm-resumo__tabela tbody th {
	border: 0;
	padding: var(--cdm-e-2) 0;
}

.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td {
	border: 0;
	padding: var(--cdm-e-2) 0;
}

.cdm-resumo__tabela tfoot tr:first-child th,
.cdm-resumo__tabela tfoot tr:first-child td {
	padding-top: var(--cdm-e-3);
	border-top: 1px solid var(--cdm-cinza-200);
}

.cdm-resumo__tabela tfoot .order-total th,
.cdm-resumo__tabela tfoot .order-total td {
	padding-top: var(--cdm-e-3);
	border-top: 1px solid var(--cdm-cinza-200);
}

/* O woocommerce.css ainda punha border-top em cada célula de table.shop_table;
   entre os itens do resumo não há fio nenhum no gabarito. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody th,
.woocommerce-page form.cdm-checkout table.cdm-resumo__tabela tbody td,
.woocommerce-page form.cdm-checkout table.cdm-resumo__tabela tbody th {
	border: 0;
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr:not(:first-child):not(.order-total) th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr:not(:first-child):not(.order-total) td {
	border: 0;
}

/* ==========================================================================
   25. Cabeçalho da etapa: ícone no lugar do número, sem linha de ajuda
   (pedido do cliente, 01/09/2026). Círculo menor que o do número.
   ========================================================================== */

.cdm-passo__cabecalho {
	align-items: center;
	gap: var(--cdm-e-3);
}

.cdm-passo__icone {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-azul);
	color: var(--cdm-branco);
	font-size: var(--cdm-t-sm);
	line-height: 1;
}

/* ==========================================================================
   21. Fundo cinza claro só na página do carrinho (pedido do cliente)
   ========================================================================== */

body.woocommerce-cart {
	background: var(--cdm-fundo-carrinho);
}

/* ==========================================================================
   26. Login expresso por código (plugin cdm-checkout)
   --------------------------------------------------------------------------
   Aparece dentro da etapa 1, logo abaixo do celular, quando o cliente digita
   um dado que já tem cadastro. É a resposta ao atrito real da loja: cliente
   mais velho que não lembra e-mail nem senha e comprava como visitante,
   deixando pedido órfão. Tudo aqui é maior do que o padrão do formulário de
   propósito — o campo do código é o único ponto da página em que errar
   significa não comprar.
   ========================================================================== */

.cdm-otp[hidden] {
	display: none;
}

.cdm-otp {
	display: grid;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-4);
	border: 1px solid var(--cdm-azul);
	border-radius: var(--cdm-raio);
	background: var(--cdm-azul-claro);
}

.cdm-otp__passo[hidden] {
	display: none;
}

.cdm-otp__passo {
	display: grid;
	gap: var(--cdm-e-3);
}

p.cdm-otp__titulo {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

p.cdm-otp__titulo--ok {
	color: var(--cdm-verde-escuro);
}

.cdm-otp__titulo--ok .cdm-icone {
	color: var(--cdm-verde);
}

p.cdm-otp__texto {
	margin: 0;
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
}

.cdm-otp__texto strong {
	color: var(--cdm-texto);
}

/* --- botões de canal --- */

button.cdm-otp__botao[hidden] {
	display: none;
}

button.cdm-otp__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	width: 100%;
	min-height: 3rem;
	padding: var(--cdm-e-3) var(--cdm-e-4);
	border: 0;
	border-radius: var(--cdm-raio);
	background: var(--cdm-whatsapp);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-branco);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

button.cdm-otp__botao:hover {
	filter: brightness(.95);
}

button.cdm-otp__botao:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 2px;
}

button.cdm-otp__botao--email {
	background: var(--cdm-superficie);
	color: var(--cdm-azul);
	border: 1px solid var(--cdm-azul);
}

.cdm-otp__botao strong {
	font-weight: var(--cdm-peso-normal);
	opacity: .9;
}

/* --- campo do código: um só, grande, dígitos espaçados --- */

input.cdm-otp__codigo {
	width: 100%;
	min-height: 3.5rem;
	padding: var(--cdm-e-2) var(--cdm-e-3);
	border: 2px solid var(--cdm-azul);
	border-radius: var(--cdm-raio);
	background: var(--cdm-branco);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xl);
	font-weight: var(--cdm-peso-forte);
	letter-spacing: .5em;
	text-align: center;
	color: var(--cdm-azul);
}

input.cdm-otp__codigo::placeholder {
	color: var(--cdm-cinza-300);
	font-weight: var(--cdm-peso-normal);
}

p.cdm-otp__aviso {
	margin: 0;
	min-height: 1rem;
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
}

p.cdm-otp__aviso--erro {
	color: var(--cdm-vermelho);
	font-weight: var(--cdm-peso-medio);
}

/* --- linha de alternativas --- */

p.cdm-otp__alternativas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-3);
	margin: 0;
}

.cdm-otp__link[hidden] {
	display: none;
}

.cdm-otp__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.cdm-otp__link[disabled] {
	color: var(--cdm-texto-apagado);
	text-decoration: none;
	cursor: default;
}

/* A caixa entra no meio da grade de campos (o JS a coloca logo depois do
   celular, que é o campo que a dispara): sem isto ela nasce com a largura de
   meia linha, do tamanho do campo "Número". */
.cdm-checkout .cdm-otp {
	grid-column: 1 / -1;
}

/* A caixa é impressa antes da grade de campos (fora dela), então precisa do
   respiro que os campos ganham do `gap` do grid. */
.cdm-checkout .woocommerce-billing-fields > .cdm-otp {
	margin-bottom: var(--cdm-e-4);
}

/* Identidade mascarada e opção de senha dentro da caixa do código. */
.cdm-otp__identidade {
	list-style: none;
	margin: 0;
	padding: var(--cdm-e-3);
	display: grid;
	gap: var(--cdm-e-2);
	background: var(--cdm-branco);
	border-radius: var(--cdm-raio);
}

.cdm-otp__identidade-item[hidden] {
	display: none;
}

.cdm-otp__identidade-item {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
}

.cdm-otp__identidade-item .cdm-icone {
	color: var(--cdm-azul);
}

button.cdm-otp__botao--senha {
	background: transparent;
	color: var(--cdm-azul);
	border: 1px solid var(--cdm-borda);
	font-weight: var(--cdm-peso-medio);
}

.cdm-otp__form-senha {
	display: grid;
	gap: var(--cdm-e-2);
}

.cdm-otp__form-senha input {
	width: 100%;
	min-height: var(--cdm-alvo-toque);
	padding: var(--cdm-e-3);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	background: var(--cdm-branco);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
}

/* Atalho de entrada no topo da etapa 1: um campo que aceita CPF, e-mail ou
   celular. Discreto de propósito — quem ignorar preenche o formulário e é
   reconhecido do mesmo jeito, pelos próprios campos do pedido. */
.cdm-otp__titulo--atalho {
	font-size: var(--cdm-t-base);
}

.cdm-otp__atalho-linha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--cdm-e-2);
}

button.cdm-otp__botao--atalho {
	width: auto;
	min-height: var(--cdm-alvo-toque);
	padding-inline: var(--cdm-e-5);
	background: var(--cdm-azul);
}

@media (max-width: 480px) {
	.cdm-otp__atalho-linha {
		grid-template-columns: minmax(0, 1fr);
	}

	button.cdm-otp__botao--atalho {
		width: 100%;
	}
}

/* ==========================================================================
   27. Bifurcação da etapa 1 (02/09/2026)
   --------------------------------------------------------------------------
   O checkout abre com duas perguntas, não com dez campos. A caixa deixa de ser
   um bloco azul dentro do cartão — caixa dentro de caixa cria moldura dupla e
   faz o conteúdo parecer um aviso, não o próprio formulário.
   ========================================================================== */

.cdm-checkout .cdm-otp {
	padding: 0;
	border: 0;
	background: none;
	margin-bottom: 0;
}

/* Campos do pedido escondidos até o cliente escolher o caminho. A classe é
   posta pelo JavaScript: sem script, tudo aparece normalmente. */
.woocommerce-billing-fields.cdm-campos-ocultos .woocommerce-billing-fields__field-wrapper,
.woocommerce-billing-fields.cdm-campos-ocultos .cdm-checkout__privacidade {
	display: none;
}

/* --- os dois botões --- */

.cdm-otp__escolha {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cdm-e-3);
}

button.cdm-otp__opcao {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	min-height: 5rem;
	padding: var(--cdm-e-4);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	background: var(--cdm-superficie);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-texto);
	cursor: pointer;
	transition: var(--cdm-transicao);
}

button.cdm-otp__opcao:hover,
button.cdm-otp__opcao:focus-visible {
	border-color: var(--cdm-azul);
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul);
}

.cdm-otp__opcao .cdm-icone {
	font-size: var(--cdm-t-lg);
	color: var(--cdm-azul);
}

@media (max-width: 480px) {
	.cdm-otp__escolha {
		grid-template-columns: minmax(0, 1fr);
	}

	button.cdm-otp__opcao {
		flex-direction: row;
		min-height: var(--cdm-alvo-toque);
	}
}

/* --- identidade e opções de entrada, agora sem moldura própria --- */

.cdm-checkout .cdm-otp__identidade {
	background: var(--cdm-fundo-alt);
}

/* ==========================================================================
   28. Login expresso: peso de texto e ícones
   ==========================================================================
   O bloco tinha negrito em tudo — título, os dois botões da bifurcação, os
   botões de canal — e num cartão pequeno isso vira ruído: quando tudo grita,
   nada se destaca. O peso agora só distingue o que é ação (500) do que é
   leitura corrida (400).

   Os ícones desciam a #0a3d7c, o mesmo azul do texto do cabeçalho. Ao lado de
   um rótulo curto eles pesavam mais que a própria palavra. Como são
   decorativos (`aria-hidden`, sempre acompanhados de texto), passam ao cinza
   apagado: continuam legíveis e param de disputar a atenção.
   ========================================================================== */

.cdm-checkout p.cdm-otp__titulo {
	font-weight: var(--cdm-peso-medio);
}

.cdm-checkout button.cdm-otp__botao,
.cdm-checkout button.cdm-otp__opcao {
	font-weight: var(--cdm-peso-medio);
}

.cdm-checkout .cdm-otp__opcao .cdm-icone,
.cdm-checkout .cdm-otp__identidade-item .cdm-icone,
.cdm-checkout .cdm-otp__titulo .cdm-icone {
	color: var(--cdm-texto-apagado);
}

/* O ícone do "tudo certo" mantém o verde: ali a cor é o recado. */
.cdm-checkout .cdm-otp__titulo--ok .cdm-icone {
	color: var(--cdm-verde);
}

/* ==========================================================================
   29. Cliente logado: resumo no lugar do formulário
   ==========================================================================
   Depois de entrar, o cliente via de novo tipo de pessoa, documento, e-mail,
   celular, nome e nascimento — tudo já preenchido pela própria loja. Além de
   cansar, convida a mexer, e cada campo mexido é uma chance de estragar o
   cadastro na pressa de comprar.

   Vira três linhas de leitura com "Editar meus dados" ao lado. Os campos
   continuam no HTML, prontos para o POST; quem recolhe é o JavaScript, então
   sem script o formulário aparece inteiro e a compra segue.
   ========================================================================== */

.cdm-conta-resumo {
	display: grid;
	gap: var(--cdm-e-3);
	margin-bottom: var(--cdm-e-4);
}

.cdm-checkout p.cdm-conta-resumo__saudacao {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-azul);
}

ul.cdm-conta-resumo__lista {
	display: grid;
	gap: var(--cdm-e-2);
	margin: 0;
	padding: var(--cdm-e-3);
	border-radius: var(--cdm-raio);
	background: var(--cdm-fundo-alt);
	list-style: none;
}

.cdm-conta-resumo__item {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto);
	/* O e-mail longo não pode empurrar a coluna. */
	overflow-wrap: anywhere;
}

.cdm-conta-resumo__item .cdm-icone,
.cdm-conta-resumo__saudacao .cdm-icone {
	flex: none;
	color: var(--cdm-texto-apagado);
}

.cdm-checkout p.cdm-conta-resumo__falta {
	margin: 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-fraco);
}

.cdm-checkout p.cdm-conta-resumo__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-2) var(--cdm-e-4);
	margin: 0;
}

.cdm-conta-resumo__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-azul);
	text-decoration: underline;
	cursor: pointer;
}

.cdm-conta-resumo__link:hover,
.cdm-conta-resumo__link:focus-visible {
	color: var(--cdm-azul-escuro);
}

/* Aberto para edição: o resumo continua na tela como referência do que está
   gravado, mas recuado para não competir com os campos. */
.cdm-conta-resumo--aberto ul.cdm-conta-resumo__lista {
	display: none;
}

/* O atributo `hidden` só esconde por regra do navegador, que qualquer
   `display` de folha nossa vence — e a grade dos campos declara `display:
   grid`. Sem esta linha o "Editar" alterna o atributo e nada acontece. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper[hidden] {
	display: none;
}

/* Modo parcial: só o que falta preencher aparece. A regra é por classe no
   container, não `hidden` linha a linha, porque o tema ainda insere elementos
   nesta grade depois (o título "Documento"); assim o que chegar depois já
   chega escondido. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > :not(.cdm-campo-falta) {
	/* `!important` porque o plugin brasileiro mostra e esconde CPF/CNPJ com
	   `style="display:block"` inline conforme o tipo de pessoa, e estilo
	   inline vence qualquer seletor. É o caso em que a exceção cabe. */
	display: none !important;
}

/* ==========================================================================
   30. Campo travado
   ==========================================================================
   E-mail e documento não mudam depois de cadastrados (decisão do dono,
   02/09/2026). O campo continua na tela porque o cliente precisa CONFERIR o
   que está gravado — sumir com ele seria pior —, mas se apresenta como
   leitura: fundo apagado, cursor de texto comum, sem foco azul de edição.
   ========================================================================== */

.cdm-checkout input.cdm-campo-travado,
.cdm-checkout .cdm-campo-travado input[readonly] {
	background: var(--cdm-fundo-alt);
	color: var(--cdm-texto-fraco);
	cursor: default;
}

.cdm-checkout .cdm-campo-travado input[readonly]:focus {
	border-color: var(--cdm-borda);
	box-shadow: none;
}



/* ==========================================================================
   31. Checkout enxuto — pedido do dono, 03/09/2026
   ==========================================================================
   Cabeçalho só com o logo, rodapé igual ao do carrinho (footer.php), etapa
   "Endereço" recolhida até a etapa 1 ter desfecho, campos mais juntos.
   ========================================================================== */

/* Cabeçalho: some tudo que leva para fora — barra do topo, menu, busca, conta
   e cesta. Fica a faixa amarela com o logo. A página "pedido recebido" volta
   ao cabeçalho completo. */
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho__aviso,
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho__hamburguer,
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho__acoes,
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho__busca-movel,
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho .cdm-busca {
	display: none;
}

/* Etapa "Endereço" espera o desfecho da etapa 1. Quem sabe se a etapa 1
   terminou é o plugin: `.cdm-campos-ocultos` fica no bloco de cobrança
   enquanto o cliente ainda não disse se é novo ou se já comprou. Enquanto
   ela estiver lá, o corpo desta etapa some e o cabeçalho fica apagado.
   `:has()` não existe em navegador antigo — lá nada se recolhe, e o pedido
   fecha do mesmo jeito. */
.cdm-checkout:has(.woocommerce-billing-fields.cdm-campos-ocultos) .cdm-checkout__passo--entrega .cdm-checkout__passo-corpo {
	display: none;
}

.cdm-checkout:has(.woocommerce-billing-fields.cdm-campos-ocultos) .cdm-checkout__passo--entrega .cdm-passo__cabecalho {
	opacity: .45;
}

/* Campos mais juntos: o respiro vertical de 1rem entre linhas fazia a etapa 1
   descer além da dobra. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
.cdm-checkout .cdm-checkout__endereco {
	gap: var(--cdm-e-2) var(--cdm-e-3);
}

.cdm-checkout .form-row label {
	margin-bottom: var(--cdm-e-1);
}

/* Botões da bifurcação sem ícone: só o texto, centrado. */
.cdm-checkout button.cdm-otp__opcao {
	justify-content: center;
}

/* ==========================================================================
   32. Carrinho — escolha explícita de como receber (03/09/2026)
   ========================================================================== */

/* Sem escolha ainda: o cartão de entrega e a linha de frete ficam recolhidos
   até o clique numa das abas. */
.cdm-totais--sem-modo .cdm-totais__tabela--frete,
.cdm-totais--sem-modo .cdm-frete-resumo {
	display: none;
}

.cdm-totais__modo-dica {
	margin: -0.75rem 0 1.25rem;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
	text-align: center;
}

.cdm-totais__modo-dica[hidden] {
	display: none;
}

/* Ícones das abas mais leves: a Font Awesome Free só tem traço sólido, então
   o "light" vem de tamanho menor e cor mais apagada quando a aba não está
   ativa. */
button.cdm-totais__modo-botao .cdm-icone {
	font-size: 0.9375rem;
	opacity: .75;
}

button.cdm-totais__modo-botao.is-ativo .cdm-icone {
	opacity: 1;
}

/* Lupa dentro do campo de CEP. */
.cdm-cep__linha {
	position: relative;
	display: block;
}

.cdm-cep__linha input.cdm-cep__entrada {
	padding-right: 2.5rem;
}

button.cdm-cep__lupa {
	/* `!important` vence o style inline que o wc-shipping-calculator-improvements
	   põe com jQuery .hide() em todo [type=submit] do calculador — regra de
	   folha com !important passa por estilo inline sem !important. */
	display: inline-flex !important;
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cdm-azul);
	cursor: pointer;
}

/* O botão "Calcular" já tem a lupa fazendo o serviço. */
.cdm-cep__linha ~ button.cdm-cep__enviar,
.cdm-cep__painel button.cdm-cep__enviar {
	display: none;
}

/* Destaque do cartão de entrega de um tipo diferente da aba ativa (a retirada
   sob "Receber no Endereço"): some até o recálculo trazer o método certo. */
.cdm-frete__cartao--discorda .cdm-frete__opcao {
	display: none;
}

/* ==========================================================================
   33. Retirada só na aba Retirar, entrega só na aba Receber (03/09/2026)
   ==========================================================================
   O carrinho.js/checkout.js escondem os <li data-cdm-tipo> com o atributo
   `hidden`, mas `.cdm-frete__item { display: flex }` (seções 3 e 17) vence
   o `display: none` do navegador — era por isso que a retirada continuava
   aparecendo sob "Receber no Endereço". Regra com atributo, sem `!important`:
   mesma origem, especificidade maior. */
.cdm-frete__item[hidden],
[data-cdm-tipo][hidden] {
	display: none;
}

/* Abas Receber/Retirar dentro da etapa "Endereço" do checkout: reaproveitam
   o desenho das abas do carrinho (.cdm-totais__modo, seção 17). */
.cdm-checkout__frete .cdm-checkout__modo {
	margin: 0 0 var(--cdm-e-3);
}

.cdm-checkout__modo-dica {
	margin: 0 0 var(--cdm-e-3);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
	text-align: center;
}

.cdm-checkout__modo-dica[hidden] {
	display: none;
}

/* Sem aba escolhida não há o que mostrar: opções e prazo esperam o clique. */
.cdm-checkout__frete--sem-modo .cdm-checkout__frete-opcoes,
.cdm-checkout__frete--sem-modo .cdm-checkout__frete-prazo {
	display: none;
}

/* ==========================================================================
   34. Carrinho/checkout — segunda rodada do dono (03/09/2026)
   ========================================================================== */

/* CEP direto na tela, sem popup: o painel deixa de ser dropdown absoluto e
   entra no fluxo do cartão, abaixo do endereço. */
.cdm-cep__painel--inline {
	position: static;
	width: auto;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.cdm-frete__topo {
	flex-direction: column;
	align-items: stretch;
}

.cdm-frete__destino-linha {
	display: block;
}

/* Cartão não vale para retirar na loja: a linha de parcelamento some quando a
   aba ativa é a retirada. */
.cdm-totais--retirada .cdm-totais__forma--cartao {
	display: none;
}

/* Selo "Site seguro" no canto direito do cabeçalho do checkout. */
.cdm-cabecalho__seguro {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--cdm-e-2);
	margin-left: auto;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-branco);
}

/* ==========================================================================
   35. Fluxo e usabilidade — lista aprovada pelo dono (03/09/2026)
   ========================================================================== */

/* (2) Cupom discreto abaixo do botão. */
button.cdm-totais__cupom-link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-resumo-azul-botao);
	text-decoration: underline;
	cursor: pointer;
}

.cdm-totais__cupom-abrir {
	margin: var(--cdm-e-3) 0 0;
	text-align: center;
}

.cdm-totais__cupom[hidden] {
	display: none;
}

html:not(.cdm-js-ativo) .cdm-totais__cupom[hidden] {
	display: block;
}

html:not(.cdm-js-ativo) .cdm-totais__cupom-abrir {
	display: none;
}

.cdm-totais__cupom {
	margin-top: var(--cdm-e-2);
}

/* (3) Total ainda sem frete. */
.cdm-totais__total-nota {
	display: block;
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
	text-align: right;
}

/* (4) Retirada: linha compacta, não um cartão. */
.cdm-totais--retirada .cdm-frete__cartao {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.cdm-totais--retirada .cdm-frete__opcao,
.cdm-totais--retirada summary.cdm-frete__opcao-resumo {
	padding: var(--cdm-e-2) 0;
	background: none;
	border: 0;
}

.cdm-totais--retirada .cdm-frete__opcao-data {
	font-size: var(--cdm-t-xs);
}

/* (6) Cross-sell na coluna principal, três colunas. */
.cdm-carrinho__principal .cdm-carrinho-sugestoes {
	margin-top: var(--cdm-e-5);
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes__grade {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 639px) {
	.cdm-carrinho__principal .cdm-carrinho-sugestoes__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* (7) Avisos do carrinho como toast. */
body.woocommerce-cart .woocommerce-notices-wrapper .cdm-toast {
	position: fixed;
	top: var(--cdm-e-4);
	left: 50%;
	z-index: var(--cdm-z-modal);
	max-width: min(90vw, 32rem);
	margin: 0;
	transform: translateX(-50%);
	box-shadow: var(--cdm-sombra-lg);
	transition: opacity .4s ease, transform .4s ease;
}

body.woocommerce-cart .woocommerce-notices-wrapper .cdm-toast--sumindo {
	opacity: 0;
	transform: translate(-50%, -0.5rem);
}

/* (9) Card Endereço recolhido explica por quê. */
.cdm-passo__espera {
	display: none;
	margin: 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout:has(.woocommerce-billing-fields.cdm-campos-ocultos) .cdm-checkout__passo--entrega .cdm-passo__espera {
	display: block;
}

/* (11) Pessoa jurídica é um link, não dois botões. */
.cdm-checkout #billing_persontype_field select {
	display: none;
}

.cdm-checkout #billing_persontype_field > label {
	display: none;
}

button.cdm-tipo-pessoa__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-azul);
	text-decoration: underline;
	cursor: pointer;
}

/* (14) Campos só de entrega somem na retirada (atributo hidden vs. grid). */
.cdm-checkout .form-row.cdm-campo--so-entrega[hidden] {
	display: none;
}

/* (15) Coluna 3: dois cartões (Resumo e Pagamento). */
.cdm-checkout__coluna-pagamento {
	display: grid;
	gap: var(--cdm-e-4);
	min-width: 0;
}

@media (min-width: 1024px) {
	.cdm-checkout .cdm-checkout__coluna-pagamento {
		grid-column: 3;
		grid-row: 1;
		position: sticky;
		top: var(--cdm-e-4);
	}

	.cdm-checkout .cdm-checkout__passo--pagamento {
		grid-column: auto;
		grid-row: auto;
		position: static;
	}
}

.cdm-checkout .cdm-checkout__passo--resumo > #order_review_heading {
	display: none;
}

/* (17) Formas de pagamento compactas: explicação só na escolhida. */
.cdm-pagamento .payment_box {
	margin-top: var(--cdm-e-2);
}

/* (18) Linha "No Pix" abaixo do total. */
.cdm-resumo__tabela tfoot .cdm-resumo__pix th,
.cdm-resumo__tabela tfoot .cdm-resumo__pix td {
	padding-top: 0;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-verde-escuro);
	border: 0;
}

.cdm-resumo__pix small {
	color: var(--cdm-texto-apagado);
}

/* (21) "1 de 3" ao lado do título. */
.cdm-passo__titulo {
	flex-direction: row;
	align-items: baseline;
	gap: var(--cdm-e-2);
}

/* (22) Barra discreta do celular. */
.cdm-checkout__barra--discreta {
	padding: var(--cdm-e-2) var(--cdm-e-4);
}

a.cdm-checkout__barra-link {
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-azul);
	text-decoration: underline;
}

/* --- (4) retirada sem CEP: prévia da loja; some o "digite seu endereço" e o
   campo de CEP nessa aba --- */
.cdm-frete__retirada-previa {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-2) 0;
	font-size: var(--cdm-t-sm);
}

.cdm-totais--retirada .cdm-frete__retirada-previa {
	display: flex;
}

.cdm-totais--retirada .cdm-frete__sem-endereco,
.cdm-totais--retirada .cdm-cep {
	display: none;
}

.cdm-frete__sem-endereco {
	margin: 0 0 var(--cdm-e-3);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

/* --- (22) barra fixa do celular (a folha antiga desta barra foi apagada
   quando ela saiu; volta aqui, discreta e só abaixo de 1024px) --- */
.cdm-checkout__barra {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--cdm-z-cabecalho);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	background: var(--cdm-superficie);
	border-top: 1px solid var(--cdm-cinza-200);
	box-shadow: var(--cdm-sombra-lg);
}

.cdm-checkout__barra[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.cdm-checkout__barra {
		display: none;
	}
}

.cdm-checkout__barra-total {
	display: flex;
	align-items: baseline;
	gap: var(--cdm-e-2);
}

.cdm-checkout__barra-rotulo {
	font-size: var(--cdm-t-2xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cdm-texto-apagado);
}

.cdm-checkout__barra-valor {
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* ==========================================================================
   36. Cartão de entrega ao natural — pedido do dono (03/09/2026)
   ==========================================================================
   O cartão do frete morava DENTRO do cartão do resumo, com fundo, canto
   arredondado e uma sombra própria mais forte que a do pai: moldura dentro
   de moldura. Agora ele é só um bloco no fluxo do resumo — quem tem borda e
   sombra é o cartão de fora. */
/* Os dois seletores: `.cdm-carrinho-pagina .cdm-frete__cartao` (seção 17)
   ainda punha um fio de 1px — é preciso a mesma especificidade para tirar. */
.cdm-carrinho-pagina .cdm-frete__cartao,
.cdm-frete__cartao {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Endereço do CEP sem negrito: é confirmação, não título. */
.cdm-frete__destino {
	margin: var(--cdm-e-2) 0 0;
}

.cdm-frete__destino-rotulo {
	display: block;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.cdm-frete__destino,
.cdm-frete__destino strong,
.cdm-frete__destino-linha {
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-resumo-texto);
}

/* Caixa da retirada na loja: volta a ter fundo (a seção 34 tinha tirado). Vale
   nas duas formas em que a retirada aparece — sozinha (`.cdm-frete__opcao`,
   quando é o único método) e como item da lista aberta. */
.cdm-frete__item[data-cdm-tipo="retirada"],
.cdm-totais--retirada .cdm-frete__opcao,
.cdm-frete__opcao {
	padding: 0.625rem 0.8125rem;
	background: var(--cdm-resumo-retirada-fundo);
	border-radius: 0.5625rem;
}

.cdm-frete__opcao-titulo {
	font-weight: var(--cdm-peso-forte);
}

/* Lista de opções sempre aberta: o <details> saiu, então o que restava dele
   (seta, resumo clicável) não existe mais. */
.cdm-frete__lista {
	margin: var(--cdm-e-3) 0 0;
}

/* ==========================================================================
   37. Resumo condensado e lixeira discreta — pedido do dono (03/09/2026)
   ==========================================================================
   O resumo tinha 1071px de altura numa tela de 900: rolagem garantida no
   desktop. Nada foi removido — só encolheu o respiro entre as partes, na
   ordem em que ele mais custava (abas, lista de frete, extrato, botão). */

.cdm-carrinho-pagina {
	margin-block: var(--cdm-e-2);
}

.cdm-etapas {
	margin: 0 0 var(--cdm-e-3);
}

.cdm-totais__modo {
	margin: 0 0 var(--cdm-e-3);
}

button.cdm-totais__modo-botao {
	height: 2.5rem;
}

.cdm-totais__tabela tr.cdm-frete,
.cdm-totais__tabela tr.woocommerce-shipping-totals {
	padding: 0 0 var(--cdm-e-2);
}

/* Campo do CEP e endereço mais juntos. */
.cdm-cep__painel {
	gap: 0.375rem;
}

.cdm-cep__rotulo {
	margin-bottom: 0.25rem;
}

input.cdm-cep__entrada {
	height: 2.125rem;
}

.cdm-frete__destino {
	margin: var(--cdm-e-1) 0 0;
	line-height: 1.35;
}

/* Lista de opções: itens mais baixos e mais juntos. */
.cdm-frete__lista {
	margin: var(--cdm-e-2) 0 0;
	gap: 0.3125rem;
}

.cdm-frete__item,
.cdm-frete__item[data-cdm-tipo="retirada"],
.cdm-totais--retirada .cdm-frete__opcao,
.cdm-frete__opcao {
	min-height: 0;
	padding: 0.4375rem 0.75rem;
}

.cdm-frete__item label {
	flex-wrap: wrap;
	line-height: 1.3;
}

/* Endereço da loja dentro da opção de retirada: linha própria, letra miúda. */
.cdm-frete__loja-endereco {
	flex: 1 0 100%;
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-normal);
	line-height: 1.3;
	color: var(--cdm-texto-apagado);
}

/* Extrato (Itens / Envio / TOTAL). */
.cdm-totais__tabela {
	margin-bottom: var(--cdm-e-2);
}

.cdm-totais__tabela th,
.cdm-totais__tabela td {
	padding: var(--cdm-e-2) 0;
}

.cdm-totais__formas {
	margin-top: var(--cdm-e-2);
}

.cdm-totais__acao {
	margin: var(--cdm-e-3) 0 0;
}

.cdm-carrinho__lateral .checkout-button {
	height: 3rem;
}

/* "Fechar pedido" e "Continuar comprando" sem negrito (dono, 03/09/2026):
   o verde e o tamanho já dizem qual é a ação principal. */
.cdm-carrinho__lateral .checkout-button {
	font-weight: var(--cdm-peso-normal);
}

p.cdm-totais__continuar a {
	font-weight: var(--cdm-peso-normal);
	text-decoration: underline;
}

.cdm-totais__cupom-abrir {
	margin: var(--cdm-e-2) 0 0;
}

.cdm-totais__cupom {
	margin-top: var(--cdm-e-2);
}

p.cdm-totais__continuar {
	margin: var(--cdm-e-3) 0 0;
}

/* Lixeira cinza e translúcida: remover item é ação de saída, não convite.
   `!important` porque o woocommerce.css pinta `a.remove` de vermelho com
   `!important` — sem isto o vermelho dele vence qualquer regra nossa. */
a.cdm-carrinho__remover,
a.cdm-carrinho__remover .cdm-icone {
	color: var(--cdm-cinza-500) !important;
	opacity: .55;
}

a.cdm-carrinho__remover:hover,
a.cdm-carrinho__remover:focus-visible,
a.cdm-carrinho__remover:hover .cdm-icone {
	color: var(--cdm-cinza-700) !important;
	opacity: 1;
}

/* --- 37.b Ajustes que precisavam de mais especificidade -------------------
   `.cdm-totais p { margin: 0 0 1rem }` (0,1,1) vencia `.cdm-totais__cupom-abrir`
   (0,1,0); o `.wc-proceed-to-checkout` traz 1em de padding do woocommerce.css;
   e o vermelho da lixeira vem de `.woocommerce a.remove` (0,2,1) com
   `!important`. Todos precisam de seletor à altura. */

p.cdm-totais__cupom-abrir {
	margin: var(--cdm-e-2) 0 0;
}

.cdm-totais .cdm-totais__acao {
	padding: 0;
	margin-top: var(--cdm-e-3);
}

.cdm-totais__tabela th,
.cdm-totais__tabela td {
	padding: 0.375rem 0;
}

.cdm-carrinho__lateral .cdm-totais {
	padding-block: var(--cdm-e-3);
}

.woocommerce a.remove.cdm-carrinho__remover {
	color: var(--cdm-cinza-500) !important;
}

.woocommerce a.remove.cdm-carrinho__remover:hover,
.woocommerce a.remove.cdm-carrinho__remover:focus-visible {
	color: var(--cdm-cinza-700) !important;
}

/* --- 37.c Últimos ganhos de altura ---------------------------------------- */

/* O Olist imprime o prazo DUAS vezes na mesma opção: dentro do rótulo
   (`<small class="olist-delivery-time">(6 dias úteis)</small>`, via
   woocommerce_cart_shipping_method_full_label) e de novo depois dele, no
   hook woocommerce_after_shipping_rate. A segunda cópia só repete a
   primeira — e custa uma linha inteira em cada opção do Olist. */
.cdm-frete__item .olist-delivery-time-wrapper,
.cdm-checkout__frete .olist-delivery-time-wrapper {
	display: none;
}

/* `.cdm-totais p` (0,1,1) vence a classe sozinha: o endereço precisa do
   seletor com a tag para fechar o espaço até a lista de opções. */
p.cdm-frete__destino {
	margin: var(--cdm-e-1) 0 0;
}

.cdm-frete__topo {
	margin-bottom: var(--cdm-e-2);
}

/* Extrato: 9px de respiro por célula vinham de uma regra mais específica. */
.cdm-carrinho__lateral .cdm-totais__tabela th,
.cdm-carrinho__lateral .cdm-totais__tabela td,
.cdm-totais .cdm-totais__tabela th,
.cdm-totais .cdm-totais__tabela td {
	padding: 0.375rem 0;
}

/* --- 37.d Endereço da loja em linha própria ------------------------------
   O rótulo da opção é um flex com espaço entre nome e preço; o endereço
   precisa de `flex-basis: 100%` E `order` para cair sozinho na linha de
   baixo, depois do "Grátis", em vez de emendar nele. */
.cdm-frete__item label,
.cdm-checkout__frete .cdm-frete__item label {
	flex-wrap: wrap;
}

.cdm-frete__item label .cdm-frete__loja-endereco,
.cdm-checkout__frete .cdm-frete__item label .cdm-frete__loja-endereco {
	display: block;
	order: 3;
	flex: 0 0 100%;
	width: 100%;
	margin-top: 2px;
	text-align: left;
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-normal);
	line-height: 1.3;
	color: var(--cdm-texto-apagado);
}

/* ==========================================================================
   38. Cabeçalho do carrinho: só logo, régua de etapas e "Site seguro"
   ==========================================================================
   Pedido do dono (03/09/2026), inspirado no cabeçalho da Drogaria Indiana:
   na página de conversão o topo perde tudo que leva embora (busca, conta,
   cesta) e mostra em que ponto da compra o cliente está. */

body.woocommerce-cart .cdm-cabecalho__hamburguer,
body.woocommerce-cart .cdm-cabecalho__acoes,
body.woocommerce-cart .cdm-cabecalho__busca-movel,
body.woocommerce-cart .cdm-cabecalho .cdm-busca {
	display: none;
}

/* A régua ocupa o meio da linha do cabeçalho. */
.cdm-cabecalho .cdm-etapas--cabecalho {
	flex: 1 1 auto;
	margin: 0;
	padding-inline: var(--cdm-e-4);
}

.cdm-etapas--cabecalho ol.cdm-etapas__lista {
	justify-content: center;
	gap: 2.75rem;
}

/* Ícone em cima, rótulo embaixo — como na referência. */
.cdm-etapas--cabecalho .cdm-etapas__item {
	position: relative;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--cdm-t-xs);
	line-height: 1.2;
	text-align: center;
}

/* O traço tracejado liga um círculo ao outro, na altura do círculo — por isso
   sai do fluxo (com o rótulo embaixo, ele cairia no meio do texto). */
.cdm-etapas--cabecalho .cdm-etapas__item + .cdm-etapas__item::before {
	position: absolute;
	top: 0.9375rem;
	right: calc(100% + 0.375rem);
	width: 2rem;
	margin: 0;
	border-top-color: var(--cdm-azul);
	opacity: .4;
}

/* Contraste sobre o amarelo: círculo branco com o azul-marinho da marca; a
   etapa atual inverte (azul cheio, ícone branco). Nada de cinza sobre
   amarelo, que some. */
.cdm-etapas--cabecalho .cdm-etapas__icone {
	width: 1.875rem;
	height: 1.875rem;
	background: var(--cdm-branco);
	color: var(--cdm-azul);
	font-size: var(--cdm-t-xs);
}

.cdm-etapas--cabecalho .cdm-etapas__item {
	color: var(--cdm-azul);
	opacity: .65;
}

.cdm-etapas--cabecalho .cdm-etapas__item--concluida {
	color: var(--cdm-azul);
	opacity: .85;
}

.cdm-etapas--cabecalho .cdm-etapas__item--concluida .cdm-etapas__icone {
	background: var(--cdm-branco);
	color: var(--cdm-azul);
}

.cdm-etapas--cabecalho .cdm-etapas__item--ativa {
	opacity: 1;
	font-weight: var(--cdm-peso-semi);
}

.cdm-etapas--cabecalho .cdm-etapas__item--ativa .cdm-etapas__icone {
	background: var(--cdm-azul);
	color: var(--cdm-branco);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 55%);
}

/* No celular a régua desce para uma linha só dela: ao lado do logo ela
   passava por cima dele. A linha do cabeçalho quebra, a régua ocupa a
   largura toda e os rótulos continuam à mostra. */
@media (max-width: 767px) {
	body.woocommerce-cart .cdm-cabecalho__linha {
		flex-wrap: wrap;
		row-gap: var(--cdm-e-2);
	}

	.cdm-cabecalho .cdm-etapas--cabecalho {
		order: 3;
		flex: 1 0 100%;
		padding-inline: 0;
	}

	.cdm-etapas--cabecalho ol.cdm-etapas__lista {
		gap: 2.25rem;
	}

	.cdm-etapas--cabecalho .cdm-etapas__icone {
		width: 1.625rem;
		height: 1.625rem;
	}

	.cdm-etapas--cabecalho .cdm-etapas__item {
		font-size: var(--cdm-t-2xs);
	}

	.cdm-etapas--cabecalho .cdm-etapas__item + .cdm-etapas__item::before {
		top: 0.8125rem;
		width: 1.5rem;
	}
}

/* --- 38.b Peso e sublinhado que precisavam de !important -------------------
   O `font-weight: 700` do botão vem de `.woocommerce ... a.button` do
   woocommerce.css, e o `text-decoration: none !important` de "Continuar
   comprando" vem de uma regra global `a` herdada da produção (YellowPencil).
   Nos dois casos é folha de fora com peso maior — o caso em que o CONTRATO
   admite `!important`. */

.cdm-carrinho__lateral .checkout-button {
	font-weight: var(--cdm-peso-normal) !important;
}

p.cdm-totais__continuar a {
	text-decoration: underline !important;
}

/* ==========================================================================
   39. Opções de frete: preço sempre na mesma coluna (dono, 03/09/2026)
   ==========================================================================
   O rótulo vem em duas partes do PHP (título + preço). Aqui o título ocupa a
   sobra e o preço fica preso à direita — assim o valor de toda opção começa
   na mesma coluna, e o "Grátis" da retirada lê como preço, não como parte do
   nome do método. */

/* `.woocommerce ul#shipping_method li label` (0,1,4) do woocommerce.css
   declara `display: inline` e vencia a classe sozinha — sem flex, o preço
   voltava a correr atrás do nome. Os dois primeiros seletores existem só
   para passar dele por especificidade, sem `!important`. */
.woocommerce ul#shipping_method li.cdm-frete__item label,
.woocommerce-page ul#shipping_method li.cdm-frete__item label,
.cdm-frete__item label,
.cdm-checkout__frete .cdm-frete__item label {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	width: 100%;
	min-width: 0;
}

.cdm-frete__opcao-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.cdm-frete__opcao-titulo {
	line-height: 1.3;
}

.cdm-frete__opcao-extra,
.cdm-frete__item label .cdm-frete__loja-endereco {
	display: block;
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-normal);
	line-height: 1.3;
	color: var(--cdm-texto-apagado);
}

.cdm-frete__opcao-valor {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	font-weight: var(--cdm-peso-forte);
	white-space: nowrap;
}

/* ==========================================================================
   40. Cabeçalho do carrinho, versão da referência do dono (03/09/2026)
   ==========================================================================
   Tudo em branco sobre o amarelo: círculos vazados com fio branco, rótulo
   embaixo, fio contínuo no trecho já andado e tracejado no que falta, e um
   filete vertical separando logo / régua / "Site seguro". */

/* Com a busca escondida, a coluna da esquerda continuava crescendo e
   empurrava a régua para a direita. Sem crescer, ela fica do tamanho do logo
   e a régua ocupa (e centraliza) exatamente o vão até o "Site seguro". */
body.woocommerce-cart .cdm-cabecalho__esquerda {
	flex: 0 0 auto;
}

.cdm-cabecalho .cdm-etapas--cabecalho {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Filetes verticais: um antes da régua, outro antes do "Site seguro". */
.cdm-cabecalho .cdm-etapas--cabecalho::before,
.cdm-cabecalho__seguro::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 2.75rem;
	background: rgb(255 255 255 / 45%);
	transform: translateY(-50%);
}

.cdm-cabecalho__seguro {
	position: relative;
	padding-left: var(--cdm-e-6);
	font-weight: var(--cdm-peso-normal);
}

/* O cadeado nascia mais baixo que o texto: como SVG inline ele senta na
   linha de base da fonte. Em bloco, o align-items do pai manda. */
.cdm-cabecalho__seguro svg {
	display: block;
	flex: 0 0 auto;
}

/* Círculos vazados, ícone branco. */
.cdm-etapas--cabecalho .cdm-etapas__icone {
	width: 2.125rem;
	height: 2.125rem;
	background: transparent;
	border: 2px solid var(--cdm-branco);
	color: var(--cdm-branco);
	font-size: var(--cdm-t-sm);
	box-shadow: none;
}

.cdm-etapas--cabecalho .cdm-etapas__item,
.cdm-etapas--cabecalho .cdm-etapas__item--concluida {
	color: var(--cdm-branco);
	opacity: .85;
	font-weight: var(--cdm-peso-normal);
}

/* Etapa atual: círculo maior, fio mais grosso e rótulo em negrito — é o
   único ponto em que o peso muda, e é o que diz onde o cliente está. */
.cdm-etapas--cabecalho .cdm-etapas__item--ativa {
	opacity: 1;
	font-weight: var(--cdm-peso-forte);
}

.cdm-etapas--cabecalho .cdm-etapas__item--ativa .cdm-etapas__icone {
	width: 2.625rem;
	height: 2.625rem;
	border-width: 3px;
	background: transparent;
	color: var(--cdm-branco);
	font-size: var(--cdm-t-md);
	box-shadow: none;
}

/* O ícone da etapa atual é maior: os outros descem para o meio dele. */
.cdm-etapas--cabecalho .cdm-etapas__item {
	justify-content: flex-start;
	min-height: 4.25rem;
}

.cdm-etapas--cabecalho ol.cdm-etapas__lista {
	align-items: flex-start;
	gap: 3.25rem;
}

.cdm-etapas--cabecalho .cdm-etapas__item:not(.cdm-etapas__item--ativa) {
	padding-top: 0.25rem;
}

/* Trecho já andado: fio contínuo. O que falta: tracejado. */
.cdm-etapas--cabecalho .cdm-etapas__item + .cdm-etapas__item::before {
	top: 1.3125rem;
	right: calc(100% + 0.5rem);
	width: 2.5rem;
	border-top: 2px dashed var(--cdm-branco);
	opacity: .85;
}

.cdm-etapas--cabecalho .cdm-etapas__item--concluida + .cdm-etapas__item::before {
	border-top-style: solid;
	opacity: 1;
}

/* O nome do método volta ao peso normal: o negrito é do preço, e com os dois
   em negrito nenhum dos dois se destaca. (`.cdm-frete__opcao-titulo` em peso
   forte vale só na caixa de método único, seção 36.) */
.cdm-frete__item .cdm-frete__opcao-titulo {
	font-weight: var(--cdm-peso-normal);
}

/* ==========================================================================
   41. Ajustes do dono, 03/09/2026 (segunda leitura do cabeçalho e da lista)
   ========================================================================== */

/* --- régua: menor que o logo (54px), e "apagada x acesa" clara --- */

/* Os filetes verticais saíram. */
.cdm-cabecalho .cdm-etapas--cabecalho::before,
.cdm-cabecalho__seguro::before {
	content: none;
}

.cdm-cabecalho__seguro {
	padding-left: 0;
}

.cdm-etapas--cabecalho ol.cdm-etapas__lista {
	gap: 2.5rem;
}

.cdm-etapas--cabecalho .cdm-etapas__item {
	min-height: 0;
	gap: 0.1875rem;
	font-size: var(--cdm-t-2xs);
	line-height: 1.2;
	padding-top: 0;
}

/* Etapas ainda não vividas e já vencidas: círculo vazado e apagado. */
.cdm-etapas--cabecalho .cdm-etapas__item,
.cdm-etapas--cabecalho .cdm-etapas__item--concluida {
	opacity: .5;
	font-weight: var(--cdm-peso-normal);
}

.cdm-etapas--cabecalho .cdm-etapas__icone,
.cdm-etapas--cabecalho .cdm-etapas__item--concluida .cdm-etapas__icone {
	width: 1.5rem;
	height: 1.5rem;
	border: 1.5px solid var(--cdm-branco);
	background: transparent;
	color: var(--cdm-branco);
	font-size: 0.625rem;
}

/* A etapa da vez é a única acesa: círculo cheio, ícone no amarelo do fundo. */
.cdm-etapas--cabecalho .cdm-etapas__item--ativa {
	opacity: 1;
	font-weight: var(--cdm-peso-forte);
}

.cdm-etapas--cabecalho .cdm-etapas__item--ativa .cdm-etapas__icone {
	width: 1.75rem;
	height: 1.75rem;
	border-color: var(--cdm-branco);
	background: var(--cdm-branco);
	color: var(--cdm-amarelo);
	font-size: 0.75rem;
}

.cdm-etapas--cabecalho .cdm-etapas__item + .cdm-etapas__item::before {
	top: 0.875rem;
	width: 1.75rem;
	border-top-width: 1.5px;
	opacity: .5;
}

.cdm-etapas--cabecalho .cdm-etapas__item--concluida + .cdm-etapas__item::before {
	opacity: .5;
}

/* --- opções de frete: uma linha, bolinha à esquerda no meio do texto --- */

/* `width: 100%` no rótulo empurrava o texto para baixo do rádio — daí a
   sensação de card alto e vazio. Com `flex`, os dois dividem a mesma linha. */
.woocommerce ul#shipping_method li.cdm-frete__item label,
.woocommerce-page ul#shipping_method li.cdm-frete__item label,
.cdm-frete__item label,
.cdm-checkout__frete .cdm-frete__item label {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	gap: var(--cdm-e-2);
}

.cdm-frete__item {
	align-items: center;
	gap: var(--cdm-e-2);
	padding: 0.375rem 0.625rem;
}

.cdm-frete__item input[type="radio"] {
	flex: 0 0 auto;
	align-self: center;
}

/* Nome e prazo na mesma linha; o que não couber é cortado com reticências,
   nunca quebrado. */
.cdm-frete__opcao-info {
	flex-direction: row;
	align-items: baseline;
	gap: 0.3125rem;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cdm-frete__opcao-titulo {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Exceção: na retirada o endereço da loja é informação necessária e não cabe
   ao lado do nome — só ele continua em duas linhas. */
.cdm-frete__item[data-cdm-tipo="retirada"] .cdm-frete__opcao-info {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	white-space: normal;
}

/* --- CEP confirmado com o número e o "Alterar" --- */
.cdm-frete__destino-cep {
	display: flex;
	align-items: baseline;
	gap: var(--cdm-e-2);
}

button.cdm-frete__alterar-cep {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-resumo-azul-botao);
	text-decoration: underline;
	cursor: pointer;
}

/* ==========================================================================
   42. Terceira leitura do dono (03/09/2026)
   ========================================================================== */

/* --- ícone dentro do círculo da régua ---
   `.cdm-icone` traz font-size 1.25rem (20px) e o glifo estourava um círculo
   de 24px. O tamanho tem de ser dado ao próprio ícone, não ao invólucro. */
.cdm-etapas--cabecalho .cdm-etapas__icone .cdm-icone {
	font-size: 0.6875rem;
	line-height: 1;
}

.cdm-etapas--cabecalho .cdm-etapas__item--ativa .cdm-etapas__icone .cdm-icone {
	font-size: 0.8125rem;
}

/* --- endereço: duas linhas à esquerda, CEP e "Alterar" à direita --- */
p.cdm-frete__destino {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	margin: var(--cdm-e-2) 0 0;
}

.cdm-frete__destino-endereco {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.cdm-frete__destino-endereco .cdm-frete__destino-linha {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cdm-frete__destino-cep {
	display: flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: var(--cdm-e-2);
	white-space: nowrap;
}

.cdm-frete__destino-numero {
	font-weight: var(--cdm-peso-normal);
}

/* --- lupa dentro do campo de CEP, como na página de produto --- */
.cdm-cep__linha {
	position: relative;
	display: block;
}

button.cdm-cep__lupa {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cdm-azul);
	cursor: pointer;
	z-index: 2;
}

button.cdm-cep__lupa .cdm-icone {
	font-size: 0.875rem;
}

input.cdm-cep__entrada {
	padding-right: 2.25rem;
}

/* --- última passada de altura: cada linha que sai é rolagem a menos --- */
.cdm-cep__campo {
	margin: 0;
}

.cdm-totais__tabela tr.cdm-frete,
.cdm-totais__tabela tr.woocommerce-shipping-totals {
	padding-bottom: var(--cdm-e-1);
}

.cdm-frete__lista {
	margin-top: var(--cdm-e-2);
}

.cdm-rodape--simples .cdm-rodape-simples__corpo {
	padding-block: var(--cdm-e-2);
}

.cdm-rodape--simples .cdm-rodape-simples__legal {
	margin: 0;
	padding-bottom: var(--cdm-e-1);
}

/* --- prateleira de sugestões do carrinho: cartão de vitrine, não de página
   de produto. A foto grande e as miniaturas faziam a coluna da esquerda ter
   quase 900px de altura sozinha — e é ela que hoje manda na rolagem. --- */
.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__midia {
	height: auto;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__link-imagem {
	display: block;
	height: 8.5rem;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__imagem {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Miniaturas são para escolher variação na página do produto; aqui só ocupam
   linha. */
.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__miniaturas {
	display: none;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__titulo {
	font-size: var(--cdm-t-xs);
	line-height: 1.3;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__corpo {
	gap: var(--cdm-e-1);
	padding: var(--cdm-e-2);
}

/* ==========================================================================
   43. Alinhamentos e rodapé de uma linha (dono, 03/09/2026)
   ========================================================================== */

/* Campo do CEP fechado quando já há endereço; "Alterar" reabre. */
.cdm-frete__topo--confirmado .woocommerce-shipping-calculator {
	display: none;
}

.cdm-frete__topo--confirmado.cdm-frete__topo--editando .woocommerce-shipping-calculator {
	display: block;
}

/* CEP e "Alterar" alinhados com a PRIMEIRA linha do endereço, não com o meio
   do bloco de duas linhas. */
p.cdm-frete__destino {
	align-items: flex-start;
}

.cdm-frete__destino-cep {
	align-items: baseline;
	line-height: 1.3;
}

/* TOTAL e valor na mesma linha: a nota "+ frete a calcular" fica abaixo do
   valor e empurrava o número para cima da palavra. */
/* `baseline` põe a palavra TOTAL e o número na mesma linha de escrita, mesmo
   com tamanhos diferentes e com a nota "+ frete a calcular" embaixo do valor. */
.cdm-totais__tabela .order-total th,
.cdm-totais__tabela .order-total td {
	vertical-align: baseline;
}

/* --- rodapé do carrinho numa linha só, no máximo 90px --- */
@media (min-width: 900px) {
	.cdm-rodape--simples .cdm-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cdm-e-6);
	}

	.cdm-rodape--simples .cdm-rodape-simples__corpo {
		flex: 1 1 auto;
		align-items: center;
		gap: var(--cdm-e-8);
		margin: 0;
		padding-block: var(--cdm-e-2);
	}

	.cdm-rodape--simples .cdm-rodape-simples__bloco {
		flex-direction: row;
		align-items: center;
		gap: var(--cdm-e-3);
	}

	.cdm-rodape--simples .cdm-rodape-simples__legal {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}

	/* Bandeiras e selos menores: é o que faz o rodapé caber em 90px. */
	.cdm-rodape--simples .cdm-rodape__miniatura {
		width: 2.25rem;
	}

	.cdm-rodape--simples .cdm-rodape-simples__selos img {
		height: 1.5rem;
		width: auto;
	}

	.cdm-rodape--simples .cdm-rodape-simples__rotulo {
		font-size: var(--cdm-t-2xs);
		white-space: nowrap;
	}
}

/* --- 43.b Último aperto de altura, sem tirar nada da tela ---------------- */

.cdm-carrinho__lateral .cdm-totais {
	padding-block: var(--cdm-e-2);
}

.cdm-totais__modo {
	margin-bottom: var(--cdm-e-2);
}

.cdm-frete__lista {
	gap: 0.25rem;
}

.cdm-frete__item,
.cdm-frete__item[data-cdm-tipo="retirada"] {
	padding: 0.3125rem 0.625rem;
}

.cdm-carrinho__lateral .cdm-totais__tabela th,
.cdm-carrinho__lateral .cdm-totais__tabela td,
.cdm-totais .cdm-totais__tabela th,
.cdm-totais .cdm-totais__tabela td {
	padding: 0.25rem 0;
}

.cdm-totais__formas {
	gap: 0.125rem;
	margin-top: var(--cdm-e-1);
}

.cdm-totais__forma {
	line-height: 1.3;
}

.cdm-totais .cdm-totais__acao {
	margin-top: var(--cdm-e-2);
}

.cdm-carrinho__lateral .checkout-button {
	height: 2.75rem;
}

p.cdm-totais__continuar {
	margin-top: var(--cdm-e-2);
}

.cdm-totais__cupom-abrir {
	margin-top: var(--cdm-e-1);
}

/* --- 43.c Os vãos entre cabeçalho, miolo e rodapé ------------------------
   Sobravam 112px só de respiro no carrinho (40 acima do miolo, 40 abaixo e
   32 antes do rodapé) — mais do que a rolagem que faltava cortar. Nenhum
   conteúdo sai; só o ar entre os blocos. */
body.woocommerce-cart .cdm-conteudo {
	padding-block: 0;
	margin-block: 0;
}

body.woocommerce-cart .cdm-carrinho-pagina {
	margin-block: var(--cdm-e-3);
}

body.woocommerce-cart .cdm-rodape--simples {
	margin-top: var(--cdm-e-2);
}

/* A sugestão continua na tela, com o cartão em proporção de vitrine. */
.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__precos {
	gap: 0;
	line-height: 1.25;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes__cabecalho {
	margin-bottom: var(--cdm-e-2);
}

/* O respiro que faltava: o `.cdm-container` do miolo traz 32px em cima e
   embaixo, e o rodapé mais 16+16. No carrinho isso é rolagem pura. */
body.woocommerce-cart .cdm-conteudo > .cdm-container {
	padding-block: var(--cdm-e-2);
}

body.woocommerce-cart .cdm-rodape--simples {
	padding-block: var(--cdm-e-4);
}

/* O rodapé voltou a respirar (dono, 03/09/2026). Os pixels saem da prateleira
   de sugestões, que é a coluna mais alta e não manda no que o cliente precisa
   ver — a página continua cabendo numa tela de 900px. */
.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__link-imagem {
	height: 7rem;
}

.cdm-carrinho__principal .cdm-carrinho-sugestoes .cdm-card__acao {
	margin-top: var(--cdm-e-1);
}

/* Enquanto o cliente digita um CEP novo, o endereço e as opções antigas somem:
   elas são do CEP anterior e ficariam mentindo até a resposta chegar. */
.cdm-totais--recalculando .cdm-frete__destino,
.cdm-totais--recalculando .cdm-frete__lista,
.cdm-totais--recalculando .cdm-frete-resumo {
	display: none;
}

/* Título da caixa de CEP, igual ao da página de produto. */
.cdm-cep__titulo {
	margin: 0 0 var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

/* O painel é inline: nada de `hidden` sobrando dele. */
.cdm-cep__painel--inline[hidden] {
	display: grid;
}

/* ==========================================================================
   44. Colunas alinhadas e aviso de estoque (dono, 03/09/2026)
   ========================================================================== */

/* Preço à esquerda da coluna, no mesmo eixo do título "Preço Unitário" — do
   jeito que o nome do produto já começa sob o "P" de "Produto". Alinhado à
   direita, o número curto nunca ficava embaixo do título. */
.cdm-carrinho__tabela thead th.product-price,
tr.woocommerce-cart-form__cart-item td.product-price {
	text-align: left;
}

/* Aviso de estoque abaixo do seletor de quantidade. */
.cdm-carrinho__estoque {
	margin: var(--cdm-e-1) 0 0;
	font-size: var(--cdm-t-2xs);
	line-height: 1.3;
	color: var(--cdm-texto-apagado);
	text-align: center;
}

/* Piscada curta quando o número é puxado de volta para o estoque: sem ela a
   correção acontece sem o cliente perceber que digitou demais. */
.cdm-carrinho__qtd input.qty.cdm-carrinho__qtd--travado {
	animation: cdm-trava-estoque .9s ease;
}

@keyframes cdm-trava-estoque {
	0%, 100% { color: var(--cdm-texto); }
	20%, 60% { color: var(--cdm-vermelho); }
}

@media (prefers-reduced-motion: reduce) {
	.cdm-carrinho__qtd input.qty.cdm-carrinho__qtd--travado {
		animation: none;
	}
}

/* Botão desligado quando o carrinho tem item que impede fechar o pedido. */
.cdm-carrinho__lateral .cdm-totais__acao-bloqueada {
	display: flex !important;
	width: 100% !important;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	height: 2.75rem;
	border-radius: 1.6875rem;
	background: var(--cdm-cinza-300) !important;
	border-color: var(--cdm-cinza-300) !important;
	color: var(--cdm-texto-apagado) !important;
	font-size: 0.9375rem;
	cursor: not-allowed;
}

.cdm-totais__bloqueio {
	margin: var(--cdm-e-2) 0 0;
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-vermelho);
	text-align: center;
}

/* ==========================================================================
   45. Linha do carrinho alinhada pela primeira linha do nome (dono, 03/09/2026)
   ==========================================================================
   `align-items: center` centralizava CADA célula por conta própria: com o nome
   em duas linhas (ou com o aviso de estoque embaixo do seletor), o nome, o
   número e o preço paravam em alturas diferentes e a linha parecia torta.
   `baseline` põe os três na mesma linha de escrita — a primeira do nome. A
   foto e a lixeira ficam de fora: imagem alinhada por baseline empurraria a
   linha inteira para baixo. */
@media (min-width: 768px) {
	tr.woocommerce-cart-form__cart-item {
		align-items: baseline;
	}

	tr.woocommerce-cart-form__cart-item td.product-thumbnail,
	tr.woocommerce-cart-form__cart-item td.product-remove {
		align-self: start;
	}

	/* A lixeira é um alvo de 2rem: sobe um pouco para o ícone ficar na altura
	   do texto, não no topo da célula. */
	tr.woocommerce-cart-form__cart-item td.product-remove {
		margin-top: -0.375rem;
	}

	/* O cabeçalho usa o mesmo alinhamento de texto de cada coluna, para o
	   título ficar exatamente sobre o conteúdo. */
	.cdm-carrinho__tabela thead th.product-quantity,
	tr.woocommerce-cart-form__cart-item td.product-quantity {
		text-align: center;
	}
}

/* O aviso de estoque acompanha o seletor, que é centrado na coluna. */
.cdm-carrinho__estoque {
	text-align: center;
}

/* ==========================================================================
   46. Checkout com a mesma casca do carrinho e mais enxuto (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Três pedidos numa seção só, porque tratam da mesma tela:

   1. o /finalizar-compra/ herda do /carrinho/ o fundo cinza, a régua de
      etapas no cabeçalho (com "Pagamento" ativo) e o rodapé simples — este
      último já vinha do footer.php, que trata as duas páginas igual;
   2. a forma de entrega volta a ser a caixa do carrinho: abas em pílula e
      opções em blocos soltos, sem a moldura de fio que o checkout tinha;
   3. margens, respiros e rolagem menores — a página cabia em duas dobras à
      toa.
   ========================================================================== */

/* --- 46.a mesma casca do carrinho ---------------------------------------- */

body.woocommerce-checkout:not(.woocommerce-order-received) {
	background: var(--cdm-fundo-carrinho);
}

/* A régua entra no meio da linha do cabeçalho, e a coluna da esquerda para de
   crescer para não empurrá-la (mesma regra da seção 40, agora nas duas
   páginas). */
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho__esquerda {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-cabecalho__linha {
		flex-wrap: wrap;
		row-gap: var(--cdm-e-2);
	}
}

/* --- 46.b forma de entrega igual à do carrinho --------------------------- */

/* Sem moldura própria: o cartão da etapa já é a moldura. O bloco é o primeiro
   da etapa agora (vem antes do endereço), então o fio de cima sobrava. */
.cdm-checkout__frete {
	padding-top: 0;
	border-top: 0;
}

/* Lista solta, como no resumo do carrinho: cada opção é um bloco com fundo
   próprio, sem a caixa de fio único que agrupava tudo (seção 23). */
.cdm-checkout__frete .cdm-frete__lista {
	gap: 0.3125rem;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.cdm-checkout__frete .cdm-frete__item {
	border: 0;
	border-bottom: 0;
	border-radius: 0.5625rem;
	background: var(--cdm-resumo-opcao-fundo);
	padding: 0.4375rem 0.75rem;
	min-height: 0;
	gap: var(--cdm-e-2);
}

.cdm-checkout__frete .cdm-frete__item[data-cdm-tipo="retirada"] {
	background: var(--cdm-resumo-retirada-fundo);
}

.cdm-checkout__frete .cdm-frete__item:hover {
	border-color: transparent;
}

/* Escolhida: o mesmo fio azul por fora do carrinho, sem trocar o fundo. */
.cdm-checkout__frete .cdm-frete__item:has(input:checked) {
	background: var(--cdm-resumo-opcao-fundo);
	outline: 1.5px solid var(--cdm-resumo-azul-botao);
	outline-offset: 0;
}

.cdm-checkout__frete .cdm-frete__item[data-cdm-tipo="retirada"]:has(input:checked) {
	background: var(--cdm-resumo-retirada-fundo);
}

.cdm-checkout__frete .cdm-frete__item label {
	font-size: 0.8125rem;
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-resumo-texto);
}

/* Título da caixa no peso do resto do checkout, sem virar um segundo
   cabeçalho de etapa. O filtro de títulos do tema troca o <h3> por um <h2>
   com .cdm-tam-h3, então o seletor não pode depender da tag. */
.cdm-checkout__frete .cdm-checkout__secao.cdm-tam-h3,
.cdm-checkout__frete .cdm-checkout__secao {
	font-size: var(--cdm-t-sm);
	margin: 0 0 var(--cdm-e-2);
}

p.cdm-checkout__frete-prazo {
	margin-top: var(--cdm-e-2);
}

.cdm-checkout__frete .cdm-checkout__modo,
.cdm-checkout__modo-dica {
	margin-bottom: var(--cdm-e-2);
}

/* --- 46.c menos margem, menos rolagem ------------------------------------ */

.cdm-checkout {
	margin-block: var(--cdm-e-3);
}

.cdm-checkout .cdm-checkout__passo {
	padding: var(--cdm-e-4);
	gap: var(--cdm-e-3);
}

@media (min-width: 1024px) {
	.cdm-checkout__grade {
		gap: var(--cdm-e-3);
	}

	.cdm-checkout__passo--pagamento {
		top: var(--cdm-e-2);
	}
}

.cdm-passo__cabecalho {
	gap: var(--cdm-e-2);
	padding-bottom: var(--cdm-e-2);
}

.cdm-passo__numero {
	width: 2rem;
	height: 2rem;
	font-size: var(--cdm-t-base);
}

.cdm-passo__titulo {
	font-size: var(--cdm-t-md);
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
.cdm-checkout .woocommerce-additional-fields__field-wrapper,
.cdm-checkout .cdm-checkout__endereco {
	gap: var(--cdm-e-2) var(--cdm-e-3);
}

/* ==========================================================================
   47. Checkout sem rolagem no desktop e resumo sem negrito (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Duas coisas:

   1. no desktop a página inteira cabe na tela — quem rola, quando precisa, é
      a coluna (e, dentro do resumo, só a lista de itens). A régua do topo, o
      TOTAL e o botão de finalizar ficam sempre à vista;
   2. dentro de .cdm-resumo__tabela nada mais é negrito: o resumo é conferência,
      não hierarquia. O que separa o TOTAL do resto passa a ser só o tamanho.
   ========================================================================== */

/* --- 47.a nada de negrito no resumo -------------------------------------- */

/* Os pesos vinham de vários lugares (th do navegador, .product-quantity em
   <strong>, regras das seções 9, 23 e 35). Um seletor só, na tabela inteira,
   evita ter que desfazer um por um — e vale para o que o AJAX redesenhar. */
.cdm-resumo__tabela,
.cdm-resumo__tabela th,
.cdm-resumo__tabela td,
.cdm-resumo__tabela strong,
.cdm-resumo__tabela b,
.cdm-resumo__tabela .product-quantity,
.cdm-resumo__tabela .woocommerce-Price-amount,
.cdm-resumo__tabela .cdm-resumo__nome,
.cdm-resumo__tabela .cdm-resumo__frete-valor,
.cdm-resumo__tabela tbody td.product-total,
.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td,
.cdm-resumo__tabela tfoot .order-total th,
.cdm-resumo__tabela tfoot .order-total td {
	font-weight: var(--cdm-peso-normal);
}

/* --- 47.b a página cabe na tela ------------------------------------------ */

@media (min-width: 1024px) {
	/* Respiro da página menor no checkout: os 32px em cima e embaixo eram
	   altura que fazia falta para a grade caber. */
	body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-pagina {
		padding-block: var(--cdm-e-4);
	}

	body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-rodape--simples {
		margin-top: var(--cdm-e-3);
	}

	/* Nada de rolagem DENTRO das colunas (dono, 04/09/2026): barra de rolagem
	   numa coluna é rolagem do mesmo jeito. O que faz a página caber é o
	   tamanho do conteúdo — as medidas abaixo e a seção 49. A única lista com
	   rolagem própria é a de itens do resumo, que não tem fim conhecido. */
	.cdm-checkout__passo--pagamento {
		position: static;
	}

	/* Lista de itens sem truque nenhum: o <tbody> em bloco (para poder rolar)
	   herdava a largura de uma coluna e espremia o nome do produto num filete.
	   Como a coluna 3 cabe folgada, a lista voltou a ser tabela normal — com
	   carrinho muito grande a página cresce, e aí rolar é o certo. */
	.cdm-resumo__tabela {
		width: 100%;
	}
}

/* ==========================================================================
   48. Caixa de entrega: CEP junto das abas, sem título e sem ícone (04/09)
   --------------------------------------------------------------------------
   O CEP passou a morar dentro da caixa de entrega, logo abaixo das abas
   (checkout.js, moverCep): é ele que faz a lista de opções aparecer, e o
   cliente precisa ver — e poder trocar — o CEP que gerou aqueles preços. O
   resto do endereço continua embaixo, preenchido a partir dele.
   ========================================================================== */

/* Linha do CEP dentro da caixa: campo curto, com o "Não sei meu CEP" ao lado. */
.cdm-checkout__frete #billing_postcode_field {
	margin: 0 0 var(--cdm-e-2);
	padding: 0;
	width: auto;
}

.cdm-checkout__frete #billing_postcode_field input {
	max-width: 11rem;
}

/* Ícone de moto/pino nas opções: informação nenhuma que o texto já não dê, e
   a aba acima já diz se é entrega ou retirada (dono, 04/09/2026). */
.cdm-checkout__frete .cdm-frete__icone {
	display: none;
}

/* Prazo do método na mesma cor e tipografia do nome — é continuação do nome
   ("Olist Envios Jadlog (9 dias úteis)"), não uma nota de rodapé. */
.cdm-checkout__frete .cdm-frete__opcao-extra {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* ==========================================================================
   49. Quarta leitura do dono (04/09/2026)
   --------------------------------------------------------------------------
   Pagamento acima do resumo (a troca é no form-checkout.php), resumo mais
   condensado, sem o texto longo do PIX, sem o painel cinza do #payment, e a
   página presa à tela: nada passa por cima do rodapé, e o rodapé é a última
   coisa — não sobra faixa nenhuma embaixo dele.
   ========================================================================== */

/* --- 49.a distância do topo igual à do carrinho -------------------------- */

/* No carrinho o miolo começa 20px abaixo do cabeçalho (8 do container + 12 do
   bloco). O checkout tinha 16 + 32 de um cabeçalho de página vazio. */
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-conteudo > .cdm-container {
	padding-block: var(--cdm-e-2);
}

body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-pagina__cabecalho {
	display: none;
}

/* --- 49.b CEP dentro da caixa de entrega, linha inteira ------------------ */

/* O woocommerce.css dá `float: left; width: 47%` às linhas .form-row-first —
   medida do layout de duas colunas dele. Flutuando, o CEP empurrava a lista
   de opções para o lado e para fora do cartão. */
.cdm-checkout__frete #billing_postcode_field {
	float: none;
	clear: both;
	width: 100%;
}

/* --- 49.c resumo condensado --------------------------------------------- */

.cdm-checkout__passo--resumo .cdm-resumo {
	font-size: var(--cdm-t-xs);
}

img.cdm-resumo__foto {
	width: 2.5rem;
	height: 2.5rem;
}

.cdm-resumo__item {
	gap: var(--cdm-e-2);
}

.cdm-resumo__nome {
	font-size: var(--cdm-t-2xs);
	line-height: 1.3;
}

/* Com `table-layout: fixed` (seção 47) as duas colunas precisam de medida:
   sem isso o preço e o nome se sobrepunham. */
.cdm-resumo__tabela td.product-name,
.cdm-resumo__tabela th {
	width: auto;
}

.cdm-resumo__tabela td.product-total {
	width: 5.5rem;
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody th,
.cdm-resumo__tabela tbody td,
.cdm-resumo__tabela tbody th {
	padding-block: var(--cdm-e-1);
}

.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td {
	padding-block: var(--cdm-e-1);
	font-size: var(--cdm-t-xs);
}

.cdm-resumo__tabela tfoot .order-total th {
	font-size: var(--cdm-t-sm);
}

.cdm-resumo__tabela tfoot .order-total td {
	font-size: var(--cdm-t-lg);
}

/* --- 49.d pagamento sem o painel cinza e sem a lição de casa do PIX ------ */

/* `#payment { background: #ebe9eb }` vem do woocommerce.css, junto de um
   `::before` que desenha a setinha do painel. Os dois saem: o cartão da etapa
   já é a superfície. */
.cdm-checkout #payment,
.cdm-checkout .cdm-pagamento {
	background: none;
	border-radius: 0;
}

.cdm-checkout #payment::before,
.cdm-checkout .cdm-pagamento::before {
	display: none;
}

/* O texto do PIX explica o que a tela seguinte já mostra e ocupava meia
   coluna (dono, 04/09/2026). O selo "Aprovação imediata" ao lado do nome diz
   o que interessa aqui. */
.cdm-pagamento__lista > li[class*="pix"] .payment_box {
	display: none;
}

/* ==========================================================================
   50. Desktop sem rolagem de verdade (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Nem a página nem as colunas rolam: o conteúdo é que foi encolhido até
   caber numa tela de 900px. Mexe só em respiro e altura de linha — nenhum
   campo, opção ou aviso sai da tela.
   ========================================================================== */

@media (min-width: 1024px) {

	/* --- formas de pagamento em linhas de 44px --- */
	.cdm-pagamento__lista {
		margin-bottom: var(--cdm-e-3);
		gap: var(--cdm-e-1);
	}

	.cdm-pagamento__lista > li {
		padding: var(--cdm-e-2) var(--cdm-e-3);
	}

	.cdm-pagamento__lista > li > label {
		font-size: var(--cdm-t-sm);
	}

	.cdm-pagamento .payment_box {
		margin-top: var(--cdm-e-2);
		padding: var(--cdm-e-3);
		font-size: var(--cdm-t-xs);
	}

	/* --- campos um pouco mais baixos --- */
	.cdm-checkout input[type="text"],
	.cdm-checkout input[type="tel"],
	.cdm-checkout input[type="email"],
	.cdm-checkout input[type="password"],
	.cdm-checkout input[type="number"],
	.cdm-checkout input[type="date"],
	.cdm-checkout select,
	.cdm-checkout .select2-container .select2-selection--single {
		height: 2.375rem;
		min-height: 2.375rem;
	}

	/* --- opções de frete e avisos --- */
	.cdm-checkout__frete .cdm-frete__item {
		padding-block: 0.3125rem;
	}

	p.cdm-checkout__frete-prazo {
		margin-top: var(--cdm-e-2);
		padding-block: var(--cdm-e-1);
	}

	/* --- cartões da etapa --- */
	.cdm-checkout .cdm-checkout__passo {
		padding: var(--cdm-e-3) var(--cdm-e-4);
		gap: var(--cdm-e-2);
	}

	.cdm-checkout__coluna-pagamento {
		gap: var(--cdm-e-3);
	}
}

/* --- 50.b segunda passada: o que ainda não cabia -------------------------- */

@media (min-width: 1024px) {

	/* Forma de pagamento numa linha só: o rádio ficava numa linha e o rótulo
	   noutra (o label é flex, e flex é bloco), 94px por forma. */
	.cdm-pagamento__lista > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cdm-e-2);
	}

	.cdm-pagamento__lista > li > input[type="radio"] {
		margin: 0;
	}

	.cdm-pagamento__lista > li > label {
		flex: 1 1 auto;
		margin: 0;
	}

	.cdm-pagamento__lista > li > label img {
		max-height: var(--cdm-e-4);
	}

	.cdm-pagamento__lista > li > .payment_box {
		flex: 1 0 100%;
	}

	/* Botão e textos legais colados no que interessa. */
	.cdm-pagamento__acao,
	.cdm-pagamento .form-row.place-order {
		margin: 0;
	}

	.cdm-pagamento .woocommerce-terms-and-conditions-wrapper {
		margin-bottom: var(--cdm-e-2);
	}

	.cdm-pagamento .woocommerce-privacy-policy-text {
		font-size: var(--cdm-t-2xs);
		line-height: 1.3;
	}

	/* Resumo: lista de itens menor e extrato mais junto. */
	.cdm-resumo__tabela tfoot th,
	.cdm-resumo__tabela tfoot td {
		padding-block: 0.125rem;
	}

	/* Etapa 2: rótulos e linhas mais justos. */
	.cdm-checkout .form-row label {
		margin-bottom: 0.125rem;
		line-height: 1.2;
	}

	.cdm-checkout .woocommerce-billing-fields__field-wrapper,
	.cdm-checkout .woocommerce-shipping-fields__field-wrapper,
	.cdm-checkout .cdm-checkout__endereco {
		gap: var(--cdm-e-1) var(--cdm-e-3);
	}

	.cdm-checkout__frete .cdm-frete__lista {
		gap: 0.25rem;
	}

	p.cdm-checkout__frete-prazo {
		margin-top: var(--cdm-e-1);
		font-size: var(--cdm-t-2xs);
	}
}

/* --- 50.c terceira passada: os últimos pixels ----------------------------- */

@media (min-width: 1024px) {

	/* O respiro da página e o do rodapé, no mesmo tamanho do carrinho. */
	body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-pagina {
		padding-block: var(--cdm-e-2);
	}

	body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-rodape--simples {
		margin-top: var(--cdm-e-2);
		padding-block: var(--cdm-e-2);
	}

	/* Rótulo da forma de pagamento numa linha de 24px. */
	.cdm-pagamento__lista > li > label {
		line-height: 1.3;
	}

	.cdm-pagamento__lista > li > label img {
		max-height: 0.875rem;
	}

}

/* --- 50.d colunas do resumo com medida ------------------------------------ */

/* Com `table-layout: fixed` quem manda são as larguras declaradas; sem elas o
   navegador divide meio a meio e o nome do produto fica num filete. */
@media (min-width: 1024px) {
	.cdm-resumo__tabela tbody td.product-name {
		width: 70%;
	}

	.cdm-resumo__tabela tbody td.product-total {
		width: 30%;
	}
}

/* --- 50.e quarta passada: pagamento e opções em duas colunas -------------- */

@media (min-width: 1024px) {

	/* Bandeira/ícone da forma de pagamento: 14px, esteja onde estiver dentro
	   do rótulo (alguns gateways embrulham a imagem num <span>). */
	.cdm-pagamento__lista img {
		max-height: 0.875rem;
		width: auto;
	}

	.cdm-pagamento #place_order {
		height: 2.75rem;
		min-height: 2.75rem;
	}

	/* As opções de frete ocupam a largura da coluna em duas colunas: quatro
	   opções em duas fileiras, em vez de quatro. */
	.cdm-checkout__frete .cdm-frete__lista {
		grid-template-columns: 1fr 1fr;
	}

	/* Extrato do resumo sem folga entre linhas. */
	.cdm-checkout__passo--resumo .cdm-resumo {
		font-size: var(--cdm-t-2xs);
	}

	p.cdm-resumo__editar {
		margin: 0;
	}
}

/* --- 50.f quinta passada: extrato e rótulo do pagamento ------------------- */

@media (min-width: 1024px) {

	/* "Pix" e o selo "Aprovação imediata" na mesma linha. */
	.cdm-pagamento__lista > li > label {
		flex-wrap: nowrap;
		min-width: 0;
	}

	/* Mesma especificidade das regras da seção 24, que ainda punham 9px de
	   padding vertical em cada linha do extrato. */
	.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot th,
	.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot td,
	.woocommerce-page form.cdm-checkout table.cdm-resumo__tabela tfoot th,
	.woocommerce-page form.cdm-checkout table.cdm-resumo__tabela tfoot td {
		padding-block: 0.125rem;
	}

	.cdm-resumo__tabela tfoot .order-total td {
		font-size: var(--cdm-t-md);
	}

	/* O aviso de entrega pendente cabe numa linha. */
	.cdm-resumo__frete-pendente {
		font-size: var(--cdm-t-2xs);
		line-height: 1.2;
	}
}

/* --- 50.g últimos 40px ---------------------------------------------------- */

@media (min-width: 1024px) {
	.cdm-checkout__frete .cdm-frete__item {
		padding-block: 0.25rem;
	}

	.cdm-checkout__frete .cdm-checkout__modo,
	.cdm-checkout__modo-dica {
		margin-bottom: var(--cdm-e-1);
	}

	.cdm-checkout__frete #billing_postcode_field {
		margin-bottom: var(--cdm-e-1);
	}

	/* Rodapé do checkout na mesma altura do corpo: 16px em cima e embaixo já
	   separam o suficiente, e são 32px de rolagem a menos. */
	body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-rodape-simples__corpo {
		padding-block: var(--cdm-e-2);
	}
}

/* --- 50.h a linha de 40px do pagamento vira 24 ---------------------------- */

@media (min-width: 1024px) {
	/* O `min-height: 2.5rem` da seção 23 era medida do mock antigo, quando o
	   rádio ficava numa linha e o rótulo noutra. */
	.cdm-pagamento__lista > li > label {
		min-height: 0;
	}

	.cdm-pagamento #place_order {
		min-height: 2.75rem;
	}
}

/* --- 50.i larguras: <tbody> em bloco e opções em duas colunas ------------- */

@media (min-width: 1024px) {
	/* Item de frete é caixa flex numa célula de grade: sem `min-width: 0` o
	   mínimo é o conteúdo inteiro, e a segunda coluna vazava o cartão. */
	.cdm-checkout__frete .cdm-frete__item {
		min-width: 0;
	}
}

/* --- 50.j opção de frete numa linha só ------------------------------------ */

@media (min-width: 1024px) {
	/* Duas colunas de opções: cada uma cabe numa linha, com o nome cortado por
	   reticências quando for comprido demais. O preço nunca é cortado. */
	.cdm-checkout__frete .cdm-frete__item label {
		flex-wrap: nowrap;
	}

	.cdm-checkout__frete .cdm-frete__opcao-info {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cdm-checkout__frete .cdm-frete__opcao-valor {
		flex: 0 0 auto;
	}
}

/* --- 50.k opções de volta a uma coluna ------------------------------------ */

@media (min-width: 1024px) {
	/* Duas colunas cortavam o nome da transportadora com reticências. Uma
	   coluna, linha de 30px: cabe do mesmo jeito e nada é abreviado. */
	.cdm-checkout__frete .cdm-frete__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1875rem;
	}

	.cdm-checkout__frete .cdm-frete__item {
		padding-block: 0.1875rem;
	}

	/* O prazo é uma nota, não um aviso: sem caixa, sem fundo. */
	p.cdm-checkout__frete-prazo {
		padding: 0;
		background: none;
		border: 0;
	}
}

/* --- 50.l os últimos 25px ------------------------------------------------- */

@media (min-width: 1024px) {
	.cdm-checkout .cdm-checkout__passo {
		padding-block: var(--cdm-e-2);
	}

	.cdm-checkout input[type="text"],
	.cdm-checkout input[type="tel"],
	.cdm-checkout input[type="email"],
	.cdm-checkout input[type="password"],
	.cdm-checkout input[type="number"],
	.cdm-checkout input[type="date"],
	.cdm-checkout select,
	.cdm-checkout .select2-container .select2-selection--single {
		height: 2.25rem;
		min-height: 2.25rem;
	}
}
}

@media (min-width: 1024px) {
	.cdm-checkout .cdm-checkout__passo {
		gap: 0.375rem;
	}
}

@media (min-width: 1024px) {
	/* Linha de 28px por opção: é o mínimo que ainda dá alvo de clique
	   confortável e o que faz a página inteira caber em 900px. */
	.cdm-checkout__frete .cdm-frete__item {
		padding-block: 0.125rem;
	}

	p.cdm-checkout__frete-prazo {
		margin-top: 0;
	}
}

/* --- 50.m item do resumo em duas linhas ----------------------------------- */

@media (min-width: 1024px) {
	/* Nome do produto em no máximo duas linhas: os nomes de catálogo têm oito
	   palavras e faziam cada item ocupar 104px na conferência. */
	.cdm-resumo__nome {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	img.cdm-resumo__foto {
		width: 2rem;
		height: 2rem;
	}
}

/* --- 50.n extrato: rótulo e valor sem quebra desnecessária ---------------- */

@media (min-width: 1024px) {
	/* No extrato o valor ocupava 30% (medida das linhas de produto) e frases
	   como "Escolha a forma de entrega" quebravam em três linhas. */
	.cdm-resumo__tabela tfoot th {
		width: 45%;
	}

	.cdm-resumo__tabela tfoot td {
		width: 55%;
	}

	p.cdm-resumo__editar {
		margin: 0;
		font-size: var(--cdm-t-2xs);
		line-height: 1.2;
	}
}

/* --- 50.o duas colunas de medida fixa no resumo --------------------------- */

@media (min-width: 1024px) {
	/* Em layout automático a coluna dos valores encolhia até 93px e frases
	   como "Escolha a forma de entrega" quebravam em três linhas. Medida
	   fixa: 55% para o que é dito, 45% para o valor. */
	.cdm-resumo__tabela {
		table-layout: fixed;
	}

	.cdm-resumo__tabela tbody td.product-name {
		width: 55%;
	}

	.cdm-resumo__tabela tbody td.product-total {
		width: 45%;
	}
}

@media (min-width: 1024px) {
	/* Linha de item em 40px: foto de 32, nome em duas linhas de 11px. */
	.cdm-resumo__nome {
		font-size: 0.6875rem;
		line-height: 1.15;
	}

	.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td,
	.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody th,
	.cdm-resumo__tabela tbody td,
	.cdm-resumo__tabela tbody th {
		padding-block: 0.125rem;
	}
}

@media (min-width: 1024px) {
	/* A quantidade ("× 1") fica numa linha própria abaixo do nome: em 10px ela
	   continua legível e devolve 10px por item. */
	.cdm-resumo__tabela .product-quantity {
		font-size: 0.625rem;
		line-height: 1.1;
	}
}

@media (min-width: 1024px) {
	/* Últimos pixels da coluna 3: foto de 24px, ícone da etapa de 28px e os
	   dois cartões mais juntos. */
	img.cdm-resumo__foto {
		width: 1.5rem;
		height: 1.5rem;
	}

	.cdm-passo__icone {
		width: 1.75rem;
		height: 1.75rem;
	}

	.cdm-checkout__coluna-pagamento {
		gap: var(--cdm-e-2);
	}

	.cdm-pagamento .form-row.place-order {
		padding: 0;
	}
}

/* ==========================================================================
   51. Turnstile visível junto do botão (relato de cliente, 04/09/2026)
   --------------------------------------------------------------------------
   O widget nascia dentro do passo de login expresso, recolhido: o pedido era
   recusado com "Please verify that you are human" e não havia o que clicar.
   O checkout.js leva o widget para antes de "Finalizar pedido"; aqui ele
   ganha espaço e a garantia de nunca ser escondido por regra de layout. */

.cdm-checkout .cf-turnstile {
	display: block !important;
	margin: 0 0 var(--cdm-e-2);
	min-height: 4.0625rem;
}

.cdm-checkout .cf-turnstile iframe {
	max-width: 100%;
}

/* O <br> espaçador do plugin não faz falta ao lado do botão. */
.cdm-checkout br.cf-turnstile-br {
	display: none;
}

/* ==========================================================================
   52. "Seus dados" com a cara do cadastro (arte do dono, 04/09/2026)
   --------------------------------------------------------------------------
   Rótulo flutuante sobre a borda do campo, campos curtos lado a lado, visto
   verde no que já está válido e cinza no que não se muda mais. Só nesta
   etapa: o endereço continua com rótulo em cima, que é o que cabe em campos
   de uma coluna só.
   ========================================================================== */

.cdm-checkout__passo--dados .form-row {
	position: relative;
	margin: 0;
	padding: 0;
}

/* O rótulo sobe e senta na borda; a faixa branca por trás é o que "abre" o
   fio do campo, como na arte. */
.cdm-checkout__passo--dados .form-row > label {
	position: absolute;
	top: -0.4375rem;
	left: 0.625rem;
	z-index: 1;
	margin: 0;
	padding: 0 0.25rem;
	background: var(--cdm-superficie);
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-normal);
	line-height: 1;
	color: var(--cdm-texto-fraco);
}

.cdm-checkout__passo--dados .form-row .required {
	color: var(--cdm-vermelho, #d33);
	text-decoration: none;
}

/* Com o rótulo por cima, o campo não precisa mais do espaço dele em cima. */
.cdm-checkout__passo--dados .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* Nome e sobrenome (e nascimento/documento) dividem a linha. */
@media (min-width: 480px) {
	.cdm-checkout .woocommerce-billing-fields__field-wrapper > .form-row.cdm-campo--metade {
		grid-column: span 1;
	}
}

/* Campo travado: leitura, com cadeado no lugar do visto. */
.cdm-checkout__passo--dados .cdm-campo-travado > label {
	color: var(--cdm-texto-apagado);
}

.cdm-checkout .cdm-campo-travado input[readonly] {
	background: var(--cdm-fundo-alt);
	color: var(--cdm-texto-fraco);
	border-color: var(--cdm-cinza-200);
	cursor: default;
}

/* Linha do cliente logado: uma frase e o link de sair. */
.cdm-checkout p.cdm-conta-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cdm-e-2);
	margin: 0 0 var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-azul);
}

.cdm-conta-linha__sair {
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
}

/* "Já tenho cadastro": saída discreta para quem prefere entrar pelo código. */
button.cdm-checkout__ja-tenho {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-azul);
	text-decoration: underline;
	cursor: pointer;
}

/* --- 52.b o que não é campo ocupa a linha inteira -------------------------- */

/* O link e a caixa do login expresso moram na mesma grade dos campos: sem
   isto o link tomava a primeira célula e empurrava o "Nome" para o lado. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper > .cdm-checkout__ja-tenho,
.cdm-checkout .woocommerce-billing-fields__field-wrapper > .cdm-otp,
.cdm-checkout .woocommerce-billing-fields__field-wrapper > .cdm-conta-linha,
.cdm-checkout .woocommerce-billing-fields__field-wrapper > h3 {
	grid-column: 1 / -1;
}

button.cdm-checkout__ja-tenho {
	margin-bottom: var(--cdm-e-2);
}

/* Rótulo flutuante precisa de um fio de espaço acima da linha. */
.cdm-checkout__passo--dados .woocommerce-billing-fields__field-wrapper {
	padding-top: 0.375rem;
	row-gap: var(--cdm-e-3);
}

/* --- 52.c nome e sobrenome dividem a linha --------------------------------- */

@media (min-width: 480px) {
	.cdm-checkout #billing_first_name_field,
	.cdm-checkout #billing_last_name_field {
		grid-column: span 1;
	}
}

/* --- 52.d documento e nascimento na mesma linha ---------------------------- */

@media (min-width: 480px) {
	.cdm-checkout #billing_birthdate_field {
		grid-column: span 1;
	}
}

/* Com o rótulo dentro do campo, o título "Documento" e a linha de ajuda do
   celular viraram repetição: o campo já se apresenta. */
.cdm-checkout__passo--dados h3.cdm-checkout__secao--documento,
.cdm-checkout__passo--dados #billing_phone_field .description,
.cdm-checkout__passo--dados #billing_phone_field .woocommerce-input-wrapper + span.description {
	display: none;
}

@media (min-width: 480px) {
	.cdm-checkout #billing_cpf_field,
	.cdm-checkout #billing_cnpj_field {
		grid-column: span 1;
	}
}

/* ==========================================================================
   53. Faltou preencher: aviso no campo (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Igual à página de produto com variação: o que falta fica vermelho, a página
   rola até o primeiro e os pendentes tremem. A faixa de erro do WooCommerce
   no topo continua existindo como rede do servidor, mas o cliente não depende
   mais dela para descobrir qual campo era.
   ========================================================================== */

.cdm-checkout .cdm-pendente > label,
.cdm-checkout .cdm-pendente > label .required,
.cdm-checkout__frete.cdm-pendente .cdm-checkout__modo-dica {
	color: var(--cdm-vermelho);
}

.cdm-checkout .cdm-pendente input,
.cdm-checkout .cdm-pendente select,
.cdm-checkout .cdm-pendente .select2-container .select2-selection--single {
	border-color: var(--cdm-vermelho);
}

/* Blocos que não são campo (forma de entrega, forma de pagamento): o fio
   vermelho vai em volta do grupo inteiro. */
.cdm-checkout__frete.cdm-pendente,
.cdm-checkout .wc_payment_methods.cdm-pendente,
.cdm-checkout .cdm-pagamento.cdm-pendente {
	border-radius: var(--cdm-raio);
	outline: 1.5px solid var(--cdm-vermelho);
	outline-offset: 6px;
}

@keyframes cdm-pendente-vibra {
	0%,
	100% {
		transform: translateX(0);
	}

	15%,
	55% {
		transform: translateX(-7px);
	}

	35%,
	75% {
		transform: translateX(7px);
	}

	90% {
		transform: translateX(-3px);
	}
}

.cdm-checkout .cdm-pendente--vibra {
	animation: cdm-pendente-vibra .55s ease-in-out;
}

/* Quem pediu menos movimento continua recebendo o aviso — só em cor. */
@media (prefers-reduced-motion: reduce) {
	.cdm-checkout .cdm-pendente--vibra {
		animation: none;
	}
}

/* ==========================================================================
   54. Resumo do pedido, versão da arte (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Item com miniatura e quantidade embaixo do nome, extrato em linhas
   separadas por fio, desconto do Pix em verde e o TOTAL numa faixa azul-clara
   arredondada. Substitui o acabamento das seções 23 e 49 no que conflita.
   ========================================================================== */

.cdm-checkout__passo--resumo .cdm-resumo {
	font-size: var(--cdm-t-sm);
}

/* --- o item --- */

.cdm-resumo__item {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
}

img.cdm-resumo__foto {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	padding: var(--cdm-e-1);
	object-fit: contain;
	background: var(--cdm-branco);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
}

.cdm-resumo__texto {
	display: block;
	min-width: 0;
}

/* Uma linha só: o nome inteiro não cabe na coluna e quebrado em quatro linhas
   empurrava o total para fora da tela. */
.cdm-resumo__nome {
	display: block;
	overflow: hidden;
	font-size: var(--cdm-t-sm);
	line-height: 1.35;
	color: var(--cdm-azul);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cdm-resumo__qtd {
	display: block;
	margin-top: 0.125rem;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

/* --- o extrato --- */

.cdm-resumo__tabela tbody td,
.cdm-resumo__tabela tbody th {
	padding: 0 0 var(--cdm-e-3);
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-resumo__tabela tbody td.product-total {
	vertical-align: middle;
	color: var(--cdm-azul);
	white-space: nowrap;
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot td,
.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td {
	padding: var(--cdm-e-3) 0;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-azul);
	border: 0;
}

/* Fio entre os grupos do extrato: itens → subtotal → entrega/descontos. */
.cdm-resumo__tabela tfoot tr.cart-subtotal th,
.cdm-resumo__tabela tfoot tr.cart-subtotal td {
	border-bottom: 1px solid var(--cdm-cinza-200);
}

/* Nome do frete escolhido: cabe na linha, sem virar duas colunas. */
.cdm-resumo__tabela .woocommerce-shipping-totals th {
	white-space: nowrap;
}

.cdm-resumo__frete {
	flex-direction: row;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--cdm-e-2);
}

.cdm-resumo__frete-nome {
	font-size: var(--cdm-t-sm);
	color: var(--cdm-azul);
}

.cdm-resumo__frete-valor {
	color: var(--cdm-azul);
}

/* Desconto do Pix: linha de abatimento, em verde, com o sinal na frente. */
.cdm-resumo__tabela tfoot .cdm-resumo__pix th,
.cdm-resumo__tabela tfoot .cdm-resumo__pix td {
	padding-top: 0;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-verde-escuro);
}

/* --- o total --- */

.cdm-resumo__tabela tfoot tr.order-total th,
.cdm-resumo__tabela tfoot tr.order-total td {
	padding: var(--cdm-e-3);
	background: var(--cdm-azul-claro);
	color: var(--cdm-azul);
	border: 0;
}

.cdm-resumo__tabela tfoot tr.order-total th {
	border-radius: var(--cdm-raio) 0 0 var(--cdm-raio);
	font-size: var(--cdm-t-md);
}

.cdm-resumo__tabela tfoot tr.order-total td {
	border-radius: 0 var(--cdm-raio) var(--cdm-raio) 0;
	font-size: var(--cdm-t-xl);
	line-height: 1.15;
	white-space: nowrap;
}

/* --- 54.b pesos: só o TOTAL pesa ------------------------------------------ */

.woocommerce form.cdm-checkout table.cdm-resumo__tabela th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela td,
.cdm-resumo__tabela th,
.cdm-resumo__tabela td,
.cdm-resumo__tabela .cdm-resumo__nome,
.cdm-resumo__tabela .woocommerce-Price-amount {
	font-weight: var(--cdm-peso-normal);
}

.cdm-resumo__tabela tfoot tr.order-total th,
.cdm-resumo__tabela tfoot tr.order-total td,
.cdm-resumo__tabela tfoot tr.order-total .woocommerce-Price-amount {
	font-weight: var(--cdm-peso-forte);
}

/* Nome do frete no lugar do rótulo "Entrega": mesma coluna do "Subtotal", com
   quebra permitida (o nome do método é longo). */
.cdm-resumo__tabela .cdm-resumo__frete-rotulo {
	white-space: normal;
	line-height: 1.3;
	text-align: left;
}

.cdm-resumo__tabela .woocommerce-shipping-totals td {
	vertical-align: top;
	text-align: right;
	white-space: nowrap;
}

/* ==========================================================================
   55. CEP numa linha, Pix numa frase, sem painel roxo (dono, 04/09/2026)
   ========================================================================== */

/* --- 55.a CEP: rótulo · caixa com lupa · "Não sei meu CEP", tudo numa linha */

.cdm-checkout .form-row.cdm-checkout__cep {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--cdm-e-3);
}

.cdm-checkout .form-row.cdm-checkout__cep label {
	display: block;
	flex: 0 0 auto;
	grid-column: auto;
	margin: 0;
	white-space: nowrap;
}

.cdm-checkout .form-row.cdm-checkout__cep .woocommerce-input-wrapper {
	flex: 0 1 12rem;
	grid-column: auto;
	min-width: 0;
}

.cdm-checkout .form-row.cdm-checkout__cep .cdm-cep__linha {
	position: relative;
	display: block;
}

.cdm-checkout .form-row.cdm-checkout__cep input.cdm-cep__entrada {
	width: 100%;
	padding-right: 2.25rem;
}

.cdm-checkout .form-row.cdm-checkout__cep button.cdm-cep__lupa {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cdm-azul);
	cursor: pointer;
	transform: translateY(-50%);
}

.cdm-checkout .form-row.cdm-checkout__cep button.cdm-cep__lupa .cdm-icone {
	font-size: 0.875rem;
}

/* Link em cinza claro, sem ícone, sem sublinhado até o hover. */
.cdm-checkout .form-row.cdm-checkout__cep a.cdm-checkout__cep-ajuda {
	flex: 0 0 auto;
	grid-column: auto;
	min-height: 0;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
	text-decoration: none;
}

.cdm-checkout .form-row.cdm-checkout__cep a.cdm-checkout__cep-ajuda:hover {
	text-decoration: underline;
}

/* --- 55.b caixa do gateway sem o painel #dcd7e2 do woocommerce.css --------- */

.woocommerce-checkout #payment div.payment_box,
.cdm-checkout .cdm-pagamento .payment_box {
	margin: var(--cdm-e-2) 0 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--cdm-texto-fraco);
}

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

/* Pix volta a mostrar a caixa: agora é uma frase só (inc/checkout-assets.php). */
.cdm-pagamento__lista > li[class*="pix"] .payment_box {
	display: block;
	font-size: var(--cdm-t-xs);
}

/* --- 55.c caixa do Pix numa linha; extrato do resumo mais junto ------------ */

/* Dentro da caixa do Pix o Pagar.me imprime a frase, o logo do Pix e um
   fieldset escondido de multicomprador. O logo repete o título da linha
   ("Pix") e custava 60px numa coluna que precisa caber na tela. */
.cdm-pagamento__lista > li[class*="pix"] .payment_box p {
	margin: 0;
	line-height: 1.4;
}

.cdm-pagamento__lista > li[class*="pix"] .payment_box p:has(> img.logo),
.cdm-pagamento__lista > li[class*="pix"] .payment_box fieldset.wc-payment-form > p:nth-child(2) {
	display: none;
}

.cdm-pagamento__lista > li[class*="pix"] .payment_box fieldset.wc-payment-form {
	margin: 0;
	padding: 0;
	border: 0;
}

.cdm-checkout .cdm-pagamento .payment_box {
	margin-top: var(--cdm-e-1);
}

/* Linhas do extrato: 8px em vez de 12px acima e abaixo. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot td,
.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td {
	padding-block: var(--cdm-e-2);
}

.cdm-resumo__tabela tfoot tr.order-total th,
.cdm-resumo__tabela tfoot tr.order-total td {
	padding: var(--cdm-e-2) var(--cdm-e-3);
}

/* Os dois cartões da coluna 3 com 12px de borda interna em vez de 16: são os
   16px que faltavam para a coluna caber numa tela de 900px com o Pix aberto. */
@media (min-width: 1024px) {
	.cdm-checkout .cdm-checkout__coluna-pagamento > .cdm-checkout__passo {
		padding: var(--cdm-e-3) var(--cdm-e-4);
	}
}

/* As regras do woocommerce.css para a caixa do gateway carregam o #payment
   (1,2,1): sem o id aqui elas ganhavam — a caixa continuava com 8px de
   margem e o fieldset com os 12,88px de `fieldset` do Woo. */
.woocommerce-checkout #payment div.payment_box {
	margin-top: var(--cdm-e-1);
}

.woocommerce-checkout #payment div.payment_box fieldset,
.woocommerce-checkout #payment div.payment_box fieldset.wc-payment-form {
	margin: 0;
	padding: 0;
	border: 0;
}

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

/* Linhas das formas de pagamento mais baixas: 8px/12px de borda interna. */
.cdm-checkout .cdm-pagamento__lista > li {
	padding: var(--cdm-e-2) var(--cdm-e-3);
}

/* `table.shop_table { margin: 0 -1px 24px 0 }` do woocommerce.css: 24px de
   margem embaixo do extrato que só empurravam o rodapé do cartão. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela,
.woocommerce-page form.cdm-checkout table.cdm-resumo__tabela,
.cdm-resumo__tabela {
	margin: 0;
}

.cdm-checkout .cdm-pagamento__lista {
	margin-bottom: var(--cdm-e-3);
}

/* Paddings do woocommerce.css (com #payment / #order_review na frente) que
   sobravam na coluna 3: 14px em volta da lista de formas, 14px em volta do
   botão e 20px em volta do extrato. O cartão da etapa já dá o respiro. */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.form-row.place-order {
	padding: 0;
}

.woocommerce-checkout #order_review,
.cdm-checkout__passo--resumo .cdm-resumo {
	padding: 0;
}

/* ==========================================================================
   56. Respiro na caixa de entrega, retirada sem CEP, pagamento em 2 linhas
   (dono, 04/09/2026)
   ========================================================================== */

/* --- 56.a abas · CEP · opções com ar entre si ------------------------------ */

.cdm-checkout__frete .cdm-checkout__modo,
.cdm-checkout__frete .cdm-checkout__modo-dica {
	margin-bottom: var(--cdm-e-4);
}

.cdm-checkout__frete #billing_postcode_field {
	margin: 0 0 var(--cdm-e-4);
}

.cdm-checkout__frete .cdm-frete__lista {
	gap: 0.5rem;
}

.cdm-checkout__frete .cdm-frete__item {
	padding: 0.5625rem 0.75rem;
}

/* Entre a última opção de frete e o endereço. */
.cdm-checkout__frete {
	margin-bottom: var(--cdm-e-3);
}

/* --- 56.b retirada: a linha do CEP sai da tela ----------------------------- */

.cdm-checkout__frete--retirada #billing_postcode_field {
	display: none;
}

/* --- 56.c formas de pagamento: rádio e nome na mesma linha, descrição em
       no máximo duas linhas ----------------------------------------------- */

.cdm-checkout .cdm-pagamento__lista > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--cdm-e-2);
	row-gap: var(--cdm-e-1);
	padding: var(--cdm-e-2) var(--cdm-e-3);
}

.cdm-checkout .cdm-pagamento__lista > li > input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
}

.cdm-checkout .cdm-pagamento__lista > li > label {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	line-height: 1.3;
}

.cdm-checkout .cdm-pagamento__lista > li > .payment_box {
	flex: 1 0 100%;
	margin: 0;
}

/* Frase do gateway: duas linhas no máximo, o resto vira reticências. */
.cdm-checkout .cdm-pagamento__lista > li > .payment_box p,
.cdm-checkout .cdm-pagamento__lista > li > .payment_box fieldset.wc-payment-form > p:first-child {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.35;
}

/* --- 56.d o respiro acima custava 64px na coluna do endereço (5 opções de
       frete no Rio) e a página voltava a rolar. O ar fica entre os BLOCOS
       (abas · CEP · lista · endereço); dentro da lista e entre as linhas de
       campo ele encolhe. --------------------------------------------------- */

@media (min-width: 1024px) {
	.cdm-checkout__frete .cdm-checkout__modo,
	.cdm-checkout__frete .cdm-checkout__modo-dica,
	.cdm-checkout__frete #billing_postcode_field {
		margin-bottom: var(--cdm-e-3);
	}

	.cdm-checkout__frete .cdm-frete__lista {
		gap: 0.375rem;
	}

	.cdm-checkout__frete .cdm-frete__item {
		padding: 0.4375rem 0.75rem;
	}

	.cdm-checkout .cdm-checkout__endereco {
		row-gap: var(--cdm-e-1);
	}

	.cdm-checkout .cdm-checkout__endereco .form-row label {
		margin-bottom: 0.125rem;
	}

	.cdm-checkout .cdm-checkout__passo--entrega .woocommerce-shipping-fields {
		margin-top: var(--cdm-e-1);
	}
}

@media (min-width: 1024px) {
	/* Cada opção de frete com 30px: 5px de borda interna em cima e embaixo, e
	   4px entre uma e outra. Com cinco opções são os 32px que faltavam. */
	.cdm-checkout__frete .cdm-frete__lista {
		gap: 0.25rem;
	}

	.cdm-checkout__frete .cdm-frete__item {
		padding: 0.3125rem 0.75rem;
	}
}

/* ==========================================================================
   57. Celular num elemento só; e-mail primeiro; CNPJ por último (dono, 04/09)
   --------------------------------------------------------------------------
   A ordem dos campos e o placeholder "DDD + Número" vêm do
   inc/checkout-assets.php; a máscara (dd) nnnnn-nnnn do checkout.js. Aqui a
   bandeira e o número entram na MESMA caixa: sem o filete vertical, sem o
   vão entre os dois e sem a borda própria que o woocommerce.css
   (`.woocommerce form .form-row input.input-text`, 0,3,1) ainda punha no
   <input> por cima da nossa regra de 0,2,1.
   ========================================================================== */

.cdm-checkout .form-row .cdm-telefone {
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.cdm-checkout .form-row .cdm-telefone .cdm-checkout__pais-telefone {
	width: auto;
	min-height: 0;
	padding: 0 var(--cdm-e-2) 0 var(--cdm-e-3);
	border: 0;
	background: none;
}

.cdm-checkout .form-row .cdm-telefone input.input-text,
.cdm-checkout .form-row .cdm-telefone input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.cdm-checkout .form-row .cdm-telefone input[type="tel"]:focus,
.cdm-checkout .form-row .cdm-telefone input[type="tel"]:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}

/* Vermelho de pendência e verde de validado vão na caixa, não no input. */
.cdm-checkout .form-row.cdm-pendente .cdm-telefone {
	border-color: var(--cdm-vermelho);
}

/* ==========================================================================
   58. Quem já entrou vê lista; endereço e pagamento esperam a etapa 1
   (dono, 04/09/2026)
   ========================================================================== */

/* --- 58.a a lista de dados do cliente logado ------------------------------ */

.cdm-checkout .cdm-conta-lista {
	display: grid;
	gap: var(--cdm-e-3);
	margin: 0 0 var(--cdm-e-3);
}

.cdm-checkout dl.cdm-conta-lista__dados {
	display: grid;
	gap: 0;
	margin: 0;
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	overflow: hidden;
}

.cdm-checkout .cdm-conta-lista__linha {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: var(--cdm-e-3);
	align-items: baseline;
	padding: 0.4375rem var(--cdm-e-3);
	border-top: 1px solid var(--cdm-cinza-200);
	font-size: var(--cdm-t-sm);
}

.cdm-checkout .cdm-conta-lista__linha:first-child {
	border-top: 0;
}

.cdm-checkout .cdm-conta-lista__linha dt {
	margin: 0;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout .cdm-conta-lista__linha dd {
	margin: 0;
	overflow: hidden;
	color: var(--cdm-texto);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cdm-checkout p.cdm-conta-lista__falta {
	margin: 0;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-vermelho);
}

.cdm-checkout p.cdm-conta-lista__acoes {
	display: flex;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	margin: 0;
}

.cdm-checkout .cdm-conta-lista__link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-xs);
	color: var(--cdm-azul);
	text-decoration: underline;
	cursor: pointer;
}

.cdm-checkout .cdm-conta-lista__link--sair {
	color: var(--cdm-texto-apagado);
}

/* Estado "parcial" do plugin: só o campo que falta (nascimento) aparece,
   logo abaixo da lista, do jeito de sempre. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial {
	padding-top: 0.375rem;
}

/* --- 58.b endereço e pagamento recolhidos e apagados até a etapa 1 fechar -- */

.cdm-checkout .cdm-passo__espera {
	display: none;
	margin: 0;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout--aguardando .cdm-checkout__passo--entrega .cdm-checkout__passo-corpo,
.cdm-checkout--aguardando .cdm-checkout__passo--pagamento .cdm-checkout__passo-corpo {
	display: none;
}

.cdm-checkout--aguardando .cdm-checkout__passo--entrega .cdm-passo__espera,
.cdm-checkout--aguardando .cdm-checkout__passo--pagamento .cdm-passo__espera {
	display: block;
}

.cdm-checkout--aguardando .cdm-checkout__passo--entrega,
.cdm-checkout--aguardando .cdm-checkout__passo--pagamento {
	background: var(--cdm-fundo-alt);
	box-shadow: none;
}

.cdm-checkout--aguardando .cdm-checkout__passo--entrega .cdm-passo__cabecalho,
.cdm-checkout--aguardando .cdm-checkout__passo--pagamento .cdm-passo__cabecalho {
	opacity: .45;
}

/* A regra antiga (seção 31/35) esperava `.cdm-campos-ocultos`, que não
   existe mais desde que os campos abrem direto; esta substitui aquela. */
.cdm-checkout:has(.woocommerce-billing-fields.cdm-campos-ocultos) .cdm-checkout__passo--entrega .cdm-passo__espera {
	display: block;
}

/* ==========================================================================
   59. Lista do cliente logado sem grade, "Sair" no canto, nascimento ao lado
   de "Editar dados", botão Avançar (dono, 04/09/2026)
   ========================================================================== */

.cdm-checkout .cdm-checkout__passo--dados {
	position: relative;
}

.cdm-checkout a.cdm-conta-lista__sair {
	position: absolute;
	top: var(--cdm-e-4);
	right: var(--cdm-e-4);
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
	text-decoration: none;
}

.cdm-checkout a.cdm-conta-lista__sair:hover {
	text-decoration: underline;
}

.cdm-checkout .cdm-conta-lista {
	gap: var(--cdm-e-2);
	margin: 0;
}

.cdm-checkout ul.cdm-conta-lista__dados {
	display: grid;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	list-style: none;
}

.cdm-checkout .cdm-conta-lista__linha {
	display: flex;
	gap: var(--cdm-e-2);
	align-items: baseline;
	padding: 0;
	border: 0;
	font-size: var(--cdm-t-sm);
	line-height: 1.35;
	white-space: nowrap;
}

.cdm-checkout .cdm-conta-lista__rotulo {
	flex: 0 0 auto;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.cdm-checkout .cdm-conta-lista__valor {
	min-width: 0;
	overflow: hidden;
	color: var(--cdm-texto);
	text-overflow: ellipsis;
}

.cdm-checkout p.cdm-conta-lista__acoes {
	justify-content: flex-start;
}

.cdm-checkout p.cdm-conta-lista__acoes:empty {
	display: none;
}

/* Campo que falta (nascimento) curto, com "Editar dados" ao lado. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial {
	grid-template-columns: minmax(0, 11rem) auto;
	align-items: center;
	column-gap: var(--cdm-e-3);
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > .cdm-campo-falta {
	grid-column: auto;
}

.cdm-checkout .cdm-conta-lista__link--ao-lado {
	align-self: center;
	justify-self: start;
}

/* Botão Avançar, no fim do cartão. */
.cdm-checkout button.cdm-checkout__avancar {
	display: block;
	width: 100%;
	min-height: 2.625rem;
	margin-top: var(--cdm-e-2);
	padding: 0 var(--cdm-e-4);
	border: 0;
	border-radius: var(--cdm-raio);
	background: var(--cdm-azul);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-branco);
	cursor: pointer;
}

.cdm-checkout button.cdm-checkout__avancar:hover {
	filter: brightness(1.08);
}

/* Nascimento primeiro, "Editar dados" depois — o botão entra por último no
   DOM mas o grid o punha na primeira coluna. */
.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > .cdm-campo-falta:not(button) {
	order: 1;
	grid-column: 1;
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > button.cdm-campo-falta {
	order: 2;
	grid-column: 2;
}

/* "Editar dados" encostado na direita; Avançar sem negrito (dono, 04/09). */
.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial {
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > button.cdm-campo-falta {
	justify-self: end;
}

.cdm-checkout button.cdm-checkout__avancar {
	font-weight: var(--cdm-peso-normal);
}

/* Bifurcação de volta (dono, 04/09/2026, fim do dia): enquanto o cliente não
   escolheu "Já comprei antes" / "Primeira vez", não há campo nem Avançar. */
.cdm-checkout__passo--dados:has(.woocommerce-billing-fields.cdm-campos-ocultos) button.cdm-checkout__avancar {
	display: none;
}

/* ==========================================================================
   60. "Seus dados" com o mínimo de ar vertical (dono, 04/09/2026)
   ========================================================================== */

.cdm-checkout .cdm-checkout__passo--dados {
	gap: var(--cdm-e-2);
}

.cdm-checkout .cdm-checkout__passo--dados .cdm-passo__cabecalho {
	padding-bottom: var(--cdm-e-1);
}

.cdm-checkout .cdm-checkout__passo--dados .woocommerce-billing-fields > .cdm-otp {
	margin-bottom: 0;
}

/* 8px entre linhas é o mínimo para o rótulo flutuante da linha de baixo não
   encostar no campo de cima. */
.cdm-checkout__passo--dados .woocommerce-billing-fields__field-wrapper {
	padding-top: 0.25rem;
	row-gap: var(--cdm-e-2);
}

.cdm-checkout .cdm-checkout__passo--dados .cf-turnstile {
	margin: 0;
}

.cdm-checkout .cdm-checkout__passo--dados button.cdm-checkout__avancar {
	margin-top: 0;
}

.cdm-checkout .cdm-checkout__passo--dados .cdm-conta-lista {
	gap: var(--cdm-e-1);
}

/* "Já sou cliente" no canto superior direito do cartão, depois de "Primeira
   vez" (dono, 04/09/2026). Mesmo lugar do "Não é você? Sair" de quem entrou. */
.cdm-checkout button.cdm-checkout__ja-sou-cliente {
	position: absolute;
	top: var(--cdm-e-4);
	right: var(--cdm-e-4);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-azul);
	text-decoration: underline;
	cursor: pointer;
}

.cdm-checkout button.cdm-checkout__ja-sou-cliente[hidden] {
	display: none;
}

/* Pendência: título E moldura em vermelho, em todos os campos (dono, 04/09).
   As regras da seção 53 perdiam para `.woocommerce form .form-row
   input.input-text` (0,3,1) do woocommerce.css; estas têm 0,4,1. */
.cdm-checkout .form-row.cdm-pendente label,
.cdm-checkout .form-row.cdm-pendente label .required {
	color: var(--cdm-vermelho);
}

.cdm-checkout .form-row.cdm-pendente .woocommerce-input-wrapper input,
.cdm-checkout .form-row.cdm-pendente .woocommerce-input-wrapper input.input-text,
.cdm-checkout .form-row.cdm-pendente .woocommerce-input-wrapper select,
.cdm-checkout .form-row.cdm-pendente .woocommerce-input-wrapper .select2-selection--single,
.cdm-checkout .form-row.cdm-pendente .woocommerce-input-wrapper .cdm-telefone {
	border-color: var(--cdm-vermelho);
}

.cdm-checkout .form-row.cdm-pendente .cdm-telefone input[type="tel"] {
	border: 0;
}

/* ==========================================================================
   61. Login por código no meio do formulário (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Ao pedir "Já sou cliente" depois de "Primeira vez", os campos do pedido
   somem (checkout.js) e a caixa fica sozinha. As alternativas de baixo —
   "Voltar" e "Não tenho cadastro" — saem da tela: o "Não tenho cadastro" vira
   o botão do canto superior direito, e o "Voltar" não existe mais (o mesmo
   botão do canto faz o caminho de volta).
   ========================================================================== */

.cdm-checkout .cdm-otp__passo--atalho .cdm-otp__alternativas {
	display: none;
}

/* "Voltar" aos dois botões, no canto inferior direito do cartão (dono,
   04/09/2026). Em vez de posicionamento absoluto, o alinhamento no fim da
   coluna flex do cartão — assim ele nunca cobre a caixa do código, por mais
   alta que ela fique. */
.cdm-checkout button.cdm-checkout__voltar-otp {
	align-self: flex-end;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-2xs);
	color: var(--cdm-texto-apagado);
	text-decoration: underline;
	cursor: pointer;
}

.cdm-checkout button.cdm-checkout__voltar-otp[hidden] {
	display: none;
}

/* ==========================================================================
   62. Uniformização dos três cartões (dono, 04/09/2026)
   --------------------------------------------------------------------------
   Um vocabulário só, desktop e celular:
   - cartão: 12px/16px de borda interna, 8px entre blocos, cabeçalho igual;
   - rótulo: flutuante sobre a borda, 10px, cinza — em TODOS os campos (o
     endereço usava rótulo em cima, 12px negrito);
   - campo: 40px, borda 1px cinza-200, canto 8px;
   - opção (frete e pagamento): 36px, fundo branco, borda 1px, canto 8px,
     texto 13px normal; escolhida = borda azul + fundo azul-claro; preço 13px
     semibold azul, sempre na mesma coluna;
   - botão principal (Avançar, Finalizar): 44px, canto 8px, 14px semibold;
   - link secundário (Já sou cliente, Voltar, Sair, CNPJ, Editar, Não sei meu
     CEP): 12px normal azul sublinhado, sem ícone.
   ========================================================================== */

/* --- 62.a cartão e cabeçalho ----------------------------------------------- */

@media (min-width: 1024px) {
	.cdm-checkout .cdm-checkout__passo,
	.cdm-checkout .cdm-checkout__coluna-pagamento > .cdm-checkout__passo {
		padding: var(--cdm-e-3) var(--cdm-e-4);
		gap: var(--cdm-e-2);
	}
}

@media (max-width: 1023px) {
	.cdm-checkout .cdm-checkout__passo {
		padding: var(--cdm-e-3) var(--cdm-e-4);
		gap: var(--cdm-e-2);
	}
}

.cdm-checkout .cdm-passo__cabecalho {
	gap: var(--cdm-e-2);
	padding-bottom: var(--cdm-e-1);
	align-items: center;
}

.cdm-checkout .cdm-passo__icone {
	width: 1.75rem;
	height: 1.75rem;
	font-size: var(--cdm-t-xs);
}

.cdm-checkout .cdm-passo__titulo {
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
	line-height: 1.25;
}

.cdm-checkout .cdm-passo__ordem {
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-semi);
	letter-spacing: .02em;
}

/* Link do canto alinhado ao centro do título. */
.cdm-checkout button.cdm-checkout__ja-sou-cliente,
.cdm-checkout a.cdm-conta-lista__sair {
	top: 1.125rem;
	right: var(--cdm-e-4);
}

/* --- 62.b rótulo flutuante em todos os campos ------------------------------ */

.cdm-checkout .cdm-checkout__passo .form-row {
	position: relative;
	margin: 0;
	padding: 0;
}

.cdm-checkout .cdm-checkout__passo .form-row > label {
	position: absolute;
	top: -0.4375rem;
	left: 0.625rem;
	z-index: 1;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0 0.25rem;
	background: var(--cdm-superficie);
	font-size: var(--cdm-t-2xs);
	font-weight: var(--cdm-peso-normal);
	line-height: 1;
	color: var(--cdm-texto-fraco);
	white-space: nowrap;
}

.cdm-checkout .cdm-checkout__passo .form-row > label .required {
	color: var(--cdm-vermelho);
	text-decoration: none;
}

.cdm-checkout .cdm-checkout__passo .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* A grade do endereço precisa do mesmo respiro da grade dos dados. */
.cdm-checkout .cdm-checkout__endereco,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper {
	padding-top: 0.25rem;
	row-gap: var(--cdm-e-2);
}

/* Linha do CEP: o rótulo flutua sobre a caixa (a caixa é o primeiro item da
   linha, então "left" do rótulo bate com ela); lupa e link ficam ao lado. */
.cdm-checkout .form-row.cdm-checkout__cep {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
	padding-top: 0;
}

.cdm-checkout .form-row.cdm-checkout__cep > label {
	position: absolute;
	top: -0.4375rem;
	left: 0.625rem;
	flex: none;
}

.cdm-checkout .form-row.cdm-checkout__cep .woocommerce-input-wrapper {
	flex: 0 1 11rem;
}

/* Caixa de marcar ("Entregar em um endereço diferente?"): rótulo em linha,
   não flutuante. */
.cdm-checkout .cdm-checkout__passo #ship-to-different-address,
.cdm-checkout .cdm-checkout__passo .form-row.woocommerce-form__row--checkbox {
	position: static;
}

.cdm-checkout .cdm-checkout__passo #ship-to-different-address label,
.cdm-checkout .cdm-checkout__passo .form-row.woocommerce-form__row--checkbox > label {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-2);
	padding: 0;
	background: none;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto);
	white-space: normal;
}

/* --- 62.c campos: 40px, borda e canto iguais -------------------------------- */

.cdm-checkout .cdm-checkout__passo input[type="text"],
.cdm-checkout .cdm-checkout__passo input[type="tel"],
.cdm-checkout .cdm-checkout__passo input[type="email"],
.cdm-checkout .cdm-checkout__passo input[type="number"],
.cdm-checkout .cdm-checkout__passo input[type="date"],
.cdm-checkout .cdm-checkout__passo select,
.cdm-checkout .cdm-checkout__passo .select2-container .select2-selection--single,
.cdm-checkout .cdm-checkout__passo .cdm-telefone {
	min-height: 2.5rem;
	height: 2.5rem;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: var(--cdm-raio);
	font-size: var(--cdm-t-sm);
}

.cdm-checkout .cdm-checkout__passo .cdm-telefone input[type="tel"] {
	height: calc(2.5rem - 2px);
	min-height: 0;
}

/* --- 62.d opções de frete e de pagamento: a mesma linha ---------------------- */

.cdm-checkout__frete .cdm-frete__lista,
.cdm-checkout .cdm-pagamento__lista {
	gap: var(--cdm-e-2);
}

.cdm-checkout__frete .cdm-frete__item,
.cdm-checkout__frete .cdm-frete__item[data-cdm-tipo="retirada"],
.cdm-checkout .cdm-pagamento__lista > li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--cdm-e-2);
	min-height: 2.25rem;
	padding: 0.375rem var(--cdm-e-3);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	outline: none;
	color: var(--cdm-texto);
}

.cdm-checkout__frete .cdm-frete__item:hover,
.cdm-checkout .cdm-pagamento__lista > li:hover {
	border-color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__item:has(input:checked),
.cdm-checkout__frete .cdm-frete__item[data-cdm-tipo="retirada"]:has(input:checked),
.cdm-checkout .cdm-pagamento__lista > li:has(input:checked) {
	background: var(--cdm-azul-claro);
	border-color: var(--cdm-azul);
	outline: none;
}

.cdm-checkout__frete .cdm-frete__item input[type="radio"],
.cdm-checkout .cdm-pagamento__lista > li > input[type="radio"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--cdm-azul);
}

.cdm-checkout__frete .cdm-frete__item label,
.cdm-checkout .cdm-pagamento__lista > li > label {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	line-height: 1.3;
	color: var(--cdm-texto);
}

.cdm-checkout .cdm-pagamento__lista > li > label {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
}

.cdm-checkout__frete .cdm-frete__item .cdm-frete__opcao-titulo,
.cdm-checkout__frete .cdm-frete__item .cdm-frete__opcao-extra {
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-texto);
}

.cdm-checkout__frete .cdm-frete__item .cdm-frete__opcao-valor,
.cdm-checkout__frete .cdm-frete__item .woocommerce-Price-amount,
.cdm-checkout__frete .cdm-frete__item .cdm-frete__gratis {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-azul);
	white-space: nowrap;
}

/* Frase do gateway (Pix) na linha de baixo, com a mesma borda interna. */
.cdm-checkout .cdm-pagamento__lista > li > .payment_box {
	flex: 1 0 100%;
	margin: 0;
	padding-top: 0.125rem;
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-fraco);
}

/* Abas Receber/Retirar: mesma altura dos campos. */
.cdm-checkout__frete button.cdm-totais__modo-botao {
	height: 2.5rem;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
}

/* --- 62.e botões principais e links secundários ------------------------------ */

.cdm-checkout button.cdm-checkout__avancar,
.cdm-checkout .cdm-pagamento #place_order,
.woocommerce form.cdm-checkout #place_order,
.woocommerce-page form.cdm-checkout #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	width: 100%;
	min-height: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0 var(--cdm-e-4);
	border: 0;
	border-radius: var(--cdm-raio) !important;
	box-shadow: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi) !important;
	line-height: 1;
}

.cdm-checkout button.cdm-checkout__ja-sou-cliente,
.cdm-checkout button.cdm-checkout__voltar-otp,
.cdm-checkout a.cdm-conta-lista__sair,
.cdm-checkout .cdm-conta-lista__link,
.cdm-checkout .cdm-tipo-pessoa__link,
.cdm-checkout .form-row.cdm-checkout__cep a.cdm-checkout__cep-ajuda {
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
	line-height: 1.3;
	color: var(--cdm-azul);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cdm-checkout a.cdm-conta-lista__sair,
.cdm-checkout button.cdm-checkout__voltar-otp,
.cdm-checkout .form-row.cdm-checkout__cep a.cdm-checkout__cep-ajuda {
	color: var(--cdm-texto-fraco);
}

.cdm-checkout .cdm-tipo-pessoa__link {
	align-self: start;
	margin: 0;
}

/* Dica "Escolha como quer receber" com a mesma voz dos rótulos. */
.cdm-checkout__modo-dica {
	font-size: var(--cdm-t-2xs);
	margin-bottom: var(--cdm-e-2);
}

/* --- 62.f resumo no celular: a tabela não pode transbordar ------------------ */

.cdm-resumo__tabela {
	table-layout: fixed;
	width: 100%;
}

.cdm-resumo__tabela tbody {
	display: block;
	max-height: 9rem;
	overflow-y: auto;
}

.cdm-resumo__tabela tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.cdm-resumo__tabela td.product-total,
.cdm-resumo__tabela tfoot td {
	width: 6rem;
	text-align: right;
}

.cdm-resumo__tabela tfoot th {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* O <tbody> em bloco dentro de uma tabela de layout fixo saía com metade da
   largura (uma coluna): o nome do produto virava uma letra por linha. */
.cdm-resumo__tabela tbody {
	width: 100%;
}

/* Tabela inteira em blocos: cada <tr> vira uma tabela de largura total e
   layout fixo — o <tbody> em bloco dentro de uma tabela real recebia só a
   largura da primeira coluna, mesmo com width: 100%. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela,
.cdm-resumo__tabela {
	display: block;
	width: 100%;
}

.cdm-resumo__tabela thead {
	display: none;
}

.cdm-resumo__tabela tbody,
.cdm-resumo__tabela tfoot {
	display: block;
	width: 100%;
}

.cdm-resumo__tabela tbody tr,
.cdm-resumo__tabela tfoot tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.cdm-resumo__tabela tfoot tr > th {
	width: auto;
}

/* Abas Receber/Retirar no celular: cabem numa linha com 12px e menos borda
   interna (com 13px o "Receber no Endereço" quebrava em duas). */
@media (max-width: 479px) {
	.cdm-checkout__frete button.cdm-totais__modo-botao {
		padding: 0 var(--cdm-e-2);
		font-size: var(--cdm-t-xs);
		white-space: nowrap;
	}

	.cdm-checkout__frete button.cdm-totais__modo-botao .cdm-icone {
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   63. Resumo exatamente como a arte (dono, 04/09/2026, segunda vez)
   ========================================================================== */

.cdm-checkout__passo--resumo #order_review,
.cdm-checkout__passo--resumo .cdm-resumo,
.woocommerce-checkout .cdm-checkout__passo--resumo #order_review {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cdm-checkout__passo--resumo .cdm-resumo,
.cdm-resumo__tabela,
.cdm-resumo__tabela th,
.cdm-resumo__tabela td {
	color: var(--cdm-azul);
}

/* --- item: foto 56px, nome em uma linha, "x 45" embaixo, preço à direita --- */

.cdm-resumo__item {
	gap: var(--cdm-e-3);
	align-items: center;
}

img.cdm-resumo__foto {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.25rem;
	border: 1px solid var(--cdm-cinza-200);
	border-radius: 0.625rem;
}

.cdm-resumo__nome {
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-azul);
}

.cdm-resumo__qtd {
	margin-top: 0.125rem;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-apagado);
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td,
.cdm-resumo__tabela tbody td {
	padding: 0.25rem 0 var(--cdm-e-3);
	border: 0;
	border-bottom: 1px solid var(--cdm-cinza-200);
	vertical-align: middle;
}

.cdm-resumo__tabela tbody td.product-total,
.cdm-resumo__tabela tbody td.product-total .woocommerce-Price-amount {
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-azul);
}

/* --- extrato: 14px, fio só embaixo do Subtotal --- */

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot td,
.cdm-resumo__tabela tfoot th,
.cdm-resumo__tabela tfoot td,
.cdm-resumo__tabela tfoot .woocommerce-Price-amount {
	padding: 0.625rem 0;
	border: 0;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	color: var(--cdm-azul);
}

.cdm-resumo__tabela tfoot tr.cart-subtotal th,
.cdm-resumo__tabela tfoot tr.cart-subtotal td {
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-resumo__tabela tfoot tr.woocommerce-shipping-totals th,
.cdm-resumo__tabela tfoot tr.woocommerce-shipping-totals td {
	padding-top: 0.75rem;
	padding-bottom: 0.375rem;
}

/* Desconto do Pix (a linha do tema e a taxa do gateway, quando o Pix está
   escolhido) em verde. */
.cdm-resumo__tabela tfoot tr.cdm-resumo__pix th,
.cdm-resumo__tabela tfoot tr.cdm-resumo__pix td,
.cdm-resumo__tabela tfoot tr.cdm-resumo__pix .woocommerce-Price-amount,
.cdm-resumo__tabela tfoot tr.fee th,
.cdm-resumo__tabela tfoot tr.fee td,
.cdm-resumo__tabela tfoot tr.fee .woocommerce-Price-amount {
	padding-top: 0.375rem;
	padding-bottom: 0.75rem;
	color: var(--cdm-verde-escuro);
}

/* --- Total: faixa azul-clara com fio, 20px em negrito --- */

.cdm-resumo__tabela tfoot tr.order-total th,
.cdm-resumo__tabela tfoot tr.order-total td,
.cdm-resumo__tabela tfoot tr.order-total .woocommerce-Price-amount {
	padding: 0.75rem var(--cdm-e-3);
	background: var(--cdm-azul-claro);
	border-top: 1px solid #c9dcf3;
	border-bottom: 1px solid #c9dcf3;
	font-size: 1.25rem;
	font-weight: var(--cdm-peso-forte);
	line-height: 1.2;
	color: var(--cdm-azul);
}

.cdm-resumo__tabela tfoot tr.order-total th {
	border-left: 1px solid #c9dcf3;
	border-radius: var(--cdm-raio) 0 0 var(--cdm-raio);
}

.cdm-resumo__tabela tfoot tr.order-total td {
	border-right: 1px solid #c9dcf3;
	border-radius: 0 var(--cdm-raio) var(--cdm-raio) 0;
}

.cdm-resumo__tabela tfoot tr.order-total {
	margin-top: var(--cdm-e-2);
}

/* --- 63.b sem espaço reservado para o Turnstile ----------------------------
   No modo "só quando desafia" o widget tem altura zero até a Cloudflare
   decidir mostrá-lo; os 65px reservados viravam um vão branco no fim de
   "Seus dados" (era o "card muito maior do que precisaria"). Quando o
   widget aparece, ele empurra o botão — melhor um salto raro do que um
   buraco sempre. */
.cdm-checkout .cf-turnstile,
.cdm-checkout .cdm-checkout__passo--dados .cf-turnstile {
	min-height: 0;
	margin: 0;
}

.cdm-checkout .cf-turnstile:empty {
	display: none !important;
}

/* Cabeçalho → primeiro bloco com os mesmos 8px dos outros cartões. */
.cdm-checkout .cdm-checkout__passo--dados .woocommerce-billing-fields,
.cdm-checkout .cdm-checkout__passo--dados .cdm-otp,
.cdm-checkout .cdm-checkout__passo--dados .cdm-otp__passo--escolha {
	margin-top: 0;
	padding-top: 0;
}

.cdm-checkout__passo--dados .woocommerce-billing-fields__field-wrapper {
	padding-top: 0.125rem;
}

/* --- 63.c acabamento: faixa do Total na linha inteira; entrega pendente ---- */

/* Fundo, fio e canto na LINHA (cada <tr> é uma tabela própria), não nas duas
   células: as células tinham alturas diferentes e o fio de cima ficava
   dentado. */
.cdm-resumo__tabela tfoot tr.order-total {
	background: var(--cdm-azul-claro);
	border: 1px solid #c9dcf3;
	border-radius: var(--cdm-raio);
	overflow: hidden;
}

.cdm-resumo__tabela tfoot tr.order-total th,
.cdm-resumo__tabela tfoot tr.order-total td {
	background: none;
	border: 0;
	border-radius: 0;
	width: auto;
}

.cdm-resumo__tabela tfoot tr.order-total th {
	width: 40%;
}

.cdm-resumo__tabela tfoot tr.order-total td {
	white-space: nowrap;
}

/* Entrega ainda não escolhida: "Entrega" à esquerda e o aviso à direita,
   quebrando em duas linhas se precisar — nunca cortado. */
.cdm-resumo__tabela .woocommerce-shipping-totals td.cdm-resumo__frete-pendente,
.cdm-resumo__tabela td.cdm-resumo__frete-pendente {
	white-space: normal;
	font-size: var(--cdm-t-xs);
	line-height: 1.3;
	color: var(--cdm-texto-apagado);
}

.cdm-resumo__tabela .woocommerce-shipping-totals th.screen-reader-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
}

/* Campos com rótulo flutuante precisam de 12px entre linhas, não 8: com 8 o
   rótulo de baixo encostava no campo de cima (dono, 04/09/2026). Vale nos
   dois cartões para continuar tudo igual. */
.cdm-checkout__passo--dados .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .cdm-checkout__endereco,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper {
	padding-top: 0.375rem;
	row-gap: var(--cdm-e-3);
}

.cdm-checkout .cdm-tipo-pessoa__link {
	margin-top: 0.125rem;
}

/* 16px entre as linhas de campo (dono, 04/09/2026). */
.cdm-checkout__passo--dados .woocommerce-billing-fields__field-wrapper,
.cdm-checkout .cdm-checkout__endereco,
.cdm-checkout .woocommerce-shipping-fields__field-wrapper {
	padding-top: 0.5rem;
	row-gap: var(--cdm-e-4);
}

/* ==========================================================================
   64. Carrinho e checkout: leitura integral e padrão compartilhado (05/09/2026)
   A lista cresce com os itens; somente a página rola. As regras ficam no
   tema e também se aplicam aos fragmentos atualizados pelo WooCommerce.
   ========================================================================== */

.cdm-checkout .cdm-checkout__passo {
	box-shadow: none;
}

.cdm-checkout .cdm-resumo__tabela tbody {
	max-height: none;
	overflow: visible;
}

.cdm-checkout .cdm-resumo__tabela tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--cdm-e-3);
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td {
	display: block;
	width: auto;
	min-width: 0;
	padding: 0;
	border: 0;
}

.cdm-checkout .cdm-resumo__item {
	align-items: flex-start;
	min-width: 0;
}

.cdm-checkout .cdm-resumo__texto {
	flex: 1;
}

.cdm-checkout .cdm-resumo__nome {
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
	text-overflow: clip;
	color: var(--cdm-texto);
	font-weight: var(--cdm-peso-normal);
	line-height: var(--cdm-altura-normal);
}

.cdm-checkout .cdm-resumo__qtd {
	color: var(--cdm-texto-fraco);
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td.product-total {
	padding-top: var(--cdm-e-2);
	text-align: right;
	font-weight: var(--cdm-peso-semi);
}

.cdm-checkout .cdm-resumo__tabela tfoot tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: baseline;
	column-gap: var(--cdm-e-3);
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot td {
	display: block;
	width: auto;
	min-width: 0;
	padding: var(--cdm-e-3) 0;
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
	text-overflow: clip;
	color: var(--cdm-texto-fraco);
	line-height: var(--cdm-altura-normal);
}

.cdm-checkout .cdm-resumo__tabela tfoot td p {
	margin: 0;
	white-space: normal;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-checkout .cdm-resumo__tabela tfoot tr .woocommerce-Price-amount {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	white-space: nowrap;
}

.cdm-checkout .cdm-resumo__tabela tfoot tr.order-total {
	padding: var(--cdm-e-3);
	background: var(--cdm-azul-claro);
	border-color: var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	overflow: visible;
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr.order-total th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr.order-total td {
	padding: 0;
	color: var(--cdm-azul);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-semi);
}

/* O extrato usa neutros e o total usa azul; não presume que toda taxa é desconto. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr.cdm-resumo__pix th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr.cdm-resumo__pix td {
	color: var(--cdm-texto-fraco);
}

/* A descrição do gateway ocupa uma linha própria, sem competir com o rádio. */
.cdm-checkout .cdm-pagamento__lista > li {
	flex-wrap: wrap;
	min-height: var(--cdm-alvo-toque);
	padding: var(--cdm-e-3);
}

.woocommerce-checkout #payment div.payment_box {
	flex: 1 1 100%;
	min-width: 0;
	width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.cdm-checkout .cdm-pagamento__lista > li > .payment_box p,
.cdm-checkout .cdm-pagamento__lista > li > .payment_box fieldset.wc-payment-form > p:first-child {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	white-space: normal;
}

/* O seletor inteiro precisa caber na célula e manter alvos confortáveis. */
.woocommerce .cdm-carrinho__qtd .quantity input.qty {
	width: var(--cdm-e-8);
	min-height: var(--cdm-alvo-toque);
}

.cdm-carrinho__qtd button.cdm-carrinho__qtd-botao {
	flex: 0 0 var(--cdm-alvo-toque);
	width: var(--cdm-alvo-toque);
	height: var(--cdm-alvo-toque);
	color: var(--cdm-azul);
}

@media (max-width: 767px) {
	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item {
		grid-template-columns: calc(var(--cdm-e-12) + var(--cdm-e-2)) minmax(0, 1fr) auto;
		grid-template-areas: "foto nome nome" "qtd qtd preco";
		row-gap: var(--cdm-e-3);
	}

	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-quantity {
		width: auto;
		min-width: 0;
	}

	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-price {
		text-align: right;
	}
}

/* Mesmo rodapé nas duas etapas, inclusive nas larguras intermediárias. */
body.woocommerce-cart footer.cdm-rodape--simples,
body.woocommerce-checkout:not(.woocommerce-order-received) footer.cdm-rodape--simples {
	padding-block: var(--cdm-e-6);
}

.cdm-rodape--simples .cdm-container {
	display: block;
}

body.woocommerce-cart .cdm-rodape--simples .cdm-rodape-simples__corpo,
body.woocommerce-checkout:not(.woocommerce-order-received) .cdm-rodape--simples .cdm-rodape-simples__corpo {
	justify-content: center;
	gap: var(--cdm-e-6) var(--cdm-e-8);
	margin: 0 0 var(--cdm-e-4);
	padding: 0;
}

.cdm-rodape--simples .cdm-rodape-simples__bloco {
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}

body .cdm-rodape--simples .cdm-rodape-simples__bandeiras {
	grid-template-columns: repeat(4, minmax(0, var(--cdm-e-16)));
	width: auto;
	max-width: 100%;
	gap: var(--cdm-e-2);
}

.cdm-rodape--simples .cdm-rodape__miniatura {
	width: 100%;
}

.cdm-rodape--simples .cdm-rodape-simples__selos {
	justify-content: center;
}

.cdm-rodape--simples .cdm-rodape-simples__selos img {
	height: var(--cdm-e-5);
	width: auto;
}

.cdm-rodape--simples .cdm-rodape-simples__rotulo,
.cdm-rodape--simples .cdm-rodape-simples__legal {
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-fraco);
}

@media (min-width: 900px) {
	body .cdm-rodape--simples .cdm-rodape-simples__bandeiras {
		grid-template-columns: repeat(8, var(--cdm-e-12));
	}
}

/* A célula de frete era escondida para leitores visuais pelo template.
   Agora o rótulo participa da mesma grade do valor, inclusive após AJAX. */
.cdm-checkout .cdm-resumo__tabela tfoot tr > th {
	grid-column: 1;
	grid-row: 1;
}

.cdm-checkout .cdm-resumo__tabela tfoot tr > td {
	grid-column: 2;
	grid-row: 1;
}

.cdm-checkout .cdm-resumo__tabela .cdm-resumo__frete {
	flex-wrap: wrap;
}

.cdm-checkout .cdm-resumo__tabela tfoot tr.cdm-resumo__pix .woocommerce-Price-amount,
.cdm-checkout .cdm-resumo__tabela tfoot tr.fee .woocommerce-Price-amount {
	color: inherit;
}

.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-remove {
	width: var(--cdm-alvo-toque);
}

/* WooCommerce fixa a lixeira em 1em; preserva um alvo inteiro para toque. */
.woocommerce .cdm-carrinho__tabela a.remove.cdm-carrinho__remover {
	width: var(--cdm-alvo-toque);
	height: var(--cdm-alvo-toque);
	margin: 0;
}

/* Vence position:absolute !important da classe screen-reader-text do Woo. */
.cdm-checkout .cdm-resumo__tabela .woocommerce-shipping-totals th.screen-reader-text {
	position: static !important;
}

@media (max-width: 767px) {
	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item {
		padding-right: 0;
	}

	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-name {
		padding-right: var(--cdm-alvo-toque);
	}
}

@media (min-width: 768px) {
	.cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 3.5rem minmax(0, 1fr) 9rem 9rem var(--cdm-alvo-toque);
	}
}

/* Ações de compra com a mesma cor e contraste nas duas etapas. */
body.woocommerce-cart,
body.woocommerce-checkout:not(.woocommerce-order-received) {
	--cdm-resumo-verde: var(--cdm-verde);
	--cdm-verde-comprar: var(--cdm-verde);
	--cdm-verde-comprar-fundo: var(--cdm-verde-escuro);
}

/* Vence o raio !important herdado do botão WooCommerce. */
.cdm-carrinho__lateral .cdm-totais a.checkout-button {
	border-radius: var(--cdm-raio) !important;
	font-size: var(--cdm-t-md);
}

.cdm-checkout .cdm-resumo__tabela tfoot tr.order-total strong {
	font-weight: inherit;
}

/* O iframe externo do Turnstile tem 300px fixos. Em telas menores que
   360px, ajusta somente a escala visual para manter o desafio inteiro. */
@media (max-width: 359px) {
	.cdm-checkout .cf-turnstile {
		zoom: .82;
	}
}

/* 65. Produtos e ações secundárias contidos no mesmo cartão. */
.woocommerce .cdm-carrinho__form {
	padding: 0 var(--cdm-e-4);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-lg);
}

.woocommerce .cdm-carrinho-pagina .cdm-carrinho__form table.cdm-carrinho__tabela {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.cdm-carrinho__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--cdm-altura-controle);
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-carrinho__cabecalho h2 {
	margin: 0;
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-azul);
}

.cdm-carrinho__opcoes {
	position: relative;
}

.cdm-carrinho__opcoes summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cdm-alvo-toque);
	height: var(--cdm-alvo-toque);
	list-style: none;
	cursor: pointer;
	font-size: var(--cdm-t-xl);
	color: var(--cdm-azul);
	border-radius: var(--cdm-raio);
}

.cdm-carrinho__opcoes summary::-webkit-details-marker {
	display: none;
}

.cdm-carrinho__opcoes summary:focus-visible {
	outline: 2px solid var(--cdm-azul);
}

.cdm-carrinho__opcoes .cdm-cart-share-entry {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 5;
	margin: 0;
	padding: var(--cdm-e-1);
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	box-shadow: var(--cdm-sombra);
}

.cdm-carrinho__opcoes button.cdm-cart-share__trigger {
	min-height: var(--cdm-alvo-toque);
	padding-inline: var(--cdm-e-4);
	white-space: nowrap;
	color: var(--cdm-azul);
	text-decoration: none;
}

@media (max-width: 767px) {
	.woocommerce .cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "foto nome" "qtd preco";
		grid-template-rows: auto auto;
		column-gap: var(--cdm-e-3);
		row-gap: var(--cdm-e-4);
		align-items: start;
		padding-block: var(--cdm-e-4);
	}

	/* A foto ocupa o começo da linha; o nome usa toda a largura restante. */
	.woocommerce .cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		grid-column: 1 / -1;
		grid-row: 1;
		width: var(--cdm-e-12);
	}

	.woocommerce .cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
		width: var(--cdm-e-12);
		height: var(--cdm-e-12);
	}

	.woocommerce .cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-name {
		grid-column: 1 / -1;
		grid-row: 1;
		padding-left: calc(var(--cdm-e-12) + var(--cdm-e-3));
		padding-right: var(--cdm-alvo-toque);
		min-width: 0;
	}

	.woocommerce .cdm-carrinho__tabela td.product-name a {
		white-space: normal;
		overflow-wrap: anywhere;
		font-size: var(--cdm-t-base);
		line-height: var(--cdm-altura-normal);
	}

	.woocommerce .cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-quantity {
		width: auto;
		min-width: 0;
	}

	.woocommerce .cdm-carrinho__tabela tr.woocommerce-cart-form__cart-item td.product-price {
		padding-top: var(--cdm-e-3);
		text-align: right;
		white-space: nowrap;
	}

	.cdm-carrinho__qtd {
		gap: 0;
	}

	.cdm-carrinho__estoque {
		margin: var(--cdm-e-2) 0 0;
		font-size: var(--cdm-t-xs);
		line-height: var(--cdm-altura-normal);
		text-align: left;
		color: var(--cdm-texto-fraco);
	}

	.cdm-carrinho-pagina .cdm-frete__destino {
		flex-wrap: wrap;
	}

	.cdm-carrinho-pagina .cdm-frete__destino-endereco {
		flex-basis: 100%;
	}

	.cdm-carrinho-pagina .cdm-frete__destino-linha,
	.cdm-carrinho-pagina .cdm-frete__opcao-info,
	.cdm-carrinho-pagina .cdm-frete__opcao-titulo {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/* 66. Controles discretos, resumo de apoio e dados do cliente legíveis. */
.cdm-carrinho__qtd button.cdm-carrinho__qtd-botao {
	position: relative;
	isolation: isolate;
	border: 0;
	background: none;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-carrinho__qtd button.cdm-carrinho__qtd-botao::before {
	content: "";
	position: absolute;
	inset: var(--cdm-e-2);
	z-index: -1;
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-cheio);
}

.cdm-carrinho__qtd button[data-cdm-qtd="1"]:not(:disabled) {
	color: var(--cdm-azul);
}

.cdm-carrinho__qtd button[data-cdm-qtd="1"]:not(:disabled)::before {
	background: var(--cdm-azul-claro);
	border-color: var(--cdm-azul-claro);
}

.cdm-carrinho__qtd button.cdm-carrinho__qtd-botao:hover:not(:disabled)::before {
	border-color: var(--cdm-azul);
}

.woocommerce .cdm-carrinho__tabela p.stock.cdm-carrinho__estoque {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
	margin: 0;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
}

.woocommerce .cdm-carrinho__tabela p.stock.cdm-carrinho__estoque::before {
	content: "";
	flex: none;
	width: var(--cdm-e-2);
	height: var(--cdm-e-2);
	border-radius: var(--cdm-raio-cheio);
	background: var(--cdm-verde);
}

.cdm-totais [data-cdm-modo-entrega].cdm-pendente {
	outline: 1px solid var(--cdm-vermelho);
	outline-offset: var(--cdm-e-1);
	border-radius: var(--cdm-raio);
}

.cdm-totais:has(.cdm-pendente) [data-cdm-modo-dica] {
	color: var(--cdm-vermelho);
}

/* Vence as cores !important do botão WooCommerce no estado inválido. */
.cdm-totais a.checkout-button.cdm-pendente {
	background: var(--cdm-vermelho) !important;
	border-color: var(--cdm-vermelho) !important;
}

.cdm-totais .cdm-pendente--vibra {
	animation: cdm-pendente-vibra .55s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.cdm-totais .cdm-pendente--vibra {
		animation: none;
	}
}

.cdm-checkout .cdm-resumo__tabela tbody tr {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cdm-e-2);
	padding-block: var(--cdm-e-2);
}

.cdm-checkout .cdm-resumo__item {
	gap: var(--cdm-e-2);
}

.cdm-checkout img.cdm-resumo__foto {
	width: var(--cdm-e-10);
	height: var(--cdm-e-10);
	border: 0;
	padding: 0;
}

.cdm-checkout .cdm-resumo__nome {
	font-size: var(--cdm-t-sm);
	line-height: var(--cdm-altura-normal);
}

.cdm-checkout .cdm-resumo__qtd {
	margin-top: 0;
	font-size: var(--cdm-t-xs);
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td.product-total,
.cdm-checkout .cdm-resumo__tabela tbody td.product-total .woocommerce-Price-amount {
	padding: 0;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot td {
	padding-block: var(--cdm-e-2);
	font-size: var(--cdm-t-xs);
}

.cdm-checkout .cdm-resumo__tabela tfoot tr.order-total {
	margin-top: var(--cdm-e-1);
	padding: var(--cdm-e-2) 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--cdm-cinza-200);
	border-radius: 0;
}

.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr.order-total th,
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tfoot tr.order-total td {
	font-size: var(--cdm-t-md);
}

.cdm-checkout__passo--resumo .cdm-passo__titulo {
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
}

.cdm-checkout__passo--resumo .cdm-passo__icone {
	width: var(--cdm-e-6);
	height: var(--cdm-e-6);
}

/* O cliente reconhecido segue a tipografia dos campos, sem recortar valores. */
.cdm-checkout .cdm-conta-lista {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-3);
	padding: 0;
	border: 0;
	background: none;
}

.cdm-checkout a.cdm-conta-lista__sair {
	position: static;
	align-self: flex-end;
	margin: 0;
	line-height: var(--cdm-altura-normal);
}

.cdm-checkout ul.cdm-conta-lista__dados {
	gap: var(--cdm-e-2);
}

.cdm-checkout .cdm-conta-lista__linha {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--cdm-e-3);
	align-items: baseline;
	white-space: normal;
	line-height: var(--cdm-altura-normal);
}

.cdm-checkout .cdm-conta-lista__rotulo {
	color: var(--cdm-texto-fraco);
}

.cdm-checkout .cdm-conta-lista__valor {
	overflow: visible;
	white-space: normal;
	overflow-wrap: anywhere;
	text-overflow: clip;
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial {
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--cdm-e-3);
	margin-top: var(--cdm-e-4);
}

.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > .cdm-campo-falta,
.cdm-checkout .woocommerce-billing-fields__field-wrapper.cdm-campos-parcial > button.cdm-campo-falta {
	grid-column: 1;
	width: auto;
	max-width: 100%;
}

@media (min-width: 900px) and (max-width: 1199px) {
	.cdm-checkout .cdm-checkout__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cdm-e-4);
	}

	.cdm-checkout .cdm-checkout__passo--dados {
		grid-column: 1;
		grid-row: 1;
	}

	.cdm-checkout .cdm-checkout__passo--entrega {
		grid-column: 1;
		grid-row: 2;
	}

	.cdm-checkout .cdm-checkout__coluna-pagamento {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: static;
	}
}

@media (min-width: 1200px) {
	.cdm-checkout .cdm-checkout__grade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Nome e metadados são irmãos: atributos ficam abaixo, nunca em outra coluna. */
.woocommerce form.cdm-checkout table.cdm-resumo__tabela tbody td.product-name {
	display: block;
	min-width: 0;
}

.cdm-checkout .cdm-resumo__tabela td.product-name .cdm-resumo__item {
	flex: 1;
}

/* 67. Endereço: modalidade, cotação e dados têm áreas próprias.
   Respeita hidden, que as antigas regras flex/grid sobrepunham. */
.cdm-checkout .cdm-checkout__frete [hidden],
.cdm-checkout .cdm-conta-lista__linha[hidden],
.cdm-checkout .cdm-campo--so-entrega[hidden],
.cdm-checkout .woocommerce-billing-fields__field-wrapper[hidden] {
	display: none;
}
.cdm-checkout .cdm-checkout__passo--retirada #cdm-entrega-endereco,
.cdm-checkout .cdm-checkout__passo--retirada .woocommerce-shipping-fields,
.cdm-checkout .cdm-checkout__passo--concluido .cdm-checkout__avancar {
	display: none;
}
.cdm-checkout .cdm-checkout__passo--concluido .cdm-passo__ordem {
	color: var(--cdm-verde);
}
.cdm-checkout .cdm-checkout__frete {
	margin: 0;
	padding: 0;
}
.cdm-checkout .cdm-checkout__frete #billing_postcode_field {
	width: 100%;
	max-width: none;
	margin: var(--cdm-e-4) 0 var(--cdm-e-3);
	padding: 0;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cdm-e-3);
}
.cdm-checkout .cdm-checkout__frete .cdm-frete__cartao {
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.cdm-checkout .cdm-checkout__frete .cdm-frete__lista {
	margin: 0;
	padding: 0;
	gap: var(--cdm-e-2);
}
.cdm-checkout .cdm-checkout__frete .cdm-frete__item label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cdm-e-2);
}
.cdm-checkout .cdm-checkout__frete .cdm-frete__opcao-nome,
.cdm-checkout .cdm-checkout__frete .cdm-frete__opcao-titulo,
.cdm-checkout .cdm-checkout__frete .cdm-frete__opcao-extra {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}
.cdm-checkout .cdm-checkout__frete .cdm-frete__opcao-valor {
	white-space: nowrap;
}
.cdm-checkout .cdm-checkout__retirada-pix {
	margin: var(--cdm-e-3) 0 0;
	padding: var(--cdm-e-3);
	background: var(--cdm-azul-claro);
	border-radius: var(--cdm-raio);
	color: var(--cdm-texto);
	font-size: var(--cdm-t-sm);
	line-height: var(--cdm-altura-normal);
}
.cdm-checkout #cdm-entrega-endereco {
	margin-top: var(--cdm-e-4);
	padding-top: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
	gap: var(--cdm-e-3);
}
.cdm-checkout #cdm-entrega-endereco .form-row {
	min-width: 0;
	margin: 0;
}
.cdm-checkout #billing_address_1_field,
.cdm-checkout #billing_neighborhood_field {
	grid-column: 1 / -1;
}
.cdm-checkout #cdm-entrega-endereco #billing_city_field,
.cdm-checkout #cdm-entrega-endereco #billing_state_field {
	grid-column: auto;
	width: auto;
}
.cdm-checkout .cdm-checkout__frete [data-cdm-modo] {
	min-width: 0;
	padding-inline: var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
}

.woocommerce form.cdm-checkout #cdm-entrega-endereco {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.woocommerce form.cdm-checkout #cdm-entrega-endereco #billing_number_field,
.woocommerce form.cdm-checkout #cdm-entrega-endereco #billing_address_2_field {
	grid-column: auto;
	width: auto;
}
.woocommerce form.cdm-checkout #cdm-entrega-endereco #billing_country_field,
.woocommerce form.cdm-checkout .cdm-checkout__passo--retirada #cdm-entrega-endereco {
	display: none;
}

/* O country-select do Woo aplica display inline ao atualizar os campos.
   Brasil continua enviado no formulário, sem ocupar uma linha fixa. */
.woocommerce form.cdm-checkout #cdm-entrega-endereco #billing_country_field {
	display: none !important;
}
.cdm-checkout .cdm-checkout__frete [data-cdm-modo] {
	white-space: normal;
	height: auto;
	min-height: var(--cdm-alvo-toque);
	line-height: var(--cdm-altura-apertada);
}
.woocommerce form.cdm-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce form.cdm-checkout .form-row.woocommerce-validated select {
	border-color: var(--cdm-cinza-200);
}

.cdm-checkout #shipping_method .cdm-frete__item label {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
}
.cdm-checkout .cdm-frete__descricao {
	flex: 1;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}
.cdm-checkout #shipping_method label > .woocommerce-Price-amount,
.cdm-checkout #shipping_method label > .cdm-frete__opcao-preco {
	flex: 0 0 auto;
	white-space: nowrap;
}
.cdm-checkout #shipping_method label > .cdm-frete__opcao-valor {
	flex: 0 0 auto;
	white-space: nowrap;
}
.cdm-checkout .cdm-frete__descricao .cdm-frete__opcao-info,
.cdm-checkout .cdm-frete__descricao .cdm-frete__opcao-titulo,
.cdm-checkout .cdm-frete__descricao .cdm-frete__opcao-extra {
	display: inline;
}
.cdm-checkout .cdm-frete__descricao .cdm-frete__opcao-extra::before {
	content: " ";
}

/* Variações extensas no resumo: leitura abaixo do produto, sem comprimir o nome. */
.woocommerce form.cdm-checkout .cdm-resumo__tabela td.product-name dl.variation {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: var(--cdm-e-1) 0 0 calc(var(--cdm-e-10) + var(--cdm-e-2));
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto-fraco);
	white-space: normal;
	overflow-wrap: anywhere;
}
.woocommerce form.cdm-checkout .cdm-resumo__tabela dl.variation dt,
.woocommerce form.cdm-checkout .cdm-resumo__tabela dl.variation dd,
.woocommerce form.cdm-checkout .cdm-resumo__tabela dl.variation dd p {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	font-weight: var(--cdm-peso-normal);
}
.woocommerce form.cdm-checkout .cdm-resumo__tabela dl.variation dt::after {
	content: " ";
}
.woocommerce form.cdm-checkout .cdm-resumo__tabela dl.variation dd::after {
	content: "";
	display: block;
}
.woocommerce form.cdm-checkout .cdm-resumo__tabela tr:has(dl.variation) td.product-total {
	align-self: start;
}