@lime-bundles/react 6.1.0 → 7.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/FixedBundle.tsx
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useState as useState6 } from "react";
 import {
   formatMoney,
   formatUnitPrice,
@@ -81,13 +81,10 @@ async function fetchBundleDataWithWarnings(options) {
 // src/fetchShopSettings.ts
 import {
   createStorefrontClient as createStorefrontClient2,
-  SHOP_SETTINGS_QUERY,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR,
-  parseOutOfStockBehavior
+  SHOP_SETTINGS_QUERY
 } from "@lime-bundles/core";
 var FALLBACK = {
-  customCss: null,
-  outOfStockBehavior: DEFAULT_OUT_OF_STOCK_BEHAVIOR
+  customCss: null
 };
 var cache = /* @__PURE__ */ new Map();
 async function fetchShopSettings(options) {
@@ -105,10 +102,7 @@ async function fetchShopSettings(options) {
       { signal: options.signal }
     );
     return {
-      customCss: data.shop?.customCss?.value ?? null,
-      outOfStockBehavior: parseOutOfStockBehavior(
-        data.shop?.outOfStockBehavior?.value
-      )
+      customCss: data.shop?.customCss?.value ?? null
     };
   })();
   cache.set(options.shopDomain, promise);
@@ -266,19 +260,25 @@ function useWidgetConfigVars(config) {
 import { useEffect as useEffect4, useMemo as useMemo2, useState as useState3, useCallback as useCallback3 } from "react";
 import { variants as variantsNs } from "@lime-bundles/core";
 var { findVariantByOptions, isOptionValueAvailable, toPickerVariant } = variantsNs;
-function defaultInitial(variants) {
-  return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
-}
 function useVariantSelection({
   variants,
   optionNames,
   initialVariant,
-  optionValuesByPosition
+  optionValuesByPosition,
+  requiredQtyFor
 }) {
-  const seed = useMemo2(
-    () => initialVariant ?? defaultInitial(variants),
-    [initialVariant, variants]
+  const pickerVariants = useMemo2(
+    () => variants.map((v) => toPickerVariant(v, requiredQtyFor?.(v.id))),
+    [variants, requiredQtyFor]
   );
+  const seed = useMemo2(() => {
+    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] = useState3(
     () => seed ? seed.selectedOptions.map((o) => o.value) : optionNames.map(() => "")
   );
@@ -286,10 +286,6 @@ function useVariantSelection({
     if (!seed) return;
     setSelectedValues(seed.selectedOptions.map((o) => o.value));
   }, [seed?.id]);
-  const pickerVariants = useMemo2(
-    () => variants.map((v) => toPickerVariant(v)),
-    [variants]
-  );
   const selectedVariant = useMemo2(() => {
     if (selectedValues.length !== optionNames.length) return null;
     const match = findVariantByOptions(pickerVariants, selectedValues);
@@ -659,8 +655,48 @@ function VariantDropdown({
   );
 }
 
-// src/components/FixedBundle.tsx
+// src/components/BundleCountdown.tsx
+import { useEffect as useEffect6, useState as useState5 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "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] = useState5(null);
+  useEffect6(() => {
+    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__ */ jsxs2("div", { className: "lb-bundle-countdown", "data-countdown": true, children: [
+    /* @__PURE__ */ jsx2("div", { className: "lb-bundle-countdown__label", children: /* @__PURE__ */ jsx2("span", { children: label }) }),
+    /* @__PURE__ */ jsx2("span", { className: "lb-bundle-countdown__timer", "data-countdown-timer": true, children: formatRemaining(remaining) })
+  ] });
+}
+
+// src/components/FixedBundle.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -684,9 +720,9 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = useState5(false);
-  const [cartError, setCartError] = useState5(null);
-  const [selectedVariants, setSelectedVariants] = useState5({});
+  const [addingToCart, setAddingToCart] = useState6(false);
+  const [cartError, setCartError] = useState6(null);
+  const [selectedVariants, setSelectedVariants] = useState6({});
   const handleVariantChange = useCallback5(
     (productId, variant) => {
       setSelectedVariants((prev) => {
@@ -699,7 +735,7 @@ function FixedBundle(props) {
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const productsEdgeFadeRef = useEdgeFade();
-  useEffect6(() => {
+  useEffect7(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -777,9 +813,9 @@ function FixedBundle(props) {
     }
   }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs2("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -806,7 +842,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__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: (el) => {
@@ -817,11 +853,18 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx2("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx2("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx3("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx3("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
           FixedProductRow,
           {
             bundle,
@@ -832,29 +875,29 @@ function FixedBundle(props) {
           },
           product.id
         )) }),
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx2("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ jsxs2("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx3("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ jsxs3("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx2("span", { "data-savings-amount": true, children: formatMoney(savings, currency) }),
+              /* @__PURE__ */ jsx3("span", { "data-savings-amount": true, children: formatMoney(savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs2("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs3("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney(comparePrice, currency) }),
-            /* @__PURE__ */ jsx2("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney(salePrice, currency) })
+          /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney(comparePrice, currency) }),
+            /* @__PURE__ */ jsx3("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx2(
+        cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx3(
           "button",
           {
             className: "lb-bundle__cta",
@@ -877,9 +920,13 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
   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) => resolveBundleQty(bundle, product.id, variantId)
   });
-  useEffect6(() => {
+  useEffect7(() => {
     onVariantChange(product.id, selectedVariant ?? null);
   }, [selectedVariant, product.id, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find(
@@ -900,15 +947,15 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     bundle.widgetConfig.lowStockThreshold,
     bundle.widgetConfig.showLowStockBadge
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "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__ */ jsx2("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
-        thumbImage && /* @__PURE__ */ jsx2(
+        isOos && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
+        thumbImage && /* @__PURE__ */ jsx3(
           "img",
           {
             src: thumbImage.url,
@@ -917,11 +964,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             loading: "lazy"
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product-info", children: [
-          /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
-          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-          /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-product-prices", children: [
-            compareAt && /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
+          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+          /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-product-prices", children: [
+            compareAt && /* @__PURE__ */ jsx3(
               "span",
               {
                 className: "lb-bundle-product-compare-price",
@@ -929,9 +976,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
                 children: compareAt
               }
             ),
-            /* @__PURE__ */ jsx2("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
+            /* @__PURE__ */ jsx3("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
           ] }),
-          unitPriceText && /* @__PURE__ */ jsx2(
+          unitPriceText && /* @__PURE__ */ jsx3(
             "span",
             {
               className: "lb-bundle__product-unit-price",
@@ -939,18 +986,18 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
               children: unitPriceText
             }
           ),
-          showLowStock && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-low-stock-badge", children: [
+          showLowStock && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-low-stock-badge", children: [
             "Only ",
             displayVariant.quantityAvailable,
             " left"
           ] }),
-          showPicker && /* @__PURE__ */ jsx2("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+          showPicker && /* @__PURE__ */ jsx3("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__ */ jsx2(
+            return /* @__PURE__ */ jsx3(
               VariantDropdown,
               {
                 options: dropdownOptions,
@@ -962,7 +1009,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             );
           }) })
         ] }),
-        displayVariant && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
+        displayVariant && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
           "\xD7",
           displayQty
         ] })
@@ -981,33 +1028,6 @@ import {
   DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE2
 } from "@lime-bundles/core";
 
-// src/hooks/useShopSettings.ts
-import { useEffect as useEffect7, useState as useState6 } from "react";
-import {
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR2
-} from "@lime-bundles/core";
-function useShopSettings(options) {
-  const [outOfStockBehavior, setOutOfStockBehavior] = useState6(DEFAULT_OUT_OF_STOCK_BEHAVIOR2);
-  const { shopDomain, storefrontAccessToken } = options;
-  useEffect7(() => {
-    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 };
-}
-
 // src/components/MixMatchPicker.tsx
 import {
   useEffect as useEffect10,
@@ -1085,6 +1105,7 @@ function useFocusTrap({
   active,
   containerRef,
   onEscape,
+  initialFocusRef,
   returnFocusRef
 }) {
   const previouslyFocused = useRef5(null);
@@ -1092,7 +1113,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();
@@ -1130,7 +1152,7 @@ function useFocusTrap({
 }
 
 // src/components/MixMatchPicker.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ruleFor(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -1144,7 +1166,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) {
@@ -1155,7 +1177,6 @@ function buildEligibleProducts(bundle, oosBehavior) {
       (v) => isVariantFulfillable2(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -1170,7 +1191,6 @@ function normalizeText(str) {
 }
 var FILTERS_ALL = "__all__";
 function MixMatchPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   requiredQty,
@@ -1188,13 +1208,14 @@ function MixMatchPicker({
   const wc = bundle.widgetConfig;
   const overlayRef = useRef6(null);
   const dialogRef = useRef6(null);
+  const closeBtnRef = useRef6(null);
   const mouseDownTarget = useRef6(null);
   const [open, setOpen] = useState7(false);
   const [query, setQuery] = useState7("");
   const [activeType, setActiveType] = useState7(FILTERS_ALL);
   const eligible = useMemo5(
-    () => buildEligibleProducts(bundle, outOfStockBehavior),
-    [bundle, outOfStockBehavior]
+    () => buildEligibleProducts(bundle),
+    [bundle]
   );
   const productTypes = useMemo5(() => {
     const types = [];
@@ -1220,6 +1241,7 @@ function MixMatchPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
   const remaining = Math.max(0, requiredQty - shownUnits);
@@ -1228,14 +1250,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] = useState7(
+    () => new Set(selections.map((s) => s.productId))
+  );
+  const ordered = useMemo5(() => {
+    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 = useMemo5(() => {
     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;
@@ -1253,7 +1286,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__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "div",
       {
         ref: (el) => {
@@ -1265,7 +1298,7 @@ function MixMatchPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs4(
           "div",
           {
             ref: dialogRef,
@@ -1275,30 +1308,31 @@ function MixMatchPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ jsx3("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
-                    /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+              /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ jsx4("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
+                    /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ jsx3(CloseIcon, {})
+                      children: /* @__PURE__ */ jsx4(CloseIcon, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ jsx3(
+                    children: /* @__PURE__ */ jsx4(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -1306,7 +1340,7 @@ function MixMatchPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": requiredQty,
-                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ jsx3(
+                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ jsx4(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -1319,8 +1353,8 @@ function MixMatchPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ jsx3(
+              wc.showSearch && /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     type: "text",
@@ -1334,7 +1368,7 @@ function MixMatchPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ jsx3(
+                query.length > 0 && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1342,11 +1376,11 @@ function MixMatchPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ jsx3(SearchClearIcon, {})
+                    children: /* @__PURE__ */ jsx4(SearchClearIcon, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ jsx3(
+              showFilters && /* @__PURE__ */ jsx4(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -1355,7 +1389,7 @@ function MixMatchPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ jsx3(
+                    return /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -1370,7 +1404,7 @@ function MixMatchPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx3("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx4(
                 MixMatchPickerRow,
                 {
                   bundle,
@@ -1389,10 +1423,10 @@ function MixMatchPicker({
                 },
                 ep.product.id
               )) }),
-              showEmpty && /* @__PURE__ */ jsx3("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx3("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ jsx3("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
-              /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-footer", children: [
-                /* @__PURE__ */ jsx3(
+              showEmpty && /* @__PURE__ */ jsx4("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx4("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ jsx4("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
+              /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-footer", children: [
+                /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -1401,7 +1435,7 @@ function MixMatchPicker({
                     children: `${shownUnits} of ${requiredQty} added`
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1535,7 +1569,7 @@ function MixMatchPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -1544,8 +1578,8 @@ function MixMatchPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ jsx4(
             "img",
             {
               src: thumbImage.url,
@@ -1553,10 +1587,10 @@ function MixMatchPickerRow({
               loading: "lazy"
             }
           ),
-          variantInBundle && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInBundle && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -1565,24 +1599,24 @@ function MixMatchPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ jsxs3("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ jsx3("span", { "data-row-price-sale": true, children: formatMoney2(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx3("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney2(compareCents, currency) })
+          /* @__PURE__ */ jsxs4("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ jsx4("span", { "data-row-price-sale": true, children: formatMoney2(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx4("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney2(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ jsx3("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ jsx4("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__ */ jsxs3(
+            return /* @__PURE__ */ jsxs4(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ jsx3("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ jsx4(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -1597,17 +1631,17 @@ function MixMatchPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ jsx3("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs3(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
+          isOos ? /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs4(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1628,7 +1662,7 @@ function MixMatchPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -1637,7 +1671,7 @@ function MixMatchPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1661,7 +1695,7 @@ function MixMatchPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1680,7 +1714,7 @@ function MixMatchPickerRow({
   );
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "20",
@@ -1690,14 +1724,14 @@ function CloseIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx3("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx3("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx4("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx4("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       width: "16",
@@ -1706,13 +1740,13 @@ function SearchClearIcon() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx3("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__ */ jsx4("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
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ruleFor2(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -1745,17 +1779,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}`,
@@ -1789,33 +1820,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: formatUnitPrice3(
+        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(
+    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 (!isVariantFulfillable3(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) => isVariantFulfillable3(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: formatUnitPrice3(
-          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) => isVariantFulfillable3(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) => isVariantFulfillable3(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 = useMemo6(
@@ -1975,9 +2033,9 @@ function MixMatchBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs4("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs5("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -1996,7 +2054,7 @@ function MixMatchBundle(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__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: (el) => {
@@ -2008,12 +2066,19 @@ function MixMatchBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": requiredUnits,
       children: [
-        /* @__PURE__ */ jsx4("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx4("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx4("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx5("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx5("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ jsx5(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -2021,7 +2086,7 @@ function MixMatchBundle(props) {
               "aria-valuenow": shownUnits,
               "aria-valuemin": 0,
               "aria-valuemax": requiredUnits,
-              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ jsx4(
+              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -2031,8 +2096,8 @@ function MixMatchBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ jsx5(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -2041,7 +2106,7 @@ function MixMatchBundle(props) {
                 children: `${shownUnits} of ${requiredUnits} added`
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -2052,7 +2117,7 @@ function MixMatchBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: "lb-mix-match__slots lb-edge-fade",
@@ -2063,15 +2128,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__ */ jsxs4(
+              /* @__PURE__ */ jsxs5(
                 "div",
                 {
                   className: "lb-mix-match__slot lb-mix-match__slot--filled",
                   onClick: () => setPickerOpen(true),
                   children: [
-                    item.featuredImage && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx4("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
-                    /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__filled-info", children: [
-                      /* @__PURE__ */ jsx4(
+                    item.featuredImage && /* @__PURE__ */ jsx5("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx5("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
+                    /* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__filled-info", children: [
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2080,15 +2145,15 @@ function MixMatchBundle(props) {
                           children: item.title
                         }
                       ),
-                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                      /* @__PURE__ */ jsxs4("span", { className: "lb-mix-match__filled-price", children: [
-                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx4("s", { className: "lb-mix-match__filled-compare", children: formatMoney3(item.compareAtPrice, currency) }),
-                        /* @__PURE__ */ jsx4("span", { className: "lb-bundle-product-price", children: formatMoney3(item.price, currency) }),
-                        /* @__PURE__ */ jsx4("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                      /* @__PURE__ */ jsxs5("span", { className: "lb-mix-match__filled-price", children: [
+                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx5("s", { className: "lb-mix-match__filled-compare", children: formatMoney3(item.compareAtPrice, currency) }),
+                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle-product-price", children: formatMoney3(item.price, currency) }),
+                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                       ] }),
-                      item.unitPrice && /* @__PURE__ */ jsx4("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                      item.unitPrice && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                     ] }),
-                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ jsx4(
+                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ jsx5(
                       "button",
                       {
                         type: "button",
@@ -2098,13 +2163,13 @@ function MixMatchBundle(props) {
                           e.stopPropagation();
                           removeSlot(index);
                         },
-                        children: /* @__PURE__ */ jsx4(CloseIcon2, {})
+                        children: /* @__PURE__ */ jsx5(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__ */ jsx4("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                      /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__slot-required", children: "Required" })
                     )
                   ]
                 },
@@ -2113,7 +2178,7 @@ function MixMatchBundle(props) {
             ))
           }
         ),
-        totalQuantity < requiredUnits && /* @__PURE__ */ jsxs4(
+        totalQuantity < requiredUnits && /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -2121,34 +2186,34 @@ function MixMatchBundle(props) {
             "data-add-product-trigger": true,
             onClick: () => setPickerOpen(true),
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(PlusIcon, {}) }),
-              /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
+              /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(PlusIcon, {}) }),
+              /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx4("div", { className: "lb-bundle-divider" }),
-        selections.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx4("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs4("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-divider" }),
+        selections.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs5("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx4("span", { "data-savings-amount": true, children: formatMoney3(summary.savings, currency) }),
+              /* @__PURE__ */ jsx5("span", { "data-savings-amount": true, children: formatMoney3(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs4("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs5("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs4("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx4("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney3(summary.comparePrice, currency) }),
-            /* @__PURE__ */ jsx4("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney3(summary.salePrice, currency) })
+          /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney3(summary.comparePrice, currency) }),
+            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney3(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx4(
+        cartError && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx5(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2158,10 +2223,9 @@ function MixMatchBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpen && /* @__PURE__ */ jsx4(
+        pickerOpen && /* @__PURE__ */ jsx5(
           MixMatchPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             requiredQty: requiredUnits,
@@ -2199,7 +2263,7 @@ function countInStockProducts(bundle) {
   return count;
 }
 function PlusIcon() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "18",
@@ -2209,14 +2273,14 @@ function PlusIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx4("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx4("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx5("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx5("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon2() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "16",
@@ -2226,8 +2290,8 @@ function CloseIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx4("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx4("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx5("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx5("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -2241,10 +2305,13 @@ import {
   calculateTierSavings,
   getActiveTier,
   getMinTierQuantity,
+  bestValueTierIndex,
+  resolveDefaultTierIndex,
+  resolvePopularTierIndex,
   isVariantFulfillable as isVariantFulfillable4,
   shouldShowLowStockBadge as shouldShowLowStockBadge2
 } from "@lime-bundles/core";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -2271,7 +2338,24 @@ function VolumeBundle(props) {
   const [quantity, setQuantity] = useState9(1);
   const [addingToCart, setAddingToCart] = useState9(false);
   const [cartError, setCartError] = useState9(null);
+  const [seededFor, setSeededFor] = useState9(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  useEffect12(() => {
+    if (!bundle || seededFor === bundle.id) return;
+    setSeededFor(bundle.id);
+    const tiers = bundle.volumeTiers;
+    if (tiers.length === 0) return;
+    const best = bestValueTierIndex(
+      tiers,
+      bundle.discountConfig.discountType
+    );
+    const idx = resolveDefaultTierIndex(
+      bundle.widgetConfig.defaultTier,
+      tiers.length,
+      best
+    );
+    setQuantity(tiers[idx].minQuantity);
+  }, [bundle, seededFor]);
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const tiersEdgeFadeRef = useEdgeFade();
   useEffect12(() => {
@@ -2298,6 +2382,11 @@ function VolumeBundle(props) {
   const minTierQty = bundle ? getMinTierQuantity(bundle.volumeTiers) : 1;
   const isSoldOut = variants.length > 0 && !variants.some((v) => isVariantFulfillable4(v, minTierQty));
   const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable4(v, minTierQty)) ?? variants[0];
+  const tierAvailable = useCallback7(
+    (tierQty) => Boolean(displayVariant && isVariantFulfillable4(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;
@@ -2317,19 +2406,16 @@ function VolumeBundle(props) {
   );
   const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
   const popularTierIndex = useMemo7(() => {
-    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 resolvePopularTierIndex(
+      bundle.widgetConfig.popularBadge.tierIndex,
+      bundle.widgetConfig.popularBadge.visible !== false,
+      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;
@@ -2381,15 +2467,15 @@ function VolumeBundle(props) {
     tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs5("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ jsxs6("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: (el) => {
@@ -2400,12 +2486,19 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx5("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx5("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx6("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx6("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
-          thumbImage && /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
+          thumbImage && /* @__PURE__ */ jsx6(
             "img",
             {
               src: thumbImage.url,
@@ -2414,20 +2507,20 @@ function VolumeBundle(props) {
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ jsx5("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ jsxs5("p", { className: "lb-bundle__product-price", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ jsxs6("p", { className: "lb-bundle__product-price", children: [
               formatMoney4(basePrice, currency),
               " each"
             ] }),
-            unitPriceText && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-            showPicker && /* @__PURE__ */ jsx5("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            unitPriceText && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ jsx6("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__ */ jsx5(
+              return /* @__PURE__ */ jsx6(
                 VariantDropdown,
                 {
                   options: dropdownOptions,
@@ -2440,37 +2533,51 @@ function VolumeBundle(props) {
             }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "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__ */ jsxs5(
+              const isChecked = activeTier === ts.tier;
+              const available = tierAvailable(ts.tier.minQuantity);
+              return /* @__PURE__ */ jsxs6(
                 "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__ */ jsx5("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-radio-dot" }) }),
-                    /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-info", role: "cell", children: [
-                      /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-label", children: [
+                    /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-radio-dot" }) }),
+                    /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-info", children: [
+                      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-label", children: [
                         "Buy ",
                         ts.tier.minQuantity
                       ] }),
-                      /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-price", children: [
-                        showCompare && /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-compare", children: formatMoney4(basePrice, currency) }),
-                        /* @__PURE__ */ jsx5("span", { children: formatMoney4(ts.unitPrice, currency) }),
-                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-unit", children: "each" })
+                      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-price", children: [
+                        showCompare && /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-compare", children: formatMoney4(basePrice, currency) }),
+                        /* @__PURE__ */ jsx6("span", { children: formatMoney4(ts.unitPrice, currency) }),
+                        /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-unit", children: "each" })
                       ] })
                     ] }),
-                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-right", role: "cell", children: [
-                      tierIndex === popularTierIndex && /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
-                      savingsPercent > 0 && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-savings", children: [
+                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-right", children: [
+                      tierIndex === popularTierIndex && /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
+                      savingsPercent > 0 && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-savings", children: [
                         "Save ",
                         savingsPercent,
                         "%"
@@ -2483,10 +2590,10 @@ function VolumeBundle(props) {
             })
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ jsx5("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ jsx6("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -2494,7 +2601,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -2508,7 +2615,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -2518,23 +2625,23 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        cartError && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         bundle && displayVariant && shouldShowLowStockBadge2(
           displayVariant,
           minTierQty,
           bundle.widgetConfig.lowStockThreshold,
           bundle.widgetConfig.showLowStockBadge
-        ) && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-low-stock-badge", children: [
+        ) && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-low-stock-badge", children: [
           "Only ",
           displayVariant.quantityAvailable,
           " left"
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
+        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
               "Total",
-              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ jsxs5("span", { "data-item-count": true, children: [
+              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ jsxs6("span", { "data-item-count": true, children: [
                 " ",
                 "(",
                 quantity,
@@ -2543,31 +2650,31 @@ function VolumeBundle(props) {
                 ")"
               ] })
             ] }),
-            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ jsxs5("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ jsxs6("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx5("span", { "data-savings-amount": true, children: formatMoney4(volumeSavings, currency) }),
+              /* @__PURE__ */ jsx6("span", { "data-savings-amount": true, children: formatMoney4(volumeSavings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs5("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs6("span", { "data-savings-percent": true, children: [
                 "(",
                 volumeSavingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney4(undiscountedTotal, currency) }),
-            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: formatMoney4(volumeTotal, currency) })
+          /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney4(undiscountedTotal, currency) }),
+            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: formatMoney4(volumeTotal, currency) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "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`
           }
         )
       ]
@@ -2582,7 +2689,7 @@ import {
   formatUnitPrice as formatUnitPrice5,
   isVariantFulfillable as isVariantFulfillable5
 } from "@lime-bundles/core";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function discountedUnit(price, percent) {
   const cents = Math.round(price * 100);
   const discounted = cents - Math.floor(cents * percent / 100);
@@ -2706,9 +2813,9 @@ function BogoBundle(props) {
     }
   }, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs6("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs7("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx7("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx7("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2725,7 +2832,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__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: (el) => {
@@ -2736,12 +2843,19 @@ function BogoBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx6("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx6("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx7("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx7("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx7("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__products", children: [
-          /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "lb-bundle__products", children: [
+          /* @__PURE__ */ jsx7(
             BogoProductRow,
             {
               side: "buy",
@@ -2753,11 +2867,11 @@ function BogoBundle(props) {
               onVariantChange: handleVariantChange
             }
           ),
-          /* @__PURE__ */ jsx6("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            /* @__PURE__ */ jsx6("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-            /* @__PURE__ */ jsx6("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          /* @__PURE__ */ jsx7("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx7("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx7("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
           ] }) }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             BogoProductRow,
             {
               side: "get",
@@ -2770,29 +2884,29 @@ function BogoBundle(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ jsxs6("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx7("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx7("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ jsxs7("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx6("span", { "data-savings-amount": true, children: formatMoney5(savings, currency) }),
+              /* @__PURE__ */ jsx7("span", { "data-savings-amount": true, children: formatMoney5(savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs6("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs7("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney5(comparePrice, currency) }),
-            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney5(salePrice, currency) })
+          /* @__PURE__ */ jsxs7("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ jsx7("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney5(comparePrice, currency) }),
+            /* @__PURE__ */ jsx7("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney5(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx6(
+        cartError && /* @__PURE__ */ jsx7("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx7(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2831,8 +2945,8 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
-  return /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
-    thumbImage && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
+    thumbImage && /* @__PURE__ */ jsx7(
       "img",
       {
         src: thumbImage.url,
@@ -2841,11 +2955,11 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         loading: "lazy"
       }
     ),
-    /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
-      /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-title", children: product.title }),
-      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-product-prices", children: [
-        compareAt && /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs7("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ jsx7("p", { className: "lb-bundle__product-title", children: product.title }),
+      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx7("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+      /* @__PURE__ */ jsxs7("span", { className: "lb-bundle-product-prices", children: [
+        compareAt && /* @__PURE__ */ jsx7(
           "span",
           {
             className: "lb-bundle-product-compare-price",
@@ -2853,13 +2967,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
             children: compareAt
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
-        /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
+        /* @__PURE__ */ jsx7("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
+        /* @__PURE__ */ jsxs7("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
           "\xD7",
           quantity
         ] })
       ] }),
-      unitPriceText && /* @__PURE__ */ jsx6(
+      unitPriceText && /* @__PURE__ */ jsx7(
         "span",
         {
           className: "lb-bundle__product-unit-price",
@@ -2867,13 +2981,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
           children: unitPriceText
         }
       ),
-      showPicker && /* @__PURE__ */ jsx6("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+      showPicker && /* @__PURE__ */ jsx7("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__ */ jsx6(
+        return /* @__PURE__ */ jsx7(
           VariantDropdown,
           {
             options: dropdownOptions,
@@ -2885,7 +2999,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         );
       }) })
     ] }),
-    badge && /* @__PURE__ */ jsx6("span", { className: "lb-bogo__badge", children: badge })
+    badge && /* @__PURE__ */ jsx7("span", { className: "lb-bogo__badge", children: badge })
   ] });
 }
 
@@ -2918,7 +3032,7 @@ import {
   stepHeadroom,
   DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE3
 } from "@lime-bundles/core";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ruleFor3(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -2932,7 +3046,7 @@ 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 productsForStep(bundle, stepIndex)) {
     const rule = ruleFor3(bundle, product.id);
@@ -2940,7 +3054,6 @@ function buildEligibleProducts2(bundle, stepIndex, oosBehavior) {
       (v) => isVariantFulfillable6(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -2955,7 +3068,6 @@ function normalizeText2(str) {
 }
 var FILTERS_ALL2 = "__all__";
 function MultiStepPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   initialStep,
@@ -2975,6 +3087,8 @@ function MultiStepPicker({
   const overlayRef = useRef7(null);
   const dialogRef = useRef7(null);
   const titleRef = useRef7(null);
+  const closeBtnRef = useRef7(null);
+  const listRef = useRef7(null);
   const mouseDownTarget = useRef7(null);
   const [open, setOpen] = useState11(false);
   const [stepIndex, setStepIndex] = useState11(
@@ -2991,8 +3105,8 @@ function MultiStepPicker({
   const isLastStep = stepIndex === steps.length - 1;
   const shownUnits = Math.min(unitsInStep, stepMin);
   const eligible = useMemo9(
-    () => buildEligibleProducts2(bundle, stepIndex, outOfStockBehavior),
-    [bundle, stepIndex, outOfStockBehavior]
+    () => buildEligibleProducts2(bundle, stepIndex),
+    [bundle, stepIndex]
   );
   const productTypes = useMemo9(() => {
     const types = [];
@@ -3015,8 +3129,23 @@ function MultiStepPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
+  useEffect14(() => {
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [stepIndex]);
+  const [selectedAtLoad, setSelectedAtLoad] = useState11(
+    () => new Set((selections[stepIndex] ?? []).map((s) => s.productId))
+  );
+  const ordered = useMemo9(() => {
+    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);
@@ -3024,6 +3153,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`
@@ -3033,12 +3163,12 @@ function MultiStepPicker({
   const subtitle = `Step ${stepIndex + 1} of ${steps.length} \xB7 ${step?.name ?? ""}`;
   const filtered = useMemo9(() => {
     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;
@@ -3056,7 +3186,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__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         ref: (el) => {
@@ -3068,7 +3198,7 @@ function MultiStepPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ jsxs7(
+        children: /* @__PURE__ */ jsxs8(
           "div",
           {
             ref: dialogRef,
@@ -3078,10 +3208,10 @@ function MultiStepPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ jsx8(
                       "h4",
                       {
                         className: "lb-mix-match__modal-title",
@@ -3091,26 +3221,27 @@ function MultiStepPicker({
                         children: "Add to your bundle"
                       }
                     ),
-                    /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                    /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ jsx7(CloseIcon3, {})
+                      children: /* @__PURE__ */ jsx8(CloseIcon3, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ jsx7(
+                    children: /* @__PURE__ */ jsx8(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -3119,7 +3250,7 @@ function MultiStepPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": stepMin,
-                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ jsx7(
+                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ jsx8(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3132,8 +3263,8 @@ function MultiStepPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ jsx7(
+              wc.showSearch && /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ jsx8(
                   "input",
                   {
                     type: "text",
@@ -3147,7 +3278,7 @@ function MultiStepPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ jsx7(
+                query.length > 0 && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3155,11 +3286,11 @@ function MultiStepPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ jsx7(SearchClearIcon2, {})
+                    children: /* @__PURE__ */ jsx8(SearchClearIcon2, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ jsx7(
+              showFilters && /* @__PURE__ */ jsx8(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -3168,7 +3299,7 @@ function MultiStepPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL2, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ jsx7(
+                    return /* @__PURE__ */ jsx8(
                       "button",
                       {
                         type: "button",
@@ -3183,7 +3314,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx7("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, ref: listRef, children: filtered.map((ep) => /* @__PURE__ */ jsx8(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3201,10 +3332,10 @@ function MultiStepPicker({
                 },
                 `${stepIndex}:${ep.product.id}`
               )) }),
-              showEmpty && /* @__PURE__ */ jsx7("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx7("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ jsx7("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
-              /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
-                stepIndex > 0 && /* @__PURE__ */ jsx7(
+              showEmpty && /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx8("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ jsx8("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
+              /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
+                stepIndex > 0 && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3214,7 +3345,7 @@ function MultiStepPicker({
                     children: "Back"
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -3223,7 +3354,7 @@ function MultiStepPicker({
                     children: `${shownUnits} of ${stepMin} added`
                   }
                 ),
-                !isLastStep && /* @__PURE__ */ jsx7(
+                !isLastStep && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3236,7 +3367,7 @@ function MultiStepPicker({
                     children: "Next"
                   }
                 ),
-                isLastStep && /* @__PURE__ */ jsx7(
+                isLastStep && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3379,7 +3510,7 @@ function MultiStepPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -3388,8 +3519,8 @@ function MultiStepPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ jsx8(
             "img",
             {
               src: thumbImage.url,
@@ -3397,10 +3528,10 @@ function MultiStepPickerRow({
               loading: "lazy"
             }
           ),
-          variantInStep && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInStep && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx8(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -3409,24 +3540,24 @@ function MultiStepPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ jsxs7("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ jsx7("span", { "data-row-price-sale": true, children: formatMoney6(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx7("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney6(compareCents, currency) })
+          /* @__PURE__ */ jsxs8("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ jsx8("span", { "data-row-price-sale": true, children: formatMoney6(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx8("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney6(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ jsx7("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ jsx8("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__ */ jsxs7(
+            return /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ jsx8(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -3441,17 +3572,17 @@ function MultiStepPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
-          isOos ? /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ jsx7("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs7(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
+          isOos ? /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
@@ -3473,7 +3604,7 @@ function MultiStepPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -3482,7 +3613,7 @@ function MultiStepPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
@@ -3507,7 +3638,7 @@ function MultiStepPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -3526,7 +3657,7 @@ function MultiStepPickerRow({
   );
 }
 function CloseIcon3() {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "svg",
     {
       width: "20",
@@ -3536,14 +3667,14 @@ function CloseIcon3() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx7("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx7("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx8("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx8("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon2() {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       width: "16",
@@ -3552,13 +3683,13 @@ function SearchClearIcon2() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx7("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__ */ jsx8("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
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function ruleFor4(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -3606,10 +3737,6 @@ function MultiStepBundle(props) {
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -3848,9 +3975,9 @@ function MultiStepBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs8("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx8("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx8("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs9("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx9("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx9("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -3871,7 +3998,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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: (el) => {
@@ -3883,12 +4010,19 @@ function MultiStepBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": totalMin,
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx8("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx8("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx9("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx9("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx9("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ jsx9(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -3896,7 +4030,7 @@ function MultiStepBundle(props) {
               "aria-valuenow": completedSteps,
               "aria-valuemin": 0,
               "aria-valuemax": steps.length,
-              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ jsx8(
+              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ jsx9(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3906,8 +4040,8 @@ function MultiStepBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ jsx9(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -3916,7 +4050,7 @@ function MultiStepBundle(props) {
                 children: `${completedSteps} of ${steps.length} steps completed`
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -3927,15 +4061,15 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx8("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx9("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs9(
           "section",
           {
             className: "lb-multi-step__group",
             "data-step-group": i,
             children: [
-              /* @__PURE__ */ jsxs8("div", { className: "lb-multi-step__group-heading", children: [
-                /* @__PURE__ */ jsx8("span", { className: "lb-multi-step__group-name", children: step.name }),
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs9("div", { className: "lb-multi-step__group-heading", children: [
+                /* @__PURE__ */ jsx9("span", { className: "lb-multi-step__group-name", children: step.name }),
+                /* @__PURE__ */ jsx9(
                   "span",
                   {
                     className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
@@ -3944,7 +4078,7 @@ function MultiStepBundle(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
@@ -3954,13 +4088,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__ */ jsxs8(
+                    /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         className: "lb-mix-match__slot lb-mix-match__slot--filled",
                         onClick: () => setPickerOpenAt(i),
                         children: [
-                          item.featuredImage && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx8(
+                          item.featuredImage && /* @__PURE__ */ jsx9("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx9(
                             "img",
                             {
                               src: item.featuredImage,
@@ -3968,8 +4102,8 @@ function MultiStepBundle(props) {
                               loading: "lazy"
                             }
                           ) }),
-                          /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__filled-info", children: [
-                            /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__filled-info", children: [
+                            /* @__PURE__ */ jsx9(
                               "button",
                               {
                                 type: "button",
@@ -3978,15 +4112,15 @@ function MultiStepBundle(props) {
                                 children: item.title
                               }
                             ),
-                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                            /* @__PURE__ */ jsxs8("span", { className: "lb-mix-match__filled-price", children: [
-                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx8("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ jsx8("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
-                              /* @__PURE__ */ jsx8("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                            /* @__PURE__ */ jsxs9("span", { className: "lb-mix-match__filled-price", children: [
+                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx9("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
+                              /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
+                              /* @__PURE__ */ jsx9("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                             ] }),
-                            item.unitPrice && /* @__PURE__ */ jsx8("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                            item.unitPrice && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                           ] }),
-                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx8(
+                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx9(
                             "button",
                             {
                               type: "button",
@@ -3996,13 +4130,13 @@ function MultiStepBundle(props) {
                                 e.stopPropagation();
                                 removeSlot(i, index);
                               },
-                              children: /* @__PURE__ */ jsx8(CloseIcon4, {})
+                              children: /* @__PURE__ */ jsx9(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__ */ jsx8("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                            /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__slot-required", children: "Required" })
                           )
                         ]
                       },
@@ -4011,7 +4145,7 @@ function MultiStepBundle(props) {
                   ))
                 }
               ),
-              stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs8(
+              stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   type: "button",
@@ -4020,15 +4154,15 @@ function MultiStepBundle(props) {
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9(
                       "span",
                       {
                         className: "lb-mix-match__add-product-icon",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx8(PlusIcon2, {})
+                        children: /* @__PURE__ */ jsx9(PlusIcon2, {})
                       }
                     ),
-                    /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                    /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
                   ]
                 }
               )
@@ -4036,29 +4170,29 @@ function MultiStepBundle(props) {
           },
           i
         )) }),
-        /* @__PURE__ */ jsx8("div", { className: "lb-bundle-divider" }),
-        allSatisfied && /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx8("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs8("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx9("div", { className: "lb-bundle-divider" }),
+        allSatisfied && /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx9("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs9("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx8("span", { "data-savings-amount": true, children: formatMoney7(summary.savings, currency) }),
+              /* @__PURE__ */ jsx9("span", { "data-savings-amount": true, children: formatMoney7(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs8("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs9("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx8("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney7(summary.comparePrice, currency) }),
-            /* @__PURE__ */ jsx8("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney7(summary.salePrice, currency) })
+          /* @__PURE__ */ jsxs9("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney7(summary.comparePrice, currency) }),
+            /* @__PURE__ */ jsx9("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney7(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx8("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx8(
+        cartError && /* @__PURE__ */ jsx9("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx9(
           "button",
           {
             className: "lb-bundle__cta",
@@ -4068,10 +4202,9 @@ function MultiStepBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpenAt !== null && /* @__PURE__ */ jsx8(
+        pickerOpenAt !== null && /* @__PURE__ */ jsx9(
           MultiStepPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             initialStep: pickerOpenAt,
@@ -4104,7 +4237,7 @@ function stepHasInStockProduct(bundle, stepIndex) {
   });
 }
 function PlusIcon2() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
       width: "18",
@@ -4114,14 +4247,14 @@ function PlusIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx8("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx9("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx9("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon4() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
       width: "16",
@@ -4131,8 +4264,8 @@ function CloseIcon4() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx8("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx9("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx9("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -4233,16 +4366,14 @@ import {
   parseMetaobjectBundleStrict as parseMetaobjectBundleStrict2,
   BUNDLE_METAOBJECT_QUERY as BUNDLE_METAOBJECT_QUERY2,
   BUNDLES_FOR_PRODUCT_QUERY,
-  SHOP_SETTINGS_QUERY as SHOP_SETTINGS_QUERY2,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR3,
-  parseOutOfStockBehavior as parseOutOfStockBehavior2
+  SHOP_SETTINGS_QUERY as SHOP_SETTINGS_QUERY2
 } from "@lime-bundles/core";
 export {
   BUNDLES_FOR_PRODUCT_QUERY,
   BUNDLE_METAOBJECT_QUERY2 as BUNDLE_METAOBJECT_QUERY,
   BogoBundle,
+  BundleCountdown,
   BundleParseError2 as BundleParseError,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR3 as DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,
   MixMatchBundle,
   MultiStepBundle,
@@ -4273,7 +4404,6 @@ export {
   parseCents,
   parseMetaobjectBundle,
   parseMetaobjectBundleStrict2 as parseMetaobjectBundleStrict,
-  parseOutOfStockBehavior2 as parseOutOfStockBehavior,
   percentageDiscountUnit,
   productsForStep3 as productsForStep,
   reportAddToCart2 as reportAddToCart,
@@ -4285,7 +4415,6 @@ export {
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
-  useShopSettings,
   useVariantSelection,
   useWidgetConfigVars,
   validateQuantity