/*
 * LEO Commerce UI — Header Desktop Action System v0.1 SAFE
 *
 * Objetivo:
 * - uma única linha visual para Informar CEP / Conta / Favoritos / Carrinho;
 * - mesma tipografia, altura de clique, espaçamento e hover;
 * - ícones azuis LEO;
 * - sem alterar a estrutura funcional dos componentes.
 */

@media (min-width: 1000px) {
	#header {
		--leo-header-action-height: 44px;
		--leo-header-action-radius: 10px;
		--leo-header-action-pad-x: 12px;
		--leo-header-action-icon-gap: 7px;
		--leo-header-action-font-size: 14px;
		--leo-header-action-font-weight: 500;
		--leo-header-action-color: #111111;
		--leo-header-action-icon-color: #071f6b;
		--leo-header-action-hover-bg: rgba(224, 151, 0, 0.18);
	}

	/*
	 * A coluna direita passa a se comportar como uma única faixa de ações.
	 * Não altera a largura intrínseca da coluna nem a regra segura da busca.
	 */
	#header [data-column="end"]:has(.ct-header-cta) > [data-items] {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		column-gap: 2px;
		row-gap: 0;
	}

	#header [data-column="end"]:has(.ct-header-cta) > [data-items] > * {
		align-self: center;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Localização: o wrapper não cria altura/margens diferentes do conjunto. */
	#header .ct-header-cta {
		display: flex;
		align-items: center;
		margin: 0;
	}

	/*
	 * Componentes clicáveis do conjunto.
	 * O Account do Blocksy usa .ct-account-item; o Cart usa .ct-cart-item.
	 * Favoritos é o botão próprio já homologado do plugin.
	 */
	#header .ct-header-cta a[href="#leo-cep"],
	#header .ct-account-item,
	#header .leo-favorites-trigger,
	#header .ct-cart-item {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: var(--leo-header-action-icon-gap) !important;
		min-height: var(--leo-header-action-height) !important;
		height: var(--leo-header-action-height) !important;
		padding: 0 var(--leo-header-action-pad-x) !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: var(--leo-header-action-radius) !important;
		background-color: transparent !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
		color: var(--leo-header-action-color) !important;
		font-size: var(--leo-header-action-font-size) !important;
		font-weight: var(--leo-header-action-font-weight) !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		vertical-align: middle !important;
		transition: background-color 0.16s ease, color 0.16s ease !important;
	}

	/* Hover/foco único, equivalente ao comportamento visual da referência. */
	#header .ct-header-cta a[href="#leo-cep"]:hover,
	#header .ct-header-cta a[href="#leo-cep"]:focus-visible,
	#header .ct-account-item:hover,
	#header .ct-account-item:focus-visible,
	#header .leo-favorites-trigger:hover,
	#header .leo-favorites-trigger:focus-visible,
	#header .ct-cart-item:hover,
	#header .ct-cart-item:focus-visible {
		background-color: var(--leo-header-action-hover-bg) !important;
		color: var(--leo-header-action-color) !important;
	}

	/* Foco por teclado visível sem transformar o componente em outro layout. */
	#header .ct-header-cta a[href="#leo-cep"]:focus-visible,
	#header .ct-account-item:focus-visible,
	#header .leo-favorites-trigger:focus-visible,
	#header .ct-cart-item:focus-visible {
		outline: 2px solid var(--leo-header-action-icon-color) !important;
		outline-offset: 2px !important;
	}

	/* Ícones normalizados na mesma caixa visual e na cor da identidade LEO. */
	#header .ct-header-cta a[href="#leo-cep"] .leo-cep-trigger-icon,
	#header .ct-header-cta a[href="#leo-cep"] svg,
	#header .ct-account-item svg,
	#header .leo-favorites-trigger svg,
	#header .ct-cart-item svg {
		width: 19px !important;
		height: 19px !important;
		min-width: 19px !important;
		flex: 0 0 19px !important;
		color: var(--leo-header-action-icon-color) !important;
	}

	/*
	 * Rótulos da localização e do favorito seguem exatamente o mesmo token
	 * tipográfico dos rótulos nativos do Account/Cart.
	 */
	#header .ct-header-cta a[href="#leo-cep"] .leo-cep-trigger-label,
	#header .leo-favorites-trigger::after,
	#header .ct-account-item,
	#header .ct-account-item span,
	#header .ct-cart-item,
	#header .ct-cart-item span {
		font-size: var(--leo-header-action-font-size) !important;
		font-weight: var(--leo-header-action-font-weight) !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
	}

	#header .ct-header-cta a[href="#leo-cep"] .leo-cep-trigger-label,
	#header .leo-favorites-trigger::after {
		color: var(--leo-header-action-color) !important;
	}

	/*
	 * O badge continua ancorado ao ícone, mas sem alterar a altura da linha.
	 * A regra de contagem e a atualização AJAX permanecem intocadas.
	 */
	#header .leo-favorites-trigger__count,
	#header .ct-cart-item [class*="badge"],
	#header .ct-cart-item [class*="count"] {
		min-width: 14px !important;
		height: 14px !important;
		padding: 0 3px !important;
		border-radius: 999px !important;
		font-size: 9px !important;
		font-weight: 600 !important;
		line-height: 14px !important;
		letter-spacing: 0 !important;
		box-sizing: border-box !important;
	}

	/* O contador dos Favoritos fica preso ao canto superior do coração, não acima do botão. */
	#header .leo-favorites-trigger__count {
		top: 4px !important;
		left: 24px !important;
		right: auto !important;
	}
}