/* Tokens de cor globais (fundo quase preto com tom violeta + roxo como
   destaque — identidade visual atualizada pra combinar com a referência
   de página de vendas passada pelo usuário). Em :root de propósito (não
   só dentro de .bp-portal) — o catálogo público (.bp-cat-pagina,
   BP_Portal_Catalogo) também usa essas variáveis, e uma custom property
   só existe onde foi declarada: se ficasse só dentro de .bp-portal,
   qualquer var(--bp-painel) fora dele caía pra "unset" (fundo/texto
   invisível) — foi exatamente o bug que deixou o catálogo público
   cinza/sem estilo na primeira versão. --bp-verde/--bp-vermelho/
   --bp-amarelo continuam sinalizando disponível/indisponível/atenção
   (cor semântica, não faz parte da marca) e por isso não mudam aqui. */
:root {
	--bp-bg: #0d0b14;
	--bp-painel: #171420;
	--bp-painel-alt: #201c2e;
	--bp-linha: #332c46;
	--bp-ink: #f5f3fa;
	--bp-ink-soft: #a89fc2;
	--bp-verde: #3fbd7c;
	--bp-verde-bg: rgba(63, 189, 124, 0.14);
	--bp-vermelho: #e2543f;
	--bp-vermelho-bg: rgba(226, 84, 63, 0.15);
	--bp-azul: #8b7cf6;
	--bp-azul-bg: rgba(139, 124, 246, 0.16);
	--bp-amarelo: #d9762a;
	--bp-amarelo-bg: rgba(217, 118, 42, 0.15);
	--bp-cinza: #8f88a8;
	--bp-cinza-bg: rgba(143, 136, 168, 0.15);
	--bp-mono: "SF Mono", "Roboto Mono", "Consolas", "Menlo", monospace;
}

/* Catálogo público (loja) em tema CLARO — pedido explícito
   do usuário: o painel interno (investidor/admin) é uma ferramenta de
   análise, combina com tema escuro tipo terminal; o catálogo é loja
   virtual pro cliente final/comprador, e o padrão do setor (Mercado
   Livre, Amazon, sites de autopeça) é fundo claro — mais fácil de ler
   preço/código rápido, e a foto do produto (já vem em fundo branco)
   funde com o card em vez de "flutuar" isolada numa área escura.
   Sobrescreve só os tokens, escopado em .bp-cat-pagina — todo o resto
   do CSS já usa var(--bp-*), então o catálogo inteiro reage sozinho,
   sem precisar duplicar regra por regra. */
.bp-cat-pagina {
	--bp-bg: #f5f5fa;
	--bp-painel: #ffffff;
	--bp-painel-alt: #f3f1fa;
	--bp-linha: #e5e2ef;
	--bp-ink: #221c35;
	--bp-ink-soft: #75708c;
	--bp-verde: #1a9c5b;
	--bp-verde-bg: rgba(26, 156, 91, 0.10);
	--bp-vermelho: #d1392b;
	--bp-vermelho-bg: rgba(209, 57, 43, 0.08);
	--bp-azul: #6d5bd0;
	--bp-azul-bg: rgba(109, 91, 208, 0.10);
	--bp-amarelo: #b8650f;
	--bp-amarelo-bg: rgba(184, 101, 15, 0.10);
	--bp-cinza: #8a8496;
	--bp-cinza-bg: rgba(138, 132, 150, 0.10);
}

/* O tema do WordPress desenha o próprio título da página ("nome do site"
   + título) e às vezes cabeçalho/rodapé ACIMA do conteúdo do shortcode —
   como esse portal (e o catálogo público) já têm cabeçalho próprio, esse
   título genérico do tema só sobra em cima e faz a página parecer
   inacabada/quebrada. Isso aqui esconde esse "chrome" do tema SÓ nas
   páginas que têm um desses shortcodes — nenhuma outra página do site é
   afetada. */
body:has(.bp-portal) .site-header,
body:has(.bp-portal) .site-footer,
body:has(.bp-portal) .page-header,
body:has(.bp-portal) .entry-header,
body:has(.bp-cat-pagina) .site-header,
body:has(.bp-cat-pagina) .site-footer,
body:has(.bp-cat-pagina) .page-header,
body:has(.bp-cat-pagina) .entry-header {
	display: none !important;
}

article:has(.bp-portal),
.entry-content:has(.bp-portal),
.page-content:has(.bp-portal),
.wp-block-post-content:has(.bp-portal),
main:has(.bp-portal),
#content:has(.bp-portal),
.site-content:has(.bp-portal),
.content-area:has(.bp-portal) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background: var(--bp-bg) !important;
}

/* .bp-cat-pagina sobrescreve --bp-bg só dentro de si mesma (tema claro
   do catálogo) — essa custom property não "sobe" pro body/article que
   são ANCESTRAIS dela, então aqui precisa da cor literal, senão o
   fundo em volta do card branco do catálogo continuava escuro (herdado
   do :root). */
article:has(.bp-cat-pagina),
.entry-content:has(.bp-cat-pagina),
.page-content:has(.bp-cat-pagina),
.wp-block-post-content:has(.bp-cat-pagina),
main:has(.bp-cat-pagina),
#content:has(.bp-cat-pagina),
.site-content:has(.bp-cat-pagina),
.content-area:has(.bp-cat-pagina),
.site-main:has(.bp-cat-pagina) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background: #f5f5fa !important;
	max-width: none !important;
}

/* Página inteira no fundo escuro — visual de terminal de bolsa, não de
   página de site institucional. */
body:has(.bp-portal) {
	background: var(--bp-bg) !important;
}

/* Catálogo público: fundo claro em volta do card — cor literal pelo
   mesmo motivo do bloco de article/main acima (--bp-bg do :root, que
   o body herda, continua escuro; o catálogo só redefine essa variável
   dentro de .bp-cat-pagina, não pra cima). */
body:has(.bp-cat-pagina) {
	background: #f5f5fa !important;
}

.bp-portal {
	max-width: 1180px;
	margin: 24px auto;
	padding: 0 16px 60px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bp-ink);
	line-height: 1.5;
	box-sizing: border-box;
	background: var(--bp-bg);
}

.bp-portal *,
.bp-portal *::before,
.bp-portal *::after {
	box-sizing: border-box;
}

.bp-hero {
	text-align: center;
	padding: 30px 20px;
	background: linear-gradient(135deg, #0d0b14 0%, #241c3a 55%, #8b7cf6 100%);
	border: 1px solid var(--bp-linha);
	border-radius: 16px;
	color: #fff;
	margin-bottom: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.bp-hero-selo {
	display: inline-block;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
}

/* h1/h2/h3 são o alvo nº1 de reset de tema — travado com !important daqui
   pra baixo, senão o título sai pequeno/sem estilo mesmo com font-size
   escrito (já vivido nesse mesmo tema, Hello Elementor). */
.bp-hero h2 {
	margin: 0 0 6px !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: #fff !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.bp-subtitulo {
	margin: 0 !important;
	font-size: 14px !important;
	opacity: 0.85;
	font-weight: 400 !important;
	color: inherit;
}

.bp-barra-topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
	padding: 10px 16px;
	margin-bottom: 18px;
	font-size: 13px;
	color: var(--bp-ink-soft);
}

.bp-login-info a {
	color: var(--bp-azul) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.bp-vazio {
	text-align: center;
	color: var(--bp-ink-soft);
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 12px;
	padding: 22px;
	font-size: 13px;
}

.bp-cat-bloqueio {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 360px;
	margin: 48px auto;
	padding: 36px 28px;
}

.bp-cat-bloqueio-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--bp-azul-bg);
	color: var(--bp-azul);
}

.bp-cat-bloqueio-titulo {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--bp-ink);
}

.bp-cat-bloqueio-texto {
	margin: 0 0 22px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bp-ink-soft);
}

.bp-cat-bloqueio-botao,
.bp-cat-bloqueio-botao:visited {
	display: inline-flex !important;
	align-items: center !important;
	height: 42px !important;
	line-height: 42px !important;
	background: var(--bp-azul) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0 20px !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.bp-cat-bloqueio-botao:hover {
	background: #7362d6 !important;
	color: #fff !important;
}

.bp-aviso-erro {
	background: var(--bp-vermelho-bg);
	border: 1px solid var(--bp-vermelho);
	color: var(--bp-vermelho);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13.5px;
	margin: 0 0 18px;
}

.bp-aviso-ok {
	background: var(--bp-verde-bg);
	border: 1px solid var(--bp-verde);
	color: var(--bp-verde);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13.5px;
	font-weight: 700;
	margin: 0 0 18px;
}

.bp-parceria-box {
	background: var(--bp-painel-alt);
	border: 1px solid var(--bp-azul);
	border-radius: 10px;
	padding: 18px;
	margin: 0 0 18px;
	text-align: center;
}

.bp-parceria-selo {
	font-size: 20px;
	font-weight: 800;
	color: var(--bp-azul);
	line-height: 1.2;
	margin: 0 0 10px;
}

.bp-parceria-box p {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--bp-ink-soft);
}

.bp-parceria-rodape {
	font-size: 12.5px;
	color: var(--bp-ink-soft);
	text-align: center;
	margin: 0;
}

/* ---- "Meu Catálogo" (painel do investidor) e formulário de dados
   reaproveitado no checkout do catálogo público (BP_Portal_Catalogo) ---- */

.bp-orc-painel {
	margin-bottom: 0;
}

.bp-orc-painel-sub {
	margin: 0 0 16px !important;
	font-size: 13px !important;
	color: var(--bp-ink-soft) !important;
	font-weight: 400 !important;
}

.bp-orc-form-enviar {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block !important;
	width: 100% !important;
	margin-top: 6px !important;
	padding: 12px 16px !important;
	background: var(--bp-azul) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer;
}

.bp-catalogo-subabas {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
}

.bp-catalogo-subaba {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: var(--bp-painel-alt) !important;
	border: 1px solid var(--bp-linha) !important;
	color: var(--bp-ink-soft) !important;
	border-radius: 999px !important;
	padding: 9px 16px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.bp-catalogo-subaba-ativa {
	background: var(--bp-azul) !important;
	border-color: var(--bp-azul) !important;
	color: #fff !important;
}

.bp-catalogo-subaba-abrir {
	background: var(--bp-verde) !important;
	border-color: var(--bp-verde) !important;
	color: #fff !important;
}

.bp-catalogo-subaba-abrir:hover {
	filter: brightness(0.92);
}

.bp-catalogo-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 16px;
	margin-bottom: 16px;
	padding: 16px;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
}

.bp-catalogo-toggle {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bp-ink);
}

.bp-catalogo-toggle input {
	width: auto !important;
}

.bp-catalogo-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--bp-ink-soft);
}

.bp-catalogo-campo input {
	width: 90px;
	padding: 8px 10px;
	border: 1px solid var(--bp-linha);
	border-radius: 6px;
	background: var(--bp-painel-alt);
	color: var(--bp-ink);
}

.bp-catalogo-fabricantes {
	flex: 1 0 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bp-catalogo-fabricantes-sub {
	font-size: 12px;
	color: var(--bp-ink-soft);
	margin: 0;
}

.bp-catalogo-fabricantes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px 14px;
	max-height: 260px;
	overflow-y: auto;
	padding: 12px;
	background: var(--bp-painel-alt);
	border: 1px solid var(--bp-linha);
	border-radius: 8px;
}

.bp-catalogo-fabricante-item {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bp-ink);
}

.bp-catalogo-fabricante-item input {
	width: auto !important;
}

.bp-catalogo-fabricante-item span {
	color: var(--bp-ink-soft);
	font-size: 11px;
}

.bp-catalogo-titulo-busca {
	margin: 8px 0 10px;
	font-size: 14px;
	color: var(--bp-ink);
}

.bp-catalogo-lista-fornecedor {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bp-catalogo-item-fornecedor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 8px;
}

.bp-catalogo-item-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 240px;
}

.bp-catalogo-item-info strong {
	font-size: 13.5px;
	color: var(--bp-ink);
}

.bp-catalogo-item-info span {
	font-size: 11.5px;
	color: var(--bp-ink-soft);
}

/* ---- Catálogo público (BP_Portal_Catalogo, [bp_catalogo]) — cliente
   FINAL da loja, sem login. Também esconde o header/footer do tema
   (mesmo tratamento do .bp-portal, ver regra no topo do arquivo) — a
   loja de virtual já tem cabeçalho próprio (faixa navy + banner). ---- */

.bp-cat-pagina {
	max-width: 1440px;
	margin: 24px auto;
	padding: 28px;
	background: var(--bp-painel);
	color: var(--bp-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	border: 1px solid var(--bp-linha);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(30, 20, 60, 0.08);
	box-sizing: border-box;
	overflow: hidden;
}

.bp-cat-pagina *,
.bp-cat-pagina *::before,
.bp-cat-pagina *::after {
	box-sizing: border-box;
}

.bp-cat-topo {
	text-align: center;
	margin-bottom: 20px;
}

.bp-marketplace .bp-cat-busca-form {
	justify-content: center;
}

.bp-marketplace-select {
	background: var(--bp-painel-alt) !important;
	border: 1px solid var(--bp-linha) !important;
	border-radius: 8px !important;
	color: var(--bp-ink) !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	min-width: 240px;
}

.bp-marketplace-lojas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.bp-marketplace-loja-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	background: var(--bp-painel-alt);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
}

.bp-marketplace-loja-nome {
	font-size: 15px;
	color: var(--bp-ink);
}

.bp-marketplace-loja-meta {
	font-size: 12px;
	color: var(--bp-ink-soft);
}

.bp-marketplace-loja-ir {
	margin-top: 8px;
	display: inline-block;
	text-align: center;
	background: var(--bp-azul) !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.bp-cat-selo {
	display: inline-block;
	background: var(--bp-azul-bg);
	color: var(--bp-azul);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.bp-cat-topo h2 {
	margin: 0;
	font-size: 22px;
	color: var(--bp-ink);
}

/* Faixa cheia navy (mesma identidade do fornecedor usada na barra de
   departamentos/banner) pro nome + contato da loja/distribuidor —
   sangra até a borda do card, igual .bp-departamentos/.bp-banner-carrossel,
   substituindo o "selo + h2 solto no branco" de antes por um cabeçalho
   com o mesmo peso visual do site de referência. */
.bp-cat-topo-faixa {
	position: relative;
	background: #1e2168;
	margin: 0;
	padding: 28px 24px 24px;
	text-align: center;
}

.bp-cat-topo-faixa .bp-cat-selo {
	background: rgba(255, 255, 255, 0.16);
	color: #fff !important;
}

.bp-cat-topo-faixa h2 {
	color: #fff !important;
}

.bp-cat-topo-faixa .bp-subtitulo {
	color: rgba(255, 255, 255, 0.82) !important;
	margin-top: 6px;
}

.bp-cat-topo-faixa .bp-subtitulo a {
	color: #fff !important;
	text-decoration: underline !important;
}

.bp-cat-busca-titulo {
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--bp-ink);
	margin: 16px 0 8px;
}

.bp-cat-busca-form {
	display: flex;
	gap: 8px;
	margin: 0 0 6px;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.bp-cat-busca-form input {
	flex: 1 1 auto;
	padding: 11px 14px;
	border: 1px solid var(--bp-linha);
	border-radius: 8px;
	background: var(--bp-painel-alt);
	color: var(--bp-ink);
	font-size: 14px;
}

.bp-cat-busca-icone {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto;
	width: 42px;
	padding: 0 !important;
	background: var( --bp-azul ) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bp-cat-busca-icone:hover {
	background: #7362d6 !important;
}

.bp-cat-busca-wrap {
	position: relative;
	max-width: 560px;
	margin: 0 auto 6px;
}

.bp-cat-busca-wrap .bp-cat-busca-form {
	margin: 0;
	max-width: none;
}

.bp-busca-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
	overflow: hidden;
	max-height: 420px;
	overflow-y: auto;
}

.bp-busca-dropdown-vazio {
	margin: 0;
	padding: 14px;
	font-size: 13px;
	color: var(--bp-ink-soft);
	text-align: center;
}

.bp-busca-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--bp-linha);
	text-decoration: none !important;
	color: var(--bp-ink) !important;
}

.bp-busca-dropdown-item:last-of-type {
	border-bottom: none;
}

.bp-busca-dropdown-item:hover {
	background: var(--bp-painel-alt);
}

.bp-busca-dropdown-item img {
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 6px;
	flex: 0 0 auto;
	background: var(--bp-painel-alt);
}

.bp-busca-dropdown-sem-foto {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--bp-painel-alt);
	font-size: 16px;
}

.bp-busca-dropdown-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.bp-busca-dropdown-info strong {
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bp-busca-dropdown-meta {
	font-size: 11.5px;
	color: var(--bp-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bp-busca-dropdown-tudo {
	display: block;
	padding: 10px 12px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bp-azul) !important;
	text-decoration: none !important;
	background: var(--bp-painel-alt);
}

.bp-busca-dropdown-tudo:hover {
	text-decoration: underline !important;
}

/*
 * "🤖 Super Consultor" — botão de destaque embaixo da busca, pedido
 * explícito do usuário ("faça algo incrível"). Gradiente animado +
 * brilho sutil pra chamar atenção sem virar poluição visual; respeita
 * prefers-reduced-motion pra quem desativou animação no sistema.
 */
.bp-super-consultor {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 560px;
	margin: 14px auto 22px;
	padding: 14px 18px;
	background: linear-gradient(120deg, #6d5bd0, #8b7cf6, #a698ff, #6d5bd0);
	background-size: 300% 300%;
	animation: bp-super-consultor-gradiente 6s ease infinite;
	border-radius: 14px;
	text-decoration: none !important;
	box-shadow: 0 10px 28px rgba(109, 91, 208, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bp-super-consultor:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(109, 91, 208, 0.42);
}

@keyframes bp-super-consultor-gradiente {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.bp-super-consultor-icone {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 50%;
}

.bp-super-consultor-texto {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bp-super-consultor-texto strong {
	font-size: 14px;
	color: #fff !important;
	line-height: 1.3;
}

.bp-super-consultor-texto span {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.4;
}

.bp-super-consultor-seta {
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.bp-super-consultor {
		animation: none;
		background-position: 0% 50%;
	}
}

@media (max-width: 480px) {
	.bp-super-consultor-texto span {
		display: none;
	}
}

.bp-cat-resultados-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0;
	flex-wrap: wrap;
}

.bp-cat-aviso-corte {
	font-size: 13px;
	color: var(--bp-azul);
	font-weight: 600;
	margin: 0;
}

.bp-cat-exibir-form {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--bp-ink-soft);
}

.bp-cat-exibir-form select {
	padding: 5px 8px;
	border: 1px solid var(--bp-linha);
	border-radius: 6px;
	background: var(--bp-painel);
	color: var(--bp-ink);
	font-size: 13px;
}

/* Barra de departamentos + carrossel de banner no topo do catálogo —
   identidade visual do fornecedor (Authomix: navy + verde-limão), por
   isso cores próprias em vez de var(--bp-azul) (essa é a cor da MARCA
   do plugin, não a do fornecedor cujo catálogo está sendo exibido).
   Sangra até a borda do card .bp-cat-pagina (margin negativo = padding
   do card) pra parecer topo de loja virtual de verdade, não um bloco
   preso dentro do conteúdo. */
.bp-cat-chrome {
	margin: -28px -28px 20px;
}

.bp-departamentos {
	background: #1e2168;
	margin: 0;
}

.bp-departamentos-wrap {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 12px 28px;
	/* Sem overflow-x aqui de propósito — cliparia o painel do mega-menu
	   de família (position:absolute) também na vertical. Quem rola
	   horizontalmente é só .bp-departamentos-lista, abaixo. */
}

.bp-departamentos-admin {
	flex-shrink: 0;
	color: #fff !important;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none !important;
	white-space: nowrap;
}

.bp-departamentos-admin:hover {
	color: #fff !important;
	opacity: 0.85;
}

.bp-departamentos-sair {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.75) !important;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
	margin-left: 12px;
	padding-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.bp-departamentos-sair:hover {
	color: #fff !important;
}

.bp-departamentos-link-todos {
	flex-shrink: 0;
	padding: 3px 12px !important;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.bp-departamentos-link.bp-departamentos-link-todos:hover,
.bp-departamentos-link.bp-departamentos-link-todos.bp-departamentos-link-ativo {
	background: #fff;
	border-color: #fff;
	color: #1e2168 !important;
}

.bp-departamentos-lista {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	flex: 1;
	min-width: 0;
	row-gap: 10px;
}

.bp-departamentos-link {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
}

.bp-departamentos-link:hover,
.bp-departamentos-link-ativo {
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.bp-departamentos-mais-wrap {
	position: relative;
	flex-shrink: 0;
}

.bp-departamentos-mais-botao {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: none !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	white-space: nowrap !important;
	cursor: pointer;
}

.bp-departamentos-mais-botao:hover {
	color: #fff !important;
	font-weight: 700 !important;
}

.bp-departamentos-mais-lista {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(20, 10, 50, 0.25);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bp-departamentos-mais-item {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--bp-ink) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.bp-departamentos-mais-item:hover {
	background: var(--bp-azul-bg);
	color: var(--bp-azul) !important;
}

.bp-departamentos-mais-item-ativo {
	background: var(--bp-azul) !important;
	color: #fff !important;
	font-weight: 700;
}

/*
 * Flutuante na lateral direita da tela, fixo mesmo rolando a página —
 * pedido explícito do usuário (o ícone antigo vivia só no cabeçalho e
 * desaparecia ao rolar). "Discreto" de propósito: menor, levemente
 * translúcido em repouso, só fica 100% opaco no hover. Única instância
 * na página (reaproveitada tanto na listagem quanto
 * na página de produto via render_icone_carrinho_topo()), por isso dá
 * pra fixar sem se preocupar com duplicar.
 */
.bp-departamentos-carrinho-wrap {
	position: fixed !important;
	top: 50% !important;
	right: 14px !important;
	transform: translateY(-50%) !important;
	z-index: 45 !important;
}

.bp-departamentos-carrinho {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	flex-shrink: 0 !important;
	width: 46px !important;
	height: 46px !important;
	background: #ffffff !important;
	color: var(--bp-azul) !important;
	font-family: inherit !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.8;
	box-shadow: 0 3px 12px rgba(20, 10, 50, 0.22);
	transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bp-departamentos-carrinho:hover {
	opacity: 1 !important;
}

.bp-departamentos-carrinho:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(20, 10, 50, 0.3);
}

/* mesmo cuidado do selo de contagem: display:flex !important acima
   precisa dessa regra pra não travar visível quando o carrinho esvazia
   e o JS marca [hidden] no botão (ver sincronizarNavCarrinho()). */
.bp-departamentos-carrinho[hidden] {
	display: none !important;
}

.bp-nav-carrinho-contagem {
	position: absolute !important;
	top: -3px !important;
	right: -3px !important;
	background: var(--bp-vermelho) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	font-family: inherit !important;
	border-radius: 999px !important;
	min-width: 18px !important;
	height: 18px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 4px !important;
	margin: 0 !important;
	box-shadow: 0 0 0 2px #fff;
}

/*
 * display:inline-flex !important acima (necessário pra não ser
 * engolido pelo CSS padrão de <span>/botão do tema) também sobrescreve
 * o display:none que o atributo [hidden] do navegador aplicaria —
 * sem essa regra aqui, o selo ficava "travado" visível pra sempre
 * depois da primeira vez que aparecia, mesmo com o carrinho voltando
 * a zero. Precisa do próprio !important pra vencer a regra de cima.
 */
.bp-nav-carrinho-contagem[hidden] {
	display: none !important;
}

.bp-nav-carrinho-resumo {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	width: 260px;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(20, 10, 50, 0.25);
	padding: 14px;
}

.bp-nav-carrinho-resumo-topo {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bp-ink-soft) !important;
	margin-bottom: 10px;
}

.bp-nav-carrinho-resumo-itens {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 12px;
}

.bp-nav-carrinho-resumo-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bp-linha);
}

.bp-nav-carrinho-resumo-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.bp-nav-carrinho-resumo-nome {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bp-ink) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bp-nav-carrinho-resumo-meta {
	font-size: 11px;
	color: var(--bp-ink-soft) !important;
}

.bp-nav-carrinho-vazio {
	font-size: 12.5px;
	color: var(--bp-ink-soft) !important;
	margin: 0;
}

.bp-nav-carrinho-finalizar {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 100% !important;
	background: var(--bp-azul) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	margin: 0 !important;
	padding: 9px 12px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer;
}

.bp-nav-carrinho-finalizar:hover {
	background: #7362d6 !important;
}

.bp-banner-carrossel {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 3;
}

.bp-banner-trilho {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease;
}

.bp-banner-slide {
	flex: 0 0 100%;
	min-width: 0;
	height: 100%;
}

.bp-banner-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bp-banner-seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.bp-banner-carrossel:hover .bp-banner-seta {
	opacity: 1;
}

.bp-banner-seta:hover {
	background: rgba(0, 0, 0, 0.55);
}

.bp-banner-seta-prev {
	left: 14px;
}

.bp-banner-seta-next {
	right: 14px;
}

@media (max-width: 782px) {
	.bp-cat-chrome {
		margin: -18px -18px 20px;
	}
	.bp-departamentos-wrap {
		padding: 10px 18px;
		gap: 16px;
	}
	.bp-departamentos-lista {
		gap: 14px;
	}
}

.bp-cat-card-foto-zoom {
	cursor: zoom-in;
}

.bp-cat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(10, 9, 18, 0.92);
	cursor: zoom-out;
}

.bp-cat-lightbox img {
	max-width: 100%;
	max-height: 100%;
	background: #ffffff;
	border-radius: 8px;
	cursor: default;
}

.bp-cat-lightbox-fechar {
	position: absolute;
	top: 18px;
	right: 24px;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: var(--bp-painel-alt) !important;
	border: 1px solid var(--bp-linha) !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	color: var(--bp-ink) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer;
}

.bp-cat-paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 20px;
}

.bp-cat-pagina-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 36px;
	padding: 0 14px;
	background: var(--bp-painel-alt);
	border: 1px solid var(--bp-linha);
	border-radius: 999px;
	color: var(--bp-ink) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.bp-cat-pagina-nav:hover {
	background: var(--bp-azul-bg);
	border-color: var(--bp-azul);
	color: var(--bp-azul) !important;
}

.bp-cat-pagina-nav-desativado {
	opacity: 0.4;
	cursor: default;
}

.bp-cat-pagina-atual {
	font-size: 12.5px;
	color: var(--bp-ink-soft) !important;
	white-space: nowrap;
}

/*
 * Lista de resultados — pedido explícito do usuário: nada de card com
 * ação inline na busca, só uma linha simples (foto + nome + preço) que
 * leva pra página individual completa daquela peça.
 */
.bp-cat-lista-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
}

.bp-cat-linkrow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
	text-decoration: none !important;
	color: var(--bp-ink) !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.bp-cat-linkrow:hover {
	box-shadow: 0 8px 22px rgba(20, 10, 50, 0.1);
	transform: translateY(-1px);
	border-color: var(--bp-azul);
}

.bp-cat-linkrow-foto {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none !important;
}

.bp-cat-linkrow-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bp-cat-linkrow-sem-foto {
	font-size: 20px;
	background: var(--bp-painel-alt);
	opacity: 0.6;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.bp-cat-linkrow-sem-foto:hover {
	opacity: 1;
	background: var(--bp-azul-bg);
}

.bp-cat-linkrow-corpo {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none !important;
}

.bp-cat-linkrow-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bp-cat-linkrow-desc {
	font-size: 13.5px;
	color: var(--bp-ink) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bp-cat-linkrow-meta {
	font-size: 11px;
	font-family: var(--bp-mono);
	color: var(--bp-ink-soft) !important;
}

.bp-cat-linkrow-aplicacao {
	font-size: 11px;
	color: var(--bp-ink-soft) !important;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.bp-cat-linkrow-seta {
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 800;
	color: var(--bp-ink-soft);
	opacity: 0.5;
}

.bp-pub-linkrow-ver {
	flex: 0 0 auto;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--bp-azul-bg);
	color: var(--bp-azul) !important;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bp-cat-linkrow:hover .bp-pub-linkrow-ver {
	background: var(--bp-azul);
	color: #fff !important;
}

.bp-cat-linkrow-ia {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	font-size: 17px;
	color: var(--bp-ink) !important;
	text-decoration: none !important;
	opacity: 0.55;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.bp-cat-linkrow-ia:hover {
	opacity: 1;
	background: var(--bp-azul-bg);
}

.bp-cat-linkrow-demanda {
	color: var(--bp-verde) !important;
}

.bp-cat-linkrow-demanda:hover {
	background: var(--bp-verde-bg);
}

.bp-cat-linkrow-add {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 17px !important;
	line-height: 1 !important;
	background: var(--bp-azul) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(139, 124, 246, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.bp-cat-linkrow-add:hover {
	background: #7362d6 !important;
	color: #fff !important;
	transform: translateY(-1px) scale(1.05);
	box-shadow: 0 4px 12px rgba(139, 124, 246, 0.45);
}

.bp-cat-linkrow-add.bp-cat-add-no-carrinho {
	background: var(--bp-verde) !important;
	color: #fff !important;
	font-weight: 800 !important;
	box-shadow: 0 2px 8px rgba(26, 156, 91, 0.35);
}

.bp-cat-linkrow-add-check {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}


/*
 * Página individual de produto — hero com foto grande + info persuasiva
 * (preço, escassez/estoque REAL, prova social REAL), depois seções
 * sempre visíveis de aplicação, comparação de preço e demanda (nada
 * escondido em popup, pedido explícito do usuário pra ter "muito
 * gatilho" mas só com dado real).
 */
.bp-produto-voltar {
	display: inline-block;
	margin: 14px 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bp-azul) !important;
	text-decoration: none !important;
}

.bp-produto-voltar:hover {
	text-decoration: underline !important;
}

.bp-produto-voltar-rodape {
	margin-top: 28px;
}

.bp-produto-hero {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 760px) {
	.bp-produto-hero {
		grid-template-columns: 1fr;
	}
}

.bp-produto-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	background: #ffffff;
	border: 1px solid var(--bp-linha);
	border-radius: 14px;
	overflow: hidden;
	cursor: zoom-in;
}

.bp-produto-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bp-produto-sem-foto {
	flex-direction: column;
	gap: 10px;
	background: var(--bp-azul-bg);
	color: var(--bp-azul) !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.bp-produto-sem-foto:hover {
	background: var(--bp-azul);
	color: #fff !important;
	transform: translateY(-1px);
}

.bp-produto-sem-foto-icone {
	flex-shrink: 0;
}

.bp-produto-sem-foto-texto {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.bp-produto-info-coluna {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bp-produto-selo {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 5px 12px;
	border-radius: 999px;
}

.bp-produto-selo-demanda {
	background: var(--bp-azul-bg);
	color: var(--bp-azul);
}

.bp-produto-titulo {
	margin: 4px 0 0;
	font-size: clamp(20px, 3vw, 28px);
	line-height: 1.2;
	color: var(--bp-ink);
}

.bp-produto-meta {
	margin: 0;
	font-size: 13px;
	font-family: var(--bp-mono);
	color: var(--bp-ink-soft);
}

.bp-produto-prova-social {
	margin: 0;
	font-size: 13px;
	color: var(--bp-ink-soft);
}

.bp-produto-cta {
	margin-top: 10px !important;
	padding: 14px 20px !important;
	font-size: 15px !important;
	border-radius: 10px !important;
	width: fit-content;
}

.bp-pub-whatsapp-botao {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 10px !important;
	padding: 14px 22px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	width: fit-content;
	background: var(--bp-verde) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(26, 156, 91, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bp-pub-whatsapp-botao:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(26, 156, 91, 0.45);
	color: #fff !important;
}

.bp-produto-ia-grupo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.bp-produto-ia-botao {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--bp-azul-bg);
	color: var(--bp-azul) !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bp-produto-ia-botao:hover {
	background: var(--bp-azul);
	color: #fff !important;
}

.bp-produto-ia-icone {
	flex-shrink: 0;
}

.bp-produto-ia-botao-demanda {
	background: var(--bp-verde-bg);
	color: var(--bp-verde) !important;
}

.bp-produto-ia-botao-demanda:hover {
	background: var(--bp-verde);
	color: #fff !important;
}

.bp-produto-secao {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--bp-linha);
}

.bp-produto-secao h3 {
	margin: 0 0 10px;
	font-size: 16px;
	color: var(--bp-ink);
}

.bp-produto-aplicacao-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bp-produto-aplicacao-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--bp-cinza-bg);
	color: var(--bp-ink-soft);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
}

.bp-pub-mapa-bloco {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--bp-linha);
}

.bp-pub-mapa-titulo {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--bp-ink);
}

.bp-pub-mapa-endereco {
	margin: 0 0 12px;
	font-size: 13.5px;
	color: var(--bp-ink-soft);
}

.bp-pub-mapa-iframe-wrap {
	border: 1px solid var(--bp-linha);
	border-radius: 10px;
	overflow: hidden;
}

.bp-pub-mapa-iframe-wrap iframe {
	display: block;
	width: 100%;
}

.bp-cat-add {
	appearance: none !important;
	-webkit-appearance: none !important;
	margin-top: 8px !important;
	padding: 10px 12px !important;
	background: var(--bp-azul) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer;
}

.bp-cat-add:hover {
	background: #7362d6 !important;
}

.bp-cat-checkout {
	max-width: 460px;
	margin: 28px auto 0;
	padding: 20px;
	background: var(--bp-painel-alt);
	border: 1px solid var(--bp-linha);
	border-radius: 12px;
}

.bp-cat-checkout-itens {
	margin: 14px 0 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bp-cat-checkout-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--bp-linha);
}

.bp-cat-checkout-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bp-cat-checkout-item-nome {
	font-size: 13px;
	color: var(--bp-ink) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bp-cat-checkout-item-meta {
	font-size: 11px;
	color: var(--bp-ink-soft) !important;
}

.bp-cat-checkout-remover {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	border: none !important;
	color: var(--bp-ink-soft) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	cursor: pointer;
	line-height: 1 !important;
	transition: color 0.15s ease;
}

.bp-cat-checkout-remover:hover {
	color: var(--bp-vermelho) !important;
}

.bp-cat-limpar-tudo {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: block;
	width: 100%;
	margin: 0 0 18px;
	padding: 8px 12px !important;
	background: var(--bp-vermelho-bg) !important;
	border: 1px solid var(--bp-vermelho) !important;
	border-radius: 8px !important;
	color: var(--bp-vermelho) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer;
}

.bp-cat-limpar-tudo:hover {
	background: var(--bp-vermelho) !important;
	color: #fff !important;
}

.bp-cat-toast {
	position: fixed !important;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(10px);
	background: var(--bp-painel-alt) !important;
	color: var(--bp-ink) !important;
	border: 1px solid var(--bp-linha) !important;
	padding: 12px 20px !important;
	border-radius: 10px !important;
	font-size: 13.5px;
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.bp-cat-toast-visivel {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
	.bp-cat-pagina {
		padding: 18px;
		border-radius: 0;
	}
}

.bp-historico-tabela {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--bp-mono);
	font-size: 11px;
	white-space: nowrap;
}

.bp-historico-tabela thead th {
	position: sticky;
	top: 0;
	background: var(--bp-painel-alt);
	z-index: 1;
}

.bp-historico-tabela th,
.bp-historico-tabela td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--bp-linha);
	color: var(--bp-ink-soft);
	text-align: right;
}

.bp-historico-tabela th:first-child,
.bp-historico-tabela td:first-child {
	text-align: left;
	color: var(--bp-ink);
	font-weight: 700;
	position: sticky;
	left: 0;
	background: var(--bp-painel);
	z-index: 1;
}

.bp-historico-tabela thead th {
	color: var(--bp-ink);
	font-weight: 700;
}

.bp-peca-selo {
	display: inline-block;
	white-space: nowrap;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	flex: 0 0 auto;
}

.bp-peca-selo-comprar { background: var(--bp-verde-bg); color: var(--bp-verde); }
.bp-peca-selo-investir { background: var(--bp-azul-bg); color: var(--bp-azul); }
.bp-peca-selo-liquidar { background: var(--bp-amarelo-bg); color: var(--bp-amarelo); }
.bp-peca-selo-estavel { background: var(--bp-cinza-bg); color: var(--bp-cinza); }

.bp-peca-dialog-topo {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.bp-peca-dialog-titulo {
	margin: 0;
	font-size: 14.5px;
	color: var(--bp-ink);
}

.bp-peca-dialog-fechar {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--bp-ink-soft) !important;
	background: var(--bp-painel-alt) !important;
	border: 1px solid var(--bp-linha) !important;
	border-radius: 999px !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.bp-peca-dialog-fechar:hover,
.bp-peca-dialog-fechar:focus {
	color: var(--bp-ink) !important;
	border-color: var(--bp-azul) !important;
	background: var(--bp-painel-alt) !important;
	box-shadow: none !important;
}

.bp-peca-dialog-veiculos-titulo {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--bp-ink);
}

.bp-peca-dialog-veiculos {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bp-peca-dialog-veiculos li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--bp-linha);
}

.bp-peca-dialog-veiculos li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bp-peca-dialog-veiculo-topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--bp-ink);
}

.bp-peca-dialog-veiculo-total {
	font-size: 11px;
	font-family: var(--bp-mono);
	color: var(--bp-ink-soft);
}

.bp-peca-dialog-indice {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bp-ink-soft);
}

.bp-peca-dialog-indice strong {
	color: var(--bp-ink);
}

.bp-peca-dialog-sparkline {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 600 / 160;
	margin-top: 4px;
}

.bp-peca-dialog-grade {
	stroke: var(--bp-linha);
	stroke-width: 1;
}

.bp-peca-dialog-ponto-pico,
.bp-peca-dialog-ponto-minimo {
	stroke: var(--bp-painel);
	stroke-width: 3;
}

.bp-peca-dialog-ponto-pico { fill: var(--bp-verde); }
.bp-peca-dialog-ponto-minimo { fill: var(--bp-vermelho); }

.bp-peca-dialog-eixo-x {
	display: flex;
	justify-content: space-between;
	font-size: 10.5px;
	font-family: var(--bp-mono);
	color: var(--bp-ink-soft);
	margin: 2px 0 12px;
}

.bp-peca-dialog-sem-historico {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--bp-ink-soft);
}

.bp-peca-dialog-picos {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bp-ink-soft);
}

.bp-peca-dialog-picos strong {
	color: var(--bp-ink);
}

.bp-peca-dialog-indicacao {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}

.bp-peca-dialog-indicacao-comprar { background: var(--bp-verde-bg); color: var(--bp-verde); }
.bp-peca-dialog-indicacao-investir { background: var(--bp-azul-bg); color: var(--bp-azul); }
.bp-peca-dialog-indicacao-liquidar { background: var(--bp-amarelo-bg); color: var(--bp-amarelo); }
.bp-peca-dialog-indicacao-estavel { background: var(--bp-cinza-bg); color: var(--bp-cinza); }

/* ---- Login ---- */

.bp-login-abas {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 18px;
}

.bp-login-aba {
	appearance: none !important;
	background: var(--bp-painel) !important;
	border: 1px solid var(--bp-linha) !important;
	color: var(--bp-ink-soft) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer;
	outline: none !important;
	box-shadow: none !important;
}

.bp-login-aba-ativa {
	background: var(--bp-azul) !important;
	border-color: var(--bp-azul) !important;
	color: #fff !important;
}

.bp-login-card {
	background: var(--bp-painel);
	border: 1px solid var(--bp-linha);
	border-radius: 14px;
	padding: 28px;
	max-width: 360px;
	margin: 0 auto;
}

/* O tema (Hello Elementor) tem uma regra genérica "form { margin: 50px
   auto; max-width: 500px }" — sem essa reset aqui, o form ganha 50px de
   espaço em cima E embaixo de graça, empurrando tudo pra baixo dentro do
   card. */
.bp-login-card form {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.bp-login-card label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var(--bp-ink-soft) !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

.bp-login-card input[type="hidden"] {
	display: none !important;
}

.bp-login-card input:not([type="hidden"]) {
	display: block !important;
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--bp-linha) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	margin: 0 0 16px !important;
	box-sizing: border-box !important;
	background: var(--bp-painel-alt) !important;
	color: var(--bp-ink) !important;
	box-shadow: none !important;
	height: auto !important;
}

.bp-login-card input:focus {
	outline: none;
	border-color: var(--bp-azul) !important;
	box-shadow: 0 0 0 3px rgba(139, 124, 246, 0.25) !important;
}

.bp-btn-entrar,
.bp-btn-entrar:visited {
	display: block !important;
	width: 100% !important;
	height: 42px !important;
	line-height: 42px !important;
	background: var(--bp-azul) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.bp-btn-entrar:hover {
	background: #7362d6 !important;
	color: #fff !important;
}

@media (max-width: 480px) {
	.bp-hero h2 {
		font-size: 19px !important;
	}
}
