/* ==========================================================================

   Doce Malicia - header do Elementor, design compacto e responsivo

   Escopo: body.dm-header-novo .elementor-location-header

   (loja, categorias, produto, carrinho). Home e conta ficam de fora por

   construcao: nao tem .elementor-location-header nem recebem a classe.



   NOTA SOBRE OS SELECTORS: os ids do Elementor comecam com digito

   ("046dec2", "78c6277"), e seletor de id CSS nao pode comecar com digito.

   Tudo abaixo usa [data-id="..."], nunca #id. Se os containers forem

   recriados no editor, os ids mudam e este arquivo precisa de revisao.



   Licoes da versao anterior (nao repetir):

   - UM buscador: o original do plugin. Nada de formulario nativo injetado.

   - o painel burger e nav.elementor-nav-menu--dropdown; os submenus de

     categoria sao ul.sub-menu com a mesma classe. Nunca esconder por classe

     sozinha, senao as 13 categorias somem.

   - no mobile, nao forcar altura nos elementos do plugin de busca: ele usa

     min-height:100% em cascata e nao cede. Contem a largura e deixa a barra

     crescer; o que nao pode e sobrepor.

   ========================================================================== */



body.dm-header-novo .elementor-location-header {

	--hd-gutter: clamp(12px, 3vw, 28px);

	--hd-suporte: #ffffff;

	--hd-fundo: #f6f6f8;

	--hd-faixa: #15151a;

	--hd-tinta: #16161c;

	--hd-fraco: #6b6b78;

	--hd-linha: rgba(16, 16, 24, .10);

	--hd-marca: var(--bs-primary, #da3c3c);

	--hd-raio: 10px;

	--hd-sombra: 0 10px 30px -12px rgba(16, 16, 24, .28);

}



/* Menu de departamentos: resposta de toque imediata (sem o atraso do

   duplo-toque) e sem o realce cinza padrao do toque, que destoava do painel

   escuro. Foco visivel garante navegacao por teclado em todos os niveis. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu a {

	touch-action: manipulation;

	-webkit-tap-highlight-color: transparent;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a:focus-visible {

	outline: 2px solid #fff;

	outline-offset: -2px;

	border-radius: 8px;

}



/* Quem pede menos animacao recebe transicoes e entradas desligadas. */

@media (prefers-reduced-motion: reduce) {

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu,

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li.dm-aberto > ul.sub-menu {

		animation: none !important;

	}



	body.dm-header-novo .elementor-location-header .elementor-nav-menu a,

	body.dm-header-novo .elementor-location-header .elementor-social-icon {

		transition: none !important;

	}

}



/* Qualquer resto de formulario alternativo: some sempre. Um buscador so. */

body.dm-header-novo .elementor-location-header .dm-busca-mobile {

	display: none !important;

}



/* Barras alinhadas, sem altura imposta pelo tema. */

body.dm-header-novo .elementor-location-header .e-parent {

	align-items: center;

}



body.dm-header-novo .elementor-location-header .e-parent > .e-child {

	min-width: 0;

	max-width: 100%;

	padding: 0;

}



body.dm-header-novo .elementor-location-header .elementor-section-wrap {

	background: transparent;

}



body.dm-header-novo .elementor-location-header img {

	max-width: 100%;

	height: auto;

}



/* --------------------------------------------------------------------------

   Colunas vazias: 3 das 4 colunas de cada barra nao tem widget e empurravam

   o conteudo para a esquerda, inflando a altura (433px no desktop).

   -------------------------------------------------------------------------- */

body.dm-header-novo [data-id="ded0398"],

body.dm-header-novo [data-id="b13d46d"],

body.dm-header-novo [data-id="c23ed95"],

body.dm-header-novo [data-id="e1962cf"],

body.dm-header-novo [data-id="bdeb22f"],

body.dm-header-novo [data-id="1fbe00d"],

body.dm-header-novo [data-id="86714db"],

body.dm-header-novo [data-id="8b92713"],

body.dm-header-novo [data-id="d55417b"] {

	display: none;

}



body.dm-header-novo [data-id="b6d3cec"],

body.dm-header-novo [data-id="42e08b0"] {

	display: none;

}



body.dm-header-novo [data-id="466532c"],

body.dm-header-novo [data-id="84fa47b"] {

	gap: 0;

}



/* --------------------------------------------------------------------------

   Barra social: faixa fina preta, icones em linha a direita.

   -------------------------------------------------------------------------- */

body.dm-header-novo [data-id="046dec2"],

body.dm-header-novo [data-id="346ce2e"] {

	background: var(--hd-faixa);

	padding: 0 var(--hd-gutter);

	justify-content: flex-end;

	min-height: 40px;

}



body.dm-header-novo [data-id="a46a9da"],

body.dm-header-novo [data-id="bbaebc7"] {

	width: auto;

	flex: 0 1 auto;

	padding: 0;

}



body.dm-header-novo .elementor-location-header .elementor-social-icons-wrapper,

body.dm-header-novo .elementor-location-header .elementor-social-icons-wrapper.elementor-grid {

	display: flex !important;

	flex-direction: row;

	flex-wrap: nowrap;

	align-items: center;

	justify-content: flex-start;

	grid-template-columns: none !important;

	grid-auto-columns: auto;

	grid-auto-flow: column;

}



body.dm-header-novo .elementor-location-header .elementor-social-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 28px;

	height: 28px;

	min-width: 28px;

	min-height: 28px;

	font-size: 13px;

	color: #cfd0d6;

	border-radius: 6px;

	transition: color .18s ease, background-color .18s ease;

}



body.dm-header-novo .elementor-location-header .elementor-social-icon:hover {

	color: #fff;

	background: rgba(255, 255, 255, .12);

}



/* --------------------------------------------------------------------------

   Barra principal: logo fixa, busca cresce, menu e carrinho a direita.

   -------------------------------------------------------------------------- */

body.dm-header-novo [data-id="78c6277"],

body.dm-header-novo [data-id="5ad5464"] {

	background: var(--hd-suporte);

	border-bottom: 1px solid var(--hd-linha);

	padding: 6px var(--hd-gutter);

	gap: 26px;

	justify-content: space-between;

	min-height: 78px;

}



body.dm-header-novo [data-id="efc35f5"],

body.dm-header-novo [data-id="9cba352"] {

	width: auto;

	flex: 0 0 auto;

}



body.dm-header-novo [data-id="8d53b03"],

body.dm-header-novo [data-id="c7de76f"] {

	width: auto;

	flex: 1 1 200px;

	max-width: 320px;

	min-width: 0;

}



body.dm-header-novo [data-id="106a84e"],

body.dm-header-novo [data-id="c5d01bd"],

body.dm-header-novo [data-id="6e75a1e"],

body.dm-header-novo [data-id="243fee4"] {

	width: auto;

	flex: 0 0 auto;

}



body.dm-header-novo .elementor-location-header .elementor-widget-theme-site-logo img {

	max-height: 54px;

	width: auto;

	object-fit: contain;

}



/* --------------------------------------------------------------------------

   Menu principal: uma linha, sem sobrepor.

   O !important e necessario: o Elementor imprime por pagina um CSS do tipo

   ".elementor-31853 .elementor-element.elementor-element-2902b82

   .elementor-nav-menu .elementor-item" (0,5,0) que vence regra de tema filho.

   -------------------------------------------------------------------------- */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main {

	width: auto;

	max-width: none;

	height: auto;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {

	display: flex;

	flex-direction: row;

	flex-wrap: nowrap;

	align-items: center;

	justify-content: flex-end;

	gap: 26px;

	width: auto;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li {

	height: auto;

	margin: 0;

	position: relative;

	z-index: 2;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a,

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item {

	display: inline-flex;

	align-items: center;

	min-height: 44px !important;

	max-height: none;

	padding: 0 2px !important;

	color: var(--hd-tinta) !important;

	font-size: 14.5px !important;

	font-weight: 600 !important;

	line-height: 1.2 !important;

	white-space: nowrap;

	text-decoration: none;

	background: transparent !important;

	border-radius: 6px;

	transition: color .18s ease;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a:hover,

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a {

	color: var(--hd-marca) !important;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a:focus-visible {

	outline: 3px solid var(--hd-marca);

	outline-offset: 3px;

}



/* So o painel burger (NAV) e so no desktop. Os submenus de categoria sao UL

   com a mesma classe: esconder por classe apagava as 13 categorias. E no

   mobile/tablet o painel e o proprio menu (modo toggle do Elementor):

   esconde-lo ali matava o menu inteiro no celular. */

@media (min-width: 1025px) {

	body.dm-header-novo .elementor-location-header nav.elementor-nav-menu--dropdown {

		display: none;

	}

}



/* No mobile/tablet o botao hamburger do Elementor abre o painel. O icone

   vinha com 0x0 (o svg nao recebe tamanho nessa montagem), entao area de

   toque e icone tem tamanho explicito. */

@media (max-width: 1024px) {

	body.dm-header-novo .elementor-location-header .elementor-menu-toggle {

		display: inline-flex;

		align-items: center;

		justify-content: center;

		width: 44px;

		height: 44px;

		min-width: 44px;

		min-height: 44px;

		cursor: pointer;

	}



	body.dm-header-novo .elementor-location-header .elementor-menu-toggle svg {

		width: 24px;

		height: 24px;

	}



	/* Painel aberto: ocupa a largura, itens empilhados com altura de toque,

	   submenu expande abaixo do item (comportamento original do Elementor,

	   so com visual ajustado). */

	body.dm-header-novo .elementor-location-header nav.elementor-nav-menu--dropdown {

		width: 100%;

		max-width: 100%;

		background: var(--hd-suporte);

		border: 1px solid var(--hd-linha);

		border-radius: var(--hd-raio);

		box-shadow: var(--hd-sombra);

		padding: 6px;

		margin: 8px 0 0;

	}



	body.dm-header-novo .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu {

		display: flex;

		flex-direction: column;

		align-items: stretch;

		gap: 0;

		width: 100%;

	}



	body.dm-header-novo .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu > li > a {

		display: flex;

		align-items: center;

		min-height: 44px;

		padding: 8px 10px;

		color: var(--hd-tinta);

		font-size: 14px;

		font-weight: 600;

		line-height: 1.3;

		border-radius: 8px;

		white-space: normal;

	}



	body.dm-header-novo .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu > li > a:hover {

		color: var(--hd-marca);

		background: var(--hd-fundo);

	}



	body.dm-header-novo .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu ul.sub-menu {

		position: static;

		border: 0;

		box-shadow: none;

		padding: 0 0 0 12px;

		margin: 0;

	}

}



/* --------------------------------------------------------------------------

   Painel de categorias: no computador abre no hover (o ponteiro esta logo

   acima) e no foco (teclado). Fica restrito a (hover: hover): no tablete de

   toque o :hover fica "grudado" no ultimo item tocado, o que abria varios

   flyouts ao mesmo tempo e impedia o toque seguinte de fechar. Sem essa

   condicao o toque cai no comportamento de clique (dm-aberto), uniforme.

   Sem essa secao o menu nao abria nem antes deste arquivo: a regra de hover

   do Elementor (.elementor-nav-menu--dropdown .elementor-item-has-submenu

   :hover > .sub-menu) nunca casa aqui, porque a classe --dropdown fica no

   proprio ul do submenu, nunca acima do li que recebe o hover.

   -------------------------------------------------------------------------- */

@media (min-width: 1025px) and (hover: hover) {

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:hover > ul.sub-menu,

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:focus-within > ul.sub-menu {

		display: block;

	}



	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:hover,

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:focus-within {

		z-index: 3;

	}

}



/* As barras criam contexto de empilhamento proprio; sem isto o painel abre

   atras da faixa seguinte. */

body.dm-header-novo .elementor-location-header [data-id="cdfe369"],

body.dm-header-novo .elementor-location-header [data-id="feb5214"] {

	position: relative;

	z-index: 20;

}



/* Painel de categorias: fundo escuro (identidade da faixa social do header),

   sem rolagem propria para os flyouts laterais nao serem recortados. O

   !important na largura e obrigatorio: o Elementor escreve style inline no

   proprio ul ("min-width:10em"). Faixa de marca no topo para amarrar o

   painel ao gatilho, e entrada suave. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu {

	background: #17171d;

	border: 1px solid rgba(255, 255, 255, .12);

	border-top: 3px solid var(--hd-marca);

	border-radius: var(--hd-raio);

	box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .55);

	min-width: 262px !important;

	max-width: min(304px, 70vw);

	padding: 8px 6px 6px;

	margin: 0;

	animation: dm-painel .18s ease-out both;

}



@keyframes dm-painel {

	from { opacity: 0; transform: translateY(-6px); }

	to   { opacity: 1; transform: none; }

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu > li {

	position: relative;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu > li > a {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 8px;

	min-height: 40px;

	padding: 6px 10px;

	color: #e9e9f0;

	font-size: 13.5px;

	line-height: 1.35;

	white-space: normal;

	text-decoration: none;

	border-radius: 8px;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu > li > a:hover {

	color: #fff;

	background: var(--hd-marca);

}



/* Seta nos itens que tem subcategoria, para ficar claro que abre do lado. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu > li.menu-item-has-children > a::after {

	content: "\203A";

	font-size: 16px;

	line-height: 1;

	color: #8f8f9c;

	flex: 0 0 auto;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu > li.menu-item-has-children > a:hover::after {

	color: #fff;

}



/* Subniveis em flyout lateral (computador e tablete).

   Aqui nao abre no :hover, e so no clique/toque/teclado (classe .dm-aberto

   do dm-menu.js). O motivo e geometrico, nao estetico: o flyout sai pela

   direita e a subcategoria fica bem abaixo do item-pai, entao o :hover se

   perdia no trajeto diagonal e o submenu piscava. O clique prende o submenu

   ate a escolha.

   Nada de overflow aqui: barra de rolagem recortaria os flyouts mais

   profundos (o de 5o nivel chega a passar da caixa do 4o). Listas longas

   viram colunas (dm-cols-2/3) e, sem espaco a direita, o flyout vira para a

   esquerda (dm-flip) e/ou sobe (dm-sobe) - decidido no dm-menu.js medindo a

   posicao real. Assim nenhum dos 5 niveis estoura a tela. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li {

	position: relative;

}



/* Fechamento com !important: o Elementor tambem controla estes itens e

   escreve style="display:block" inline no <ul> no window.load, depois deste

   script. Style inline sem !important ganha de regra de folha, entao o

   submenu reabria sozinho. Com o !important so .dm-aberto abre. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu {

	display: none !important;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li.dm-aberto > ul.sub-menu {

	display: block !important;

	position: absolute;

	left: 100%;

	top: -7px;

	min-width: 236px;

	max-width: min(280px, 72vw);

	background: #17171d;

	border: 1px solid rgba(255, 255, 255, .12);

	border-radius: var(--hd-raio);

	box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .55);

	padding: 6px;

	/* Os 10px negativos fazem o flyout recuar sobre o padding do painel; a

	   sobreposicao encolhe o vao diagonal do mouse. O acesso garantido vem

	   do clique, que trava o submenu em .dm-aberto. */

	margin: 0 0 0 -10px;

	z-index: 60;

	animation: dm-flyout .16s ease-out both;

}



/* Vira para a esquerda quando nao couber a direita (dm-menu.js mede). */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li.dm-aberto.dm-flip > ul.sub-menu {

	left: auto;

	right: 100%;

	margin: 0 -10px 0 0;

	animation-name: dm-flyout-flip;

}



/* Sobe quando o flyout (ou o painel de 1o nivel) passaria da base da tela.

   O dm-menu.js calcula o deslocamento em --dm-y. Usamos "translate" em vez de

   "bottom" por dois motivos: (1) um flyout com columns colapsa a altura

   quando ancorado por "bottom"; (2) a entrada anima "transform", que e

   propriedade separada de "translate", entao as duas nao brigam. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu li.dm-aberto.dm-sobe > ul.sub-menu {

	translate: 0 var(--dm-y, 0px);

}



@keyframes dm-flyout {

	from { opacity: 0; transform: translateX(-8px); }

	to   { opacity: 1; transform: none; }

}



@keyframes dm-flyout-flip {

	from { opacity: 0; transform: translateX(8px); }

	to   { opacity: 1; transform: none; }

}



/* Links dos flyouts: texto claro sobre o escuro. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu ul.sub-menu > li > a {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 8px;

	min-height: 38px;

	padding: 6px 10px;

	color: #e9e9f0;

	font-size: 13px;

	line-height: 1.3;

	white-space: normal;

	text-decoration: none;

	border-radius: 8px;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu ul.sub-menu > li > a:hover {

	color: #fff;

	background: var(--hd-marca);

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu ul.sub-menu > li.menu-item-has-children > a:hover::after {

	color: #fff;

}



/* Flyouts longos em colunas (classes do dm-menu.js): acima de 12 itens vira

   2 colunas, acima de 26 vira 3 (em telas largas). Sem isso a lista passaria

   da tela e exigiria rolagem - e barra de rolagem aqui recortaria os niveis

   mais profundos. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-2 {

	min-width: 478px !important;

	max-width: min(510px, 86vw);

	columns: 2;

	column-gap: 6px;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-3 {

	min-width: 700px !important;

	max-width: min(730px, 92vw);

	columns: 3;

	column-gap: 6px;

}



@media (max-width: 1199px) {

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-3 {

		columns: 2;

		min-width: 478px !important;

		max-width: min(510px, 86vw);

	}

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-2 > li,

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-3 > li {

	break-inside: avoid;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-2 > li > a,

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu > li > ul.sub-menu.dm-cols-3 > li > a {

	min-height: 34px;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu ul.sub-menu > li.menu-item-has-children > a::after {

	content: "\203A";

	font-size: 15px;

	line-height: 1;

	color: #8f8f9c;

	flex: 0 0 auto;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu ul.sub-menu > li.menu-item-has-children > a:hover::after {

	color: #fff;

}



/* Estado aberto por clique/toque/teclado (classe .dm-aberto do dm-menu.js).

   No 1o nivel o painel ja abre no hover no computador; esta regra garante que

   ele fique aberto apos o clique e que o mesmo caminho funcione com toque e

   teclado. Nos subniveis o :hover nao existe, entao esta e a unica forma de

   abrir: clicar na categoria prende o submenu ate escolher a subcategoria. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li.dm-aberto > ul.sub-menu {

	display: block;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu li.dm-aberto > a {

	color: #fff;

	background: var(--hd-marca);

	border-radius: 8px;

	box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55);

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu li.dm-aberto > a::after {

	color: #fff;

}



/* --------------------------------------------------------------------------

   Barra de departamentos: faixa clara com o gatilho a esquerda.

   -------------------------------------------------------------------------- */

body.dm-header-novo [data-id="cdfe369"],

body.dm-header-novo [data-id="feb5214"] {

	background: var(--hd-fundo);

	border-bottom: 1px solid var(--hd-linha);

	padding: 0 var(--hd-gutter);

	justify-content: flex-start;

	min-height: 48px;

}



body.dm-header-novo [data-id="466532c"],

body.dm-header-novo [data-id="84fa47b"] {

	width: auto;

	flex: 0 1 auto;

	padding: 0;

}



/* --------------------------------------------------------------------------

   Busca original do plugin: ocupa o espaco, nunca estoura para os lados.

   Sem travar altura: no mobile a barra cresce junto, o que nao pode e

   sobrepor os vizinhos.

   -------------------------------------------------------------------------- */

body.dm-header-novo .elementor-location-header .dgwt-wcas-search-wrapp,

body.dm-header-novo .elementor-location-header .dgwt-wcas-search-form,

body.dm-header-novo .elementor-location-header .dgwt-wcas-sf-wrapp {

	width: 100%;

	max-width: 100%;

}



body.dm-header-novo .elementor-location-header .dgwt-wcas-search-wrapp,

body.dm-header-novo .elementor-location-header .dgwt-wcas-search-form,

body.dm-header-novo .elementor-location-header .dgwt-wcas-sf-wrapp,

body.dm-header-novo .elementor-location-header .dgwt-wcas-search-input {

	max-width: 100%;

	margin-left: 0;

	margin-right: 0;

	box-sizing: border-box;

}



body.dm-header-novo .elementor-location-header .dgwt-wcas-search-input {

	width: 100% !important;

	min-height: 44px;

}



/* No computador o conjunto ficava alto demais. Versao bem compacta so no

   desktop: campo fino, faixa justa e logo menor. A largura continua

   flexivel (maximo 320px na coluna) e no mobile/tablet nada muda. */

@media (min-width: 1025px) {

	body.dm-header-novo .elementor-location-header .dgwt-wcas-search-input {

		min-height: 28px;

		font-size: 12.5px;

	}



	body.dm-header-novo [data-id="78c6277"] {

		min-height: 52px;

		padding-top: 2px;

		padding-bottom: 2px;

		gap: 16px;

	}



	body.dm-header-novo [data-id="efc35f5"] .elementor-widget-theme-site-logo img {

		max-height: 36px;

	}



	body.dm-header-novo [data-id="046dec2"] {

		min-height: 28px;

	}



	body.dm-header-novo [data-id="cdfe369"] {

		min-height: 36px;

	}

}



body.dm-header-novo .elementor-location-header .dgwt-wcas-search-input:focus {

	outline: none;

	border-color: var(--hd-marca);

	box-shadow: 0 0 0 3px rgba(218, 60, 60, .16);

}



/* --------------------------------------------------------------------------

   Carrinho: o contador e absolute em right:-7px e caia sobre o preco

   (aparecia "3R$ 185,00"). Com respiro no icone e altura de toque, fecha.

   -------------------------------------------------------------------------- */

body.dm-header-novo .elementor-location-header .elementor-menu-cart__toggle_button {

	min-height: 44px;

	align-items: center;

}



body.dm-header-novo .elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon {

	margin-right: 16px;

}



body.dm-header-novo .elementor-location-header .elementor-button-icon-qty {

	top: -6px;

	right: -10px;

	min-width: 19px;

	height: 19px;

	line-height: 19px;

	font-size: 10.5px;

}



body.dm-header-novo .elementor-location-header .elementor-menu-cart__toggle .elementor-button-text {

	white-space: nowrap;

	font-weight: 600;

}



/* --------------------------------------------------------------------------

   Tablet (768-1024px): mesmo desenho, mais compacto. O conjunto tablet do

   Elementor usa os mesmos widgets com outros containers.

   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	body.dm-header-novo [data-id="046dec2"],

	body.dm-header-novo [data-id="346ce2e"] {

		min-height: 38px;

	}



	body.dm-header-novo [data-id="78c6277"],

	body.dm-header-novo [data-id="5ad5464"] {

		min-height: 70px;

		gap: 18px;

		flex-wrap: wrap;

		row-gap: 8px;

	}



	body.dm-header-novo [data-id="8d53b03"],

	body.dm-header-novo [data-id="c7de76f"] {

		flex-basis: 200px;

		max-width: 320px;

	}



	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {

		flex-wrap: wrap;

		row-gap: 2px;

		column-gap: 18px;

	}

}



/* --------------------------------------------------------------------------

   Tablet (768-1024px): buscador real em linha propria.



   No conjunto tablet o widget de busca vem configurado no Elementor como

   so-icone: um toggle de lupa (30px) com o formulario em display:none.

   Numa barra de ~800px dividida com logo, menu e carrinho nao ha espaco

   para campo e icone lado a lado, entao a barra quebra em duas linhas:

   em cima logo/menu/carrinho, embaixo a busca em largura total. O toggle

   da lupa sai de cena e o formulario e forcado visivel; ele e um form

   normal e continua funcionando (inclusive as sugestoes do plugin).

   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) and (hover: hover) {

	/* So para tablet com mouse (ou navegador de desktop estreito): o painel

	   abre no hover, como no computador. Em toque, quem manda e o clique. */

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:hover > ul.sub-menu,

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:focus-within > ul.sub-menu {

		display: block;

	}



	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:hover,

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:focus-within {

		z-index: 3;

	}

}



@media (min-width: 768px) and (max-width: 1024px) {

	/* No tablet fica UM menu so: o "Todos os Departamentos". O menu

	   principal (Home/Minha Conta/Meus Pedidos, widget c31ab1d) sai de cena

	   junto com seu toggle: com os dois widgets visiveis o tablet mostrava

	   dois menus horizontais mais dois hamburgers, parecendo celular. */

	body.dm-header-novo [data-id="c31ab1d"] {

		display: none;

	}



	/* E no de departamentos fica so o link horizontal: o toggle dele tambem

	   some, senao o mesmo menu aparece duplicado (link + hamburger). O link

	   abre o painel no hover/toque pelas regras acima. */

	body.dm-header-novo [data-id="ccf060d"] .elementor-menu-toggle {

		display: none;

	}



	/* No tablet o widget de departamentos esta configurado no Elementor como

	   dropdown so no mobile (classe elementor-nav-menu--dropdown-mobile): o

	   Elementor esconde o toggle e o painel nessa largura e mostra o menu

	   horizontal, mas sem nenhuma regra que abra o submenu.

	   Quem abre aqui e o clique/toque (dm-aberto), igual ao computador. O

	   hover fica so para aparelhos com mouse, num bloco separado logo

	   abaixo: em tela de toque o :hover fica grudado no item tocado e abria

	   varios flyouts ao mesmo tempo. */

	body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li {

		position: relative;

		z-index: 2;

	}



	/* O widget de busca do tablet tem o mesmo problema do mobile: escala

	   1.5 nas configuracoes do Elementor

	   ("_transform_scale_effect_tablet":1.5 no data-settings do widget

	   e9f8921), impressa por post como --e-transform-scale no container.

	   Tudo media 500x44 e desenhava 750x66. Neutralizado aqui; o correto e

	   zerar no editor (widget de busca do header tablet > Avancado >

	   Transformar > Escala tablet = 1). */

	body.dm-header-novo .elementor-31853 .elementor-element.elementor-element-e9f8921 > .elementor-widget-container,

	body.dm-header-novo [data-id="c7de76f"] .e-transform {

		--e-transform-scale: 1;

	}



	body.dm-header-novo [data-id="c7de76f"] {

		flex: 1 1 100%;

		max-width: 100%;

		min-width: 0;

		order: 10;

	}



	body.dm-header-novo [data-id="c7de76f"] .js-dgwt-wcas-search-icon,

	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-search-icon-arrow,

	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-search-icon {

		display: none !important;

	}



	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-search-form {

		display: block !important;

		/* O plugin posiciona o form em absolute (modo lupa), ancorado no

		   wrapper de 30px: ele voava para x=390 com 750px, 340px para fora da

		   tela. Estatico ele volta ao fluxo, a coluna ganha altura e o botao

		   e o preloader (absolute) se ancoram certo no wrapper relative. */

		position: static !important;

		width: 100%;

		max-width: 100%;

		/* O modo lupa do plugin tambem deixa o form em opacity:0, revelando

		   so no clique da lupa. Como a lupa sai de cena e o campo fica

		   permanente, a opacidade e forcada em 1: sem isto o campo ocupa

		   espaco mas segue invisivel. */

		opacity: 1 !important;

		visibility: visible !important;

	}



	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-search-wrapp,

	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-search-form,

	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-sf-wrapp {

		width: 100%;

		max-width: 100%;

	}



	body.dm-header-novo [data-id="c7de76f"] .dgwt-wcas-search-input {

		width: 100% !important;

		max-width: 100%;

		min-height: 44px;

		font-size: 14px;

		box-sizing: border-box;

	}

}



/* --------------------------------------------------------------------------

   Mobile (<=767px): empilha sem sobrepor. Cada faixa mede o proprio conteudo;

   nada aqui impoe altura aos elementos do plugin de busca, entao a barra da

   busca cresce junto com o campo em vez de corta-lo.

   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	body.dm-header-novo [data-id="1589c41"] {

		background: var(--hd-suporte);

		border-bottom: 1px solid var(--hd-linha);

		padding: 6px var(--hd-gutter);

		justify-content: space-between;

		align-items: center;

		gap: 10px;

		flex-wrap: nowrap;

	}



	body.dm-header-novo [data-id="8231136"],

	body.dm-header-novo [data-id="9eae6ff"] {

		width: auto;

		flex: 0 0 auto;

		padding: 0;

	}



	/* Area de toque de verdade no hamburger (vinha em 50px solto). */

	body.dm-header-novo [data-id="8231136"] > [data-id="a49169f"],

	body.dm-header-novo [data-id="8231136"] .elementor-widget-container,

	body.dm-header-novo [data-id="8231136"] a {

		display: flex;

		align-items: center;

		justify-content: center;

		width: 44px;

		height: 44px;

		min-width: 44px;

	}



	body.dm-header-novo [data-id="8231136"] svg {

		width: 24px;

		height: 24px;

	}



	/* Logo cresce no espaco do meio e centraliza. */

	body.dm-header-novo [data-id="7e7bf26"] {

		flex: 1 1 auto;

		min-width: 0;

		display: flex;

		align-items: center;

		justify-content: center;

	}



	body.dm-header-novo .elementor-location-header .elementor-widget-theme-site-logo img {

		max-height: 38px;

		width: auto;

	}



	/* No mobile o carrinho mostra so o icone: preco e contador nao cabem ao

	   lado da logo e ficavam espremidos. */

	body.dm-header-novo [data-id="9eae6ff"] .elementor-menu-cart__toggle .elementor-button-text {

		display: none;

	}



	body.dm-header-novo [data-id="9eae6ff"] .elementor-menu-cart__toggle .elementor-button-icon {

		margin-right: 8px;

	}



	body.dm-header-novo [data-id="9eae6ff"] .elementor-menu-cart__toggle_button {

		padding: 0 10px;

	}



	/* Busca em faixa propria, largura total. O widget vinha com 230px fixos

	   do Elementor numa coluna de 346px; aqui ele ocupa a coluna toda e o

	   campo ganha altura confortavel (52px). A barra acompanha a altura e a

	   largura respeita o preenchimento lateral: nada estoura. */

	body.dm-header-novo [data-id="95836db"] > [data-id="1817e7d"] {

		width: 100%;

		flex: 1 1 auto;

		min-width: 0;

	}



	body.dm-header-novo [data-id="95836db"] .elementor-widget-fibosearch {

		max-width: 100%;

		width: 100%;

	}



	/* Campo alto e legivel, sem zoom automatico do iOS. */

	body.dm-header-novo .elementor-location-header .dgwt-wcas-search-input {

		font-size: 16px;

		min-height: 52px;

	}



	/* O plugin mostra no mobile um gatilho de tela cheia

	   (.js-dgwt-wcas-enable-mobile-form) empilhado exatamente sobre o

	   formulario inline: os dois com 391px no mesmo lugar, um em cima do

	   outro. Como o formulario inline esta visivel e funcional, o gatilho

	   sai de cena. Sem mexer em altura: so display. */

	body.dm-header-novo [data-id="95836db"] .js-dgwt-wcas-enable-mobile-form {

		display: none !important;

	}





	/* O widget vinha com escala 1.7 no mobile: alguem definiu scale mobile

	   nas configuracoes do widget no Elementor

	   (data-settings "_transform_scale_effect_mobile":1.7), e o Elementor

	   imprime por post, dentro de @media (max-width:767px):

	   .elementor-31853 .elementor-element.elementor-element-144db69 >

	   .elementor-widget-container { --e-transform-scale: 1.7 }

	   Tudo media 230px no CSS e desenhava 391px (230x1.7), vazando a barra.

	   O correto seria zerar no editor (clicar no widget de busca do header

	   mobile > Avancado > Transformar > Escala mobile = 1), mas aqui fica

	   neutralizado por CSS para valer de imediato. O seletor precisa desta

	   especificidade (0,5,1) para vencer os (0,4,0) do CSS por post. */

	body.dm-header-novo .elementor-31853 .elementor-element.elementor-element-144db69 > .elementor-widget-container,

	body.dm-header-novo [data-id="95836db"] .e-transform {

		--e-transform-scale: 1;

	}



	/* Sociais compactos e centralizados. */

	body.dm-header-novo [data-id="a279bc2"] {

		background: var(--hd-faixa);

		padding: 0 var(--hd-gutter);

		justify-content: center;

		min-height: 32px;

	}



	body.dm-header-novo [data-id="10e78cd"] {

		width: auto;

		flex: 0 0 auto;

		padding: 0;

	}



	body.dm-header-novo .elementor-location-header .elementor-social-icons-wrapper {

		gap: 2px;

	}



	body.dm-header-novo .elementor-location-header .elementor-social-icon {

		width: 26px;

		height: 26px;

		min-width: 26px;

		min-height: 26px;

		font-size: 12px;

	}

}



/* =====================================================================

 * Menu de departamentos em modo "passo a passo" (drill-down).

 *

 * Substitui o acordeao/flyout: clicar numa categoria abre SO as

 * subcategorias dela, no mesmo painel; clicar numa subcategoria abre o

 * proximo nivel; o botao "Voltar" sobe um nivel. So vale no menu de

 * departamentos (classe .dm-mega posta pelo dm-menu.js); os outros menus

 * do header ficam intactos.

 * =================================================================== */



/* Gatilho (nivel 1): ancora o painel. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li {

	position: relative;

}



/* Todo submenu comeca escondido e sem posicionamento de flyout; so o nivel

   atual (.dm-nivel) aparece. Assim nenhum nivel abre ao lado/fora da tela. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu {

	display: none !important;

	position: static !important;

	left: auto !important;

	right: auto !important;

	top: auto !important;

	width: auto !important;

	min-width: 0 !important;

	max-width: none;

	max-height: none;

	overflow: visible;

	margin: 0;

	padding: 0;

	list-style: none;

	border: 0;

	border-radius: 0;

	box-shadow: none;

	background: transparent;

	translate: none;

	animation: none;

	z-index: auto;

}



/* A variante --main/--dropdown entra para vencer a regra antiga de flyout

   (que tambem usa !important e conta .sub-menu duas vezes na especificidade). */

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu.dm-nivel,

body.dm-header-novo .elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu.dm-mega ul.sub-menu.dm-nivel {

	display: block !important;

}



/* Painel (dropdown sob o gatilho), com rolagem propria. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li > ul.sub-menu {

	position: absolute !important;

	/* top/left tambem com !important: o reset generico acima declara

	   top/left/right com !important, e sem repetir aqui o painel ficaria em

	   top:auto (posicao estatica) e abriria POR CIMA do gatilho, roubando o

	   clique do mouse. */

	left: 0 !important;

	right: auto !important;

	top: 100% !important;

	z-index: 90;

	width: min(380px, 92vw) !important;

	max-width: 92vw;

	/* --dm-limite e medido pelo JS: espaco real entre o rodape do gatilho e o

	   fim da viewport. Sem isso, um max-height em vh ignorava a posicao do

	   header e o painel terminava ABAIXO da dobra da tela (item inalcancavel

	   em notebook/tablet de poca altura). */

	max-height: var(--dm-limite, min(74vh, 640px));

	overflow-y: auto;

	overscroll-behavior: contain;

	scrollbar-width: thin;

	scrollbar-color: var(--hd-marca) rgba(255, 255, 255, .06);

	/* Sem folga entre gatilho e painel: o mouse nao "perde" o menu ao

	   descer, o que mantem o hover firme. */

	margin: 0;

	padding: 8px 6px;

	background: #17171d;

	color: #e9e9f0;

	border: 1px solid rgba(255, 255, 255, .12);

	border-top: 3px solid var(--hd-marca);

	border-radius: var(--hd-raio);

	box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .55);

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li.dm-aberto > ul.sub-menu {

	display: block !important;

}



/* Dentro de um nivel, so os itens marcados aparecem. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu li {

	display: none;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu li.dm-visivel {

	display: block;

}



/* Ancestral do nivel atual: e so um container, sem link. (O !important vence

   a antiga regra de flyout, que tem especificidade maior em submenus aninhados.) */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu li.dm-sem-link > a {

	display: none !important;

}



/* Itens: mesma aparencia em todos os niveis. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li > a {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 10px;

	min-height: 36px;

	padding: 6px 12px;

	border-radius: 8px;

	color: #e9e9f0;

	font-size: 14px;

	line-height: 1.3;

	text-decoration: none;

	white-space: normal;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li > a:hover,

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li.dm-atual > a {

	color: #fff;

	background: var(--hd-marca);

}



/* Botao "Voltar" (mostra o caminho atual). */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li.dm-voltar > a {

	margin-bottom: 6px;

	color: #c9c9d6;

	background: rgba(255, 255, 255, .06);

	font-weight: 600;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li.dm-voltar > a:hover {

	color: #fff;

	background: rgba(255, 255, 255, .14);

}



/* Seta a direita nos itens que abrem o proximo nivel. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a::after {

	content: "";

	flex: 0 0 auto;

	width: 7px;

	height: 7px;

	margin-left: 6px;

	border-right: 2px solid currentColor;

	border-bottom: 2px solid currentColor;

	transform: rotate(-45deg);

	transition: transform .15s ease;

}



body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li > a:focus-visible {

	outline: 2px solid #fff;

	outline-offset: -2px;

	border-radius: 8px;

}



@media (prefers-reduced-motion: reduce) {

	body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega li > a::after {

		transition: none;

	}

}

/* ==========================================================================

   Drill-down do menu de departamentos FORA do header global

   --------------------------------------------------------------------------

   O bloco anterior e as regras antigas sao ancorados em

   .elementor-location-header, que existe apenas nas paginas que usam o header

   global do Elementor. Ha paginas (contato, institucionais, posts, paginas

   criadas no Elementor) em que o mesmo widget de menu e montado DENTRO do

   conteudo da pagina: la o seletor do header nao casa, o dm-menu.js continua

   marcando .dm-mega/.dm-nivel, mas nenhuma regra visual se aplica e o Elementor

   volta a desenhar o mega menu antigo, com todos os niveis empilhados.



   Este bloco repete o essencial usando SO a classe .dm-mega, que o dm-menu.js

   coloca apenas nos menus de departamento (>= 10 submenus). Como tem

   especificidade menor que o bloco do header, nas paginas do header global ele

   nao compete: quem manda la continua sendo o bloco de maior especificidade.

   ========================================================================== */



.elementor-nav-menu.dm-mega > li {

	position: relative;

}



.elementor-nav-menu.dm-mega ul.sub-menu {

	display: none !important;

	position: static !important;

	left: auto !important;

	right: auto !important;

	top: auto !important;

	width: auto !important;

	min-width: 0 !important;

	max-width: none;

	max-height: none;

	overflow: visible;

	margin: 0;

	padding: 0;

	list-style: none;

	border: 0;

	border-radius: 0;

	box-shadow: none;

	background: transparent;

	translate: none;

	animation: none;

	z-index: auto;

}



.elementor-nav-menu.dm-mega > li > ul.sub-menu {

	display: none !important;

	position: absolute !important;

	left: 0 !important;

	right: auto !important;

	top: 100% !important;

	z-index: 90;

	width: min(380px, 92vw) !important;

	max-width: 92vw;

	/* --dm-limite e medido pelo JS: espaco real entre o rodape do gatilho e o

	   fim da viewport. Sem isso, um max-height em vh ignorava a posicao do

	   header e o painel terminava ABAIXO da dobra da tela (item inalcancavel

	   em notebook/tablet de poca altura). */

	max-height: var(--dm-limite, min(74vh, 640px));

	overflow-y: auto;

	overscroll-behavior: contain;

	scrollbar-width: thin;

	scrollbar-color: var(--hd-marca) rgba(255, 255, 255, .06);

	margin: 0;

	padding: 8px 6px;

	background: #17171d;

	color: #e9e9f0;

	border: 1px solid rgba(255, 255, 255, .12);

	border-top: 3px solid var(--hd-marca, #da3c3c);

	border-radius: var(--hd-raio, 10px);

	box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .55);

}



.elementor-nav-menu.dm-mega > li.dm-aberto > ul.sub-menu,

.elementor-nav-menu.dm-mega > li > ul.sub-menu.dm-nivel,

.elementor-nav-menu.dm-mega ul.sub-menu.dm-nivel {

	display: block !important;

}



.elementor-nav-menu.dm-mega ul.sub-menu li {

	display: none;

}



.elementor-nav-menu.dm-mega ul.sub-menu li.dm-visivel {

	display: block;

}



.elementor-nav-menu.dm-mega ul.sub-menu li.dm-sem-link > a {

	display: none !important;

}



.elementor-nav-menu.dm-mega li > a {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 10px;

	min-height: 36px;

	padding: 6px 12px;

	border-radius: 8px;

	color: #e9e9f0;

	font-size: 14px;

	line-height: 1.3;

	text-decoration: none;

	white-space: normal;

}



.elementor-nav-menu.dm-mega li > a:hover,

.elementor-nav-menu.dm-mega li.dm-atual > a {

	color: #fff;

	background: var(--hd-marca, #da3c3c);

}



.elementor-nav-menu.dm-mega li.dm-voltar > a {

	margin-bottom: 6px;

	color: #c9c9d6;

	background: rgba(255, 255, 255, .06);

	font-weight: 600;

}



.elementor-nav-menu.dm-mega li.dm-voltar > a:hover {

	color: #fff;

	background: rgba(255, 255, 255, .14);

}



.elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a::after {

	content: "";

	flex: 0 0 auto;

	width: 7px;

	height: 7px;

	margin-left: 6px;

	border-right: 2px solid currentColor;

	border-bottom: 2px solid currentColor;

	transform: rotate(-45deg);

	transition: transform .15s ease;

}



.elementor-nav-menu.dm-mega li > a:focus-visible {

	outline: 2px solid #fff;

	outline-offset: -2px;

	border-radius: 8px;

}



@media (prefers-reduced-motion: reduce) {

	.elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a::after {

		transition: none;

	}

}

/* Barra de rolagem visivel no painel.

   O painel tem rolagem propria (max-height) e, sem trilho visivel, o usuario

   via so 10 de 13 categorias e achava que as subcategorias "faltavam". */

.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar {

	width: 10px;

}

.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar-track {

	background: rgba(255, 255, 255, .07);

	border-radius: 8px;

}

.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar-thumb {

	background: var(--hd-marca, #da3c3c);

	border-radius: 8px;

	border: 2px solid transparent;

	background-clip: content-box;

}

.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar-thumb:hover {

	background: var(--hd-marca, #da3c3c);

	filter: brightness(1.25);

}



/* ==========================================================================

   SUBCATEGORIAS LADO A LADO (colunas) a partir do 2o nivel

   --------------------------------------------------------------------------

   Estrutura do Elementor: cada nivel fica DENTRO do <li> do nivel anterior

   (painel > li > ul > li > ul > ...). Se a UL ativa ganhasse `columns`, cada

   nivel mais fundo ficaria preso na largura da coluna que o contem.



   A correcao e tirar a caixa dos <li> que so servem de "caminho"

   (dm-sem-link, cujo link e oculto) com `display: contents`. Assim eles nao

   geram caixa nenhuma e a UL ativa, apesar de aninhada no DOM, ocupa a largura

   inteira do painel e distribui os itens em colunas de verdade.

   ========================================================================== */



body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu li.dm-sem-link,

.elementor-nav-menu.dm-mega ul.sub-menu li.dm-sem-link {

	display: contents !important;

}



/* --dm-cols e o numero de colunas; ajustado por media query abaixo. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li > ul.sub-menu.dm-largo,

.elementor-nav-menu.dm-mega > li > ul.sub-menu.dm-largo {

	--dm-cols: 3;

	width: min(760px, 94vw) !important;

}



/* A UL ativa (unica com .dm-ativo) e a que recebe as colunas. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu.dm-largo ul.sub-menu.dm-ativo,

.elementor-nav-menu.dm-mega ul.sub-menu.dm-largo ul.sub-menu.dm-ativo {

	columns: var(--dm-cols, 3);

	column-gap: 8px;

	float: none;

}



/* Item nunca partido ao meio entre duas colunas. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu.dm-largo ul.sub-menu.dm-ativo > li,

.elementor-nav-menu.dm-mega ul.sub-menu.dm-largo ul.sub-menu.dm-ativo > li {

	break-inside: avoid;

	page-break-inside: avoid;

	float: none;

}



/* O "Voltar" fica acima das colunas, na largura toda. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li > ul.sub-menu > li.dm-voltar,

.elementor-nav-menu.dm-mega > li > ul.sub-menu > li.dm-voltar {

	column-span: all;

}



/* Painel do 1o nivel continua estreito: e a lista de departamentos. */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li > ul.sub-menu:not(.dm-largo),

.elementor-nav-menu.dm-mega > li > ul.sub-menu:not(.dm-largo) {

	width: min(360px, 92vw) !important;

}



/* Tablet: painel largo, mas com menos colunas para nao espremer o texto. */

@media (max-width: 1024px) and (min-width: 768px) {

	body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega > li > ul.sub-menu.dm-largo,

	.elementor-nav-menu.dm-mega > li > ul.sub-menu.dm-largo {

		--dm-cols: 2;

		width: min(560px, 94vw) !important;

	}

}



/* Telas muito estreitas: uma coluna so, para o nome nao quebrar em duas linhas. */

@media (max-width: 767px) {

	body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega ul.sub-menu.dm-largo ul.sub-menu.dm-ativo,

	.elementor-nav-menu.dm-mega ul.sub-menu.dm-largo ul.sub-menu.dm-ativo {

		columns: 1;

	}

}


/* ==========================================================================
   APARENCIA DO PAINEL — UNICA FONTE DE VERDADE
   --------------------------------------------------------------------------
   Este e o unico bloco que cuida do visual. As versoes anteriores foram
   removidas: empilhar revisao sobre revisao gerava conflicts de
   especificidade, e era exatamente ai que nascia o visual amador
   (laje vermelha no hover, cantos de 7px, vinco na esquerda, tres tamanhos
   de fonte disputando).

   Padrao medido no menu "Mais categorias" do site de referencia:
     painel  857x490  fundo #fff  raio 0  sem borda
              sombra 0 10px 24px rgba(0,0,0,.08)
     item    Roboto 12px/400  cor #201f1f  pad 7px 28px
             fundo transparente  raio 0  sem borda  altura ~33px
     hover   cinza neutro. Nenhum vermelho.
   Ou seja: nao existe "card" por item. E uma grade de links em texto puro
   sobre um retangulo branco de sombra baixa.

   Os seletores carregam .elementor-nav-menu--main e repetem a estrutura
   "ul.sub-menu ul.sub-menu" para empatar de especificidade com as regras
   antigas acima (linhas 412 e 516, que ainda pintavam a laje vermelha) e
   vencerem pela ordem.
   ========================================================================== */

body.dm-header-novo .elementor-location-header .elementor-nav-menu.dm-mega,
.elementor-nav-menu.dm-mega {
	--dm-fondo: #fff;
	--dm-tinta: #201f1f;
	--dm-fraco: #6f6f6f;
	--dm-hover: rgba(0, 0, 0, .055);
	--dm-marca: var(--bs-primary, #da3c3c);
}

/* --- Superficie do painel ---------------------------------------------- */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu {
	/* O !important e obrigatorio: o reset ".dm-mega ul.sub-menu
	   { background: transparent }" e mais especifico que esta regra
	   e zerava o fundo do painel, deixando o menu sem superficie. */
	background: var(--dm-fondo) !important;
	color: var(--dm-tinta);
	border: 0;
	border-top: 0;
	border-radius: 0;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
	padding: 12px 0;
	font-family: Roboto, "Open Sans", -apple-system, "Segoe UI", sans-serif;
}

/* --- Item: link em texto puro, sem caixa -------------------------------- */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu ul.sub-menu > li > a,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu ul.sub-menu > li > a,
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu > li > a,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu > li > a {
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dm-tinta);
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0;
	border-radius: 0;
	padding: 7px 28px;
	min-height: 33px;
	transition: background-color .12s linear;
}

/* Departamentos do 1o nivel: um passo acima em peso, porque sao o nav principal. */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu:not(.dm-largo) li:not(.dm-voltar) > a,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu:not(.dm-largo) li:not(.dm-voltar) > a {
	font-size: 13px;
	font-weight: 500;
	color: var(--dm-tinta);
	background: transparent !important;
	box-shadow: none !important;
}

/* --- Hover: cinza neutro. Sem vermelho, sem laje. ----------------------- */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li > a:hover,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li > a:hover,
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu ul.sub-menu li > a:hover,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu ul.sub-menu li > a:hover {
	color: var(--dm-tinta);
	background-color: var(--dm-hover) !important;
	background-image: none !important;
}

/* Item do caminho atual: so a cor da marca, sem fundo. */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li.dm-atual > a,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li.dm-atual > a {
	color: var(--dm-marca);
	background-color: transparent !important;
}

/* --- Seta: so onde ha subcategoria, em cinza e pequena ------------------- */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a::after,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a::after {
	content: "\203A" !important;
	width: auto;
	height: auto;
	border: 0 !important;
	transform: none !important;
	background: none !important;
	font-size: 15px;
	line-height: 1;
	color: var(--dm-fraco);
	opacity: 1;
	transition: color .12s linear;
}

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a:hover::after,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a:hover::after,
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li.menu-item-has-children > a:hover::after,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li.menu-item-has-children > a:hover::after {
	color: var(--dm-tinta);
	transform: none !important;
}

/* --- Voltar: link simples, com fio, acima da lista ---------------------- */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu > li.dm-voltar > a,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu > li.dm-voltar > a,
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu:not(.dm-largo) li.dm-voltar > a,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu:not(.dm-largo) li.dm-voltar > a {
	font-size: 12px;
	font-weight: 500;
	color: var(--dm-fraco);
	background: transparent !important;
	box-shadow: none !important;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
	border-radius: 0;
	padding: 9px 28px 11px;
	margin: 0 0 8px;
	min-height: 0;
}

body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu > li.dm-voltar > a:hover,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega > li > ul.sub-menu > li.dm-voltar > a:hover {
	color: var(--dm-tinta);
	background-color: var(--dm-hover) !important;
}

/* --- Foco visivel e rolagem coerente ------------------------------------ */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega li > a:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega li > a:focus-visible {
	outline: 2px solid var(--dm-marca);
	outline-offset: -2px;
}

.elementor-nav-menu.dm-mega > li > ul.sub-menu {
	scrollbar-color: rgba(0, 0, 0, .22) transparent;
}
.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar {
	width: 8px;
}
.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar-track {
	background: transparent;
}
.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .22);
	border: 0;
	border-radius: 0;
}
.elementor-nav-menu.dm-mega > li > ul.sub-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .34);
}

/* A seta escurece junto com o texto no hover. As regras antigas das linhas
   426 e 569 punham "color:#fff" na seta (pensando no painel escuro), o que
   deixava a seta branca sobre o item cinza. Aqui ela volta a acompanhar o
   texto, com o mesmo peso de especificidade. */
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a:hover::after,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega li.menu-item-has-children.dm-visivel > a:hover::after,
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu ul.sub-menu li.menu-item-has-children > a:hover::after,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu ul.sub-menu li.menu-item-has-children > a:hover::after,
body.dm-header-novo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li.menu-item-has-children > a:hover::after,
.elementor-nav-menu--main .elementor-nav-menu.dm-mega ul.sub-menu li.menu-item-has-children > a:hover::after {
	color: var(--dm-tinta);
	transform: none !important;
}

/* DM: Header "Todos os Departamentos" - Opção 1 (Clean Professional) */
body.dm-header-novo .elementor-nav-menu--main > li.menu-item-41 > a {
  display: flex;
  align-items: center;
  gap: clamp(.25rem, .2rem + .5vw, .5rem);
  padding: .5rem .75rem;
  border-radius: .5rem;
  line-height: 1.2;
  transition: background-color .15s ease, transform .15s ease;
  touch-action: manipulation;
}

body.dm-header-novo .elementor-nav-menu--main > li.menu-item-41 > a > i.fa-bars {
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.dm-header-novo .elementor-nav-menu--main > li.menu-item-41 > a:hover {
  background-color: rgba(0, 0, 0, .04);
}

body.dm-header-novo .elementor-nav-menu--main > li.menu-item-41 > a:active {
  transform: scale(.995);
}

body.dm-header-novo .elementor-nav-menu--main > li.menu-item-41 > a:focus-visible {
  outline: 2px solid var(--hd-marca, currentColor);
  outline-offset: 2px;
}