/**
 * Escolha de variacao DENTRO do popover da vitrine.
 *
 * Este arquivo NAO desenha popover nenhum: o popover, a folha inferior do
 * celular, o puxador, o cabecalho, o seletor de quantidade e o botao de
 * confirmar continuam sendo do plugin, exatamente como sempre foram. Aqui so
 * vive o bloco de opcoes injetado dentro da caixa, e ele herda o ambiente que
 * ja esta la.
 *
 *
 * A GUERRA DE ESPECIFICIDADE - por que quase tudo aqui e "button.x.x"
 * -------------------------------------------------------------------
 * Medido em 25/08/2026 na categoria Calcados, com 14.719 regras examinadas em
 * 103 folhas de estilo. As opcoes apareciam como CAIXAS VAZIAS na tela: o
 * numero do tamanho estava no HTML, mas pintado de branco sobre fundo branco.
 *
 * Dois vizinhos mandam em todo <button> desta loja:
 *
 *   [type="button"], button        (0,1,0) - do reset do tema
 *       color: #c36; border: 1px solid #c36; border-radius: 3px;
 *       font-size: 1rem; font-weight: 400; padding: .5rem 1rem;
 *       e no hover: background #c36 com texto BRANCO
 *
 *   .elementor-kit-76 button       (0,1,1) - do kit global do Elementor
 *       color: #FFFFFF; border-radius: 5px; e toda a tipografia "accent"
 *
 * A regra do kit tem especificidade (0,1,1). Uma classe sozinha
 * (.mgm-varbloco-opcao) tem (0,1,0) e PERDE - nao importa a ordem das folhas.
 * Foi exatamente por isso que o texto saiu branco, a fonte saiu 12px e o
 * arredondamento saiu 5px em vez do que este arquivo pedia.
 *
 * A saida e subir de patamar sem usar !important: repetir a classe.
 *   button.mgm-varbloco-opcao.mgm-varbloco-opcao   ->  (0,2,1), vence o kit
 *   ...:hover                                      ->  (0,3,1), vence o hover
 *
 * !important resolveria hoje e criaria um problema amanha: quem quisesse
 * ajustar a cor pelo editor do Elementor nao conseguiria mais. Com a classe
 * repetida, a variavel continua mandando.
 *
 * Por isso tambem TODA propriedade que o kit define e redeclarada aqui
 * (familia, tamanho, peso, entrelinha, espacamento, arredondamento, cor):
 * o que nao for redeclarado vaza do kit e volta a estragar o desenho.
 *
 *
 * ONDE ISTO E EDITADO
 * -------------------
 * Nada aqui e valor fixo: cada aparencia sai de uma variavel --mgmvb-*, e
 * cada variavel tem um controle no editor do Elementor, dentro do widget da
 * vitrine (aba Estilo > "Opcoes de variacao (popover)"). O valor de reserva
 * depois da virgula e so o que aparece enquanto o lojista nao escolheu nada.
 *
 * A camada do popover fica pendurada no <body>, FORA do widget - entao as
 * variaveis sao copiadas do widget para a camada pelo JavaScript, na abertura.
 *
 *
 * COR DE DESTAQUE: a ordem da reserva importa e foi corrigida depois de medir.
 * O syncLayerSkin() do plugin copia --mgm-accent do widget para a camada, mas
 * nos widgets que ainda nao foram ajustados essa variavel carrega o LARANJA DE
 * FABRICA do plugin, #F5620A, que e da outra loja. Medido: a borda do tamanho
 * escolhido saiu #F5620A. Por isso a global do Elementor, que cada loja define
 * no proprio kit, vem PRIMEIRO; --mgm-accent fica so como reserva.
 */

/* ---------------------------------------------------------------------------
 * 1. O bloco
 * ------------------------------------------------------------------------ */

.mgm-varbloco {
	margin: 0 0 var( --mgmvb-bloco-baixo, 18px );
}

.mgm-varbloco-carregando {
	margin: 0;
	padding: 6px 0;
	color: var( --mgmvb-rotulo-cor, var( --mgm-muted, #6B7280 ) );
	font-size: 13px;
}

.mgm-varbloco-attr + .mgm-varbloco-attr {
	margin-top: var( --mgmvb-attr-gap, 18px );
}

/* ---------------------------------------------------------------------------
 * 2. O rotulo ("Tamanho", "Cor"...)
 *
 * Fica sozinho na propria linha, com respiro ate a grade. Antes ele nascia
 * colado nas opcoes e parecia legenda de outra coisa.
 * ------------------------------------------------------------------------ */

.mgm-varbloco .mgm-varbloco-rotulo {
	display: block;
	margin: 0 0 var( --mgmvb-rotulo-gap, 10px );
	color: var( --mgmvb-rotulo-cor, var( --mgm-heading, #18181B ) );
	font-family: inherit;
	font-size: var( --mgmvb-rotulo-tam, 13px );
	font-weight: var( --mgmvb-rotulo-peso, 700 );
	line-height: 1.2;
	letter-spacing: var( --mgmvb-rotulo-esp, .04em );
	text-transform: var( --mgmvb-rotulo-caixa, none );
}

/* ---------------------------------------------------------------------------
 * 3. A grade
 *
 * Colunas de largura igual que se acomodam sozinhas: numero de calcado cabe
 * em coluna estreita, tamanho escrito ("Extra Grande") pede coluna larga, e
 * auto-fill resolve os dois sem o lojista configurar nada.
 * ------------------------------------------------------------------------ */

.mgm-varbloco .mgm-varbloco-grade {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --mgmvb-min, 60px ), 1fr ) );
	gap: var( --mgmvb-gap, 8px );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------------------
 * 4. A opcao em repouso
 *
 * Aqui mora a classe repetida. Ver a nota de especificidade la em cima antes
 * de "simplificar" para uma classe so: o texto volta a ficar branco.
 * ------------------------------------------------------------------------ */

button.mgm-varbloco-opcao.mgm-varbloco-opcao {
	min-height: var( --mgmvb-alt, 46px );
	margin: 0;
	padding: 0 var( --mgmvb-lado, 8px );
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	border: var( --mgmvb-borda-larg, 1px ) solid var( --mgmvb-borda, var( --mgm-border, #D4D4D8 ) );
	border-radius: var( --mgmvb-raio, 8px );
	background-color: var( --mgmvb-bg, #FFFFFF );
	background-image: none;
	color: var( --mgmvb-texto, var( --mgm-heading, #18181B ) );

	font-family: inherit;
	font-size: var( --mgmvb-fonte, 14px );
	font-weight: var( --mgmvb-peso, 600 );
	line-height: 1;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: center;
	text-transform: none;
	white-space: nowrap;

	cursor: pointer;
	user-select: none;
	appearance: none;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* ---------------------------------------------------------------------------
 * 5. Ao passar o mouse
 *
 * Precisa de (0,3,1) porque o reset do tema pinta TODO button:hover de rosa
 * com texto branco - era mais um caminho para a opcao sumir.
 * ------------------------------------------------------------------------ */

button.mgm-varbloco-opcao.mgm-varbloco-opcao:hover,
button.mgm-varbloco-opcao.mgm-varbloco-opcao:focus {
	border-color: var( --mgmvb-hover, var( --mgm-heading, #18181B ) );
	background-color: var( --mgmvb-hover-bg, var( --mgmvb-bg, #FFFFFF ) );
	color: var( --mgmvb-hover-texto, var( --mgmvb-texto, var( --mgm-heading, #18181B ) ) );
	text-decoration: none;
}

button.mgm-varbloco-opcao.mgm-varbloco-opcao:focus:not( :focus-visible ) {
	outline: none;
}

button.mgm-varbloco-opcao.mgm-varbloco-opcao:focus-visible {
	outline: 2px solid var( --mgmvb-sel-borda, var( --e-global-color-secondary, var( --mgm-accent, #18181B ) ) );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 6. A opcao escolhida
 *
 * Borda mais grossa em vez de fundo colorido, como fazem Nike e Adidas: a
 * escolha fica obvia sem o numero perder contraste. A grossura entra por
 * dentro (box-sizing: border-box la em cima), entao nada se mexe de lugar
 * quando o cliente troca de tamanho.
 * ------------------------------------------------------------------------ */

button.mgm-varbloco-opcao.mgm-varbloco-opcao.is-escolhida {
	border-width: var( --mgmvb-sel-larg, 2px );
	border-color: var( --mgmvb-sel-borda, var( --e-global-color-secondary, var( --mgm-accent, #18181B ) ) );
	background-color: var( --mgmvb-sel-bg, var( --mgmvb-bg, #FFFFFF ) );
	color: var( --mgmvb-sel-texto, var( --mgmvb-texto, var( --mgm-heading, #18181B ) ) );
}

/* ---------------------------------------------------------------------------
 * 7. A opcao esgotada
 *
 * Visivel e riscada, nunca escondida: o cliente precisa saber que o tamanho
 * existe e acabou - e nao concluir que a loja nao trabalha com aquele numero.
 * O risco e um gradiente de canto a canto, sem elemento extra no HTML.
 * ------------------------------------------------------------------------ */

button.mgm-varbloco-opcao.mgm-varbloco-opcao.is-esgotada,
button.mgm-varbloco-opcao.mgm-varbloco-opcao.is-esgotada:hover {
	border-width: var( --mgmvb-borda-larg, 1px );
	border-color: var( --mgmvb-off-borda, #E5E7EB );
	background-color: var( --mgmvb-off-bg, #FAFAFA );
	color: var( --mgmvb-off-texto, #9CA3AF );
	cursor: not-allowed;
	background-image: linear-gradient(
		to top right,
		transparent calc( 50% - .5px ),
		var( --mgmvb-off-risco, #D4D4D8 ) calc( 50% - .5px ),
		var( --mgmvb-off-risco, #D4D4D8 ) calc( 50% + .5px ),
		transparent calc( 50% + .5px )
	);
}

/* ---------------------------------------------------------------------------
 * 8. O aviso de "falta escolher"
 * ------------------------------------------------------------------------ */

.mgm-varbloco .mgm-varbloco-aviso {
	margin: 10px 0 0;
	color: var( --mgmvb-aviso-cor, #B42318 );
	font-size: 13px;
	line-height: 1.4;
}

.mgm-varbloco .mgm-varbloco-aviso[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 9. O botao de confirmar
 *
 * E o botao do plugin; aqui so os dois estados que este modulo cria - apagado
 * enquanto falta escolher, e ocupado enquanto o carrinho responde. Mesma
 * convencao do botao da pagina de produto: o mesmo botao, apagado.
 * ------------------------------------------------------------------------ */

.mgmc-qty-popover-add.mgm-varbloco-add-off {
	opacity: .5;
	cursor: not-allowed;
}

.mgmc-qty-popover-add[aria-busy="true"] {
	opacity: .7;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
 * 10. Celular
 *
 * Alvo maior: na folha inferior o dedo cobre a opcao inteira, e errar o
 * tamanho e o tipo de erro que so aparece na entrega.
 * ------------------------------------------------------------------------ */

@media ( max-width: 767px ) {
	.mgm-varbloco .mgm-varbloco-grade {
		grid-template-columns: repeat( auto-fill, minmax( var( --mgmvb-min-mob, var( --mgmvb-min, 60px ) ), 1fr ) );
		gap: var( --mgmvb-gap-mob, var( --mgmvb-gap, 8px ) );
	}

	button.mgm-varbloco-opcao.mgm-varbloco-opcao {
		min-height: var( --mgmvb-alt-mob, var( --mgmvb-alt, 46px ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	button.mgm-varbloco-opcao.mgm-varbloco-opcao {
		transition: none;
	}
}
