/* Evolury Photo Download — overlay discreto por foto + barra "todas" (mu#539).
* Tokens do tema quando existem; fallback neutro. O overlay vive DENTRO de
* `.woocommerce-product-gallery__image` (relative + overflow hidden no tema).
* CANTO INFERIOR DIREITO de propósito: o superior direito é do gatilho de
* lightbox do WooCommerce (🔍), o superior esquerdo é dos selos (oferta/novo) e
* as bordas laterais, no meio, são das setas do carrossel do tema. */
.evo-pd__overlay {
position: absolute;
bottom: .6rem;
right: .6rem;
z-index: 3;
display: flex;
gap: .4rem;
pointer-events: none; /* só os botões recebem ponteiro; a foto continua clicável/zoomável */
}
.evo-pd__btn {
pointer-events: auto;
/* `!important` no display porque o botão de BAIXAR é um `` dentro da foto,
* e o WooCommerce força
* .woocommerce div.product div.images .woocommerce-product-gallery__image a
* { display: block }
* — especificidade (0,4,3) contra (0,1,0) desta classe. Sem isto o flex morre
* SÓ no ` ` (o do WhatsApp é `` e escapa): o SVG de 20px fica no
* canto superior esquerdo do círculo de 40px, visivelmente torto ao lado do
* outro. Medido no lab: offLeft/offTop 1px contra 10px do vizinho. É o mesmo
* remédio que o tema usa contra o CSS de galeria do WC. */
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 999px;
/* círculo CLARO translúcido com ícone escuro — como as setas do carrossel do
* tema: aparece sobre foto escura e, sobre fundo branco, o sombreado e a
* borda sutil o sustentam. (Preto translúcido sumia em foto escura.) */
background: rgba(255, 255, 255, .78);
color: #1f2937;
border: 1px solid rgba(0, 0, 0, .08);
cursor: pointer;
opacity: .9;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
transition: opacity .2s ease, background .2s ease, transform .15s ease;
text-decoration: none;
line-height: 0;
font-family: inherit;
position: relative; /* âncora do anel neon (::before/::after) */
}
.evo-pd__btn:hover,
.evo-pd__btn:focus-visible {
opacity: 1;
background: rgba(255, 255, 255, .96);
outline: none;
transform: translateY(-1px);
}
.evo-pd__btn--share { background: rgba(37, 211, 102, .78); color: #fff; border-color: rgba(0, 0, 0, .06); }
.evo-pd__btn--share:hover,
.evo-pd__btn--share:focus-visible { background: rgba(37, 211, 102, .95); }
.evo-pd__btn svg { display: block; }
/* Desktop (há hover): escondido até o mouse entrar na foto — não atrapalha a imagem.
* Touch: sempre visível, mas suave (não existe hover). */
@media (hover: hover) {
.woocommerce-product-gallery__image .evo-pd__overlay { opacity: 0; transition: opacity .2s ease; }
.woocommerce-product-gallery__image:hover .evo-pd__overlay,
.woocommerce-product-gallery__image .evo-pd__overlay:focus-within,
/* preparando ou pronto: continua à vista com o mouse fora da foto (mu#1003) */
.woocommerce-product-gallery__image .evo-pd__overlay.is-ativo { opacity: 1; }
}
/* ── o canto livre dos flutuantes — mu#1005 ────────────────────────────────
* No celular a foto ocupa a largura toda, e o canto inferior direito dela passa
* pelo canto da TELA onde ficam, fixos, o WhatsApp de atendimento e a bolha de
* vídeos: eles cobriam o botão de enviar a foto. Medido no lab: até 768px (galeria
* em coluna única, o breakpoint do WooCommerce que o tema segue) os dois cruzam; a
* partir de 769px, com duas colunas, nunca.
*
* Todo flutuante declara o canto que ocupa em `data-evo-flutuante` ("direita" ou
* "esquerda"): este CSS não conhece a classe de nenhum deles. Com a direita ocupada,
* os botões da foto vão para o canto inferior ESQUERDO (livre: os selos ficam em
* cima e as setas no meio); com os dois cantos ocupados, para o centro. Nenhum, ou
* só a esquerda: continua à direita. Sem `:has()`, tudo fica como antes. */
@media (max-width: 768px) {
body:has([data-evo-flutuante="direita"]):not(:has([data-evo-flutuante="esquerda"])) .woocommerce-product-gallery__image .evo-pd__overlay {
left: .5rem;
right: auto;
}
body:has([data-evo-flutuante="direita"]):has([data-evo-flutuante="esquerda"]) .woocommerce-product-gallery__image .evo-pd__overlay {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
/* ── estados do compartilhar (dois passos) — mu#1003 ──────────────────────
* PREPARANDO (`is-busy`): um anel NEON circulando o botão, no lugar do ícone
* girando. Dois pseudo-elementos, porque máscara e brilho não convivem num só (o
* `mask` corta o `drop-shadow` que ficaria fora do anel):
* ::before o arco claro que percorre a borda (`conic-gradient` girando pela
* propriedade registrada `--evo-pd-giro`, que funciona também na
* pílula da barra — girar o elemento deformaria a pílula);
* ::after o brilho em volta, pulsando.
* Navegador sem `@property`: o arco fica parado e o brilho continua pulsando.
* PRONTO (`is-ready`): o texto diz que falta um toque — na barra, o rótulo; na
* foto, o círculo abre numa pílula com "Pronto para enviar" (`.evo-pd__btn-texto`,
* criado pelo JS).
* O tema estiliza estes estados com `!important` em camada (cor/sombra); nada dele
* toca pseudo-elemento, largura ou o texto. A cor do neon é `--evo-pd-neon`. */
@property --evo-pd-giro {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.evo-pd__btn.is-busy::before,
.evo-pd__all.is-busy::before,
.evo-pd__btn.is-busy::after,
.evo-pd__all.is-busy::after {
content: "";
position: absolute;
inset: -4px;
border-radius: inherit;
pointer-events: none;
}
.evo-pd__btn.is-busy::before,
.evo-pd__all.is-busy::before {
padding: 2px;
background: conic-gradient(from var(--evo-pd-giro), transparent 0deg 190deg, var(--evo-pd-neon, #25d366) 290deg, #f0fff5 345deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: evo-pd-giro 1.1s linear infinite;
}
.evo-pd__btn.is-busy::after,
.evo-pd__all.is-busy::after {
box-shadow: 0 0 6px 1px var(--evo-pd-neon, #25d366), 0 0 14px 2px color-mix(in srgb, var(--evo-pd-neon, #25d366) 55%, transparent);
animation: evo-pd-brilho 1.1s ease-in-out infinite alternate;
}
.evo-pd__btn-texto { display: none; }
.evo-pd__btn.is-ready {
width: auto;
gap: .4rem;
padding: 0 .85rem 0 .65rem;
opacity: 1;
background: #25d366;
box-shadow: 0 0 0 4px rgba(37, 211, 102, .35);
animation: evo-pd-pronto .5s ease-out 1;
}
.evo-pd__btn.is-ready .evo-pd__btn-texto {
display: inline;
font-size: .8rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
color: inherit;
}
.evo-pd__all.is-ready { animation: evo-pd-pronto .5s ease-out 1; }
@keyframes evo-pd-giro { to { --evo-pd-giro: 360deg; } }
@keyframes evo-pd-brilho { from { opacity: .35; } to { opacity: .9; } }
@keyframes evo-pd-pronto {
0% { transform: scale(.94); }
60% { transform: scale(1.04); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.evo-pd__btn.is-busy::before,
.evo-pd__all.is-busy::before,
.evo-pd__btn.is-busy::after,
.evo-pd__all.is-busy::after,
.evo-pd__btn.is-ready,
.evo-pd__all.is-ready { animation: none; }
}
/* barra "Fotos para divulgação" (resumo do produto) */
.evo-pd__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .6rem;
margin: .9rem 0;
font-size: .9rem;
}
.evo-pd__bar-label {
flex-basis: 100%;
font-weight: 600;
opacity: .8;
}
.evo-pd__all {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .85rem;
border: 1px solid rgba(0, 0, 0, .18);
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
font-size: .9rem;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: border-color .2s ease, background .2s ease;
position: relative; /* âncora do anel neon */
}
.evo-pd__all:hover,
.evo-pd__all:focus-visible { border-color: rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .03); outline: none; }
.evo-pd__all svg { width: 18px; height: 18px; flex: 0 0 auto; }
.evo-pd__all--share,
.evo-pd__all--link { border-color: rgba(37, 211, 102, .7); color: #128c7e; }
.evo-pd__all--share:hover,
.evo-pd__all--link:hover { background: rgba(37, 211, 102, .08); border-color: #25d366; }
.evo-pd__all[hidden] { display: none; }
/* O anel do ZIP na cor da marca: o verde é do WhatsApp (mu#1007). Algarismos de
* largura fixa: "Baixando 40%…" não muda de largura a cada 5%. E centralizado: enquanto
* baixa, o JS não deixa a pílula encolher, e o texto mais curto ficaria encostado à esquerda. */
.evo-pd__all--zip { --evo-pd-neon: var(--evo-brand-on-surface, #0c91eb); font-variant-numeric: tabular-nums; justify-content: center; }
/* Preparando não é "desligado": sem o esmaecido de antes — o anel neon é o sinal
* (mu#1003). Sem camada, vence também o `opacity: .75` que o tema põe aqui. */
.evo-pd__all.is-busy { opacity: 1; pointer-events: none; }
.evo-pd__all.is-ready { background: #25d366; border-color: #25d366; color: #fff; }