Mini Cart Drawer

Generate the Liquid, CSS, and JavaScript for a mini cart drawer section that I can paste into my theme as a custom section, sliding in from the [DRAWER_SIDE] side of the viewport when a customer adds a product to the cart or clicks the cart icon. The drawer should display a header with the title [DRAWER_TITLE] and a close X button, followed by a scrollable list of cart items each showing the product thumbnail, title, variant info, a quantity selector with plus and minus buttons, a line item price, and a remove button. Below the items list, display the cart subtotal, an optional note field if [SHOW_CART_NOTE] is enabled, and a Checkout button with background color [CHECKOUT_BG_COLOR] and text [CHECKOUT_TEXT]. Include a free shipping progress bar that fills as the cart approaches the threshold of [FREE_SHIPPING_THRESHOLD] dollars and displays a message [SHIPPING_MESSAGE] when reached. The drawer should fetch and update cart data using the Shopify Cart AJAX API without page reloads. The drawer width should be [DRAWER_WIDTH] pixels on desktop and full width on mobile. Include an overlay behind the drawer with color [OVERLAY_COLOR] and opacity [OVERLAY_OPACITY] that closes the drawer when clicked. Add settings for drawer background color [DRAWER_BG_COLOR], text color [DRAWER_TEXT_COLOR], and transition speed [TRANSITION_SPEED] milliseconds. Include a setting for an upsell product handle [UPSELL_PRODUCT] displayed at the bottom of the drawer. Provide complete Liquid, CSS, and JavaScript.

To use the generated code: go to Online Store > Themes > Edit code, create a new file at sections/mini-cart-drawer.liquid, and paste the code in. Save, then open the theme customizer and add the “Mini Cart Drawer” section to your theme (typically as part of the header group or a global section).