Pagination Styles Section

Generate the Liquid, CSS, and JavaScript for a configurable pagination section that I can paste into my theme as a custom section, replacing default collection pagination with a styled component. The section should support three pagination modes selectable via a setting [PAGINATION_MODE]: numbered (traditional page number links), load-more (a button that appends the next page of products via AJAX), and infinite-scroll (automatically loads the next page when the customer scrolls near the bottom with an offset of [SCROLL_OFFSET] pixels). For numbered mode, display page numbers with ellipsis for large ranges, previous and next arrow buttons, and highlight the current page with background color [ACTIVE_BG_COLOR] and text color [ACTIVE_TEXT_COLOR]. Inactive page buttons should use background color [INACTIVE_BG_COLOR] and text color [INACTIVE_TEXT_COLOR]. For load-more mode, display a button with text [LOAD_MORE_TEXT], background color [BUTTON_BG_COLOR], and a loading spinner that replaces the text during fetch. For infinite-scroll mode, display a loading spinner centered below the product grid while fetching. All modes should use the Shopify paginate tag with a page size of [PAGE_SIZE] products. Include settings for button border radius [BORDER_RADIUS] pixels, font size [FONT_SIZE], spacing between numbered buttons [BUTTON_GAP] pixels, and alignment [ALIGNMENT] (left, center, right). Provide complete Liquid, CSS, and JavaScript for all three modes.

To use the generated code: go to Online Store > Themes > Edit code, create a new file at sections/pagination-styles.liquid (or a snippet at snippets/pagination-styles.liquid if your theme includes pagination via a snippet), and paste the code in. Save, then replace the default {% paginate %} markup in your collection template with a render call to this section/snippet.