/* ============================================================ Sticky Bottom Menu Bar – WooCommerce Frontend Styles — mobile only (max-width: 767px) ============================================================ */ /* Default: hide the bar on all devices */ .sbmb-bar { display: none; } /* Only render on mobile viewports */ @media (max-width: 767px) { /* ── Bar wrapper ─────────────────────────────────────── */ .sbmb-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; display: flex; align-items: center; justify-content: space-around; background-color: var(--sbmb-bg-color, #ffffff); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10); padding: 8px 4px; padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)); /* notch support */ /* Smooth entrance */ transform: translateY(0); transition: transform 0.25s ease, box-shadow 0.25s ease; /* Prevent text selection on tap */ -webkit-user-select: none; user-select: none; } /* Hide bar when scrolling down fast (JS adds .sbmb-hidden) */ .sbmb-bar.sbmb-hidden { transform: translateY(110%); } /* Add bottom padding to so content beneath bar is reachable */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; } /* ── Individual item: a or button ────────────────────── */ .sbmb-bar .sbmb-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 4px 2px; position: relative; cursor: pointer; text-decoration: none; color: var(--sbmb-text-color, #000000); background: transparent; border: none; outline: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s ease; } .sbmb-bar .sbmb-item:active { opacity: 0.65; } /* ── SVG icon ─────────────────────────────────────────── */ .sbmb-bar .sbmb-icon { display: flex; align-items: center; justify-content: center; width: var(--sbmb-icon-size, 22px); height: var(--sbmb-icon-size, 22px); color: var(--sbmb-icon-color, #000000); flex-shrink: 0; } .sbmb-bar .sbmb-icon svg { width: 100%; height: 100%; fill: var(--sbmb-icon-color, #000000); display: block; } /* Handle SVGs that use currentColor instead of fill */ .sbmb-bar .sbmb-icon svg [fill="currentColor"], .sbmb-bar .sbmb-icon svg path[fill="currentColor"] { fill: var(--sbmb-icon-color, currentColor); } /* ── Label text ──────────────────────────────────────── */ .sbmb-bar .sbmb-label { display: block; font-size: 10px; line-height: 1.2; color: var(--sbmb-text-color, #000000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; text-align: center; } /* ── Cart count badge ────────────────────────────────── */ .sbmb-bar .sbmb-cart-count { position: absolute; top: 2px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e44; color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, sans-serif; pointer-events: none; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .sbmb-bar .sbmb-cart-count.sbmb-bump { transform: scale(1.3); } } /* end @media */