@lime-bundles/react 6.1.0 → 7.0.0

package/dist/index.cjs

@@ -20,62 +20,60 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BUNDLES_FOR_PRODUCT_QUERY: () => import_core18.BUNDLES_FOR_PRODUCT_QUERY,
-  BUNDLE_METAOBJECT_QUERY: () => import_core18.BUNDLE_METAOBJECT_QUERY,
+  BUNDLES_FOR_PRODUCT_QUERY: () => import_core17.BUNDLES_FOR_PRODUCT_QUERY,
+  BUNDLE_METAOBJECT_QUERY: () => import_core17.BUNDLE_METAOBJECT_QUERY,
   BogoBundle: () => BogoBundle,
-  BundleParseError: () => import_core17.BundleParseError,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR: () => import_core18.DEFAULT_OUT_OF_STOCK_BEHAVIOR,
+  BundleCountdown: () => BundleCountdown,
+  BundleParseError: () => import_core16.BundleParseError,
   FixedBundle: () => FixedBundle,
   MixMatchBundle: () => MixMatchBundle,
   MultiStepBundle: () => MultiStepBundle,
-  SHOP_SETTINGS_QUERY: () => import_core18.SHOP_SETTINGS_QUERY,
-  StorefrontApiError: () => import_core17.StorefrontApiError,
+  SHOP_SETTINGS_QUERY: () => import_core17.SHOP_SETTINGS_QUERY,
+  StorefrontApiError: () => import_core16.StorefrontApiError,
   VariantDropdown: () => VariantDropdown,
   VolumeBundle: () => VolumeBundle,
-  WIDGET_CONFIG_DEFAULTS: () => import_core18.WIDGET_CONFIG_DEFAULTS,
-  applyWidgetConfigVars: () => import_core18.applyWidgetConfigVars,
-  calculateDiscount: () => import_core18.calculateDiscount,
-  calculateTierSavings: () => import_core18.calculateTierSavings,
-  computeBundleSaleCents: () => import_core18.computeBundleSaleCents,
-  computeFixedPricing: () => import_core18.computeFixedPricing,
-  createStorefrontClient: () => import_core18.createStorefrontClient,
+  WIDGET_CONFIG_DEFAULTS: () => import_core17.WIDGET_CONFIG_DEFAULTS,
+  applyWidgetConfigVars: () => import_core17.applyWidgetConfigVars,
+  calculateDiscount: () => import_core17.calculateDiscount,
+  calculateTierSavings: () => import_core17.calculateTierSavings,
+  computeBundleSaleCents: () => import_core17.computeBundleSaleCents,
+  computeFixedPricing: () => import_core17.computeFixedPricing,
+  createStorefrontClient: () => import_core17.createStorefrontClient,
   fetchBundleData: () => fetchBundleData,
-  fetchBundlesForProduct: () => import_core18.fetchBundlesForProduct,
+  fetchBundlesForProduct: () => import_core17.fetchBundlesForProduct,
   fetchShopCustomCss: () => fetchShopCustomCss,
   fetchShopSettings: () => fetchShopSettings,
   fetchShopSettingsOrDefault: () => fetchShopSettingsOrDefault,
-  formatCents: () => import_core18.formatCents,
-  formatCountdown: () => import_core18.formatCountdown,
-  formatMoney: () => import_core18.formatMoney,
-  formatUnitPrice: () => import_core18.formatUnitPrice,
-  getActiveTier: () => import_core18.getActiveTier,
-  injectCustomCss: () => import_core18.injectCustomCss,
-  mergeWidgetConfig: () => import_core18.mergeWidgetConfig,
-  observeImpression: () => import_core18.observeImpression,
-  parseCents: () => import_core18.parseCents,
-  parseMetaobjectBundle: () => import_core18.parseMetaobjectBundle,
-  parseMetaobjectBundleStrict: () => import_core18.parseMetaobjectBundleStrict,
-  parseOutOfStockBehavior: () => import_core18.parseOutOfStockBehavior,
-  percentageDiscountUnit: () => import_core18.percentageDiscountUnit,
-  productsForStep: () => import_core18.productsForStep,
-  reportAddToCart: () => import_core18.reportAddToCart,
-  reportImpression: () => import_core18.reportImpression,
-  sanitizeCustomCss: () => import_core18.sanitizeCustomCss,
-  stepHeadroom: () => import_core18.stepHeadroom,
-  thumbnailRatioVars: () => import_core18.thumbnailRatioVars,
-  transformImageUrl: () => import_core18.transformImageUrl,
+  formatCents: () => import_core17.formatCents,
+  formatCountdown: () => import_core17.formatCountdown,
+  formatMoney: () => import_core17.formatMoney,
+  formatUnitPrice: () => import_core17.formatUnitPrice,
+  getActiveTier: () => import_core17.getActiveTier,
+  injectCustomCss: () => import_core17.injectCustomCss,
+  mergeWidgetConfig: () => import_core17.mergeWidgetConfig,
+  observeImpression: () => import_core17.observeImpression,
+  parseCents: () => import_core17.parseCents,
+  parseMetaobjectBundle: () => import_core17.parseMetaobjectBundle,
+  parseMetaobjectBundleStrict: () => import_core17.parseMetaobjectBundleStrict,
+  percentageDiscountUnit: () => import_core17.percentageDiscountUnit,
+  productsForStep: () => import_core17.productsForStep,
+  reportAddToCart: () => import_core17.reportAddToCart,
+  reportImpression: () => import_core17.reportImpression,
+  sanitizeCustomCss: () => import_core17.sanitizeCustomCss,
+  stepHeadroom: () => import_core17.stepHeadroom,
+  thumbnailRatioVars: () => import_core17.thumbnailRatioVars,
+  transformImageUrl: () => import_core17.transformImageUrl,
   useAnalytics: () => useAnalytics,
   useBundleData: () => useBundleData,
   useBundlesForProduct: () => useBundlesForProduct,
-  useShopSettings: () => useShopSettings,
   useVariantSelection: () => useVariantSelection,
   useWidgetConfigVars: () => useWidgetConfigVars,
-  validateQuantity: () => import_core18.validateQuantity
+  validateQuantity: () => import_core17.validateQuantity
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/FixedBundle.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_core8 = require("@lime-bundles/core");
 
 // src/hooks/useBundleData.ts
@@ -140,8 +138,7 @@ async function fetchBundleDataWithWarnings(options) {
 // src/fetchShopSettings.ts
 var import_core2 = require("@lime-bundles/core");
 var FALLBACK = {
-  customCss: null,
-  outOfStockBehavior: import_core2.DEFAULT_OUT_OF_STOCK_BEHAVIOR
+  customCss: null
 };
 var cache = /* @__PURE__ */ new Map();
 async function fetchShopSettings(options) {
@@ -159,10 +156,7 @@ async function fetchShopSettings(options) {
       { signal: options.signal }
     );
     return {
-      customCss: data.shop?.customCss?.value ?? null,
-      outOfStockBehavior: (0, import_core2.parseOutOfStockBehavior)(
-        data.shop?.outOfStockBehavior?.value
-      )
+      customCss: data.shop?.customCss?.value ?? null
     };
   })();
   cache.set(options.shopDomain, promise);
@@ -316,19 +310,25 @@ function useWidgetConfigVars(config) {
 var import_react4 = require("react");
 var import_core6 = require("@lime-bundles/core");
 var { findVariantByOptions, isOptionValueAvailable, toPickerVariant } = import_core6.variants;
-function defaultInitial(variants) {
-  return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
-}
 function useVariantSelection({
   variants,
   optionNames,
   initialVariant,
-  optionValuesByPosition
+  optionValuesByPosition,
+  requiredQtyFor
 }) {
-  const seed = (0, import_react4.useMemo)(
-    () => initialVariant ?? defaultInitial(variants),
-    [initialVariant, variants]
+  const pickerVariants = (0, import_react4.useMemo)(
+    () => variants.map((v) => toPickerVariant(v, requiredQtyFor?.(v.id))),
+    [variants, requiredQtyFor]
   );
+  const seed = (0, import_react4.useMemo)(() => {
+    if (initialVariant) return initialVariant;
+    const covered = pickerVariants.find((p) => p.available);
+    if (covered) {
+      return variants.find((v) => v.id === covered.id) ?? null;
+    }
+    return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+  }, [initialVariant, variants, pickerVariants]);
   const [selectedValues, setSelectedValues] = (0, import_react4.useState)(
     () => seed ? seed.selectedOptions.map((o) => o.value) : optionNames.map(() => "")
   );
@@ -336,10 +336,6 @@ function useVariantSelection({
     if (!seed) return;
     setSelectedValues(seed.selectedOptions.map((o) => o.value));
   }, [seed?.id]);
-  const pickerVariants = (0, import_react4.useMemo)(
-    () => variants.map((v) => toPickerVariant(v)),
-    [variants]
-  );
   const selectedVariant = (0, import_react4.useMemo)(() => {
     if (selectedValues.length !== optionNames.length) return null;
     const match = findVariantByOptions(pickerVariants, selectedValues);
@@ -702,8 +698,48 @@ function VariantDropdown({
   );
 }
 
-// src/components/FixedBundle.tsx
+// src/components/BundleCountdown.tsx
+var import_react7 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function pad(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+function formatRemaining(remaining) {
+  const days = Math.floor(remaining / 864e5);
+  const hours = Math.floor(remaining % 864e5 / 36e5);
+  const mins = Math.floor(remaining % 36e5 / 6e4);
+  const secs = Math.floor(remaining % 6e4 / 1e3);
+  return days > 0 ? days + "d " + pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s" : pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s";
+}
+function BundleCountdown({
+  endsAt,
+  widgetConfig,
+  label = "Limited time offer"
+}) {
+  const enabled = !!endsAt && widgetConfig?.countdown?.showCountdown !== false;
+  const endTime = enabled ? new Date(endsAt).getTime() : NaN;
+  const [remaining, setRemaining] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!enabled || isNaN(endTime)) {
+      setRemaining(null);
+      return;
+    }
+    const update = () => setRemaining(endTime - Date.now());
+    update();
+    const interval = setInterval(update, 1e3);
+    return () => clearInterval(interval);
+  }, [enabled, endTime]);
+  if (!enabled || isNaN(endTime) || remaining === null || remaining <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-countdown", "data-countdown": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle-countdown__label", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-countdown__timer", "data-countdown-timer": true, children: formatRemaining(remaining) })
+  ] });
+}
+
+// src/components/FixedBundle.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -727,10 +763,10 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = (0, import_react7.useState)(false);
-  const [cartError, setCartError] = (0, import_react7.useState)(null);
-  const [selectedVariants, setSelectedVariants] = (0, import_react7.useState)({});
-  const handleVariantChange = (0, import_react7.useCallback)(
+  const [addingToCart, setAddingToCart] = (0, import_react8.useState)(false);
+  const [cartError, setCartError] = (0, import_react8.useState)(null);
+  const [selectedVariants, setSelectedVariants] = (0, import_react8.useState)({});
+  const handleVariantChange = (0, import_react8.useCallback)(
     (productId, variant) => {
       setSelectedVariants((prev) => {
         if (prev[productId] === variant) return prev;
@@ -742,7 +778,7 @@ function FixedBundle(props) {
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const productsEdgeFadeRef = useEdgeFade();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -755,7 +791,7 @@ function FixedBundle(props) {
       );
     }
   }, [result, onError]);
-  const oosProductIds = (0, import_react7.useMemo)(() => {
+  const oosProductIds = (0, import_react8.useMemo)(() => {
     if (!bundle) return /* @__PURE__ */ new Set();
     return new Set(
       bundle.products.filter(
@@ -765,7 +801,7 @@ function FixedBundle(props) {
       ).map((p) => p.id)
     );
   }, [bundle]);
-  const handleAddToCart = (0, import_react7.useCallback)(async () => {
+  const handleAddToCart = (0, import_react8.useCallback)(async () => {
     if (!bundle) return;
     const bundleLines = bundle.products.filter(
       (p) => p.variants.nodes.some(
@@ -820,9 +856,9 @@ function FixedBundle(props) {
     }
   }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -849,7 +885,7 @@ function FixedBundle(props) {
   const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -860,11 +896,18 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           FixedProductRow,
           {
             bundle,
@@ -875,29 +918,29 @@ function FixedBundle(props) {
           },
           product.id
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-savings-amount": true, children: (0, import_core8.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-savings-amount": true, children: (0, import_core8.formatMoney)(savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core8.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core8.formatMoney)(salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core8.formatMoney)(comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core8.formatMoney)(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -913,16 +956,20 @@ function FixedBundle(props) {
 }
 function FixedProductRow({ bundle, product, currency, isOos, onVariantChange }) {
   const variants = product.variants.nodes;
-  const optionNames = (0, import_react7.useMemo)(() => {
+  const optionNames = (0, import_react8.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({
     variants,
-    optionNames
+    optionNames,
+    // Quantity-aware dropdown: a variant that can't cover this row's
+    // bundle quantity greys out instead of walking the shopper into a
+    // cart Shopify caps at add time.
+    requiredQtyFor: (variantId) => (0, import_core8.resolveBundleQty)(bundle, product.id, variantId)
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onVariantChange(product.id, selectedVariant ?? null);
   }, [selectedVariant, product.id, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find(
@@ -943,15 +990,15 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     bundle.widgetConfig.lowStockThreshold,
     bundle.widgetConfig.showLowStockBadge
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
       "aria-disabled": isOos || void 0,
       part: "product",
       children: [
-        isOos && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
-        thumbImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        isOos && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
+        thumbImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "img",
           {
             src: thumbImage.url,
@@ -960,11 +1007,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             loading: "lazy"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-product-prices", children: [
-            compareAt && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-product-prices", children: [
+            compareAt && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "span",
               {
                 className: "lb-bundle-product-compare-price",
@@ -972,9 +1019,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
                 children: compareAt
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
               className: "lb-bundle__product-unit-price",
@@ -982,18 +1029,18 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
               children: unitPriceText
             }
           ),
-          showLowStock && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+          showLowStock && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
             "Only ",
             displayVariant.quantityAvailable,
             " left"
           ] }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               VariantDropdown,
               {
                 options: dropdownOptions,
@@ -1005,7 +1052,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             );
           }) })
         ] }),
-        displayVariant && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
+        displayVariant && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
           "\xD7",
           displayQty
         ] })
@@ -1016,37 +1063,12 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
 
 // src/components/MixMatchBundle.tsx
 var import_react12 = require("react");
-var import_core11 = require("@lime-bundles/core");
-
-// src/hooks/useShopSettings.ts
-var import_react8 = require("react");
-var import_core9 = require("@lime-bundles/core");
-function useShopSettings(options) {
-  const [outOfStockBehavior, setOutOfStockBehavior] = (0, import_react8.useState)(import_core9.DEFAULT_OUT_OF_STOCK_BEHAVIOR);
-  const { shopDomain, storefrontAccessToken } = options;
-  (0, import_react8.useEffect)(() => {
-    const controller = new AbortController();
-    let active = true;
-    fetchShopSettingsOrDefault({
-      shopDomain,
-      storefrontAccessToken,
-      signal: controller.signal
-    }).then((settings) => {
-      if (!active || controller.signal.aborted) return;
-      setOutOfStockBehavior(settings.outOfStockBehavior);
-    });
-    return () => {
-      active = false;
-      controller.abort();
-    };
-  }, [shopDomain, storefrontAccessToken]);
-  return { outOfStockBehavior };
-}
+var import_core10 = require("@lime-bundles/core");
 
 // src/components/MixMatchPicker.tsx
 var import_react11 = require("react");
 var import_react_dom = require("react-dom");
-var import_core10 = require("@lime-bundles/core");
+var import_core9 = require("@lime-bundles/core");
 
 // src/hooks/useScrollLock.ts
 var import_react9 = require("react");
@@ -1109,6 +1131,7 @@ function useFocusTrap({
   active,
   containerRef,
   onEscape,
+  initialFocusRef,
   returnFocusRef
 }) {
   const previouslyFocused = (0, import_react10.useRef)(null);
@@ -1116,7 +1139,8 @@ function useFocusTrap({
     if (!active) return;
     const container = containerRef.current;
     previouslyFocused.current = document.activeElement ?? null;
-    container?.focus();
+    const initial = initialFocusRef?.current ?? container;
+    initial?.focus();
     function onKeyDown(e) {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -1154,13 +1178,13 @@ function useFocusTrap({
 }
 
 // src/components/MixMatchPicker.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ruleFor(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core10.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core9.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -1168,7 +1192,7 @@ function variantRuleFor(bundle, variantId) {
 function sanitizeId(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function buildEligibleProducts(bundle, oosBehavior) {
+function buildEligibleProducts(bundle) {
   const result = [];
   const seen = /* @__PURE__ */ new Set();
   for (const product of bundle.products) {
@@ -1176,10 +1200,9 @@ function buildEligibleProducts(bundle, oosBehavior) {
     seen.add(product.id);
     const rule = ruleFor(bundle, product.id);
     const available = product.variants.nodes.filter(
-      (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
+      (v) => (0, import_core9.isVariantFulfillable)(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -1194,7 +1217,6 @@ function normalizeText(str) {
 }
 var FILTERS_ALL = "__all__";
 function MixMatchPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   requiredQty,
@@ -1212,13 +1234,14 @@ function MixMatchPicker({
   const wc = bundle.widgetConfig;
   const overlayRef = (0, import_react11.useRef)(null);
   const dialogRef = (0, import_react11.useRef)(null);
+  const closeBtnRef = (0, import_react11.useRef)(null);
   const mouseDownTarget = (0, import_react11.useRef)(null);
   const [open, setOpen] = (0, import_react11.useState)(false);
   const [query, setQuery] = (0, import_react11.useState)("");
   const [activeType, setActiveType] = (0, import_react11.useState)(FILTERS_ALL);
   const eligible = (0, import_react11.useMemo)(
-    () => buildEligibleProducts(bundle, outOfStockBehavior),
-    [bundle, outOfStockBehavior]
+    () => buildEligibleProducts(bundle),
+    [bundle]
   );
   const productTypes = (0, import_react11.useMemo)(() => {
     const types = [];
@@ -1244,6 +1267,7 @@ function MixMatchPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
   const remaining = Math.max(0, requiredQty - shownUnits);
@@ -1252,14 +1276,25 @@ function MixMatchPicker({
     const pct = bundle.discountConfig.discountType === "percentage" && bundle.discountConfig.discountValue ? Math.round(bundle.discountConfig.discountValue) : 0;
     return pct > 0 ? `Choose ${remaining} more to unlock ${pct}% off` : `Choose ${remaining} more to complete your bundle`;
   })();
+  const [selectedAtOpen] = (0, import_react11.useState)(
+    () => new Set(selections.map((s) => s.productId))
+  );
+  const ordered = (0, import_react11.useMemo)(() => {
+    const front = [];
+    const back = [];
+    for (const ep of eligible) {
+      (selectedAtOpen.has(ep.product.id) ? back : front).push(ep);
+    }
+    return front.concat(back);
+  }, [eligible, selectedAtOpen]);
   const filtered = (0, import_react11.useMemo)(() => {
     const nq = normalizeText(query.trim());
-    return eligible.filter((ep) => {
+    return ordered.filter((ep) => {
       const matchesQuery = !nq || normalizeText(ep.product.title).includes(nq);
       const matchesType = activeType === FILTERS_ALL || (ep.product.productType ?? "") === activeType;
       return matchesQuery && matchesType;
     });
-  }, [eligible, query, activeType]);
+  }, [ordered, query, activeType]);
   const showEmpty = filtered.length === 0 && query.trim().length > 0;
   function onOverlayMouseDown(e) {
     mouseDownTarget.current = e.target;
@@ -1277,7 +1312,7 @@ function MixMatchPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         ref: (el) => {
@@ -1289,7 +1324,7 @@ function MixMatchPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             ref: dialogRef,
@@ -1299,30 +1334,31 @@ function MixMatchPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -1330,7 +1366,7 @@ function MixMatchPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": requiredQty,
-                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -1343,8 +1379,8 @@ function MixMatchPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "input",
                   {
                     type: "text",
@@ -1358,7 +1394,7 @@ function MixMatchPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1366,11 +1402,11 @@ function MixMatchPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchClearIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchClearIcon, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              showFilters && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -1379,7 +1415,7 @@ function MixMatchPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "button",
                       {
                         type: "button",
@@ -1394,7 +1430,7 @@ function MixMatchPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 MixMatchPickerRow,
                 {
                   bundle,
@@ -1413,10 +1449,10 @@ function MixMatchPicker({
                 },
                 ep.product.id
               )) }),
-              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-footer", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-footer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -1425,7 +1461,7 @@ function MixMatchPicker({
                     children: `${shownUnits} of ${requiredQty} added`
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1468,7 +1504,7 @@ function MixMatchPickerRow({
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core10.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
+  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core9.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
   const vRule = ruleFor(bundle, product.id, currentVariant?.id);
   const variantMax = variantRuleFor(bundle, currentVariant?.id)?.max;
   const alreadyInBundle = (0, import_react11.useMemo)(() => {
@@ -1504,7 +1540,7 @@ function MixMatchPickerRow({
     committedQty + remainingUnits,
     variantMax ?? Infinity
   );
-  const cap = currentVariant ? (0, import_core10.maxAddableQuantity)(
+  const cap = currentVariant ? (0, import_core9.maxAddableQuantity)(
     currentVariant,
     spotCeiling,
     Math.max(0, alreadyInBundle - committedQty)
@@ -1520,7 +1556,7 @@ function MixMatchPickerRow({
   }, [variantInBundle, currentVariantId, vRule.min]);
   if (!currentVariant) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
-  const unitPriceText = (0, import_core10.formatUnitPrice)(
+  const unitPriceText = (0, import_core9.formatUnitPrice)(
     currentVariant.unitPrice,
     currentVariant.unitPriceMeasurement,
     currency
@@ -1559,7 +1595,7 @@ function MixMatchPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -1568,8 +1604,8 @@ function MixMatchPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -1577,10 +1613,10 @@ function MixMatchPickerRow({
               loading: "lazy"
             }
           ),
-          variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -1589,24 +1625,24 @@ function MixMatchPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-row-price-sale": true, children: (0, import_core10.formatMoney)(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core10.formatMoney)(compareCents, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-row-price-sale": true, children: (0, import_core9.formatMoney)(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core9.formatMoney)(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -1621,17 +1657,17 @@ function MixMatchPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
+          isOos ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1652,7 +1688,7 @@ function MixMatchPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -1661,7 +1697,7 @@ function MixMatchPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1685,7 +1721,7 @@ function MixMatchPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 type: "button",
@@ -1704,7 +1740,7 @@ function MixMatchPickerRow({
   );
 }
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "svg",
     {
       width: "20",
@@ -1714,14 +1750,14 @@ function CloseIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "svg",
     {
       width: "16",
@@ -1730,19 +1766,19 @@ function SearchClearIcon() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MixMatchBundle.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ruleFor2(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core11.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core10.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor2(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -1769,17 +1805,14 @@ function MixMatchBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productHandle
   } = props;
   const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -1813,33 +1846,60 @@ function MixMatchBundle(props) {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+    const pick = (product, variant, quantity) => ({
+      productId: product.id,
+      variantId: variant.id,
+      title: product.title,
+      url: `/products/${product.handle}`,
+      variantTitle: variant.title,
+      featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
+      price: parseFloat(variant.price.amount),
+      compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
+      unitPrice: (0, import_core10.formatUnitPrice)(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        seedCurrency
+      ),
+      quantity
+    });
     const seeds = [];
-    for (const [pid, rule] of Object.entries(bundle.productRules)) {
-      if (!rule.required) continue;
-      const product = bundle.products.find((p) => p.id === pid);
-      const variant = product?.variants.nodes.find(
-        (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
+    for (const product of bundle.products) {
+      let seededVariant = false;
+      for (const variant2 of product.variants.nodes) {
+        const vRule = bundle.variantRules[variant2.id];
+        if (!vRule?.required) continue;
+        if (!(0, import_core10.isVariantFulfillable)(variant2, Math.max(1, vRule.min))) continue;
+        seeds.push(pick(product, variant2, Math.max(1, vRule.min)));
+        seededVariant = true;
+      }
+      if (seededVariant) continue;
+      const rule = bundle.productRules[product.id];
+      if (!rule?.required) continue;
+      const variant = product.variants.nodes.find(
+        (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
       );
-      if (!product || !variant) continue;
-      seeds.push({
-        productId: product.id,
-        variantId: variant.id,
-        title: product.title,
-        url: `/products/${product.handle}`,
-        variantTitle: variant.title,
-        featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
-        price: parseFloat(variant.price.amount),
-        compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
-        unitPrice: (0, import_core11.formatUnitPrice)(
-          variant.unitPrice,
-          variant.unitPriceMeasurement,
-          seedCurrency
-        ),
-        quantity: rule.min
-      });
+      if (!variant) continue;
+      seeds.push(pick(product, variant, rule.min));
+    }
+    if (seeds.length === 0 && productHandle) {
+      const requiredUnits2 = bundle.minQuantity ?? 0;
+      const qualifies = (p) => {
+        const min = bundle.productRules[p.id]?.min ?? 1;
+        return min <= requiredUnits2 && p.variants.nodes.some((v) => (0, import_core10.isVariantFulfillable)(v, min));
+      };
+      const seed = bundle.products.find(
+        (p) => p.handle === productHandle && qualifies(p)
+      ) ?? bundle.products.find(qualifies);
+      if (seed) {
+        const min = bundle.productRules[seed.id]?.min ?? 1;
+        const variant = seed.variants.nodes.find(
+          (v) => (0, import_core10.isVariantFulfillable)(v, min)
+        );
+        if (variant) seeds.push(pick(seed, variant, min));
+      }
     }
     if (seeds.length > 0) setSelections(seeds);
-  }, [bundle, seededFor]);
+  }, [bundle, seededFor, productHandle]);
   const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
   const requiredUnits = bundle?.minQuantity ?? 0;
   const totalQuantity = (0, import_react12.useMemo)(
@@ -1857,7 +1917,7 @@ function MixMatchBundle(props) {
       if (sel.quantity <= 0) continue;
       comparePrice += sel.price * sel.quantity;
       if (bundle) {
-        salePrice += (0, import_core11.calculateDiscount)(
+        salePrice += (0, import_core10.calculateDiscount)(
           sel.price,
           bundle.discountConfig.discountType,
           bundle.discountConfig.discountValue
@@ -1999,9 +2059,9 @@ function MixMatchBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2013,14 +2073,14 @@ function MixMatchBundle(props) {
       if (!rule.required) return false;
       const product = bundle.products.find((p) => p.id === pid);
       return !product?.variants.nodes.some(
-        (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
+        (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
       );
     }
   );
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2032,12 +2092,19 @@ function MixMatchBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": requiredUnits,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -2045,7 +2112,7 @@ function MixMatchBundle(props) {
               "aria-valuenow": shownUnits,
               "aria-valuemin": 0,
               "aria-valuemax": requiredUnits,
-              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -2055,8 +2122,8 @@ function MixMatchBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -2065,7 +2132,7 @@ function MixMatchBundle(props) {
                 children: `${shownUnits} of ${requiredUnits} added`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -2076,7 +2143,7 @@ function MixMatchBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: "lb-mix-match__slots lb-edge-fade",
@@ -2087,15 +2154,15 @@ function MixMatchBundle(props) {
                  button provides the keyboard/AT path (its activation bubbles
                  here); × stops propagation. */
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "div",
                 {
                   className: "lb-mix-match__slot lb-mix-match__slot--filled",
                   onClick: () => setPickerOpen(true),
                   children: [
-                    item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "button",
                         {
                           type: "button",
@@ -2104,15 +2171,15 @@ function MixMatchBundle(props) {
                           children: item.title
                         }
                       ),
-                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core11.formatMoney)(item.compareAtPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core11.formatMoney)(item.price, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core10.formatMoney)(item.compareAtPrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core10.formatMoney)(item.price, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                       ] }),
-                      item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                      item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                     ] }),
-                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2122,13 +2189,13 @@ function MixMatchBundle(props) {
                           e.stopPropagation();
                           removeSlot(index);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon2, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon2, {})
                       }
                     ) : (
                       /* Required pick at its floor — quiet state chip instead of
                          the ×; removal returns once another slot covers the
                          product's minimum (variant swap flow). */
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
                     )
                   ]
                 },
@@ -2137,7 +2204,7 @@ function MixMatchBundle(props) {
             ))
           }
         ),
-        totalQuantity < requiredUnits && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        totalQuantity < requiredUnits && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
             type: "button",
@@ -2145,34 +2212,34 @@ function MixMatchBundle(props) {
             "data-add-product-trigger": true,
             onClick: () => setPickerOpen(true),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlusIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-divider" }),
-        selections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-divider" }),
+        selections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-savings-amount": true, children: (0, import_core11.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-savings-amount": true, children: (0, import_core10.formatMoney)(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core11.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core11.formatMoney)(summary.salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core10.formatMoney)(summary.comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core10.formatMoney)(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2182,10 +2249,9 @@ function MixMatchBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           MixMatchPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             requiredQty: requiredUnits,
@@ -2216,14 +2282,14 @@ function countInStockProducts(bundle) {
     seen.add(product.id);
     const rule = ruleFor2(bundle, product.id);
     const fulfillable = product.variants.nodes.some(
-      (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
+      (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
     );
     if (fulfillable) count += 1;
   }
   return count;
 }
 function PlusIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width: "18",
@@ -2233,14 +2299,14 @@ function PlusIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width: "16",
@@ -2250,8 +2316,8 @@ function CloseIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -2259,8 +2325,8 @@ function CloseIcon2() {
 
 // src/components/VolumeBundle.tsx
 var import_react13 = require("react");
-var import_core12 = require("@lime-bundles/core");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_core11 = require("@lime-bundles/core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -2287,7 +2353,24 @@ function VolumeBundle(props) {
   const [quantity, setQuantity] = (0, import_react13.useState)(1);
   const [addingToCart, setAddingToCart] = (0, import_react13.useState)(false);
   const [cartError, setCartError] = (0, import_react13.useState)(null);
+  const [seededFor, setSeededFor] = (0, import_react13.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  (0, import_react13.useEffect)(() => {
+    if (!bundle || seededFor === bundle.id) return;
+    setSeededFor(bundle.id);
+    const tiers = bundle.volumeTiers;
+    if (tiers.length === 0) return;
+    const best = (0, import_core11.bestValueTierIndex)(
+      tiers,
+      bundle.discountConfig.discountType
+    );
+    const idx = (0, import_core11.resolveDefaultTierIndex)(
+      bundle.widgetConfig.defaultTier,
+      tiers.length,
+      best
+    );
+    setQuantity(tiers[idx].minQuantity);
+  }, [bundle, seededFor]);
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const tiersEdgeFadeRef = useEdgeFade();
   (0, import_react13.useEffect)(() => {
@@ -2311,19 +2394,24 @@ function VolumeBundle(props) {
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const minTierQty = bundle ? (0, import_core12.getMinTierQuantity)(bundle.volumeTiers) : 1;
-  const isSoldOut = variants.length > 0 && !variants.some((v) => (0, import_core12.isVariantFulfillable)(v, minTierQty));
-  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core12.isVariantFulfillable)(v, minTierQty)) ?? variants[0];
+  const minTierQty = bundle ? (0, import_core11.getMinTierQuantity)(bundle.volumeTiers) : 1;
+  const isSoldOut = variants.length > 0 && !variants.some((v) => (0, import_core11.isVariantFulfillable)(v, minTierQty));
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core11.isVariantFulfillable)(v, minTierQty)) ?? variants[0];
+  const tierAvailable = (0, import_react13.useCallback)(
+    (tierQty) => Boolean(displayVariant && (0, import_core11.isVariantFulfillable)(displayVariant, tierQty)),
+    [displayVariant]
+  );
+  const selectedTierUnavailable = !isSoldOut && !tierAvailable(quantity);
   const basePrice = displayVariant ? parseFloat(displayVariant.price.amount) : product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const thumbImage = displayVariant?.image ?? product?.featuredImage ?? null;
-  const unitPriceText = displayVariant ? (0, import_core12.formatUnitPrice)(
+  const unitPriceText = displayVariant ? (0, import_core11.formatUnitPrice)(
     displayVariant.unitPrice,
     displayVariant.unitPriceMeasurement,
     currency
   ) : null;
   const tierSavings = (0, import_react13.useMemo)(
-    () => bundle ? (0, import_core12.calculateTierSavings)(
+    () => bundle ? (0, import_core11.calculateTierSavings)(
       bundle.volumeTiers,
       basePrice,
       quantity,
@@ -2331,21 +2419,18 @@ function VolumeBundle(props) {
     ) : [],
     [bundle, basePrice, quantity]
   );
-  const activeTier = bundle ? (0, import_core12.getActiveTier)(bundle.volumeTiers, quantity) : null;
+  const activeTier = bundle ? (0, import_core11.getActiveTier)(bundle.volumeTiers, quantity) : null;
   const popularTierIndex = (0, import_react13.useMemo)(() => {
-    if (!bundle?.widgetConfig.popularBadge.visible || tierSavings.length === 0) {
-      return -1;
-    }
-    const pinned = bundle.widgetConfig.popularBadge.tierIndex;
-    if (pinned !== void 0) {
-      return Math.min(Math.max(pinned, 0), tierSavings.length - 1);
-    }
-    let best = 0;
-    for (let i = 1; i < tierSavings.length; i++) {
-      if (tierSavings[i].savings > tierSavings[best].savings) best = i;
-    }
-    return best;
-  }, [bundle, tierSavings]);
+    if (!bundle || bundle.volumeTiers.length === 0) return -1;
+    return (0, import_core11.resolvePopularTierIndex)(
+      bundle.widgetConfig.popularBadge.tierIndex,
+      bundle.widgetConfig.popularBadge.visible !== false,
+      (0, import_core11.bestValueTierIndex)(
+        bundle.volumeTiers,
+        bundle.discountConfig.discountType
+      )
+    );
+  }, [bundle]);
   const activeUnitPrice = tierSavings.find((ts) => ts.tier === activeTier)?.unitPrice ?? basePrice;
   const undiscountedTotal = basePrice * quantity;
   const volumeTotal = activeUnitPrice * quantity;
@@ -2354,7 +2439,7 @@ function VolumeBundle(props) {
   const handleAddToCart = (0, import_react13.useCallback)(async () => {
     if (!bundle || !product) return;
     const variant = selectedVariant ?? product.variants.nodes.find(
-      (v) => (0, import_core12.isVariantFulfillable)(v, quantity)
+      (v) => (0, import_core11.isVariantFulfillable)(v, quantity)
     );
     if (!variant) return;
     const lines = [
@@ -2397,15 +2482,15 @@ function VolumeBundle(props) {
     tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2416,12 +2501,19 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -2430,20 +2522,20 @@ function VolumeBundle(props) {
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle__product-price", children: [
-              (0, import_core12.formatMoney)(basePrice, currency),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle__product-price", children: [
+              (0, import_core11.formatMoney)(basePrice, currency),
               " each"
             ] }),
-            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-            showPicker && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
               const dropdownOptions = optionsFor(optionIndex).map((o) => ({
                 value: o.value,
                 label: o.value,
                 disabled: o.disabled
               }));
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 VariantDropdown,
                 {
                   options: dropdownOptions,
@@ -2456,37 +2548,51 @@ function VolumeBundle(props) {
             }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "lb-bundle__tiers lb-edge-fade",
-            role: "table",
-            "aria-label": "Volume discounts",
+            role: "radiogroup",
+            "aria-label": "Select quantity",
             ref: tiersEdgeFadeRef,
             children: tierSavings.map((ts, tierIndex) => {
               const savingsPercent = Math.round(ts.savingsPercent);
               const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              const isChecked = activeTier === ts.tier;
+              const available = tierAvailable(ts.tier.minQuantity);
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "div",
                 {
-                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
-                  role: "row",
+                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""} ${available ? "" : "lb-bundle__tier--oos"}`,
+                  role: "radio",
+                  "aria-checked": isChecked,
+                  "aria-disabled": available ? void 0 : true,
+                  tabIndex: isChecked ? 0 : -1,
+                  onClick: () => {
+                    if (available) setQuantity(ts.tier.minQuantity);
+                  },
+                  onKeyDown: (e) => {
+                    if ((e.key === "Enter" || e.key === " ") && available) {
+                      e.preventDefault();
+                      setQuantity(ts.tier.minQuantity);
+                    }
+                  },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-radio-dot" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-info", role: "cell", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-label", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-radio-dot" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-info", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-label", children: [
                         "Buy ",
                         ts.tier.minQuantity
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-price", children: [
-                        showCompare && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-compare", children: (0, import_core12.formatMoney)(basePrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: (0, import_core12.formatMoney)(ts.unitPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-unit", children: "each" })
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-price", children: [
+                        showCompare && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-compare", children: (0, import_core11.formatMoney)(basePrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: (0, import_core11.formatMoney)(ts.unitPrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-unit", children: "each" })
                       ] })
                     ] }),
-                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-right", role: "cell", children: [
-                      tierIndex === popularTierIndex && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
-                      savingsPercent > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-savings", children: [
+                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-right", children: [
+                      tierIndex === popularTierIndex && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
+                      savingsPercent > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-savings", children: [
                         "Save ",
                         savingsPercent,
                         "%"
@@ -2499,10 +2605,10 @@ function VolumeBundle(props) {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -2510,7 +2616,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -2524,7 +2630,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -2534,23 +2640,23 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        bundle && displayVariant && (0, import_core12.shouldShowLowStockBadge)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        bundle && displayVariant && (0, import_core11.shouldShowLowStockBadge)(
           displayVariant,
           minTierQty,
           bundle.widgetConfig.lowStockThreshold,
           bundle.widgetConfig.showLowStockBadge
-        ) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+        ) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
           "Only ",
           displayVariant.quantityAvailable,
           " left"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
               "Total",
-              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-item-count": true, children: [
+              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-item-count": true, children: [
                 " ",
                 "(",
                 quantity,
@@ -2559,31 +2665,31 @@ function VolumeBundle(props) {
                 ")"
               ] })
             ] }),
-            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(volumeSavings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core11.formatMoney)(volumeSavings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 volumeSavingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core12.formatMoney)(undiscountedTotal, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core12.formatMoney)(volumeTotal, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core11.formatMoney)(undiscountedTotal, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core11.formatMoney)(volumeTotal, currency) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart || isSoldOut,
+            disabled: addingToCart || isSoldOut || selectedTierUnavailable,
             "aria-busy": addingToCart,
-            children: addingToCart ? "Adding..." : isSoldOut ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
+            children: addingToCart ? "Adding..." : isSoldOut || selectedTierUnavailable ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
           }
         )
       ]
@@ -2593,8 +2699,8 @@ function VolumeBundle(props) {
 
 // src/components/BogoBundle.tsx
 var import_react14 = require("react");
-var import_core13 = require("@lime-bundles/core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_core12 = require("@lime-bundles/core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function discountedUnit(price, percent) {
   const cents = Math.round(price * 100);
   const discounted = cents - Math.floor(cents * percent / 100);
@@ -2662,13 +2768,13 @@ function BogoBundle(props) {
   const resolveVariant = (0, import_react14.useCallback)(
     (product, selected, qty) => {
       if (!product) return null;
-      return selected ?? product.variants.nodes.find((v) => (0, import_core13.isVariantFulfillable)(v, qty)) ?? product.variants.nodes[0] ?? null;
+      return selected ?? product.variants.nodes.find((v) => (0, import_core12.isVariantFulfillable)(v, qty)) ?? product.variants.nodes[0] ?? null;
     },
     []
   );
   const oosSides = (0, import_react14.useMemo)(() => {
     if (!bundle) return 0;
-    const short = (product, qty) => !!product && !product.variants.nodes.some((v) => (0, import_core13.isVariantFulfillable)(v, qty));
+    const short = (product, qty) => !!product && !product.variants.nodes.some((v) => (0, import_core12.isVariantFulfillable)(v, qty));
     return (short(buyProduct, bundle.buyQuantity) ? 1 : 0) + (short(getProduct, bundle.getQuantity) ? 1 : 0);
   }, [bundle, buyProduct, getProduct]);
   const handleAddToCart = (0, import_react14.useCallback)(async () => {
@@ -2718,9 +2824,9 @@ function BogoBundle(props) {
     }
   }, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2737,7 +2843,7 @@ function BogoBundle(props) {
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
   const badge = percent === 100 ? "Free" : `${percent}% off`;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2748,12 +2854,19 @@ function BogoBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__products", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__products", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             BogoProductRow,
             {
               side: "buy",
@@ -2765,11 +2878,11 @@ function BogoBundle(props) {
               onVariantChange: handleVariantChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             BogoProductRow,
             {
               side: "get",
@@ -2782,29 +2895,29 @@ function BogoBundle(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core13.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core13.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core13.formatMoney)(salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core12.formatMoney)(comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core12.formatMoney)(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2832,19 +2945,19 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
   (0, import_react14.useEffect)(() => {
     onVariantChange(side, selectedVariant ?? null);
   }, [selectedVariant, side, onVariantChange]);
-  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core13.isVariantFulfillable)(v, quantity)) ?? variants[0];
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core12.isVariantFulfillable)(v, quantity)) ?? variants[0];
   const unit = displayVariant ? parseFloat(displayVariant.price.amount) : 0;
   const isGet = side === "get" && percent > 0;
-  const priceText = isGet ? (0, import_core13.formatMoney)(discountedUnit(unit, percent), currency) : (0, import_core13.formatMoney)(unit, currency);
-  const compareAt = isGet ? (0, import_core13.formatMoney)(unit, currency) : displayVariant?.compareAtPrice && parseFloat(displayVariant.compareAtPrice.amount) > unit ? (0, import_core13.formatMoney)(displayVariant.compareAtPrice.amount, currency) : null;
-  const unitPriceText = displayVariant ? (0, import_core13.formatUnitPrice)(
+  const priceText = isGet ? (0, import_core12.formatMoney)(discountedUnit(unit, percent), currency) : (0, import_core12.formatMoney)(unit, currency);
+  const compareAt = isGet ? (0, import_core12.formatMoney)(unit, currency) : displayVariant?.compareAtPrice && parseFloat(displayVariant.compareAtPrice.amount) > unit ? (0, import_core12.formatMoney)(displayVariant.compareAtPrice.amount, currency) : null;
+  const unitPriceText = displayVariant ? (0, import_core12.formatUnitPrice)(
     displayVariant.unitPrice,
     displayVariant.unitPriceMeasurement,
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
-    thumbImage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
+    thumbImage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "img",
       {
         src: thumbImage.url,
@@ -2853,11 +2966,11 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         loading: "lazy"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-product-prices", children: [
-        compareAt && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-product-prices", children: [
+        compareAt && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             className: "lb-bundle-product-compare-price",
@@ -2865,13 +2978,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
             children: compareAt
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
           "\xD7",
           quantity
         ] })
       ] }),
-      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "span",
         {
           className: "lb-bundle__product-unit-price",
@@ -2879,13 +2992,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
           children: unitPriceText
         }
       ),
-      showPicker && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+      showPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
         const dropdownOptions = optionsFor(optionIndex).map((o) => ({
           value: o.value,
           label: o.value,
           disabled: o.disabled
         }));
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           VariantDropdown,
           {
             options: dropdownOptions,
@@ -2897,25 +3010,25 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         );
       }) })
     ] }),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bogo__badge", children: badge })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bogo__badge", children: badge })
   ] });
 }
 
 // src/components/MultiStepBundle.tsx
 var import_react16 = require("react");
-var import_core15 = require("@lime-bundles/core");
+var import_core14 = require("@lime-bundles/core");
 
 // src/components/MultiStepPicker.tsx
 var import_react15 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_core14 = require("@lime-bundles/core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_core13 = require("@lime-bundles/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ruleFor3(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core14.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core13.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor3(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -2923,15 +3036,14 @@ function variantRuleFor3(bundle, variantId) {
 function sanitizeId2(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function buildEligibleProducts2(bundle, stepIndex, oosBehavior) {
+function buildEligibleProducts2(bundle, stepIndex) {
   const result = [];
-  for (const product of (0, import_core14.productsForStep)(bundle, stepIndex)) {
+  for (const product of (0, import_core13.productsForStep)(bundle, stepIndex)) {
     const rule = ruleFor3(bundle, product.id);
     const available = product.variants.nodes.filter(
-      (v) => (0, import_core14.isVariantFulfillable)(v, rule.min)
+      (v) => (0, import_core13.isVariantFulfillable)(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -2946,7 +3058,6 @@ function normalizeText2(str) {
 }
 var FILTERS_ALL2 = "__all__";
 function MultiStepPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   initialStep,
@@ -2966,6 +3077,8 @@ function MultiStepPicker({
   const overlayRef = (0, import_react15.useRef)(null);
   const dialogRef = (0, import_react15.useRef)(null);
   const titleRef = (0, import_react15.useRef)(null);
+  const closeBtnRef = (0, import_react15.useRef)(null);
+  const listRef = (0, import_react15.useRef)(null);
   const mouseDownTarget = (0, import_react15.useRef)(null);
   const [open, setOpen] = (0, import_react15.useState)(false);
   const [stepIndex, setStepIndex] = (0, import_react15.useState)(
@@ -2982,8 +3095,8 @@ function MultiStepPicker({
   const isLastStep = stepIndex === steps.length - 1;
   const shownUnits = Math.min(unitsInStep, stepMin);
   const eligible = (0, import_react15.useMemo)(
-    () => buildEligibleProducts2(bundle, stepIndex, outOfStockBehavior),
-    [bundle, stepIndex, outOfStockBehavior]
+    () => buildEligibleProducts2(bundle, stepIndex),
+    [bundle, stepIndex]
   );
   const productTypes = (0, import_react15.useMemo)(() => {
     const types = [];
@@ -3006,8 +3119,23 @@ function MultiStepPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
+  (0, import_react15.useEffect)(() => {
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [stepIndex]);
+  const [selectedAtLoad, setSelectedAtLoad] = (0, import_react15.useState)(
+    () => new Set((selections[stepIndex] ?? []).map((s) => s.productId))
+  );
+  const ordered = (0, import_react15.useMemo)(() => {
+    const front = [];
+    const back = [];
+    for (const ep of eligible) {
+      (selectedAtLoad.has(ep.product.id) ? back : front).push(ep);
+    }
+    return front.concat(back);
+  }, [eligible, selectedAtLoad]);
   function goToStep(i) {
     const clamped = Math.max(0, Math.min(steps.length - 1, i));
     setStepIndex(clamped);
@@ -3015,6 +3143,7 @@ function MultiStepPicker({
     setActiveType(FILTERS_ALL2);
     const target = steps[clamped];
     const targetPicks = selections[clamped] ?? [];
+    setSelectedAtLoad(new Set(targetPicks.map((s) => s.productId)));
     const targetUnits = targetPicks.reduce((sum, s) => sum + s.quantity, 0);
     setAnnouncement(
       `Step ${clamped + 1} of ${steps.length}. ${target.name}. ${Math.min(targetUnits, target.minQuantity)} of ${target.minQuantity} added`
@@ -3024,12 +3153,12 @@ function MultiStepPicker({
   const subtitle = `Step ${stepIndex + 1} of ${steps.length} \xB7 ${step?.name ?? ""}`;
   const filtered = (0, import_react15.useMemo)(() => {
     const nq = normalizeText2(query.trim());
-    return eligible.filter((ep) => {
+    return ordered.filter((ep) => {
       const matchesQuery = !nq || normalizeText2(ep.product.title).includes(nq);
       const matchesType = activeType === FILTERS_ALL2 || (ep.product.productType ?? "") === activeType;
       return matchesQuery && matchesType;
     });
-  }, [eligible, query, activeType]);
+  }, [ordered, query, activeType]);
   const showEmpty = filtered.length === 0 && query.trim().length > 0;
   function onOverlayMouseDown(e) {
     mouseDownTarget.current = e.target;
@@ -3047,7 +3176,7 @@ function MultiStepPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         ref: (el) => {
@@ -3059,7 +3188,7 @@ function MultiStepPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             ref: dialogRef,
@@ -3069,10 +3198,10 @@ function MultiStepPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "h4",
                       {
                         className: "lb-mix-match__modal-title",
@@ -3082,26 +3211,27 @@ function MultiStepPicker({
                         children: "Add to your bundle"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon3, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon3, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -3110,7 +3240,7 @@ function MultiStepPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": stepMin,
-                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3123,8 +3253,8 @@ function MultiStepPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3138,7 +3268,7 @@ function MultiStepPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3146,11 +3276,11 @@ function MultiStepPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchClearIcon2, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchClearIcon2, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showFilters && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -3159,7 +3289,7 @@ function MultiStepPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL2, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
                         type: "button",
@@ -3174,7 +3304,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, ref: listRef, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3192,10 +3322,10 @@ function MultiStepPicker({
                 },
                 `${stepIndex}:${ep.product.id}`
               )) }),
-              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
-                stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
+                stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3205,7 +3335,7 @@ function MultiStepPicker({
                     children: "Back"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -3214,7 +3344,7 @@ function MultiStepPicker({
                     children: `${shownUnits} of ${stepMin} added`
                   }
                 ),
-                !isLastStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                !isLastStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3227,7 +3357,7 @@ function MultiStepPicker({
                     children: "Next"
                   }
                 ),
-                isLastStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                isLastStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3271,7 +3401,7 @@ function MultiStepPickerRow({
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core14.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
+  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core13.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
   const vRule = ruleFor3(bundle, product.id, currentVariant?.id);
   const variantMax = variantRuleFor3(bundle, currentVariant?.id)?.max;
   const stepPicks = (0, import_react15.useMemo)(
@@ -3309,7 +3439,7 @@ function MultiStepPickerRow({
   }, [selections, currentVariant, committedQty]);
   const swapUnits = currentVariant ? swapUnitsFor?.(stepIndex, product.id, currentVariant.id) ?? 0 : 0;
   const inSwapState = swapUnits >= vRule.min;
-  const room = (0, import_core14.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep);
+  const room = (0, import_core13.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep);
   const productHeadroom = Math.min(
     rule.max - productOtherUnits,
     variantMax ?? Infinity
@@ -3318,7 +3448,7 @@ function MultiStepPickerRow({
     productHeadroom,
     room === Number.POSITIVE_INFINITY ? productHeadroom : committedQty + room
   );
-  const stockRemaining = currentVariant ? (0, import_core14.maxAddableQuantity)(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
+  const stockRemaining = currentVariant ? (0, import_core13.maxAddableQuantity)(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
   const cap = Math.max(0, Math.min(spotCeiling, stockRemaining));
   const stepperMax = Math.max(vRule.min, cap);
   const [qty, setQty] = (0, import_react15.useState)(vRule.min);
@@ -3331,7 +3461,7 @@ function MultiStepPickerRow({
   }, [variantInStep, currentVariantId, vRule.min]);
   if (!currentVariant || !step) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
-  const unitPriceText = (0, import_core14.formatUnitPrice)(
+  const unitPriceText = (0, import_core13.formatUnitPrice)(
     currentVariant.unitPrice,
     currentVariant.unitPriceMeasurement,
     currency
@@ -3370,7 +3500,7 @@ function MultiStepPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -3379,8 +3509,8 @@ function MultiStepPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -3388,10 +3518,10 @@ function MultiStepPickerRow({
               loading: "lazy"
             }
           ),
-          variantInStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -3400,24 +3530,24 @@ function MultiStepPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-row-price-sale": true, children: (0, import_core14.formatMoney)(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core14.formatMoney)(compareCents, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-row-price-sale": true, children: (0, import_core13.formatMoney)(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core13.formatMoney)(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -3432,17 +3562,17 @@ function MultiStepPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
-          isOos ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
+          isOos ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3464,7 +3594,7 @@ function MultiStepPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -3473,7 +3603,7 @@ function MultiStepPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3498,7 +3628,7 @@ function MultiStepPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -3517,7 +3647,7 @@ function MultiStepPickerRow({
   );
 }
 function CloseIcon3() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: "20",
@@ -3527,14 +3657,14 @@ function CloseIcon3() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: "16",
@@ -3543,19 +3673,19 @@ function SearchClearIcon2() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MultiStepBundle.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ruleFor4(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core15.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core14.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor4(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -3597,10 +3727,6 @@ function MultiStepBundle(props) {
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -3636,9 +3762,9 @@ function MultiStepBundle(props) {
       for (const [pid, rule] of Object.entries(bundle.productRules)) {
         if (!rule.required) continue;
         for (let i = 0; i < steps.length; i++) {
-          const product = (0, import_core15.productsForStep)(bundle, i).find((p) => p.id === pid);
+          const product = (0, import_core14.productsForStep)(bundle, i).find((p) => p.id === pid);
           const variant = product?.variants.nodes.find(
-            (v) => (0, import_core15.isVariantFulfillable)(v, rule.min)
+            (v) => (0, import_core14.isVariantFulfillable)(v, rule.min)
           );
           if (!product || !variant) continue;
           seeded[i].push({
@@ -3650,7 +3776,7 @@ function MultiStepBundle(props) {
             featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
             price: parseFloat(variant.price.amount),
             compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
-            unitPrice: (0, import_core15.formatUnitPrice)(
+            unitPrice: (0, import_core14.formatUnitPrice)(
               variant.unitPrice,
               variant.unitPriceMeasurement,
               seedCurrency
@@ -3691,7 +3817,7 @@ function MultiStepBundle(props) {
         if (sel.quantity <= 0) continue;
         comparePrice += sel.price * sel.quantity;
         if (bundle) {
-          salePrice += (0, import_core15.calculateDiscount)(
+          salePrice += (0, import_core14.calculateDiscount)(
             sel.price,
             bundle.discountConfig.discountType,
             bundle.discountConfig.discountValue
@@ -3839,9 +3965,9 @@ function MultiStepBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -3853,8 +3979,8 @@ function MultiStepBundle(props) {
     ([pid, rule]) => {
       if (!rule.required) return false;
       return !steps.some(
-        (_, i) => (0, import_core15.productsForStep)(bundle, i).some(
-          (p) => p.id === pid && p.variants.nodes.some((v) => (0, import_core15.isVariantFulfillable)(v, rule.min))
+        (_, i) => (0, import_core14.productsForStep)(bundle, i).some(
+          (p) => p.id === pid && p.variants.nodes.some((v) => (0, import_core14.isVariantFulfillable)(v, rule.min))
         )
       );
     }
@@ -3862,7 +3988,7 @@ function MultiStepBundle(props) {
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -3874,12 +4000,19 @@ function MultiStepBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": totalMin,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -3887,7 +4020,7 @@ function MultiStepBundle(props) {
               "aria-valuenow": completedSteps,
               "aria-valuemin": 0,
               "aria-valuemax": steps.length,
-              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3897,8 +4030,8 @@ function MultiStepBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -3907,7 +4040,7 @@ function MultiStepBundle(props) {
                 children: `${completedSteps} of ${steps.length} steps completed`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -3918,15 +4051,15 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "section",
           {
             className: "lb-multi-step__group",
             "data-step-group": i,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "span",
                   {
                     className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
@@ -3935,7 +4068,7 @@ function MultiStepBundle(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
@@ -3945,13 +4078,13 @@ function MultiStepBundle(props) {
                        title button provides the keyboard/AT path (its
                        activation bubbles here); × stops propagation. */
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "div",
                       {
                         className: "lb-mix-match__slot lb-mix-match__slot--filled",
                         onClick: () => setPickerOpenAt(i),
                         children: [
-                          item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             "img",
                             {
                               src: item.featuredImage,
@@ -3959,8 +4092,8 @@ function MultiStepBundle(props) {
                               loading: "lazy"
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -3969,15 +4102,15 @@ function MultiStepBundle(props) {
                                 children: item.title
                               }
                             ),
-                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core15.formatMoney)(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core15.formatMoney)(item.price, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                             ] }),
-                            item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                            item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                           ] }),
-                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             "button",
                             {
                               type: "button",
@@ -3987,13 +4120,13 @@ function MultiStepBundle(props) {
                                 e.stopPropagation();
                                 removeSlot(i, index);
                               },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon4, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
                             }
                           ) : (
                             /* Required pick at its floor — quiet state chip instead
                                of the ×; removal returns once another slot covers
                                the product's minimum (variant swap flow). */
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
                           )
                         ]
                       },
@@ -4002,7 +4135,7 @@ function MultiStepBundle(props) {
                   ))
                 }
               ),
-              (0, import_core15.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              (0, import_core14.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -4011,15 +4144,15 @@ function MultiStepBundle(props) {
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         className: "lb-mix-match__add-product-icon",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlusIcon2, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
                   ]
                 }
               )
@@ -4027,29 +4160,29 @@ function MultiStepBundle(props) {
           },
           i
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-divider" }),
-        allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-divider" }),
+        allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-savings-amount": true, children: (0, import_core15.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-savings-amount": true, children: (0, import_core14.formatMoney)(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core15.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core15.formatMoney)(summary.salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core14.formatMoney)(summary.comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core14.formatMoney)(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -4059,10 +4192,9 @@ function MultiStepBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           MultiStepPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             initialStep: pickerOpenAt,
@@ -4089,13 +4221,13 @@ function MultiStepBundle(props) {
   );
 }
 function stepHasInStockProduct(bundle, stepIndex) {
-  return (0, import_core15.productsForStep)(bundle, stepIndex).some((product) => {
+  return (0, import_core14.productsForStep)(bundle, stepIndex).some((product) => {
     const rule = ruleFor4(bundle, product.id);
-    return product.variants.nodes.some((v) => (0, import_core15.isVariantFulfillable)(v, rule.min));
+    return product.variants.nodes.some((v) => (0, import_core14.isVariantFulfillable)(v, rule.min));
   });
 }
 function PlusIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       width: "18",
@@ -4105,14 +4237,14 @@ function PlusIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon4() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       width: "16",
@@ -4122,8 +4254,8 @@ function CloseIcon4() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -4137,7 +4269,7 @@ async function fetchShopCustomCss(options) {
 
 // src/hooks/useBundlesForProduct.ts
 var import_react17 = require("react");
-var import_core16 = require("@lime-bundles/core");
+var import_core15 = require("@lime-bundles/core");
 var INITIAL_STATE2 = {
   status: "loading",
   bundles: null,
@@ -4150,7 +4282,7 @@ function useBundlesForProduct(options) {
   (0, import_react17.useEffect)(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
-    (0, import_core16.fetchBundlesForProduct)({
+    (0, import_core15.fetchBundlesForProduct)({
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       productHandle: options.productHandle,
@@ -4173,7 +4305,7 @@ function useBundlesForProduct(options) {
       signal: controller.signal
     }).then((settings) => {
       if (controller.signal.aborted) return;
-      (0, import_core16.injectCustomCss)(options.shopDomain, settings.customCss);
+      (0, import_core15.injectCustomCss)(options.shopDomain, settings.customCss);
     }).catch(() => {
     });
     return () => {
@@ -4189,15 +4321,15 @@ function useBundlesForProduct(options) {
 }
 
 // src/index.ts
+var import_core16 = require("@lime-bundles/core");
 var import_core17 = require("@lime-bundles/core");
-var import_core18 = require("@lime-bundles/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BUNDLES_FOR_PRODUCT_QUERY,
   BUNDLE_METAOBJECT_QUERY,
   BogoBundle,
+  BundleCountdown,
   BundleParseError,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,
   MixMatchBundle,
   MultiStepBundle,
@@ -4228,7 +4360,6 @@ var import_core18 = require("@lime-bundles/core");
   parseCents,
   parseMetaobjectBundle,
   parseMetaobjectBundleStrict,
-  parseOutOfStockBehavior,
   percentageDiscountUnit,
   productsForStep,
   reportAddToCart,
@@ -4240,7 +4371,6 @@ var import_core18 = require("@lime-bundles/core");
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
-  useShopSettings,
   useVariantSelection,
   useWidgetConfigVars,
   validateQuantity