@lime-bundles/react 6.0.0 → 6.2.0

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   BUNDLES_FOR_PRODUCT_QUERY: () => import_core18.BUNDLES_FOR_PRODUCT_QUERY,
   BUNDLE_METAOBJECT_QUERY: () => import_core18.BUNDLE_METAOBJECT_QUERY,
   BogoBundle: () => BogoBundle,
+  BundleCountdown: () => BundleCountdown,
   BundleParseError: () => import_core17.BundleParseError,
   DEFAULT_OUT_OF_STOCK_BEHAVIOR: () => import_core18.DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle: () => FixedBundle,
@@ -75,7 +76,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/FixedBundle.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_core8 = require("@lime-bundles/core");
 
 // src/hooks/useBundleData.ts
@@ -702,8 +703,48 @@ function VariantDropdown({
   );
 }
 
-// src/components/FixedBundle.tsx
+// src/components/BundleCountdown.tsx
+var import_react7 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function pad(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+function formatRemaining(remaining) {
+  const days = Math.floor(remaining / 864e5);
+  const hours = Math.floor(remaining % 864e5 / 36e5);
+  const mins = Math.floor(remaining % 36e5 / 6e4);
+  const secs = Math.floor(remaining % 6e4 / 1e3);
+  return days > 0 ? days + "d " + pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s" : pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s";
+}
+function BundleCountdown({
+  endsAt,
+  widgetConfig,
+  label = "Limited time offer"
+}) {
+  const enabled = !!endsAt && widgetConfig?.countdown?.showCountdown !== false;
+  const endTime = enabled ? new Date(endsAt).getTime() : NaN;
+  const [remaining, setRemaining] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!enabled || isNaN(endTime)) {
+      setRemaining(null);
+      return;
+    }
+    const update = () => setRemaining(endTime - Date.now());
+    update();
+    const interval = setInterval(update, 1e3);
+    return () => clearInterval(interval);
+  }, [enabled, endTime]);
+  if (!enabled || isNaN(endTime) || remaining === null || remaining <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-countdown", "data-countdown": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle-countdown__label", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-countdown__timer", "data-countdown-timer": true, children: formatRemaining(remaining) })
+  ] });
+}
+
+// src/components/FixedBundle.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -727,10 +768,10 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = (0, import_react7.useState)(false);
-  const [cartError, setCartError] = (0, import_react7.useState)(null);
-  const [selectedVariants, setSelectedVariants] = (0, import_react7.useState)({});
-  const handleVariantChange = (0, import_react7.useCallback)(
+  const [addingToCart, setAddingToCart] = (0, import_react8.useState)(false);
+  const [cartError, setCartError] = (0, import_react8.useState)(null);
+  const [selectedVariants, setSelectedVariants] = (0, import_react8.useState)({});
+  const handleVariantChange = (0, import_react8.useCallback)(
     (productId, variant) => {
       setSelectedVariants((prev) => {
         if (prev[productId] === variant) return prev;
@@ -742,7 +783,7 @@ function FixedBundle(props) {
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const productsEdgeFadeRef = useEdgeFade();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -755,7 +796,7 @@ function FixedBundle(props) {
       );
     }
   }, [result, onError]);
-  const oosProductIds = (0, import_react7.useMemo)(() => {
+  const oosProductIds = (0, import_react8.useMemo)(() => {
     if (!bundle) return /* @__PURE__ */ new Set();
     return new Set(
       bundle.products.filter(
@@ -765,7 +806,7 @@ function FixedBundle(props) {
       ).map((p) => p.id)
     );
   }, [bundle]);
-  const handleAddToCart = (0, import_react7.useCallback)(async () => {
+  const handleAddToCart = (0, import_react8.useCallback)(async () => {
     if (!bundle) return;
     const bundleLines = bundle.products.filter(
       (p) => p.variants.nodes.some(
@@ -820,9 +861,9 @@ function FixedBundle(props) {
     }
   }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -849,7 +890,7 @@ function FixedBundle(props) {
   const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -860,11 +901,18 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           FixedProductRow,
           {
             bundle,
@@ -875,29 +923,29 @@ function FixedBundle(props) {
           },
           product.id
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-savings-amount": true, children: (0, import_core8.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-savings-amount": true, children: (0, import_core8.formatMoney)(savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core8.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core8.formatMoney)(salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core8.formatMoney)(comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core8.formatMoney)(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -913,7 +961,7 @@ function FixedBundle(props) {
 }
 function FixedProductRow({ bundle, product, currency, isOos, onVariantChange }) {
   const variants = product.variants.nodes;
-  const optionNames = (0, import_react7.useMemo)(() => {
+  const optionNames = (0, import_react8.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
@@ -922,7 +970,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     variants,
     optionNames
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onVariantChange(product.id, selectedVariant ?? null);
   }, [selectedVariant, product.id, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find(
@@ -943,15 +991,15 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     bundle.widgetConfig.lowStockThreshold,
     bundle.widgetConfig.showLowStockBadge
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
       "aria-disabled": isOos || void 0,
       part: "product",
       children: [
-        isOos && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
-        thumbImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        isOos && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
+        thumbImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "img",
           {
             src: thumbImage.url,
@@ -960,11 +1008,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             loading: "lazy"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-product-prices", children: [
-            compareAt && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-product-prices", children: [
+            compareAt && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "span",
               {
                 className: "lb-bundle-product-compare-price",
@@ -972,9 +1020,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
                 children: compareAt
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
               className: "lb-bundle__product-unit-price",
@@ -982,18 +1030,18 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
               children: unitPriceText
             }
           ),
-          showLowStock && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+          showLowStock && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
             "Only ",
             displayVariant.quantityAvailable,
             " left"
           ] }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               VariantDropdown,
               {
                 options: dropdownOptions,
@@ -1005,7 +1053,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             );
           }) })
         ] }),
-        displayVariant && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
+        displayVariant && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
           "\xD7",
           displayQty
         ] })
@@ -1015,16 +1063,16 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
 }
 
 // src/components/MixMatchBundle.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_core11 = require("@lime-bundles/core");
 
 // src/hooks/useShopSettings.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_core9 = require("@lime-bundles/core");
 function useShopSettings(options) {
-  const [outOfStockBehavior, setOutOfStockBehavior] = (0, import_react8.useState)(import_core9.DEFAULT_OUT_OF_STOCK_BEHAVIOR);
+  const [outOfStockBehavior, setOutOfStockBehavior] = (0, import_react9.useState)(import_core9.DEFAULT_OUT_OF_STOCK_BEHAVIOR);
   const { shopDomain, storefrontAccessToken } = options;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const controller = new AbortController();
     let active = true;
     fetchShopSettingsOrDefault({
@@ -1044,12 +1092,12 @@ function useShopSettings(options) {
 }
 
 // src/components/MixMatchPicker.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom = require("react-dom");
 var import_core10 = require("@lime-bundles/core");
 
 // src/hooks/useScrollLock.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var lockCount = 0;
 var savedY = 0;
 function lock() {
@@ -1078,7 +1126,7 @@ function unlock() {
   window.scrollTo(0, savedY);
 }
 function useScrollLock(active) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!active) return;
     lock();
     return unlock;
@@ -1086,7 +1134,7 @@ function useScrollLock(active) {
 }
 
 // src/hooks/useFocusTrap.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -1111,8 +1159,8 @@ function useFocusTrap({
   onEscape,
   returnFocusRef
 }) {
-  const previouslyFocused = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const previouslyFocused = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (!active) return;
     const container = containerRef.current;
     previouslyFocused.current = document.activeElement ?? null;
@@ -1154,10 +1202,17 @@ function useFocusTrap({
 }
 
 // src/components/MixMatchPicker.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ruleFor(bundle, productId) {
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ruleFor(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? import_core10.DEFAULT_PRODUCT_RULE;
 }
+function variantRuleFor(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
 function sanitizeId(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
@@ -1203,17 +1258,17 @@ function MixMatchPicker({
   styleVarsRef
 }) {
   const wc = bundle.widgetConfig;
-  const overlayRef = (0, import_react11.useRef)(null);
-  const dialogRef = (0, import_react11.useRef)(null);
-  const mouseDownTarget = (0, import_react11.useRef)(null);
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const [query, setQuery] = (0, import_react11.useState)("");
-  const [activeType, setActiveType] = (0, import_react11.useState)(FILTERS_ALL);
-  const eligible = (0, import_react11.useMemo)(
+  const overlayRef = (0, import_react12.useRef)(null);
+  const dialogRef = (0, import_react12.useRef)(null);
+  const mouseDownTarget = (0, import_react12.useRef)(null);
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [query, setQuery] = (0, import_react12.useState)("");
+  const [activeType, setActiveType] = (0, import_react12.useState)(FILTERS_ALL);
+  const eligible = (0, import_react12.useMemo)(
     () => buildEligibleProducts(bundle, outOfStockBehavior),
     [bundle, outOfStockBehavior]
   );
-  const productTypes = (0, import_react11.useMemo)(() => {
+  const productTypes = (0, import_react12.useMemo)(() => {
     const types = [];
     const seen = /* @__PURE__ */ new Set();
     for (const ep of eligible) {
@@ -1229,7 +1284,7 @@ function MixMatchPicker({
   const totalUnits = selections.reduce((sum, s) => sum + s.quantity, 0);
   const atCapacity = totalUnits >= requiredQty;
   const shownUnits = Math.min(totalUnits, requiredQty);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -1245,7 +1300,7 @@ 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 filtered = (0, import_react11.useMemo)(() => {
+  const filtered = (0, import_react12.useMemo)(() => {
     const nq = normalizeText(query.trim());
     return eligible.filter((ep) => {
       const matchesQuery = !nq || normalizeText(ep.product.title).includes(nq);
@@ -1270,7 +1325,7 @@ function MixMatchPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         ref: (el) => {
@@ -1282,7 +1337,7 @@ function MixMatchPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             ref: dialogRef,
@@ -1292,13 +1347,13 @@ function MixMatchPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1306,16 +1361,16 @@ function MixMatchPicker({
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -1323,7 +1378,7 @@ function MixMatchPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": requiredQty,
-                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -1336,8 +1391,8 @@ function MixMatchPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "input",
                   {
                     type: "text",
@@ -1351,7 +1406,7 @@ function MixMatchPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1359,11 +1414,11 @@ function MixMatchPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchClearIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchClearIcon, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              showFilters && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -1372,7 +1427,7 @@ function MixMatchPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "button",
                       {
                         type: "button",
@@ -1387,7 +1442,7 @@ function MixMatchPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 MixMatchPickerRow,
                 {
                   bundle,
@@ -1406,10 +1461,10 @@ function MixMatchPicker({
                 },
                 ep.product.id
               )) }),
-              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-footer", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-footer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -1418,7 +1473,7 @@ function MixMatchPicker({
                     children: `${shownUnits} of ${requiredQty} added`
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1455,14 +1510,16 @@ function MixMatchPickerRow({
 }) {
   const { product, variants, isOos } = eligible;
   const rule = ruleFor(bundle, product.id);
-  const optionNames = (0, import_react11.useMemo)(() => {
+  const optionNames = (0, import_react12.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
   const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core10.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
-  const alreadyInBundle = (0, import_react11.useMemo)(() => {
+  const vRule = ruleFor(bundle, product.id, currentVariant?.id);
+  const variantMax = variantRuleFor(bundle, currentVariant?.id)?.max;
+  const alreadyInBundle = (0, import_react12.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (const s of selections) {
@@ -1472,13 +1529,13 @@ function MixMatchPickerRow({
     }
     return sum;
   }, [selections, product.id, currentVariant]);
-  const committedSelection = (0, import_react11.useMemo)(
+  const committedSelection = (0, import_react12.useMemo)(
     () => currentVariant ? selections.find((s) => s.variantId === currentVariant.id) ?? null : null,
     [selections, currentVariant]
   );
   const variantInBundle = committedSelection !== null;
   const committedQty = committedSelection?.quantity ?? 0;
-  const productOtherUnits = (0, import_react11.useMemo)(() => {
+  const productOtherUnits = (0, import_react12.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (const s of selections) {
@@ -1489,22 +1546,26 @@ function MixMatchPickerRow({
     return sum;
   }, [selections, product.id, currentVariant]);
   const swapUnits = currentVariant ? swapUnitsFor?.(product.id, currentVariant.id) ?? 0 : 0;
-  const inSwapState = swapUnits >= rule.min;
-  const spotCeiling = inSwapState ? swapUnits : Math.min(rule.max - productOtherUnits, committedQty + remainingUnits);
+  const inSwapState = swapUnits >= vRule.min;
+  const spotCeiling = inSwapState ? swapUnits : Math.min(
+    rule.max - productOtherUnits,
+    committedQty + remainingUnits,
+    variantMax ?? Infinity
+  );
   const cap = currentVariant ? (0, import_core10.maxAddableQuantity)(
     currentVariant,
     spotCeiling,
     Math.max(0, alreadyInBundle - committedQty)
   ) : 0;
-  const stepperMax = Math.max(rule.min, cap);
-  const [qty, setQty] = (0, import_react11.useState)(rule.min);
-  (0, import_react11.useEffect)(() => {
-    setQty((prev) => Math.max(rule.min, Math.min(prev, stepperMax)));
-  }, [stepperMax, rule.min]);
+  const stepperMax = Math.max(vRule.min, cap);
+  const [qty, setQty] = (0, import_react12.useState)(vRule.min);
+  (0, import_react12.useEffect)(() => {
+    setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
+  }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  (0, import_react11.useEffect)(() => {
-    if (!variantInBundle) setQty(rule.min);
-  }, [variantInBundle, currentVariantId, rule.min]);
+  (0, import_react12.useEffect)(() => {
+    if (!variantInBundle) setQty(vRule.min);
+  }, [variantInBundle, currentVariantId, vRule.min]);
   if (!currentVariant) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
   const unitPriceText = (0, import_core10.formatUnitPrice)(
@@ -1512,8 +1573,8 @@ function MixMatchPickerRow({
     currentVariant.unitPriceMeasurement,
     currency
   );
-  const noStock = cap < rule.min;
-  const needsMoreSpots = !variantInBundle && !inSwapState && rule.min > remainingUnits;
+  const noStock = cap < vRule.min;
+  const needsMoreSpots = !variantInBundle && !inSwapState && vRule.min > remainingUnits;
   const addDisabled = !variantInBundle && (inSwapState ? noStock : atCapacity || noStock || needsMoreSpots);
   const lockedRequired = variantInBundle && currentVariant != null && !(canRemoveVariant?.(currentVariant.id) ?? true);
   const stepperDisabled = isOos || !variantInBundle && addDisabled;
@@ -1524,7 +1585,7 @@ function MixMatchPickerRow({
       return;
     }
     if (!currentVariant || noStock) return;
-    const pickedQty = showStepper ? qty : rule.min;
+    const pickedQty = showStepper ? qty : vRule.min;
     const item = {
       productId: product.id,
       variantId: currentVariant.id,
@@ -1546,7 +1607,7 @@ function MixMatchPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -1555,8 +1616,8 @@ function MixMatchPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -1564,10 +1625,10 @@ function MixMatchPickerRow({
               loading: "lazy"
             }
           ),
-          variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -1576,24 +1637,24 @@ function MixMatchPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-row-price-sale": true, children: (0, import_core10.formatMoney)(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core10.formatMoney)(compareCents, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-row-price-sale": true, children: (0, import_core10.formatMoney)(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core10.formatMoney)(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -1608,17 +1669,17 @@ function MixMatchPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
+          isOos ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1639,7 +1700,7 @@ function MixMatchPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -1648,7 +1709,7 @@ function MixMatchPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1672,7 +1733,7 @@ function MixMatchPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 type: "button",
@@ -1691,7 +1752,7 @@ function MixMatchPickerRow({
   );
 }
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "svg",
     {
       width: "20",
@@ -1701,14 +1762,14 @@ function CloseIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "svg",
     {
       width: "16",
@@ -1717,17 +1778,25 @@ function SearchClearIcon() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MixMatchBundle.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function ruleFor2(bundle, productId) {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ruleFor2(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? import_core11.DEFAULT_PRODUCT_RULE;
 }
+function variantRuleFor2(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
 function canRemoveItem(bundle, selections, item) {
+  if (variantRuleFor2(bundle, item.variantId)?.required) return false;
   const rule = ruleFor2(bundle, item.productId);
   if (!rule.required) return true;
   const unitsElsewhere = selections.filter((s) => s.productId === item.productId && s !== item).reduce((sum, s) => sum + s.quantity, 0);
@@ -1748,7 +1817,8 @@ function MixMatchBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productHandle
   } = props;
   const result = useBundleData({
     shopDomain,
@@ -1766,16 +1836,16 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react12.useState)([]);
-  const [seededFor, setSeededFor] = (0, import_react12.useState)(null);
-  const [pickerOpen, setPickerOpen] = (0, import_react12.useState)(false);
-  const [addingToCart, setAddingToCart] = (0, import_react12.useState)(false);
-  const [cartError, setCartError] = (0, import_react12.useState)(null);
+  const [selections, setSelections] = (0, import_react13.useState)([]);
+  const [seededFor, setSeededFor] = (0, import_react13.useState)(null);
+  const [pickerOpen, setPickerOpen] = (0, import_react13.useState)(false);
+  const [addingToCart, setAddingToCart] = (0, import_react13.useState)(false);
+  const [cartError, setCartError] = (0, import_react13.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const slotsEdgeFadeRef = useEdgeFade();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -1788,40 +1858,67 @@ function MixMatchBundle(props) {
       );
     }
   }, [result, onError]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+    const pick = (product, variant, quantity) => ({
+      productId: product.id,
+      variantId: variant.id,
+      title: product.title,
+      url: `/products/${product.handle}`,
+      variantTitle: variant.title,
+      featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
+      price: parseFloat(variant.price.amount),
+      compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
+      unitPrice: (0, import_core11.formatUnitPrice)(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        seedCurrency
+      ),
+      quantity
+    });
     const seeds = [];
-    for (const [pid, rule] of Object.entries(bundle.productRules)) {
-      if (!rule.required) continue;
-      const product = bundle.products.find((p) => p.id === pid);
-      const variant = product?.variants.nodes.find(
+    for (const product of bundle.products) {
+      let seededVariant = false;
+      for (const variant2 of product.variants.nodes) {
+        const vRule = bundle.variantRules[variant2.id];
+        if (!vRule?.required) continue;
+        if (!(0, import_core11.isVariantFulfillable)(variant2, Math.max(1, vRule.min))) continue;
+        seeds.push(pick(product, variant2, Math.max(1, vRule.min)));
+        seededVariant = true;
+      }
+      if (seededVariant) continue;
+      const rule = bundle.productRules[product.id];
+      if (!rule?.required) continue;
+      const variant = product.variants.nodes.find(
         (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
       );
-      if (!product || !variant) continue;
-      seeds.push({
-        productId: product.id,
-        variantId: variant.id,
-        title: product.title,
-        url: `/products/${product.handle}`,
-        variantTitle: variant.title,
-        featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
-        price: parseFloat(variant.price.amount),
-        compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
-        unitPrice: (0, import_core11.formatUnitPrice)(
-          variant.unitPrice,
-          variant.unitPriceMeasurement,
-          seedCurrency
-        ),
-        quantity: rule.min
-      });
+      if (!variant) continue;
+      seeds.push(pick(product, variant, rule.min));
+    }
+    if (seeds.length === 0 && productHandle) {
+      const requiredUnits2 = bundle.minQuantity ?? 0;
+      const qualifies = (p) => {
+        const min = bundle.productRules[p.id]?.min ?? 1;
+        return min <= requiredUnits2 && p.variants.nodes.some((v) => (0, import_core11.isVariantFulfillable)(v, min));
+      };
+      const seed = bundle.products.find(
+        (p) => p.handle === productHandle && qualifies(p)
+      ) ?? bundle.products.find(qualifies);
+      if (seed) {
+        const min = bundle.productRules[seed.id]?.min ?? 1;
+        const variant = seed.variants.nodes.find(
+          (v) => (0, import_core11.isVariantFulfillable)(v, min)
+        );
+        if (variant) seeds.push(pick(seed, variant, min));
+      }
     }
     if (seeds.length > 0) setSelections(seeds);
-  }, [bundle, seededFor]);
+  }, [bundle, seededFor, productHandle]);
   const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
   const requiredUnits = bundle?.minQuantity ?? 0;
-  const totalQuantity = (0, import_react12.useMemo)(
+  const totalQuantity = (0, import_react13.useMemo)(
     () => selections.reduce((sum, s) => sum + s.quantity, 0),
     [selections]
   );
@@ -1829,7 +1926,7 @@ function MixMatchBundle(props) {
   const valid = !!bundle && meetsMinUnits;
   const shownUnits = Math.min(totalQuantity, requiredUnits);
   const remaining = Math.max(0, requiredUnits - shownUnits);
-  const summary = (0, import_react12.useMemo)(() => {
+  const summary = (0, import_react13.useMemo)(() => {
     let comparePrice = 0;
     let salePrice = 0;
     for (const sel of selections) {
@@ -1847,7 +1944,7 @@ function MixMatchBundle(props) {
     const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
     return { comparePrice, salePrice, savings, savingsPercent };
   }, [selections, bundle]);
-  const addSelection = (0, import_react12.useCallback)(
+  const addSelection = (0, import_react13.useCallback)(
     (item) => {
       setSelections((prev) => {
         const units = prev.reduce((sum, s) => sum + s.quantity, 0);
@@ -1858,7 +1955,7 @@ function MixMatchBundle(props) {
     },
     [requiredUnits]
   );
-  const updateQuantity = (0, import_react12.useCallback)(
+  const updateQuantity = (0, import_react13.useCallback)(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const idx = prev.findIndex(
@@ -1881,7 +1978,7 @@ function MixMatchBundle(props) {
     },
     [requiredUnits]
   );
-  const swapSelection = (0, import_react12.useCallback)(
+  const swapSelection = (0, import_react13.useCallback)(
     (item) => {
       setSelections((prev) => {
         if (!bundle) return prev;
@@ -1913,7 +2010,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const removeVariant = (0, import_react12.useCallback)(
+  const removeVariant = (0, import_react13.useCallback)(
     (variantId) => {
       setSelections((prev) => {
         const idx = prev.findIndex((s) => s.variantId === variantId);
@@ -1926,7 +2023,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const removeSlot = (0, import_react12.useCallback)(
+  const removeSlot = (0, import_react13.useCallback)(
     (index) => {
       setSelections((prev) => {
         if (index < 0 || index >= prev.length) return prev;
@@ -1938,7 +2035,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const handleAddToCart = (0, import_react12.useCallback)(async () => {
+  const handleAddToCart = (0, import_react13.useCallback)(async () => {
     if (!bundle || !valid) return;
     const grouped = /* @__PURE__ */ new Map();
     for (const sel of selections) {
@@ -1978,9 +2075,9 @@ function MixMatchBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -1999,7 +2096,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__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2011,12 +2108,19 @@ function MixMatchBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": requiredUnits,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -2024,7 +2128,7 @@ function MixMatchBundle(props) {
               "aria-valuenow": shownUnits,
               "aria-valuemin": 0,
               "aria-valuemax": requiredUnits,
-              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -2034,8 +2138,8 @@ function MixMatchBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -2044,7 +2148,7 @@ function MixMatchBundle(props) {
                 children: `${shownUnits} of ${requiredUnits} added`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -2055,7 +2159,7 @@ function MixMatchBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: "lb-mix-match__slots lb-edge-fade",
@@ -2066,15 +2170,15 @@ function MixMatchBundle(props) {
                  button provides the keyboard/AT path (its activation bubbles
                  here); × stops propagation. */
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "div",
                 {
                   className: "lb-mix-match__slot lb-mix-match__slot--filled",
                   onClick: () => setPickerOpen(true),
                   children: [
-                    item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "button",
                         {
                           type: "button",
@@ -2083,15 +2187,15 @@ function MixMatchBundle(props) {
                           children: item.title
                         }
                       ),
-                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core11.formatMoney)(item.compareAtPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core11.formatMoney)(item.price, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core11.formatMoney)(item.compareAtPrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core11.formatMoney)(item.price, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                       ] }),
-                      item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                      item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                     ] }),
-                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2101,13 +2205,13 @@ function MixMatchBundle(props) {
                           e.stopPropagation();
                           removeSlot(index);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon2, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon2, {})
                       }
                     ) : (
                       /* Required pick at its floor — quiet state chip instead of
                          the ×; removal returns once another slot covers the
                          product's minimum (variant swap flow). */
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
                     )
                   ]
                 },
@@ -2116,7 +2220,7 @@ function MixMatchBundle(props) {
             ))
           }
         ),
-        totalQuantity < requiredUnits && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        totalQuantity < requiredUnits && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
             type: "button",
@@ -2124,34 +2228,34 @@ function MixMatchBundle(props) {
             "data-add-product-trigger": true,
             onClick: () => setPickerOpen(true),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlusIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-divider" }),
-        selections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-divider" }),
+        selections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-savings-amount": true, children: (0, import_core11.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-savings-amount": true, children: (0, import_core11.formatMoney)(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core11.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core11.formatMoney)(summary.salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core11.formatMoney)(summary.comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core11.formatMoney)(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2161,7 +2265,7 @@ function MixMatchBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           MixMatchPicker,
           {
             outOfStockBehavior,
@@ -2202,7 +2306,7 @@ function countInStockProducts(bundle) {
   return count;
 }
 function PlusIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width: "18",
@@ -2212,14 +2316,14 @@ function PlusIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width: "16",
@@ -2229,17 +2333,17 @@ function CloseIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 
 // src/components/VolumeBundle.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_core12 = require("@lime-bundles/core");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -2263,13 +2367,30 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = (0, import_react13.useState)(1);
-  const [addingToCart, setAddingToCart] = (0, import_react13.useState)(false);
-  const [cartError, setCartError] = (0, import_react13.useState)(null);
+  const [quantity, setQuantity] = (0, import_react14.useState)(1);
+  const [addingToCart, setAddingToCart] = (0, import_react14.useState)(false);
+  const [cartError, setCartError] = (0, import_react14.useState)(null);
+  const [seededFor, setSeededFor] = (0, import_react14.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  (0, import_react14.useEffect)(() => {
+    if (!bundle || seededFor === bundle.id) return;
+    setSeededFor(bundle.id);
+    const tiers = bundle.volumeTiers;
+    if (tiers.length === 0) return;
+    const best = (0, import_core12.bestValueTierIndex)(
+      tiers,
+      bundle.discountConfig.discountType
+    );
+    const idx = (0, import_core12.resolveDefaultTierIndex)(
+      bundle.widgetConfig.defaultTier,
+      tiers.length,
+      best
+    );
+    setQuantity(tiers[idx].minQuantity);
+  }, [bundle, seededFor]);
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const tiersEdgeFadeRef = useEdgeFade();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2283,8 +2404,8 @@ function VolumeBundle(props) {
     }
   }, [result, onError]);
   const product = bundle?.products[0];
-  const variants = (0, import_react13.useMemo)(() => product?.variants.nodes ?? [], [product]);
-  const optionNames = (0, import_react13.useMemo)(() => {
+  const variants = (0, import_react14.useMemo)(() => product?.variants.nodes ?? [], [product]);
+  const optionNames = (0, import_react14.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
@@ -2301,7 +2422,7 @@ function VolumeBundle(props) {
     displayVariant.unitPriceMeasurement,
     currency
   ) : null;
-  const tierSavings = (0, import_react13.useMemo)(
+  const tierSavings = (0, import_react14.useMemo)(
     () => bundle ? (0, import_core12.calculateTierSavings)(
       bundle.volumeTiers,
       basePrice,
@@ -2311,26 +2432,23 @@ function VolumeBundle(props) {
     [bundle, basePrice, quantity]
   );
   const activeTier = bundle ? (0, import_core12.getActiveTier)(bundle.volumeTiers, quantity) : null;
-  const popularTierIndex = (0, import_react13.useMemo)(() => {
-    if (!bundle?.widgetConfig.popularBadge.visible || tierSavings.length === 0) {
-      return -1;
-    }
-    const pinned = bundle.widgetConfig.popularBadge.tierIndex;
-    if (pinned !== void 0) {
-      return Math.min(Math.max(pinned, 0), tierSavings.length - 1);
-    }
-    let best = 0;
-    for (let i = 1; i < tierSavings.length; i++) {
-      if (tierSavings[i].savings > tierSavings[best].savings) best = i;
-    }
-    return best;
-  }, [bundle, tierSavings]);
+  const popularTierIndex = (0, import_react14.useMemo)(() => {
+    if (!bundle || bundle.volumeTiers.length === 0) return -1;
+    return (0, import_core12.resolvePopularTierIndex)(
+      bundle.widgetConfig.popularBadge.tierIndex,
+      bundle.widgetConfig.popularBadge.visible !== false,
+      (0, import_core12.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;
   const volumeSavings = Math.max(0, undiscountedTotal - volumeTotal);
   const volumeSavingsPercent = undiscountedTotal > 0 && volumeSavings > 0 ? Math.round(volumeSavings / undiscountedTotal * 100) : 0;
-  const handleAddToCart = (0, import_react13.useCallback)(async () => {
+  const handleAddToCart = (0, import_react14.useCallback)(async () => {
     if (!bundle || !product) return;
     const variant = selectedVariant ?? product.variants.nodes.find(
       (v) => (0, import_core12.isVariantFulfillable)(v, quantity)
@@ -2376,15 +2494,15 @@ function VolumeBundle(props) {
     tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2395,12 +2513,19 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -2409,20 +2534,20 @@ function VolumeBundle(props) {
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle__product-price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle__product-price", children: [
               (0, import_core12.formatMoney)(basePrice, currency),
               " each"
             ] }),
-            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-            showPicker && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
               const dropdownOptions = optionsFor(optionIndex).map((o) => ({
                 value: o.value,
                 label: o.value,
                 disabled: o.disabled
               }));
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 VariantDropdown,
                 {
                   options: dropdownOptions,
@@ -2435,37 +2560,47 @@ function VolumeBundle(props) {
             }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "lb-bundle__tiers lb-edge-fade",
-            role: "table",
-            "aria-label": "Volume discounts",
+            role: "radiogroup",
+            "aria-label": "Select quantity",
             ref: tiersEdgeFadeRef,
             children: tierSavings.map((ts, tierIndex) => {
               const savingsPercent = Math.round(ts.savingsPercent);
               const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              const isChecked = activeTier === ts.tier;
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "div",
                 {
                   className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
-                  role: "row",
+                  role: "radio",
+                  "aria-checked": isChecked,
+                  tabIndex: isChecked ? 0 : -1,
+                  onClick: () => setQuantity(ts.tier.minQuantity),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      setQuantity(ts.tier.minQuantity);
+                    }
+                  },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-radio-dot" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-info", role: "cell", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-label", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-radio-dot" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-info", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-label", children: [
                         "Buy ",
                         ts.tier.minQuantity
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-price", children: [
-                        showCompare && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-compare", children: (0, import_core12.formatMoney)(basePrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: (0, import_core12.formatMoney)(ts.unitPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-unit", children: "each" })
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-price", children: [
+                        showCompare && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-compare", children: (0, import_core12.formatMoney)(basePrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: (0, import_core12.formatMoney)(ts.unitPrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-unit", children: "each" })
                       ] })
                     ] }),
-                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-right", role: "cell", children: [
-                      tierIndex === popularTierIndex && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
-                      savingsPercent > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle__tier-savings", children: [
+                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-right", children: [
+                      tierIndex === popularTierIndex && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
+                      savingsPercent > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-savings", children: [
                         "Save ",
                         savingsPercent,
                         "%"
@@ -2478,10 +2613,10 @@ function VolumeBundle(props) {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -2489,7 +2624,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -2503,7 +2638,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -2513,23 +2648,23 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         bundle && displayVariant && (0, import_core12.shouldShowLowStockBadge)(
           displayVariant,
           minTierQty,
           bundle.widgetConfig.lowStockThreshold,
           bundle.widgetConfig.showLowStockBadge
-        ) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+        ) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
           "Only ",
           displayVariant.quantityAvailable,
           " left"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
               "Total",
-              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-item-count": true, children: [
+              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-item-count": true, children: [
                 " ",
                 "(",
                 quantity,
@@ -2538,24 +2673,24 @@ function VolumeBundle(props) {
                 ")"
               ] })
             ] }),
-            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(volumeSavings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(volumeSavings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 volumeSavingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core12.formatMoney)(undiscountedTotal, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core12.formatMoney)(volumeTotal, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core12.formatMoney)(undiscountedTotal, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core12.formatMoney)(volumeTotal, currency) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2571,9 +2706,9 @@ function VolumeBundle(props) {
 }
 
 // src/components/BogoBundle.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_core13 = require("@lime-bundles/core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function discountedUnit(price, percent) {
   const cents = Math.round(price * 100);
   const discounted = cents - Math.floor(cents * percent / 100);
@@ -2602,10 +2737,10 @@ function BogoBundle(props) {
     bundleType: "bogo",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = (0, import_react14.useState)(false);
-  const [cartError, setCartError] = (0, import_react14.useState)(null);
-  const [selectedVariants, setSelectedVariants] = (0, import_react14.useState)({ buy: null, get: null });
-  const handleVariantChange = (0, import_react14.useCallback)(
+  const [addingToCart, setAddingToCart] = (0, import_react15.useState)(false);
+  const [cartError, setCartError] = (0, import_react15.useState)(null);
+  const [selectedVariants, setSelectedVariants] = (0, import_react15.useState)({ buy: null, get: null });
+  const handleVariantChange = (0, import_react15.useCallback)(
     (role, variant) => {
       setSelectedVariants((prev) => {
         if (prev[role] === variant) return prev;
@@ -2616,7 +2751,7 @@ function BogoBundle(props) {
   );
   const bundle = result.status === "success" && result.bundle.bundleType === "bogo" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2629,28 +2764,28 @@ function BogoBundle(props) {
       );
     }
   }, [result, onError]);
-  const buyProduct = (0, import_react14.useMemo)(
+  const buyProduct = (0, import_react15.useMemo)(
     () => bundle?.products.find((p) => p.id === bundle.buyProductId) ?? null,
     [bundle]
   );
-  const getProduct = (0, import_react14.useMemo)(
+  const getProduct = (0, import_react15.useMemo)(
     () => bundle?.products.find((p) => p.id === bundle.getProductId) ?? null,
     [bundle]
   );
   const percent = bundle ? Math.min(100, Math.max(0, bundle.discountConfig.discountValue)) : 0;
-  const resolveVariant = (0, import_react14.useCallback)(
+  const resolveVariant = (0, import_react15.useCallback)(
     (product, selected, qty) => {
       if (!product) return null;
       return selected ?? product.variants.nodes.find((v) => (0, import_core13.isVariantFulfillable)(v, qty)) ?? product.variants.nodes[0] ?? null;
     },
     []
   );
-  const oosSides = (0, import_react14.useMemo)(() => {
+  const oosSides = (0, import_react15.useMemo)(() => {
     if (!bundle) return 0;
     const short = (product, qty) => !!product && !product.variants.nodes.some((v) => (0, import_core13.isVariantFulfillable)(v, qty));
     return (short(buyProduct, bundle.buyQuantity) ? 1 : 0) + (short(getProduct, bundle.getQuantity) ? 1 : 0);
   }, [bundle, buyProduct, getProduct]);
-  const handleAddToCart = (0, import_react14.useCallback)(async () => {
+  const handleAddToCart = (0, import_react15.useCallback)(async () => {
     if (!bundle || !buyProduct || !getProduct) return;
     const buyVariant2 = resolveVariant(buyProduct, selectedVariants.buy, bundle.buyQuantity);
     const getVariant2 = resolveVariant(getProduct, selectedVariants.get, bundle.getQuantity);
@@ -2697,9 +2832,9 @@ function BogoBundle(props) {
     }
   }, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2716,7 +2851,7 @@ function BogoBundle(props) {
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
   const badge = percent === 100 ? "Free" : `${percent}% off`;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2727,12 +2862,19 @@ function BogoBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__products", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__products", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             BogoProductRow,
             {
               side: "buy",
@@ -2744,11 +2886,11 @@ function BogoBundle(props) {
               onVariantChange: handleVariantChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             BogoProductRow,
             {
               side: "get",
@@ -2761,29 +2903,29 @@ function BogoBundle(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core13.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-savings-amount": true, children: (0, import_core13.formatMoney)(savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core13.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core13.formatMoney)(salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core13.formatMoney)(comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core13.formatMoney)(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2799,7 +2941,7 @@ function BogoBundle(props) {
 }
 function BogoProductRow({ side, product, quantity, percent, badge, currency, onVariantChange }) {
   const variants = product.variants.nodes;
-  const optionNames = (0, import_react14.useMemo)(() => {
+  const optionNames = (0, import_react15.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
@@ -2808,7 +2950,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     variants,
     optionNames
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onVariantChange(side, selectedVariant ?? null);
   }, [selectedVariant, side, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core13.isVariantFulfillable)(v, quantity)) ?? variants[0];
@@ -2822,8 +2964,8 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
-    thumbImage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
+    thumbImage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "img",
       {
         src: thumbImage.url,
@@ -2832,11 +2974,11 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         loading: "lazy"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-product-prices", children: [
-        compareAt && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-product-prices", children: [
+        compareAt && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
             className: "lb-bundle-product-compare-price",
@@ -2844,13 +2986,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
             children: compareAt
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
           "\xD7",
           quantity
         ] })
       ] }),
-      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "span",
         {
           className: "lb-bundle__product-unit-price",
@@ -2858,13 +3000,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
           children: unitPriceText
         }
       ),
-      showPicker && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+      showPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
         const dropdownOptions = optionsFor(optionIndex).map((o) => ({
           value: o.value,
           label: o.value,
           disabled: o.disabled
         }));
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           VariantDropdown,
           {
             options: dropdownOptions,
@@ -2876,22 +3018,29 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         );
       }) })
     ] }),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bogo__badge", children: badge })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bogo__badge", children: badge })
   ] });
 }
 
 // src/components/MultiStepBundle.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_core15 = require("@lime-bundles/core");
 
 // src/components/MultiStepPicker.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_core14 = require("@lime-bundles/core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function ruleFor3(bundle, productId) {
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ruleFor3(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? import_core14.DEFAULT_PRODUCT_RULE;
 }
+function variantRuleFor3(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
 function sanitizeId2(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
@@ -2935,17 +3084,17 @@ function MultiStepPicker({
 }) {
   const wc = bundle.widgetConfig;
   const steps = bundle.steps;
-  const overlayRef = (0, import_react15.useRef)(null);
-  const dialogRef = (0, import_react15.useRef)(null);
-  const titleRef = (0, import_react15.useRef)(null);
-  const mouseDownTarget = (0, import_react15.useRef)(null);
-  const [open, setOpen] = (0, import_react15.useState)(false);
-  const [stepIndex, setStepIndex] = (0, import_react15.useState)(
+  const overlayRef = (0, import_react16.useRef)(null);
+  const dialogRef = (0, import_react16.useRef)(null);
+  const titleRef = (0, import_react16.useRef)(null);
+  const mouseDownTarget = (0, import_react16.useRef)(null);
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [stepIndex, setStepIndex] = (0, import_react16.useState)(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
   );
-  const [query, setQuery] = (0, import_react15.useState)("");
-  const [activeType, setActiveType] = (0, import_react15.useState)(FILTERS_ALL2);
-  const [announcement, setAnnouncement] = (0, import_react15.useState)("");
+  const [query, setQuery] = (0, import_react16.useState)("");
+  const [activeType, setActiveType] = (0, import_react16.useState)(FILTERS_ALL2);
+  const [announcement, setAnnouncement] = (0, import_react16.useState)("");
   const step = steps[stepIndex];
   const stepMin = step?.minQuantity ?? 1;
   const stepPicks = selections[stepIndex] ?? [];
@@ -2953,11 +3102,11 @@ function MultiStepPicker({
   const stepIsSatisfied = unitsInStep >= stepMin;
   const isLastStep = stepIndex === steps.length - 1;
   const shownUnits = Math.min(unitsInStep, stepMin);
-  const eligible = (0, import_react15.useMemo)(
+  const eligible = (0, import_react16.useMemo)(
     () => buildEligibleProducts2(bundle, stepIndex, outOfStockBehavior),
     [bundle, stepIndex, outOfStockBehavior]
   );
-  const productTypes = (0, import_react15.useMemo)(() => {
+  const productTypes = (0, import_react16.useMemo)(() => {
     const types = [];
     const seen = /* @__PURE__ */ new Set();
     for (const ep of eligible) {
@@ -2970,7 +3119,7 @@ function MultiStepPicker({
     return types;
   }, [eligible]);
   const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -2994,7 +3143,7 @@ function MultiStepPicker({
     titleRef.current?.focus();
   }
   const subtitle = `Step ${stepIndex + 1} of ${steps.length} \xB7 ${step?.name ?? ""}`;
-  const filtered = (0, import_react15.useMemo)(() => {
+  const filtered = (0, import_react16.useMemo)(() => {
     const nq = normalizeText2(query.trim());
     return eligible.filter((ep) => {
       const matchesQuery = !nq || normalizeText2(ep.product.title).includes(nq);
@@ -3019,7 +3168,7 @@ function MultiStepPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         ref: (el) => {
@@ -3031,7 +3180,7 @@ function MultiStepPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             ref: dialogRef,
@@ -3041,10 +3190,10 @@ function MultiStepPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "h4",
                       {
                         className: "lb-mix-match__modal-title",
@@ -3054,9 +3203,9 @@ function MultiStepPicker({
                         children: "Add to your bundle"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3064,16 +3213,16 @@ function MultiStepPicker({
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon3, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon3, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -3082,7 +3231,7 @@ function MultiStepPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": stepMin,
-                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3095,8 +3244,8 @@ function MultiStepPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3110,7 +3259,7 @@ function MultiStepPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3118,11 +3267,11 @@ function MultiStepPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchClearIcon2, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchClearIcon2, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showFilters && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -3131,7 +3280,7 @@ function MultiStepPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL2, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
                         type: "button",
@@ -3146,7 +3295,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3164,10 +3313,10 @@ function MultiStepPicker({
                 },
                 `${stepIndex}:${ep.product.id}`
               )) }),
-              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
-                stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
+                stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3177,7 +3326,7 @@ function MultiStepPicker({
                     children: "Back"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -3186,7 +3335,7 @@ function MultiStepPicker({
                     children: `${shownUnits} of ${stepMin} added`
                   }
                 ),
-                !isLastStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                !isLastStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3199,7 +3348,7 @@ function MultiStepPicker({
                     children: "Next"
                   }
                 ),
-                isLastStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                isLastStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3237,25 +3386,27 @@ function MultiStepPickerRow({
   const { product, variants, isOos } = eligible;
   const rule = ruleFor3(bundle, product.id);
   const step = bundle.steps[stepIndex];
-  const optionNames = (0, import_react15.useMemo)(() => {
+  const optionNames = (0, import_react16.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
   const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core14.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
-  const stepPicks = (0, import_react15.useMemo)(
+  const vRule = ruleFor3(bundle, product.id, currentVariant?.id);
+  const variantMax = variantRuleFor3(bundle, currentVariant?.id)?.max;
+  const stepPicks = (0, import_react16.useMemo)(
     () => selections[stepIndex] ?? [],
     [selections, stepIndex]
   );
   const unitsInStep = stepPicks.reduce((sum, s) => sum + s.quantity, 0);
-  const committedSelection = (0, import_react15.useMemo)(
+  const committedSelection = (0, import_react16.useMemo)(
     () => currentVariant ? stepPicks.find((s) => s.variantId === currentVariant.id) ?? null : null,
     [stepPicks, currentVariant]
   );
   const variantInStep = committedSelection !== null;
   const committedQty = committedSelection?.quantity ?? 0;
-  const productOtherUnits = (0, import_react15.useMemo)(() => {
+  const productOtherUnits = (0, import_react16.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (let i = 0; i < selections.length; i++) {
@@ -3267,7 +3418,7 @@ function MultiStepPickerRow({
     }
     return sum;
   }, [selections, product.id, currentVariant, stepIndex]);
-  const variantOtherUnits = (0, import_react15.useMemo)(() => {
+  const variantOtherUnits = (0, import_react16.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (const picks of selections) {
@@ -3278,24 +3429,27 @@ function MultiStepPickerRow({
     return Math.max(0, sum - committedQty);
   }, [selections, currentVariant, committedQty]);
   const swapUnits = currentVariant ? swapUnitsFor?.(stepIndex, product.id, currentVariant.id) ?? 0 : 0;
-  const inSwapState = swapUnits >= rule.min;
+  const inSwapState = swapUnits >= vRule.min;
   const room = (0, import_core14.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep);
-  const productHeadroom = rule.max - productOtherUnits;
+  const productHeadroom = Math.min(
+    rule.max - productOtherUnits,
+    variantMax ?? Infinity
+  );
   const spotCeiling = inSwapState ? swapUnits : Math.min(
     productHeadroom,
     room === Number.POSITIVE_INFINITY ? productHeadroom : committedQty + room
   );
   const stockRemaining = currentVariant ? (0, import_core14.maxAddableQuantity)(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
   const cap = Math.max(0, Math.min(spotCeiling, stockRemaining));
-  const stepperMax = Math.max(rule.min, cap);
-  const [qty, setQty] = (0, import_react15.useState)(rule.min);
-  (0, import_react15.useEffect)(() => {
-    setQty((prev) => Math.max(rule.min, Math.min(prev, stepperMax)));
-  }, [stepperMax, rule.min]);
+  const stepperMax = Math.max(vRule.min, cap);
+  const [qty, setQty] = (0, import_react16.useState)(vRule.min);
+  (0, import_react16.useEffect)(() => {
+    setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
+  }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  (0, import_react15.useEffect)(() => {
-    if (!variantInStep) setQty(rule.min);
-  }, [variantInStep, currentVariantId, rule.min]);
+  (0, import_react16.useEffect)(() => {
+    if (!variantInStep) setQty(vRule.min);
+  }, [variantInStep, currentVariantId, vRule.min]);
   if (!currentVariant || !step) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
   const unitPriceText = (0, import_core14.formatUnitPrice)(
@@ -3303,8 +3457,8 @@ function MultiStepPickerRow({
     currentVariant.unitPriceMeasurement,
     currency
   );
-  const noStock = cap < rule.min;
-  const needsMoreSpots = !variantInStep && !inSwapState && room !== Number.POSITIVE_INFINITY && rule.min > room;
+  const noStock = cap < vRule.min;
+  const needsMoreSpots = !variantInStep && !inSwapState && room !== Number.POSITIVE_INFINITY && vRule.min > room;
   const addDisabled = !variantInStep && (inSwapState ? noStock : noStock || needsMoreSpots);
   const lockedRequired = variantInStep && currentVariant != null && !(canRemoveVariant?.(currentVariant.id) ?? true);
   const stepperDisabled = isOos || !variantInStep && addDisabled;
@@ -3315,7 +3469,7 @@ function MultiStepPickerRow({
       return;
     }
     if (!currentVariant || noStock) return;
-    const pickedQty = showStepper ? qty : rule.min;
+    const pickedQty = showStepper ? qty : vRule.min;
     const item = {
       productId: product.id,
       variantId: currentVariant.id,
@@ -3337,7 +3491,7 @@ function MultiStepPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -3346,8 +3500,8 @@ function MultiStepPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -3355,10 +3509,10 @@ function MultiStepPickerRow({
               loading: "lazy"
             }
           ),
-          variantInStep && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -3367,24 +3521,24 @@ function MultiStepPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-row-price-sale": true, children: (0, import_core14.formatMoney)(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core14.formatMoney)(compareCents, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-row-price-sale": true, children: (0, import_core14.formatMoney)(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core14.formatMoney)(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -3399,39 +3553,39 @@ function MultiStepPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
+          isOos ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
                       className: "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--minus",
                       "aria-label": "Decrease quantity",
-                      disabled: stepperDisabled || shownQty <= rule.min,
+                      disabled: stepperDisabled || shownQty <= vRule.min,
                       onClick: () => {
                         if (variantInStep && currentVariant) {
                           onUpdateQuantity(
                             stepIndex,
                             product.id,
                             currentVariant.id,
-                            Math.max(rule.min, committedQty - 1)
+                            Math.max(vRule.min, committedQty - 1)
                           );
                         } else {
-                          setQty((q) => Math.max(rule.min, q - 1));
+                          setQty((q) => Math.max(vRule.min, q - 1));
                         }
                       },
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -3440,7 +3594,7 @@ function MultiStepPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3465,7 +3619,7 @@ function MultiStepPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -3484,7 +3638,7 @@ function MultiStepPickerRow({
   );
 }
 function CloseIcon3() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: "20",
@@ -3494,14 +3648,14 @@ function CloseIcon3() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: "16",
@@ -3510,17 +3664,25 @@ function SearchClearIcon2() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MultiStepBundle.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function ruleFor4(bundle, productId) {
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ruleFor4(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? import_core15.DEFAULT_PRODUCT_RULE;
 }
+function variantRuleFor4(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
 function canRemoveItem2(bundle, selections, item) {
+  if (variantRuleFor4(bundle, item.variantId)?.required) return false;
   const rule = ruleFor4(bundle, item.productId);
   if (!rule.required) return true;
   let unitsElsewhere = 0;
@@ -3567,14 +3729,14 @@ function MultiStepBundle(props) {
     bundleType: "multi_step",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react16.useState)([]);
-  const [pickerOpenAt, setPickerOpenAt] = (0, import_react16.useState)(null);
-  const [addingToCart, setAddingToCart] = (0, import_react16.useState)(false);
-  const [cartError, setCartError] = (0, import_react16.useState)(null);
+  const [selections, setSelections] = (0, import_react17.useState)([]);
+  const [pickerOpenAt, setPickerOpenAt] = (0, import_react17.useState)(null);
+  const [addingToCart, setAddingToCart] = (0, import_react17.useState)(false);
+  const [cartError, setCartError] = (0, import_react17.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "multi_step" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -3587,8 +3749,8 @@ function MultiStepBundle(props) {
       );
     }
   }, [result, onError]);
-  const steps = (0, import_react16.useMemo)(() => bundle?.steps ?? [], [bundle]);
-  (0, import_react16.useEffect)(() => {
+  const steps = (0, import_react17.useMemo)(() => bundle?.steps ?? [], [bundle]);
+  (0, import_react17.useEffect)(() => {
     const seeded = steps.map(() => []);
     if (bundle) {
       const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
@@ -3623,26 +3785,26 @@ function MultiStepBundle(props) {
     setSelections(seeded);
   }, [bundle, steps]);
   const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
-  const totalMin = (0, import_react16.useMemo)(
+  const totalMin = (0, import_react17.useMemo)(
     () => steps.reduce((sum, s) => sum + s.minQuantity, 0),
     [steps]
   );
-  const unitsByStep = (0, import_react16.useMemo)(
+  const unitsByStep = (0, import_react17.useMemo)(
     () => selections.map((picks) => picks.reduce((sum, s) => sum + s.quantity, 0)),
     [selections]
   );
-  const totalQuantity = (0, import_react16.useMemo)(
+  const totalQuantity = (0, import_react17.useMemo)(
     () => unitsByStep.reduce((sum, u) => sum + u, 0),
     [unitsByStep]
   );
-  const stepSatisfied = (0, import_react16.useCallback)(
+  const stepSatisfied = (0, import_react17.useCallback)(
     (i) => (unitsByStep[i] ?? 0) >= (steps[i]?.minQuantity ?? 1),
     [unitsByStep, steps]
   );
   const allSatisfied = steps.length > 0 && steps.every((_, i) => stepSatisfied(i));
   const valid = !!bundle && allSatisfied;
   const completedSteps = steps.filter((_, i) => stepSatisfied(i)).length;
-  const summary = (0, import_react16.useMemo)(() => {
+  const summary = (0, import_react17.useMemo)(() => {
     let comparePrice = 0;
     let salePrice = 0;
     for (const stepPicks of selections) {
@@ -3662,7 +3824,7 @@ function MultiStepBundle(props) {
     const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
     return { comparePrice, salePrice, savings, savingsPercent };
   }, [selections, bundle]);
-  const addSelection = (0, import_react16.useCallback)((step, item) => {
+  const addSelection = (0, import_react17.useCallback)((step, item) => {
     setSelections((prev) => {
       if (step < 0 || step >= prev.length) return prev;
       if (prev[step].some((s) => s.variantId === item.variantId)) return prev;
@@ -3671,7 +3833,7 @@ function MultiStepBundle(props) {
       return next;
     });
   }, []);
-  const swapSelection = (0, import_react16.useCallback)(
+  const swapSelection = (0, import_react17.useCallback)(
     (step, item) => {
       setSelections((prev) => {
         if (!bundle || step < 0 || step >= prev.length) return prev;
@@ -3706,7 +3868,7 @@ function MultiStepBundle(props) {
     },
     [bundle]
   );
-  const updateQuantity = (0, import_react16.useCallback)(
+  const updateQuantity = (0, import_react17.useCallback)(
     (step, productId, variantId, quantity) => {
       setSelections((prev) => {
         if (step < 0 || step >= prev.length) return prev;
@@ -3725,7 +3887,7 @@ function MultiStepBundle(props) {
     },
     []
   );
-  const removeVariant = (0, import_react16.useCallback)(
+  const removeVariant = (0, import_react17.useCallback)(
     (step, variantId) => {
       setSelections((prev) => {
         if (step < 0 || step >= prev.length) return prev;
@@ -3741,7 +3903,7 @@ function MultiStepBundle(props) {
     },
     [bundle]
   );
-  const removeSlot = (0, import_react16.useCallback)(
+  const removeSlot = (0, import_react17.useCallback)(
     (step, index) => {
       setSelections((prev) => {
         if (step < 0 || step >= prev.length) return prev;
@@ -3757,7 +3919,7 @@ function MultiStepBundle(props) {
     },
     [bundle]
   );
-  const handleAddToCart = (0, import_react16.useCallback)(async () => {
+  const handleAddToCart = (0, import_react17.useCallback)(async () => {
     if (!bundle || !valid) return;
     const grouped = /* @__PURE__ */ new Map();
     for (const stepPicks of selections) {
@@ -3798,9 +3960,9 @@ function MultiStepBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -3821,7 +3983,7 @@ function MultiStepBundle(props) {
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -3833,12 +3995,19 @@ function MultiStepBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": totalMin,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -3846,7 +4015,7 @@ function MultiStepBundle(props) {
               "aria-valuenow": completedSteps,
               "aria-valuemin": 0,
               "aria-valuemax": steps.length,
-              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3856,8 +4025,8 @@ function MultiStepBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -3866,7 +4035,7 @@ function MultiStepBundle(props) {
                 children: `${completedSteps} of ${steps.length} steps completed`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -3877,15 +4046,15 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "section",
           {
             className: "lb-multi-step__group",
             "data-step-group": i,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "span",
                   {
                     className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
@@ -3894,7 +4063,7 @@ function MultiStepBundle(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
@@ -3904,13 +4073,13 @@ function MultiStepBundle(props) {
                        title button provides the keyboard/AT path (its
                        activation bubbles here); × stops propagation. */
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "div",
                       {
                         className: "lb-mix-match__slot lb-mix-match__slot--filled",
                         onClick: () => setPickerOpenAt(i),
                         children: [
-                          item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             "img",
                             {
                               src: item.featuredImage,
@@ -3918,8 +4087,8 @@ function MultiStepBundle(props) {
                               loading: "lazy"
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -3928,15 +4097,15 @@ function MultiStepBundle(props) {
                                 children: item.title
                               }
                             ),
-                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core15.formatMoney)(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core15.formatMoney)(item.price, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core15.formatMoney)(item.compareAtPrice, currency) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core15.formatMoney)(item.price, currency) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                             ] }),
-                            item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                            item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                           ] }),
-                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             "button",
                             {
                               type: "button",
@@ -3946,13 +4115,13 @@ function MultiStepBundle(props) {
                                 e.stopPropagation();
                                 removeSlot(i, index);
                               },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon4, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
                             }
                           ) : (
                             /* Required pick at its floor — quiet state chip instead
                                of the ×; removal returns once another slot covers
                                the product's minimum (variant swap flow). */
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
                           )
                         ]
                       },
@@ -3961,7 +4130,7 @@ function MultiStepBundle(props) {
                   ))
                 }
               ),
-              (0, import_core15.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              (0, import_core15.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -3970,15 +4139,15 @@ function MultiStepBundle(props) {
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         className: "lb-mix-match__add-product-icon",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlusIcon2, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
                   ]
                 }
               )
@@ -3986,29 +4155,29 @@ function MultiStepBundle(props) {
           },
           i
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-divider" }),
-        allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-divider" }),
+        allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-savings-amount": true, children: (0, import_core15.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-savings-amount": true, children: (0, import_core15.formatMoney)(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core15.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core15.formatMoney)(summary.salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core15.formatMoney)(summary.comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core15.formatMoney)(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -4018,7 +4187,7 @@ function MultiStepBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           MultiStepPicker,
           {
             outOfStockBehavior,
@@ -4054,7 +4223,7 @@ function stepHasInStockProduct(bundle, stepIndex) {
   });
 }
 function PlusIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       width: "18",
@@ -4064,14 +4233,14 @@ function PlusIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon4() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       width: "16",
@@ -4081,8 +4250,8 @@ function CloseIcon4() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -4095,7 +4264,7 @@ async function fetchShopCustomCss(options) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_core16 = require("@lime-bundles/core");
 var INITIAL_STATE2 = {
   status: "loading",
@@ -4103,10 +4272,10 @@ var INITIAL_STATE2 = {
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = (0, import_react17.useState)(
+  const [state, setState] = (0, import_react18.useState)(
     INITIAL_STATE2
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
     (0, import_core16.fetchBundlesForProduct)({
@@ -4155,6 +4324,7 @@ var import_core18 = require("@lime-bundles/core");
   BUNDLES_FOR_PRODUCT_QUERY,
   BUNDLE_METAOBJECT_QUERY,
   BogoBundle,
+  BundleCountdown,
   BundleParseError,
   DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,