/* LOC.FIT — Área por CEP
   Tema claro: o bloco fica sobre o fundo branco da vitrine, sem faixa preta.
   O Woodmart reseta button e input com alta especificidade — fundo, cor,
   altura, borda e raio precisam de !important. Medido na loja, não suposto. */

.lfa{width:100%;max-width:100%;margin:0 0 24px;padding:0;background:none;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}
.lfa *{box-sizing:border-box}

.lfa-in{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}

/* A moldura é o que delimita a área de ação. */
.lfa .lfa-moldura{padding:20px 24px;border:1px solid #DFDED8;border-radius:14px;background:#FAFAF8}

.lfa-texto{flex:1 1 260px;min-width:0}
.lfa .lfa-eb{display:block;color:#8A6D00 !important;font:700 10px/1 Arial,Helvetica,sans-serif !important;letter-spacing:.18em;text-transform:uppercase;margin:0 0 7px}
.lfa .lfa-titulo{margin:0;color:#11120F !important;font-weight:700;letter-spacing:-.015em;line-height:1.25;font-size:18px}

.lfa form.lfa-acao{flex:1 1 440px;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;border:0;background:none}
.lfa .lfa-rotulo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.lfa input.lfa-cep{flex:1 1 220px;min-width:0;height:48px !important;min-height:48px !important;padding:0 15px !important;margin:0 !important;border:1px solid #D8D7D1 !important;border-radius:10px !important;background:#fff !important;background-image:none !important;color:#11120F !important;font:600 15.5px/1 Arial,Helvetica,sans-serif !important;letter-spacing:.02em;box-shadow:none !important;-webkit-appearance:none;appearance:none}
.lfa input.lfa-cep::placeholder{color:#8B8B84 !important;font-weight:400}
.lfa input.lfa-cep:focus{outline:none !important;border-color:#11120F !important;background:#fff !important;box-shadow:none !important}

.lfa button.lfa-btn{flex:0 0 auto;height:48px !important;min-height:48px !important;padding:0 24px !important;margin:0 !important;border:0 !important;border-radius:10px !important;background:#FFCF00 !important;background-image:none !important;color:#11120F !important;font:700 12.5px/1 Arial,Helvetica,sans-serif !important;letter-spacing:.03em;text-transform:none !important;box-shadow:none !important;cursor:pointer;white-space:nowrap;transition:background .15s ease,opacity .15s ease}
.lfa button.lfa-btn[disabled]{opacity:.55;cursor:default}
@media (hover:hover) and (pointer:fine){.lfa button.lfa-btn:not([disabled]):hover{background:#FFD92E !important}}

.lfa .lfa-resp{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font:600 13px/1.4 Arial,Helvetica,sans-serif}
.lfa .lfa-resp--ok{color:#2E7D32 !important}
.lfa .lfa-resp--fora{color:#8A6D00 !important}
.lfa .lfa-resp--erro{color:#C62828 !important}
.lfa .lfa-ico{flex:0 0 auto;width:17px;height:17px;margin-top:1px}

.lfa .lfa-lead{flex:1 1 100%;border-top:1px solid #E6E5DF;padding-top:16px;margin-top:4px}
.lfa .lfa-lead-t{margin:0 0 11px;color:#11120F !important;font:700 14px/1.35 Arial,Helvetica,sans-serif !important}
.lfa .lfa-lead-linha{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.lfa input.lfa-lead-c{flex:1 1 190px;min-width:0;height:46px !important;min-height:46px !important;padding:0 15px !important;margin:0 !important;border:1px solid #D8D7D1 !important;border-radius:10px !important;background:#fff !important;color:#11120F !important;font:400 15px/1 Arial,Helvetica,sans-serif !important;box-shadow:none !important;-webkit-appearance:none;appearance:none}
.lfa input.lfa-lead-c::placeholder{color:#8B8B84 !important}
.lfa input.lfa-lead-c:focus{outline:none !important;border-color:#11120F !important}
.lfa button.lfa-lead-b{flex:0 0 auto;height:46px !important;min-height:46px !important;padding:0 20px !important;margin:0 !important;border:1px solid #11120F !important;border-radius:10px !important;background:#11120F !important;color:#FFCF00 !important;font:700 12.5px/1 Arial,Helvetica,sans-serif !important;letter-spacing:.03em;text-transform:none !important;box-shadow:none !important;cursor:pointer}
@media (hover:hover) and (pointer:fine){.lfa button.lfa-lead-b:hover{background:#2A2B26 !important}}


/* ---- RECIBO ----------------------------------------------------------
   O estado depois do CEP respondido. Barra fina, sem formulário: o convite
   já foi aceito e a tela volta a ser do produto. `hidden` decide qual dos
   dois aparece — o atributo precisa de !important porque o display:flex
   abaixo é mais específico que o [hidden] do navegador. */
.lfa [hidden]{display:none !important}

.lfa .lfa-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	padding:13px 18px;border:1px solid #C6E4C8;border-radius:12px;background:#E8F5E9;
	font:400 13px/1.45 Arial,Helvetica,sans-serif;color:#46603F}
.lfa .lfa-pin{flex:0 0 auto;width:17px;height:17px;color:#2E7D32}
.lfa .lfa-cep-lido{color:#11120F !important;font-weight:700;letter-spacing:.02em}
.lfa .lfa-cep-lido:after{content:"\00b7";margin-left:10px;color:#A9CBAB}
.lfa .lfa-frase{min-width:0}
.lfa .lfa-regiao{color:#2E7D32 !important;font-weight:700}
.lfa .lfa-resto{color:#4B6B4D !important;font-weight:400}
.lfa .lfa-regiao + .lfa-resto:before{content:"\00b7";margin:0 5px 0 3px;color:#A9CBAB}

.lfa button.lfa-alterar{margin-left:auto !important;flex:0 0 auto;
	height:auto !important;min-height:0 !important;padding:0 !important;
	border:0 !important;background:none !important;background-image:none !important;
	color:#2E7D32 !important;font:700 12px/1 Arial,Helvetica,sans-serif !important;
	text-transform:none !important;text-decoration:underline;box-shadow:none !important;cursor:pointer}
@media (hover:hover) and (pointer:fine){.lfa button.lfa-alterar:hover{color:#11120F !important}}


/* Depois que o filtro do WCFM sai, a barra de ferramentas fica só com um
   ícone e dois filetes — 47px de altura mais 20 de margem, medidos na
   página, de espaço branco sem função. */
body.lfa-ativo .shop-loop-head{display:none !important}

/* .filters-area do Woodmart: borda em cima, borda embaixo, 30px de respiro
   nos dois lados. Continha só o filtro de loja do WCFM — com ele escondido,
   sobravam duas linhas horizontais e um vazio entre elas. Tem a classe
   wd-visible-lg, então só aparece em telas grandes, que foi o que me fez
   demorar a achá-la. */
body.lfa-ativo .filters-area{display:none !important}
body.lfa-ativo .elementor-element-21c91ed,
body.lfa-ativo .elementor-element-9c2da44,
body.lfa-ativo .elementor-element-2b46d2d,
body.lfa-ativo .wcfmmp_filter_vendor,
body.lfa-ativo select#wcfmmp_filter_vendor,
body.lfa-ativo select#wcfmmp_filter_vendor + .select2{display:none !important}

@media (max-width:900px){
	.lfa-texto{flex:1 1 100%}
	.lfa form.lfa-acao{flex:1 1 100%}
}

@media (max-width:767px){
	/* Duas linhas: em cima o CEP reconhecido e o "alterar" à direita, embaixo
	   a frase inteira. `order` na frase, não no botão — mandar o botão para
	   trás o colocaria antes do pino. */
	.lfa .lfa-barra{padding:12px 14px;gap:5px 9px;font-size:12.5px}
	.lfa .lfa-frase{flex:1 1 100%;order:1}
	.lfa .lfa-cep-lido:after{display:none}
	.lfa .lfa-moldura{padding:18px 16px;border-radius:12px}
	.lfa .lfa-titulo{font-size:17px}
	.lfa button.lfa-btn{flex:1 1 100%}
	.lfa button.lfa-lead-b{flex:1 1 100%}
}