/* Social: barra di condivisione, profili, bottone WhatsApp.
   Colori neutri presi dal tema quando li ha (--line, --ink, --surface),
   col colore del social solo al passaggio: la barra non deve urlare più
   dell'articolo che sta sotto. */

.soc-condividi,
.soc-profili {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 28px 0 8px; clear: both;
}
.soc-condividi { padding-top: 18px; border-top: 1px solid var(--line, #e5e5e5); }
.soc-condividi ul,
.soc-profili ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.soc-condividi li,
.soc-profili li { margin: 0; padding: 0; list-style: none; }
.soc-condividi li::before,
.soc-profili li::before { content: none; }

.soc-etichetta {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #6b6b6b);
}

.soc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line, #dcdcdc); background: var(--surface, #fff);
  color: var(--ink, #222); cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.soc-btn svg { width: 19px; height: 19px; display: block; }
.soc-btn:hover,
.soc-btn:focus-visible { background: var(--soc, #333); border-color: var(--soc, #333); color: #fff; }
.soc-btn:focus-visible { outline: 2px solid var(--soc, #333); outline-offset: 2px; }
.soc-copia:hover, .soc-altro:hover,
.soc-copia:focus-visible, .soc-altro:focus-visible { --soc: #444; }

.soc-avviso { font-size: .85rem; color: var(--muted, #6b6b6b); min-height: 1em; }

/* dentro un widget il riquadro ce l'ha già: niente margini in più. Il
   bottone resta chiaro con l'icona scura anche nel piè di pagina: si legge sia
   sul fondo scuro di un tema sia nel riquadro bianco di un altro. */
.sidebar-widget .soc-profili,
.footer-widgets .soc-profili { margin: 0; }

/* WhatsApp: in basso, dal lato opposto ai bottoni del sito (cookie, torna su,
   carrello), che stanno a destra */
.soc-wa {
  position: fixed; bottom: 18px; z-index: 880;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform .15s;
}
.soc-wa--sinistra { left: 18px; }
.soc-wa--destra { right: 18px; bottom: 104px; }
.soc-wa svg { width: 30px; height: 30px; }
.soc-wa:hover { transform: scale(1.06); }
.soc-wa:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }

@media print { .soc-condividi, .soc-wa { display: none; } }
@media (prefers-reduced-motion: reduce) { .soc-btn, .soc-wa { transition: none; } }