/**
 * =========================================================
 * COTEIA — MENU PRINCIPAL
 * 0.4.0-alpha.18
 * =========================================================
 */

:root {
	--coteia-menu-background: #255FB7;
	--coteia-menu-text: #FFFFFF;
	--coteia-menu-height: 58px;
	--coteia-menu-font: var(--coteia-font-text);
	--coteia-menu-weight: 600;

	--coteia-menu-offer-bg: #FFE600;
	--coteia-menu-offer-text: #0F172A;
	--coteia-menu-offer-radius: 10px;
	--coteia-menu-offer-hover-bg: #FFD900;
	--coteia-menu-offer-active-bg: #FFE600;
	--coteia-menu-offer-inactive-opacity: 92;

	--coteia-menu-quick-bg: rgba(37, 95, 183, 0.16);
	--coteia-menu-quick-text: #FFFFFF;
	--coteia-menu-quick-icon: #FFFFFF;
	--coteia-menu-quick-radius: 10px;

	--coteia-menu-more-bg: #FFFFFF;
	--coteia-menu-more-text: #1E293B;
	--coteia-menu-more-hover: #F1F5F9;
	--coteia-menu-divider: rgba(255, 255, 255, 0.28);
}

.coteia-main-menu {
	position: relative;
	z-index: 900;

	width: 100%;

	background: var(--coteia-menu-background);

	color: var(--coteia-menu-text);

	font-family: var(--coteia-menu-font);
	font-weight: var(--coteia-menu-weight);
}

.coteia-main-menu-inner {
	display: grid;

	grid-template-columns:
		auto
		minmax(0, 1fr)
		auto;

	align-items: center;

	gap: 12px;

	width: 100%;
	min-height: var(--coteia-menu-height);

	margin: 0 auto;

	padding:
		7px
		var(--coteia-page-padding-desktop);
}

.coteia-main-menu-layout-boxed .coteia-main-menu-inner {
	max-width: var(--coteia-content-width);
}

.coteia-main-menu-layout-full .coteia-main-menu-inner {
	max-width: none;
}

.coteia-menu-offer-column,
.coteia-menu-quick-column {
	display: flex;
	align-items: center;

	min-width: 0;
}

.coteia-menu-column-divider {
	display: block;

	width: 1px;
	height: 30px;

	flex: 0 0 1px;

	background: var(--coteia-menu-divider);
}
.coteia-menu-offer {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 42px;

	padding: 8px 17px;

	border-radius: var(--coteia-menu-offer-radius);

	background: var(--coteia-menu-offer-bg);

	color: var(--coteia-menu-offer-text);

	font-weight: 700;

	white-space: nowrap;

	text-decoration: none;

	transition:
		transform var(--coteia-transition-fast),
		box-shadow var(--coteia-transition-fast);
}

.coteia-menu-offer:hover,
.coteia-menu-offer:focus-visible {
	color: var(--coteia-menu-offer-text);

	transform: translateY(-1px);

	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}

.coteia-menu-offer {
	background: var(--coteia-menu-offer-bg) !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	opacity: 1 !important;
}



.coteia-menu-offer:hover,
.coteia-menu-offer:focus-visible {
	/*
	 * Hover também possui fundo próprio e não depende
	 * do estado anterior do botão.
	 */
	background: var(--coteia-menu-offer-hover-bg) !important;
	opacity: 1 !important;
}

.coteia-menu-offer > span,
.coteia-menu-offer-icon {
	opacity: 1 !important;
}

.coteia-menu-offer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 19px;
	height: 19px;

	flex: 0 0 19px;

	color: #FF7A00;
}

.coteia-menu-offer-icon svg {
	display: block;

	width: 19px;
	height: 19px;
}

.coteia-menu-offer[aria-disabled="true"],
.coteia-menu-quick-button[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.75;
}

.coteia-menu-categories-column {
	position: relative;

	min-width: 0;
}

.coteia-menu-categories-desktop {
	display: flex;
	align-items: center;

	width: 100%;
	min-width: 0;

	overflow: visible;
}

.coteia-menu-category-items {
	display: flex;
	align-items: center;

	gap: 3px;

	min-width: 0;
	flex: 1 1 auto;

	overflow: hidden;
}

.coteia-menu-category-link,
.coteia-menu-more-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 40px;

	padding: 7px 11px;

	border: 0;
	border-radius: 8px;

	background: transparent;

	color: var(--coteia-menu-text);

	font-family: inherit;
	font-size: 0.89rem;
	font-weight: inherit;

	line-height: 1.15;

	white-space: nowrap;

	text-decoration: none;

	cursor: pointer;

	transition:
		background var(--coteia-transition-fast),
		color var(--coteia-transition-fast);
}

.coteia-menu-category-link:hover,
.coteia-menu-category-link:focus-visible,
.coteia-menu-more-toggle:hover,
.coteia-menu-more-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);

	color: #FFFFFF;
}

.coteia-menu-more {
	position: relative;

	flex: 0 0 auto;
}

.coteia-menu-more-toggle {
	gap: 5px;
}

.coteia-menu-more-toggle svg {
	width: 13px;
	height: 13px;

	transition: transform var(--coteia-transition-fast);
}

.coteia-menu-more-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.coteia-menu-more-dropdown {
	position: absolute;

	top: calc(100% + 8px);
	right: 0;

	z-index: 9999;

	min-width: 210px;
	max-width: min(320px, 90vw);

	padding: 6px;

	border: var(--coteia-menu-more-border-width) solid var(--coteia-menu-more-border);
	border-radius: var(--coteia-menu-more-radius);

	background: var(--coteia-menu-more-bg);

	box-shadow: var(--coteia-menu-more-shadow);
}

.coteia-menu-more-dropdown[hidden] {
	display: none !important;
}

.coteia-menu-more-dropdown .coteia-menu-category-link {
	display: flex;
	justify-content: flex-start;

	width: 100%;
	min-height: 38px;

	color: var(--coteia-menu-more-text);
}

.coteia-menu-more-dropdown .coteia-menu-category-link:hover,
.coteia-menu-more-dropdown .coteia-menu-category-link:focus-visible {
	background: var(--coteia-menu-more-hover);
	color: var(--coteia-menu-more-text);
}

.coteia-menu-quick-column {
	gap: 7px;

	justify-content: flex-end;
}

.coteia-menu-quick-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	min-height: 42px;

	padding: 8px 10px;

	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--coteia-menu-quick-radius);

	background: var(--coteia-menu-quick-bg);

	color: var(--coteia-menu-quick-text);
	opacity: 1;

	font-size: 0.86rem;
	font-weight: 600;

	white-space: nowrap;

	text-decoration: none;

	transition:
		background var(--coteia-transition-fast),
		border-color var(--coteia-transition-fast),
		transform var(--coteia-transition-fast);
}

.coteia-menu-quick-button:hover,
.coteia-menu-quick-button:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.22);

	color: #FFFFFF;

	transform: translateY(-1px);

	opacity: 1;
}

.coteia-menu-quick-button,
.coteia-menu-quick-button:visited,
.coteia-menu-quick-button:hover,
.coteia-menu-quick-button:focus-visible,
.coteia-menu-quick-button:active {
	color: var(--coteia-menu-quick-text) !important;
	opacity: 1 !important;
}

.coteia-menu-quick-button > span:not(.coteia-menu-quick-icon) {
	color: var(--coteia-menu-quick-text) !important;
	opacity: 1 !important;
}

.coteia-menu-quick-icon,
.coteia-menu-quick-icon svg {
	color: var(--coteia-menu-quick-icon) !important;
	opacity: 1 !important;
}

.coteia-menu-quick-button > span:not(.coteia-menu-quick-icon) {
	font-weight: 600;
}

.coteia-menu-quick-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	color: var(--coteia-menu-quick-icon);
}

.coteia-menu-quick-icon svg {
	display: block;

	width: 18px;
	height: 18px;
}

.coteia-menu-mobile-toggle,
.coteia-menu-mobile-panel {
	display: none;
}


/* 0.4.0-alpha.18 — desktop em linha única */
@media (min-width: 1025px) {
	.coteia-main-menu-inner {
		display: grid !important;
		grid-template-columns: auto 1px minmax(0, 1fr) 1px auto;
		align-items: center;
		column-gap: 12px;
		row-gap: 0;
		flex-wrap: nowrap !important;
	}
	.coteia-menu-offer-column { grid-column: 1; width: max-content; min-width: 0; margin: 0 !important; }
	.coteia-menu-divider-after-offer { grid-column: 2; margin: 0 !important; }
	.coteia-menu-categories-column {
		grid-column: 3; width: 100%; min-width: 0; margin: 0 !important;
		justify-self: stretch; overflow: hidden;
	}
	.coteia-menu-divider-before-quick { grid-column: 4; margin: 0 !important; }
	.coteia-menu-quick-column {
		grid-column: 5; width: max-content; min-width: 0; margin: 0 !important;
		justify-self: end; white-space: nowrap;
	}
	.coteia-menu-categories-track,
	.coteia-menu-categories-list {
		display: flex; align-items: center; justify-content: flex-start !important;
		width: 100%; min-width: 0; margin: 0 !important; padding-left: 0 !important;
		gap: 18px; white-space: nowrap;
	}
}


/* Sem Ofertas: Categorias assume imediatamente a primeira coluna útil. */
@media (min-width: 1025px) {
	.coteia-main-menu.coteia-menu-no-offer .coteia-main-menu-inner {
		grid-template-columns: minmax(0, 1fr) 1px auto !important;
		column-gap: 8px;
	}

	.coteia-main-menu.coteia-menu-no-offer .coteia-menu-categories-column {
		grid-column: 1 !important;
		justify-self: stretch;
		padding-left: 0 !important;
	}

	.coteia-main-menu.coteia-menu-no-offer .coteia-menu-divider-before-quick {
		grid-column: 2 !important;
	}

	.coteia-main-menu.coteia-menu-no-offer .coteia-menu-quick-column {
		grid-column: 3 !important;
	}

	.coteia-main-menu.coteia-menu-no-offer .coteia-menu-category-items,
	.coteia-main-menu.coteia-menu-no-offer .coteia-menu-categories-desktop {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
}


/* =========================================================
   0.4.0-alpha.18 — ATIVOS DE ÍCONE DO MENU
   ========================================================= */

.coteia-menu-offer-icon,
.coteia-menu-quick-icon {
	line-height: 1;
}

.coteia-menu-offer-icon.coteia-menu-icon-emoji {
	width: auto;
	height: auto;
	min-width: 19px;

	flex-basis: auto;

	font-size: 18px;
	font-family:
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Noto Color Emoji",
		sans-serif;

	color: inherit;
}

.coteia-menu-offer-icon.coteia-menu-icon-fontawesome i,
.coteia-menu-quick-icon.coteia-menu-icon-fontawesome i {
	display: block;

	font-size: 1em;
	line-height: 1;
}

.coteia-menu-offer-icon.coteia-menu-icon-image img,
.coteia-menu-quick-icon.coteia-menu-icon-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
}

.coteia-menu-offer-icon.coteia-menu-icon-image {
	width: 19px;
	height: 19px;
}

.coteia-menu-quick-icon.coteia-menu-icon-image {
	width: 18px;
	height: 18px;
}

.coteia-menu-icon-builtin svg {
	display: block;

	width: 100%;
	height: 100%;
}


/* =========================================================
   0.4.0-alpha.18 — ÍCONE 🔥 DE OFERTAS
   ========================================================= */

/*
 * Ajuste fino para reproduzir a referência aprovada:
 * chama compacta, imediatamente antes do texto e centralizada
 * verticalmente no botão amarelo.
 */
.coteia-menu-offer-icon.coteia-menu-icon-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 22px;
	min-width: 22px;
	height: 24px;

	margin: 0 1px 0 0;

	flex: 0 0 22px;

	font-size: 20px;
	line-height: 1;

	vertical-align: middle;

	transform: translateY(-1px);
}

.coteia-menu-offer-button {
	align-items: center;
}

.coteia-menu-offer-button
.coteia-menu-offer-icon
+ span {
	display: inline-flex;
	align-items: center;
}


/* =========================================================
   0.4.0-alpha.18 — 🔥 U+1F525 / PROTÓTIPO APROVADO
   ========================================================= */

/*
 * O ícone padrão de Ofertas do dia é literalmente o emoji Unicode
 * Fire U+1F525. Não é Font Awesome, SVG ou ícone CSS.
 *
 * Mantemos os outros tipos de ativo como opções configuráveis,
 * porém o padrão do tema usa o emoji nativo do sistema/navegador.
 */
.coteia-menu-offer-icon.coteia-menu-icon-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: auto;
	min-width: 0;
	height: auto;

	margin: 0;
	flex: 0 0 auto;

	font-size: 16px;
	line-height: 1;

	vertical-align: middle;
	transform: none;
}

/*
 * Reproduz a relação visual do protótipo:
 * emoji + 6px + texto, ambos centralizados verticalmente.
 *
 * As demais propriedades já aprovadas do botão (cores, raio,
 * tipografia e dimensões configuráveis) continuam sendo controladas
 * pelo Menu do tema.
 */
.coteia-menu-offer-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}


/* =========================================================
   0.4.0-alpha.18 — CATEGORIAS / MAIS... / SHORTCODE
   ========================================================= */

/*
 * Fonte de shortcode existe somente para hidratar os links normalizados
 * via JavaScript e nunca participa visualmente do layout.
 */
.coteia-menu-shortcode-source {
	display: none !important;
}

/*
 * Garante que o container de categorias possa efetivamente encolher,
 * requisito para o cálculo correto de overflow em layouts flex/grid.
 */
.coteia-menu-categories-column,
.coteia-menu-categories-desktop,
.coteia-menu-category-items {
	min-width: 0;
}

/*
 * Os itens movidos para "Mais..." não podem ficar sujeitos ao overflow
 * horizontal aplicado à faixa principal.
 */
.coteia-menu-more-dropdown {
	overflow: visible;
}


/* =========================================================
   0.4.0-alpha.18 — CORREÇÃO VISUAL DO DROPDOWN "MAIS..."
   ========================================================= */

/*
 * Em uma regra desktop legada, a coluna de Categorias recebia
 * overflow:hidden. Como o dropdown é absoluto e nasce dentro dessa
 * coluna, ele abria corretamente no DOM, mas era recortado pelo pai.
 *
 * O overflow horizontal continua sendo controlado exclusivamente por
 * .coteia-menu-category-items. A coluna externa deve permitir o dropdown.
 */
@media (min-width: 1025px) {
	.coteia-main-menu .coteia-menu-categories-column {
		overflow: visible !important;
	}

	.coteia-main-menu .coteia-menu-categories-desktop {
		overflow: visible !important;
	}

	.coteia-main-menu .coteia-menu-more {
		overflow: visible !important;
		z-index: 10020;
	}

	.coteia-main-menu .coteia-menu-more-dropdown {
		z-index: 10030;
	}
}

/*
 * O Menu fixo precisa criar uma camada acima do conteúdo da página
 * para que o dropdown não seja coberto por Hero/cards/conteúdo.
 */
.coteia-main-menu {
	isolation: isolate;
}

.coteia-menu-category-items {
	overflow: hidden;
}


/* =========================================================
   0.4.0-alpha.18 — DROPDOWN "MAIS..." EM GRADE HORIZONTAL
   ========================================================= */

.coteia-menu-more-dropdown {
	width: min(
		var(--coteia-menu-more-width, 100%),
		100vw
	);
	max-width: var(--coteia-menu-more-width, 100%);

	display: grid;
	grid-template-columns:
		repeat(
			var(--coteia-menu-more-columns, 1),
			minmax(0, 1fr)
		);

	column-gap: 4px;
	row-gap: 4px;

	padding: 8px;

	background: var(--coteia-menu-more-bg, #2968C8);

	box-sizing: border-box;

	right: 0;
	left: auto;
}

.coteia-menu-more-dropdown
.coteia-menu-category-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	width: 100%;
	min-width: 0;
	min-height: 36px;

	padding: 7px 10px;

	border-radius: 8px;

	color: var(--coteia-menu-more-text, #FFFFFF);

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.coteia-menu-more-dropdown
.coteia-menu-category-link:hover,
.coteia-menu-more-dropdown
.coteia-menu-category-link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.coteia-menu-more-dropdown {
		max-width: min(
			var(--coteia-menu-more-width, 100%),
			calc(100vw - 24px)
		);
	}
}


/* =========================================================
   0.4.0-alpha.18 — RESPONSIVIDADE DO DROPDOWN "MAIS..."
   ========================================================= */

/*
 * Tablet.
 *
 * A grade recebe 3 ou 4 colunas via JavaScript conforme a largura
 * realmente disponível. A altura é limitada e, se necessário,
 * o próprio dropdown passa a rolar verticalmente.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.coteia-main-menu .coteia-menu-more-dropdown {
		width: min(
			var(--coteia-menu-more-width, 100%),
			calc(100vw - 32px)
		);

		max-width: calc(100vw - 32px);
		max-height: min(52vh, 420px);

		overflow-x: hidden;
		overflow-y: auto;

		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;

		scrollbar-gutter: stable;
	}

	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		min-width: 0;

		padding: 8px 9px;

		font-size: 0.86rem;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/*
 * Mobile.
 *
 * O dropdown usa exatamente duas colunas, isto é:
 * duas categorias por linha.
 *
 * A largura fica dentro da viewport e a lista extensa não aumenta
 * indefinidamente a página: passa a ter rolagem interna.
 */
@media (max-width: 767px) {
	.coteia-main-menu .coteia-menu-more {
		position: static;
	}

	.coteia-main-menu .coteia-menu-more-dropdown {
		position: absolute;

		left: 12px;
		right: 12px;
		top: calc(100% + 6px);

		width: auto !important;
		max-width: none !important;

		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;

		column-gap: 5px;
		row-gap: 5px;

		max-height: min(58vh, 420px);

		padding: 8px;

		overflow-x: hidden;
		overflow-y: auto;

		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;

		scrollbar-gutter: stable;

		box-sizing: border-box;
	}

	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		min-width: 0;
		min-height: 38px;

		padding: 8px 8px;

		font-size: 0.84rem;
		line-height: 1.15;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*
	 * Garante espaço lateral de segurança mesmo em aparelhos estreitos.
	 */
	.coteia-main-menu-inner,
	.coteia-menu-categories-column,
	.coteia-menu-mobile-panel {
		min-width: 0;
	}
}

/*
 * Telas móveis muito estreitas:
 * mantém duas colunas, mas compacta discretamente os itens.
 */
@media (max-width: 420px) {
	.coteia-main-menu
	.coteia-menu-more-dropdown {
		left: 8px;
		right: 8px;

		column-gap: 4px;
		row-gap: 4px;

		padding: 7px;
	}

	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		padding: 7px 6px;

		font-size: 0.80rem;
	}
}


/* =========================================================
   0.4.0-alpha.18 — MOBILE PORTRAIT / 2 COLUNAS REAIS
   ========================================================= */

/*
 * No mobile vertical, o dropdown precisa usar a largura real da viewport
 * e não a largura estreita residual do bloco onde o botão "Mais..." está.
 *
 * O dropdown é posicionado em relação ao Menu principal e ocupa a área
 * útil da tela, preservando duas colunas reais.
 */
@media (max-width: 767px) {
	.coteia-main-menu {
		overflow: visible !important;
	}

	.coteia-main-menu-inner {
		position: relative;
		overflow: visible !important;
	}

	.coteia-main-menu .coteia-menu-categories-column,
	.coteia-main-menu .coteia-menu-categories-desktop,
	.coteia-main-menu .coteia-menu-more {
		overflow: visible !important;
	}

	.coteia-main-menu .coteia-menu-more {
		position: static !important;
	}

	.coteia-main-menu .coteia-menu-more-dropdown {
		/*
		 * Usa quase toda a viewport no portrait.
		 * 16px de respiro em cada lado.
		 */
		position: fixed !important;

		left: 16px !important;
		right: 16px !important;

		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;

		/*
		 * O top será atualizado por JS para ficar logo abaixo
		 * do Menu principal.
		 */
		top: var(--coteia-menu-more-mobile-top, 64px) !important;

		display: grid !important;
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr) !important;

		grid-auto-flow: row;

		column-gap: 6px;
		row-gap: 6px;

		/*
		 * Altura rolável efetiva.
		 * Não depende da lista ultrapassar apenas um max-height teórico.
		 */
		height: auto;
		max-height: calc(100dvh - var(--coteia-menu-more-mobile-top, 64px) - 16px) !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;

		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;

		scrollbar-gutter: stable;

		box-sizing: border-box;

		z-index: 12050 !important;
	}

	.coteia-main-menu .coteia-menu-more-dropdown[hidden] {
		display: none !important;
	}

	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		display: flex !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;

		box-sizing: border-box;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/*
 * Telefones muito estreitos continuam em duas colunas.
 * Apenas reduz um pouco o espaçamento e fonte.
 */
@media (max-width: 390px) {
	.coteia-main-menu .coteia-menu-more-dropdown {
		left: 10px !important;
		right: 10px !important;

		column-gap: 4px;
		row-gap: 4px;

		padding: 7px;
	}

	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		padding: 7px 5px;

		font-size: 0.78rem;
	}
}


/* =========================================================
   0.4.0-alpha.18 — MOBILE: DROPDOWN INDEPENDENTE DA COLUNA
   ========================================================= */

/*
 * No mobile portrait, o dropdown "Mais..." NÃO pode herdar qualquer
 * largura calculada para a área de Categorias do Menu principal.
 *
 * Desktop/Tablet continuam limitados à área de Categorias.
 * Mobile usa largura própria baseada exclusivamente na viewport.
 */
@media (max-width: 767px) {
	.coteia-main-menu
	.coteia-menu-more-dropdown {
		/*
		 * Neutraliza completamente os limites definidos no Desktop
		 * e nas versões anteriores.
		 */
		--coteia-menu-more-width: calc(100vw - 20px) !important;
		--coteia-menu-more-columns: 2 !important;

		position: fixed !important;

		left: 10px !important;
		right: 10px !important;

		width: calc(100vw - 20px) !important;
		min-width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;

		box-sizing: border-box !important;

		display: grid !important;

		grid-template-columns:
			calc((100% - 6px) / 2)
			calc((100% - 6px) / 2) !important;

		grid-auto-columns: minmax(0, 1fr) !important;
		grid-auto-flow: row !important;

		column-gap: 6px !important;
		row-gap: 6px !important;

		/*
		 * O dropdown usa somente a altura restante da viewport
		 * abaixo do Menu.
		 */
		max-height:
			calc(
				100dvh -
				var(--coteia-menu-more-mobile-top, 64px) -
				10px
			) !important;

		overflow-x: hidden !important;
		overflow-y: scroll !important;

		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch;

		z-index: 12050 !important;
	}

	/*
	 * Cada categoria é obrigada a permanecer dentro de UMA célula.
	 * Remove qualquer regra herdada que possa fazê-la ocupar a linha toda.
	 */
	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		grid-column: auto !important;
		grid-row: auto !important;

		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;

		margin: 0 !important;

		box-sizing: border-box !important;

		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/*
	 * Evita que wrappers ou regras do Menu imponham o antigo limite
	 * horizontal da área de Categorias ao dropdown fixed.
	 */
	.coteia-main-menu,
	.coteia-main-menu-inner,
	.coteia-menu-categories-column,
	.coteia-menu-categories-desktop,
	.coteia-menu-more {
		overflow: visible !important;
	}
}

/*
 * Em aparelhos extremamente estreitos ainda são mantidas duas colunas.
 */
@media (max-width: 360px) {
	.coteia-main-menu
	.coteia-menu-more-dropdown {
		left: 6px !important;
		right: 6px !important;

		width: calc(100vw - 12px) !important;
		min-width: calc(100vw - 12px) !important;
		max-width: calc(100vw - 12px) !important;

		grid-template-columns:
			calc((100% - 4px) / 2)
			calc((100% - 4px) / 2) !important;

		column-gap: 4px !important;
		row-gap: 4px !important;
	}

	.coteia-main-menu
	.coteia-menu-more-dropdown
	.coteia-menu-category-link {
		padding: 7px 5px !important;
		font-size: 0.76rem !important;
	}
}


/* alpha.27 — barra principal acima do painel portal durante a sobreposição */
@media (max-width: 767px) {
	.coteia-main-menu {
		position: relative;
		z-index: 9999;
	}
}


/* =========================================================
   0.4.0-alpha.65 — BOTÕES 2, 3, 4 E CATEGORIAS
   Uma única fonte visual para a barra principal.
   ========================================================= */
.coteia-main-menu .coteia-menu-quick-button,
.coteia-main-menu .coteia-menu-categories-desktop > .coteia-menu-category-items > .coteia-menu-category-link {
	background: var(--coteia-menu-quick-bg) !important;
	color: var(--coteia-menu-quick-text) !important;
	border-radius: var(--coteia-menu-quick-radius) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	opacity: 1 !important;
}

.coteia-main-menu .coteia-menu-categories-desktop > .coteia-menu-category-items > .coteia-menu-category-link:visited,
.coteia-main-menu .coteia-menu-categories-desktop > .coteia-menu-category-items > .coteia-menu-category-link:active {
	color: var(--coteia-menu-quick-text) !important;
}

/*
 * O Dropdown é outro componente e mantém seus próprios presets.
 */
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link {
	background: transparent !important;
	color: var(--coteia-menu-more-text, #FFFFFF) !important;
	border-color: transparent !important;
	border-radius: 8px !important;
	opacity: 1 !important;
}

.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link:hover,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link:focus-visible {
	background: var(--coteia-menu-more-hover) !important;
	color: var(--coteia-menu-more-text, #FFFFFF) !important;
}


/* =========================================================
   0.4.0-alpha.65 — BOTÃO 1: DEGRADÊ SEM CONFLITO
   ========================================================= */

/*
 * Fundo normal:
 * - background-color recebe SEMPRE a cor sólida configurada.
 * - background-image recebe SOMENTE o degradê, quando ativado.
 * Separar as duas propriedades impede que uma regra shorthand
 * posterior apague o linear-gradient().
 */
.coteia-main-menu .coteia-menu-offer,
.coteia-main-menu .coteia-menu-offer.is-inactive {
	background-color: var(--coteia-menu-offer-bg) !important;
	background-image: var(--coteia-menu-offer-bg-image, none) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	opacity: 1 !important;
}

/*
 * Ativo e hover continuam deliberadamente sólidos,
 * como já aprovado.
 */
.coteia-main-menu .coteia-menu-offer.is-active {
	background-color: var(--coteia-menu-offer-active-bg) !important;
	background-image: none !important;
	opacity: 1 !important;
}

.coteia-main-menu .coteia-menu-offer:hover,
.coteia-main-menu .coteia-menu-offer:focus-visible,
.coteia-main-menu .coteia-menu-offer.is-active:hover,
.coteia-main-menu .coteia-menu-offer.is-inactive:hover {
	background-color: var(--coteia-menu-offer-hover-bg) !important;
	background-image: none !important;
	opacity: 1 !important;
}


/* =========================================================
   0.4.0-alpha.65 — DROPDOWN: BOTÃO + HOVER FRONTEND
   ========================================================= */
.coteia-main-menu .coteia-menu-more-toggle {
	background: var(--coteia-menu-more-toggle-bg, #255FB7) !important;
}

.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link:hover,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link:focus-visible {
	background: var(--coteia-menu-more-hover, #3F7BD3) !important;
	color: var(--coteia-menu-more-text, #FFFFFF) !important;
}


/* =========================================================
   0.4.0-alpha.65 — TRANSPARÊNCIA + CATEGORIA ATIVA
   ========================================================= */
.coteia-main-menu .coteia-menu-more-toggle {
	background: var(--coteia-menu-more-toggle-bg) !important;
}

.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link:hover,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link:focus-visible {
	background: var(--coteia-menu-more-hover) !important;
}

.coteia-main-menu .coteia-menu-category-link.is-active,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link.is-active {
	background: var(--coteia-menu-category-active-bg) !important;
	color: var(--coteia-menu-quick-text) !important;
	border-color: rgba(255,255,255,.22) !important;
}


/* =========================================================
   0.4.0-alpha.65 — BORDAS + ESTADO ATIVO VISÍVEL
   ========================================================= */

/* Botão Dropdown / “Mais...” acompanha o contorno das categorias. */
.coteia-main-menu .coteia-menu-more-toggle {
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: var(--coteia-menu-quick-radius) !important;
}

/* Categorias internas do Dropdown também mantêm contorno leve. */
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link {
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: var(--coteia-menu-quick-radius) !important;
}

/*
 * A regra base das categorias visíveis possui quatro classes.
 * Este seletor ativo tem especificidade superior para vencer mesmo com !important.
 */
.coteia-main-menu
.coteia-menu-categories-desktop
> .coteia-menu-category-items
> .coteia-menu-category-link.is-active {
	background: var(--coteia-menu-category-active-bg) !important;
	color: var(--coteia-menu-quick-text) !important;
	border-color: rgba(255,255,255,.22) !important;
}

.coteia-main-menu
.coteia-menu-more-dropdown
.coteia-menu-category-link.is-active {
	background: var(--coteia-menu-category-active-bg) !important;
	color: var(--coteia-menu-quick-text) !important;
	border-color: rgba(255,255,255,.22) !important;
}


/* =========================================================
   0.4.0-alpha.65 — HOVER ÚNICO DA FAMÍLIA 2–4 + CATEGORIAS
   ========================================================= */
.coteia-main-menu
.coteia-menu-categories-desktop
> .coteia-menu-category-items
> .coteia-menu-category-link:hover,
.coteia-main-menu
.coteia-menu-categories-desktop
> .coteia-menu-category-items
> .coteia-menu-category-link:focus-visible,
.coteia-main-menu
.coteia-menu-more-dropdown
.coteia-menu-category-link:hover,
.coteia-main-menu
.coteia-menu-more-dropdown
.coteia-menu-category-link:focus-visible {
	background: var(--coteia-menu-quick-hover-bg) !important;
	color: var(--coteia-menu-quick-text) !important;
}


/* =========================================================
   0.4.0-alpha.65 — HOVER FRONTEND COMPLETO
   =========================================================
   Um único hover para Botões 2–4, Categorias e “Mais...”.
 */
.coteia-main-menu .coteia-menu-quick-button:hover,
.coteia-main-menu .coteia-menu-quick-button:focus-visible,
.coteia-main-menu .coteia-menu-more-toggle:hover,
.coteia-main-menu .coteia-menu-more-toggle:focus-visible,
.coteia-main-menu
.coteia-menu-categories-desktop
> .coteia-menu-category-items
> .coteia-menu-category-link:hover,
.coteia-main-menu
.coteia-menu-categories-desktop
> .coteia-menu-category-items
> .coteia-menu-category-link:focus-visible,
.coteia-main-menu
.coteia-menu-more-dropdown
.coteia-menu-category-link:hover,
.coteia-main-menu
.coteia-menu-more-dropdown
.coteia-menu-category-link:focus-visible {
	background: var(--coteia-menu-quick-hover-bg) !important;
	color: var(--coteia-menu-quick-text) !important;
}


/* alpha.50: categoria ativa aceita hover compartilhado */
.coteia-main-menu .coteia-menu-category-link.is-active:hover,
.coteia-main-menu .coteia-menu-category-link.is-active:focus-visible {
 background: var(--coteia-menu-quick-hover-bg) !important;
}


/* =========================================================
   0.4.0-alpha.65 — ESTABILIDADE VISUAL DAS CATEGORIAS
   ========================================================= */
.coteia-main-menu .coteia-menu-categories-desktop,
.coteia-main-menu .coteia-menu-category-items {
	min-height: 40px;
}

.coteia-main-menu .coteia-menu-category-items {
	align-items: center;
	overflow: hidden;
}

.coteia-main-menu .coteia-menu-category-link.is-active,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link.is-active {
	color: var(--coteia-menu-category-active-text, #FFFFFF) !important;
}

.coteia-main-menu .coteia-menu-category-link.is-active:hover,
.coteia-main-menu .coteia-menu-category-link.is-active:focus-visible,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link.is-active:hover,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link.is-active:focus-visible {
	color: var(--coteia-menu-quick-text, #FFFFFF) !important;
}


/* =========================================================
   0.4.0-alpha.65 — BOTÃO 1 FORA DO CÁLCULO FLEXÍVEL
   =========================================================
   O primeiro track deixa de ser `auto` e passa a `max-content`.
   Tracks `auto` podem absorver espaço livre no Grid e produzir a
   sensação de o Botão 1 esticar/encolher quando o bloco de Categorias
   recalcula o overflow. `max-content` fixa o track na largura natural
   do conteúdo do botão.
*/

/* Desktop/Tablet: Botão 1 e coluna final têm largura intrínseca estável. */
.coteia-main-menu.coteia-menu-has-offer .coteia-main-menu-inner {
	grid-template-columns:
		max-content
		minmax(0, 1fr)
		max-content;
}

.coteia-main-menu .coteia-menu-offer-column {
	width: max-content !important;
	min-width: max-content !important;
	max-width: max-content !important;
	justify-self: start !important;
	flex: 0 0 auto !important;
}

.coteia-main-menu .coteia-menu-offer {
	width: max-content !important;
	min-width: max-content !important;
	max-width: max-content !important;
	inline-size: max-content !important;
	flex: 0 0 auto !important;
}

/* Desktop largo preserva divisórias sem devolver `auto` ao Botão 1. */
@media (min-width: 1025px) {
	.coteia-main-menu.coteia-menu-has-offer .coteia-main-menu-inner {
		grid-template-columns:
			max-content
			1px
			minmax(0, 1fr)
			1px
			max-content !important;
	}
}

/*
 * A área de Categorias é a única faixa elástica.
 * Ela absorve ganho/perda de espaço durante o cálculo de "Mais...".
 */
.coteia-main-menu .coteia-menu-categories-column,
.coteia-main-menu .coteia-menu-categories-desktop,
.coteia-main-menu .coteia-menu-category-items {
	min-width: 0 !important;
}

.coteia-main-menu .coteia-menu-categories-column {
	width: 100%;
	justify-self: stretch;
}


/* =========================================================
   0.4.0-alpha.65 — FLEX ISOLADO SOBRE BASE ESTÁVEL ALPHA.56
   ========================================================= */
@media (min-width: 768px) {
	.coteia-main-menu .coteia-main-menu-inner {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-width: 0 !important;
		column-gap: 12px !important;
		row-gap: 0 !important;
		flex-wrap: nowrap !important;
	}

	.coteia-main-menu .coteia-menu-offer-column,
	.coteia-main-menu .coteia-menu-offer {
		flex: 0 0 auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		width: max-content !important;
		min-width: max-content !important;
		max-width: max-content !important;
		inline-size: max-content !important;
		white-space: nowrap !important;
		grid-column: auto !important;
	}

	.coteia-main-menu .coteia-menu-column-divider {
		flex: 0 0 1px !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		width: 1px !important;
		min-width: 1px !important;
		max-width: 1px !important;
		grid-column: auto !important;
	}

	.coteia-main-menu .coteia-menu-categories-column {
		flex: 1 1 0 !important;
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		flex-basis: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;

		/*
		 * A coluna externa precisa permitir que o Dropdown absoluto
		 * ultrapasse seus limites. O recorte horizontal pertence
		 * exclusivamente à faixa de itens das categorias.
		 */
		overflow: visible !important;

		grid-column: auto !important;
	}

	.coteia-main-menu .coteia-menu-categories-desktop {
		overflow: visible !important;
	}

	.coteia-main-menu .coteia-menu-category-items {
		overflow: hidden !important;
	}

	.coteia-main-menu .coteia-menu-categories-desktop,
	.coteia-main-menu .coteia-menu-category-items {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.coteia-main-menu .coteia-menu-quick-column {
		flex: 0 0 auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		width: max-content !important;
		min-width: max-content !important;
		max-width: max-content !important;
		white-space: nowrap !important;
		grid-column: auto !important;
	}
}


/* =========================================================
   0.4.0-alpha.65 — DROPDOWN FORA DO RECORTE FLEX
   ========================================================= */
@media (min-width: 768px) {
	.coteia-main-menu .coteia-menu-categories-column,
	.coteia-main-menu .coteia-menu-categories-desktop,
	.coteia-main-menu .coteia-menu-more {
		overflow: visible !important;
	}

	.coteia-main-menu .coteia-menu-category-items {
		overflow: hidden !important;
	}

	.coteia-main-menu .coteia-menu-more {
		position: relative;
		z-index: 10020;
	}

	.coteia-main-menu .coteia-menu-more-dropdown {
		z-index: 10030;
	}
}


/* =========================================================
   0.4.0-alpha.65 — REFLOW DAS CATEGORIAS ISOLADO
   =========================================================
   A Coluna 2 é a única área dinâmica do Menu.
   Seu conteúdo não deve participar do cálculo intrínseco dos grupos
   fixos (Botão 1 e Botões 2–4).
*/
@media (min-width: 768px) {
	.coteia-main-menu .coteia-menu-categories-column {
		contain: inline-size layout;
	}

	/*
	 * Não usamos paint containment: o Dropdown “Mais...” precisa
	 * continuar podendo ultrapassar visualmente os limites da coluna.
	 */
	.coteia-main-menu .coteia-menu-categories-column,
	.coteia-main-menu .coteia-menu-categories-desktop,
	.coteia-main-menu .coteia-menu-more {
		overflow: visible !important;
	}
}


/* =========================================================
   0.4.0-alpha.74 — TRAVA FÍSICA DO BOTÃO 1
   =========================================================
   Diferente de max-content, a largura final passa a ser um valor
   físico em px medido antes do overflow das Categorias. A Coluna 2
   pode recalcular sem devolver essa variação à Coluna 1.
*/
@media (min-width: 768px) {
	.coteia-main-menu[style*="--coteia-menu-offer-locked-width"]
	.coteia-menu-offer-column {
		flex: 0 0 var(--coteia-menu-offer-locked-width) !important;
		width: var(--coteia-menu-offer-locked-width) !important;
		min-width: var(--coteia-menu-offer-locked-width) !important;
		max-width: var(--coteia-menu-offer-locked-width) !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
	}

	.coteia-main-menu[style*="--coteia-menu-offer-locked-width"]
	.coteia-menu-offer-column .coteia-menu-offer {
		width: var(--coteia-menu-offer-locked-width) !important;
		min-width: var(--coteia-menu-offer-locked-width) !important;
		max-width: var(--coteia-menu-offer-locked-width) !important;
		inline-size: var(--coteia-menu-offer-locked-width) !important;
		flex: 0 0 var(--coteia-menu-offer-locked-width) !important;
	}
}


/* =========================================================
   0.4.0-alpha.74 — GEOMETRIA INTERNA ESTÁVEL DO BOTÃO 1
   =========================================================
   A largura externa já está fisicamente travada pela alpha.68.
   Esta etapa impede que mudanças tardias nas métricas de texto/emoji
   recentralizem visualmente o conjunto interno.
*/
@media (min-width: 768px) {

	/*
	 * A largura física do botão já corresponde à largura natural
	 * medida antes do overflow. Portanto flex-start mantém a mesma
	 * posição visual inicial, mas deixa de recentralizar o conteúdo
	 * quando as métricas internas variam alguns pixels.
	 */
	.coteia-main-menu
	.coteia-menu-offer {
		justify-content: flex-start !important;
	}

	/*
	 * O emoji padrão tinha largura final `auto`.
	 * Fixamos somente a caixa do ícone; o glifo continua centralizado
	 * dentro dela. Assim a largura do emoji nativo do navegador/SO
	 * não altera o ponto inicial do título.
	 */
	.coteia-main-menu
	.coteia-menu-offer-icon {
		width: 19px !important;
		min-width: 19px !important;
		max-width: 19px !important;

		flex: 0 0 19px !important;

		justify-content: center !important;
	}

	.coteia-main-menu
	.coteia-menu-offer-icon.coteia-menu-icon-emoji {
		width: 19px !important;
		min-width: 19px !important;
		max-width: 19px !important;

		flex: 0 0 19px !important;

		text-align: center !important;
	}

	/*
	 * O título começa sempre no mesmo ponto.
	 * Não usamos largura fixa no texto para não cortar títulos editáveis.
	 */
	.coteia-main-menu
	.coteia-menu-offer > span {
		flex: 0 0 auto !important;
		min-width: 0 !important;

		white-space: nowrap !important;
		text-align: left !important;
	}
}


/* =========================================================
   0.4.0-alpha.74 — WRAPPER INTERNO ISOLADO DO BOTÃO 1
   =========================================================
   A largura externa permanece fisicamente travada.
   O conjunto ícone + título passa a existir em uma única subárvore
   de layout, reduzindo invalidações internas em Firefox/Opera.
*/
@media (min-width: 768px) {

	.coteia-main-menu
	.coteia-menu-offer-column {
		contain: layout style !important;
	}

	.coteia-main-menu
	.coteia-menu-offer {
		contain: layout style !important;

		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;

		white-space: nowrap !important;
	}

	.coteia-main-menu
	.coteia-menu-offer-inner {
		contain: layout style !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: flex-start !important;

		gap: 7px !important;

		flex: 0 0 auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;

		width: max-content !important;
		min-width: max-content !important;
		max-width: max-content !important;

		white-space: nowrap !important;
	}

	.coteia-main-menu
	.coteia-menu-offer-inner
	.coteia-menu-offer-icon {
		contain: layout style !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 19px !important;
		min-width: 19px !important;
		max-width: 19px !important;

		flex: 0 0 19px !important;
	}

	.coteia-main-menu
	.coteia-menu-offer-inner
	.coteia-menu-offer-label {
		contain: layout style !important;

		display: inline-block !important;

		flex: 0 0 auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;

		white-space: nowrap !important;
	}
}


/* =========================================================
   0.4.0-alpha.74 — CHAMA SVG NATIVA E ESTÁVEL
   =========================================================
   O U+1F525 padrão deixa de ser pintado pelo motor de emoji do
   navegador/SO e passa a usar um asset SVG do próprio tema.

   Geometria preservada:
   - caixa horizontal: 19px;
   - altura do desenho: 24px;
   - mesma posição aprovada na alpha.71.
*/
@media (min-width: 768px) {

	.coteia-main-menu
	.coteia-menu-offer-inner
	.coteia-menu-offer-icon.coteia-menu-icon-fire-svg {
		contain: layout style paint !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 19px !important;
		min-width: 19px !important;
		max-width: 19px !important;
		height: 24px !important;

		flex: 0 0 19px !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;

		line-height: 1 !important;
	}

	.coteia-main-menu
	.coteia-menu-offer-inner
	.coteia-menu-offer-icon.coteia-menu-icon-fire-svg img {
		display: block !important;

		width: 19px !important;
		min-width: 19px !important;
		max-width: 19px !important;
		height: 24px !important;

		object-fit: contain !important;

		vertical-align: middle !important;

		pointer-events: none !important;
		user-select: none !important;
	}
}


/* 0.4.0-alpha.74 — Botão 1 responsivo */
.coteia-main-menu .coteia-menu-offer-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	min-width: 0;
	max-width: 100%;
}
.coteia-main-menu .coteia-menu-offer-label {
	display: inline-block;
	white-space: nowrap;
	line-height: 1.15;
	vertical-align: middle;
}
.coteia-main-menu .coteia-menu-offer-icon,
.coteia-main-menu .coteia-menu-offer-icon img,
.coteia-main-menu .coteia-menu-offer-icon svg {
	vertical-align: middle;
}

/* 0.4.0-alpha.74 — ícone acompanha a tipografia */
.coteia-main-menu .coteia-menu-offer-icon,
.coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-theme,
.coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-media {
 width:1.05em !important; min-width:1.05em !important; max-width:1.05em !important; height:1.28em !important; flex:0 0 1.05em !important; align-self:center !important;
}
.coteia-main-menu .coteia-menu-offer-icon img,
.coteia-main-menu .coteia-menu-offer-icon svg { width:1.05em !important; height:1.28em !important; object-fit:contain !important; display:block !important; }
.coteia-main-menu .coteia-menu-quick-icon.coteia-menu-icon-theme img,
.coteia-main-menu .coteia-menu-quick-icon.coteia-menu-icon-media img { width:1em; height:1em; object-fit:contain; display:block; }


/* =========================================================
   0.4.0-alpha.77 — TIPOGRAFIA GLOBAL DO MENU
   =========================================================
   Fonte e Peso em Menu > Geral são a base tipográfica de todos
   os componentes textuais. Cores continuam sob autoridade dos
   controles locais de cada família visual.
*/
.coteia-main-menu,
.coteia-main-menu button,
.coteia-main-menu a,
.coteia-main-menu .coteia-menu-offer,
.coteia-main-menu .coteia-menu-offer-label,
.coteia-main-menu .coteia-menu-category-link,
.coteia-main-menu .coteia-menu-more-toggle,
.coteia-main-menu .coteia-menu-more-dropdown .coteia-menu-category-link,
.coteia-main-menu .coteia-menu-quick-button,
.coteia-main-menu .coteia-menu-mobile-toggle,
.coteia-main-menu .coteia-menu-mobile-categories a,
.coteia-main-menu .coteia-menu-mobile-quick .coteia-menu-quick-button {
	font-family: var(--coteia-menu-font) !important;
	font-weight: var(--coteia-menu-weight) !important;
}

/*
 * Font Awesome precisa preservar sua própria família de fonte.
 * O peso visual do ícone continua administrado pelo próprio pacote.
 */
.coteia-main-menu
.coteia-menu-icon-fontawesome i {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

/*
 * SVGs, imagens e ícones nativos não participam da tipografia.
 */
.coteia-main-menu
.coteia-menu-icon-theme,
.coteia-main-menu
.coteia-menu-icon-image,
.coteia-main-menu
.coteia-menu-icon-media {
	font-weight: normal;
}