/* DeLui — botão flutuante do WhatsApp (inc/whatsapp.php). Usa os tokens de tokens.css. */
.dl-whats-flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 9000;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--touch, 44px); padding: 10px 18px 10px 12px;
  border-radius: var(--r-full); background: #25D366; color: #fff !important;
  font: 600 .9rem/1 var(--font-body); letter-spacing: .01em; text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(11, 30, 72, .22);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.dl-whats-flutuante:hover, .dl-whats-flutuante:focus-visible { filter: brightness(1.06); transform: translateY(-1px); color: #fff !important; }
.dl-whats-flutuante svg { flex: none; width: 26px; height: 26px; }
/* Celular/tablet (< 1024px): o tema tem a barra de navegação fixa embaixo (56px) e, na página de
   produto, a barra "Adicionar à sacola" (≈ 68px) que aparece ao rolar. O botão sobe para não cobri-las. */
@media (max-width: 1023.98px) {
  .dl-whats-flutuante { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)); }
  body:has(.dl-sticky-atc:not([hidden])) .dl-whats-flutuante { bottom: calc(56px + 68px + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
  .dl-whats-flutuante { padding: 12px; }
  .dl-whats-flutuante__txt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dl-whats-flutuante { transition: none; } }