/*
 * Configurador na pagina do produto.
 * Usa as variaveis do tema quando existem, com alternativa embutida para o caso
 * de o plugin rodar sob outro tema.
 */

.fabcfg {
	--fab-amarelo: var( --wp--preset--color--acento, var( --wp--preset--color--amarelo, #F3B431 ) );
	--fab-acento-tinta: var( --wp--preset--color--acento-tinta, var( --wp--preset--color--grafite, #373435 ) );
	--fab-grafite: var( --wp--preset--color--grafite, #373435 );
	--fab-suave:   var( --wp--preset--color--grafite-suave, #6E6A6C );
	--fab-borda:   var( --wp--preset--color--borda, #E3E1E2 );
	--fab-fundo:   var( --wp--preset--color--cinza-fundo, #F5F4F3 );

	margin: 1.5rem 0;
	color: var( --fab-grafite );
}

/* `hidden` e' como o script esconde e mostra partes (campo de altura no
   redondo, "trocar arquivo" sem arquivo...). Qualquer `display: flex` abaixo
   ganharia dele sem este `!important`. */
.fabcfg [hidden],
.fabcfg-palco [hidden] {
	display: none !important;
}

/* O campo de quantidade padrao do WooCommerce nao serve aqui: quem manda na
   quantidade e o passo 5 do configurador. */
.fabcfg ~ .quantity,
form.cart:has( .fabcfg ) > .quantity {
	display: none !important;
}

.fabcfg-passo {
	margin-bottom: 1.75rem;
}

.fabcfg-titulo {
	margin: 0 0 0.75rem;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ---------- opcoes em cartao ---------- */

.fabcfg-opcoes {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 0.625rem;
}

.fabcfg-opcao {
	position: relative;
	display: block;
	cursor: pointer;
}

.fabcfg-opcao input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fabcfg-opcao-corpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 0.75rem;
	border: 1.5px solid var( --fab-borda );
	border-radius: 10px;
	background: #fff;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fabcfg-opcao-texto .fabcfg-opcao-corpo {
	padding: 0.75rem;
}

.fabcfg-opcao:hover .fabcfg-opcao-corpo {
	border-color: var( --fab-amarelo );
}

.fabcfg-opcao input:checked + .fabcfg-opcao-corpo {
	border-color: var( --fab-amarelo );
	background: color-mix( in srgb, var( --fab-amarelo ) 12%, #fff );
}

/* Foco visivel pelo teclado: o input esta escondido, entao o anel vai no corpo. */
.fabcfg-opcao input:focus-visible + .fabcfg-opcao-corpo {
	outline: 2px solid var( --fab-grafite );
	outline-offset: 2px;
}

.fabcfg-opcao-rotulo {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
}

.fabcfg-opcao-nota {
	font-size: 0.875rem;
	color: var( --fab-suave );
}

.fabcfg-icone {
	width: 44px;
	height: 44px;
	fill: var( --fab-amarelo );
}

/* ---------- atalhos ---------- */

.fabcfg-sugeridas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.fabcfg-chip {
	padding: 0.4rem 0.9rem;
	border: 1.5px solid var( --fab-borda );
	border-radius: 999px;
	background: #fff;
	color: var( --fab-grafite );
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fabcfg-chip:hover {
	border-color: var( --fab-amarelo );
}

.fabcfg-chip.esta-ativo {
	border-color: var( --fab-amarelo );
	background: var( --fab-amarelo );
	color: var( --fab-acento-tinta );
}

/* ---------- medidas e quantidade ---------- */

.fabcfg-medidas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fabcfg-campo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 220px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.fabcfg-campo input {
	padding: 0.6rem 0.7rem;
	border: 1.5px solid var( --fab-borda );
	border-radius: 8px;
	font-size: 1.0625rem;
	font-weight: 400;
}

.fabcfg-campo input:focus {
	border-color: var( --fab-amarelo );
	outline: none;
}

.fabcfg-dica,
.fabcfg-limiar {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var( --fab-suave );
}

/* Maximo pelo valor minimo, logo abaixo da quantidade: argumento de venda. */
.fabcfg-limiar.e-maximo {
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background: color-mix( in srgb, var( --fab-amarelo ) 22%, #fff );
	color: var( --fab-grafite );
}

.fabcfg-usar-max {
	margin: 0.4rem 0 0;
	padding: 0.35rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: var( --fab-grafite );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.fabcfg-usar-max:hover {
	opacity: 0.88;
}

/* ---------- envio da arte ---------- */

.fabcfg-arquivo {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fabcfg-solta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1.5rem 1rem;
	border: 2px dashed var( --fab-borda );
	border-radius: 12px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fabcfg-solta:hover,
.fabcfg-solta.esta-sobre {
	border-color: var( --fab-amarelo );
	background: color-mix( in srgb, var( --fab-amarelo ) 10%, #fff );
}

/* O input esta fora de alcance visual; o anel de foco vai no rotulo. */
.fabcfg-arquivo:focus-visible + .fabcfg-solta {
	outline: 2px solid var( --fab-grafite );
	outline-offset: 2px;
}

.fabcfg-solta strong {
	font-size: 1.0625rem;
}

.fabcfg-solta span {
	font-size: 0.875rem;
	color: var( --fab-suave );
}

.fabcfg-enviado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.85rem 1rem;
	border: 1.5px solid var( --fab-amarelo );
	border-radius: 10px;
	background: color-mix( in srgb, var( --fab-amarelo ) 12%, #fff );
}

.fabcfg-enviado-nome {
	font-size: 1rem;
	font-weight: 600;
	word-break: break-word;
}

.fabcfg-remover-arte {
	padding: 0.3rem 0.75rem;
	border: 1.5px solid var( --fab-grafite );
	border-radius: 999px;
	background: transparent;
	color: var( --fab-grafite );
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.fabcfg-remover-arte:hover {
	background: var( --fab-grafite );
	color: #fff;
}

.fabcfg-barra {
	height: 6px;
	margin-top: 0.75rem;
	border-radius: 999px;
	background: var( --fab-borda );
	overflow: hidden;
}

.fabcfg-barra span {
	display: block;
	width: 0;
	height: 100%;
	background: var( --fab-amarelo );
	transition: width 0.12s linear;
}

/* Convite para criar a arte com IA. */
.fabcfg-ia-convite {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 2px solid var(--fab-amarelo);
	border-radius: 10px;
	background: var(--wp--preset--color--acento-suave, var(--wp--preset--color--amarelo-claro, #FDF3DF));
	color: inherit;
	text-decoration: none;
	transition: background .12s, transform .12s;
}
.fabcfg-ia-convite:hover {
	background: color-mix(in srgb, var(--fab-amarelo) 22%, #fff);
	transform: translateY(-1px);
}

.fabcfg-ia-convite-icone {
	font-size: 22px;
	color: var(--wp--preset--color--dourado, #B5892D);
	flex: none;
}

.fabcfg-ia-convite-corpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.4;
}
.fabcfg-ia-convite-corpo strong { font-size: 14.5px; }

.fabcfg-ia-convite-seta {
	margin-left: auto;
	font-size: 26px;
	line-height: 1;
	color: var(--wp--preset--color--dourado, #B5892D);
	flex: none;
}

.fabcfg-ia-ou {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--wp--preset--color--grafite-suave, #6E6A6C);
	text-align: center;
}

/* Arte que veio pronta da tela de IA. */
.fabcfg-ia-pronta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	margin-bottom: 12px;
	border: 2px solid var(--fab-amarelo);
	border-radius: 10px;
	background: var(--wp--preset--color--acento-suave, var(--wp--preset--color--amarelo-claro, #FDF3DF));
}

.fabcfg-ia-pv {
	width: 78px;
	height: 78px;
	object-fit: cover;
	border-radius: 8px;
	flex: none;
	background: #fff;
}

.fabcfg-ia-corpo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 13.5px;
	line-height: 1.4;
}
.fabcfg-ia-corpo strong { font-size: 14.5px; }

.fabcfg-ia-trocar {
	align-self: flex-start;
	margin-top: 4px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 12.5px;
	color: var(--wp--preset--color--dourado-escuro, #8A6820);
	text-decoration: underline;
	cursor: pointer;
}

.fabcfg-depois {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	cursor: pointer;
}

.fabcfg-depois input {
	margin-top: 0.15rem;
	flex-shrink: 0;
}

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

.fabcfg-resumo {
	padding: 1.125rem 1.25rem;
	border: 1.5px solid var( --fab-borda );
	border-radius: 12px;
	background: var( --fab-fundo );
	transition: opacity 0.15s ease;
}

.fabcfg-resumo.esta-calculando {
	opacity: 0.55;
}

.fabcfg-resumo-linha,
.fabcfg-resumo-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.fabcfg-resumo-linha {
	margin-bottom: 0.4rem;
	font-size: 1rem;
	color: var( --fab-suave );
}

.fabcfg-resumo-total {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1.5px solid var( --fab-borda );
	font-size: 1.125rem;
	font-weight: 700;
}

.fabcfg-resumo-total strong {
	font-size: 1.75rem;
	line-height: 1.1;
}

.fabcfg-erro {
	margin: 0.75rem 0 0;
	color: #b32d2e;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* O aviso do minimo e argumento de venda, nao rodape: fica visivel. */
.fabcfg-nota {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background: color-mix( in srgb, var( --fab-amarelo ) 22%, #fff );
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* ---------- escada de desconto ---------- */

.fabcfg-proximo {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background: #fff;
	border: 1.5px dashed var( --fab-amarelo );
	font-size: 0.9375rem;
	line-height: 1.4;
}

.fabcfg-escada {
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1.5px solid var( --fab-borda );
}

.fabcfg-escada-titulo {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --fab-suave );
}

.fabcfg-escada-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.25rem;
}

.fabcfg-degrau {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0.5rem;
	border-radius: 6px;
	font-size: 0.9375rem;
	color: var( --fab-suave );
}

/* O degrau alcancado e o unico que ganha peso: o cliente ve onde esta. */
.fabcfg-degrau.esta-atingido {
	background: color-mix( in srgb, var( --fab-amarelo ) 25%, #fff );
	color: var( --fab-grafite );
	font-weight: 600;
}

.fabcfg-degrau strong {
	white-space: nowrap;
}

.fabcfg-aviso {
	padding: 0.75rem 1rem;
	border-left: 3px solid var( --fab-amarelo );
	background: var( --fab-fundo );
}

.fabcfg-preco-vitrine {
	font-size: 0.9375rem;
	color: var( --fab-suave );
}

/* Contador travado no carrinho: a linha e o lote inteiro, e a contagem de
   etiquetas aparece nos detalhes do item. Fica com cara de dado, nao de campo
   que o cliente tenta editar e nao consegue. */
.fabcfg-qtd-fixa {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.25rem 0.5rem;
	text-align: center;
	color: var( --fab-suave );
}

@media ( max-width: 600px ) {
	.fabcfg-opcoes {
		grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
	}

	.fabcfg-campo {
		max-width: 100%;
		flex: 1 1 140px;
	}
}

/* =========================================================== o palco
   Painel da esquerda: a peca que o cliente esta montando.

   Ele e MOVIDO para ca pelo JavaScript (veja o comentario em produto.php).
   Por isso as regras nao dependem de estar dentro de `.fabcfg`: depois da
   mudanca ele nao esta mais. */

.fabcfg-palco {
	--fab-amarelo: var( --wp--preset--color--acento, var( --wp--preset--color--amarelo, #F3B431 ) );
	--fab-acento-tinta: var( --wp--preset--color--acento-tinta, var( --wp--preset--color--grafite, #373435 ) );
	--fab-grafite: var( --wp--preset--color--grafite, #373435 );
	--fab-suave:   var( --wp--preset--color--grafite-suave, #6E6A6C );
	--fab-borda:   var( --wp--preset--color--borda, #E3E1E2 );
	--fab-fundo:   var( --wp--preset--color--cinza-fundo, #F5F4F3 );
	color: var( --fab-grafite );
}

/* O grude e o ponto do painel: a coluna da direita tem 2.300 px e a esquerda
   acabava em 700, deixando 1.600 px de branco rolando ao lado.

   O `sticky` vai no PROPRIO palco, e nao na caixa de dentro. Elemento grudado
   so viaja dentro do pai, e o pai da caixa e o palco — 535 px de altura, ou
   seja, praticamente nenhuma viagem. O pai do palco e a coluna, com os 2.395 px
   que fazem o painel acompanhar o configurador inteiro. */
.fabcfg-palco {
	position: sticky;
	top: 2rem;
}

.fabcfg-palco-fixo {
	padding: 1.75rem 1.5rem 2rem;
	border: 1px solid var( --fab-borda );
	border-radius: 14px;
	/* A faixa amarela sangra ate a borda; sem isto ela passa por cima do canto
	   arredondado e o cartao ganha dois bicos quadrados no alto. */
	overflow: hidden;
	/* Luz caindo de cima, como numa mesa. Fundo chapado deixa a sombra da peca
	   sem onde pousar. */
	background:
		radial-gradient( 120% 80% at 50% 0%, #FFFFFF 0%, var( --fab-fundo ) 62%, #ECEAE7 100% );
}

/* Faixa amarela atravessando o topo do cartao.
   As margens negativas anulam o respiro do cartao para a faixa encostar nas
   duas bordas; o raio acompanha o do cartao menos a espessura da linha, senao
   sobra um fiapo branco no canto. */
.fabcfg-palco-etapa {
	margin: -1.75rem -1.5rem 1.25rem;
	padding: 0.875rem 1.5rem;
	border-radius: 13px 13px 0 0;
	background: var( --fab-amarelo );
	color: var( --fab-acento-tinta );
	font-size: 1.275rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.fabcfg-palco-desenho svg {
	display: block;
	width: 100%;
	height: auto;
}

.fabcfg-palco-legenda {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	/* O tema herda peso 300 aqui. Ultraleve em cinza sobre fundo claro e a
	   combinacao que mais custa leitura — e este e o texto que explica a etapa. */
	font-weight: 400;
	line-height: 1.55;
	color: var( --fab-suave );
	/* Altura reservada: sem isso o painel inteiro pula de tamanho a cada troca
	   de etapa, e o desenho dança junto. */
	min-height: 4.5em;
}

/* ---------- o desenho ---------- */

/* O corpo da peca: degrade suave e sombra projetada. Sem a sombra, branco sobre
   fundo quase branco vira contorno de desenho tecnico — informa a medida e nao
   desperta nada. */
.fabcfg-peca {
	fill: url( #fabcfg-corpo );
	stroke: none;
	filter: url( #fabcfg-sombra );
}

/* A linha do corte vai por cima de tudo: e ela que o cliente precisa enxergar,
   e com arte dentro ela e a unica coisa separando peca de fundo. */
.fabcfg-peca-linha {
	fill: none;
	stroke: rgba( 55, 52, 53, .38 );
	stroke-width: 1;
}

.fabcfg-cota {
	stroke: var( --fab-amarelo );
	stroke-width: 1.5;
}

.fabcfg-cota-txt {
	fill: var( --fab-suave );
	font-size: 12px;
	font-family: inherit;
}

/* Referencia de tamanho: cartao de credito ficticio, 85,6 x 54 mm, na mesma
   escala da peca (configurador.js, cartaoFicticio). */
.fabcfg-cc-num,
.fabcfg-cc-nome,
.fabcfg-cc-marca {
	fill: #5E6671;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
}

.fabcfg-cc-marca {
	font-family: inherit;
	font-weight: 700;
	fill: #8A929C;
}

/* ---------------------------------------------------- varios modelos */
.fabcfg-modelos {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
}

.fabcfg-modelos[hidden] {
	display: none;
}

.fabcfg-modelos-titulo {
	margin: 0;
	font-size: 0.9375rem;
	color: var( --fab-suave );
}

.fabcfg-modelo {
	display: grid;
	grid-template-columns: 52px 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var( --fab-borda );
	border-radius: 12px;
	background: #fff;
}

.fabcfg-modelo.pendente {
	border-color: #E0A800;
	background: #FFF9E6;
}

.fabcfg-modelo-mini {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: var( --fab-fundo );
}

.fabcfg-modelo-mini img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fabcfg-modelo-corpo {
	display: grid;
	min-width: 0;
	font-size: 0.875rem;
	line-height: 1.3;
}

.fabcfg-modelo-nome {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --fab-suave );
}

.fabcfg-modelo-ok {
	color: #1a7f37;
	font-weight: 700;
}

.fabcfg-modelo-conf {
	justify-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: #9a6700;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.fabcfg-modelo-qtd {
	display: grid;
	gap: 2px;
	font-size: 0.75rem;
	color: var( --fab-suave );
}

.fabcfg-modelo-qtd input {
	width: 84px;
	padding: 6px 8px;
	border: 1px solid var( --fab-borda );
	border-radius: 8px;
	font: inherit;
	font-size: 0.9375rem;
}

.fabcfg-modelo-qtd.baixo input {
	border-color: #d63638;
}

.fabcfg-modelo-del {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var( --fab-fundo );
	color: var( --fab-suave );
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.fabcfg-add-modelo {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	padding: 12px;
	border: 2px dashed var( --fab-borda );
	border-radius: 12px;
	background: transparent;
	color: var( --fab-grafite );
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fabcfg-add-modelo[hidden] {
	display: none;
}

.fabcfg-add-modelo:hover {
	border-color: var( --fab-amarelo );
}

@media ( max-width: 480px ) {
	.fabcfg-modelo {
		grid-template-columns: 44px 1fr auto;
		grid-template-areas: "mini corpo del" "mini qtd qtd";
	}
	.fabcfg-modelo-mini { grid-area: mini; width: 44px; height: 44px; }
	.fabcfg-modelo-corpo { grid-area: corpo; }
	.fabcfg-modelo-qtd { grid-area: qtd; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
	.fabcfg-modelo-del { grid-area: del; }
}

/* Aviso do vinil transparente: so' com ele marcado. */
.fabcfg-dica-transp {
	display: none;
	padding: 0.6rem 0.8rem;
	border-radius: 10px;
	background: #FFF6DB;
	color: #6B5310;
}

.fabcfg-passo:has( input[name="fabcfg_material"][value*="transparente"]:checked ) .fabcfg-dica-transp {
	display: block;
}

/* =========================================================== resumo fixo */

.fabcfg-topo {
	position: sticky;
	/* Folga do alto: encostado na borda da janela ele parece parte do
	   navegador, nao da pagina. */
	top: 1.25rem;
	z-index: 5;
	margin: 0 0 1.75rem;
	padding: 1.125rem 1.375rem;
	border: 1px solid var( --fab-borda );
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 3px 18px rgba( 0, 0, 0, .08 );
	transition: padding .18s ease, box-shadow .18s ease;
}

.fabcfg-topo-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.fabcfg-topo-texto {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.fabcfg-topo-nome {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	/* Nome comprido nao pode empurrar o valor para fora da caixa. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: font-size .18s ease;
}

.fabcfg-topo-cfg {
	font-size: 1.0625rem;
	color: var( --fab-suave );
}

.fabcfg-topo-total {
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.fabcfg-topo-proximo {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var( --fab-suave );
}
.fabcfg-topo-proximo strong { color: var( --fab-grafite ); }

/* Grudado no alto, o nome cede espaco: ele ja foi lido, e quem precisa
   continuar grande e o valor, que muda a cada escolha. */
.fabcfg-topo.esta-compacto {
	padding: 0.75rem 1.25rem;
	box-shadow: 0 4px 22px rgba( 0, 0, 0, .11 );
}
.fabcfg-topo.esta-compacto .fabcfg-topo-nome {
	font-size: 0.9375rem;
	color: var( --fab-suave );
	font-weight: 600;
}

/* =========================================================== o CEP do topo

   O plugin de frete desenha a caixa DUAS vezes: uma logo abaixo do preco e
   outra no fim da coluna. Perguntar o CEP antes de o cliente ter escolhido
   qualquer coisa e pedir dado para calcular frete de um pedido que ainda nao
   existe. Fica a de baixo, que aparece quando ja ha o que cotar.

   Escondida, e nao removida: o bloco continua no template do editor, e o dia
   que o Andre quiser de volta e so apagar esta regra. */
.wp-block-column:has( .fabcfg ) .woo-better-parent-container {
	display: none;
}

/* =========================================================== telas estreitas */

@media ( max-width: 781px ) {
	/* Sem duas colunas nao ha o que grudar: empilhado, um painel fixo cobriria
	   justamente o campo que o cliente esta preenchendo. */
	.fabcfg-palco {
		position: static;
	}
	.fabcfg-palco-legenda {
		min-height: 0;
	}
	.fabcfg-topo {
		/* No celular ele vale mais colado embaixo, no polegar. */
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		border-radius: 0;
		border-width: 1px 0 0;
		box-shadow: 0 -2px 16px rgba( 0, 0, 0, .12 );
	}
	.fabcfg-topo {
		padding: 0.625rem 1rem calc( 0.625rem + env( safe-area-inset-bottom, 0px ) );
	}
	.fabcfg-topo-total { font-size: 1.375rem; }
	.fabcfg-topo-nome { font-size: 0.9375rem; }
	.fabcfg-topo-cfg { font-size: 0.875rem; }
	/* A dica do desconto ja' esta no resumo da pagina; na barra ela so' roubaria
	   altura da tela. */
	.fabcfg-topo-proximo { display: none !important; }
	.fabcfg-topo-acao {
		display: block;
		width: 100%;
		margin-top: 0.5rem;
		padding: 0.8rem 1rem;
		border: 0;
		border-radius: 12px;
		background: var( --fab-amarelo );
		color: var( --fab-acento-tinta );
		font: inherit;
		font-weight: 800;
		font-size: 1.0625rem;
		cursor: pointer;
	}
	/* Espaco para a barra nao tapar o fim da pagina. */
	.fabcfg { padding-bottom: 8.5rem; }

	/* Previa enxuta: no celular ela vem logo abaixo do nome, antes das opcoes. */
	.fabcfg-palco { margin: 0 0 1.25rem; }
	.fabcfg-palco-fixo { padding: 1rem 1rem 1.125rem; }
	.fabcfg-palco-etapa {
		margin: -1rem -1rem 0.75rem;
		padding: 0.625rem 1rem;
		font-size: 1.05rem;
	}
	.fabcfg-palco-desenho svg { max-height: 190px; }
	.fabcfg-palco-legenda {
		margin-top: 0.5rem;
		font-size: 0.9375rem;
		line-height: 1.45;
	}
}

/* O botao da barra so' existe no celular. */
@media ( min-width: 782px ) {
	.fabcfg-topo-acao { display: none; }
}

/* =========================================================== entrega

   Substitui a caixa do plugin de frete, que nao consegue cotar produto sob
   medida: ela le o peso fixo do cadastro e o nosso e calculado a cada
   configuracao. Sem peso ela desiste e imprime "so esta disponivel no
   Carrinho" — um erro na cara do cliente bem na hora de decidir a compra. */

.fabcfg-frete {
	margin-top: 1.5rem;
	padding: 1.25rem 1.25rem 1.375rem;
	border: 1px solid var( --fab-borda );
	border-radius: 12px;
	background: var( --fab-fundo );
}

.fabcfg-frete .fabcfg-titulo { margin-bottom: 0.875rem; }

.fabcfg-frete-linha {
	display: flex;
	align-items: flex-end;
	gap: 0.625rem;
}
.fabcfg-frete-linha .fabcfg-campo { flex: 1 1 auto; max-width: 190px; }

.fabcfg-frete-btn {
	flex: 0 0 auto;
	padding: 0.6875rem 1.25rem;
	border: 1px solid var( --fab-grafite );
	border-radius: 8px;
	background: transparent;
	color: var( --fab-grafite );
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.fabcfg-frete-btn:hover:not(:disabled) {
	background: var( --fab-grafite );
	color: #fff;
}
.fabcfg-frete-btn:disabled { opacity: .5; cursor: default; }

.fabcfg-frete-msg {
	margin: 0.875rem 0 0;
	font-size: 0.9375rem;
	color: var( --fab-suave );
}

.fabcfg-frete-lista {
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.fabcfg-frete-op {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var( --fab-borda );
	font-size: 0.9375rem;
}
.fabcfg-frete-op:last-child { border-bottom: 0; }

.fabcfg-frete-nome { flex: 1 1 auto; font-weight: 600; }
.fabcfg-frete-prazo { color: var( --fab-suave ); white-space: nowrap; }
.fabcfg-frete-preco { white-space: nowrap; font-size: 1.0625rem; }

.fabcfg-frete .fabcfg-dica { margin-top: 0.75rem; }

/* A caixa do plugin sai da pagina do produto: ela nunca vai conseguir cotar
   isto, e o que ela mostra e um pedido de desculpas. No carrinho, onde ela
   funciona, continua intacta.

   `!important` porque o plugin escreve `display: block` no atributo `style` por
   JavaScript, e atributo inline ganha de qualquer folha de estilo. Sem isto a
   regra casa, nao vale, e a caixa antiga fica na tela ao lado da nova. */
.wp-block-column:has( .fabcfg ) .containerCalculator {
	display: none !important;
}

/* Frete gratis puxa o olho: e o argumento, nao mais uma linha da lista. */
.fabcfg-frete-op.e-gratis .fabcfg-frete-preco {
	color: #1E7A4A;
	font-weight: 800;
}
.fabcfg-frete-op.e-gratis .fabcfg-frete-nome { font-weight: 700; }

/* =========================================================== hierarquia

   Ajustes vindos de pesquisa de conversao, nao de gosto:

   1. Corpo nunca abaixo de 16 px, apoio nunca abaixo de 15. Texto menor perde
      leitor a cada degrau, e no celular o efeito e maior. As dicas estavam em
      14 px com peso 300 — pequenas E claras, a combinacao que mais cansa.

   2. Um CTA primario, e ele tem que ganhar por tamanho. O botao tinha 212 px de
      largura numa coluna de 561: menor que qualquer cartao de opcao acima dele.
      Botao mais destacado mede ganho consistente em teste A/B.

   3. O numero do passo vira selo. A sequencia passa a ser lida de relance, sem
      obrigar a ler o titulo inteiro para saber onde se esta. */

.fabcfg-titulo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1.375rem;
	margin-bottom: 0.875rem;
}

.fabcfg-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	border-radius: 999px;
	background: var( --fab-grafite );
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
}

.fabcfg-dica,
.fabcfg-limiar,
.fabcfg-opcao-nota,
.fabcfg-solta span {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.55;
}

/* ---------- o botao de comprar ---------- */

form.cart:has( .fabcfg ) .single_add_to_cart_button {
	display: block;
	/* O tema desenha `form.cart` como grade. `width: 100%` num item de grade vale
	   dentro da CELULA, nao do formulario — o botao ficava com 246 px de uma
	   coluna de 561 e continuava menor que os cartoes de opcao acima dele.
	   Atravessar a linha inteira e o que resolve. */
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 0.5rem;
	padding: 1.125rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: var( --wp--preset--color--acento, var( --wp--preset--color--amarelo, #F3B431 ) );
	color: var( --wp--preset--color--acento-tinta, var( --wp--preset--color--grafite, #373435 ) );
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 4px 16px color-mix( in srgb, var( --wp--preset--color--acento, #F3B431 ) 45%, transparent );
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

form.cart:has( .fabcfg ) .single_add_to_cart_button:hover {
	filter: brightness( 1.04 );
	transform: translateY( -1px );
	box-shadow: 0 6px 20px color-mix( in srgb, var( --wp--preset--color--acento, #F3B431 ) 55%, transparent );
}

/* ---------- garantias sob o botao ---------- */

.fabcfg-garantias {
	/* Mesma grade do botao: sem isto a lista sobe para a celula vizinha e
	   aparece AO LADO do botao em vez de embaixo dele. */
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --wp--preset--color--grafite-suave, #6E6A6C );
}

.fabcfg-garantias li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

/* O certo desenhado em CSS: caractere de fonte muda de forma conforme a fonte
   instalada, e emoji sai colorido demais para um rodape discreto. */
.fabcfg-garantias li::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.85rem;
	margin-top: 0.15rem;
	border: solid #1E7A4A;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}