/*
 * O carrinho e o checkout.
 *
 * Mesma gramática do catálogo: canto de 12px em cartão e campo, pílula em
 * controle pequeno, vermelho SÓ na ação principal — que aqui é um botão só,
 * "Finalizar pedido".
 */

.woocommerce-checkout .site-content,
.woocommerce-cart .site-content { background: var(--pf-papel, #F6FAF9); }

.woocommerce-checkout .entry-header,
.woocommerce-cart .entry-header { display: none; }

/* ── Duas colunas: formulário à esquerda, resumo à direita ──────────────── */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	/* Sem espaco entre as linhas da coluna direita: o titulo "Seu pedido" e a
	   tabela sao UM cartao. Com espaco eles leem como dois blocos soltos. */
	gap: 0 28px;
	align-items: start;
	max-width: 1140px;
	margin-inline: auto;
}
/* Os IDs entram no seletor pelo mesmo motivo do `#customer_details`: o
   WooCommerce dimensiona `#order_review` por ID (`width: 48%; float: right`),
   e classe nenhuma ganha disso. */
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2; grid-row: 1;
	margin: 0;
	width: 100% !important;
	float: none !important;
}
.woocommerce-checkout form.checkout #order_review {
	grid-column: 2; grid-row: 2;
	width: 100% !important;
	float: none !important;
}

/*
 * ⚠️ O `col2-set` DO WOOCOMMERCE PRECISA SER DESARMADO.
 *
 * `#customer_details` vem com `.col-1 { width: 47%; float: left }`, herança da
 * epoca em que havia duas colunas (cobranca e entrega). Aqui a entrega esta
 * desligada, entao sobrava um formulario com 47% da largura e metade da tela em
 * branco — e dentro dele os campos ficavam com 71px.
 */
/*
 * ⚠️ PRECISA DO ID NO SELETOR.
 * A regra que segurava era `#customer_details { width:47%; float:left }` — um
 * ID vale mais que qualquer quantidade de classes, entao `.woocommerce-checkout
 * form.checkout .col2-set` perdia calada. Com o ID no meu seletor eu passo a
 * ganhar, e o formulario ocupa a coluna inteira.
 */
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout #customer_details .col-1,
.woocommerce-checkout form.checkout #customer_details .col-2 {
	width: 100% !important;
	float: none !important;
	max-width: none;
	padding: 0;
}
.woocommerce-checkout form.checkout .col2-set::before,
.woocommerce-checkout form.checkout .col2-set::after { display: none; }

/*
 * ⚠️ O SELECT2 PRECISA DE LARGURA EXPLICITA.
 * Ele mede a largura do `<select>` original no momento em que se monta; como o
 * original ja estava escondido, mediu 1px — e o campo Estado saiu com 1px de
 * largura, invisivel, num formulario onde ele e obrigatorio.
 */
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto;
	padding: 12px 14px;
	display: flex;
	align-items: center;
}
.woocommerce-checkout .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; }
.woocommerce-checkout .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 10px; }

/* ── Os cartões ────────────────────────────────────────────────────────── */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-cart-form {
	background: #fff;
	border: 1px solid var(--pf-linha, #DCE8E6);
	border-radius: 12px;
	padding: 24px 24px 26px;
}

/* O resumo acompanha a rolagem: num formulario longo o cliente perde o total
   de vista bem na hora de decidir. O titulo gruda junto, senao o cartao se
   parte no meio ao rolar. */
.woocommerce-checkout form.checkout #order_review_heading { position: sticky; top: 16px; z-index: 2; }
.woocommerce-checkout form.checkout #order_review { position: sticky; top: 74px; }

/* O titulo e a tampa do cartao do resumo: mesma borda, canto de cima
   arredondado, e o cartao de baixo entra sem borda em cima. */
.woocommerce-checkout form.checkout #order_review_heading {
	font-size: 18px;
	font-weight: 600;
	color: var(--pf-petroleo, #0B4F4A);
	letter-spacing: -.015em;
	background: #fff;
	border: 1px solid var(--pf-linha, #DCE8E6);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	padding: 20px 24px 6px;
}
.woocommerce-checkout form.checkout #order_review {
	border-top: 0;
	border-radius: 0 0 12px 12px;
	padding-top: 8px;
}
.woocommerce-cart .cart_totals h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--pf-petroleo, #0B4F4A);
	letter-spacing: -.015em;
	padding-bottom: 10px;
}

/* ── A barra de cupom ─────────────────────────────────────────────────────
   Vem do WooCommerce com uma faixa azul em cima, a unica coisa azul do site. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	background: #fff;
	border: 1px solid var(--pf-linha, #DCE8E6);
	border-top: 3px solid var(--pf-petroleo, #0B4F4A);
	border-radius: 12px;
	color: var(--pf-tinta-2, #4A5F5C);
	padding: 14px 18px;
	margin-bottom: 20px;
}
.woocommerce-checkout .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-info a { color: var(--pf-petroleo, #0B4F4A); font-weight: 600; }
.woocommerce-checkout form.checkout_coupon {
	border: 1px solid var(--pf-linha, #DCE8E6);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 20px;
}

/* O título "Detalhes de faturamento" do WooCommerce não serve: os blocos
   numerados dizem melhor o que é cada parte. */
.woocommerce-checkout .woocommerce-billing-fields > h3 { display: none; }

/* ── Os blocos numerados ───────────────────────────────────────────────── */

/* O titulo agora mora dentro de uma `.form-row`, para ser ordenado junto com
   os campos pelo script do WooCommerce. A linha nao desenha nada por si. */
.pf-ck-linha-titulo { margin: 0; padding: 0; }

.pf-ck-titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 600;
	color: var(--pf-petroleo, #0B4F4A);
	letter-spacing: -.01em;
	/* Mais espaço acima do que abaixo: prende o título ao que ele abre. */
	margin: 30px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--pf-linha, #DCE8E6);
	clear: both;
}
/* O primeiro não leva linha nem espaço em cima. */
.pf-ck-linha-titulo:first-child .pf-ck-titulo { margin-top: 0; padding-top: 0; border-top: 0; }

.pf-ck-passo {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 999px;
	background: var(--pf-petroleo, #0B4F4A);
	color: #fff;
	font-size: 14px; font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* ── Os campos ─────────────────────────────────────────────────────────── */

.woocommerce-checkout .form-row {
	padding: 0;
	margin: 0 0 16px;
}
.woocommerce-checkout .form-row label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pf-tinta-2, #4A5F5C);
	margin-bottom: 6px;
}
.woocommerce-checkout .required { color: var(--pf-vermelho, #C1121F); text-decoration: none; }

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection {
	width: 100%;
	/* 16px no celular: abaixo disso o iOS dá zoom sozinho ao focar o campo e
	   a tela salta. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--pf-tinta, #10201E);
	background: #fff;
	border: 1.5px solid var(--pf-linha, #DCE8E6);
	border-radius: 12px;
	padding: 12px 14px;
	height: auto;
	box-shadow: none;
	transition: border-color .14s ease, box-shadow .14s ease;
}
.woocommerce-checkout .input-text::placeholder { color: #6B7F7C; opacity: 1; }

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
	outline: 0;
	border-color: var(--pf-petroleo, #0B4F4A);
	box-shadow: 0 0 0 3px rgba(11, 79, 74, .13);
}

.woocommerce-checkout .form-row .description {
	display: block;
	font-size: 12.5px;
	color: var(--pf-tinta-2, #4A5F5C);
	margin-top: 5px;
}

/* Metades reais: o `form-row-first/last` do WooCommerce usa float e quebra
   feio quando um campo é mais alto que o outro. */
.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	/* `minmax(0, 1fr)` e nao `1fr`: com `1fr` puro uma celula cujo conteudo e
	   mais largo que a coluna empurra a outra, e as duas metades deixam de ser
	   metades. Foi o que fez o CEP sair com 76px ao lado de um campo de 257px. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 14px;
}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .pf-ck-linha-titulo { grid-column: 1 / -1; }
.woocommerce-checkout .form-row-first { grid-column: 1; }
.woocommerce-checkout .form-row-last  { grid-column: 2; }
/*
 * ⚠️ SELETOR LONGO DE PROPÓSITO, e `width` explícito.
 *
 * O CSS do WooCommerce traz `.woocommerce form .form-row-first { width: 47%;
 * float: left }` — três níveis, portanto mais forte que `.woocommerce-checkout
 * .form-row-first`. Dentro do meu grid isso fazia CEP, Numero, Cidade e Estado
 * sairem com um terco da largura da celula: o "Estado" virou "Sa..." e o rotulo
 * "Complemento (opcional)" quebrou em duas linhas. Quem manda na largura aqui e
 * o grid, entao o `width` volta para 100% da celula.
 */
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last,
.woocommerce-checkout form.checkout .form-row-wide {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* Campo com erro: a borda avisa junto com o texto, não só o texto. */
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select {
	border-color: var(--pf-vermelho, #C1121F);
	box-shadow: 0 0 0 3px rgba(193, 18, 31, .12);
}
.woocommerce-checkout .woocommerce-validated .input-text { border-color: #9CC9C2; }

/* ── O aviso do CEP ────────────────────────────────────────────────────── */

.pf-cep__aviso {
	display: block;
	font-size: 12.5px;
	margin-top: 5px;
	min-height: 1em;      /* reserva a linha: sem isto o formulário pula */
	color: var(--pf-tinta-2, #4A5F5C);
}
.pf-cep__aviso.is-nao { color: var(--pf-vermelho, #C1121F); }

/* ── O resumo ──────────────────────────────────────────────────────────── */

.woocommerce-checkout .shop_table,
.woocommerce-cart .shop_table {
	border: 0;
	border-radius: 0;
	width: 100%;
	font-size: 14.5px;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
	border: 0;
	border-bottom: 1px solid var(--pf-linha, #DCE8E6);
	padding: 12px 0;
}
.woocommerce-checkout .shop_table tfoot th,
.woocommerce-checkout .shop_table tfoot td { font-weight: 600; }
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
	font-size: 18px;
	color: var(--pf-petroleo, #0B4F4A);
	border-bottom: 0;
	padding-top: 16px;
}
.woocommerce-checkout .shop_table td,
.woocommerce-cart .shop_table td { font-variant-numeric: tabular-nums; }

/* ── O pagamento ───────────────────────────────────────────────────────── */

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 18px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 14px;
}
.woocommerce-checkout #payment li.wc_payment_method {
	border: 1.5px solid var(--pf-linha, #DCE8E6);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 10px;
	list-style: none;
}
.woocommerce-checkout #payment li.wc_payment_method label {
	font-weight: 600;
	color: var(--pf-tinta, #10201E);
	margin: 0;
	cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--pf-papel, #F6FAF9);
	border-radius: 10px;
	color: var(--pf-tinta-2, #4A5F5C);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 12px 0 0;
	padding: 12px 14px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ── O botão que fecha o pedido ────────────────────────────────────────── */

.woocommerce-checkout #place_order,
.woocommerce-cart .checkout-button {
	width: 100%;
	background: var(--pf-vermelho, #C1121F) !important;
	color: #fff !important;
	border: 0;
	border-radius: 12px;
	padding: 16px 22px;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background .15s ease, transform .08s ease;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .checkout-button:hover { background: var(--pf-vermelho-2, #9E0E19) !important; color: #fff !important; }
.woocommerce-checkout #place_order:active,
.woocommerce-cart .checkout-button:active { transform: translateY(1px); }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 12.5px;
	color: var(--pf-tinta-2, #4A5F5C);
	margin-bottom: 14px;
}

/* ── Avisos ────────────────────────────────────────────────────────────── */

.woocommerce-checkout .woocommerce-error,
.woocommerce-cart .woocommerce-error {
	background: #FDF2F3;
	border: 1px solid #F0C2C6;
	border-radius: 12px;
	color: #7E0C15;      /* 7,4:1 sobre o rosa claro */
	padding: 14px 18px;
	list-style: none;
}
.woocommerce-checkout .woocommerce-error::before { display: none; }
.woocommerce-checkout .woocommerce-error a { color: #7E0C15; }

/* ── Telas pequenas ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	/*
	 * ⚠️ OS MESMOS SELETORES COM ID, TAMBEM AQUI.
	 *
	 * As regras que colocam o formulario na coluna 1 e o resumo na coluna 2
	 * precisaram do ID no seletor para vencer o CSS do WooCommerce. Como elas
	 * ficam FORA desta media query, elas continuavam valendo no celular: o grid
	 * virava de uma coluna, mas o `#order_review` seguia mandado para a coluna
	 * 2 — que passava a existir do nada — e o formulario era espremido num
	 * filete de 60px, com "Nome" quebrando uma letra por linha.
	 *
	 * Media query nao aumenta especificidade. Ou os dois lados tem ID, ou o de
	 * fora ganha sempre.
	 */
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		/*
		 * ⚠️ SEM `gap` AQUI. O titulo "Seu pedido" e a tabela sao DUAS celulas
		 * do grid que juntas formam UM cartao — o titulo e a tampa, com o canto
		 * de cima arredondado e sem borda embaixo. Qualquer espaco entre linhas
		 * rasga esse cartao ao meio e deixa o fundo da pagina aparecendo no
		 * corte. O respiro vem de uma margem so, embaixo do formulario.
		 */
		gap: 0;
	}
	.woocommerce-checkout form.checkout #customer_details { margin-bottom: 18px; }
	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 1 !important;
		grid-row: auto !important;
		position: static !important;
	}
	/* No celular o resumo vem DEPOIS do formulario: quem abre o checkout quer
	   preencher, nao reler o que ja escolheu. */
	.woocommerce-checkout form.checkout #customer_details    { order: 1; }
	.woocommerce-checkout form.checkout #order_review_heading { order: 2; }
	.woocommerce-checkout form.checkout #order_review         { order: 3; }

	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout form.checkout #order_review { padding: 18px 16px 20px; }
	.woocommerce-checkout form.checkout #order_review_heading { padding: 18px 16px 6px; }
}

@media (max-width: 560px) {
	/*
	 * Numa coluna só: Nome/Sobrenome e Cidade/Estado lado a lado dão 138px cada
	 * num telefone, estreito demais para digitar e para ler o rótulo.
	 *
	 * ⚠️ De novo com `form.checkout` no seletor. A regra de duas colunas la em
	 * cima tem esse nivel a mais, e media query NAO aumenta especificidade —
	 * sem isto, esta regra e escrita, e ignorada.
	 */
	.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
	.woocommerce-checkout form.checkout .form-row-first,
	.woocommerce-checkout form.checkout .form-row-last { grid-column: 1; }
}

/* O país: existe no formulário, não aparece na tela. Só há Brasil. */
.woocommerce-checkout form.checkout .pf-oculto { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   O MEIO DE PAGAMENTO EM DESTAQUE

   Esta loja tem UM caminho para fechar o pedido, e ele não é óbvio: quem chega
   espera cartão ou PIX. Então o bloco não é um item de lista com rádio — é uma
   declaração, com a cor e o símbolo que a pessoa reconhece sem ler.
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout #payment li.wc_payment_method.payment_method_pf_whatsapp {
	border: 2px solid #25D366;
	background: #F2FCF6;
	padding: 18px;
}
.woocommerce-checkout #payment li.wc_payment_method.payment_method_pf_whatsapp > label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--pf-petroleo, #0B4F4A);
}
/* O símbolo do WhatsApp antes do rótulo. É desenho, não texto: `aria-hidden`
   não existe em pseudo-elemento, e por isso ele não carrega informação — o
   rótulo já diz tudo. */
.woocommerce-checkout #payment li.payment_method_pf_whatsapp > label::before {
	content: "";
	flex: none;
	width: 26px; height: 26px;
	background: #25D366;
	border-radius: 999px;
	-webkit-mask: var(--pf-zap-glifo) center / 18px 18px no-repeat;
	mask: var(--pf-zap-glifo) center / 18px 18px no-repeat;
	box-shadow: inset 0 0 0 99px #25D366;
}
.woocommerce-checkout #payment li.payment_method_pf_whatsapp div.payment_box {
	background: #fff;
	border: 1px solid #C9EFD8;
	color: var(--pf-tinta, #10201E);
	font-size: 14.5px;
	margin-top: 12px;
}

/* ── A foto no resumo ──────────────────────────────────────────────────── */

.pf-res-item { display: flex; align-items: center; gap: 12px; }
.pf-res-foto {
	flex: none;
	width: 52px; height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--pf-papel, #F6FAF9);
	border: 1px solid var(--pf-linha, #DCE8E6);
}
.pf-res-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pf-res-nome { min-width: 0; line-height: 1.35; }
.woocommerce-checkout .shop_table .product-name { padding-right: 12px; }
/* A quantidade fica junto do nome, não numa linha solta embaixo da foto. */
.woocommerce-checkout .shop_table .product-quantity { font-weight: 600; color: var(--pf-tinta-2, #4A5F5C); }


/* ═══════════════════════════════════════════════════════════════════════
   CARRINHO — 08/09/2026

   A caixa de totais caía SOB a tabela de produtos, no meio da página, com
   metade da largura vazia à esquerda. Layout padrão do WooCommerce, de
   quando carrinho era uma tabela numa página inteira.

   Agora é grade: produtos à esquerda, totais à direita, colados no topo. O
   olho vai de "o que eu escolhi" para "quanto dá" sem descer a página.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 20px;
		align-items: start;
	}
	/* Aviso e mensagens atravessam as duas colunas: são da página, não do
	   carrinho nem dos totais. */
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		width: 100%;
		margin: 0;
		/* Acompanha a rolagem: em carrinho comprido, o total some da tela e a
		   pessoa perde a referência de quanto já juntou. */
		position: sticky;
		top: 16px;
	}
	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
}

/* A régua do pedido mínimo MUDOU-SE para o style.css do tema (08/09/2026).
   Motivo: este arquivo só é carregado no carrinho e na finalização, e a régua
   também aparece na gaveta do celular, que existe em TODAS as páginas. O
   resultado era a barra sem altura e o texto sem estilo — visível, mas errado,
   e sem nenhum erro no console para denunciar. */

/* ── O botão apagado ──────────────────────────────────────────────────────
   Fica no lugar de sempre, com o mesmo tamanho: o que muda é só a cor e o
   fato de não responder. Botão que some faz a pessoa procurar; botão apagado
   diz "ainda não" e continua sendo a referência. */
.checkout-button.pf-botao-apagado {
	background: #E3EAE9 !important;
	border-color: #D3DEDC !important;
	color: #8A9A98 !important;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none !important;
}

/* A tabela de totais nascia com 131px e `table-layout: fixed`, o que quebrava
   "Subtotal" em quatro linhas de uma letra. Ela precisa ocupar a coluna toda,
   e a coluna do rótulo tem largura própria para o valor não empurrar o texto. */
.woocommerce-cart .cart_totals table {
	width: 100%;
	table-layout: auto;
	margin: 0;
}
.woocommerce-cart .cart_totals table th {
	width: 40%;
	white-space: nowrap;
	font-weight: 600;
}
.woocommerce-cart .cart_totals table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════
   ⚠️ ESPECIFICIDADE IGUAL, ORDEM DE CARREGAMENTO DECIDE — E EU PERDIA.

   A caixa de totais ficava com 173px dentro de uma coluna de 360, e o texto
   quebrava letra a letra ("Su bt ot al"). A causa não era a tabela: era o
   `.cart_totals`, que o WooCommerce deixa em `width: 48%; float: right` —
   herança de quando o carrinho ocupava a página inteira e os totais eram meia
   coluna à direita.

   Minha regra dizia `width: 100%`, e mesmo assim perdia:

     minha:      .woocommerce-cart .cart-collaterals .cart_totals   (3 classes)
     WooCommerce: .woocommerce      .cart-collaterals .cart_totals   (3 classes)

   Mesma especificidade. No empate vence quem carrega DEPOIS, e o
   `woocommerce-layout-grid.min.css` entra depois do meu arquivo. O sintoma é
   traiçoeiro porque a regra APARECE no inspetor, sem risco nem aviso — ela só
   não ganha.

   A correção é uma classe a mais (4 contra 3), não `!important`: `!important`
   ganharia de tudo, inclusive do que eu quiser sobrescrever amanhã.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
	.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
		width: 100%;
		float: none;
		max-width: none;
		padding: 0 16px 16px;
	}
	.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table {
		width: 100%;
		table-layout: auto;
	}
	.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table th {
		width: 45%;
		white-space: nowrap;
	}
	.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table td {
		text-align: right;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}
}