Product Bundle Display Section

Generate the Liquid, JavaScript, and CSS for a product bundle section that I can paste into my theme as a custom section, displaying [NUMBER] products together as a bundle deal. Show each product with its image, title, individual price, and variant selector. Between each product, display a plus (+) symbol, and at the end show an equals (=) sign with the bundle total. Apply a [DISCOUNT_TYPE] discount (options: percentage, fixed amount) of [DISCOUNT_VALUE] to the bundle total and show the original combined price as strikethrough. Include a single Add Bundle to Cart button that adds all selected variants to the cart at once using the Shopify Cart AJAX API. Add a heading [BUNDLE_HEADING] (e.g., Frequently Bought Together). The products should be configurable via section schema. On mobile, stack the products vertically. Generate the Liquid, JavaScript for cart functionality, and CSS.

Where to add this: In Shopify admin, go to Online Store > Themes > Edit code, create a new section file at sections/product-bundle.liquid, and paste the generated Liquid/CSS/JS (including the schema block) in. Save, then open the theme customizer, add the “Product Bundle” section to the page, and select the bundled products.