.brp-busca-container {
	position: relative;
	display: flex;
	align-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

.brp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Ícone de lupa (botão) — reset agressivo para não herdar estilo de .button do tema/WooCommerce */
.brp-icone-lupa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	color: var(--brp-icone-cor, #222222);
	background: transparent;
	background-color: transparent;
	border: none;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	line-height: 1;
}

.brp-icone-lupa:hover,
.brp-icone-lupa:focus,
.brp-icone-lupa:active,
.brp-icone-lupa:visited {
	background: transparent;
	background-color: transparent;
	border: none;
	box-shadow: none;
	outline: none;
	color: var(--brp-icone-cor, #222222);
}

.brp-icone-svg {
	width: var(--brp-icone-tamanho, 22px);
	height: var(--brp-icone-tamanho, 22px);
	pointer-events: none;
}

/*
 * Painel de busca — usa position:fixed com top/left calculados via JS
 * (não depende de position:absolute dentro do header, que fica sujeito a
 * ser cortado por qualquer container ancestral com overflow:hidden,
 * comum em headers do Elementor).
 */
.brp-painel {
	position: fixed;
	width: min(92vw, var(--brp-campo-largura, 320px));
	background: #fff;
	border: var(--brp-moldura-espessura, 1px) solid var(--brp-moldura-cor, #ddd);
	border-radius: var(--brp-moldura-raio, 8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	z-index: 99999;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.brp-painel.brp-visivel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.brp-painel-topo {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
}

.brp-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 8px 12px;
	font-size: 16px; /* evita zoom automático no iOS ao focar */
	font-family: var(--brp-placeholder-fonte);
	color: #222;
	border: none;
	border-radius: var(--brp-moldura-raio, 6px);
	box-sizing: border-box;
	background: #f5f5f5;
}

.brp-input:focus {
	outline: 2px solid #ccc;
	outline-offset: -2px;
}

.brp-input::placeholder {
	color: var(--brp-placeholder-cor, #888888);
	font-family: var(--brp-placeholder-fonte);
}

/* Botão de fechar (X) — fácil de encontrar e clicar, resolve o "difícil de fechar" */
.brp-fechar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	color: #666;
}

.brp-fechar:hover,
.brp-fechar:focus {
	background: #f0f0f0;
	border: none;
	box-shadow: none;
	border-radius: 50%;
}

.brp-fechar-svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* Resultados — dentro do painel, sem corte de scroll apertado */
.brp-resultados {
	max-height: 60vh;
	overflow-y: auto;
	border-top: 1px solid #eee;
}

.brp-lista {
	list-style: none;
	margin: 0;
	padding: 4px;
}

.brp-item {
	margin: 0;
	padding: 0;
	/* efeito cascata: cada item aparece com um leve atraso e um pequeno deslize */
	opacity: 0;
	transform: translateY(-6px);
	animation: brp-cascata 0.25s ease forwards;
}

@keyframes brp-cascata {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.brp-item-link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px;
	text-decoration: none;
	border-radius: 6px;
	font-family: var(--brp-resultado-fonte);
}

.brp-item-link:hover,
.brp-item-link:focus {
	background: #f6f6f6;
}

.brp-item-imagem {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.brp-item-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.brp-item-nome {
	font-size: 14px;
	font-family: var(--brp-resultado-fonte);
	color: var(--brp-resultado-cor-nome, #222222);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brp-item-preco {
	font-size: 13px;
	font-family: var(--brp-resultado-fonte);
	color: var(--brp-resultado-cor-preco, #666666);
}

.brp-vazio {
	margin: 0;
	padding: 16px;
	font-size: 14px;
	font-family: var(--brp-resultado-fonte);
	color: #888;
	text-align: center;
}