/* A designed site's WhatsApp button (doc 49 §8.2 `whatsapp`; Bonata first — Najib, 2 Nov 2026: "a WhatsApp icon
   floating in the corner which will let customers text him directly"). One round button in WhatsApp's own green,
   bottom right, on every page of the site: its own pages link this file and carry the <a class="st-wa">; the ordering
   pages get both from site-theme.js's footer(). WhatsApp's colour, not the site's — the green is what tells people
   what it does. Sheets and their scrim (z 40/50) cover it; on the order page it rises above the basket bar. */
.st-wa {
  position: fixed; z-index: 34;
  right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .16);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.st-wa svg { width: 30px; height: 30px; fill: currentColor; }
@media (hover: hover) { .st-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .24), 0 2px 4px rgba(0, 0, 0, .16); } }
.st-wa:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }
@media (min-width: 900px) { .st-wa { right: 28px; bottom: 28px; width: 60px; height: 60px; } .st-wa svg { width: 32px; height: 32px; } }
/* the order page's basket bar (button 48px + 20px padding + its hairline) */
body:has(.cartbar.show) .st-wa { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .st-wa { transition: none; } }
@media print { .st-wa { display: none; } }