.desconto-a-vista-preco-texto-4 {
	background: #FBC356 !important;
	color: #0B5654 !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	padding: 3px 8px !important;
}
 
 
/* --------------------------------------------------------------------------
   2. DESCRIÇÃO DO PRODUTO
   Estava em 12px com entrelinha "normal" — por isso parecia miúda e apertada.
   Vai pra 16px com entrelinha 1,75 e largura máxima de leitura.
 
   ATENÇÃO: isto conserta o TAMANHO da letra. Não conserta a FALTA de
   formatação: hoje sua descrição é um bloco de texto corrido, sem nenhum
   parágrafo, subtítulo ou lista (conferi: zero <p>, zero <ul>, zero <h2>).
   Isso se resolve reescrevendo o conteúdo em Painel → Produtos → Descrição.
   -------------------------------------------------------------------------- */
/* v7 — CORREÇÃO IMPORTANTE
 
   A versão anterior usava "#descricao *" com !important, o que atropelava
   QUALQUER estilo que você escrevesse dentro da descrição do produto.
   Testado ao vivo no Painel 30x45: a faixa verde do topo perdia o texto
   branco e virava cinza sobre verde, o título coral virava verde, e tudo
   que era centralizado virava alinhado à esquerda.
 
   Agora as regras só pegam elementos SEM estilo próprio (:not([style])).
   Descrição simples continua ganhando a correção de legibilidade;
   descrição que você desenhou fica exatamente como você fez. */
 
#descricao,
#descricao *:not([style]) {
	font-size: 16px !important;
	line-height: 1.75 !important;
	color: #2B2B2B !important;
	text-align: left !important;
}
 
#descricao {
	max-width: none;
	margin: 0;
	padding: 4px 0;
}
 
#descricao p:not([style]) {
	margin-bottom: 1.1em !important;
}
 
#descricao ul:not([style]),
#descricao ol:not([style]) {
	margin: 0 0 1.2em 1.5em !important;
	list-style: disc outside !important;
}
 
#descricao li:not([style]) {
	margin-bottom: 0.5em !important;
}
 
#descricao h2:not([style]),
#descricao h3:not([style]) {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #0B5654 !important;
	margin: 1.6em 0 0.6em !important;
	display: block;
}
 
#descricao a:not([style]) {
	color: #E35E4D !important;
	text-decoration: underline;
}
 
/* tabela dentro da descrição não pode estourar a tela do celular */
#descricao table {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed;
	word-wrap: break-word;
}
 
/* --------------------------------------------------------------------------
   3. BARRA DE NEWSLETTER DO RODAPÉ
   Estava marrom escuro (#744700), resto do tema de tabacaria.
   -------------------------------------------------------------------------- */
#barraNewsletter {
	background: #0B5654 !important;
}
 
#barraNewsletter .botao,
#barraNewsletter button,
#barraNewsletter input[type="submit"] {
	background: #E35E4D !important;
	border-color: #E35E4D !important;
	color: #FFFFFF !important;
}
 
 
/* --------------------------------------------------------------------------
   4. BOTÃO COMPRAR
   Estava verde escuro (#347A32), que não é cor da Board Kids.
   Coral é a cor de AÇÃO da loja: só o que o cliente deve clicar fica coral.
 
   Se o painel da Loja Integrada tiver um campo próprio pra cor do botão
   comprar, use o painel e apague este bloco. Isto aqui é o plano B.
   -------------------------------------------------------------------------- */
.botao-comprar,
.botao-comprar-ajax,
.botao.principal.comprar {
	background: #E35E4D !important;
	border-color: #E35E4D !important;
	color: #FFFFFF !important;
}
 
.botao-comprar:hover,
.botao-comprar-ajax:hover,
.botao.principal.comprar:hover {
	background: #C94C3C !important;
	border-color: #C94C3C !important;
}
 
 
/* --------------------------------------------------------------------------
   5. FUNDO SECUNDÁRIO — CORRIGIDO NA v2
 
   A v1 pintava TUDO que tem a classe "fundo-secundario". O problema é que o
   tema põe essa classe também nas setinhas do menu (<i class="icon-chevron-down
   fundo-secundario">). Resultado: a seta ganhava um quadrado verde atrás, da
   mesma cor da seta — e virava um bloco sólido. Eram 18 ícones afetados.
 
   Agora a regra só pega a barra de atalhos do celular, que era a intenção.
   -------------------------------------------------------------------------- */
.atalhos-mobile.fundo-secundario {
	background-color: #0B5654 !important;
}
 
 
/* --------------------------------------------------------------------------
   7. SETINHAS DO MENU (os quadrados verdes)
 
   Ícone nunca deve ter cor de fundo. Esta regra é necessária mesmo sem a v1:
   o próprio tema.css da loja também pinta esses ícones, usando a "cor de
   fundo secundária" do painel. Sem isto, o quadrado volta.
   -------------------------------------------------------------------------- */
i.fundo-secundario,
[class*="icon-"].fundo-secundario {
	background-color: transparent !important;
}
 
 
/* --------------------------------------------------------------------------
   8. ESCONDER "PÁGINAS" DO MENU DE CATEGORIAS   (novo na v3)
 
   Esse item é gerado automaticamente pela Loja Integrada (título interno
   "Institucional") e nem sempre tem um botão pra desligar no painel.
   Escondendo por aqui resolve — e você não perde nada: Quem Somos, Trocas e
   Devoluções e Para Escolas já estão na barra escura do topo.
   -------------------------------------------------------------------------- */
li.categoria-paginas {
	display: none !important;
}
 
 
/* --------------------------------------------------------------------------
   9. CONTADOR DE FOTOS DO PRODUTO   (novo na v3)
 
   Funciona junto com o arquivo boardkids-galeria-swipe.js.
   É o sinal de que dá pra arrastar a foto com o dedo.
   -------------------------------------------------------------------------- */
/* v4: precisa de !important e do seletor com o pai. O tema tem uma regra
   mais forte que forçava "position: relative" nos filhos do container da
   foto — por isso o contador saía como uma barra da largura toda em vez
   de uma pílula no canto. */
.conteiner-imagem .bk-contador-foto,
.bk-contador-foto {
	position: absolute !important;
	width: auto !important;
	max-width: none !important;
	display: inline-block !important;
	bottom: 10px;
	right: 10px;
	z-index: 5;
	background: rgba(11, 86, 84, 0.85);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	pointer-events: none;
	letter-spacing: 0.3px;
}
 
/* No computador o cliente usa as miniaturas, então o contador só atrapalha. */
@media (min-width: 768px) {
	.bk-contador-foto { display: none; }
}
 
 
/* --------------------------------------------------------------------------
   6. BOTÃO "COMPRAR PELO WHATSAPP"
   Mantido verde do WhatsApp de propósito: é a cor que o cliente reconhece.
   Só ajustando pra ele não competir com o botão Comprar (fica secundário).
   -------------------------------------------------------------------------- */
.botao-whatsapp-produto,
.comprar-pelo-whatsapp {
	background: #FFFFFF !important;
	border: 2px solid #25D366 !important;
	color: #128C4A !important;
	font-weight: 600 !important;
}
 
 
/* --------------------------------------------------------------------------
   10. BARRA FIXA DE COMPRA NO CELULAR   (novo na v5)
 
   Funciona junto com boardkids-ux-p2-p6.js.
   Aparece só quando o botão Comprar de verdade sai da tela.
   Medido na sua loja: no celular o botão Comprar fica a 1001px do topo,
   numa tela de 812px. Ou seja, o cliente não vê preço nem botão sem rolar.
   -------------------------------------------------------------------------- */
.bk-barra-compra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: #FFFFFF;
	border-top: 1px solid #DFECDB;
	box-shadow: 0 -4px 16px rgba(11, 86, 84, 0.12);
	transform: translateY(110%);
	transition: transform 0.22s ease;
}
 
.bk-barra-compra.bk-visivel {
	transform: translateY(0);
}
 
.bk-barra-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
 
.bk-barra-nome {
	font-size: 12px;
	line-height: 1.25;
	color: #0B5654;
	/* nome longo não pode empurrar o botão pra fora da tela */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
 
.bk-barra-preco {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	color: #E35E4D;
}
 
.bk-barra-botao {
	flex: 0 0 auto;
	background: #E35E4D;
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	/* 48px de altura: é o mínimo confortável pra toque de dedo */
	min-height: 48px;
	padding: 0 26px;
	cursor: pointer;
}
 
.bk-barra-botao:active {
	background: #C94C3C;
}
 
/* o rodapé não pode ficar escondido atrás da barra */
body.bk-com-barra {
	padding-bottom: 76px;
}
 
/* e o balão do WhatsApp sobe pra não ficar em cima do botão Comprar */
body.bk-com-barra .whatsapp-flutuante,
body.bk-com-barra [class*="whatsapp-float"],
body.bk-com-barra [class*="whats-flutuante"] {
	bottom: 150px !important;
	transition: bottom 0.22s ease;
}
 
/* no computador a barra nunca aparece */
@media (min-width: 768px) {
	.bk-barra-compra { display: none !important; }
	body.bk-com-barra { padding-bottom: 0; }
}
 
 
/* --------------------------------------------------------------------------
   11. CABEÇALHO MENOR NO CELULAR   (novo na v5)
 
   Eram ~440px de cabeçalho antes do produto começar — mais de metade da
   tela de um celular gasta com logo e busca. Isto recupera cerca de 60px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.logo img,
	h2.logo img {
		max-height: 58px !important;
		width: auto !important;
	}
	.logo,
	h2.logo {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}
 
 
/* --------------------------------------------------------------------------
   12. PADRONIZAÇÃO DAS FOTOS DE PRODUTO   (novo na v6)
 
   O PROBLEMA MEDIDO: as 14 fotos têm 11 proporções diferentes, de 0,71
   (retrato alto) a 1,27 (paisagem). Como a loja deixa a altura livre, cada
   produto tem uma altura de foto diferente — e isso empurra o botão Comprar
   pra uma posição diferente em cada página.
 
   ISTO É UM PALIATIVO, NÃO A SOLUÇÃO. Ele força um quadrado e encaixa a
   foto dentro sem cortar nem distorcer. A solução de verdade é reexportar
   as fotos todas no mesmo tamanho — ver as especificações na conversa.
   -------------------------------------------------------------------------- */
.conteiner-imagem img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	background: #FFFFFF;
}
 
.miniaturas li img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	background: #FFFFFF;
}
 
/* mesma coisa nas vitrines e listagens, senão os cartões ficam desalinhados */
.listagem-item img,
.produto-listagem img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	background: #FFFFFF;
}