Mobile Bottom Navigation Bar

Generate the Liquid, CSS, and JavaScript for a mobile bottom navigation bar section that I can paste into my theme as a custom section, fixed to the bottom of the viewport and visible only on screens below [MOBILE_BREAKPOINT] pixels wide. The navigation bar should display [NAV_ITEM_COUNT] icon-and-label items in an evenly spaced horizontal row. Each item should be configured via a section block with settings for icon (selectable from a list including home, search, collections, cart, and account), label text [ITEM_LABEL], and link URL [ITEM_URL]. The currently active page should highlight the corresponding icon and label with color [ACTIVE_COLOR] while inactive items use [INACTIVE_COLOR]. The cart item should display a badge showing the current cart item count, updated dynamically. The bar should have background color [BAR_BG_COLOR], height [BAR_HEIGHT] pixels, a top border with color [BORDER_COLOR], and z-index [Z_INDEX]. Add a setting to auto-hide the bar when the customer scrolls down and show it when scrolling up [AUTO_HIDE]. Include safe-area inset padding for devices with home indicators. The bar should not appear on desktop or in the Shopify theme editor. Add a subtle shadow above the bar with intensity [SHADOW_INTENSITY]. Each icon should use an inline SVG at [ICON_SIZE] pixels. Provide complete Liquid, CSS, and JavaScript.

To use the generated code: go to Online Store > Themes > Edit code, create a new file at sections/mobile-bottom-nav.liquid, and paste the code in. Save, then open the theme customizer and add the “Mobile Bottom Navigation” section to a global section group (or your theme.liquid layout) so it appears on every page.