.storefront-whatsapp {
    position: fixed;
    inset: auto max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) auto;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #20c965;
    color: #fff;
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
    text-decoration: none;
    transition: transform .16s ease, background-color .16s ease;
}
.storefront-whatsapp svg { width: 38px; height: 38px; display: block; }
.storefront-whatsapp:hover { background: #128c4a; color: #fff; transform: translateY(-2px); }
.storefront-whatsapp:focus-visible { outline: 3px solid #092a53; outline-offset: 4px; }
.storefront-whatsapp__tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    max-width: min(240px, 65vw);
    width: max-content;
    padding: 8px 12px;
    border-radius: 7px;
    background: #202b37;
    color: #fff;
    box-shadow: 0 3px 9px rgb(0 0 0 / 16%);
    font: 500 13px/1.4 system-ui, sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.storefront-whatsapp:hover .storefront-whatsapp__tooltip,
.storefront-whatsapp:focus-visible .storefront-whatsapp__tooltip { visibility: visible; opacity: 1; }
@media (max-width: 640px) {
    .storefront-whatsapp {
        width: 56px;
        height: 56px;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
    }
    .storefront-whatsapp svg { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .storefront-whatsapp, .storefront-whatsapp__tooltip { transition: none; }
}