/**
 * Checkout em etapas
 *
 * Visual do checkout da Chilli Beans sobre o Checkout Block do WooCommerce.
 * Nenhum valor literal (tudo em tokens.css) e nenhuma família de fonte: a
 * fonte é a do tema da loja.
 *
 * Mapa:
 *   1. Página e moldura
 *   2. Cabeçalho
 *   3. Grade: formulário e resumo
 *   4. Etapas: ordem, colunas e visibilidade
 *   5. Cabeçalho e corpo de etapa
 *   6. Tela de identificação
 *   7. Seções internas do bloco
 *   8. Campos
 *   9. Frete
 *  10. Pagamento em botões
 *  11. Botões
 *  12. Resumo da compra e "confirmar compra"
 *  13. Avisos
 *  14. Rodapé
 */

/* ==================================================================== *
 * 1. Página e moldura
 * ==================================================================== */

body.cee-pagina {
	margin: 0;
	padding: 0;
	background: var(--cee-fundo);
	color: var(--cee-texto);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cee-pagina .cee-principal {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--cee-largura);
	margin: 0 auto;
	padding: var(--cee-e-lg) var(--cee-margem) var(--cee-e-2xl);
	box-sizing: border-box;
}

.cee-pagina .cee-principal:focus {
	outline: none;
}

.cee-pagina :focus-visible {
	outline: var(--cee-foco-largura) solid var(--cee-foco);
	outline-offset: var(--cee-foco-distancia);
}

.cee-pagina .cee-pular:focus {
	position: fixed;
	top: var(--cee-e-2xs);
	left: var(--cee-e-2xs);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--cee-e-xs) var(--cee-e-sm);
	background: var(--cee-branco);
	color: var(--cee-texto);
}

/* A família e o peso do título vêm do <h1> do tema. Daqui, só o tamanho e a
   caixa alta da referência. */
.cee-pagina .cee-titulo {
	margin: 0 0 var(--cee-e-lg);
	font-size: var(--cee-tam-titulo);
	line-height: var(--cee-entrelinha-curta);
	text-transform: uppercase;
	color: var(--cee-texto);
}

/* ==================================================================== *
 * 2. Cabeçalho
 * ==================================================================== */

.cee-topo {
	background: var(--cee-moldura);
	color: var(--cee-moldura-texto);
}

.cee-topo__interno {
	display: flex;
	align-items: center;
	gap: var(--cee-e-sm);
	max-width: var(--cee-largura);
	min-height: var(--cee-topo-altura);
	margin: 0 auto;
	padding: 0 var(--cee-margem);
	box-sizing: border-box;
}

.cee-topo__marca {
	flex: 1 1 auto;
	min-width: 0;
}

.cee-pagina .cee-marca {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.cee-pagina .cee-marca img,
.cee-pagina .cee-marca svg {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--cee-logo-altura);
}

.cee-marca__texto {
	font-size: var(--cee-tam-xl);
	font-weight: var(--cee-peso-forte);
	text-transform: uppercase;
	letter-spacing: var(--cee-caixa-alta-espaco);
}

.cee-topo__lado {
	display: flex;
	align-items: center;
	gap: var(--cee-e-3xs);
	flex: 0 0 auto;
}

.cee-topo__link,
.cee-topo__seguro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cee-e-2xs);
	min-width: var(--cee-toque);
	min-height: var(--cee-toque);
	padding: 0 var(--cee-e-2xs);
	color: var(--cee-moldura-texto);
	font-size: var(--cee-tam-xs);
	font-weight: var(--cee-peso-forte);
	letter-spacing: var(--cee-caixa-alta-espaco);
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
}

.cee-topo__link:hover,
.cee-topo__link:focus,
.cee-topo__seguro:hover,
.cee-topo__seguro:focus {
	color: var(--cee-moldura-texto);
	text-decoration: underline;
}

.cee-topo :focus-visible {
	outline-color: var(--cee-moldura-texto);
}

/* No celular os links viram só ícone; o texto fica como nome acessível. */
@media (max-width: 767px) {
	.cee-topo__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (min-width: 768px) {
	.cee-topo__interno {
		min-height: var(--cee-topo-altura-lg);
	}

	.cee-topo__lado {
		gap: var(--cee-e-md);
	}

	.cee-pagina .cee-topo .cee-marca img,
	.cee-pagina .cee-topo .cee-marca svg {
		height: var(--cee-logo-altura-lg);
	}
}

/* ==================================================================== *
 * 3. Grade: formulário à esquerda, resumo à direita
 * ==================================================================== */

.cee-pagina .wp-block-woocommerce-checkout {
	max-width: none;
	margin: 0;
	padding: 0;
}

.cee-pagina .wc-block-components-sidebar-layout {
	margin: 0;
	gap: 0;
}

@media (min-width: 1024px) {
	.cee-pagina .wc-block-components-sidebar-layout .wc-block-components-main {
		width: 68%;
		padding-right: var(--cee-e-xl);
		box-sizing: border-box;
	}

	.cee-pagina .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 32%;
		max-width: var(--cee-coluna-resumo);
		margin-left: auto;
		padding: 0;
	}
}

/* ==================================================================== *
 * 4. Etapas: ordem, colunas e visibilidade
 *
 * Tudo sob `.cee--etapas`, que o JS liga depois de montar os cabeçalhos.
 * Sem JS, nada disto se aplica e o checkout aparece inteiro.
 *
 * No celular: uma coluna, na ordem das etapas. A partir de 768px: "Dados
 * pessoais" à esquerda e "Entrega" à direita, lado a lado como na
 * referência; identificação e pagamento ocupam a largura toda.
 *
 * O formulário de endereço é UM só no bloco e serve às duas etapas: fica na
 * coluna da etapa que estiver aberta (o JS gera a folha que esconde, em cada
 * uma, os campos da outra).
 * ==================================================================== */

.cee--etapas .wc-block-checkout__form {
	display: flex;
	flex-direction: column;
}

/* Ordem. Avisos do bloco (sem regra) ficam em 0, no topo. */
.cee--etapas .wc-block-checkout__form > :is(
	.wp-block-woocommerce-checkout-express-payment-block,
	#contact-fields,
	[data-cee-grupo="contato"]
) { order: 1; }

.cee--etapas .wc-block-checkout__form > [data-cee-grupo="dados"] { order: 2; }

.cee--etapas .wc-block-checkout__form > :is(
	.wp-block-woocommerce-checkout-shipping-method-block,
	.wp-block-woocommerce-checkout-pickup-options-block,
	#shipping-fields,
	#billing-fields,
	#shipping-option,
	#order-fields,
	#order-notes,
	[data-cee-grupo="entrega"]
) { order: 3; }

/* O endereço principal pertence a "Dados" enquanto ela está aberta. Qual é
   o principal (entrega ou, sem entrega, cobrança) o JS diz em
   `data-cee-principal`. */
.cee--etapas[data-cee-ativa="dados"][data-cee-principal="shipping-fields"] .wc-block-checkout__form > #shipping-fields,
.cee--etapas[data-cee-ativa="dados"][data-cee-principal="billing-fields"] .wc-block-checkout__form > #billing-fields {
	order: 2;
}

.cee--etapas .wc-block-checkout__form > :is(
	#payment-method,
	.wc-block-checkout__terms,
	.wc-block-checkout__actions,
	[data-cee-grupo="pagamento"]
) { order: 4; }

@media (min-width: 768px) {
	.cee--etapas .wc-block-checkout__form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row dense;
		align-items: start;
		column-gap: var(--cee-e-xl);
	}

	.cee--etapas .wc-block-checkout__form > * {
		grid-column: 1 / -1;
	}

	.cee--etapas .wc-block-checkout__form > :is(
		.wp-block-woocommerce-checkout-shipping-method-block,
		.wp-block-woocommerce-checkout-pickup-options-block,
		#shipping-fields,
		#billing-fields,
		#shipping-option,
		#order-fields,
		#order-notes,
		[data-cee-grupo="entrega"]
	) {
		grid-column: 2;
	}

	/*
	 * As duas colunas dividem as linhas da grade. Sem isto, o resumo alto da
	 * entrega (à direita) empurraria o formulário de dados (à esquerda) para
	 * baixo dele. O corpo da etapa que NÃO está aberta ocupa várias linhas de
	 * uma vez; as que sobram vazias têm altura zero.
	 */
	.cee--etapas .wc-block-checkout__form > .cee-etapa-corpo:not([data-estado="ativa"]) {
		grid-row: span var(--cee-linhas-coluna);
	}

	/* Depois da regra da entrega, para vencê-la com a mesma especificidade. */
	.cee--etapas .wc-block-checkout__form > [data-cee-grupo="dados"],
	.cee--etapas[data-cee-ativa="dados"][data-cee-principal="shipping-fields"] .wc-block-checkout__form > #shipping-fields,
	.cee--etapas[data-cee-ativa="dados"][data-cee-principal="billing-fields"] .wc-block-checkout__form > #billing-fields {
		grid-column: 1;
	}
}

/* Visibilidade: esconder com `:not()` preserva o display do próprio bloco. */
.cee--etapas:not([data-cee-ativa="contato"]) .wc-block-checkout__form > :is(
	.wp-block-woocommerce-checkout-express-payment-block,
	#contact-fields,
	[data-cee-grupo="contato"]
),
.cee--etapas:not([data-cee-ativa="dados"]):not([data-cee-ativa="entrega"]) .wc-block-checkout__form > :is(#shipping-fields, #billing-fields),
.cee--etapas:not([data-cee-ativa="entrega"]) .wc-block-checkout__form > :is(
	.wp-block-woocommerce-checkout-shipping-method-block,
	.wp-block-woocommerce-checkout-pickup-options-block,
	#shipping-option,
	#order-fields,
	#order-notes
),
.cee--etapas:not([data-cee-ativa="pagamento"]) .wc-block-checkout__form > :is(
	#payment-method,
	.wc-block-checkout__terms,
	.wc-block-checkout__actions
),
.cee--etapas[data-cee-ativa="contato"] .wc-block-checkout__form > :is(
	[data-cee-grupo="dados"],
	[data-cee-grupo="entrega"],
	[data-cee-grupo="pagamento"]
) {
	display: none;
}

/* O formulário de cobrança separado ("usar outro endereço") é da entrega. */
.cee--etapas[data-cee-ativa="dados"][data-cee-principal="shipping-fields"] .wc-block-checkout__form > #billing-fields {
	display: none;
}

/* Botão de avançar: só na etapa aberta. */
.cee--etapas:not([data-cee-ativa="contato"]) .cee-acoes[data-cee-grupo="contato"],
.cee--etapas:not([data-cee-ativa="dados"]) .cee-acoes[data-cee-grupo="dados"],
.cee--etapas:not([data-cee-ativa="entrega"]) .cee-acoes[data-cee-grupo="entrega"] {
	display: none;
}

/* Entrada: só desloca, sem opacidade — se não rodar, o conteúdo já está lá. */
@keyframes cee-entra {
	from {
		transform: translateY(var(--cee-subida));
	}
}

.cee--etapas .wc-block-checkout__form > .wc-block-components-checkout-step {
	animation: cee-entra var(--cee-duracao) var(--cee-curva);
}

/* ==================================================================== *
 * 5. Cabeçalho e corpo de etapa
 * ==================================================================== */

.cee-etapa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cee-e-sm);
	min-height: var(--cee-titulo-etapa);
	margin: 0 0 var(--cee-e-md);
	border-bottom: var(--cee-borda) solid var(--cee-linha);
}

.cee-pagina .cee-etapa__titulo {
	margin: 0;
	font-family: inherit;
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
	line-height: var(--cee-entrelinha-curta);
	letter-spacing: var(--cee-caixa-alta-espaco);
	text-transform: uppercase;
	color: var(--cee-texto);
}

.cee-etapa__titulo:focus {
	outline: none;
}

.cee-etapa__titulo:focus-visible {
	outline: var(--cee-foco-largura) solid var(--cee-foco);
}

.cee-pagina .cee-etapa__editar,
.cee-pagina .cee-etapa__alterar {
	min-height: var(--cee-toque);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cee-link);
	font-family: inherit;
	font-size: var(--cee-tam-base);
	font-weight: var(--cee-peso);
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: lowercase;
	cursor: pointer;
}

.cee-pagina .cee-etapa__alterar {
	min-height: auto;
	font-size: inherit;
}

.cee-pagina .cee-etapa__editar:hover,
.cee-pagina .cee-etapa__editar:focus,
.cee-pagina .cee-etapa__alterar:hover,
.cee-pagina .cee-etapa__alterar:focus {
	background: none;
	color: var(--cee-texto);
}

.cee-etapa:not([data-estado="concluida"]) .cee-etapa__editar {
	display: none;
}

.cee-etapa-corpo {
	margin: 0 0 var(--cee-e-lg);
	font-size: var(--cee-tam-base);
	color: var(--cee-texto-suave);
}

.cee-etapa-corpo p {
	margin: 0;
}

.cee-etapa__resumo {
	white-space: pre-line;
	line-height: var(--cee-entrelinha);
}

.cee-etapa-corpo:not([data-estado="concluida"]) .cee-etapa__resumo,
.cee-etapa-corpo:not([data-estado="pendente"]) .cee-etapa__espera,
.cee-etapa-corpo:not([data-estado="ativa"]) .cee-etapa__email,
.cee-etapa-corpo:not([data-estado="ativa"]) .cee-etapa__chamada {
	display: none;
}

/* Corpo sem nada a mostrar não pode deixar respiro sobrando. */
.cee-etapa-corpo[data-estado="ativa"]:not(:has(.cee-etapa__email, .cee-etapa__chamada)),
.cee-etapa-corpo[data-estado="pendente"]:has(.cee-etapa__espera[hidden]) {
	display: none;
}

.cee-etapa__email {
	color: var(--cee-texto-suave);
}

/* ==================================================================== *
 * 6. Tela de identificação — só o e-mail, centralizado, sem resumo
 * ==================================================================== */

.cee--etapas[data-cee-ativa="contato"] .wc-block-components-sidebar {
	display: none;
}

.cee-pagina .cee--etapas[data-cee-ativa="contato"] .wc-block-components-sidebar-layout .wc-block-components-main {
	width: 100%;
	max-width: var(--cee-largura-email);
	margin: 0 auto;
	padding: 0;
}

.cee-principal:has(.cee--etapas[data-cee-ativa="contato"]) .cee-titulo {
	text-align: center;
}

.cee-etapa[data-cee-grupo="contato"] {
	display: none;
}

.cee-etapa__chamada {
	margin: 0;
	font-size: var(--cee-tam-lg);
	font-weight: var(--cee-peso-forte);
	color: var(--cee-texto);
	text-align: center;
}

.cee-email-info {
	margin-top: var(--cee-e-lg);
	padding: var(--cee-e-sm) var(--cee-e-md) var(--cee-e-md);
	border: var(--cee-borda) solid var(--cee-linha);
	border-radius: var(--cee-raio);
}

.cee-email-info__titulo {
	margin: 0 0 var(--cee-e-2xs);
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
	color: var(--cee-verde);
}

.cee-email-info__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--cee-tam-sm);
	color: var(--cee-texto-suave);
}

.cee-email-info__lista li {
	position: relative;
	margin: 0 0 var(--cee-e-3xs);
	padding-left: var(--cee-e-md);
}

.cee-email-info__lista li::before {
	content: "";
	position: absolute;
	left: var(--cee-e-3xs);
	top: calc(var(--cee-e-2xs) - var(--cee-e-3xs));
	width: calc(var(--cee-e-2xs) - var(--cee-borda));
	height: var(--cee-e-xs);
	border: solid var(--cee-verde);
	border-width: 0 var(--cee-borda-grossa) var(--cee-borda-grossa) 0;
	transform: rotate(45deg);
}

/* ==================================================================== *
 * 7. Seções internas do bloco
 *
 * Daqui para baixo o escopo é `body.cee-pagina .cee.cee`. A classe repetida
 * é de propósito: o CSS do bloco chega a (0,4,1) em regras como
 * `.wc-block-components-form .wc-block-components-text-input.is-active
 * input[type="text"]`, e este escopo passa dele sem `!important`.
 * ==================================================================== */

body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step__heading-container::before,
body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step__title::before,
body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step::after,
body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step__container::after {
	content: none;
	display: none;
}

body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step {
	margin: 0 0 var(--cee-e-md);
	padding: 0;
	border: 0;
}

body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step__container,
body.cee-pagina .cee.cee .wc-block-checkout__form .wc-block-components-checkout-step__content {
	padding: 0;
	margin: 0;
}

/* O título da etapa já diz o que é; o do bloco repetiria. O fieldset
   continua nomeado pela <legend> do próprio bloco. */
.cee--etapas :is(#contact-fields, #payment-method, #order-fields) .wc-block-components-checkout-step__heading-container {
	display: none;
}

body.cee-pagina .cee.cee .wc-block-components-checkout-step__heading {
	margin: 0 0 var(--cee-e-sm);
}

body.cee-pagina .cee.cee .wc-block-components-checkout-step__title,
body.cee-pagina .cee.cee .wc-block-components-title.wc-block-components-title {
	margin: 0;
	font-family: inherit;
	font-size: var(--cee-tam-xs);
	font-weight: var(--cee-peso-forte);
	letter-spacing: var(--cee-caixa-alta-espaco);
	text-transform: uppercase;
	color: var(--cee-texto);
}

body.cee-pagina .cee.cee .wc-block-components-checkout-step__description,
body.cee-pagina .cee.cee .wc-block-checkout__guest-checkout-notice {
	margin: var(--cee-e-2xs) 0 0;
	font-size: var(--cee-tam-sm);
	color: var(--cee-texto-suave);
}

/* ==================================================================== *
 * 8. Campos — rótulo em cima, caixa de canto quase reto
 *
 * O bloco põe o <label> depois do <input> e o faz flutuar por cima. `order`
 * leva o rótulo para cima sem mexer na ordem do DOM (input, label, erro).
 * ==================================================================== */

body.cee-pagina .cee.cee .wc-block-components-text-input,
body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	margin-top: var(--cee-e-sm);
	height: auto;
	background: none;
	border: 0;
}

/* No endereço, o bloco põe nome e sobrenome lado a lado e zera a margem de
   cima só do segundo — os dois ficavam desalinhados. Todo campo do endereço
   recebe a mesma margem (e o select, nenhuma por dentro). */
body.cee-pagina .cee.cee .wc-block-components-address-form.wc-block-components-address-form > * {
	margin-top: var(--cee-e-sm);
}

body.cee-pagina .cee.cee .wc-block-components-address-form.wc-block-components-address-form .wc-blocks-components-select,
body.cee-pagina .cee.cee .wc-block-components-address-form.wc-block-components-address-form .wc-blocks-components-select__container {
	margin-top: 0;
}

body.cee-pagina .cee.cee .wc-block-components-text-input label,
body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__label {
	order: -1;
	position: static;
	transform: none;
	max-width: none;
	margin: 0 0 var(--cee-e-3xs);
	padding: 0;
	font-family: inherit;
	font-size: var(--cee-tam-sm);
	line-height: var(--cee-entrelinha-curta);
	color: var(--cee-texto);
	white-space: normal;
	overflow: visible;
	pointer-events: auto;
}

body.cee-pagina .cee.cee .wc-block-components-text-input input,
body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__select {
	width: 100%;
	height: var(--cee-campo-altura);
	min-height: var(--cee-campo-altura);
	margin: 0;
	padding: 0 var(--cee-e-xs);
	box-sizing: border-box;
	border: var(--cee-borda) solid var(--cee-borda-controle);
	border-radius: var(--cee-raio-campo);
	background: var(--cee-branco);
	box-shadow: none;
	color: var(--cee-texto);
	font-family: inherit;
	font-size: var(--cee-tam-base);
	line-height: var(--cee-entrelinha-curta);
	transition: border-color var(--cee-transicao);
}

/*
 * Campo digitado ou em foco. O bloco empurra o texto 24px para baixo, para
 * caber o rótulo flutuante, com
 * `.wc-block-components-form .wc-block-components-text-input.is-active
 * input[type="tel"]:focus` — especificidade (0,5,1), acima do escopo desta
 * folha. Aqui o rótulo fica em cima, fora do campo, e esse espaço sobrava.
 * A classe repetida e o `:is()` (sempre verdadeiro) levam a (0,6,2).
 */
body.cee-pagina .cee.cee .wc-block-components-text-input.wc-block-components-text-input input:is(:focus, :not(:focus)) {
	padding: 0 var(--cee-e-xs);
}

body.cee-pagina .cee.cee .wc-block-components-text-input input::placeholder {
	color: var(--cee-placeholder);
}

body.cee-pagina .cee.cee .wc-block-components-text-input input:hover,
body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__select:hover,
body.cee-pagina .cee.cee .wc-block-components-text-input input:focus,
body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--cee-preto);
	box-shadow: none;
}

body.cee-pagina .cee.cee .wc-block-components-text-input input:focus,
body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: var(--cee-foco-largura) solid var(--cee-foco);
	outline-offset: var(--cee-foco-distancia);
}

body.cee-pagina .cee.cee .wc-blocks-components-select .wc-blocks-components-select__expand {
	top: auto;
	bottom: calc((var(--cee-campo-altura) - var(--cee-e-md)) / 2);
	right: var(--cee-e-xs);
	fill: var(--cee-texto);
}

/* Identificação: o campo de e-mail grande da referência. */
.cee--etapas #contact-fields .wc-block-components-text-input input {
	height: var(--cee-email-altura);
	font-size: var(--cee-tam-lg);
}

/* Erro */
body.cee-pagina .cee.cee .has-error input,
body.cee-pagina .cee.cee .has-error select {
	border-color: var(--cee-erro);
	box-shadow: inset var(--cee-borda) 0 0 var(--cee-erro), inset calc(var(--cee-borda) * -1) 0 0 var(--cee-erro);
}

body.cee-pagina .cee.cee .has-error label,
body.cee-pagina .cee.cee .wc-block-components-validation-error,
body.cee-pagina .cee.cee .wc-block-components-validation-error > p {
	color: var(--cee-erro);
	font-size: var(--cee-tam-xs);
}

body.cee-pagina .cee.cee .wc-block-components-validation-error {
	padding-top: var(--cee-e-3xs);
}

body.cee-pagina .cee.cee .wc-block-components-address-form__address_2-toggle {
	display: inline-block;
	margin-top: var(--cee-e-sm);
	color: var(--cee-texto);
	font-size: var(--cee-tam-sm);
	text-decoration: underline;
}

/* Caixas de seleção */

/* Temas que desenham a própria caixa num pseudo-elemento do input — o
   bw-zenny, da Nocci, pinta `input[type="checkbox"]::before` de laranja —
   sobrepõem esse desenho ao do bloco: quadrado colorido deslocado com
   sombra. No checkout, a caixa é só a do bloco (o visto é um SVG, não
   pseudo-elemento, então nada se perde). */
body.cee-pagina .cee.cee input[type="checkbox"]::before,
body.cee-pagina .cee.cee input[type="checkbox"]::after {
	content: none;
	display: none;
}

body.cee-pagina .cee.cee .wc-block-components-checkbox {
	margin-top: var(--cee-e-sm);
}

body.cee-pagina .cee.cee .wc-block-components-checkbox label {
	align-items: center;
	font-size: var(--cee-tam-sm);
	color: var(--cee-texto);
}

body.cee-pagina .cee.cee .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: var(--cee-borda) solid var(--cee-borda-controle);
	border-radius: var(--cee-raio-campo);
	background: var(--cee-branco);
}

body.cee-pagina .cee.cee .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--cee-preto);
	border-color: var(--cee-preto);
}

body.cee-pagina .cee.cee .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--cee-branco);
}

body.cee-pagina .cee.cee .wc-block-components-textarea {
	border: var(--cee-borda) solid var(--cee-borda-controle);
	border-radius: var(--cee-raio-campo);
	font-family: inherit;
	font-size: var(--cee-tam-base);
}

/* ==================================================================== *
 * 9. Frete — opções de borda fina
 * ==================================================================== */

body.cee-pagina .cee.cee #shipping-option .wc-block-components-radio-control__option {
	border-radius: var(--cee-raio);
	box-shadow: none;
}

body.cee-pagina .cee.cee .wc-block-components-radio-control--highlight-checked::after,
body.cee-pagina .cee.cee #shipping-option .wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--cee-preto);
	box-shadow: inset 0 0 0 var(--cee-borda) var(--cee-preto);
	border-radius: var(--cee-raio);
}

body.cee-pagina .cee.cee .wc-block-components-radio-control__input {
	border-color: var(--cee-borda-controle);
}

body.cee-pagina .cee.cee .wc-block-components-radio-control__input:checked {
	border-color: var(--cee-preto);
}

body.cee-pagina .cee.cee .wc-block-components-radio-control__input:checked::before {
	background: var(--cee-preto);
}

body.cee-pagina .cee.cee .wc-block-components-radio-control__label,
body.cee-pagina .cee.cee .wc-block-components-radio-control__secondary-label {
	font-size: var(--cee-tam-sm);
	color: var(--cee-texto);
}

body.cee-pagina .cee.cee .wc-block-components-radio-control__secondary-label {
	font-weight: var(--cee-peso-forte);
}

body.cee-pagina .cee.cee .wc-block-components-radio-control__description,
body.cee-pagina .cee.cee .wc-block-components-radio-control__secondary-description {
	font-size: var(--cee-tam-xs);
	color: var(--cee-texto-suave);
}

/* ==================================================================== *
 * 10. Pagamento em botões
 *
 * Na referência cada meio de pagamento é um botão de borda preta, lado a
 * lado, e o escolhido fica preto cheio; o formulário do meio escolhido
 * (cartão, Pix, boleto…) aparece embaixo, na largura toda.
 *
 * No bloco, cada opção é um invólucro com o rótulo (rádio) e, se escolhida,
 * o conteúdo do gateway. `display: contents` no invólucro solta os dois na
 * grade: os rótulos viram os botões, e o conteúdo vai para uma linha
 * própria no fim (`order`). O rádio continua lá, só fora da vista — teclado
 * e leitor de tela seguem usando o controle nativo.
 * ==================================================================== */

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cee-botao-pagamento)), 1fr));
	gap: var(--cee-e-sm);
	border: 0;
	box-shadow: none;
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control::after {
	content: none;
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control-accordion-option {
	display: contents;
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cee-pagamento-altura);
	margin: 0;
	padding: var(--cee-e-xs) var(--cee-e-sm);
	box-sizing: border-box;
	border: var(--cee-borda-grossa) solid var(--cee-preto);
	border-radius: var(--cee-raio);
	background: var(--cee-branco);
	box-shadow: none;
	color: var(--cee-texto);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--cee-transicao), color var(--cee-transicao);
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option::after {
	content: none;
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option-layout,
body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__label-group,
body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cee-e-2xs);
	width: 100%;
	padding: 0;
	font-size: var(--cee-tam-base);
	text-transform: lowercase;
	color: inherit;
}

/* Ícones e logos dos gateways cabem no botão sem esticá-lo. */
body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option img {
	max-height: var(--cee-e-md);
	width: auto;
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option:hover {
	background: var(--cee-fundo-suave);
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option:has(input:checked) {
	background: var(--cee-preto);
	color: var(--cee-branco);
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control__option:has(input:focus-visible) {
	outline: var(--cee-foco-largura) solid var(--cee-foco);
	outline-offset: var(--cee-foco-distancia);
}

body.cee-pagina .cee.cee #payment-method .wc-block-components-radio-control-accordion-content {
	grid-column: 1 / -1;
	order: 1;
	padding: var(--cee-e-sm) 0 0;
}

body.cee-pagina .cee.cee .wc-block-checkout__no-payment-methods-notice {
	font-size: var(--cee-tam-sm);
}

/* ==================================================================== *
 * 11. Botões
 * ==================================================================== */

.cee-acoes {
	margin: 0 0 var(--cee-e-lg);
}

.cee-acoes__aviso {
	margin: 0 0 var(--cee-e-sm);
	padding: var(--cee-e-xs) var(--cee-e-sm);
	border-left: var(--cee-borda-grossa) solid var(--cee-erro);
	background: var(--cee-erro-suave);
	color: var(--cee-erro);
	font-size: var(--cee-tam-sm);
}

body.cee-pagina .cee.cee .cee-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--cee-botao-altura);
	margin: 0;
	padding: 0 var(--cee-e-md);
	border: 0;
	border-radius: var(--cee-raio);
	background: var(--cee-preto);
	box-shadow: none;
	color: var(--cee-branco);
	font-family: inherit;
	font-size: var(--cee-tam-base);
	font-weight: var(--cee-peso-forte);
	letter-spacing: var(--cee-botao-espaco);
	text-transform: lowercase;
	text-shadow: none;
	cursor: pointer;
	transition: background-color var(--cee-transicao);
}

body.cee-pagina .cee.cee .cee-botao:hover,
body.cee-pagina .cee.cee .cee-botao:focus-visible {
	background: var(--cee-verde);
	color: var(--cee-branco);
}

body.cee-pagina .cee.cee .cee-botao[aria-busy="true"] {
	cursor: progress;
}

/* Botão real de fechar a compra (no celular, e sem JS). */
body.cee-pagina .cee.cee .wc-block-checkout__actions_row {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--cee-e-sm);
}

body.cee-pagina .cee.cee .wc-block-components-checkout-place-order-button,
body.cee-pagina .cee.cee .cee-confirmar__botao {
	width: 100%;
	min-height: var(--cee-botao-altura);
	margin: 0;
	border: 0;
	border-radius: var(--cee-raio);
	background: var(--cee-verde);
	box-shadow: none;
	color: var(--cee-branco);
	font-family: inherit;
	font-size: var(--cee-tam-base);
	font-weight: var(--cee-peso-forte);
	letter-spacing: var(--cee-botao-espaco);
	text-transform: lowercase;
	cursor: pointer;
	transition: background-color var(--cee-transicao);
}

body.cee-pagina .cee.cee .wc-block-components-checkout-place-order-button:hover,
body.cee-pagina .cee.cee .wc-block-components-checkout-place-order-button:focus-visible,
body.cee-pagina .cee.cee .cee-confirmar__botao:hover,
body.cee-pagina .cee.cee .cee-confirmar__botao:focus-visible {
	background: var(--cee-verde-hover);
	color: var(--cee-branco);
}

body.cee-pagina .cee.cee .cee-confirmar__botao:disabled {
	cursor: progress;
	opacity: 0.6;
}

body.cee-pagina .cee.cee .wc-block-components-checkout-return-to-cart-button {
	align-self: flex-start;
	padding: 0;
	color: var(--cee-texto);
	font-size: var(--cee-tam-sm);
	text-decoration: underline;
	text-transform: lowercase;
}

body.cee-pagina .cee.cee .wc-block-components-checkout-return-to-cart-button svg {
	display: none;
}

body.cee-pagina .cee.cee .wc-block-checkout__terms {
	margin: var(--cee-e-md) 0;
	padding: 0;
	border: 0;
	font-size: var(--cee-tam-xs);
	color: var(--cee-texto-suave);
}

body.cee-pagina .cee.cee .wc-block-checkout__terms a {
	color: var(--cee-texto);
}

/* O atalho do resumo só existe no desktop, e só no pagamento. Enquanto ele
   aparece, o botão real sai de cena — dois botões de fechar a compra na
   mesma tela é um convite a clique duplo. */
.cee-confirmar {
	display: none;
	margin-top: var(--cee-e-md);
}

@media (min-width: 1024px) {
	.cee--etapas[data-cee-ativa="pagamento"] .cee-confirmar {
		display: block;
	}

	.cee--etapas[data-cee-ativa="pagamento"] .wc-block-components-checkout-place-order-button {
		display: none;
	}
}

/* ==================================================================== *
 * 12. Resumo da compra
 * ==================================================================== */

body.cee-pagina .cee.cee .wc-block-components-sidebar .wc-block-components-panel,
body.cee-pagina .cee.cee .wp-block-woocommerce-checkout-order-summary-block,
body.cee-pagina .cee.cee .checkout-order-summary-block-fill {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
}

body.cee-pagina .cee.cee .wc-block-components-checkout-order-summary__title,
body.cee-pagina .cee.cee .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: center;
	min-height: var(--cee-titulo-etapa);
	margin: 0 0 var(--cee-e-md);
	padding: 0;
	border-bottom: var(--cee-borda) solid var(--cee-linha);
}

body.cee-pagina .cee.cee .wc-block-components-checkout-order-summary__title-text,
body.cee-pagina .cee.cee .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__title {
	font-family: inherit;
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
	letter-spacing: var(--cee-caixa-alta-espaco);
	text-transform: uppercase;
	color: var(--cee-texto);
}

body.cee-pagina .cee.cee .wc-block-components-checkout-order-summary__title-price {
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
}

body.cee-pagina .cee.cee .wc-block-components-totals-wrapper {
	padding: var(--cee-e-sm) 0;
	border-top: var(--cee-borda) solid var(--cee-linha);
}

body.cee-pagina .cee.cee .wc-block-components-totals-wrapper:empty {
	display: none;
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item {
	padding: 0 0 var(--cee-e-sm);
	font-size: var(--cee-tam-sm);
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item__image {
	width: var(--cee-miniatura);
	margin-right: var(--cee-e-sm);
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item__image img {
	width: var(--cee-miniatura);
	height: var(--cee-miniatura);
	max-width: none;
	object-fit: cover;
	border-radius: var(--cee-raio-campo);
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item__quantity {
	top: 0;
	right: 0;
	transform: none;
	min-width: var(--cee-contador);
	height: var(--cee-contador);
	border: 0;
	border-radius: 0;
	background: var(--cee-preto);
	box-shadow: none;
	color: var(--cee-branco);
	font-size: var(--cee-tam-xs);
	line-height: var(--cee-contador);
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	margin: 0 0 var(--cee-e-3xs);
	font-family: inherit;
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
	line-height: var(--cee-entrelinha-curta);
	letter-spacing: var(--cee-botao-espaco);
	text-transform: uppercase;
	color: var(--cee-texto);
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
body.cee-pagina .cee.cee .wc-block-components-order-summary-item__description .wc-block-components-product-details {
	font-size: var(--cee-tam-xs);
	color: var(--cee-texto-suave);
}

body.cee-pagina .cee.cee .wc-block-components-order-summary-item__total-price {
	font-weight: var(--cee-peso-forte);
}

body.cee-pagina .cee.cee .wc-block-components-totals-item {
	font-size: var(--cee-tam-sm);
	color: var(--cee-texto);
}

body.cee-pagina .cee.cee .wc-block-components-totals-footer-item {
	font-size: var(--cee-tam-lg);
}

body.cee-pagina .cee.cee .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.cee-pagina .cee.cee .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: var(--cee-peso-forte);
}

/* Cupom: campo e botão na mesma linha, com a mesma altura. O botão do bloco
   estica até a altura do campo mais o rótulo. */
body.cee-pagina .cee.cee .wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: var(--cee-e-2xs);
}

/* `flex-basis: 0` + `min-width: 0`: o campo do bloco vem com largura cheia
   e, sem isto, empurra o botão para a linha de baixo. */
body.cee-pagina .cee.cee .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
}

body.cee-pagina .cee.cee .wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	align-self: flex-end;
	height: var(--cee-campo-altura);
	min-height: 0;
	margin: 0;
	padding: 0 var(--cee-e-md);
	border: 0;
	border-radius: var(--cee-raio);
	background: var(--cee-preto);
	box-shadow: none;
	color: var(--cee-branco);
	font-family: inherit;
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
	text-transform: lowercase;
}

body.cee-pagina .cee.cee .wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button:disabled {
	background: var(--cee-fundo-suave);
	color: var(--cee-texto-suave);
}

body.cee-pagina .cee.cee .wc-block-components-totals-coupon-link,
body.cee-pagina .cee.cee .wc-block-components-panel__button {
	color: var(--cee-texto);
	font-size: var(--cee-tam-sm);
}

/* ==================================================================== *
 * 13. Avisos
 * ==================================================================== */

body.cee-pagina .cee.cee .wc-block-components-notice-banner {
	border-radius: var(--cee-raio);
	font-size: var(--cee-tam-sm);
}

body.cee-pagina .cee.cee .wc-block-components-notice-banner.is-error {
	border-color: var(--cee-erro);
	background: var(--cee-erro-suave);
}

/* ==================================================================== *
 * 14. Rodapé — faixa branca de confiança, base escura com a marca
 * ==================================================================== */

.cee-rodape {
	flex-shrink: 0;
	border-top: var(--cee-borda) solid var(--cee-linha);
}

.cee-rodape__infos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cee-coluna-rodape)), 1fr));
	gap: var(--cee-e-lg);
	max-width: var(--cee-largura);
	margin: 0 auto;
	padding: var(--cee-e-lg) var(--cee-margem);
	box-sizing: border-box;
}

.cee-pagina .cee-rodape__titulo {
	margin: 0 0 var(--cee-e-sm);
	font-family: inherit;
	font-size: var(--cee-tam-sm);
	font-weight: var(--cee-peso-forte);
	letter-spacing: 0;
	text-transform: lowercase;
	color: var(--cee-texto);
}

.cee-rodape__formas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cee-e-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cee-rodape__formas li {
	padding: var(--cee-e-3xs) var(--cee-e-xs);
	border: var(--cee-borda) solid var(--cee-borda-controle);
	border-radius: var(--cee-raio);
	font-size: var(--cee-tam-xs);
	color: var(--cee-texto);
}

.cee-rodape__selos {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--cee-tam-xs);
	color: var(--cee-texto-suave);
}

.cee-rodape__selos li {
	display: flex;
	gap: var(--cee-e-2xs);
	margin: 0 0 var(--cee-e-2xs);
}

.cee-rodape__selos svg {
	flex: 0 0 auto;
	color: var(--cee-texto);
}

.cee-rodape__selos strong {
	color: var(--cee-texto);
	font-weight: var(--cee-peso-forte);
}

.cee-rodape__base {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cee-e-md);
	padding: var(--cee-e-xl) var(--cee-margem);
	background: var(--cee-moldura);
	color: var(--cee-moldura-texto);
	text-align: center;
}

.cee-pagina .cee-rodape__base .cee-marca img,
.cee-pagina .cee-rodape__base .cee-marca svg {
	height: var(--cee-e-xl);
}

.cee-rodape__legal {
	margin: 0;
	font-size: var(--cee-tam-xs);
	letter-spacing: var(--cee-botao-espaco);
	text-transform: lowercase;
}