/* ============================================================ ShipItAll - Mobile bottom nav (v1.0.67) ============================================================ Visible only when: (a) has class `sia-has-bottom-nav` (added server-side by SIA_Mobile_Nav::body_class on non-cart, non-checkout front-end templates), AND (b) viewport width <= 768px Both conditions live in this one file so nothing leaks onto desktop and no CLS is introduced on pages that don't render it. ============================================================ */ /* Default: not rendered. This covers desktop + any template the server opted out of (cart, checkout). We use display:none rather than visibility so the element takes no space at all. */ .sia-bottom-nav { display: none; } /* Mobile only. Keep the breakpoint identical to the header's 768px switch in css/header.css so the bar appears at the same time the desktop header search collapses into the drawer. */ @media (max-width: 768px) { /* Reserve space at bottom so fixed bar never covers the last bit of page content. padding-bottom is applied to only when the activation class is present; cart/checkout get no padding change (their templates don't get the class). */ body.sia-has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* Actual bar. Activation requires BOTH the body class and the media query, so desktop stays pristine. */ body.sia-has-bottom-nav .sia-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; /* above .sia-header (900) so it stays on top when scrolled-under, but below the mobile menu drawer (1000) so an open drawer hides it. */ height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); background: #ffffff; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); justify-content: space-around; align-items: stretch; /* Prevent accidental text selection when tapping the buttons fast. */ -webkit-user-select: none; user-select: none; } /* When the off-canvas drawer is open we hide the bottom nav so users don't see two nav layers competing. main.js already adds body.overflow-hidden on drawer open, so we piggyback. */ body.overflow-hidden .sia-bottom-nav { display: none; } .sia-bottom-nav .sia-bn-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px 4px; background: transparent; border: 0; color: #4b5563; font: 500 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; cursor: pointer; transition: color 0.15s ease, transform 0.1s ease; min-width: 0; /* allow label ellipsis if a translated label gets long */ } .sia-bottom-nav .sia-bn-item:active { transform: scale(0.94); } .sia-bottom-nav .sia-bn-item:hover, .sia-bottom-nav .sia-bn-item.is-active { color: #E8380D; /* theme primary */ } .sia-bottom-nav .sia-bn-icon { position: relative; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .sia-bottom-nav .sia-bn-icon svg { width: 22px; height: 22px; display: block; } .sia-bottom-nav .sia-bn-label { font-size: 10px; line-height: 1.1; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Count badge on cart / wishlist icons */ .sia-bottom-nav .sia-bn-badge { position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #E8380D; color: #fff; font: 600 10px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; box-sizing: border-box; pointer-events: none; } } /* Extra-small phones: tighten padding, keep labels visible. */ @media (max-width: 360px) { body.sia-has-bottom-nav .sia-bottom-nav .sia-bn-item { padding: 6px 0 4px; } body.sia-has-bottom-nav .sia-bottom-nav .sia-bn-label { font-size: 9px; } }