.whatsappchat-button { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background-color: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .whatsappchat-button:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .whatsappchat-button .fa-whatsapp { color: #fff; font-size: 30px; line-height: 1; } .whatsappchat-status-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background-color: #2ecc71; border: 2px solid #fff; } .whatsappchat-offline { background-color: #8a8f98; } .whatsappchat-offline .whatsappchat-status-dot { background-color: #b0b0b0; } @media (max-width: 480px) { .whatsappchat-button { width: 48px; height: 48px; right: 14px; bottom: 14px; } .whatsappchat-button .fa-whatsapp { font-size: 26px; } .whatsappchat-status-dot { width: 12px; height: 12px; } } /* Product page buy-box buttons: "Order via WhatsApp" (always) and "Call to Order" (mobile only, see the max-width:767px rule below -- matches the theme's own mobile breakpoint convention). This module only renders these two -- Compare/Wishlist are separate theme hooks (stfeature) -- but the theme's own template wraps both pairs in a shared ".product-secondary-actions" flex row (see CPCUSTOM_CSS) and sets this wrapper to display:contents so its two buttons flow into that row as plain siblings of Compare/Wishlist, not a nested box. */ .product-quick-actions { display: contents; } /* Compound ".btn.btn-whatsapp-order" selectors (not just ".btn-whatsapp-order") are deliberate: the theme's cp_themeoptions brand-color block re-asserts "background-color: var(--primary-color)" on a huge combined selector list that includes plain ".btn", positioned after this stylesheet in -- at equal (single-class) specificity that generated rule would win on source order alone. Two classes beats one regardless of order. */ .btn.btn-whatsapp-order, .btn.btn-call-order { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 4px; font-weight: 500; text-transform: capitalize; flex: 0 0 auto; } .btn-whatsapp-order .fa, .btn-call-order .fa { margin-right: 8px; font-size: 16px; } .btn.btn-whatsapp-order { background-color: #fff; color: #25d366; border: 2px solid #25d366; } .btn.btn-whatsapp-order:hover { background-color: #25d366; color: #fff; } .btn.btn-call-order { background-color: #fff; color: #e53935; border: 2px solid #e53935; } .btn.btn-call-order:hover { background-color: #e53935; color: #fff; } /* 3-class selectors here, not the bare ".call-to-order-btn" -- the unconditional ".btn.btn-call-order { display: inline-flex }" rule above (2 classes) was otherwise beating this on specificity even on desktop, regardless of the media query, and showing the button everywhere. */ .btn.btn-call-order.call-to-order-btn { display: none; } @media (max-width: 767px) { .btn.btn-call-order.call-to-order-btn { display: inline-flex; } }