/*
 * Página de produto.
 *
 * Estrutura conferida contra o DOM renderizado da referência
 * (baseline/referencia/produto-dom.html): três colunas no desktop —
 * galeria com miniaturas em pé na lateral e selos embaixo, resumo no meio
 * (avaliação, título, % OFF, código, descrição recortada) e caixa de compra à
 * direita (nome, preço, parcelamento, comprar, estoque, fretes e prazos).
 * Abaixo vêm as abas do WooCommerce e a prateleira de relacionados.
 *
 * Cor, espaço, raio, sombra e tamanho de fonte só saem de tokens.css.
 * Cartão, botões e utilitários vêm de base.css — aqui só o que é da página.
 */

/* ---------------------------------------------------------------- página --- */

.cdm-pagina-produto {
	padding-block: var(--cdm-e-5) var(--cdm-e-12);
}

/* Migalhas: o callback padrão do Woo sai do hook em inc/woocommerce.php, então
   single-product.php chama woocommerce_breadcrumb() com esta marcação. */
/*
 * As migalhas ocupam no máximo duas linhas. O caminho de categorias é curto;
 * quem estoura é o nome do produto, no fim da trilha — ele é texto simples,
 * não link, então o corte com reticências não esconde nada clicável.
 * -webkit-line-clamp é o que corta por LINHA (e não por caractere) e ainda
 * põe o "…"; sem prefixo nenhum navegador aplica, mesmo os que não são
 * Chromium.
 */
.cdm-migalhas {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--cdm-azul-marca);
	display: -webkit-box;
	font-size: var(--cdm-t-xs);
	line-clamp: 2;
	margin-block-end: var(--cdm-e-5);
	overflow: hidden;
}

/* O último item é o nome do produto: fica apagado e sem link. */
.cdm-migalhas__item:last-child {
	color: var(--cdm-texto-apagado);
}

.cdm-migalhas a {
	color: var(--cdm-azul-marca);
	text-decoration: none;
}

.cdm-migalhas a:hover,
.cdm-migalhas a:focus-visible {
	color: var(--cdm-link);
	text-decoration: underline;
}

/* O separador acompanha a cor da trilha, e não o cinza do nome do produto:
   por isso a cor vai fixa aqui, e não como currentColor — o ::before do
   último item herdaria o tom apagado dele. */
.cdm-migalhas__item + .cdm-migalhas__item::before {
	color: var(--cdm-azul-marca);
	content: "›";
	margin-inline: var(--cdm-e-2);
}

/*
 * Topo da página: intro (marca, título, SKU), galeria, opções e caixa de
 * compra.
 *
 * No telefone é uma coluna corrida, sem moldura: o cartão branco sobre fundo
 * branco só acrescentava um recuo a mais: com o respiro do container e o do
 * cartão o conteúdo começava a 33px da borda da tela, contra 12px da
 * referência. A ordem também muda — o nome do produto vem antes da foto, que
 * é como a referência resolve o telefone.
 */
.cdm-produto__topo {
	display: grid;
	/* 24px é o vão de seção do telefone: intro, galeria, opções e caixa de
	   compra ficam à mesma distância uma da outra. */
	gap: var(--cdm-e-6);
}

.cdm-produto__intro {
	order: 1;
}

.cdm-galeria {
	order: 2;
}

.cdm-resumo {
	order: 3;
}

.cdm-comprar {
	order: 4;
}

/* A moldura do cartão só a partir do tablet, junto com as duas colunas. */
@media (min-width: 640px) {
	.cdm-produto__topo {
		background: var(--cdm-superficie);
		border: 1px solid var(--cdm-cinza-200);
		border-radius: var(--cdm-raio-lg);
		box-shadow: var(--cdm-sombra-sm);
	}
}

/*
 * Duas colunas já no tablet. Enquanto isso só acontecia a partir de 900px, a
 * galeria ocupava a largura inteira em telas de 640–900 e ficava enorme,
 * empurrando título, opções e preço para bem abaixo da dobra.
 */
/*
 * Do tablet para cima a intro volta para o alto da coluna do texto, ao lado
 * da galeria — daí ela e o resumo dividirem a mesma coluna em duas linhas.
 */
@media (min-width: 640px) {
	.cdm-produto__topo {
		align-items: start;
		gap: var(--cdm-e-4) var(--cdm-e-6);
		grid-template-columns: 5fr 7fr;
		/*
		 * A galeria ocupa as duas linhas. Sem dizer o tamanho delas, o grid
		 * divide a altura sobrando igualmente entre as duas, e a linha do
		 * título ficava alta demais: nascia um vão morto entre o SKU e a
		 * primeira opção, tanto maior quanto menos opções o produto tivesse.
		 * "auto 1fr" dá ao título só o que ele ocupa e deixa a sobra para a
		 * linha de baixo — serve para produto sem variação nenhuma e para os
		 * de cinco.
		 */
		grid-template-rows: auto 1fr;
		padding: var(--cdm-e-5);
	}

	.cdm-galeria {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.cdm-produto__intro {
		grid-column: 2;
		grid-row: 1;
	}

	.cdm-resumo {
		grid-column: 2;
		grid-row: 2;
	}

	.cdm-comprar {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

@media (min-width: 1200px) {
	.cdm-produto__topo {
		/* Proporções do layout: galeria 40%, resumo 31%, caixa 27%. */
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) minmax(360px, 1fr);
		grid-template-rows: auto 1fr;
	}

	.cdm-galeria {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.cdm-produto__intro {
		grid-column: 2;
		grid-row: 1;
	}

	.cdm-resumo {
		grid-column: 2;
		grid-row: 2;
	}

	.cdm-comprar {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

/* ------------------------------------------- correções sobre o CSS do Woo --- */

/*
 * woocommerce-layout.css (carregado depois desta folha) flutua div.images e
 * div.summary em 48% para temas sem layout próprio. Aqui quem posiciona as
 * colunas é o grid de .cdm-produto__topo, então as duas voltam à largura
 * inteira da coluna. Sem isto a galeria e a caixa de compra saem espremidas —
 * e o flexslider, que mede o container na inicialização, congela a imagem
 * principal com 1px de largura.
 */
.woocommerce div.product .cdm-galeria div.images,
.woocommerce div.product div.summary.cdm-comprar {
	float: none;
	margin: 0;
	width: 100%;
}

.cdm-galeria .flex-viewport {
	width: 100%;
}

/*
 * woocommerce.css põe cada miniatura em width:25% com float, pensando numa
 * fileira de quatro. Aqui quem dá a largura é o grid da tira (cinco por
 * vez), então a regra do core precisa sair da frente.
 */
.woocommerce div.product .cdm-galeria div.images .flex-control-thumbs li {
	clear: none;
	float: none;
	width: auto;
}

/* --------------------------------------------------------------- galeria --- */

.cdm-galeria {
	align-self: start;
	position: relative;
}

/* Dentro do cartão branco do topo a galeria não tem moldura própria. */
.cdm-galeria .woocommerce-product-gallery {
	position: relative;
}

/*
 * No telefone a foto tomava a largura inteira e empurrava as opções para
 * fora da tela; 78% deixa a peça grande o bastante e devolve altura útil.
 *
 * A medida vai só na .flex-viewport, a janela por onde se vê um slide de
 * cada vez. O .woocommerce-product-gallery__wrapper ao lado é o trilho: o
 * FlexSlider escreve nele "width: 1600%" para enfileirar as fotos, e limitar
 * essa largura empilhava todas no mesmo ponto — a primeira aparecia e as
 * demais ficavam em branco ao serem escolhidas.
 */
.cdm-galeria .flex-viewport {
	margin-inline: auto;
	max-width: 78%;
}

@media (min-width: 640px) {
	.cdm-galeria .flex-viewport {
		max-width: 100%;
	}
}

.cdm-galeria .woocommerce-product-gallery__wrapper {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdm-galeria .woocommerce-product-gallery__wrapper figure,
.cdm-galeria .woocommerce-product-gallery__image {
	margin: 0;
}

/*
 * Toda foto da galeria vive numa moldura quadrada. A imagem não é esticada
 * nem cortada para preencher: fica no tamanho dela, centrada, e a moldura
 * completa o que falta com o fundo — é o que mantém a fileira alinhada mesmo
 * com fotos de proporções diferentes (o catálogo tem retrato, paisagem e
 * quadrado misturados).
 */
.cdm-galeria .woocommerce-product-gallery__image,
.cdm-galeria .woocommerce-product-gallery__wrapper > div,
.cdm-galeria .flex-control-thumbs li {
	aspect-ratio: 1;
}

/*
 * O core envolve a foto num <a> (é ele que abre o lightbox). Sem altura
 * própria ele encolhe até a imagem, e aí o "height: 100%" dela passa a medir
 * a caixa do link, não a moldura quadrada: uma foto deitada ficava colada no
 * topo em vez de centrada.
 */
.cdm-galeria .woocommerce-product-gallery__image > a {
	display: grid;
	height: 100%;
	place-items: center;
}

/* O seletor repete o caminho do core porque woocommerce.css traz
   ".woocommerce img { height: auto }": sem isso a foto não ocupa a altura da
   moldura e uma imagem deitada encosta no topo em vez de ficar centrada. */
.woocommerce div.product .cdm-galeria .woocommerce-product-gallery img {
	display: block;
	height: 100%;
	margin-inline: auto;
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}

/* Lupa do zoom do WooCommerce: fica sobre a imagem, no canto. */
.cdm-galeria .woocommerce-product-gallery__trigger {
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-cheio);
	color: var(--cdm-azul);
	display: grid;
	inset-block-start: var(--cdm-e-3);
	inset-inline-end: var(--cdm-e-3);
	line-height: var(--cdm-altura-apertada);
	padding: var(--cdm-e-2);
	place-items: center;
	position: absolute;
	text-decoration: none;
	z-index: 1;
}

/* Selo de promoção do core, posicionado sobre a galeria. */
.cdm-galeria .onsale {
	background: var(--cdm-amarelo);
	border-radius: var(--cdm-raio-cheio);
	color: var(--cdm-azul-escuro);
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-forte);
	inset-block-start: var(--cdm-e-3);
	inset-inline-start: var(--cdm-e-3);
	margin: 0;
	padding: var(--cdm-e-1) var(--cdm-e-3);
	position: absolute;
	z-index: 1;
}

/*
 * Miniaturas deitadas sob a foto principal, cinco por vez: cada uma ocupa um
 * quinto da largura descontados os quatro vãos, e o que passa disso fica na
 * rolagem lateral. Vale em qualquer tela — no telefone e no desktop a tira é
 * a mesma, só muda a largura disponível.
 */
.cdm-galeria .flex-control-thumbs {
	display: grid;
	gap: var(--cdm-e-2);
	grid-auto-columns: calc((100% - 4 * var(--cdm-e-2)) / 5);
	grid-auto-flow: column;
	list-style: none;
	margin: var(--cdm-e-3) 0 0;
	overflow-x: auto;
	padding: 0;
	scrollbar-width: none;
}

.cdm-galeria .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

/* A largura de cada miniatura vem do grid-auto-columns acima. */

.cdm-galeria .flex-control-thumbs img {
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	cursor: pointer;
	opacity: .85;
	padding: var(--cdm-e-1);
	transition: opacity var(--cdm-transicao), border-color var(--cdm-transicao);
	width: 100%;
}

.cdm-galeria .flex-control-thumbs img:hover,
.cdm-galeria .flex-control-thumbs img.flex-active {
	border-color: var(--cdm-azul);
	opacity: 1;
}

/* Contrato de imagem: viewport principal e cada miniatura nunca escapam da
   moldura quadrada, mesmo quando o FlexSlider injeta altura inline. A
   largura no telefone (78%) é definida mais acima e continua valendo. */
.cdm-galeria .flex-viewport {
	aspect-ratio: 1 / 1;
	height: auto !important;
	margin-inline: auto;
	max-width: min(78%, 420px);
	overflow: hidden;
}

@media (min-width: 640px) {
	.cdm-galeria .flex-viewport {
		max-width: min(100%, 420px);
	}
}

.cdm-galeria .flex-viewport .woocommerce-product-gallery__image,
.cdm-galeria .flex-viewport .woocommerce-product-gallery__image > a {
	height: 100% !important;
}

.cdm-galeria .flex-control-thumbs img {
	display: block;
	box-sizing: border-box;
	height: 100%;
	object-fit: contain;
}

/* A tira acompanha a largura da foto e mostra as cinco primeiras; da sexta
   em diante chega pela rolagem, em vez de sumir. */
@media (max-width: 639px) {
	.cdm-galeria .flex-control-thumbs {
		margin-inline: auto;
		width: min(100%, 420px);
	}
}

/* Setas anterior/próxima do flexslider (ligadas em inc/produto-assets.php).
   O texto "Anterior"/"Próxima" fica para leitor de tela; visualmente vira
   chevron. */
.cdm-galeria .flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdm-galeria .flex-direction-nav a {
	align-items: center;
	color: var(--cdm-texto-fraco);
	display: flex;
	font-size: 0;
	height: var(--cdm-e-10);
	inset-block-start: 50%;
	justify-content: center;
	position: absolute;
	text-decoration: none;
	transform: translateY(-50%);
	width: var(--cdm-e-10);
	z-index: 2;
}

.cdm-galeria .flex-direction-nav a::before {
	font-size: var(--cdm-t-2xl);
	line-height: var(--cdm-altura-apertada);
}

.cdm-galeria .flex-direction-nav .flex-prev {
	inset-inline-start: 0;
}

.cdm-galeria .flex-direction-nav .flex-prev::before {
	content: "\2039";
}

.cdm-galeria .flex-direction-nav .flex-next {
	inset-inline-end: 0;
}

.cdm-galeria .flex-direction-nav .flex-next::before {
	content: "\203A";
}

.cdm-galeria .flex-direction-nav a:hover::before,
.cdm-galeria .flex-direction-nav a:focus-visible::before {
	color: var(--cdm-azul);
}

/* ---------------------------------------------------------------- resumo --- */

.cdm-resumo__nota {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-2);
	margin-block-end: var(--cdm-e-2);
}

.cdm-resumo__nota .star-rating {
	color: var(--cdm-amarelo);
}

.cdm-resumo__nota-link {
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-xs);
	text-decoration: none;
}

.cdm-resumo__nota-link:hover,
.cdm-resumo__nota-link:focus-visible {
	color: var(--cdm-link);
	text-decoration: underline;
}

.cdm-resumo__nota-total {
	color: var(--cdm-texto-fraco);
	font-weight: var(--cdm-peso-semi);
}

/* Nome da marca acima do título, em caixa alta, como o "VENOSAN®". */
.cdm-resumo__marca {
	margin: 0 0 var(--cdm-e-2);
}

.cdm-resumo__marca a {
	color: var(--cdm-azul);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-forte);
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}

.cdm-resumo__marca a:hover,
.cdm-resumo__marca a:focus-visible {
	text-decoration: underline;
}

.cdm-resumo__titulo {
	color: var(--cdm-azul-marca);
	font-family: var(--cdm-fonte-titulo);
	font-size: var(--cdm-t-2xl);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	margin: 0 0 var(--cdm-e-2);
}

/* Linha "Marca: Venosan | SKU: 10942". */
.cdm-resumo__referencia {
	align-items: center;
	color: var(--cdm-texto-fraco);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--cdm-t-sm);
	gap: var(--cdm-e-2) var(--cdm-e-3);
	margin: 0;
}

.cdm-resumo__referencia-item strong {
	color: var(--cdm-texto);
	font-weight: var(--cdm-peso-semi);
}

.cdm-resumo__referencia-item a {
	color: var(--cdm-texto-fraco);
	text-decoration: none;
}

.cdm-resumo__referencia-item a:hover,
.cdm-resumo__referencia-item a:focus-visible {
	color: var(--cdm-link);
	text-decoration: underline;
}

.cdm-resumo__referencia-item + .cdm-resumo__referencia-item::before {
	color: var(--cdm-cinza-300);
	content: "|";
	margin-inline-end: var(--cdm-e-3);
}

@media (min-width: 900px) {
	.cdm-resumo__titulo {
		font-size: var(--cdm-t-2xl);
	}
}

.cdm-resumo__desconto {
	background: var(--cdm-verde);
	border-radius: var(--cdm-raio-sm);
	color: var(--cdm-branco);
	display: inline-block;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-forte);
	margin: 0 0 var(--cdm-e-3);
	padding: var(--cdm-e-1) var(--cdm-e-2);
}

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

.cdm-resumo__meta {
	border-block-start: 1px solid var(--cdm-borda);
	color: var(--cdm-texto-apagado);
	display: flex;
	flex-direction: column;
	font-size: var(--cdm-t-xs);
	gap: var(--cdm-e-1);
	padding-block-start: var(--cdm-e-3);
}

.cdm-resumo__meta a {
	color: var(--cdm-texto-fraco);
	text-decoration: none;
}

.cdm-resumo__meta a:hover,
.cdm-resumo__meta a:focus-visible {
	color: var(--cdm-link);
	text-decoration: underline;
}

/* ------------------------------------------------------- caixa de compra --- */

/* O fundo, a borda e o raio vêm de .cdm-cartao (base.css). */
/*
 * No telefone a caixa de compra fica empilhada DENTRO do cartão branco do
 * topo: dar a ela moldura e recuo próprios criava cartão dentro de cartão e
 * comia largura útil. A moldura entra a partir de 640px, quando ela começa a
 * se destacar do resto como bloco à parte.
 */
.cdm-comprar {
	/* zera a moldura que vem de .cdm-cartao (base.css) */
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-5);
}

@media (min-width: 640px) {
	.cdm-comprar {
		border: 1px solid var(--cdm-cinza-200);
		box-shadow: var(--cdm-sombra-sm);
		padding: var(--cdm-e-5);
	}
}

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

.cdm-comprar .price {
	color: var(--cdm-azul);
	display: block;
	font-size: var(--cdm-t-2xl);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	margin: 0;
}

.cdm-comprar .price del {
	color: var(--cdm-texto-apagado);
	display: block;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	text-decoration: line-through;
}

.cdm-comprar .price ins {
	background: none;
	color: var(--cdm-azul);
	text-decoration: none;
}

.cdm-comprar .woocommerce-price-suffix {
	color: var(--cdm-texto-apagado);
	display: block;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-normal);
}

/*
 * O wc-simulador-parcelas injeta "no pix" e "Em até Nx de … sem juros" DENTRO
 * do .price. Sem isto os dois herdam o corpo 28 em negrito do preço e a caixa
 * fica ilegível: aqui eles voltam ao tamanho de texto de apoio.
 */
/* Preço, "no pix", pílula e parcelamento formam um bloco só: por dentro
   andam juntos, e é o gap da caixa que os separa do resto. */
.cdm-comprar .price .wcsp-container {
	display: flex;
	flex-direction: column;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	gap: var(--cdm-e-1);
}

/* "A partir de" numa linha própria, apagada, acima do preço grande. */
.cdm-comprar .price .wcsp-container .price-from {
	color: var(--cdm-azul-marca);
	display: block;
	font-size: var(--cdm-t-base);
	margin-block-end: 0;
}

/* Linha do pix: preço grande azul + "no pix" + pílula de desconto,
   alinhados pela base. */
.cdm-comprar .price .wcsp-container .payment-discount .payment-info {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-2);
}

.cdm-comprar .price .wcsp-container .payment-discount .payment-info .price-from {
	flex: 1 1 100%;
	margin: 0;
}

/*
 * O preço à vista do pix é o número principal da caixa.
 *
 * !important nos dois: o wc-simulador-parcelas injeta inline
 * "* { --wcsp-incash-price-color: … !important; --wcsp-incash-price-font-size:
 * …px !important }" e pinta/dimensiona o .amount com essas variáveis. Sem
 * !important aqui, cor e corpo do tema nunca vencem.
 */
.cdm-comprar .price .wcsp-container .payment-discount .payment-price {
	color: var(--cdm-azul-marca);
	font-size: var(--cdm-t-2xl);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
}

.cdm-comprar .price .wcsp-container .payment.payment-discount .payment-price .amount {
	color: var(--cdm-azul-marca) !important;
	font-size: var(--cdm-t-2xl) !important;
}

/* No desktop a caixa é mais estreita que a tela e comporta o corpo maior. */
@media (min-width: 900px) {
	.cdm-comprar .price .wcsp-container .payment-discount .payment-price {
		font-size: var(--cdm-t-3xl);
	}

	.cdm-comprar .price .wcsp-container .payment.payment-discount .payment-price .amount {
		font-size: var(--cdm-t-3xl) !important;
	}
}

.cdm-comprar .price .wcsp-container .payment-discount .payment-name {
	color: var(--cdm-texto-fraco);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
}

/* Pílula "N% off" (calculada em produto.js a partir dos preços do plugin). */
.cdm-comprar__off {
	background: var(--cdm-verde-suave);
	border-radius: var(--cdm-raio-cheio);
	color: var(--cdm-verde-escuro);
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	padding: var(--cdm-e-1) var(--cdm-e-3);
}

/* Linha "ou em até 1x de R$ … sem juros": continuação do preço, então anda
   colada nele em vez de flutuar como frase à parte. */
.cdm-comprar .price .wcsp-container .payment-card {
	margin-block-start: calc( var(--cdm-e-1) * -1 );
}

.cdm-comprar .price .wcsp-container .payment-card .payment-name {
	color: var(--cdm-texto);
	font-size: var(--cdm-t-md);
}

.cdm-comprar .price .wcsp-container .payment-card .payment-name .number,
.cdm-comprar .price .wcsp-container .payment-card .payment-name [data-wcsp-best-no-fee-price] {
	color: var(--cdm-azul-marca);
	font-weight: var(--cdm-peso-forte);
}

/*
 * O plugin pinta o valor da parcela pela variável dele, injetada inline com
 * !important (mesma história do preço à vista logo acima). O símbolo "R$" sai
 * num span próprio dentro do valor, por isso ele entra no seletor: sem isso
 * fica preto enquanto o número já está azul.
 */
.cdm-comprar .price .wcsp-container .payment-card .payment-name [data-wcsp-best-no-fee-price] .amount,
.cdm-comprar .price .wcsp-container .payment-card .payment-name [data-wcsp-best-no-fee-price] .amount bdi,
.cdm-comprar .price .wcsp-container .payment-card .payment-name [data-wcsp-best-no-fee-price] .woocommerce-Price-currencySymbol {
	color: var(--cdm-azul-marca) !important;
}

/*
 * O "x" de "1x" é um nó de texto solto entre dois spans do plugin — CSS não
 * alcança nó de texto. produto.js o envolve neste span para que ele acompanhe
 * a cor do número.
 */
.cdm-comprar__unidade {
	color: var(--cdm-azul-marca);
	font-weight: var(--cdm-peso-forte);
}

/*
 * Disponibilidade na caixa de compra.
 *
 * O texto vem do WooCommerce ("28 em estoque") e antes saía verde-berrante,
 * competindo com o botão — o verde aqui é da ação de comprar, não de um
 * aviso. Fica então em corpo pequeno e tom de apoio, com um ponto verde
 * fazendo o papel do sinal de disponível: a informação continua legível de
 * relance sem disputar atenção com o preço.
 */
.cdm-comprar__disponibilidade[hidden] {
	display: none;
}

.woocommerce div.product .cdm-comprar__disponibilidade p.stock {
	align-items: center;
	color: var(--cdm-texto-fraco);
	display: flex;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
	gap: var(--cdm-e-2);
	margin: 0;
}

.woocommerce div.product .cdm-comprar__disponibilidade p.stock::before {
	background: var(--cdm-verde-comprar);
	border-radius: var(--cdm-raio-cheio);
	content: "";
	flex: none;
	height: var(--cdm-e-2);
	width: var(--cdm-e-2);
}

.woocommerce div.product .cdm-comprar__disponibilidade p.stock.out-of-stock,
.woocommerce div.product .cdm-comprar__disponibilidade p.stock.available-on-backorder {
	color: var(--cdm-vermelho);
}

.woocommerce div.product .cdm-comprar__disponibilidade p.stock.out-of-stock::before,
.woocommerce div.product .cdm-comprar__disponibilidade p.stock.available-on-backorder::before {
	background: var(--cdm-vermelho);
}

/* O aviso que o WooCommerce imprime junto do formulário sai de cena: ele
   agora vive na caixa, num lugar só para simples e variável. */
.woocommerce div.product .cdm-resumo form.cart p.stock {
	display: none;
}

/* Aviso de estoque nativo do WooCommerce (p.stock), quando ele aparece. */
.cdm-comprar p.stock {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	margin: 0;
}

.cdm-comprar p.stock.in-stock {
	color: var(--cdm-verde-escuro);
}

.cdm-comprar p.stock.out-of-stock,
.cdm-comprar p.stock.available-on-backorder {
	color: var(--cdm-vermelho);
}

/* Linha de parcelamento colada no preço (cdm_produto_parcelamento, prio. 15). */
.cdm-comprar__parcelas {
	color: var(--cdm-texto-fraco);
	font-size: var(--cdm-t-sm);
	margin: 0;
}

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

/*
 * O wc-simulador-parcelas oferece um "Mais formas de pagamento" que abre a
 * lista inteira de parcelas (1x, 2x, 3x…). A caixa de compra já mostra o
 * preço no pix e a melhor parcela sem juros; a lista completa repetia a
 * informação e alongava o bloco, então o link e a tabela ficam de fora.
 * O HTML continua sendo emitido pelo plugin — some só a exibição.
 */
.cdm-comprar .wcsp-installments-table,
.cdm-comprar .wcsp-container .payment .wcsp-toggle-all-installments,
.cdm-comprar .wcsp-toggle-all-installments,
.cdm-comprar .wcsp-installments,
.cdm-comprar .wcsp-table {
	display: none;
}

/* ------------------- formulário de compra (coluna do meio, passos 1–N) --- */

/*
 * O formulário inteiro é impresso pelo resumo (coluna do meio). A tabela de
 * variações vira a lista de passos numerados; a quantidade e o botão nativos
 * ficam escondidos — a caixa lateral tem os próprios, ligados ao formulário
 * pelo atributo form="cdm-form-carrinho".
 */
/* O seletor acompanha o do core: woocommerce.css traz
   ".woocommerce div.product form.cart { margin-bottom: 2em }", que sobrava
   como 28px extras entre as opções e o bloco de preço. */
.woocommerce div.product .cdm-resumo form.cart {
	/* Quem separa o formulário dos blocos vizinhos é o vão do grid do topo;
	   uma margem própria aqui se somaria a ele. */
	margin: 0;
}

/*
 * !important: add-to-cart-variation.js do WooCommerce dá .show() nesses
 * blocos ao achar a variação, e .show() escreve style="display:block" inline
 * — só !important vence estilo inline. Sem isso o preço, o estoque, a
 * quantidade e o botão nativos reapareciam embaixo dos passos, duplicando o
 * que a caixa de compra já mostra. Os campos seguem no DOM (display:none não
 * impede envio), então variation_id e product_id continuam indo no POST.
 */
.cdm-resumo form.cart .single_variation_wrap,
.cdm-resumo form.cart .quantity,
.cdm-resumo form.cart .single_add_to_cart_button {
	display: none !important;
}

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

.cdm-resumo .variations tbody {
	counter-reset: cdm-passo;
}

.cdm-resumo .variations tr {
	counter-increment: cdm-passo;
	display: block;
}

.cdm-resumo .variations tr + tr {
	border-block-start: 1px solid var(--cdm-cinza-200);
}

.cdm-resumo .variations th,
.cdm-resumo .variations td {
	display: block;
	padding: 0;
	text-align: start;
}

/*
 * Cabeçalho de cada grupo: o nome do atributo e a escolha correm juntos na
 * mesma frase ("Compressão  Alta (30-40mmHg)"), presos pela LINHA DE BASE.
 * Com "center" os dois alinhavam pelo meio da caixa e, como têm pesos
 * diferentes, sobrava um degrau de alguns pixels entre eles.
 */
.cdm-resumo .variations th.label {
	align-items: baseline;
	color: var(--cdm-texto);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	gap: var(--cdm-e-2);
	padding-block: var(--cdm-e-3) var(--cdm-e-2);
}

/*
 * O número do passo: círculo azul-marinho com o contador. Só aparece com a
 * classe --numerado, que resumo.php aplica nas meias de compressão (cinco
 * atributos encadeados, onde a ordem ajuda). Nos outros produtos o rótulo
 * fica limpo.
 */
.cdm-resumo--numerado .variations th.label label::before {
	align-items: center;
	background: var(--cdm-azul);
	border-radius: var(--cdm-raio-cheio);
	color: var(--cdm-branco);
	content: counter(cdm-passo);
	display: inline-flex;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-forte);
	height: var(--cdm-e-6);
	justify-content: center;
	margin-inline-end: var(--cdm-e-2);
	width: var(--cdm-e-6);
}

.cdm-resumo .variations th.label label {
	align-items: center;
	display: inline-flex;
}

/* Valor escolhido que produto.js escreve ao lado do rótulo. */
.cdm-resumo .variations .cdm-variacoes__selecionada {
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-normal);
}

.cdm-resumo .variations td.value {
	padding-block-end: var(--cdm-e-4);
}

/* A última opção não precisa do recuo de baixo: quem separa o formulário do
   bloco seguinte é o espaçamento do topo, e somados davam um vão maior que o
   das outras seções. */
.cdm-resumo .variations tr:last-child td.value {
	padding-block-end: 0;
}

/* Fallback sem JavaScript: select nativo continua comprável e acessível. */
.cdm-resumo .variations select {
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	color: var(--cdm-texto);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	width: 100%;
}

.cdm-resumo .variations .reset_variations {
	color: var(--cdm-texto-apagado);
	display: inline-block;
	font-size: var(--cdm-t-xs);
	margin-block-start: var(--cdm-e-2);
}

/* Botoes gerados do select nativo: tema controla visual e estado. */
/* Cada opção ocupa a largura do próprio texto e as que não couberem descem
   para a linha seguinte. */
.cdm-resumo .cdm-variacoes {
	display: none;
	flex-wrap: wrap;
	gap: var(--cdm-e-2);
	margin: 0;
	padding: 0;
}

/* O JS marca a lista como pronta depois de montar os botões a partir do
   <select>; até lá ela fica fora da vista. */
.cdm-resumo .cdm-variacoes--pronta {
	display: flex;
}

.cdm-resumo .cdm-variacoes__botao {
	align-items: center;
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	color: var(--cdm-texto);
	cursor: pointer;
	display: flex;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	justify-content: center;
	line-height: var(--cdm-altura-apertada);
	margin: 0;
	padding: var(--cdm-e-2) var(--cdm-e-3);
	text-align: center;
	transition: border-color var(--cdm-transicao), background-color var(--cdm-transicao), color var(--cdm-transicao);
	white-space: nowrap;
	width: auto;
}

.cdm-resumo .cdm-variacoes__botao:hover:not(:disabled),
.cdm-resumo .cdm-variacoes__botao:focus-visible {
	border-color: var(--cdm-azul);
	color: var(--cdm-azul);
	outline: 2px solid var(--cdm-azul);
	outline-offset: 2px;
}

.cdm-resumo .cdm-variacoes__botao[aria-pressed="true"] {
	background: var(--cdm-azul-claro);
	border-color: var(--cdm-azul);
	box-shadow: 0 0 0 1px var(--cdm-azul);
	color: var(--cdm-azul);
	font-weight: var(--cdm-peso-semi);
}

.cdm-resumo .cdm-variacoes__botao:disabled {
	cursor: not-allowed;
	opacity: .35;
	text-decoration: line-through;
}

/*
 * O <select> continua no DOM para o teclado e o leitor de tela; some da
 * vista pela técnica de recorte. As medidas vão também em width/height
 * físicos: a regra que estica os selects da coluna usa "width", e entre
 * width e inline-size vale a última declarada — sem o par físico aqui, o
 * select ocupava a largura toda e empurrava a página para o lado.
 */
.woocommerce div.product .cdm-resumo .variations select.cdm-variacoes__select--oculto {
	position: absolute;
	/* woocommerce.css impõe "min-width: 75%" a todo select de variação; sem
	   zerar isso o campo recortado continua com mil pixels de largura e
	   estende a página para o lado. */
	min-width: 0;
	width: 1px;
	height: 1px;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Meta (categorias, GTIN…) fica no DOM pelos hooks, mas fora do layout. */
.cdm-resumo__meta--oculto {
	display: none;
}

/* ------------------------------------------- ações da caixa de compra --- */

/*
 * Na caixa de compra o preço aparece UMA vez: o bloco do wc-simulador-parcelas
 * ("… no pix" + parcelamento), que o plugin injeta dentro do próprio .price.
 * O valor cru que o WooCommerce imprime ao lado dele é escondido por esta
 * classe — a faixa "R$ min – R$ max" pelo PHP (cdm_produto_embrulhar_faixa) e
 * o preço da variação escolhida pelo JS, que recebe HTML novo a cada troca.
 * Sem o plugin de parcelas nada recebe a classe e o valor cru fica visível.
 */
.cdm-comprar .price .cdm-comprar__preco-bruto {
	display: none;
}

/*
 * Mesma regra para o produto simples, onde não há filtro de faixa nem troca
 * de HTML por variação: o WooCommerce imprime o valor cru e o plugin de
 * parcelas acrescenta o bloco "… no pix / ou em até Nx" com o MESMO número.
 * Escondemos o valor solto sempre que o bloco do plugin estiver presente —
 * sem o plugin, nada casa com :has() e o preço aparece normalmente.
 */
.cdm-comprar .price:has(.wcsp-container) > .woocommerce-Price-amount,
.cdm-comprar .price:has(.wcsp-container) > bdi,
.cdm-comprar .price:has(.wcsp-container) > del,
.cdm-comprar .price:has(.wcsp-container) > ins,
.cdm-comprar .price:has(.wcsp-container) > .screen-reader-text {
	display: none;
}

/* Stepper de quantidade + botão verde, lado a lado na mesma linha. */
.cdm-comprar__acoes {
	align-items: stretch;
	display: flex;
	gap: var(--cdm-e-2);
}

.cdm-comprar__qtd {
	align-items: center;
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	display: flex;
	flex: none;
	height: var(--cdm-altura-controle);
}

.cdm-comprar__qtd-botao {
	align-items: center;
	background: none;
	border: 0;
	color: var(--cdm-texto-fraco);
	cursor: pointer;
	display: flex;
	font-size: var(--cdm-t-xs);
	height: 100%;
	justify-content: center;
	padding: 0;
	width: var(--cdm-e-8);
}

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

/*
 * O seletor leva o elemento junto da classe: base.css estiliza
 * input[type="number"] (especificidade 0-1-1) com borda e padding próprios,
 * e uma classe sozinha (0-1-0) perde. Sem isto o campo herda padding de
 * 12px/16px, sobra zero de área útil e o número some.
 */
.cdm-comprar__qtd input.cdm-comprar__qtd-campo {
	appearance: textfield;
	background: none;
	border: 0;
	color: var(--cdm-texto);
	flex: none;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	height: 100%;
	max-width: var(--cdm-e-10);
	padding: 0;
	text-align: center;
	width: var(--cdm-e-10);
}

.cdm-comprar__qtd-campo::-webkit-outer-spin-button,
.cdm-comprar__qtd-campo::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Verde próprio da página (definido pelo cliente), sobrepondo o de
   .cdm-btn--comprar (base.css). Mesma altura do stepper e do WhatsApp. */
.cdm-comprar__botao {
	background-color: var(--cdm-verde-comprar);
	border-color: var(--cdm-verde-comprar);
	flex: 1 1 auto;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	height: var(--cdm-altura-controle);
	min-width: 0;
	padding-block: 0;
	padding-inline: var(--cdm-e-3);
	white-space: nowrap;
}

/*
 * Estados passageiros da adição ao carrinho. O botão nunca muda de tamanho
 * nem some: só troca o texto e, no sucesso, escurece um tom para confirmar
 * que algo aconteceu — sem recarregar a página.
 */
.cdm-comprar__botao--enviando {
	cursor: progress;
	opacity: .85;
}

.cdm-comprar__botao--ok {
	background-color: var(--cdm-verde-comprar-fundo);
	border-color: var(--cdm-verde-comprar-fundo);
}

.cdm-comprar__botao--erro {
	background-color: var(--cdm-vermelho);
	border-color: var(--cdm-vermelho);
}

/* O rótulo troca durante o envio: texto longo encurta em vez de esticar o
   botão para fora da caixa. */
.cdm-comprar__botao-texto {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Atributo que ficou sem escolha depois de uma tentativa de compra. O aviso
 * nasce ao lado do que precisa ser resolvido, e não numa faixa no topo da
 * página, longe do problema.
 *
 * O vermelho fica só no nome do atributo e no "Escolha uma opção": as opções
 * em si não estão erradas — nenhuma foi recusada —, então pintá-las de
 * vermelho acusaria o que ainda nem foi tocado.
 */
.cdm-resumo .variations tr.cdm-variacao--pendente th.label,
.cdm-resumo .variations tr.cdm-variacao--pendente th.label label,
.cdm-resumo .variations tr.cdm-variacao--pendente .cdm-variacoes__selecionada {
	color: var(--cdm-vermelho);
}

.cdm-comprar__botao:hover,
.cdm-comprar__botao:focus-visible {
	background-color: var(--cdm-verde-comprar-fundo);
	border-color: var(--cdm-verde-comprar-fundo);
}

/*
 * Aviso de limite de estoque. Segue a linguagem dos outros blocos da caixa
 * (fundo suave, texto curto) e não o vermelho de erro: a pessoa não errou —
 * ela já tem no carrinho tudo o que existe. Por isso o azul, e não o
 * vermelho, e por isso um caminho de saída junto ("Ver carrinho").
 */
.cdm-comprar__aviso {
	align-items: center;
	background: var(--cdm-azul-claro);
	border-radius: var(--cdm-raio);
	color: var(--cdm-azul-marca);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--cdm-t-sm);
	gap: var(--cdm-e-1) var(--cdm-e-3);
	line-height: var(--cdm-altura-normal);
	margin: 0;
	padding: var(--cdm-e-3) var(--cdm-e-4);
}

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

.cdm-comprar__aviso-texto {
	flex: 1 1 100%;
}

.cdm-comprar__aviso-acao {
	align-items: center;
	color: var(--cdm-azul-marca);
	display: inline-flex;
	font-weight: var(--cdm-peso-semi);
	gap: var(--cdm-e-2);
	text-decoration: underline;
}

/* O ícone acompanha o texto sem puxar a atenção: um corpo abaixo do rótulo e
   sem sublinhado. */
.cdm-comprar__aviso-acao .cdm-icone {
	font-size: var(--cdm-t-xs);
	text-decoration: none;
}

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

/* Botão "Comprar pelo WhatsApp": fantasma verde, como no layout. */
.cdm-comprar__whats {
	align-items: center;
	border: 1px solid var(--cdm-verde);
	border-radius: var(--cdm-raio);
	color: var(--cdm-verde-escuro);
	display: flex;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	gap: var(--cdm-e-2);
	height: var(--cdm-altura-controle);
	justify-content: center;
	padding-inline: var(--cdm-e-4);
	text-decoration: none;
	transition: background-color var(--cdm-transicao), color var(--cdm-transicao);
}

.cdm-comprar__whats:hover,
.cdm-comprar__whats:focus-visible {
	background: var(--cdm-verde);
	color: var(--cdm-branco);
}

/* Barra "Pagamento Cômodo e Seguro". */
/*
 * Selos de confiança: os cinco numa única linha, colunas de mesma largura.
 * Para caber sem os rótulos se tocarem, o corpo do texto é o menor da escala
 * e o ícone é pequeno — a leitura aqui é de relance, e o que passa segurança
 * é o conjunto, não cada selo isolado.
 */
.cdm-comprar__confianca {
	display: grid;
	gap: var(--cdm-e-1);
	grid-template-columns: repeat(5, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdm-comprar__confianca-item {
	align-items: center;
	color: var(--cdm-texto-fraco);
	display: flex;
	flex-direction: column;
	font-size: var(--cdm-t-2xs);
	gap: var(--cdm-e-2);
	justify-content: flex-end;
	line-height: var(--cdm-altura-apertada);
	min-width: 0;
	text-align: center;
}

/*
 * As imagens dos selos são as do site em produção; altura única padroniza.
 * Discretas de propósito: são apoio, não devem competir com preço e botão.
 *
 * O seletor repete o bloco e o elemento porque woocommerce.css carrega depois
 * desta folha com ".woocommerce img { height: auto }" — no empate de
 * especificidade ele venceria e os SVGs voltariam ao tamanho natural (59px).
 */
.cdm-comprar__confianca img.cdm-comprar__confianca-img {
	display: block;
	height: var(--cdm-e-6);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* Título do bloco de frete (o widget do plugin vem logo abaixo). */
.cdm-comprar__frete-titulo {
	border-block-start: 1px solid var(--cdm-cinza-200);
	color: var(--cdm-texto);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-semi);
	margin: 0;
	padding-block-start: var(--cdm-e-3);
}

.cdm-comprar__estoque {
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	margin: 0;
}

.cdm-comprar__estoque--em-estoque {
	color: var(--cdm-verde-escuro);
}

.cdm-comprar__estoque--sob-encomenda {
	color: var(--cdm-texto-fraco);
}

.cdm-comprar__estoque--esgotado {
	color: var(--cdm-vermelho);
}

/* A descrição já aparece na coluna do meio; se um plugin reimprimir dentro da
   caixa de compra, some. */
.cdm-comprar .woocommerce-product-details__short-description {
	display: none;
}

/* ----------------------------------------------------------------- frete --- */

.cdm-frete {
	border-block-start: 1px solid var(--cdm-borda);
	padding-block-start: var(--cdm-e-4);
}

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

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

.cdm-frete__rotulo {
	color: var(--cdm-azul);
	display: block;
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	margin-block-end: var(--cdm-e-1);
}

.cdm-frete__campo {
	display: flex;
	gap: var(--cdm-e-2);
}

.cdm-frete__entrada {
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	color: var(--cdm-texto);
	flex: 1 1 auto;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	min-width: 0;
	padding: var(--cdm-e-2) var(--cdm-e-3);
}

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

/* O visual do botão vem de .cdm-btn--primario (base.css); aqui só o encaixe. */
.cdm-frete__botao {
	flex: none;
}

.cdm-frete__ajuda {
	margin: var(--cdm-e-2) 0 0;
}

.cdm-frete__ajuda a {
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-xs);
	text-decoration: underline;
}

.cdm-frete__resultado {
	margin-block-start: var(--cdm-e-3);
}

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

.cdm-frete__aviso--erro {
	color: var(--cdm-vermelho);
}

.cdm-frete__lista {
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Três colunas, como no original: serviço | prazo | preço. */
.cdm-frete__opcao {
	align-items: baseline;
	column-gap: var(--cdm-e-3);
	display: grid;
	font-size: var(--cdm-t-sm);
	grid-template-columns: minmax(0, 1fr) auto;
	padding: var(--cdm-e-2) var(--cdm-e-3);
}

@media (min-width: 640px) {
	.cdm-frete__opcao {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}
}

.cdm-frete__opcao + .cdm-frete__opcao {
	border-block-start: 1px solid var(--cdm-borda);
}

.cdm-frete__opcao-nome {
	color: var(--cdm-texto);
	font-weight: var(--cdm-peso-medio);
}

.cdm-frete__opcao-prazo {
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-xs);
	grid-column: 1;
}

@media (min-width: 640px) {
	.cdm-frete__opcao-prazo {
		grid-column: auto;
		text-align: end;
	}
}

.cdm-frete__opcao-prazo:empty {
	display: none;
}

.cdm-frete__opcao-preco {
	color: var(--cdm-azul);
	font-weight: var(--cdm-peso-semi);
	grid-column: 2;
	grid-row: 1;
	text-align: end;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.cdm-frete__opcao-preco {
		grid-column: auto;
		grid-row: auto;
	}
}

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

/*
 * Widget do wc-simulador-frete, que inc/produto-assets.php move para dentro da
 * caixa de compra (prioridade 35 do hook do resumo). O plugin traz o próprio
 * CSS; aqui só encaixamos no cartão e alinhamos com o campo de CEP do tema.
 */
/* Sem borda nem recuo próprios: o título "Calcular frete e prazo" já traz a
   linha que separa este bloco do resto do cartão, e uma segunda risca entre o
   título e o campo de CEP dividia o bloco no meio. */
.cdm-comprar #wc-shipping-simulator {
	font-size: var(--cdm-t-sm);
}

/*
 * O CSS do plugin (truck1) carrega depois desta folha e assume uma caixa de
 * 420px: label de altura fixa com o input DENTRO, botão de 82px colado. No
 * cartão de ~280px isso deixava o CEP com 26px. Os seletores abaixo têm a
 * classe .cdm-comprar a mais, então vencem por especificidade; devolvemos as
 * larguras ao flex e trazemos cor e forma para os tokens.
 */
.cdm-comprar #wc-shipping-simulator {
	margin: 0;
	max-width: 100%;
}

.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper {
	display: flex;
	gap: var(--cdm-e-2);
	margin-block-end: 0;
}

.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper label {
	align-items: center;
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	color: var(--cdm-azul);
	display: flex;
	flex: 1 1 auto;
	height: var(--cdm-altura-controle);
	min-width: 0;
	padding: 0 var(--cdm-e-3);
	width: auto;
}

/* O título "Calcular frete e prazo" já está acima; dentro do campo fica só o
   CEP, como no layout. */
.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper label .icon,
.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper label .text {
	display: none;
}

.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper label input.input-text {
	color: var(--cdm-texto);
	flex: 1 1 auto;
	font-size: var(--cdm-t-base);
	height: 100%;
	min-width: 0;
	padding: 0;
	width: auto;
}

.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper button.calculate {
	background-color: var(--cdm-verde);
	border: 1px solid var(--cdm-verde);
	border-radius: var(--cdm-raio);
	color: var(--cdm-branco);
	cursor: pointer;
	flex: none;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	height: var(--cdm-altura-controle);
	padding: 0 var(--cdm-e-5);
	width: auto;
}

.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper button.calculate:hover,
.cdm-comprar #wc-shipping-simulator .shipping-simulator-wrapper button.calculate:focus-visible {
	background-color: var(--cdm-verde-escuro);
	border-color: var(--cdm-verde-escuro);
	color: var(--cdm-branco);
}

.cdm-comprar #fshipping-results {
	flex: 1 1 100%;
	margin-block-start: var(--cdm-e-3);
}

.cdm-comprar #fshipping-results table {
	border-collapse: collapse;
	width: 100%;
}

.cdm-comprar #fshipping-results td,
.cdm-comprar #fshipping-results th {
	border-block-end: 1px solid var(--cdm-borda);
	padding: var(--cdm-e-2) var(--cdm-e-1);
	text-align: start;
}

/* --------------------------------------------------- barra de compra --- */

/*
 * Barra que assume o lugar do botão quando ele sai da tela. Fica sobre o
 * rodapé, não dentro do fluxo, e some junto com a cesta lateral aberta.
 *
 * Nasce com [hidden] e o JS a revela; o seletor de atributo evita que o
 * display:flex daqui vença o hidden, como acontece quando os dois disputam.
 */
.cdm-barra-compra {
	background: var(--cdm-superficie);
	border-block-start: 1px solid var(--cdm-cinza-200);
	box-shadow: 0 -2px 10px rgba(16, 24, 40, .08);
	inset-block-end: 0;
	inset-inline: 0;
	padding-block: var(--cdm-e-3);
	position: fixed;
	z-index: var(--cdm-z-cabecalho);
}

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

/* O espaço no fim da página impede que a barra cubra o último bloco. */
body.cdm-com-barra-compra {
	padding-block-end: calc( var(--cdm-altura-controle) + var(--cdm-e-6) );
}

/*
 * Os botões flutuantes (WhatsApp) sobem junto: eles ficam a 16px do fundo e
 * numa camada acima, então cobriam justamente o "Comprar" da barra.
 */
body.cdm-com-barra-compra .cdm-flutuantes {
	inset-block-end: calc( var(--cdm-altura-controle) + var(--cdm-e-8) );
	transition: inset-block-end var(--cdm-transicao);
}

.cdm-barra-compra__interno {
	align-items: center;
	display: flex;
	gap: var(--cdm-e-4);
}

.cdm-barra-compra__foto {
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
	flex: none;
	height: var(--cdm-e-12);
	object-fit: contain;
	width: var(--cdm-e-12);
}

.cdm-barra-compra__nome {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--cdm-azul-marca);
	display: -webkit-box;
	flex: 1 1 auto;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	line-clamp: 2;
	line-height: var(--cdm-altura-apertada);
	margin: 0;
	min-width: 0;
	overflow: hidden;
}

.cdm-barra-compra__preco {
	color: var(--cdm-azul-marca);
	flex: none;
	font-size: var(--cdm-t-xl);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	margin: 0;
	white-space: nowrap;
}

/* Nome e rótulo sem negrito: a barra é um lembrete do que está sendo visto,
   não um segundo cabeçalho da página. */
.cdm-barra-compra__botao {
	background-color: var(--cdm-verde-comprar);
	border-color: var(--cdm-verde-comprar);
	flex: none;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	height: var(--cdm-altura-controle);
	padding-inline: var(--cdm-e-6);
	white-space: nowrap;
}

.cdm-barra-compra__botao:hover,
.cdm-barra-compra__botao:focus-visible {
	background-color: var(--cdm-verde-comprar-fundo);
	border-color: var(--cdm-verde-comprar-fundo);
}

/*
 * No telefone sobra pouca largura: o preço sai (ele está a um toque de
 * distância, na caixa) e ficam foto, nome e ação — que é o que a barra
 * precisa oferecer.
 */
@media (max-width: 639px) {
	.cdm-barra-compra__interno {
		gap: var(--cdm-e-3);
	}

	.cdm-barra-compra__preco {
		display: none;
	}

	.cdm-barra-compra__foto {
		height: var(--cdm-e-10);
		width: var(--cdm-e-10);
	}

	.cdm-barra-compra__nome {
		font-size: var(--cdm-t-sm);
	}

	/*
	 * Botão enxuto no telefone: sem o ícone e com recuo curto, ele para de
	 * comer a largura do nome do produto, que antes sobrava cortado na
	 * primeira palavra.
	 */
	.cdm-barra-compra__botao {
		font-size: var(--cdm-t-sm);
		padding-inline: var(--cdm-e-4);
	}

	.cdm-barra-compra__botao .cdm-icone {
		display: none;
	}
}

/* Marco de onde a descrição começa: serve só de referência para a barra
   aparecer no telefone (ver produto.js) e não ocupa espaço. */
.cdm-barra-compra__marco {
	display: block;
	height: 1px;
}

/* A barra do wpc-sticky-add-to-cart faria dobradinha com esta. */
.wpcsb-container {
	display: none;
}

/* ------------------------------------------------------------------ abas --- */

/*
 * A descrição corre direto na página: sem a moldura de cartão (que vem de
 * .cdm-cartao, em base.css) e sem recuo lateral, o texto alinha com o resto
 * da coluna em vez de ficar dentro de uma caixa.
 */
.cdm-abas {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-block-start: var(--cdm-e-8);
	padding: 0;
}

/*
 * Faixa de abas. No telefone os três rótulos não cabem lado a lado e o
 * terceiro caía sozinho numa segunda linha, desalinhado da borda. Aqui a
 * faixa rola na horizontal, sem barra à vista; a partir de 640px tudo cabe e
 * ela se comporta como uma linha normal.
 */
.cdm-abas .wc-tabs {
	display: flex;
	gap: var(--cdm-e-6);
	list-style: none;
	margin: 0 0 var(--cdm-e-5);
	overflow-x: auto;
	padding: 0;
	scrollbar-width: none;
}

/*
 * woocommerce.css desenha as abas como pastas de arquivo: fundo cinza, borda,
 * cantos arredondados e dois pseudoelementos que fazem as "orelhas" laterais.
 * Nada disso entra aqui — as abas são texto, e quem marca a ativa é um traço
 * embaixo dela.
 */
.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.cdm-abas .wc-tabs::-webkit-scrollbar {
	display: none;
}

.cdm-abas .wc-tabs li {
	flex: none;
}

.cdm-abas .wc-tabs li a {
	white-space: nowrap;
}

@media (min-width: 640px) {
	.cdm-abas .wc-tabs {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li a {
	border-block-end: 3px solid transparent;
	color: var(--cdm-texto-fraco);
	display: block;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	padding: var(--cdm-e-2) 0;
	text-decoration: none;
	transition: color var(--cdm-transicao), border-color var(--cdm-transicao);
}

.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--cdm-azul-marca);
}

.woocommerce div.product .cdm-abas .woocommerce-tabs ul.tabs li.active a {
	border-block-end-color: var(--cdm-azul-marca);
	color: var(--cdm-azul-marca);
	font-weight: var(--cdm-peso-forte);
}

.cdm-abas .woocommerce-Tabs-panel {
	color: var(--cdm-texto-fraco);
	font-size: var(--cdm-t-base);
	line-height: var(--cdm-altura-normal);
}

.cdm-abas .woocommerce-Tabs-panel > h2 {
	color: var(--cdm-azul);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-semi);
	margin: 0 0 var(--cdm-e-3);
}

.cdm-abas .woocommerce-Tabs-panel h3 {
	color: var(--cdm-azul);
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-semi);
	margin: var(--cdm-e-5) 0 var(--cdm-e-2);
}

.cdm-abas .woocommerce-Tabs-panel p,
.cdm-abas .woocommerce-Tabs-panel ul,
.cdm-abas .woocommerce-Tabs-panel ol {
	margin: 0 0 var(--cdm-e-3);
}

.cdm-abas .woocommerce-Tabs-panel img {
	height: auto;
	max-width: 100%;
}

.cdm-abas .shop_attributes {
	border-collapse: collapse;
	font-size: var(--cdm-t-sm);
	width: 100%;
}

.cdm-abas .shop_attributes th,
.cdm-abas .shop_attributes td {
	border-block-end: 1px solid var(--cdm-borda);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	text-align: start;
	vertical-align: top;
}

.cdm-abas .shop_attributes th {
	color: var(--cdm-texto);
	font-weight: var(--cdm-peso-semi);
	white-space: nowrap;
}

.cdm-abas .shop_attributes p {
	margin: 0;
}

/* --- avaliações --- */

.cdm-abas #reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdm-abas #reviews .commentlist > li {
	border-block-end: 1px solid var(--cdm-borda);
	padding-block: var(--cdm-e-4);
}

.cdm-abas #reviews .comment-text {
	padding-inline-start: 0;
}

.cdm-abas #reviews .star-rating {
	color: var(--cdm-amarelo);
}

.cdm-abas #reviews .woocommerce-review__author {
	color: var(--cdm-texto);
	font-weight: var(--cdm-peso-semi);
}

.cdm-abas #reviews .woocommerce-review__published-date {
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-xs);
}

.cdm-abas #reviews .avatar {
	border-radius: var(--cdm-raio-cheio);
	float: inline-start;
	margin-inline-end: var(--cdm-e-3);
}

.cdm-abas #review_form .comment-form label {
	color: var(--cdm-texto-fraco);
	display: block;
	font-size: var(--cdm-t-sm);
	margin-block-end: var(--cdm-e-1);
}

.cdm-abas #review_form .comment-form input[type="text"],
.cdm-abas #review_form .comment-form input[type="email"],
.cdm-abas #review_form .comment-form textarea {
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	color: var(--cdm-texto);
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	width: 100%;
}

.cdm-abas #review_form .comment-form p {
	margin: 0 0 var(--cdm-e-3);
}

.cdm-abas #review_form .submit {
	background: var(--cdm-azul);
	border: 0;
	border-radius: var(--cdm-raio);
	color: var(--cdm-branco);
	cursor: pointer;
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	padding: var(--cdm-e-3) var(--cdm-e-6);
}

.cdm-abas #review_form .submit:hover,
.cdm-abas #review_form .submit:focus-visible {
	background: var(--cdm-azul-escuro);
}

/* ---------------------------------------------------------- relacionados --- */

.cdm-relacionados {
	margin-block-start: var(--cdm-e-12);
}

.cdm-relacionados__titulo {
	color: var(--cdm-azul);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-semi);
	margin: 0 0 var(--cdm-e-5);
}

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

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

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

@media (min-width: 1200px) {
	.cdm-relacionados__grade {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Upsells que o hook das abas ainda pode imprimir: mesma grade. */
.cdm-abas .upsells.products ul.products {
	display: grid;
	gap: var(--cdm-gap-grade);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/* ==========================================================================
   Avise-me quando chegar
   Só aparece em produto esgotado, dentro da caixa de compra, no vão onde o
   botão de comprar estaria. A marcação vem do plugin cdm-avise-me; o estilo
   fica aqui porque cor e espaçamento têm uma fonte só (tokens.css).
   ========================================================================== */

.cdm-avise {
	margin-top: var(--cdm-e-4);
	padding: var(--cdm-e-4);
	background: var(--cdm-cinza-100);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio);
}

.cdm-avise__titulo {
	margin: 0 0 var(--cdm-e-1);
	font-size: var(--cdm-t-base);
	color: var(--cdm-azul);
}

.cdm-avise__texto {
	margin: 0 0 var(--cdm-e-3);
	font-size: var(--cdm-t-sm);
	line-height: var(--cdm-altura-base);
	color: var(--cdm-cinza-700);
}

.cdm-avise__rotulo {
	display: block;
	margin-bottom: var(--cdm-e-1);
	font-size: var(--cdm-t-xs);
	font-weight: var(--cdm-peso-semi);
	color: var(--cdm-cinza-700);
}

/* Sempre empilhado. Campo e botão lado a lado foi a primeira tentativa e
   não sobreviveu ao teste: a caixa de compra tem ~280px mesmo no desktop —
   é uma coluna lateral, não a largura da página — e o rótulo "Quero ser
   avisado" comia a largura do campo, que exibia "nome@em…". Empilhar dá ao
   e-mail a linha inteira e ao botão a área de toque cheia. */
.cdm-avise__linha {
	display: grid;
	gap: var(--cdm-e-2);
}

/* `input.` e não só a classe: base.css estiliza input[type] por elemento
   (0,1,1) e venceria uma classe sozinha — a mesma armadilha que já mordeu o
   campo de busca (ver §7 do CLAUDE.md). */
input.cdm-avise__campo {
	width: 100%;
	padding: var(--cdm-e-3);
	font-family: inherit;
	font-size: var(--cdm-t-base);
	color: var(--cdm-cinza-900);
	background: var(--cdm-branco);
	border: 1px solid var(--cdm-cinza-300);
	border-radius: var(--cdm-raio);
}

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

.cdm-avise__botao {
	width: 100%;
}

.cdm-avise__legal {
	margin: var(--cdm-e-3) 0 0;
	font-size: var(--cdm-t-xs);
	line-height: var(--cdm-altura-base);
	color: var(--cdm-cinza-500);
}

.cdm-avise__aviso {
	margin: 0 0 var(--cdm-e-3);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	font-size: var(--cdm-t-sm);
	border-radius: var(--cdm-raio);
}

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

.cdm-avise__aviso--erro {
	color: var(--cdm-vermelho);
	background: var(--cdm-branco);
	border: 1px solid var(--cdm-vermelho);
}

/* A isca do robô. Sai de cena sem `display:none` e sem `visibility:hidden`,
   que preenchedores automáticos usam justamente para decidir o que pular. */
.cdm-avise__isca {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}