/* =========================================================
   ZH OUTFITS — BOTÃO DE COMPARTILHAR NA PÁGINA DO PRODUTO
   Fica do lado do preço (montado em js/produto.js).
   Lógica em js/card-compartilhar.js (a mesma dos cards):
   celular abre o menu de compartilhar, computador copia o link.
   ========================================================= */
.produto__share{
  position:relative; align-self:center;
  width:40px; height:40px; padding:0; line-height:0; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--gold);
  background:var(--surface-2); color:var(--gold-hi);
  cursor:pointer; transition:background .2s, color .2s;
}
.produto__share:hover{ background:var(--gold); color:#100c02; }
.produto__share svg{ display:block; flex:none; }
.produto__share .card__share-icone{ transform:translateX(-1px); } /* ajuste ótico */

/* ícone normal x "copiado" (✓) */
.produto__share .card__share-ok{ display:none; }
.produto__share.is-copiado{ background:var(--gold); color:#100c02; }
.produto__share.is-copiado .card__share-icone{ display:none; }
.produto__share.is-copiado .card__share-ok{ display:block; }

/* balãozinho "Link copiado!" */
.produto__share[data-aviso]::after{
  content:attr(data-aviso);
  line-height:1.3; /* o botão usa line-height 0 pra centralizar o ícone */
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:5px 9px; border-radius:var(--r-sm);
  background:var(--gold); color:#100c02;
  font-family:var(--ff-body); font-size:.68rem; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  pointer-events:none;
}

/* grupo: compartilhar + WhatsApp + Instagram (quebram de linha juntos) */
.produto__shares{ display:inline-flex; align-items:center; gap:8px; align-self:center; }

/* atalhos de WhatsApp e Instagram: só no celular */
.produto__share--wpp{ background:var(--wpp); border-color:var(--wpp); color:#fff; }
.produto__share--insta{
  background:linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
  border-color:transparent; color:#fff;
}
.produto__share--wpp:hover, .produto__share--insta:hover{ color:#fff; filter:brightness(1.1); }
.produto__share--wpp svg, .produto__share--insta svg{ width:21px; height:21px; }

@media (hover:hover) and (pointer:fine){
  .produto__share--wpp, .produto__share--insta{ display:none; }
}