/* Tema Batom (premium): maquiagem colorida - pink, ameixa e cores vivas, Syne nos titulos, cantos grandes,
   pontos e amostras de cor. Carregado depois do CSS do Vitrine e do premium.css (pagina do produto premium). */

.tema-batom { --bt-tinta: var(--titulos, #2a0f2e); --bt-pink: #e0245e; --bt-rosa: #fde4ee; --bt-rosa2: #fff0f6; --bt-linha: #f6d3e1; --bt-c1: #e0245e; --bt-c2: #b5122e; --bt-c3: #d99a8c; --bt-c4: #6d1236; --bt-c5: #ff6f59; --bt-c6: #8a4fff; }

/* titulos das secoes: Syne forte com um risco de batom embaixo */
.tema-batom .vt-secao-cab { align-items: flex-end; margin-bottom: 24px; }
.tema-batom .vt-secao-cab h2 { position: relative; padding-bottom: 10px; font-size: 34px; font-weight: 700 !important; letter-spacing: -.01em; color: var(--bt-tinta); }
.tema-batom .vt-secao-cab h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 7px; border-radius: 6px 30px 6px 30px; background: var(--bt-pink); transform: rotate(-2deg); }
.tema-batom .vt-secao-cab a { color: var(--bt-pink) !important; font-weight: 700; }

/* cartao: foto rosa, cantos grandes, botao pink */
.tema-batom .vt-card { border: 0; background: transparent; box-shadow: none !important; }
.tema-batom .vt-card-img { border-radius: 28px; background: var(--bt-rosa); }
.tema-batom .vt-card-info { padding: 14px 4px 4px; }
.tema-batom .vt-card-nome { font-size: 14.5px; font-weight: 600; color: #4a2b47; }
.tema-batom .vt-card-preco strong { font-family: var(--fonte-titulos), sans-serif; font-size: 20px; font-weight: 700; color: var(--bt-tinta); }
.tema-batom .ppc-marca { color: var(--bt-pink); font-weight: 700; letter-spacing: .1em; }
.tema-batom .vt-card-botao { border-radius: 999px; background: var(--bt-tinta); color: #fff; font-weight: 700; }
.tema-batom .vt-card:hover .vt-card-botao { background: var(--bt-pink); color: #fff; }
.tema-batom .ppc .ppc-ver { border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--bt-tinta); }
.tema-batom .vt-selo { border-radius: 999px; background: var(--bt-pink); color: #fff; font-weight: 700; }

/* cartela de tons (bloco Destaques) */
.bt-cartela { display: grid; justify-items: center; gap: 24px; padding: 44px 32px; border-radius: 40px; background: #2a0f2e; text-align: center; }
.bt-cartela-cab { display: grid; gap: 6px; }
.bt-cartela-cab small { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff8fb4; }
body.vitrine .bt-cartela-cab h2 { margin: 0; font-family: var(--fonte-titulos), sans-serif; font-size: 36px; font-weight: 700; color: #fff; }
.bt-cartela-cab p { margin: 0; color: #e9c6d6; }
.bt-tons { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; width: 100%; }
.bt-tom { display: grid; justify-items: center; gap: 4px; width: 140px; color: #fff; text-decoration: none; }
.bt-amostra { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 8px; border-radius: 50%; background: var(--bt-c1) center / cover; box-shadow: inset -10px -14px 0 rgba(0, 0, 0, .14), inset 10px 10px 0 rgba(255, 255, 255, .16); transition: transform .25s; }
.bt-tom:nth-child(6n+2) .bt-amostra { background-color: var(--bt-c2); }
.bt-tom:nth-child(6n+3) .bt-amostra { background-color: var(--bt-c3); }
.bt-tom:nth-child(6n+4) .bt-amostra { background-color: var(--bt-c4); }
.bt-tom:nth-child(6n+5) .bt-amostra { background-color: var(--bt-c5); }
.bt-tom:nth-child(6n) .bt-amostra { background-color: var(--bt-c6); }
.bt-amostra b { font-family: var(--fonte-titulos), sans-serif; font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, .92); }
a.bt-tom:hover .bt-amostra { transform: translateY(-6px) rotate(-6deg); }
.bt-tom strong { font-size: 15px; }
.bt-tom span { font-size: 13px; color: #e9c6d6; }
.bt-cartela-botao { display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 999px; background: var(--bt-c1); color: #fff !important; font-weight: 700; text-decoration: none; }
.bt-cartela-botao:hover { background: #fff; color: #2a0f2e !important; }

/* mosaico, banners, depoimentos, blog, newsletter */
.tema-batom .hdl-mos-img { border-radius: 28px !important; }
.tema-batom .hdl-mos-sobre a b { left: 50% !important; transform: translateX(-50%); bottom: 12px !important; border-radius: 999px !important; background: #fff !important; color: var(--bt-tinta); font-family: var(--fonte-titulos), sans-serif; font-weight: 700; box-shadow: none !important; white-space: nowrap; }
.tema-batom .hdl-hero { border-radius: 32px; overflow: hidden; }
.tema-batom .hdl-hero .vt-botao { border-radius: 999px; }
.tema-batom .hdl-it-img img { border-radius: 50% 50% 32px 32px; }
.tema-batom .hdl-it-txt h2 { font-size: 40px; color: var(--bt-tinta); }
.tema-batom .hdl-depo figure { border: 0; border-radius: 28px; background: var(--bt-rosa2); }
.tema-batom .vt-blog a { border: 0; border-radius: 28px; background: #fff; overflow: hidden; }
.tema-batom .vt-blog strong { font-family: var(--fonte-titulos), sans-serif; font-weight: 700; color: var(--bt-tinta); }
body.vitrine.tema-batom .vt-news { border-radius: 36px; background: var(--bt-pink); color: #fff; }
body.vitrine.tema-batom .vt-news h3 { color: #fff !important; }
body.vitrine.tema-batom .vt-news p { color: #ffe3ed; }
body.vitrine.tema-batom .vt-news-campo { border-radius: 999px; }
body.vitrine.tema-batom .vt-news-campo button { border-radius: 999px; background: var(--bt-tinta); }
.tema-batom .vt-vantagens > * { border: 0; border-radius: 24px; background: var(--bt-rosa2); }
.tema-batom .vt-vantagens i { border-radius: 50%; background: #fff; color: var(--bt-pink); }

/* ---------- topo proprio (topo.php): branco, busca em pilula e pontos de cor no menu ---------- */
.bt-topo .vt-marca img { width: auto; height: var(--logo-altura, 56px); max-width: 230px; border: 0; border-radius: 0; background: none; object-fit: contain; mix-blend-mode: multiply; }
body.vitrine .bt-topo .vt-busca input { height: 46px; border: 2px solid #f6d3e1; border-radius: 999px; background: #fff8fb; }
body.vitrine .bt-topo .vt-busca input:focus { border-color: #e0245e; box-shadow: none; }
body.vitrine .bt-topo .vt-busca button { border-radius: 999px !important; background: #e0245e !important; color: #fff !important; }
.bt-topo .vt-acao { color: #2a0f2e !important; }
.bt-topo .vt-acao:hover { background: #fde4ee; color: #e0245e !important; }
.bt-topo .vt-sacola .counter { background: #e0245e; color: #fff; }
@media (min-width: 992px) {
	.bt-topo .vt-barra .container { min-height: 88px; }
	body.vitrine .bt-topo .vt-busca { flex: 1 1 460px; max-width: 520px; margin: 0 auto; }
	body.vitrine .bt-topo .vt-menu { background: #fff; border-top: 1px solid #f6d3e1; border-bottom: 1px solid #f6d3e1; }
	.bt-topo .vt-menu .container { justify-content: center; gap: 6px; }
	body.vitrine .bt-topo .vt-menu > .container > a, body.vitrine .bt-topo .vt-menu-cat > a, body.vitrine .bt-topo .vt-menu-dep-link { position: relative; color: #2a0f2e !important; font-size: 15px; font-weight: 600; background: transparent !important; white-space: nowrap; }
	body.vitrine .bt-topo .vt-menu > .container > a::after, body.vitrine .bt-topo .vt-menu-cat > a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #e0245e; transform: scale(0); transition: transform .2s; }
	body.vitrine .bt-topo .vt-menu > .container > :nth-child(6n+2) > a::after, body.vitrine .bt-topo .vt-menu > .container > a:nth-child(6n+2)::after { background: #ff6f59; }
	body.vitrine .bt-topo .vt-menu > .container > :nth-child(6n+3) > a::after, body.vitrine .bt-topo .vt-menu > .container > a:nth-child(6n+3)::after { background: #8a4fff; }
	body.vitrine .bt-topo .vt-menu > .container > :nth-child(6n+4) > a::after, body.vitrine .bt-topo .vt-menu > .container > a:nth-child(6n+4)::after { background: #14b8a6; }
	body.vitrine .bt-topo .vt-menu > .container > :nth-child(6n+5) > a::after, body.vitrine .bt-topo .vt-menu > .container > a:nth-child(6n+5)::after { background: #f5b301; }
	body.vitrine .bt-topo .vt-menu > .container > a:hover::after, body.vitrine .bt-topo .vt-menu-cat:hover > a::after { transform: scale(1); }
	body.vitrine .bt-topo .vt-menu > .container > a:hover, body.vitrine .bt-topo .vt-menu-cat:hover > a { color: #e0245e !important; }
	body.vitrine .bt-topo .vt-menu a.vt-ofertas { color: #e0245e !important; font-weight: 800; }
	body.vitrine .bt-topo .vt-menu-cat > a > .lni-chevron-down { display: none; }
	body.vitrine .bt-topo .vt-mega-painel, body.vitrine .bt-topo .vt-menu-cat-lista, body.vitrine .bt-topo .vt-menu-dep-lista { border: 2px solid #f6d3e1; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(42, 15, 46, .14); }
	body.vitrine .bt-topo .vt-mega-painel a, body.vitrine .bt-topo .vt-menu-cat-lista a, body.vitrine .bt-topo .vt-menu-dep-lista a { color: #2a0f2e !important; }
	body.vitrine .bt-topo .vt-mega-painel a::after, body.vitrine .bt-topo .vt-menu-cat-lista a::after { display: none; }
	body.vitrine .bt-topo .vt-mega-prod img { border-radius: 20px; background: #fde4ee; }
}

/* ---------- rodape proprio (rodape.php): frase grande, risco de batom e pilulas coloridas ---------- */
.bt-rodape { padding-top: 56px; }
.bt-assinatura { display: grid; justify-items: center; gap: 14px; padding-bottom: 44px; text-align: center; }
.bt-frase { max-width: 780px; margin: 0; font-family: var(--fonte-titulos), sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; color: #fff; }
.bt-risco { display: block; width: 150px; height: 12px; border-radius: 8px 40px 8px 40px; background: #e0245e; transform: rotate(-2deg); }
.bt-cores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.bt-cores li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #f6dbe7; font-size: 13px; }
.bt-cores li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #e0245e; }
.bt-cores li:nth-child(3n+2)::before { background: #ff6f59; }
.bt-cores li:nth-child(3n)::before { background: #8a4fff; }
.bt-rodape h3 { font-family: var(--fonte-titulos), sans-serif !important; color: #fff !important; }
.bt-rodape .vt-redes a { border-radius: 50%; }

/* ---------- pagina do produto premium ---------- */
.tema-batom .pp, .tema-batom .ppa { --pp-titulo-tam: 36px; --pp-preco-tam: 32px; --pp-raio: 26px; --pp-raio-botao: 999px; --pp-suave: var(--bt-rosa); --pp-borda: var(--bt-linha); --pp-acento: var(--bt-pink); }
.tema-batom .pp-nome { font-weight: 700; letter-spacing: -.01em; }
.tema-batom .pp-marca { color: var(--bt-pink); font-weight: 700; letter-spacing: .14em; }
.tema-batom .pp-foto, .tema-batom .pp-mini { background: var(--bt-rosa); }
.tema-batom .pp-preco { background: var(--bt-rosa2); border: 0; }
.tema-batom .pp-preco-valor { font-family: var(--fonte-titulos), sans-serif; font-weight: 700; }
.tema-batom .pp-preco-off { border-radius: 999px; background: var(--bt-pink); color: #fff; }
.tema-batom .pp .opcao.pp-op.active { --pp-op-borda: var(--bt-pink); --pp-op-fundo: var(--bt-pink); --pp-op-cor: #fff; }
.tema-batom .pp .pp-var-cores .opcao.pp-op.active { --pp-op-fundo: #fff; --pp-op-cor: var(--bt-tinta); }
.tema-batom .pp .pp-botao { background: var(--bt-pink); color: #fff; --pp-b-sombra: 0 12px 24px rgba(224, 36, 94, .3); --pp-b-peso: 700; }
.tema-batom .pp .pp-botao:hover { background: #c01a4f; color: #fff; }
.tema-batom .pp .pp-agora { border-color: var(--bt-tinta); color: var(--bt-tinta); }
.tema-batom .pp .pp-agora:hover { background: var(--bt-tinta); color: #fff; }
.tema-batom .pp-selo { border-radius: 999px; background: var(--bt-pink); color: #fff; }
.tema-batom .pp-garantias svg { border-radius: 50%; background: var(--bt-rosa); color: var(--bt-pink); }
.tema-batom .ppa .ppa-titulo { font-family: var(--fonte-titulos), sans-serif; font-size: 22px; font-weight: 700; }
.tema-batom .ppa-destaques li { background: var(--bt-rosa2); border: 0; border-radius: 20px; }
.tema-batom .ppa-destaques li::before { background-color: var(--bt-pink); }

/* ---------- carrinho (carrinho.php): batom subindo do tubo ---------- */
body.vitrine.tema-batom .ck h1 { font-size: 40px; color: var(--bt-tinta); }
body.vitrine.tema-batom .co-passos .atual { color: var(--bt-pink); }
body.vitrine.tema-batom .ck-item, body.vitrine.tema-batom .co-bloco { border: 1px solid var(--bt-linha); border-radius: 26px; background: #fff; }
body.vitrine.tema-batom .ck-foto img { background: var(--bt-rosa); border-radius: 20px; }
body.vitrine.tema-batom .ck-resumo { border: 0; border-radius: 30px; background: var(--bt-rosa2); }
body.vitrine.tema-batom .ck-finalizar { border-radius: 999px !important; background: #e0245e !important; color: #fff !important; }
.bt-frete { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; padding: 16px 20px; border-radius: 26px; background: #fff; border: 1px solid #f6d3e1; }
.bt-frete p { grid-column: 2; margin: 0; font-size: 14px; }
.bt-frete p b { color: #e0245e; }
.bt-batom { grid-row: 1 / span 2; position: relative; display: block; width: 26px; height: 64px; }
.bt-batom i { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; border-radius: 4px; background: linear-gradient(90deg, #c9a14a, #f3d98b 45%, #b88a35); }
.bt-batom b { position: absolute; left: 4px; right: 4px; bottom: 28px; height: calc(4px + var(--bt-p, 0) * .3px); border-radius: 10px 2px 0 0; background: linear-gradient(90deg, #b5123f, #e0245e 50%, #a30f38); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); transition: height .6s ease; }
.bt-barra { grid-column: 2; display: block; height: 8px; border-radius: 999px; background: #fde4ee; overflow: hidden; }
.bt-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e0245e, #ff6f59); transition: width .6s ease; }

@media (max-width: 767px) {
	.tema-batom .vt-secao-cab h2 { font-size: 26px; }
	.bt-cartela { padding: 28px 14px; border-radius: 28px; }
	body.vitrine .bt-cartela-cab h2 { font-size: 27px; }
	.bt-tons { gap: 16px 10px; }
	.bt-tom { width: 96px; }
	.bt-amostra { width: 74px; height: 74px; }
	.bt-amostra b { font-size: 17px; }
	.bt-frase { font-size: 25px; }
	.bt-topo .vt-marca img { height: 40px; max-width: 160px; }
	.tema-batom .pp, .tema-batom .ppa { --pp-titulo-tam: 27px; --pp-preco-tam: 28px; }
}
