/*
Theme Name: Kadence Child - Favela
Theme URI: https://favela.lemeweb.com.br
Description: Child theme do Kadence para a loja Favela (favela.lemeweb.com.br). Usado para customizações de CSS/PHP sem perder nada em updates do tema pai.
Author: LEME Desenvolvimentos
Author URI: https://lemeweb.com.br
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* ==========================================================================
   0. FONTE ÚNICA DA LOJA — Montserrat em tudo. Já tinha trocado a
   tipografia global "Primário" do Elementor (era Cormorant, serifada) via
   wp-cli, mas alguns widgets (ex: filtros JetSmartFilters) têm fonte
   fixa no próprio widget, sem passar pela global — por isso o martelo
   aqui: força tudo, depois reafirma a fonte de ícone pros ícones não
   quebrarem (iam virar letra solta sem isso).
   ========================================================================== */

body, body * {
	font-family: "Montserrat", sans-serif !important;
}

.fa, .fas, .far, .fab, .fal, .fad,
[class*="eicon-"],
.dashicons, .dashicons::before,
.jet-cw-icon i {
	font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", eicons !important;
}

/* ==========================================================================
   1. IDENTIDADE VISUAL — paleta inspirada no Mercado Livre (aprovado pelo
   cliente).
   ========================================================================== */

:root {
	/* Cores de marca/ação, estilo Mercado Livre */
	--favela-amarelo: #FFE600;       /* destaque/topo */
	--favela-azul: #3483FA;          /* ação primária (links, botão "Adicionar") */
	--favela-azul-escuro: #2968C8;   /* hover da cor de ação */
	--favela-verde: #00A650;         /* selo de oferta/desconto/doação */
	--favela-verde-escuro: #00873D;  /* hover do verde */

	/* Neutros */
	--favela-fundo: #EBEBEB;         /* fundo de vitrine (atrás dos cards brancos) */
	--favela-branco: #FFFFFF;
	--favela-texto: #333333;         /* texto padrão (títulos de produto) */
	--favela-texto-suave: #999999;   /* preço antigo, texto secundário */
	--favela-texto-forte: #000000;   /* preço em destaque */
	--favela-borda: #E0E0E0;
}

/* ==========================================================================
   1c. FAIXAS CINZAS + RODAPÉ ESCURO → amarelo Mercado Livre.
   Importante: onde o fundo vira amarelo, o texto precisa virar escuro
   (o amarelo claro não tem contraste nenhum com texto branco).
   ========================================================================== */

/* Faixa amarela no topo do cabeçalho (busca + nome da loja + ícones) —
   o "faixa amarela" mais reconhecível do estilo Mercado Livre. Só essa
   barra, não o site inteiro. Seção id 7b18e6f, template "Cabeçalho"
   (Elementor, id 165). */
.elementor-165 .elementor-element-7b18e6f {
	background-color: var(--favela-amarelo) !important;
}

/* Barra de copyright do rodapé (fundo escuro, cor global "accent") —
   escondida atrás do id da seção no template "Rodapé" (Elementor, id 230) */
.elementor-230 .elementor-element-5d316cf {
	background-color: var(--favela-amarelo) !important;
}

/* Texto dessa barra estava branco (pensado pra fundo escuro) — precisa
   ficar escuro agora que o fundo é amarelo */
.elementor-230 .elementor-element-5d316cf .footer-leme {
	color: var(--favela-texto-forte) !important;
}

/* Barra do menu (Loja/Saia/Shorts/...), embaixo da faixa amarela — fundo
   era cinza escuro (cor global "kadence6"). Troca pra branco com os links
   em azul, estilo a barra de categorias do Mercado Livre. Seção 7dfdeb5,
   template "Cabeçalho" (Elementor, id 165). */
.elementor-165 .elementor-element-7dfdeb5 {
	background-color: var(--favela-branco) !important;
	border-bottom: 1px solid var(--favela-borda) !important;
}

/* O JetMenu pinta o próprio <ul> do menu (não a seção) com um cinza escuro
   fixo (#333) — precisa sobrescrever aqui também, senão a seção fica
   branca mas o menu continua escuro por cima. */
.elementor-165 .elementor-element-7dfdeb5 .jet-mega-menu,
.elementor-165 .elementor-element-7dfdeb5 .jet-mega-menu-list {
	background-color: var(--favela-branco) !important;
}

/* O texto de verdade fica dentro de .jet-mega-menu-item__label /
   __title (cor própria, pensada pra fundo escuro) — não do <a> em si,
   por isso precisa sobrescrever até lá embaixo, não só o link. */
.elementor-165 .elementor-element-7dfdeb5 .jet-mega-menu-item__link,
.elementor-165 .elementor-element-7dfdeb5 .jet-mega-menu-item__title,
.elementor-165 .elementor-element-7dfdeb5 .jet-mega-menu-item__label {
	color: var(--favela-texto-forte) !important;
}

.elementor-165 .elementor-element-7dfdeb5 .jet-mega-menu-item__link:hover .jet-mega-menu-item__label,
.elementor-165 .elementor-element-7dfdeb5 .jet-mega-current-menu-item .jet-mega-menu-item__label {
	color: var(--favela-azul) !important;
}

/* Selos de pagamento falsos no rodapé (Visa/Mastercard/etc, imagem
   checkout_icon.png de 2021) — sobra de template, loja não processa
   pagamento no site. Widget aa46cd4, template "Rodapé" (Elementor, id 230) */
.elementor-230 .elementor-element-aa46cd4 {
	display: none !important;
}

/* ==========================================================================
   1b. CABEÇALHO — elementos fazem parte do template global "Cabeçalho"
   (Elementor, id 165), que aparece em todas as páginas do site. IDs
   comentados pra facilitar achar de novo se precisar reverter.
   ========================================================================== */

/* Menu volta a aparecer, mas "normal": achata o mega menu (JetMenu) pra
   mostrar só os links do topo, sem abrir o painel gigante de categorias
   com carrossel de produtos. Widget continua ativo (ba430b2), só o
   comportamento de dropdown "mega" é desligado via CSS. */
.jet-mega-menu-item__dropdown,
.jet-mega-menu-mega-container {
	display: none !important;
}

/* "Frete grátis a partir de R$1.000" — ícone/texto ao lado do menu no
   cabeçalho (widget a8b05c1, coluna fe37091). Continua removido, como
   pedido antes — não tem frete calculado na loja. */
.elementor-element-a8b05c1 {
	display: none !important;
}

/* Logo: sem logo definitiva ainda, mostra o nome "Favela Fashion Week"
   como texto no lugar da imagem. Duas instâncias no cabeçalho: barra
   desktop (035706f) e barra mobile/menu (84c07f3). */
.elementor-element-035706f img,
.elementor-element-84c07f3 img {
	display: none !important;
}

.elementor-element-035706f a,
.elementor-element-84c07f3 a {
	display: inline-flex;
	align-items: center;
}

.elementor-element-035706f a::after,
.elementor-element-84c07f3 a::after {
	content: "Favela Fashion Week";
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
	color: var(--favela-texto-forte);
	white-space: nowrap;
}

/* ==========================================================================
   2. GRID DE PRODUTOS (vitrine / arquivo de loja) — estilo Mercado Livre:
   cards compactos, imagem grande, preço em destaque, selo de oferta/doação.
   Classes reais renderizadas pelo widget JetWooBuilder (jet-woo-products) —
   não renomear, o plugin de checkout via WhatsApp e o carrinho dependem
   dessas mesmas classes (add_to_cart_button etc.).
   ========================================================================== */

/* Fundo tipo "vitrine" atrás dos cards brancos. Grid explícito (em vez de
   confiar no cálculo interno do JetWooBuilder) pra garantir o número de
   colunas certo em cada tamanho de tela — mobile-first: 2 no celular,
   3 no tablet, 4 no desktop. */
.jet-woo-products.col-row {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	background: transparent;
}

@media (min-width: 600px) {
	.jet-woo-products.col-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1025px) {
	.jet-woo-products.col-row {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Neutraliza largura/flex que o JetWooBuilder aplica inline no item,
   senão ele briga com o número de colunas do grid acima */
.jet-woo-products.col-row > .jet-woo-products__item {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
}

/* Card do produto */
.jet-woo-products__item {
	position: relative; /* âncora pros botões de comparar/favoritar, que ficam fora da miniatura no HTML */
	background: var(--favela-branco);
	border: 1px solid var(--favela-borda);
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.jet-woo-products__item:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
	border-color: transparent;
}

.jet-woo-products__inner-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 0 14px;
}

/* Imagem do produto — quadrada, fundo branco, produto inteiro visível
   (sem cortar), estilo Mercado Livre — não estica/corta fotos que não
   são quadradas, só encolhe a foto dentro do quadrado. */
.jet-woo-product-thumbnail {
	position: relative;
	background: var(--favela-branco);
}

.jet-woo-product-thumbs {
	position: relative;
	aspect-ratio: 1 / 1;
	display: block;
	background: var(--favela-branco);
	overflow: hidden;
}

/* Preenche o quadrado — altura em % não é confiável quando o quadrado
   vem de aspect-ratio (o navegador às vezes ignora), width/height:100%
   + object-fit resolve isso pra qualquer imagem aqui dentro. */
.jet-woo-product-thumbs__inner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Só a PRIMEIRA imagem recebe position:absolute + top/left:0 aqui —
   quando o produto tem uma 2ª foto, o JetWooBuilder usa um efeito de
   hover (slide/fade) que já posiciona essa 2ª imagem sozinho (ex:
   "right: 100%" pra ela começar fora do quadro e entrar deslizando no
   hover). Se a gente usasse "inset: 0" em TODAS as imagens (jeito
   antigo), o "right: 0" embutido no inset cancelava o "right: 100%" do
   efeito — a 2ª foto já nascia na posição de hover, e ao passar o mouse
   as DUAS imagens deslizavam pra fora ao mesmo tempo, ficando em branco. */
.jet-woo-product-thumbs__inner img:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

/* Selo (oferta / desconto) — canto superior esquerdo, estilo pílula verde */
.jet-woo-product-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
}

.jet-woo-product-badge {
	display: inline-block;
	background: var(--favela-verde);
	color: var(--favela-branco);
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 3px 8px;
	border-radius: 3px;
}

/* Selo de doação (produto com preço zerado) — ver função
   favela_texto_preco_doacao() no functions.php do child theme. Sem
   depender de nenhum ancestral (não só dentro do card do grid): o preço
   é substituído inteiro por esse selo, então em algumas telas (página de
   produto) não tem mais ".price"/".jet-woo-product-price" por perto. */
.favela-badge-doacao {
	display: inline-block;
	background: var(--favela-verde);
	color: var(--favela-branco);
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 4px 10px;
	border-radius: 4px;
}

/* Botões de comparar/favoritar — discretos, sobre a imagem, canto superior direito */
.jet-woo-products-cqw-wrapper {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

/* Isolado só dentro do card do grid (.jet-woo-products-cqw-wrapper) — sem
   esse escopo, essa regra vazava pra página de produto e quebrava o botão
   de lá (ele tem outro formato natural, texto + ícone, não é só um
   círculo flutuando sobre imagem). */
.jet-woo-products-cqw-wrapper .jet-compare-button__link,
.jet-woo-products-cqw-wrapper .jet-wishlist-button__link {
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Título do produto — até 3 linhas, compacto.
   !important em tudo: o JetWooBuilder gera um <style> próprio por widget,
   com seletor mais específico que o nosso, e vence sem isso.

   IMPORTANTE: o JetWooBuilder aplica font-size/line-height PRÓPRIOS no
   link <a> de dentro (18px / line-height 59px!), não só no container —
   sem repetir font-size/line-height aqui no "a" também, o line-height
   gigante faz o título "estourar" a altura máxima já na primeira linha,
   cortando o resto do nome (dava a impressão de "só a primeira linha
   aparece", tanto no mobile quanto no PC). */
.jet-woo-product-title {
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--favela-texto) !important;
	margin: 10px 12px 6px !important;
	padding: 0 !important;
	text-align: left !important;
	display: block !important;
	max-height: calc(1.3em * 3) !important;
	overflow: hidden !important;
}

.jet-woo-product-title a {
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	color: inherit;
	text-decoration: none;
}

/* No mobile os cards ficam bem mais estreitos (2 por linha em vez de 4),
   então o mesmo nome quebra em mais linhas — fonte um pouco menor aqui
   dá mais espaço por linha e ajuda o nome inteiro caber. */
@media (max-width: 767px) {
	.jet-woo-product-title,
	.jet-woo-product-title a {
		font-size: 12.5px !important;
		line-height: 1.35 !important;
	}

	.jet-woo-product-title {
		max-height: calc(1.35em * 3) !important;
	}
}

/* Preço — em destaque, número grande, preço antigo pequeno e riscado */
.jet-woo-product-price {
	text-align: left !important;
	margin: 0 12px 10px;
}

.jet-woo-product-price .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.jet-woo-product-price del {
	order: 1;
	font-size: 13px;
	color: var(--favela-texto-suave);
	text-decoration: line-through;
}

.jet-woo-product-price ins {
	order: 2;
	text-decoration: none;
	font-size: 24px;
	font-weight: 700;
	color: var(--favela-texto-forte);
}

.jet-woo-product-price .woocommerce-Price-currencySymbol {
	font-size: 0.6em;
	font-weight: 600;
	vertical-align: text-top;
	margin-right: 1px;
}

/* Botão "Adicionar ao carrinho" — ação primária estilo Mercado Livre */
.jet-woo-product-button {
	margin: auto 12px 0;
	text-align: left !important;
}

.jet-woo-product-button .button,
.jet-woo-product-button .added_to_cart {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background: var(--favela-azul) !important;
	color: var(--favela-branco) !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-transform: none !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 10px 12px !important;
	transition: background 0.15s ease;
}

.jet-woo-product-button .button:hover {
	background: var(--favela-azul-escuro) !important;
	color: var(--favela-branco) !important;
}

/* No mobile o card fica bem mais estreito (2 colunas) e "Adicionar ao
   carrinho" quebrava em 2 linhas — fonte menor e padding mais enxuto pra
   caber numa linha só. */
@media (max-width: 767px) {
	.jet-woo-product-button .button,
	.jet-woo-product-button .added_to_cart {
		font-size: 11px !important;
		padding: 9px 6px !important;
	}
}

/* Sem produtos encontrados */
.jet-woo-products__not-found {
	text-align: center;
	padding: 40px 16px;
	color: var(--favela-texto-suave);
}

/* Título "Loja" no topo do arquivo de produtos — a pedido do cliente.
   Seção id ad2df3d, dentro do template "Página de Loja e Categorias"
   (Elementor, id 310). */
.elementor-310 .elementor-element-ad2df3d {
	display: none !important;
}

/* Selos "Entrega Rápida / Suporte 24 Horas / Pagamento Seguro / 30 Dias de
   Garantia" (texto lorem ipsum de demonstração) — a pedido do cliente.
   Seção id 3a7c43ff, mesmo template 310. Aparecia no site inteiro porque
   esse template é reaproveitado em todo arquivo de produto/categoria. */
.elementor-310 .elementor-element-3a7c43ff {
	display: none !important;
}

/* ==========================================================================
   3. PÁGINA DE PRODUTO — galeria à esquerda, compra à direita (isso já
   vinha assim no template "Pagina Individual de Produtos", JetWooBuilder,
   id 320 — inclusive o bloco de compra já é sticky). O que faltava era o
   estilo: tipografia certa, preço em destaque, botão de ação na cor de
   marca, selos de confiança.

   O template tem duas versões completas dos mesmos widgets (uma pra
   desktop/tablet, outra só pra mobile, cada com o próprio layout de
   galeria) — por isso a maioria dos seletores abaixo lista os dois IDs.
   ========================================================================== */

/* Breadcrumb duplicado: o tema Kadence mostra o dele (em inglês) além do
   breadcrumb do JetWooBuilder (em português). Mantém só o do JetWooBuilder,
   que é o que já existe em português e casa com o resto do site. */
body.single-product .kadence-breadcrumb-container {
	display: none !important;
}

/* Título do produto — tira a fonte serifada rosa/mauve (Cormorant) e usa
   a mesma tipografia forte do resto da loja */
.elementor-element-6cd9d75 h1.product_title,
.elementor-element-b26260a h1.product_title {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 800 !important;
	font-size: 28px !important;
	line-height: 1.25 !important;
	color: var(--favela-texto-forte) !important;
}

/* Preço em destaque — mesmo tratamento do card do grid, só que maior */
.elementor-element-821a72f .price,
.elementor-element-c371cab .price {
	display: flex !important;
	flex-direction: column-reverse !important;
	align-items: flex-start !important;
	gap: 4px;
}

.elementor-element-821a72f .price del,
.elementor-element-c371cab .price del {
	font-size: 15px !important;
	color: var(--favela-texto-suave) !important;
	text-decoration: line-through !important;
	order: 1;
}

.elementor-element-821a72f .price ins,
.elementor-element-c371cab .price ins {
	font-size: 34px !important;
	font-weight: 800 !important;
	color: var(--favela-texto-forte) !important;
	text-decoration: none !important;
	order: 2;
}

.elementor-element-821a72f .price .woocommerce-Price-currencySymbol,
.elementor-element-c371cab .price .woocommerce-Price-currencySymbol {
	font-size: 0.55em;
	font-weight: 700;
	vertical-align: text-top;
}

/* Selo "Doação" maior aqui, ocupando o lugar do preço em destaque */
.elementor-element-821a72f .favela-badge-doacao,
.elementor-element-c371cab .favela-badge-doacao {
	font-size: 15px;
	padding: 8px 16px;
}

/* Aviso pra quem doa: o controle de estoque é manual, então o item pode
   já ter sido doado por fora antes do estoque ser atualizado aqui.
   width/flex-basis 100% é o que faltava pra ele cair na própria linha
   embaixo do botão, em vez de espremer do lado (o formulário de compra é
   um flex-row com wrap, sem largura total ele só ocupa o espaço que sobra). */
.favela-aviso-doacao {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	flex-basis: 100%;
	margin-top: 10px;
	padding: 10px 12px;
	background: #FFF8E1;
	border: 1px solid #F0DFA0;
	border-radius: 6px;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: var(--favela-texto);
}

.favela-aviso-doacao svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	color: #B7860B;
}

/* Texto de descrição curta — tira o verde de demonstração, cinza neutro */
.elementor-element-c7fd314,
.elementor-element-d655174 {
	color: var(--favela-texto) !important;
}

.elementor-element-c7fd314 p,
.elementor-element-d655174 p {
	color: var(--favela-texto) !important;
	line-height: 1.6;
}

/* "Em estoque" — tira o tom rosa/mauve, usa o verde de marca */
.elementor-element-4acd728 .stock,
.elementor-element-dcb56bf .stock {
	color: var(--favela-verde) !important;
	font-weight: 700 !important;
}

.elementor-element-4acd728 .stock.out-of-stock,
.elementor-element-dcb56bf .stock.out-of-stock {
	color: #C0392B !important;
}

/* Botão "Adicionar ao carrinho" — ação primária, cor de marca, bem
   contrastado. O formulário (qtd + botão) é flex, mas o botão vinha com
   max-width: 50% do próprio WooCommerce/JetWooBuilder e sem flex-grow —
   ficava travado na metade da largura mesmo sobrando espaço vazio do
   lado direito (isso acontecia tanto no desktop quanto no mobile).
   flex:1 + max-width:none faz ele ocupar o resto da linha, ao lado do
   campo de quantidade. */
.elementor-element-4acd728 .single_add_to_cart_button,
.elementor-element-dcb56bf .single_add_to_cart_button {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	line-height: normal !important;
	background: var(--favela-azul) !important;
	color: var(--favela-branco) !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: normal !important;
	padding: 14px 24px !important;
	transition: background 0.15s ease;
}

/* No celular o botão é mais estreito (fica ao lado do campo de
   quantidade) e o texto quebrava em 2 linhas. Duas coisas ajudaram:
   1) o WooCommerce deixa o texto em MAIÚSCULO por padrão
      (text-transform: uppercase), que ocupa mais espaço que o mesmo
      texto em caixa normal — desligar isso já ganha espaço de graça;
   2) fonte/padding menores por cima disso, pra caber numa linha só. */
@media (max-width: 767px) {
	.elementor-element-4acd728 .single_add_to_cart_button,
	.elementor-element-dcb56bf .single_add_to_cart_button {
		font-size: 11px !important;
		padding: 13px 10px !important;
		text-transform: none !important;
	}
}

.elementor-element-4acd728 .single_add_to_cart_button:hover,
.elementor-element-dcb56bf .single_add_to_cart_button:hover {
	background: var(--favela-azul-escuro) !important;
}

.elementor-element-4acd728 input.qty,
.elementor-element-dcb56bf input.qty {
	border: 1px solid var(--favela-borda) !important;
	border-radius: 6px !important;
	height: auto;
}

/* O formulário de compra (qtd + botão) é um flex-row sem quebra — os
   selos de confiança são injetados dentro desse mesmo formulário, então
   precisam de flex-wrap pra cair numa linha nova, não espremer do lado.
   Produto variável (com Cor/Tamanho) usa outro contêiner por baixo
   (.woocommerce-variation-add-to-cart, criado quando uma variação é
   escolhida) — sem essa segunda regra, só produto simples ficava certo. */
.elementor-element-4acd728 form.cart,
.elementor-element-dcb56bf form.cart,
.woocommerce-variation-add-to-cart {
	flex-wrap: wrap !important;
}

/* Selos de confiança abaixo do botão — ver favela_selos_confianca() no
   functions.php, injeta esse bloco logo depois do botão de comprar */
.favela-selos-confianca {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	flex-basis: 100%;
	gap: 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--favela-borda);
}

.favela-selos-confianca__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	color: var(--favela-texto);
}

.favela-selos-confianca__item svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--favela-verde);
}

/* Galeria da página de produto — mesmo tratamento do grid: quadrada,
   fundo branco, produto inteiro visível, estilo Mercado Livre. Coluna
   a6720f2 é a versão desktop/tablet, fec7ae0 é a versão mobile.
   Mesma técnica do grid: position:absolute + inset:0 na imagem, porque
   height:100% sozinho não resolve de forma confiável dentro de uma caixa
   quadrada feita com aspect-ratio. */
.elementor-element-a6720f2 .jet-woo-product-gallery__image,
.elementor-element-fec7ae0 .jet-woo-product-gallery__image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--favela-branco);
	overflow: hidden;
}

.elementor-element-a6720f2 .jet-woo-product-gallery__image img,
.elementor-element-fec7ae0 .jet-woo-product-gallery__image img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: var(--favela-branco);
}

/* ==========================================================================
   4. CARRINHO — botões "Aplicar Cupom" e "Atualizar Carrinho" apareciam
   sem nenhum estilo (fundo vazio, texto sem contraste). Aqui uso o
   atributo name em vez de classe porque os dois só têm a classe genérica
   "button" do WooCommerce, sem id específico pra travar.
   ========================================================================== */

.woocommerce button[name="apply_coupon"],
.woocommerce button[name="update_cart"] {
	height: auto !important;
	line-height: normal !important;
	background: var(--favela-branco) !important;
	color: var(--favela-texto-forte) !important;
	border: 1px solid var(--favela-texto-forte) !important;
	border-radius: 6px !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 10px 18px !important;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce button[name="apply_coupon"]:hover,
.woocommerce button[name="update_cart"]:hover {
	background: var(--favela-texto-forte) !important;
	color: var(--favela-branco) !important;
}

.woocommerce button[name="apply_coupon"]:disabled,
.woocommerce button[name="update_cart"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ==========================================================================
   5. PÁGINA DE PRODUTO — ajustes finos (variações, comparar/favoritar,
   galeria em foto grande + miniaturas) depois da primeira olhada ao vivo.
   ========================================================================== */

/* Seletores de variação (Cor, Tamanho) — eram um <select> nu do
   navegador, sem estilo nenhum. Mesmo visual dos outros campos da loja. */
.elementor-element-591f27d table.variations select,
.elementor-element-c19f3c8 table.variations select {
	width: 100%;
	max-width: 320px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--favela-borda) !important;
	border-radius: 6px !important;
	background: var(--favela-branco);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	color: var(--favela-texto-forte);
}

.elementor-element-591f27d table.variations td.label,
.elementor-element-c19f3c8 table.variations td.label {
	padding-bottom: 6px;
}

.elementor-element-591f27d table.variations label,
.elementor-element-c19f3c8 table.variations label {
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--favela-texto-forte) !important;
}

/* Botões "Comparar" / "Lista de Favoritos" — antes vazavam o estilo
   circular do grid (ver comentário lá em cima) e ficavam quebrados.
   Aqui ganham um estilo próprio: texto discreto com ícone, sem fundo. */
.elementor-element-ecb61eb .jet-compare-button__link,
.elementor-element-be936aa .jet-compare-button__link,
.elementor-element-04ddd86 .jet-wishlist-button__link,
.elementor-element-e57d5ad .jet-wishlist-button__link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--favela-texto) !important;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 6px 0 !important;
}

.elementor-element-ecb61eb .jet-cw-icon,
.elementor-element-be936aa .jet-cw-icon,
.elementor-element-04ddd86 .jet-cw-icon,
.elementor-element-e57d5ad .jet-cw-icon {
	font-size: 15px;
}

/* Galeria — 1 foto grande + as outras como miniaturas numa fileira
   abaixo, estilo Mercado Livre, em vez de uma lista vertical de fotos
   grandes empilhadas (era isso que tava "diferente do Mercado Livre"). */
.elementor-element-a6720f2 .jet-woo-product-gallery-grid,
.elementor-element-fec7ae0 .jet-woo-product-gallery-grid {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
}

.elementor-element-a6720f2 .jet-woo-product-gallery__image-item,
.elementor-element-fec7ae0 .jet-woo-product-gallery__image-item {
	width: calc(25% - 6px) !important;
	flex: 0 0 auto !important;
}

.elementor-element-a6720f2 .jet-woo-product-gallery__image-item.featured,
.elementor-element-fec7ae0 .jet-woo-product-gallery__image-item.featured {
	width: 100% !important;
}

/* Título "Carrinho" — já tinha tirado o do tema (Kadence), faltava esse
   aqui, que vem do próprio template do carrinho (JetWooBuilder, id 345,
   seção d7a97f9). */
.elementor-345 .elementor-element-d7a97f9 {
	display: none !important;
}

/* ==========================================================================
   6. REVISÃO GERAL (mobile + espaçamento + polimento estilo Sulbox)
   ========================================================================== */

/* Ícone de busca "tela cheia" do cabeçalho mobile ficava flutuando por
   cima do nome da loja — sobra de quando eu mexi na logo/menu, e o
   ajuste de posição não resolveu direito (a coluna dele não tem espaço
   reservado na linha). Como já existe busca de sobra (caixa de busca
   fixa nas páginas de loja, e o menu hambúrguer), escondo esse ícone
   duplicado no mobile em vez de brigar com o layout dele. */
.elementor-165 .elementor-element-c209aa0 {
	display: none !important;
}

/* Espaçamento entre seções — no máximo 50px no PC e 30px no celular em
   qualquer lugar do site. Achei a seção de conteúdo da Loja (sidebar +
   grid) com 80px/50px, bem acima do combinado. */
.elementor-310 .elementor-element-df455c9 {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

@media (max-width: 767px) {
	.elementor-310 .elementor-element-df455c9 {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}

/* Blocos informativos em "card" com barra lateral colorida — estilo que
   vi na sulboxsp.com.br (referência que o cliente indicou) pro bloco de
   calcular frete deles. Uso aqui pros selos de confiança e pro aviso de
   doação, que antes eram só texto solto. */
.favela-selos-confianca {
	background: var(--favela-branco);
	border: 1px solid var(--favela-borda);
	border-left: 3px solid var(--favela-azul);
	border-radius: 4px;
	padding: 14px 16px;
}

.favela-aviso-doacao {
	border-left: 3px solid #B7860B;
	border-radius: 4px;
}

/* Corrige o rótulo dos filtros da loja (Filtro de Categoria, Tamanho...)
   que tinham fonte forçada (Cormorant) direto no widget, ignorando a
   fonte global — a regra da seção 0 já resolve o texto, isso aqui só
   ajusta o peso/caixa pra ficar consistente com o resto da loja. */
.jet-filter-label {
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* Miniatura do produto no mini-carrinho (dropdown do ícone do carrinho no
   cabeçalho) sem limite de largura — no mobile isso deixava a foto
   gigante, ocupando a tela toda. */
.elementor-menu-cart__product-image img {
	max-width: 60px !important;
	width: 60px !important;
	height: auto !important;
}

/* Mesmo problema na tabela de verdade do carrinho (página /carrinho/) —
   a tabela vira "cards" no mobile, mas a foto do produto não tinha
   limite de tamanho e ficava do tamanho da tela inteira. */
table.shop_table .product-thumbnail img {
	max-width: 90px !important;
	width: 90px !important;
	height: auto !important;
}

@media (max-width: 767px) {
	table.shop_table .product-thumbnail img {
		max-width: 70px !important;
		width: 70px !important;
	}
}

/* ==========================================================================
   7. BANNER DA LOJA — inserido no topo da vitrine (template "Página de
   Loja e Categorias", Elementor id 310) via widget HTML, no lugar onde
   ficava o título "Loja" que a gente escondeu.
   ========================================================================== */

.favela-banner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 40px 32px;
	background: linear-gradient(135deg, var(--favela-azul) 0%, var(--favela-azul-escuro) 100%);
	border-radius: 8px;
	text-align: center;
}

.favela-banner__badge {
	display: inline-block;
	background: var(--favela-amarelo);
	color: var(--favela-texto-forte);
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}

.favela-banner__title {
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--favela-branco);
	margin: 0 0 12px;
}

.favela-banner__desc {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--favela-branco);
	opacity: 0.92;
	max-width: 620px;
	margin: 0 auto 24px;
}

.favela-banner__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	row-gap: 10px;
}

/* Antes tinha fundo + borda + cantos arredondados, parecendo botão
   clicável — mas é só informativo, não é ação nenhuma. Agora é texto
   simples com um check amarelo na frente, sem contorno de botão. */
.favela-banner__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--favela-branco);
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 0;
	border-radius: 0;
}

.favela-banner__pill::before {
	content: "✓";
	color: var(--favela-amarelo);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
}

@media (max-width: 767px) {
	.favela-banner {
		padding: 30px 20px;
	}

	.favela-banner__title {
		font-size: 24px;
	}

	.favela-banner__desc {
		font-size: 14px;
	}
}

/* ==========================================================================
   8. ÚLTIMOS AJUSTES — espaço vazio no carrinho, selo de doação no
   carrinho/checkout, e zoom na foto do produto.
   ========================================================================== */

/* Espaço em branco grande no topo do carrinho: a seção com a tabela +
   totais também tinha 80px/50px de padding (igual o problema que já
   corrigi na Loja). Seção e20b4d8, template "Página de Carrinho"
   (Elementor, id 345). */
.elementor-345 .elementor-element-e20b4d8 {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

@media (max-width: 767px) {
	.elementor-345 .elementor-element-e20b4d8 {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}

/* Zoom na foto do produto — passa o mouse e a imagem cresce um pouco
   dentro do quadrado (o quadrado corta o excesso, então nunca vaza pra
   fora). Sem JavaScript, só CSS. */
.elementor-element-a6720f2 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image {
	cursor: zoom-in;
}

.elementor-element-a6720f2 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image img {
	transition: transform 0.35s ease;
}

.elementor-element-a6720f2 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image:hover img {
	transform: scale(1.18);
}

/* Selinho de lupa no canto, avisando que dá pra ampliar — estilo que vi
   na sulboxsp.com.br */
.elementor-element-a6720f2 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--favela-branco);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

/* ==========================================================================
   9. CABEÇALHO — borda do carrinho, e remoção da lista de favoritos
   ========================================================================== */

/* Ícone do carrinho tinha uma borda cinza quadrada — vem do estilo padrão
   de botão do Elementor (.elementor-button), que os outros ícones do
   cabeçalho não usam. Tira só do carrinho, pra ficar igual aos outros. */
.elementor-element-8133461 .elementor-menu-cart__toggle_button,
.elementor-element-d9b9ae8 .elementor-menu-cart__toggle_button {
	border: none !important;
}

/* Lista de favoritos/desejos removida a pedido do cliente — mantém o
   comparador (ninguém pediu pra tirar esse). Ícone no cabeçalho (só
   existe na versão desktop, a3af6cc), botão nos cards do grid, e botão
   na página de produto (04ddd86 desktop / e57d5ad mobile). */
.elementor-element-a3af6cc {
	display: none !important;
}

.jet-woo-products-cqw-wrapper .jet-wishlist-button__container {
	display: none !important;
}

.elementor-element-04ddd86,
.elementor-element-e57d5ad {
	display: none !important;
}

/* ==========================================================================
   10. PÁGINA DE CONTATO — tira o formulário, deixa só os dados de contato
   ========================================================================== */

.elementor-element-ee0386b,
.elementor-element-9f21739 {
	display: none !important;
}

/* ==========================================================================
   11. PÁGINA "DOAÇÃO EM DINHEIRO" — hero + cartão do PIX com QR Code
   ========================================================================== */

.favela-doacao-hero {
	max-width: 1290px;
	margin: 0 auto;
	padding: 40px 32px 24px;
	text-align: center;
}

.favela-doacao-hero__badge {
	display: inline-block;
	background: var(--favela-amarelo);
	color: var(--favela-texto-forte);
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}

.favela-doacao-hero__title {
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--favela-texto-forte);
	margin: 0 0 12px;
}

.favela-doacao-hero__desc {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--favela-texto);
	max-width: 620px;
	margin: 0 auto;
}

.favela-pix-card {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: center;
	max-width: 900px;
	margin: 0 auto 24px;
	padding: 32px;
	background: var(--favela-branco);
	border: 1px solid var(--favela-borda);
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.favela-pix-card__qr img {
	display: block;
	width: 220px;
	height: 220px;
	border: 1px solid var(--favela-borda);
	border-radius: 8px;
	padding: 10px;
	background: var(--favela-branco);
}

.favela-pix-card__info {
	flex: 1 1 320px;
	min-width: 260px;
	text-align: left;
}

.favela-pix-card__title {
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--favela-texto-forte);
	margin: 0 0 8px;
}

.favela-pix-card__hint {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	color: var(--favela-texto);
	margin: 0 0 16px;
}

.favela-pix-card__key-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.favela-pix-card__key {
	flex: 1 1 auto;
	background: var(--favela-fundo);
	border: 1px solid var(--favela-borda);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: "Montserrat", monospace;
	font-size: 14px;
	color: var(--favela-texto-forte);
	word-break: break-all;
}

.favela-pix-card__copy {
	flex-shrink: 0;
	background: var(--favela-azul);
	color: var(--favela-branco);
	border: none;
	border-radius: 6px;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 18px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.favela-pix-card__copy:hover {
	background: var(--favela-azul-escuro);
}

.favela-pix-card__copy--ok {
	background: var(--favela-verde) !important;
}

.favela-pix-card__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 12px;
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
}

.favela-pix-card__details dt {
	font-weight: 700;
	color: var(--favela-texto-suave);
}

.favela-pix-card__details dd {
	margin: 0;
	color: var(--favela-texto-forte);
}

.favela-doacao-aviso-pix {
	max-width: 900px;
	margin: 0 auto 24px;
}

.favela-doacao-cta {
	text-align: center;
	padding-bottom: 48px;
}

.favela-doacao-cta__btn {
	display: inline-block;
	text-decoration: none;
	background: rgba(255, 255, 255, 0);
}

@media (max-width: 767px) {
	.favela-doacao-hero__title {
		font-size: 24px;
	}

	.favela-pix-card {
		padding: 24px 20px;
		flex-direction: column;
	}

	.favela-pix-card__qr img {
		width: 180px;
		height: 180px;
	}

	.favela-pix-card__info {
		text-align: center;
	}

	.favela-pix-card__details {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

/* ==========================================================================
   12. BANNERS DE DOAÇÃO EM DINHEIRO — Home/Loja e rodapé, os dois
   linkando pra página nova (/doacao-em-dinheiro/)
   ========================================================================== */

.favela-banner-doacao {
	max-width: 1290px;
	margin: 24px auto 0;
	padding: 24px 32px;
	background: var(--favela-branco);
	border: 2px dashed var(--favela-azul);
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.favela-banner-doacao__text {
	font-family: "Montserrat", sans-serif;
}

.favela-banner-doacao__title {
	font-size: 17px;
	font-weight: 800;
	color: var(--favela-texto-forte);
	margin: 0 0 4px;
}

.favela-banner-doacao__desc {
	font-size: 13px;
	color: var(--favela-texto);
	margin: 0;
}

.favela-banner-doacao__btn {
	flex-shrink: 0;
	display: inline-block;
	background: var(--favela-azul);
	color: var(--favela-branco) !important;
	text-decoration: none;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.favela-banner-doacao__btn:hover {
	background: var(--favela-azul-escuro);
}

/* Versão do rodapé — mais discreta, fundo escuro combina com a barra de
   copyright amarela que já existe logo abaixo */
.favela-banner-doacao--footer {
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	border: none;
	border-top: 1px solid var(--favela-borda);
	background: var(--favela-fundo);
	padding: 20px 32px;
}

@media (max-width: 767px) {
	.favela-banner-doacao {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
}

/* ==========================================================================
   13. RODAPÉ NO MOBILE — colunas coladas
   ========================================================================== */

/* No mobile as 3 colunas do rodapé (marca, categorias, contato) empilham
   uma embaixo da outra — dá respiro entre elas e um divisor sutil (branco
   translúcido, porque desde a seção 18 essa faixa tem fundo escuro).
   Seção 3aab425, template "Rodapé" (230). */
@media (max-width: 767px) {
	.elementor-element-3aab425 > .elementor-container > .elementor-column {
		padding: 24px 20px !important;
	}

	.elementor-element-3aab425 > .elementor-container > .elementor-column + .elementor-column {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* Linha de copyright ("Todos os Direitos Reservados... Produzido Por [logo]")
   — regra responsiva que veio dentro de um <style> no próprio widget HTML
   do rodapé (template 230, widget 4c6ef59). O Elementor apaga a tag
   <style> ao salvar o widget e deixa o texto solto visível na página; por
   isso a regra de verdade mora aqui agora, e o widget guarda só o HTML do
   texto/logo. */
@media (max-width: 480px) {
	.footer-leme {
		flex-direction: column;
		text-align: center;
	}

	.footer-leme img {
		margin-left: 0 !important;
		margin-top: 10px;
	}
}

/* ==========================================================================
   14. PÁGINA "PEDIDO RECEBIDO" — tela de confirmação depois do checkout,
   antes de ir pro WhatsApp. Ver favela_script_pedido_recebido() e
   favela_checkout_intercepta_redirect() no functions.php.
   ========================================================================== */

.favela-pedido-recebido {
	max-width: 480px;
	margin: 60px auto;
	padding: 40px 32px;
	background: var(--favela-branco);
	border: 1px solid var(--favela-borda);
	border-radius: 12px;
	text-align: center;
	font-family: "Montserrat", sans-serif;
}

.favela-pedido-recebido__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	color: var(--favela-verde);
}

.favela-pedido-recebido__icon svg {
	width: 100%;
	height: 100%;
}

.favela-pedido-recebido__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--favela-texto-forte);
	margin: 0 0 8px;
}

.favela-pedido-recebido__numero {
	font-size: 14px;
	font-weight: 700;
	color: var(--favela-azul);
	margin: 0 0 16px;
	min-height: 17px; /* evita "pulo" de layout enquanto o JS ainda não preencheu */
}

.favela-pedido-recebido__desc {
	font-size: 14px;
	color: var(--favela-texto);
	margin: 0 0 28px;
	line-height: 1.5;
}

.favela-pedido-recebido__btn {
	display: inline-block;
	background: var(--favela-verde);
	color: var(--favela-branco) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 14px 32px;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.favela-pedido-recebido__btn:hover {
	background: var(--favela-verde-escuro);
}

.favela-pedido-recebido__qr-wrap {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--favela-borda);
}

.favela-pedido-recebido__qr-label {
	font-size: 12px;
	color: var(--favela-texto-suave);
	margin: 0 0 12px;
}

#favela-pedido-qr {
	display: inline-block;
	line-height: 0;
	padding: 12px;
	background: var(--favela-branco);
	border: 1px solid var(--favela-borda);
	border-radius: 8px;
}

.favela-pedido-recebido__voltar {
	display: inline-block;
	margin-top: 24px;
	font-size: 13px;
	color: var(--favela-texto-suave);
	text-decoration: none;
}

.favela-pedido-recebido__voltar:hover {
	color: var(--favela-azul);
}

/* Estado "vazio" — alguém abriu /pedido-recebido/ direto, sem vir de um
   checkout de verdade (sem parâmetro ?wa= válido). Esconde tudo que
   depende do pedido e mostra só um aviso simples com link pra loja. */
.favela-pedido-recebido__vazio {
	display: none;
}

.favela-pedido-recebido--vazio > *:not(.favela-pedido-recebido__vazio) {
	display: none;
}

.favela-pedido-recebido--vazio .favela-pedido-recebido__vazio {
	display: block;
}

@media (max-width: 480px) {
	.favela-pedido-recebido {
		margin: 30px auto;
		padding: 32px 20px;
	}
}

/* ==========================================================================
   15. "COMO FUNCIONA" — seção logo abaixo do banner do herói na Home/Loja,
   explicando o fluxo (escolher → carrinho → WhatsApp) pra quem chega sem
   contexto nenhum. Template 310, seção cb5a3f6, inserida antes do título
   "Loja" (ad2df3d).
   ========================================================================== */

.favela-como-funciona {
	max-width: 1290px;
	margin: 24px auto 0;
	padding: 32px 24px;
	font-family: "Montserrat", sans-serif;
}

.favela-como-funciona__titulo {
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	color: var(--favela-texto-forte);
	margin: 0 0 28px;
}

.favela-como-funciona__passos {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: flex-start;
}

.favela-como-funciona__passo {
	flex: 1;
	max-width: 280px;
	text-align: center;
	position: relative;
}

/* Linha pontilhada ligando os passos, só no desktop — decorativo, não
   deve atrapalhar leitura se cortar mal em telas médias, por isso some
   no mobile junto com o flex-direction: column. */
.favela-como-funciona__passo:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20px;
	left: calc(50% + 34px);
	width: calc(100% - 44px);
	border-top: 2px dashed var(--favela-borda);
}

.favela-como-funciona__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 14px;
	background: var(--favela-azul);
	color: var(--favela-branco);
	font-weight: 800;
	font-size: 18px;
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.favela-como-funciona__passo-titulo {
	font-size: 15px;
	font-weight: 700;
	color: var(--favela-texto-forte);
	margin: 0 0 6px;
}

.favela-como-funciona__passo-desc {
	font-size: 13px;
	color: var(--favela-texto);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 767px) {
	.favela-como-funciona {
		padding: 24px 20px;
	}

	.favela-como-funciona__titulo {
		font-size: 19px;
		margin-bottom: 24px;
	}

	.favela-como-funciona__passos {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.favela-como-funciona__passo {
		max-width: 320px;
	}

	.favela-como-funciona__passo:not(:last-child)::after {
		display: none;
	}
}

/* ==========================================================================
   16. LINKS LEGAIS NO RODAPÉ — Política de Privacidade / Termos de Uso,
   na barra de copyright (fundo amarelo). Widget 4c6ef59, mesmo do texto
   "Todos os Direitos Reservados..." (template 230).
   ========================================================================== */

.favela-footer-legal-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
}

.favela-footer-legal-links a {
	color: var(--favela-texto-forte) !important;
	text-decoration: underline;
	opacity: 0.75;
}

.favela-footer-legal-links a:hover {
	opacity: 1;
}

.favela-footer-legal-links span {
	color: var(--favela-texto-forte);
	opacity: 0.5;
}

/* ==========================================================================
   17. FILTROS COLAPSÁVEIS NO MOBILE — na Loja/categorias, o bloco de
   filtros (busca, categoria, tamanho, cor, preço) é uma coluna lateral no
   desktop; no mobile, sem espaço pra ficar do lado, ele empilha ACIMA do
   grid inteiro — um bloco enorme antes de qualquer produto aparecer. Um
   botão "Filtrar produtos" (injetado via JS, ver
   favela_script_filtros_mobile() no functions.php) esconde esse bloco por
   padrão e abre/fecha ao tocar.
   Escondemos o CONTÊINER interno (.elementor-container), não a seção
   811c8b6 em si — essa seção tem posicionamento "sticky" controlado pelo
   próprio Elementor, então é mais seguro deixá-la existir vazia do que
   brigar com o JS dela via display:none direto nela.
   ========================================================================== */

@media (max-width: 767px) {
	.elementor-310 .elementor-element-811c8b6 > .elementor-container {
		display: none !important;
	}

	.elementor-310 .elementor-element-764c4fc.favela-filtros-aberto .elementor-element-811c8b6 > .elementor-container {
		display: flex !important;
	}

	.favela-filtros-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0 0 16px;
		padding: 12px 16px;
		background: var(--favela-branco);
		border: 1px solid var(--favela-borda);
		border-radius: 6px;
		font-family: "Montserrat", sans-serif;
		font-size: 14px;
		font-weight: 700;
		color: var(--favela-texto-forte);
	}

	.favela-filtros-toggle svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		transition: transform 0.15s ease;
	}

	.favela-filtros-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
}

@media (min-width: 768px) {
	.favela-filtros-toggle {
		display: none;
	}
}

/* ==========================================================================
   18. RODAPÉ — redesenho da faixa de cima (marca + categorias + contato).
   Antes eram só 2 colunas de texto solto sobre fundo branco; agora é uma
   faixa escura de verdade entre a faixa amarela do cabeçalho e a barra de
   copyright (que já é amarela) — efeito "sanduíche" com as cores da marca.
   3 colunas: marca (nova) | categorias (menu de2c7f2, reaproveitado, agora
   vertical) | contato (icon-list b28812c, reaproveitado). Título de cada
   coluna e o bloco de marca são widgets HTML novos — ver _elementor_data
   do template "Rodapé" (Elementor, id 230), seção 3aab425.
   ========================================================================== */

.elementor-230 .elementor-element-3aab425 {
	background-color: #1A1A1A !important;
}

.elementor-230 .elementor-element-3aab425 > .elementor-container {
	padding: 48px 0 36px;
}

/* Divisor sutil entre as 3 colunas, só no desktop (no mobile elas
   empilham — divisor equivalente já existe na seção 13, acima) */
@media (min-width: 768px) {
	.elementor-230 .elementor-element-3aab425 > .elementor-container > .elementor-column:not(:first-child) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* Bloco de marca (1ª coluna) */
.favela-footer-marca__nome {
	font-family: "Montserrat", sans-serif;
	font-size: 21px;
	font-weight: 800;
	color: var(--favela-branco);
	margin: 0 0 10px;
}

.favela-footer-marca__nome span {
	color: var(--favela-azul);
}

.favela-footer-marca__tagline {
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 260px;
}

/* Título de cada coluna ("Categorias" / "Fale com a gente") */
.favela-footer-titulo {
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--favela-branco);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--favela-azul);
	display: inline-block;
}

/* Menu de categorias agora em coluna vertical (widget de2c7f2) — cor já
   vem certa do próprio widget (settings do _elementor_data), aqui só
   espaçamento e a transição suave no hover */
.elementor-230 .elementor-element-de2c7f2 .elementor-nav-menu--main .elementor-item {
	padding: 6px 0 !important;
	transition: color 0.15s ease;
}

/* Lista de contato (widget b28812c): ícone vira selo circular azul —
   antes era só um ícone pequeno cinza solto do lado do texto */
.elementor-230 .elementor-element-b28812c .elementor-icon-list-item {
	margin-bottom: 14px;
}

.elementor-230 .elementor-element-b28812c .elementor-icon-list-item:last-child {
	margin-bottom: 0;
}

.elementor-230 .elementor-element-b28812c .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--favela-azul);
	margin-right: 12px;
	flex-shrink: 0;
}

.elementor-230 .elementor-element-b28812c .elementor-icon-list-icon i {
	color: var(--favela-branco) !important;
	font-size: 13px;
}

.elementor-230 .elementor-element-b28812c .elementor-icon-list-text {
	transition: color 0.15s ease;
}

.elementor-230 .elementor-element-b28812c a:hover .elementor-icon-list-text {
	color: var(--favela-azul) !important;
}

@media (max-width: 767px) {
	.favela-footer-marca__tagline {
		max-width: 100%;
	}

	.favela-footer-titulo {
		margin-top: 4px;
	}
}