/* ============================================================= Mobile Bottom Navigation (Search | Cart | Branch) Premium floating pill bar - visible ONLY 320px-439px inclusive. z-index 1500: above page content, below the sticky header (2000), search overlay (header context), cart sidebar (4200) and the product popup (10000) - so overlays always sit above it. ============================================================= */ :root { --sk-bnav-accent: var(--primary-color, #ec1a23); --sk-bnav-accent-dark: #c1161d; --sk-bnav-accent-soft: #fdeced; --sk-bnav-text: #9aa1ac; --sk-bnav-active: #111827; --sk-bnav-bg: rgba(255, 255, 255, 0.94); --sk-bnav-height: 58px; } /* Hidden by default - desktop, tablets and sub-320px screens never see it */ .mobile-bottom-navigation { display: none; } @media screen and (min-width: 320px) and (max-width: 439px) { .mobile-bottom-navigation { display: flex; align-items: stretch; position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 1500; background: var(--sk-bnav-bg); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(17, 24, 39, 0.07); border-radius: 22px; box-shadow: 0 14px 44px rgba(17, 24, 39, 0.18), 0 3px 12px rgba(17, 24, 39, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9); padding: 0; overflow: visible; font-family: inherit; -webkit-font-smoothing: antialiased; } /* ---------- Items: equal thirds, labels share one baseline ---------- */ .mobile-bottom-navigation .sk-bnav-item { flex: 1 1 0; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: var(--sk-bnav-height); padding: 6px 4px 9px; border: 0; background: transparent; border-radius: 16px; text-decoration: none; text-align: center; color: var(--sk-bnav-text); -webkit-tap-highlight-color: transparent; cursor: pointer; appearance: none; box-sizing: border-box; transition: color 0.18s ease, transform 0.18s ease; } .mobile-bottom-navigation .sk-bnav-item:focus-visible { outline: 2px solid var(--sk-bnav-accent); outline-offset: -3px; } .mobile-bottom-navigation .sk-bnav-item:active { transform: scale(0.92); } .mobile-bottom-navigation .sk-bnav-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 11px; line-height: 1; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .mobile-bottom-navigation .sk-bnav-icon iconify-icon { font-size: 22px; } .mobile-bottom-navigation .sk-bnav-label { display: block; width: 100%; font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; line-height: 1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.18s ease, font-weight 0.18s ease; } /* Active state: soft brand pill behind the icon + accent label */ .mobile-bottom-navigation .sk-bnav-item.is-active { color: var(--sk-bnav-active); } .mobile-bottom-navigation .sk-bnav-item.is-active .sk-bnav-label { font-weight: 600; } .mobile-bottom-navigation .sk-bnav-item.is-active .sk-bnav-icon { background: var(--sk-bnav-accent-soft); color: var(--sk-bnav-accent); } /* ---------- Center Cart: raised gradient FAB (labels stay aligned) ---------- */ .mobile-bottom-navigation .sk-bnav-cart { position: relative; } .mobile-bottom-navigation .sk-bnav-cart .sk-bnav-icon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, var(--sk-bnav-accent) 0%, var(--sk-bnav-accent-dark) 100%); color: #fff; box-shadow: 0 0 0 4px #fff, 0 10px 24px rgba(236, 26, 35, 0.4), 0 2px 6px rgba(236, 26, 35, 0.28); } .mobile-bottom-navigation .sk-bnav-cart .sk-bnav-icon iconify-icon { font-size: 24px; } .mobile-bottom-navigation .sk-bnav-cart .sk-bnav-label { font-weight: 600; color: var(--sk-bnav-active); } /* Cart active (sidebar open): warm glow instead of the soft pill */ .mobile-bottom-navigation .sk-bnav-cart.is-active .sk-bnav-icon { background: linear-gradient(145deg, var(--sk-bnav-accent-dark) 0%, var(--sk-bnav-accent) 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--sk-bnav-accent-soft), 0 12px 28px rgba(236, 26, 35, 0.48); } /* ---------- Badge: dark chip with a white separation ring ---------- */ .mobile-bottom-navigation .sk-bnav-badge { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: linear-gradient(135deg, #111827 0%, #374151 100%); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; display: inline-block; box-sizing: border-box; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.28); } .mobile-bottom-navigation .sk-bnav-badge.is-empty { display: none; } /* Free page content from underneath the floating bar (footer included - it sits outside
). Single source of padding for this feature. */ body { padding-bottom: calc(var(--sk-bnav-height) + 34px + env(safe-area-inset-bottom, 0px)); } /* Top header keeps only burger | logo | account at these widths - Search + Cart move to the bottom bar. The hidden #skSearchToggle button stays in the DOM so the bar can trigger the existing AJAX search overlay programmatically. */ .sk-header .sk-search-toggle, .sk-header .sk-header-cart { display: none !important; } } /* Belt-and-braces: outside the 320-439px window the bar can never show, even if a stray rule sets display:flex elsewhere. */ @media screen and (max-width: 319px), screen and (min-width: 440px) { .mobile-bottom-navigation { display: none !important; } }