/* Tema Feira: mercado e hortifruti - fundo creme, verde fresco, titulos com serifa, etiquetas de preco, toldo listrado
   de barraca de feira e papel kraft. Carregado depois do CSS do Vitrine. As cores do lojista continuam valendo. */

.tema-feira { --fe-kraft: #f3ead8; --fe-linha: #e7dfcc; --fe-tinta: var(--titulos, #1f3d2b); --fe-laranja: #f08c00; }
body.vitrine.tema-feira h1, body.vitrine.tema-feira h2, body.vitrine.tema-feira h3 { font-family: var(--fonte-titulos), Georgia, serif; }

/* titulos das secoes: a esquerda, com uma folhinha e um traco */
.tema-feira .vt-secao-cab { align-items: flex-end; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--fe-linha); }
.tema-feira .vt-secao-cab h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 900; color: var(--fe-tinta); }
.tema-feira .vt-secao-cab h2::before { content: ""; width: 26px; height: 26px; flex: none; border-radius: 0 60% 0 60%; background: var(--loja); transform: rotate(-10deg); }
.tema-feira .vt-secao-cab a { font-weight: 800; color: var(--loja) !important; }

/* cartao: branco, foto sobre branco, botao verde largo e selo de desconto em forma de etiqueta */
.tema-feira .vt-card { border: 1px solid var(--fe-linha); border-radius: 16px; background: #fff; }
.tema-feira .vt-card:hover { border-color: var(--loja); box-shadow: 0 12px 28px rgba(31, 61, 43, .12); }
.tema-feira .vt-card-img { background: #fff; }
.tema-feira .vt-card-img img { object-fit: contain; padding: 10px; }
.tema-feira .vt-card-nome { font-weight: 700; color: var(--fe-tinta); }
.tema-feira .vt-card-preco strong { font-size: 21px; font-weight: 900; color: var(--fe-tinta); }
.tema-feira .vt-card-botao { border-radius: 10px; background: var(--loja); color: #fff; font-weight: 800; }
.tema-feira .vt-card:hover .vt-card-botao { filter: brightness(.92); }
.tema-feira .vt-selo { padding: 4px 10px 4px 16px; border-radius: 4px 6px 6px 4px; background: var(--fe-laranja); font-weight: 900; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.tema-feira .vt-selo.cinza { background: var(--fe-tinta); }

/* vantagens e "como funciona" (bloco HTML fe-passos) */
.tema-feira .vt-vantagens > * { border: 1px solid var(--fe-linha); border-radius: 16px; background: #fff; }
.tema-feira .vt-vantagens i { border-radius: 50%; background: color-mix(in srgb, var(--loja) 14%, #fff); color: var(--loja); }
.fe-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 26px 10px; border-radius: 20px; background: var(--fe-kraft, #f3ead8) repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, .25) 12px 13px); }
.fe-passos p { position: relative; display: grid; justify-items: center; gap: 4px; margin: 0; padding: 0 18px; text-align: center; }
.fe-passos p + p::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 2px dashed #d4c6a6; }
.fe-passos b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--loja); color: #fff; font-size: 20px; font-weight: 900; }
.fe-passos strong { font-family: var(--fonte-titulos), Georgia, serif; font-size: 19px; color: var(--titulos, #1f3d2b); }
.fe-passos span { color: #6b6150; font-size: 14px; }

/* banners com texto, imagem e texto, blog, avaliacoes, newsletter */
.tema-feira .hdl-hero h2 { font-family: var(--fonte-titulos), Georgia, serif; font-weight: 900; color: var(--fe-tinta); }
.tema-feira .hdl-hero p { color: #4b4636; }
.tema-feira .hdl-hero .vt-botao { border-radius: 10px; background: var(--loja) !important; color: #fff !important; font-weight: 800; }
.tema-feira .hdl-it-img img { border-radius: 20px; }
.tema-feira .hdl-it-txt h2 { font-weight: 900; font-size: 34px; color: var(--fe-tinta); }
.tema-feira .vt-blog a { border: 1px solid var(--fe-linha); border-radius: 16px; }
.tema-feira .vt-blog strong { font-family: var(--fonte-titulos), Georgia, serif; color: var(--fe-tinta); }
.tema-feira .hdl-depo figure { border: 1px solid var(--fe-linha); border-radius: 16px; background: #fff; }
.tema-feira .hdl-depo-nota { color: var(--fe-laranja); }
body.vitrine.tema-feira .vt-news { background: var(--loja); }
body.vitrine.tema-feira .vt-news h3 { font-family: var(--fonte-titulos), Georgia, serif; font-weight: 900; }
body.vitrine.tema-feira .vt-news-campo { border-radius: 12px; }
body.vitrine.tema-feira .vt-news-campo input, body.vitrine.tema-feira .vt-news-campo button { border-radius: 10px; }
body.vitrine.tema-feira .vt-news-campo button { background: var(--fe-laranja); }

/* ---------- topo proprio (topo.php) ---------- */
.fe-topo .vt-aviso { font-weight: 700; }
.fe-topo .vt-marca img { width: auto; height: var(--logo-altura, 50px); max-width: 240px; border: 0; border-radius: 0; background: none; object-fit: contain; }
body.vitrine .fe-topo .vt-busca { max-width: none; }
body.vitrine .fe-topo .vt-busca input { height: 50px; border: 2px solid var(--loja); border-radius: 12px; background: #fff; }
body.vitrine .fe-topo .vt-busca button { height: 42px; border-radius: 9px; font-weight: 800; }
.fe-topo .vt-acao { border-radius: 12px; }
.fe-topo .vt-acao > i { color: var(--loja); }
.fe-topo .vt-acao small { white-space: nowrap; }
.fe-topo .vt-acao b { white-space: nowrap; }
.fe-sacola { gap: 12px !important; padding: 8px 14px !important; background: color-mix(in srgb, var(--loja) 10%, #fff); border: 1.5px solid color-mix(in srgb, var(--loja) 30%, #fff); }
body.vitrine .fe-sacola .shop-bag i { color: var(--loja) !important; }
.fe-sacola .counter { background: var(--fe-laranja); }
.fe-sacola-valor b { color: var(--fe-tinta); font-size: 15px; }
@media (min-width: 992px) {
	body.vitrine .fe-topo .vt-menu { background: var(--loja); border: 0; }
	body.vitrine .fe-topo .vt-menu a, body.vitrine .fe-topo .vt-menu .vt-menu-item, body.vitrine .fe-topo .vt-menu-dep-link { color: #fff !important; font-weight: 700; border-radius: 8px; }
	body.vitrine .fe-topo .vt-menu > .container > a:hover, body.vitrine .fe-topo .vt-menu-cat:hover > a { background: rgba(0, 0, 0, .14); }
	body.vitrine .fe-topo .vt-menu-dep-link { background: rgba(0, 0, 0, .18); padding: 8px 16px !important; margin-right: 8px; }
	body.vitrine .fe-topo .vt-menu a.vt-ofertas { margin-left: auto; background: var(--fe-laranja); }
	body.vitrine .fe-topo .vt-menu-dep-lista a, body.vitrine .fe-topo .vt-menu-cat-lista a, body.vitrine .fe-topo .vt-mega-painel a { color: var(--fe-tinta) !important; font-weight: 600; background: transparent; }
	body.vitrine .fe-topo .vt-menu-dep-lista a:hover, body.vitrine .fe-topo .vt-menu-cat-lista a:hover { color: var(--loja) !important; background: color-mix(in srgb, var(--loja) 8%, #fff); }
}

/* ---------- rodape proprio (rodape.php): toldo listrado, papel kraft, plaquinhas e etiqueta ---------- */
.fe-rodape { position: relative; margin-top: 60px; padding-top: 10px; background-image: radial-gradient(rgba(120, 90, 40, .07) 1px, transparent 1.4px); background-size: 7px 7px; }
.fe-toldo { position: absolute; left: 0; right: 0; top: -30px; height: 46px; background: repeating-linear-gradient(90deg, var(--loja) 0 40px, #fff 40px 80px);
	-webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 26px no-repeat, radial-gradient(circle at 20px 0, #000 19.5px, transparent 20.5px) 0 26px / 40px 20px repeat-x;
	mask: linear-gradient(#000, #000) 0 0 / 100% 26px no-repeat, radial-gradient(circle at 20px 0, #000 19.5px, transparent 20.5px) 0 26px / 40px 20px repeat-x; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .14)); }
.vt-news + .fe-rodape { margin-top: 44px; }
.fe-plaquinhas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 34px 0 22px; }
.fe-plaquinhas span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--fe-linha); color: var(--fe-tinta); font-weight: 700; font-size: 13.5px; box-shadow: 0 3px 0 var(--fe-linha); }
.fe-plaquinhas i { color: var(--loja); font-size: 17px; }
.fe-rodape .fe-etiqueta img { width: auto; height: 46px; max-width: 220px; padding: 12px 18px 12px 26px; box-sizing: content-box; border: 1px solid var(--fe-linha); border-radius: 6px; background: #fff; object-fit: contain; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.fe-rodape h3 { font-family: var(--fonte-titulos), Georgia, serif !important; font-weight: 900 !important; color: var(--rodape-titulo) !important; }
.fe-rodape-escuro .fe-plaquinhas span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.fe-rodape .vt-redes a { border-radius: 10px; }
.fe-rodape .vt-redes a:hover { background: var(--loja); color: #fff !important; }
.fe-rodape .vt-pags span { border-radius: 6px; background: #fff; }
.fe-rodape-escuro .vt-pags span { background: rgba(255, 255, 255, .08); }
.fe-rodape .vt-rodape-base { border-top: 1px dashed #d4c6a6; }

/* ---------- pagina do produto ---------- */
body.vitrine.tema-feira .rowtitle .title-icon { display: none; }
body.vitrine.tema-feira .single-produto .galeria { border: 1px solid var(--fe-linha); border-radius: 18px !important; background: #fff; }
body.vitrine.tema-feira .produto-detalhes .pd-nome { display: block !important; margin-bottom: 6px; }
body.vitrine.tema-feira .pd-nome .nome span { font-family: var(--fonte-titulos), Georgia, serif; font-size: 32px; font-weight: 900; line-height: 1.15; color: var(--fe-tinta); }
body.vitrine.tema-feira .pd-marca a { color: var(--loja) !important; font-weight: 700; }
body.vitrine.tema-feira .produto-detalhes .valor, body.vitrine.tema-feira .produto-detalhes .valor span { font-size: 36px !important; font-weight: 900 !important; color: var(--loja) !important; }
body.vitrine.tema-feira .produto-detalhes .valor { position: relative; display: inline-block; padding: 6px 18px 6px 30px; background: color-mix(in srgb, var(--loja) 10%, #fff); border-radius: 6px 10px 10px 6px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
body.vitrine.modo-loja.tema-feira .line-variacao .opcao { border-radius: 10px !important; border: 1.5px solid var(--fe-linha) !important; }
body.vitrine.modo-loja.tema-feira .line-variacao .opcao.active { border-color: var(--loja) !important; background: color-mix(in srgb, var(--loja) 10%, #fff) !important; }
body.vitrine.tema-feira .subtotal-adicionar .col-md-6 { width: 100%; float: none; }
body.vitrine.tema-feira .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: 12px !important; font-size: 18px; font-weight: 900 !important; }
body.vitrine.tema-feira .pa-abas { border-bottom: 2px solid var(--fe-linha); }
body.vitrine.tema-feira .pa-abas a, body.vitrine.tema-feira .pa-abas button { font-weight: 800; }
body.vitrine.tema-feira .pa-abas .ativa { color: var(--loja) !important; box-shadow: inset 0 -3px 0 var(--loja); }

/* ---------- carrinho (carrinho.php) e finalizar compra ---------- */
body.vitrine.tema-feira .ck h1 { font-family: var(--fonte-titulos), Georgia, serif; font-weight: 900; color: var(--fe-tinta); margin-bottom: 2px; }
.fe-sub { margin: 0 0 18px; color: #7a705c; font-weight: 600; }
body.vitrine.tema-feira .co-passos .atual { color: var(--loja); }
body.vitrine.tema-feira .ck-item, body.vitrine.tema-feira .co-bloco { border: 1px solid var(--fe-linha); border-radius: 16px; }
body.vitrine.tema-feira .co-bloco h2 { font-family: var(--fonte-titulos), Georgia, serif; font-weight: 900; color: var(--fe-tinta); }
body.vitrine.tema-feira .co-bloco h2 span { background: var(--loja); border-radius: 8px; }
/* resumo como folha de lista de compras: linhas, margem vermelha e furos */
body.vitrine.tema-feira .fe-lista { position: relative; padding-left: 46px; border: 0; border-radius: 6px; background: #fffdf6 repeating-linear-gradient(transparent 0 31px, #dde8f2 31px 32px); box-shadow: 0 10px 28px rgba(60, 50, 20, .12); }
body.vitrine.tema-feira .fe-lista::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; border-left: 2px solid #f2a7a7; }
body.vitrine.tema-feira .fe-lista::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: 24px; width: 12px; background: radial-gradient(circle, #e9e2cf 5px, transparent 6px) 0 0 / 12px 64px repeat-y; }
body.vitrine.tema-feira .fe-lista h2 { font-family: var(--fonte-titulos), Georgia, serif; font-weight: 900; color: var(--fe-tinta); }
body.vitrine.tema-feira .fe-lista h2 i { color: var(--loja); }
body.vitrine.tema-feira .ck-valores .ck-tot { font-weight: 900; color: var(--fe-tinta); }
body.vitrine.tema-feira .ck-finalizar { border-radius: 12px !important; font-weight: 900 !important; }
body.vitrine.tema-feira .ck-qtd, body.vitrine.tema-feira .ck-linha-form input, body.vitrine.tema-feira .ck-linha-form button, body.vitrine.tema-feira .co-campos input, body.vitrine.tema-feira .co-opcao, body.vitrine.tema-feira .ck-frete { border-radius: 10px !important; }
.fe-cesta { display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--fe-linha, #e7dfcc); }
.fe-cesta-ico { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--fe-kraft, #f3ead8); overflow: hidden; }
.fe-cesta-ico em { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--loja) 30%, transparent); transition: height .5s; }
.fe-cesta-ico i { position: relative; z-index: 1; font-size: 28px; color: var(--loja); }
.fe-cesta > div { flex: 1; display: grid; gap: 8px; }
.fe-cesta p { margin: 0; font-weight: 700; }
.fe-cesta p b { color: var(--loja); }
.fe-barra { height: 10px; border-radius: 10px; background: var(--fe-kraft, #f3ead8); overflow: hidden; }
.fe-barra i { display: block; height: 100%; border-radius: 10px; background: var(--loja); }
.fe-cheia .fe-cesta-ico { background: var(--loja); }
.fe-cheia .fe-cesta-ico i { color: #fff; }

@media (max-width: 767px) {
	.tema-feira .vt-secao-cab h2 { font-size: 21px; }
	.fe-passos { grid-template-columns: 1fr; gap: 18px; }
	.fe-passos p + p::before { display: none; }
	body.vitrine.tema-feira .pd-nome .nome span { font-size: 25px; }
	.fe-toldo { top: -26px; height: 34px; }
}