/* Tema Ambiente: claro e acolhedor, para casa, moveis e decoracao.
   Carregado depois do CSS do Vitrine. As cores do lojista continuam valendo (--loja, --topo, --rodape...);
   aqui entram as formas: titulos com tracos, cartoes claros com botao cheio, menu com icones e tons de areia. */

.tema-ambiente { --areia: #f4f0ea; --verde-claro: color-mix(in srgb, var(--loja) 12%, #fff); --linha: #e6ecea; }

/* titulos das secoes: centralizados, com um traco de cada lado */
.tema-ambiente .vt-secao-cab { flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; text-align: center; }
.tema-ambiente .vt-secao-cab h2 { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 800; color: var(--titulos); }
.tema-ambiente .vt-secao-cab h2::before, .tema-ambiente .vt-secao-cab h2::after { content: ""; width: 34px; height: 3px; border-radius: 3px; background: var(--loja); }
.tema-ambiente .vt-secao-cab a { font-size: 13px; }

/* cartao do produto: branco com borda, nome centralizado e botao cheio na cor da loja */
.tema-ambiente .vt-card { border-color: var(--linha); border-radius: 14px; }
.tema-ambiente .vt-card:hover { transform: none; border-color: var(--loja); box-shadow: 0 14px 30px color-mix(in srgb, var(--loja) 14%, transparent); }
.tema-ambiente .vt-card-img { background: var(--areia); }
.tema-ambiente .vt-card-img img { object-fit: cover; padding: 0; }
.tema-ambiente .vt-card-info { align-items: center; text-align: center; }
.tema-ambiente .vt-card-preco { align-items: center; }
.tema-ambiente .vt-card-preco strong { color: var(--titulos); font-weight: 800; }
.tema-ambiente .vt-card-botao { border-radius: 10px; background: var(--loja); color: #fff; }
.tema-ambiente .vt-card:hover .vt-card-botao { background: var(--titulos); }
.tema-ambiente .vt-selo { left: auto; right: 10px; border-radius: 6px; background: var(--loja); }
.tema-ambiente .vt-selo.cinza { background: var(--titulos); }

/* vantagens: uma faixa unica com divisorias */
.tema-ambiente .vt-vantagens { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tema-ambiente .vt-vantagens > * { border: 0; border-radius: 0; border-right: 1px solid var(--linha); }
.tema-ambiente .vt-vantagens > *:last-child { border-right: 0; }
.tema-ambiente .vt-vantagens i { border-radius: 50%; background: var(--verde-claro); }

/* mosaico com o nome sobre a imagem (ambientes): degrade escuro e nome com um traco na cor da loja */
.tema-ambiente .hdl-mos-img { background: var(--areia); }
.tema-ambiente .hdl-mos-sobre .hdl-mos-img { aspect-ratio: 3 / 4; }
.tema-ambiente .hdl-mos-sobre a::after { content: "\2192"; position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--loja); color: #fff; font-size: 18px; }
.tema-ambiente .hdl-mos-sobre a::before { content: ""; position: absolute; inset: 45% 0 0 0; z-index: 1; border-radius: 0 0 var(--raio) var(--raio); background: linear-gradient(transparent, rgba(0, 0, 0, .6)); pointer-events: none; }
.tema-ambiente .hdl-mos-sobre a b { z-index: 2; left: 18px; bottom: 18px; padding: 0 0 6px; background: none; box-shadow: none; border-radius: 0; border-bottom: 3px solid var(--loja); color: #fff; font-size: 20px; font-weight: 800; }
.tema-ambiente .hdl-mos b { color: var(--titulos); }

/* banners, blog, avaliacoes e newsletter */
.tema-ambiente .hdl-hero .vt-botao { color: var(--titulos) !important; border-radius: 10px; }
.tema-ambiente .vt-blog a { border-color: var(--linha); border-radius: 14px; }
.tema-ambiente .vt-blog strong { color: var(--titulos); }
.tema-ambiente .hdl-depo figure { background: var(--areia); border-color: transparent; }
.tema-ambiente .hdl-depo figcaption { display: block; }
.tema-ambiente .hdl-depo-nota { color: var(--loja); }
.tema-ambiente .hdl-it-txt h2 { color: var(--titulos); font-weight: 800; }
body.vitrine.tema-ambiente .vt-news { background: color-mix(in srgb, var(--rodape) 86%, #000); }
body.vitrine.tema-ambiente .vt-news::before { display: none; }
body.vitrine.tema-ambiente .vt-news-campo { border-radius: 12px; }
body.vitrine.tema-ambiente .vt-news-campo input, body.vitrine.tema-ambiente .vt-news-campo button { border-radius: 9px; }

/* ---------- topo proprio (topo.php): busca larga, atalhos com duas linhas e menu com icones ---------- */
body.vitrine .am-topo .vt-busca { max-width: 560px; }
body.vitrine .am-topo .vt-busca input { border-radius: 12px; border-color: var(--loja); background: #fff; }
.am-topo .vt-acao > i { color: var(--loja) !important; font-size: 26px; }
.am-topo .vt-acao small { color: color-mix(in srgb, var(--topo-texto) 60%, #fff) !important; }
.am-topo .vt-menu { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.am-topo .vt-menu a, .am-topo .vt-menu .vt-menu-item { border-radius: 10px; font-weight: 700; }
.am-topo .am-menu-ico { color: var(--loja); font-size: 16px; margin-right: 6px; vertical-align: -2px; }
.am-topo .vt-menu a.vt-ofertas { margin-left: auto; padding: 8px 18px; background: var(--loja); color: #fff !important; }
.am-topo .vt-menu a.vt-ofertas .am-menu-ico { color: #fff; }
.am-topo .vt-menu a.vt-ofertas:hover { background: var(--titulos); }

/* ---------- rodape proprio (rodape.php): cinco colunas, botao de WhatsApp e pagamentos em coluna ---------- */
.am-rodape-grade { grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1.2fr; }
.am-rodape .vt-rodape-zap { margin-top: 4px; border-radius: 10px; gap: 8px; }
.am-rodape-escuro .vt-marca img { filter: brightness(0) invert(1); }
.am-rodape-pags { display: grid; align-content: start; gap: 8px; }
.am-rodape-pags h3 + .vt-pags { margin-bottom: 14px; }
.am-rodape .vt-redes a { border-radius: 50%; }
.am-rodape .vt-redes a:hover { background: var(--loja); }
.am-rodape .vt-rodape-base { background: color-mix(in srgb, var(--rodape) 85%, #000); }

/* ---------- pagina do produto: fundo areia na foto, preco destacado e botao cheio ---------- */
body.vitrine.tema-ambiente .single-produto .galeria, body.vitrine.tema-ambiente .single-produto .galeria img { border-radius: 16px !important; background: var(--areia); }
body.vitrine.tema-ambiente .rowtitle .title-icon { display: none; }
body.vitrine.tema-ambiente .produto-detalhes .pd-nome { display: block !important; margin-bottom: 6px; }
body.vitrine.tema-ambiente .pd-nome .nome span { font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--titulos); }
body.vitrine.tema-ambiente .produto-detalhes .row { padding: 6px 0; border-bottom: 1px dashed var(--linha); }
body.vitrine.tema-ambiente .produto-detalhes .pd-nome, body.vitrine.tema-ambiente .produto-detalhes .pd-preco { border-bottom: 0; }
body.vitrine.tema-ambiente .pd-preco { margin-top: 8px; padding: 14px 16px !important; border-radius: 14px; background: var(--verde-claro); }
body.vitrine.tema-ambiente .produto-detalhes .valor, body.vitrine.tema-ambiente .produto-detalhes .valor span { font-size: 30px !important; font-weight: 800 !important; color: var(--titulos) !important; }
body.vitrine.modo-loja.tema-ambiente .line-variacao .opcao { border-radius: 10px !important; }
body.vitrine.tema-ambiente .subtotal-adicionar .col-md-6 { width: 100%; float: none; }
body.vitrine.tema-ambiente .sacola-adicionar { display: flex !important; align-items: center; justify-content: center; float: none !important; width: 100%; height: 56px; margin-top: 12px; border-radius: 12px !important; font-size: 16px; }
body.vitrine.tema-ambiente .pa-abas { border-bottom: 2px solid var(--linha); }
body.vitrine.tema-ambiente .pa-abas .ativa { color: var(--loja) !important; }

/* ---------- carrinho (carrinho.php) e finalizar compra: etapas numeradas ligadas por uma linha ---------- */
body.vitrine.tema-ambiente .co-passos { counter-reset: passo; gap: 0; margin-bottom: 24px; font-weight: 700; }
body.vitrine.tema-ambiente .co-passos li { counter-increment: passo; gap: 8px; color: #8aa09d; }
body.vitrine.tema-ambiente .co-passos li::before { content: counter(passo) !important; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 !important; border-radius: 50%; border: 2px solid currentColor; font-size: 13px; }
body.vitrine.tema-ambiente .co-passos li + li { padding-left: 46px; position: relative; }
body.vitrine.tema-ambiente .co-passos li + li::after { content: ""; position: absolute; left: 8px; top: 50%; width: 30px; height: 2px; background: #cfdcda; }
body.vitrine.tema-ambiente .co-passos .atual { color: var(--loja); }
body.vitrine.tema-ambiente .co-passos .atual::before { background: var(--loja); border-color: var(--loja); color: #fff; }
body.vitrine.tema-ambiente .co-passos .feito { color: var(--titulos); }
body.vitrine.tema-ambiente .ck h1 { font-weight: 800; color: var(--titulos); }
body.vitrine.tema-ambiente .ck-item { border-color: var(--linha); border-radius: 14px; }
body.vitrine.tema-ambiente .ck-foto img { background: var(--areia); }
body.vitrine.tema-ambiente .ck-resumo { border-color: var(--linha); border-top: 4px solid var(--loja); border-radius: 14px; }
body.vitrine.tema-ambiente .ck-valores .ck-tot { color: var(--titulos); font-weight: 800; }
body.vitrine.tema-ambiente .ck-finalizar { border-radius: 12px !important; }
.am-garantias { list-style: none; margin: 4px 0 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 12px; background: var(--areia); font-size: 13px; color: #4b5d5b; }
.am-garantias i { color: var(--loja); margin-right: 6px; }
.am-duvida { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px; border: 1.5px solid #25d366; border-radius: 10px; color: #128c4a !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.am-duvida:hover { background: #effbf3; }
body.vitrine.tema-ambiente .co-bloco { border-color: var(--linha); border-top: 4px solid var(--loja); border-radius: 14px; }
body.vitrine.tema-ambiente .co-bloco h2 { color: var(--titulos); font-weight: 800; }
body.vitrine.tema-ambiente .co-bloco h2 span { border-radius: 8px; }
body.vitrine.tema-ambiente .co-campos input { border-radius: 10px; }
body.vitrine.tema-ambiente .co-opcao { border-radius: 12px; }

@media (max-width: 1100px) {
	.am-rodape-grade { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 767px) {
	.tema-ambiente .vt-secao-cab h2 { font-size: 21px; }
	.tema-ambiente .vt-secao-cab h2::before, .tema-ambiente .vt-secao-cab h2::after { width: 18px; }
	.tema-ambiente .hdl-mos-colunas4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.tema-ambiente .hdl-mos-sobre a b { font-size: 15px; left: 12px; bottom: 12px; }
	.tema-ambiente .hdl-mos-sobre a::after { width: 30px; height: 30px; right: 10px; bottom: 10px; }
	.tema-ambiente .vt-vantagens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tema-ambiente .vt-vantagens > * { border-bottom: 1px solid var(--linha); }
	.am-rodape-grade { grid-template-columns: 1fr 1fr; }
	body.vitrine.tema-ambiente .co-passos li + li { padding-left: 30px; }
	body.vitrine.tema-ambiente .co-passos li + li::after { width: 16px; left: 7px; }
	body.vitrine.tema-ambiente .pd-nome .nome span { font-size: 23px; }
}