/* Tema Trilha: aventura ao ar livre - verde-floresta do topo, areia, cor da loja (laranja no padrao), titulos condensados,
   curvas de nivel de mapa, serra no topo, montanhas e placas de trilha no rodape. Carregado depois do CSS do Vitrine. */

.tema-trilha { --tr-mata: var(--topo, #22432c); --tr-areia: #efe9dc; --tr-linha: #ddd4c0; --tr-tinta: var(--titulos, #22432c);
	--tr-curvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M-10 80c40-40 90-50 130-20s90 30 130-10'/%3E%3Cpath d='M-10 100c45-40 95-45 135-15s85 25 125-12'/%3E%3Cpath d='M-10 120c50-38 100-40 140-10s80 20 120-14'/%3E%3Cpath d='M-10 60c35-40 85-55 125-25s95 35 135-6'/%3E%3Cpath d='M60 40c20-14 45-14 60 0s-10 30-30 28-45-14-30-28z'/%3E%3C/g%3E%3C/svg%3E"); }
body.vitrine.tema-trilha h1, body.vitrine.tema-trilha h2, body.vitrine.tema-trilha h3 { font-family: var(--fonte-titulos), var(--fonte), sans-serif; font-weight: 600 !important; letter-spacing: .02em; }

/* titulos das secoes: condensados, com um pequeno pico de montanha antes */
.tema-trilha .vt-secao-cab { align-items: center; margin-bottom: 20px; }
.tema-trilha .vt-secao-cab h2 { display: flex; align-items: center; gap: 12px; font-size: 30px; color: var(--tr-tinta); }
.tema-trilha .vt-secao-cab h2::before { content: ""; width: 30px; height: 18px; flex: none; border-radius: 0; background: var(--loja); clip-path: polygon(0 100%, 35% 20%, 52% 55%, 70% 0, 100% 100%); }
.tema-trilha .vt-secao-cab a { font-weight: 700; color: var(--loja) !important; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

/* cartao: areia, borda fina, selo como marcador de trilha */
.tema-trilha .vt-card { border: 1px solid var(--tr-linha); border-radius: 6px; background: #fff; }
.tema-trilha .vt-card:hover { border-color: var(--tr-mata); box-shadow: 0 12px 26px rgba(34, 67, 44, .14); }
.tema-trilha .vt-card-img { background: var(--tr-areia); }
.tema-trilha .vt-card-img img { object-fit: contain; padding: 12px; mix-blend-mode: multiply; }
.tema-trilha .vt-card-nome { font-weight: 700; color: var(--tr-tinta); }
.tema-trilha .vt-card-preco strong { font-family: var(--fonte-titulos), sans-serif; font-size: 22px; font-weight: 600; color: var(--tr-tinta); }
.tema-trilha .vt-card-botao { border-radius: 6px; background: var(--tr-mata); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tema-trilha .vt-card:hover .vt-card-botao { background: var(--loja); }
.tema-trilha .vt-selo { border-radius: 4px; background: var(--loja); color: #fff; font-weight: 800; letter-spacing: .02em; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.tema-trilha .vt-selo.cinza { background: var(--tr-mata); }

/* vantagens; roteiros (bloco HTML tr-roteiros) */
.tema-trilha .vt-vantagens > * { border: 1px solid var(--tr-linha); border-radius: 6px; background: #fff; }
.tema-trilha .vt-vantagens i { border-radius: 6px; background: var(--tr-areia); color: var(--loja); }
.tr-roteiros-tit { margin: 0 0 18px; font-size: 30px; color: var(--titulos, #22432c); text-transform: uppercase; }
.tr-roteiros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tr-roteiros a { position: relative; display: grid; gap: 6px; padding: 24px 24px 26px; border-radius: 6px; background: var(--topo, #22432c) var(--tr-curvas) 0 0 / 240px 160px; color: #f3eee2 !important; text-decoration: none !important; overflow: hidden; transition: transform .2s; }
.tr-roteiros a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--topo, #22432c) 70%, transparent), var(--topo, #22432c)); }
.tr-roteiros a > * { position: relative; }
.tr-roteiros a:hover { transform: translateY(-4px); }
.tr-roteiros small { color: var(--loja); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tr-roteiros b { font-family: var(--fonte-titulos), sans-serif; font-weight: 600; font-size: 24px; text-transform: uppercase; color: #fff; }
.tr-roteiros span { opacity: .85; }

/* banners com texto, imagem e texto, blog, avaliacoes, newsletter */
.tema-trilha .hdl-hero h2 { font-family: var(--fonte-titulos), sans-serif; font-weight: 600; text-transform: uppercase; }
.tema-trilha .hdl-hero .vt-botao { border-radius: 6px; background: var(--loja) !important; color: #fff !important; font-weight: 700; text-transform: uppercase; }
.tema-trilha .hdl-it-img img { border-radius: 6px; }
.tema-trilha .hdl-it-txt h2 { font-size: 38px; color: var(--tr-tinta); text-transform: uppercase; }
.tema-trilha .vt-blog a { border: 1px solid var(--tr-linha); border-radius: 6px; }
.tema-trilha .vt-blog strong { font-weight: 800; color: var(--tr-tinta); }
.tema-trilha .hdl-depo figure { border: 0; border-left: 4px solid var(--loja); border-radius: 0; background: #fff; }
.tema-trilha .hdl-depo-nota { color: var(--loja); }
body.vitrine.tema-trilha .vt-news { background: var(--loja); }
body.vitrine.tema-trilha .vt-news h3 { text-transform: uppercase; }
body.vitrine.tema-trilha .vt-news-campo, body.vitrine.tema-trilha .vt-news-campo input, body.vitrine.tema-trilha .vt-news-campo button { border-radius: 6px; }
body.vitrine.tema-trilha .vt-news-campo button { background: var(--tr-mata); text-transform: uppercase; }

/* ---------- topo proprio (topo.php): verde-floresta, curvas de nivel e serra ---------- */
.tr-topo { position: relative; z-index: 30; }
.tr-topo .vt-marca img { width: auto; height: var(--logo-altura, 50px); max-width: 230px; border: 0; border-radius: 0; background: none; object-fit: contain; }
body.vitrine .tr-topo .vt-barra .vt-acao, body.vitrine .tr-topo .vt-barra .vt-icone { color: var(--topo-texto, #f3eee2) !important; }
body.vitrine .tr-topo .vt-barra .vt-acao small { color: color-mix(in srgb, var(--topo-texto, #f3eee2) 70%, transparent) !important; }
body.vitrine .tr-topo .vt-barra .vt-acao:hover { background: rgba(255, 255, 255, .08); }
body.vitrine .tr-topo .vt-sacola .shop-bag i { color: var(--topo-texto, #f3eee2) !important; }
.tr-topo .vt-acao > i { color: var(--loja); }
.tr-topo .vt-sacola .counter { border-color: var(--topo, #22432c); }
body.vitrine .tr-topo .vt-busca input { height: 46px; border: 0; border-radius: 6px; background: #fff; }
body.vitrine .tr-topo .vt-busca button { border-radius: 5px; height: 38px; font-weight: 800; text-transform: uppercase; }
.tr-serra { display: block; width: 100%; height: 18px; position: absolute; left: 0; bottom: -17px; fill: color-mix(in srgb, var(--topo, #22432c) 82%, #000); pointer-events: none; }
@media (min-width: 992px) {
	body.vitrine .tr-topo .vt-menu { background: color-mix(in srgb, var(--topo, #22432c) 82%, #000) var(--tr-curvas) 0 0 / 240px 160px; border: 0; }
	body.vitrine .tr-topo .vt-menu > .container > a, body.vitrine .tr-topo .vt-menu-cat > a, body.vitrine .tr-topo .vt-menu-dep-link { color: #f3eee2 !important; font-family: var(--fonte-titulos), sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; border-radius: 4px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
	body.vitrine .tr-topo .vt-menu-cat > a > .lni-chevron-down { display: none; }
	body.vitrine .tr-topo .vt-menu > .container > a:hover, body.vitrine .tr-topo .vt-menu-cat:hover > a { background: rgba(255, 255, 255, .08); color: #fff !important; }
	body.vitrine .tr-topo .vt-menu-dep-link { background: var(--loja) !important; }
	body.vitrine .tr-topo .vt-menu a.vt-ofertas { margin-left: auto; color: var(--loja) !important; }
	body.vitrine .tr-topo .vt-mega-painel, body.vitrine .tr-topo .vt-menu-cat-lista, body.vitrine .tr-topo .vt-menu-dep-lista { border-radius: 6px; border-top: 3px solid var(--loja); }
	body.vitrine .tr-topo .vt-mega-painel a, body.vitrine .tr-topo .vt-menu-cat-lista a, body.vitrine .tr-topo .vt-menu-dep-lista a { color: var(--tr-tinta) !important; font-family: var(--fonte), sans-serif; text-transform: none; letter-spacing: 0; background: transparent; }
}
@media (max-width: 991px) { .tr-serra { fill: var(--topo, #22432c); } }

/* ---------- rodape proprio (rodape.php): montanhas e placas de trilha ---------- */
.tr-rodape { position: relative; margin-top: 90px; padding-top: 10px; }
.tr-montanhas { position: absolute; left: 0; top: -98px; width: 100%; height: 100px; }
.tr-montanhas .tr-m1 { fill: color-mix(in srgb, var(--rodape, #1a3322) 70%, #6b8f6f); }
.tr-montanhas .tr-m2 { fill: var(--rodape, #1a3322); }
.vt-news + .tr-rodape { margin-top: 96px; }
.tr-placas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; padding: 16px 15px 26px; }
.tr-placas span { position: relative; padding: 10px 30px 10px 18px; background: #8a5a2b; color: #fff4e0; font-family: var(--fonte-titulos), sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.tr-placas span:nth-child(even) { padding: 10px 18px 10px 30px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.tr-rodape h3 { font-family: var(--fonte-titulos), sans-serif !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; color: var(--loja) !important; }
.tr-rodape-escuro .vt-marca img { filter: brightness(0) invert(1); }
.tr-rodape .vt-redes a { border-radius: 6px; }
.tr-rodape .vt-redes a:hover { background: var(--loja); }
.tr-rodape .vt-pags span { border-radius: 4px; }

/* ---------- pagina do produto ---------- */
body.vitrine.tema-trilha .rowtitle .title-icon { display: none; }
body.vitrine.tema-trilha .single-produto { border-radius: 6px; }
body.vitrine.tema-trilha .single-produto .galeria { border: 1px solid var(--tr-linha); border-radius: 6px !important; background: var(--tr-areia); }
body.vitrine.tema-trilha .produto-detalhes .pd-nome { display: block !important; margin-bottom: 6px; }
body.vitrine.tema-trilha .pd-nome .nome span { font-family: var(--fonte-titulos), sans-serif; font-size: 34px; font-weight: 600; line-height: 1.1; text-transform: uppercase; color: var(--tr-tinta); }
body.vitrine.tema-trilha .produto-detalhes .valor, body.vitrine.tema-trilha .produto-detalhes .valor span { font-family: var(--fonte-titulos), sans-serif; font-size: 36px !important; font-weight: 600 !important; color: var(--tr-tinta) !important; }
body.vitrine.modo-loja.tema-trilha .line-variacao .thelabel { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; }
body.vitrine.modo-loja.tema-trilha .line-variacao .opcao { border-radius: 6px !important; border: 1.5px solid var(--tr-linha) !important; }
body.vitrine.modo-loja.tema-trilha .line-variacao .opcao.active { background: var(--tr-mata) !important; border-color: var(--tr-mata) !important; }
body.vitrine.modo-loja.tema-trilha .line-variacao .opcao.active .titulo, body.vitrine.modo-loja.tema-trilha .line-variacao .opcao.active small { color: #fff !important; }
body.vitrine.tema-trilha .subtotal-adicionar .col-md-6 { width: 100%; float: none; }
body.vitrine.tema-trilha .sacola-adicionar { display: flex !important; align-items: center; justify-content: center; gap: 10px; float: none !important; width: 100%; height: 58px; margin-top: 12px; border-radius: 6px !important; font-family: var(--fonte-titulos), sans-serif; font-size: 19px; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; }
body.vitrine.tema-trilha .pa-abas { border-bottom: 2px solid var(--tr-linha); }
body.vitrine.tema-trilha .pa-abas a, body.vitrine.tema-trilha .pa-abas button { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
body.vitrine.tema-trilha .pa-abas .ativa { color: var(--loja) !important; box-shadow: inset 0 -3px 0 var(--loja); }

/* ---------- carrinho (carrinho.php) e finalizar compra ---------- */
body.vitrine.tema-trilha .ck h1 { font-family: var(--fonte-titulos), sans-serif; font-size: 38px; text-transform: uppercase; color: var(--tr-tinta); }
body.vitrine.tema-trilha .co-passos .atual { color: var(--loja); }
body.vitrine.tema-trilha .ck-item, body.vitrine.tema-trilha .co-bloco { border: 1px solid var(--tr-linha); border-radius: 6px; }
body.vitrine.tema-trilha .ck-foto img { background: var(--tr-areia); }
body.vitrine.tema-trilha .co-bloco h2, body.vitrine.tema-trilha .ck-resumo h2 { font-family: var(--fonte-titulos), sans-serif; text-transform: uppercase; color: var(--tr-tinta); }
body.vitrine.tema-trilha .co-bloco h2 span { background: var(--loja); border-radius: 4px; }
body.vitrine.tema-trilha .ck-resumo { border: 0; border-radius: 6px; background: var(--tr-areia); border-top: 4px solid var(--tr-mata); }
body.vitrine.tema-trilha .ck-valores .ck-tot { font-family: var(--fonte-titulos), sans-serif; font-weight: 600; color: var(--tr-tinta); }
body.vitrine.tema-trilha .ck-finalizar { border-radius: 6px !important; text-transform: uppercase; }
body.vitrine.tema-trilha .ck-qtd, body.vitrine.tema-trilha .ck-linha-form input, body.vitrine.tema-trilha .ck-linha-form button, body.vitrine.tema-trilha .co-campos input, body.vitrine.tema-trilha .co-opcao, body.vitrine.tema-trilha .ck-frete { border-radius: 6px !important; }
.tr-frete { padding: 16px 22px 26px; border: 1px solid var(--tr-linha, #ddd4c0); border-radius: 6px; background: #fff; }
.tr-frete p { margin: 0 0 22px; font-weight: 700; }
.tr-frete p b { color: var(--loja); }
.tr-caminho { position: relative; height: 4px; margin-right: 36px; background: repeating-linear-gradient(90deg, #cfc4ab 0 10px, transparent 10px 18px); }
.tr-caminho > i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--topo, #22432c) 0 10px, transparent 10px 18px); }
.tr-andarilho { position: absolute; top: -26px; transform: translateX(-50%); font-size: 26px; color: var(--loja); line-height: 1; transition: left .6s; }
.tr-barraca { position: absolute; right: -34px; top: -22px; width: 34px; height: 26px; background: var(--topo, #22432c); clip-path: polygon(50% 0, 100% 100%, 62% 100%, 50% 60%, 38% 100%, 0 100%); }

@media (max-width: 767px) {
	.tema-trilha .vt-secao-cab h2, .tr-roteiros-tit { font-size: 23px; }
	.tr-roteiros { grid-template-columns: 1fr; }
	body.vitrine.tema-trilha .pd-nome .nome span { font-size: 26px; }
	.tr-montanhas { top: -58px; height: 60px; }
	.tr-rodape { margin-top: 60px; }
}