/* Tema Patinha: divertido para petshops - roxo do topo, cor da loja (coral no padrao), formas organicas de bolha e
   patinhas desenhadas. Carregado depois do CSS do Vitrine. As cores do lojista continuam valendo (--loja, --topo...). */

.tema-patinha { --pt-roxo: var(--topo, #5b2bd9); --pt-lilas: #f1ecff; --pt-tinta: var(--titulos, #2e1a73);
	--pt-pata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='5.2' ry='4.4'/%3E%3Ccircle cx='5.6' cy='10' r='2.3'/%3E%3Ccircle cx='9.6' cy='6.2' r='2.3'/%3E%3Ccircle cx='14.4' cy='6.2' r='2.3'/%3E%3Ccircle cx='18.4' cy='10' r='2.3'/%3E%3C/svg%3E"); }
body.vitrine.tema-patinha h1, body.vitrine.tema-patinha h2, body.vitrine.tema-patinha h3 { font-family: var(--fonte-titulos), var(--fonte), sans-serif; }

/* titulos das secoes: uma patinha na cor da loja antes */
.tema-patinha .vt-secao-cab { align-items: center; margin-bottom: 20px; }
.tema-patinha .vt-secao-cab h2 { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 800; color: var(--pt-tinta); }
.tema-patinha .vt-secao-cab h2::before { content: ""; width: 28px; height: 28px; flex: none; border-radius: 0; background: var(--loja); -webkit-mask: var(--pt-pata) center / contain no-repeat; mask: var(--pt-pata) center / contain no-repeat; transform: rotate(-18deg); }
.tema-patinha .vt-secao-cab a { font-weight: 800; color: var(--pt-roxo) !important; }

/* cartao: foto num fundo lilas com canto em bolha, botao roxo, selo coral redondo */
.tema-patinha .vt-card { border: 0; border-radius: 24px; background: #fff; box-shadow: 0 6px 20px rgba(46, 26, 115, .08); }
.tema-patinha .vt-card:hover { box-shadow: 0 14px 32px rgba(46, 26, 115, .16); }
.tema-patinha .vt-card-img { margin: 8px 8px 0; border-radius: 40px 18px 40px 18px; background: var(--pt-lilas); overflow: hidden; }
.tema-patinha .vt-card-img img { mix-blend-mode: multiply; object-fit: contain; padding: 8px; }
.tema-patinha .vt-card-nome { font-weight: 700; color: var(--pt-tinta); }
.tema-patinha .vt-card-preco strong { font-family: var(--fonte-titulos), sans-serif; font-size: 21px; font-weight: 800; color: var(--pt-roxo); }
.tema-patinha .vt-card-botao { border-radius: 999px; background: var(--pt-roxo); color: #fff; font-weight: 800; }
.tema-patinha .vt-card:hover .vt-card-botao { background: var(--loja); }
.tema-patinha .vt-selo { width: 50px; height: 50px; padding: 0; display: grid; place-items: center; border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; background: var(--loja); font-weight: 800; }
.tema-patinha .vt-selo.cinza { background: var(--pt-roxo); }

/* vantagens; "escolha o pet" (bloco HTML pt-escolha) */
.tema-patinha .vt-vantagens > * { border: 0; border-radius: 22px; background: #fff; }
.tema-patinha .vt-vantagens i { border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; background: var(--pt-lilas); color: var(--pt-roxo); }
.pt-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pt-escolha a { position: relative; display: flex; align-items: center; gap: 22px; min-height: 170px; padding: 18px 30px 18px 18px; border-radius: 34px; overflow: hidden; text-decoration: none !important; color: #fff !important; background: var(--topo, #5b2bd9); }
.pt-escolha a.pt-gato { background: var(--loja); }
.pt-escolha a::after { content: ""; position: absolute; right: -20px; bottom: -30px; width: 170px; height: 170px; background: rgba(255, 255, 255, .12); -webkit-mask: var(--pt-pata) center / contain no-repeat; mask: var(--pt-pata) center / contain no-repeat; transform: rotate(-20deg); }
.pt-escolha img { width: 140px; height: 140px; flex: none; object-fit: cover; border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; border: 5px solid rgba(255, 255, 255, .85); transition: transform .3s; }
.pt-escolha a:hover img { transform: rotate(-6deg) scale(1.05); }
.pt-escolha span { display: grid; }
.pt-escolha small { font-weight: 700; opacity: .9; }
.pt-escolha b { font-family: var(--fonte-titulos), sans-serif; font-size: 38px; font-weight: 800; line-height: 1.05; }

/* banners com texto, imagem e texto, blog, avaliacoes, instagram, newsletter */
.tema-patinha .hdl-hero h2 { font-family: var(--fonte-titulos), sans-serif; font-weight: 800; }
.tema-patinha .hdl-hero .vt-botao { border-radius: 999px; background: #fff !important; color: var(--pt-roxo) !important; font-weight: 800; }
.tema-patinha .hdl-it-img img { border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; }
.tema-patinha .hdl-it-txt h2 { font-weight: 800; font-size: 36px; color: var(--pt-tinta); }
.tema-patinha .vt-blog a { border: 0; border-radius: 24px; box-shadow: 0 6px 20px rgba(46, 26, 115, .08); }
.tema-patinha .vt-blog strong { font-weight: 800; color: var(--pt-tinta); }
.tema-patinha .hdl-depo figure { border: 0; border-radius: 28px 28px 28px 6px; background: var(--pt-lilas); }
.tema-patinha .hdl-depo-nota { color: var(--loja); }
.tema-patinha .hdl-insta a { border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; overflow: hidden; }
body.vitrine.tema-patinha .vt-news { background: var(--loja); }
body.vitrine.tema-patinha .vt-news h3 { font-weight: 800; }
body.vitrine.tema-patinha .vt-news-ico { border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; }
body.vitrine.tema-patinha .vt-news-campo button { background: var(--pt-roxo); font-weight: 800; }

/* ---------- topo proprio (topo.php): barra roxa, busca branca, menu claro com patinhas ---------- */
.pt-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 .pt-topo .vt-barra .vt-acao, body.vitrine .pt-topo .vt-barra .vt-icone { color: var(--topo-texto, #fff) !important; }
body.vitrine .pt-topo .vt-barra .vt-acao small { color: rgba(255, 255, 255, .75) !important; }
body.vitrine .pt-topo .vt-barra .vt-acao:hover { background: rgba(255, 255, 255, .12); }
body.vitrine .pt-topo .vt-sacola .shop-bag i { color: var(--topo-texto, #fff) !important; }
.pt-topo .vt-sacola .counter { border-color: var(--topo, #5b2bd9); }
body.vitrine .pt-topo .vt-busca input { height: 50px; padding: 0 60px 0 22px; border: 0; background: #fff; }
body.vitrine .pt-topo .vt-busca button { width: 42px !important; height: 42px; padding: 0; display: grid; place-items: center; font-size: 18px; }
@media (min-width: 992px) {
	body.vitrine .pt-topo .vt-menu { background: #fff; border: 0; box-shadow: 0 4px 14px rgba(46, 26, 115, .06); }
	.pt-topo .vt-menu .container { justify-content: center; gap: 4px; }
	body.vitrine .pt-topo .vt-menu > .container > a, body.vitrine .pt-topo .vt-menu-cat > a, body.vitrine .pt-topo .vt-menu-dep-link { color: var(--pt-tinta) !important; font-weight: 700; border-radius: 999px; }
	body.vitrine .pt-topo .vt-menu-cat > a::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; background: var(--loja); -webkit-mask: var(--pt-pata) center / contain no-repeat; mask: var(--pt-pata) center / contain no-repeat; vertical-align: -1px; }
	body.vitrine .pt-topo .vt-menu > .container > a:hover, body.vitrine .pt-topo .vt-menu-cat:hover > a { background: var(--pt-lilas); }
	body.vitrine .pt-topo .vt-menu a.vt-ofertas { background: var(--loja); color: #fff !important; }
	body.vitrine .pt-topo .vt-menu-cat > a > .lni-chevron-down { display: none; }
	body.vitrine .pt-topo .vt-mega-painel, body.vitrine .pt-topo .vt-menu-cat-lista, body.vitrine .pt-topo .vt-menu-dep-lista { border-radius: 24px; }
	body.vitrine .pt-topo .vt-mega-painel a, body.vitrine .pt-topo .vt-menu-cat-lista a, body.vitrine .pt-topo .vt-menu-dep-lista a { color: var(--pt-tinta) !important; }
	body.vitrine .pt-topo .vt-mega-painel a::before, body.vitrine .pt-topo .vt-menu-cat-lista a::before { content: none; }
}

/* ---------- rodape proprio (rodape.php): borda em bolha, patinhas no fundo e avisos em bolhas ---------- */
.pt-rodape { position: relative; margin-top: 60px; padding-top: 6px; }
.pt-rodape::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; background: #fff; -webkit-mask: var(--pt-pata) 0 0 / 58px 58px repeat; mask: var(--pt-pata) 0 0 / 58px 58px repeat; }
.pt-rodape:not(.pt-rodape-escuro)::before { background: var(--pt-roxo); }
.pt-bolha { position: absolute; left: 0; top: -58px; width: 100%; height: 60px; fill: var(--rodape, #3d1c99); }
.vt-news + .pt-rodape { margin-top: 50px; }
.pt-bolhas { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 18px 15px 22px; }
.pt-bolhas span { padding: 9px 20px; border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; background: var(--loja); color: #fff; font-weight: 800; font-size: 13.5px; }
.pt-bolhas span:nth-child(3n+2) { background: #ffb703; color: #2e1a73; }
.pt-bolhas span:nth-child(3n+3) { background: #fff; color: var(--pt-roxo); }
.pt-rodape .vt-rodape-grade, .pt-rodape .vt-rodape-faixa, .pt-rodape .vt-rodape-base { position: relative; }
.pt-rodape h3 { font-family: var(--fonte-titulos), sans-serif !important; font-weight: 800 !important; color: var(--rodape-titulo) !important; }
.pt-rodape-escuro .vt-marca img { filter: brightness(0) invert(1); }
.pt-rodape .vt-redes a { border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%; }
.pt-rodape .vt-redes a:hover { background: var(--loja); }
.pt-rodape .vt-pags span { border-radius: 999px; }

/* ---------- pagina do produto ---------- */
body.vitrine.tema-patinha .rowtitle .title-icon { display: none; }
body.vitrine.tema-patinha .single-produto { border-radius: 30px; }
body.vitrine.tema-patinha .single-produto .galeria { border: 0; border-radius: 60px 24px 60px 24px !important; background: var(--pt-lilas); overflow: hidden; }
body.vitrine.tema-patinha .produto-detalhes .pd-nome { display: block !important; margin-bottom: 6px; }
body.vitrine.tema-patinha .pd-nome .nome span { font-family: var(--fonte-titulos), sans-serif; font-size: 32px; font-weight: 800; line-height: 1.12; color: var(--pt-tinta); }
body.vitrine.tema-patinha .produto-detalhes .valor, body.vitrine.tema-patinha .produto-detalhes .valor span { font-family: var(--fonte-titulos), sans-serif; font-size: 34px !important; font-weight: 800 !important; color: var(--pt-roxo) !important; }
body.vitrine.modo-loja.tema-patinha .line-variacao .thelabel { font-weight: 800 !important; }
body.vitrine.modo-loja.tema-patinha .line-variacao .opcao { border-radius: 999px !important; border: 2px solid #e3dafc !important; }
body.vitrine.modo-loja.tema-patinha .line-variacao .opcao.active { background: var(--pt-roxo) !important; border-color: var(--pt-roxo) !important; }
body.vitrine.modo-loja.tema-patinha .line-variacao .opcao.active .titulo, body.vitrine.modo-loja.tema-patinha .line-variacao .opcao.active small { color: #fff !important; }
body.vitrine.tema-patinha .subtotal-adicionar .col-md-6 { width: 100%; float: none; }
body.vitrine.tema-patinha .sacola-adicionar { display: flex !important; align-items: center; justify-content: center; gap: 10px; float: none !important; width: 100%; height: 60px; margin-top: 12px; border-radius: 999px !important; font-family: var(--fonte-titulos), sans-serif; font-size: 18px; font-weight: 800 !important; }
body.vitrine.tema-patinha .pa-abas { gap: 8px; border-bottom: 0; }
body.vitrine.tema-patinha .pa-abas a, body.vitrine.tema-patinha .pa-abas button { border-radius: 999px; font-weight: 800; }
body.vitrine.tema-patinha .pa-abas .ativa { background: var(--pt-roxo) !important; color: #fff !important; }

/* ---------- carrinho (carrinho.php) e finalizar compra ---------- */
body.vitrine.tema-patinha .ck h1 { font-family: var(--fonte-titulos), sans-serif; font-weight: 800; color: var(--pt-tinta); }
body.vitrine.tema-patinha .co-passos .atual { color: var(--pt-roxo); }
body.vitrine.tema-patinha .ck-item, body.vitrine.tema-patinha .co-bloco { border: 0; border-radius: 24px; box-shadow: 0 6px 20px rgba(46, 26, 115, .08); }
body.vitrine.tema-patinha .ck-foto img { border-radius: 26px 10px 26px 10px; background: var(--pt-lilas); }
body.vitrine.tema-patinha .co-bloco h2, body.vitrine.tema-patinha .ck-resumo h2 { font-family: var(--fonte-titulos), sans-serif; font-weight: 800; color: var(--pt-tinta); }
body.vitrine.tema-patinha .co-bloco h2 span { background: var(--loja); }
body.vitrine.tema-patinha .ck-resumo { border: 0; border-radius: 30px; background: var(--pt-lilas); }
body.vitrine.tema-patinha .ck-valores .ck-tot { font-weight: 800; color: var(--pt-roxo); }
body.vitrine.tema-patinha .ck-finalizar { border-radius: 999px !important; font-weight: 800 !important; }
body.vitrine.tema-patinha .ck-qtd, body.vitrine.tema-patinha .ck-linha-form input, body.vitrine.tema-patinha .ck-linha-form button, body.vitrine.tema-patinha .co-campos input { border-radius: 999px !important; }
.pt-frete { padding: 16px 20px; border-radius: 24px; background: #fff; box-shadow: 0 6px 20px rgba(46, 26, 115, .08); }
.pt-frete p { margin: 0 0 10px; font-weight: 700; }
.pt-frete p b { color: var(--loja); }
.pt-trilha { display: flex; gap: 6px; align-items: center; }
.pt-trilha i { flex: 1; max-width: 34px; aspect-ratio: 1; background: #e6defc; -webkit-mask: var(--pt-pata) center / contain no-repeat; mask: var(--pt-pata) center / contain no-repeat; }
.pt-trilha i:nth-child(odd) { transform: rotate(-18deg) translateY(-4px); }
.pt-trilha i:nth-child(even) { transform: rotate(14deg) translateY(4px); }
.pt-trilha i.on { background: var(--loja); }

@media (max-width: 767px) {
	.tema-patinha .vt-secao-cab h2 { font-size: 22px; }
	.pt-escolha { grid-template-columns: 1fr; gap: 12px; }
	.pt-escolha a { min-height: 120px; }
	.pt-escolha img { width: 96px; height: 96px; }
	.pt-escolha b { font-size: 28px; }
	body.vitrine.tema-patinha .pd-nome .nome span { font-size: 25px; }
	.pt-bolha { top: -30px; height: 32px; }
}