/* Tema Oficina (premium): ferramentas profissionais - grafite, verde-petroleo e aco escovado, Space Grotesk nos
   titulos, etiquetas e rebites. Carregado depois do CSS do Vitrine e do premium.css (pagina do produto premium). */

.tema-oficina { --of-tinta: var(--titulos, #16232d); --of-aco: linear-gradient(180deg, #e9edf0, #cfd6dc 50%, #e4e9ed); --of-linha: #d9dfe4; }
body.vitrine.tema-oficina h1, body.vitrine.tema-oficina h2, body.vitrine.tema-oficina h3 { font-family: var(--fonte-titulos), var(--fonte), sans-serif; font-weight: 700 !important; letter-spacing: -.01em; }

/* titulos das secoes: etiqueta com furo de pendurar */
.tema-oficina .vt-secao-cab h2 { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 34px; border-radius: 6px; background: var(--of-tinta); font-size: 22px; color: #fff; }
.tema-oficina .vt-secao-cab h2::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--fundo, #eef1f4); box-shadow: inset 0 0 0 2px var(--loja); }
.tema-oficina .vt-secao-cab a { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--loja) !important; }

/* cartao: branco, faixa petroleo no alto ao passar o mouse, ficha com o preco */
.tema-oficina .vt-card { border: 1px solid var(--of-linha); border-radius: 8px; background: #fff; overflow: hidden; border-top: 3px solid transparent; }
.tema-oficina .vt-card:hover { border-top-color: var(--loja); }
.tema-oficina .vt-card-img { background: #f1f3f5; border-radius: 0; }
.tema-oficina .vt-card-info { padding: 14px 16px 6px; }
.tema-oficina .vt-card-nome { font-weight: 600; font-size: 14px; color: var(--of-tinta); }
.tema-oficina .vt-card-preco strong { font-family: var(--fonte-titulos), sans-serif; font-size: 20px; color: var(--of-tinta); }
.tema-oficina .ppc-marca { color: var(--loja); letter-spacing: .1em; }
.tema-oficina .ppc-parc { color: var(--loja); font-weight: 600; }
.tema-oficina .vt-card-botao { margin: 0 16px 16px; border-radius: 6px; background: var(--of-tinta); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tema-oficina .vt-card:hover .vt-card-botao { background: var(--loja); }
.tema-oficina .ppc .ppc-ver { border-radius: 6px; background: var(--loja); color: #fff; }
.tema-oficina .vt-selo { border-radius: 4px; background: #f59e0b; color: var(--of-tinta); font-weight: 800; }

/* plataforma de baterias (bloco HTML of-plataforma), mosaico, banners, depoimentos, blog, newsletter */
.of-plataforma { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; padding: 36px 40px; border-radius: 10px; background: #16232d; color: #dbe3e9; }
.of-plataforma small { display: inline-block; padding: 4px 10px; border-radius: 4px; background: #0e9f8e; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.of-plataforma h2 { margin: 12px 0 10px; font-family: var(--fonte-titulos), sans-serif; font-size: 32px; line-height: 1.1; color: #fff; }
.of-plataforma p { margin: 0; color: #94a3b0; }
.of-plataforma ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.of-plataforma li { display: grid; gap: 2px; padding: 18px 20px; border-radius: 8px; background: linear-gradient(180deg, #e9edf0, #cfd6dc 50%, #e4e9ed); box-shadow: inset 0 1px 0 #fff; }
.of-plataforma li b { font-family: var(--fonte-titulos), sans-serif; font-size: 30px; line-height: 1; color: #16232d; }
.of-plataforma li span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #0e9f8e; }
.tema-oficina .hdl-mos a { border-radius: 8px !important; overflow: hidden; }
.tema-oficina .hdl-mos-img { border-radius: 0 !important; transition: transform .5s; }
.tema-oficina .hdl-mos a:hover .hdl-mos-img { transform: scale(1.06); }
.tema-oficina .hdl-mos-sobre a b { border-radius: 4px !important; background: var(--of-tinta) !important; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.tema-oficina .hdl-hero { border-radius: 10px; overflow: hidden; }
.tema-oficina .hdl-hero .vt-botao { border-radius: 6px; background: var(--loja) !important; }
.tema-oficina .hdl-it-img img { border-radius: 10px; }
.tema-oficina .hdl-it-txt h2 { font-size: 36px; color: var(--of-tinta); }
.tema-oficina .hdl-depo figure { border: 1px solid var(--of-linha); border-radius: 8px; background: #fff; }
.tema-oficina .vt-blog a { border: 1px solid var(--of-linha); border-radius: 8px; background: #fff; overflow: hidden; }
.tema-oficina .vt-blog strong { font-family: var(--fonte-titulos), sans-serif; color: var(--of-tinta); }
body.vitrine.tema-oficina .vt-news { background: var(--of-tinta); }
body.vitrine.tema-oficina .vt-news-campo button { border-radius: 6px; background: var(--loja); }
.tema-oficina .vt-vantagens > * { border: 1px solid var(--of-linha); border-radius: 8px; background: #fff; }
.tema-oficina .vt-vantagens i { border-radius: 6px; background: var(--of-aco); color: var(--of-tinta); }

/* ---------- topo proprio (topo.php): menu com a aba como etiqueta de ferramenta ---------- */
.of-topo .vt-aviso { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.of-topo .vt-marca img { width: auto; height: var(--logo-altura, 44px); max-width: 230px; border: 0; border-radius: 0; background: none; object-fit: contain; }
body.vitrine .of-topo .vt-busca input { height: 46px; border: 0; border-radius: 6px; background: #fff; }
body.vitrine .of-topo .vt-busca button { border-radius: 4px !important; background: var(--loja) !important; color: #fff !important; }
.of-topo .vt-acao { color: #fff !important; }
.of-topo .vt-acao:hover { background: rgba(255, 255, 255, .08); color: #5ee0cf !important; }
.of-topo .vt-sacola .counter { background: #f59e0b; color: var(--of-tinta); }
@media (min-width: 992px) {
	.of-topo .vt-barra .container { min-height: 84px; }
	body.vitrine .of-topo .vt-busca { max-width: 600px; margin: 0 auto; }
	body.vitrine .of-topo .vt-menu { background: var(--of-aco); border-bottom: 1px solid #b9c3cb; }
	.of-topo .vt-menu .container { justify-content: center; gap: 4px; }
	body.vitrine .of-topo .vt-menu > .container > a, body.vitrine .of-topo .vt-menu-cat > a, body.vitrine .of-topo .vt-menu-dep-link { position: relative; color: var(--of-tinta) !important; font-family: var(--fonte-titulos), sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 6px; background: transparent !important; white-space: nowrap; }
	body.vitrine .of-topo .vt-menu > .container > a:hover, body.vitrine .of-topo .vt-menu-cat:hover > a { background: var(--of-tinta) !important; color: #fff !important; }
	body.vitrine .of-topo .vt-menu a.vt-ofertas { background: #f59e0b !important; color: var(--of-tinta) !important; }
	body.vitrine .of-topo .vt-menu-dep-link { border: 0; }
	body.vitrine .of-topo .vt-menu-cat > a > .lni-chevron-down { display: none; }
	body.vitrine .of-topo .vt-mega-painel, body.vitrine .of-topo .vt-menu-cat-lista, body.vitrine .of-topo .vt-menu-dep-lista { border-radius: 8px; border: 1px solid var(--of-linha); border-top: 3px solid var(--loja); box-shadow: 0 30px 60px rgba(22, 35, 45, .18); }
	body.vitrine .of-topo .vt-mega-painel a, body.vitrine .of-topo .vt-menu-cat-lista a, body.vitrine .of-topo .vt-menu-dep-lista a { text-transform: none; font-family: var(--fonte), sans-serif; font-weight: 500; background: transparent !important; color: var(--of-tinta) !important; }
	body.vitrine .of-topo .vt-mega-prod img { border-radius: 6px; background: #f1f3f5; }
}

/* ---------- rodape proprio (rodape.php): chapa de metal com rebites ---------- */
.of-rodape { padding-top: 56px; }
.of-assinatura { display: grid; justify-items: center; padding-bottom: 42px; }
.of-chapa { position: relative; display: grid; gap: 12px; max-width: 780px; padding: 32px 52px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #c9d1d8, #9aa6b0 55%, #b9c3cb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 30px rgba(0, 0, 0, .35); text-align: center; }
.of-chapa::before, .of-chapa::after { content: ""; position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #7d8a95 60%); box-shadow: 0 calc(100% + 0px) 0 0 transparent; }
.of-chapa::before { left: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.of-chapa::after { right: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.of-chapa-frase { margin: 0; font-family: var(--fonte-titulos), sans-serif; font-size: 25px; font-weight: 700; line-height: 1.25; color: #16232d; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.of-chapa-avisos { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2d3b46; }
.of-chapa-avisos i { display: inline-block; width: 6px; height: 6px; margin: 0 10px; border-radius: 50%; background: #0e9f8e; vertical-align: 2px; }
.of-rodape h3 { font-family: var(--fonte-titulos), sans-serif !important; text-transform: uppercase; color: #fff !important; }
.of-rodape .vt-redes a { border-radius: 6px; }

/* ---------- pagina do produto premium ---------- */
.tema-oficina .pp, .tema-oficina .ppa { --pp-titulo-tam: 34px; --pp-preco-tam: 38px; --pp-raio: 8px; --pp-suave: #fff; --pp-borda: var(--of-linha); }
.tema-oficina .pp-foto, .tema-oficina .pp-mini { background: #f1f3f5; }
.tema-oficina .pp-marca { color: var(--loja); letter-spacing: .14em; }
.tema-oficina .pp-preco { border: 1px solid var(--of-linha); border-top: 4px solid var(--loja); }
.tema-oficina .pp-preco-off { background: #f59e0b; color: var(--of-tinta); border-radius: 4px; }
.tema-oficina .pp-var-nome { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.tema-oficina .pp .opcao.pp-op.active { --pp-op-borda: var(--loja); --pp-op-fundo: #e6f6f3; }
.tema-oficina .pp .pp-botao { --pp-b-sombra: 0 10px 22px rgba(14, 159, 142, .3); }
.tema-oficina .pp .pp-agora { background: var(--of-tinta); color: #fff; border-color: var(--of-tinta); }
.tema-oficina .pp .pp-agora:hover { background: #000; }
.tema-oficina .pp-garantias svg { border-radius: 8px; background: var(--of-aco); color: var(--of-tinta); }
.tema-oficina .ppa .ppa-abas button { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.tema-oficina .ppa-spec th { background: #f1f3f5; }
.tema-oficina .ppa-destaques li { background: #fff; border: 1px solid var(--of-linha); }

/* ---------- carrinho (carrinho.php): nivel de bolha ---------- */
body.vitrine.tema-oficina .ck h1 { font-size: 34px; color: var(--of-tinta); }
body.vitrine.tema-oficina .co-passos .atual { color: var(--loja); }
body.vitrine.tema-oficina .ck-item, body.vitrine.tema-oficina .co-bloco { border: 1px solid var(--of-linha); border-radius: 8px; background: #fff; }
body.vitrine.tema-oficina .ck-resumo { border: 1px solid var(--of-linha); border-top: 4px solid var(--loja); border-radius: 8px; background: #fff; }
body.vitrine.tema-oficina .ck-finalizar { border-radius: 6px !important; }
.of-frete { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid #d9dfe4; border-radius: 8px; background: #fff; }
.of-frete p { margin: 0; font-size: 14px; }
.of-frete p b { color: var(--loja); }
.of-nivel { position: relative; flex: none; width: 140px; height: 26px; border-radius: 13px; background: linear-gradient(180deg, #f6c445, #e9a514); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #16232d; }
.of-nivel::before, .of-nivel::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 2px; background: rgba(22, 35, 45, .6); }
.of-nivel::before { left: calc(50% - 14px); }
.of-nivel::after { left: calc(50% + 12px); }
.of-nivel i { position: absolute; top: 5px; width: 24px; height: 16px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #fff3c4 60%, rgba(255, 255, 255, .4)); transition: left .8s ease; }
.of-frete-ok .of-nivel { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #0e9f8e; }

@media (max-width: 991px) {
	.of-plataforma { grid-template-columns: 1fr; padding: 26px 22px; }
}
@media (max-width: 767px) {
	.tema-oficina .vt-secao-cab h2 { font-size: 18px; }
	.of-chapa { padding: 28px 30px; }
	.of-chapa-frase { font-size: 19px; }
	.of-topo .vt-marca img { height: 30px; max-width: 160px; }
	.tema-oficina .pp, .tema-oficina .ppa { --pp-titulo-tam: 26px; --pp-preco-tam: 30px; }
	.of-frete { flex-direction: column; align-items: flex-start; }
}

/* newsletter: a caixa do campo segue o formato do botao do tema (a base deixa em pilula) */
body.vitrine.tema-oficina .vt-news-campo { border-radius: 12px; }