/** * Signal Pack Global Components — Mobile Sticky Action Bars * Uses existing brand CSS variables with safe fallbacks (same pattern * as the other components in this plugin). Depends on buttons.css and * utilities.css (.spgc-price-display / .spgc-moq-display). * * Hidden entirely on desktop; shown as fixed bottom bars on mobile only. */ .spgc-mobile-sticky { display: none; } @media (max-width: 880px) { .spgc-mobile-sticky { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 8700; /* below drawers/modals/search/cookie banner, above ordinary content and the WhatsApp floating button's default offset */ background: var(--paper, #ffffff); border-top: 1px solid var(--line, rgba(23, 22, 46, 0.10)); padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 10px; box-shadow: 0 -6px 20px rgba(23, 22, 46, 0.08); } .spgc-mobile-sticky .spgc-btn { flex: 1; padding: 0 8px; font-size: 12px; } /* Product page bar */ .spgc-mobile-sticky--product .spgc-price-slot { display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; padding-right: 8px; min-width: 0; } .spgc-mobile-sticky--product .spgc-price-slot .spgc-price-display { font-size: 14px; white-space: nowrap; } .spgc-mobile-sticky--product .spgc-price-slot .spgc-price-request-sm { font-weight: 700; font-size: 13px; color: var(--navy, #2C2A78); } .spgc-mobile-sticky--product .spgc-price-slot .spgc-moq-display { font-size: 10px; white-space: nowrap; } /* Custom product bar */ .spgc-mobile-sticky--custom .spgc-btn { flex: 1; } /* Cart bar */ .spgc-mobile-sticky--cart { justify-content: space-between; align-items: center; } .spgc-mobile-sticky--cart .spgc-cart-subtotal-row { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink, #17162e); } .spgc-mobile-sticky--cart .spgc-btn { flex: 0 0 auto; } /* Reserve space at the bottom of the page so this bar never covers the last bit of real content — add this class to on any template that uses a sticky bar. */ body.spgc-has-mobile-sticky { padding-bottom: 66px; } }