/*
 * Ajustes do tema WordPress sobre o CSS herdado do site Laravel.
 *
 * Aqui entra só o que é novo ou precisou mudar na migração:
 *  - acessibilidade (link de pular, foco);
 *  - ícones SVG no lugar do Font Awesome;
 *  - estrutura base do carrossel (substitui o Owl Carousel + jQuery);
 *  - aviso de cookies, campo isca anti-spam, mensagens de formulário.
 */

/* ------------------------------------------------------------------ */
/* Acessibilidade                                                      */
/* ------------------------------------------------------------------ */
.skip-link {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 1000000;
	padding: 12px 20px;
	background: #000;
	color: #fff;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	transition: top 0.2s;
}
.skip-link:focus {
	top: 0;
	color: #fff;
}

:focus-visible {
	outline: 2px solid #F7901E;
	outline-offset: 3px;
}

main {
	display: block;
}

/*
 * Imagens saem do tema com width/height no HTML: o navegador usa esses valores
 * só para reservar o espaço (proporção) e evitar o "salto" do layout enquanto
 * carrega. O tamanho real continua sendo o do CSS herdado do Laravel, que foi
 * escrito para <img> sem atributos (por isso largura/altura automáticas).
 * :where() zera a especificidade: nenhuma regra de classe é atropelada.
 */
:where(img[width][height]) {
	width: auto;
	height: auto;
}

/* Logado no painel: a barra do WordPress ocupa o topo. */
body.admin-bar nav.navbar {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar nav.navbar {
		top: 46px;
	}
}

/* ------------------------------------------------------------------ */
/* Ícones SVG (substituem o Font Awesome do site anterior)             */
/* ------------------------------------------------------------------ */
.icone {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: none;
}

.links-internos .icone {
	font-size: 20px;
	transition: 0.4s;
}
.hover-li:hover .icone {
	transform: rotate(90deg);
}
nav form button .icone {
	font-size: 40px;
	margin-left: -100px;
}
@media (max-width: 768px) {
	nav form button .icone {
		font-size: 25px;
		margin-left: -75px;
	}
}

/* Botão "COMO CHEGAR": seta que antes vinha da fonte de ícones. */
.contato3 a.but::after {
	content: "";
	font-family: inherit;
	float: right;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("../img/icones/seta-direita-longa.svg") center / contain no-repeat;
	mask: url("../img/icones/seta-direita-longa.svg") center / contain no-repeat;
}

/* Botão de enviar da newsletter (ícone dentro do botão). */
footer form button.enviar .icone {
	font-size: 22px;
}

/* ------------------------------------------------------------------ */
/* Menu: item de busca só no catálogo                                  */
/* ------------------------------------------------------------------ */
.nav-item-busca {
	display: list-item;
}
nav .megamenu > form {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Aviso de cookies                                                    */
/* ------------------------------------------------------------------ */
#cookie_popup[hidden] {
	display: none;
}
#cookie_popup .btn-estilo1 {
	background: transparent;
	font-family: inherit;
}
#cookie_popup a:not(.btn-estilo1) {
	color: #0d6efd;
}

/* ------------------------------------------------------------------ */
/* Formulários                                                         */
/* ------------------------------------------------------------------ */
/* Campo isca anti-spam: invisível para pessoas, preenchido por robôs. */
.akeo-isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-aviso {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: 8px;
	border: 2px solid #000;
	font-weight: 700;
}
.form-aviso.erro {
	border-color: #b3261e;
	color: #b3261e;
}

/* ------------------------------------------------------------------ */
/* Carrossel (substitui o Owl Carousel; usa as mesmas classes)         */
/* ------------------------------------------------------------------ */
.owl-carousel {
	position: relative;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
}
.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
}
.owl-carousel .owl-stage {
	display: flex;
	position: relative;
	transition: transform 0.5s ease;
	will-change: transform;
}
.owl-carousel .owl-stage.sem-transicao {
	transition: none;
}
.owl-carousel .owl-item {
	flex: 0 0 auto; /* a largura exata é definida pelo JS (carrossel.js) */
	min-height: 1px;
	position: relative;
	box-sizing: border-box;
}
.owl-carousel .owl-item img {
	display: block;
	width: 100%;
}
.owl-carousel .owl-nav button,
.owl-carousel .owl-dots button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
	display: none;
}
.owl-carousel.owl-drag .owl-stage-outer {
	touch-action: pan-y;
}
@media (prefers-reduced-motion: reduce) {
	.owl-carousel .owl-stage {
		transition: none;
	}
}

/* Rolagem suave só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------------ */
/* Texto formatado vindo dos campos do painel                          */
/* ------------------------------------------------------------------ */
/* Parágrafos separados por uma linha em branco, como o <br><br> antigo. */
.akeo-rich p {
	margin: 0 0 1lh;
}
.akeo-rich > :last-child {
	margin-bottom: 1rem; /* mesma margem final de um <p> comum */
}

/* Classe do WordPress para texto só para leitores de tela. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Contato: o seletor de departamento era um <form> separado no Laravel */
/* ------------------------------------------------------------------ */
.contato1 .form-seletor {
	margin: 0px auto 0px auto;
	display: block;
	max-width: 820px;
}
@media only screen and (max-width: 768px) {
	.contato1 .form-seletor {
		margin: 50px auto 0px auto;
		display: block;
		max-width: 100%;
	}
}

/* Representantes: mensagem de lista vazia. */
.representantes .rep-vazio {
	text-align: center;
	margin: 40px 0;
}

/* Representantes: no site anterior o Isotope posicionava as fichas dentro do .grid,
   sem a margem negativa do .row do Bootstrap. */
.campo-representante1 .representantes > .row {
	margin-left: 0;
	margin-right: 0;
}

/* Política de Privacidade: tabela de categorias de dados.
   O CSS original foi colado de um editor com os valores traduzidos
   ("sólido", "colapso") e por isso as bordas nunca apareceram; aqui está
   a versão válida do que se pretendia. */
.politica .demo {
	border: 1px solid #C0C0C0;
	border-collapse: collapse;
	padding: 5px;
}
.politica .demo th {
	border: 1px solid #C0C0C0;
	padding: 5px;
	background: #F0F0F0;
}
.politica .demo td {
	border: 1px solid #C0C0C0;
	padding: 5px;
}

/* O CSS herdado do menu (menu.css) estiliza QUALQUER <nav> como barra fixa no topo.
   Migalhas e paginação do catálogo também são <nav> e precisam do fluxo normal. */
nav.produto-migalhas,
.scroll nav.produto-migalhas,
nav.catalogo-categorias,
.scroll nav.catalogo-categorias,
nav.catalogo-paginacao,
.scroll nav.catalogo-paginacao {
	position: static !important;
	transform: none;
	width: auto;
	border: 0;
	background: transparent;
	z-index: auto;
	transition: none;
}

/* A tela de carregamento recolhe com transição (~0,7 s); enquanto isso ela não pode
   interceptar cliques de quem já está usando a página. */
.page-loader.hidden-load {
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Menu: rolagem mais suave                                            */
/* Logo única, menor ao rolar (sem trocar de largura); o menu some ao  */
/* descer e volta ao subir.                                            */
/* ------------------------------------------------------------------ */
.logo-branco,
.logo-preto {
	width: auto;
	opacity: 1;
}
nav .navbar-brand img.logo-preto,
.scroll nav .navbar-brand img.logo-branco,
.menu-preto nav .navbar-brand img.logo-branco,
nav.menu-preto .navbar-brand img.logo-branco {
	display: none;
}
.scroll nav .navbar-brand img.logo-preto,
.menu-preto nav .navbar-brand img.logo-preto,
nav.menu-preto .navbar-brand img.logo-preto {
	display: inline-block;
}
nav .navbar-brand img {
	transition: max-width 0.35s ease;
}
.scroll nav .navbar-brand img {
	max-width: 105px;
}
nav.navbar {
	transition: transform 0.35s ease, background-color 0.35s ease;
}
/* Só o menu principal (.navbar) some ao descer: migalhas e paginação também são <nav>
   e, sem esta restrição, subiam 100% de si mesmas e ficavam por cima dos cards. */
body.scroll.scroll-down nav.navbar:not(:has(.show)):not(:focus-within) {
	transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
	nav.navbar, nav .navbar-brand img {
		transition: none;
	}
}

/* Botão BUSCA alinhado com os links do menu (desktop) */
@media (min-width: 992px) {
	.navbar-nav.ms-auto {
		align-items: center;
	}
	.navbar-nav .nav-link.nav-busca,
	.scroll .navbar-nav .nav-link.nav-busca {
		margin: 0 0 0 20px;
		padding: 8px 24px;
		border-top-width: 1px;
		transform: translateY(2px);
	}
}

/* Menu compacto desde o topo (mesmo tamanho de quando a página rola) */
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav .nav-link:not(.nav-busca),
	.scroll .navbar-expand-lg .navbar-nav .nav-link:not(.nav-busca) {
		padding: 30px 0; /* sem o respiro lateral do topo: espaçamento igual ao do menu rolado */
	}
	nav .navbar-brand img {
		max-width: 105px;
	}
}

/* Painel de busca: campo elegante e centralizado na página */
@media (min-width: 992px) {
	nav .nav-item-busca .dropdown-menu.megamenu.show {
		padding: 26px 0 30px;
		left: 0;
		right: 0;
	}
	nav .nav-item-busca .megamenu > form {
		width: 100%;
		justify-content: center;
	}
	nav .nav-item-busca .form-floating {
		width: min(720px, calc(100% - 94px));
		margin: 0 !important;
	}
	nav .nav-item-busca .form-floating > .form-control {
		width: 100%;
		height: 56px;
		padding: 0 68px 0 28px;
		font-size: 18px;
		color: #000;
		background: #fff;
		border: 1px solid #CFCFCF;
		border-radius: 999px;
		transition: border-color 0.2s;
	}
	nav .nav-item-busca .form-floating > .form-control:focus {
		border-color: #000;
	}
	nav .nav-item-busca .form-control::placeholder {
		color: #777;
		opacity: 1;
	}
	nav .nav-item-busca form button.btn {
		position: absolute;
		top: 50%;
		right: 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		transform: translateY(-50%);
		color: #fff;
		background: #000;
		border-radius: 50%;
	}
	nav .nav-item-busca form button .icone {
		width: 18px;
		height: 18px;
	}
}
nav .nav-item-busca form button .icone,
nav .nav-item-busca form button .icone * {
	color: #fff;
	stroke: #fff;
}
@media (min-width: 992px) {
	nav .nav-item-busca form button .icone {
		margin: 0;
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------ */
/* Sugestões ao digitar na busca (menu e listagem)                     */
/* ------------------------------------------------------------------ */
form.tem-sugestoes,
.form-floating.tem-sugestoes {
	position: relative;
}
/* O "x" nativo do campo de busca some: o visitante apaga com o teclado e o visual fica limpo */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.sugestoes {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 50;
	padding: 8px;
	text-align: left;
	background: #fff;
	border: 1px solid #E2E2E2;
	border-radius: 20px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}
.sugestoes[hidden] {
	display: none;
}
.sugestao,
.sugestoes-todos {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	color: #000;
	text-decoration: none;
	border-radius: 14px;
}
.sugestao img {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.sugestao-nome,
.sugestao-categoria {
	display: block;
}
.sugestao-nome {
	font-size: 15px;
	line-height: 20px;
}
.sugestao-categoria {
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6d6d6d;
}
.sugestao:hover,
.sugestao[aria-selected="true"],
.sugestoes-todos:hover,
.sugestoes-todos[aria-selected="true"] {
	background: #F2F2F2;
}
.sugestoes-todos {
	justify-content: center;
	font-size: 13px;
	text-decoration: underline;
}
.sugestoes-vazio {
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	color: #6d6d6d;
}
mark {
	padding: 0 1px;
	color: inherit;
	background: #FFE9B8;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/* Seletor de idioma: bandeira + lista (à direita da busca)            */
/* ------------------------------------------------------------------ */
.nav-item-idioma {
	position: relative;
	display: list-item;
	margin-left: 14px;
}
.idioma-campo {
	position: relative;
}
.idioma-botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 4px;
	color: var(--bg-colorwhite);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.4s;
}
.idioma-botao:focus-visible,
.idioma-lista button:focus-visible {
	outline: 2px solid #F7901E;
	outline-offset: 2px;
}
.idioma-bandeira {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.idioma-seta {
	width: 12px;
	height: 12px;
	margin: 0;
	stroke: currentColor;
	stroke-width: 3;
	transition: transform 0.2s;
}
.idioma-botao[aria-expanded="true"] .idioma-seta {
	transform: rotate(180deg);
}
/* Menu branco (rolado ou páginas internas): seta preta, como os demais links */
.scroll .idioma-botao,
.menu-preto .idioma-botao {
	color: #000;
}
.idioma-lista {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 60;
	min-width: 170px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #E2E2E2;
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
}
.idioma-lista[hidden] {
	display: none;
}
.idioma-lista button {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 12px;
	font: inherit;
	font-size: 15px;
	color: #000;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}
.idioma-lista button:hover,
.idioma-lista button[aria-current="true"] {
	background: #F2F2F2;
}
.idioma-lista .idioma-bandeira {
	width: 24px;
	height: 24px;
}
@media (max-width: 991px) {
	.nav-item-idioma {
		margin: 0 0 14px;
		text-align: center;
	}
	.idioma-botao {
		color: #000;
	}
	.idioma-lista {
		position: static;
		display: block;
		width: max-content;
		margin: 6px auto 0;
		box-shadow: none;
	}
	.idioma-lista[hidden] {
		display: none;
	}
}
/* Área do widget do Google: escondida (a troca é feita pelo seletor do menu) */
.idioma-google {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
/* Remove a faixa e os realces que o Google insere sobre o site traduzido */
.skiptranslate iframe,
iframe.skiptranslate,
.goog-te-banner-frame {
	display: none !important;
}
body {
	top: 0 !important;
}
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
	display: none !important;
}
.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}
