@lime-bundles/react 6.0.0 → 6.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/FixedBundle.tsx
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useState as useState6 } from "react";
 import {
   formatMoney,
   formatUnitPrice,
@@ -659,8 +659,48 @@ function VariantDropdown({
   );
 }
 
-// src/components/FixedBundle.tsx
+// src/components/BundleCountdown.tsx
+import { useEffect as useEffect6, useState as useState5 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function pad(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+function formatRemaining(remaining) {
+  const days = Math.floor(remaining / 864e5);
+  const hours = Math.floor(remaining % 864e5 / 36e5);
+  const mins = Math.floor(remaining % 36e5 / 6e4);
+  const secs = Math.floor(remaining % 6e4 / 1e3);
+  return days > 0 ? days + "d " + pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s" : pad(hours) + "h " + pad(mins) + "m " + pad(secs) + "s";
+}
+function BundleCountdown({
+  endsAt,
+  widgetConfig,
+  label = "Limited time offer"
+}) {
+  const enabled = !!endsAt && widgetConfig?.countdown?.showCountdown !== false;
+  const endTime = enabled ? new Date(endsAt).getTime() : NaN;
+  const [remaining, setRemaining] = useState5(null);
+  useEffect6(() => {
+    if (!enabled || isNaN(endTime)) {
+      setRemaining(null);
+      return;
+    }
+    const update = () => setRemaining(endTime - Date.now());
+    update();
+    const interval = setInterval(update, 1e3);
+    return () => clearInterval(interval);
+  }, [enabled, endTime]);
+  if (!enabled || isNaN(endTime) || remaining === null || remaining <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-countdown", "data-countdown": true, children: [
+    /* @__PURE__ */ jsx2("div", { className: "lb-bundle-countdown__label", children: /* @__PURE__ */ jsx2("span", { children: label }) }),
+    /* @__PURE__ */ jsx2("span", { className: "lb-bundle-countdown__timer", "data-countdown-timer": true, children: formatRemaining(remaining) })
+  ] });
+}
+
+// src/components/FixedBundle.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -684,9 +724,9 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = useState5(false);
-  const [cartError, setCartError] = useState5(null);
-  const [selectedVariants, setSelectedVariants] = useState5({});
+  const [addingToCart, setAddingToCart] = useState6(false);
+  const [cartError, setCartError] = useState6(null);
+  const [selectedVariants, setSelectedVariants] = useState6({});
   const handleVariantChange = useCallback5(
     (productId, variant) => {
       setSelectedVariants((prev) => {
@@ -699,7 +739,7 @@ function FixedBundle(props) {
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const productsEdgeFadeRef = useEdgeFade();
-  useEffect6(() => {
+  useEffect7(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -777,9 +817,9 @@ function FixedBundle(props) {
     }
   }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs2("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx2("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -806,7 +846,7 @@ function FixedBundle(props) {
   const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: (el) => {
@@ -817,11 +857,18 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx2("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx2("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx3("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx3("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
           FixedProductRow,
           {
             bundle,
@@ -832,29 +879,29 @@ function FixedBundle(props) {
           },
           product.id
         )) }),
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx2("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ jsxs2("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx3("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx3("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ jsxs3("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx2("span", { "data-savings-amount": true, children: formatMoney(savings, currency) }),
+              /* @__PURE__ */ jsx3("span", { "data-savings-amount": true, children: formatMoney(savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs2("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs3("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney(comparePrice, currency) }),
-            /* @__PURE__ */ jsx2("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney(salePrice, currency) })
+          /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney(comparePrice, currency) }),
+            /* @__PURE__ */ jsx3("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx2(
+        cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx3(
           "button",
           {
             className: "lb-bundle__cta",
@@ -879,7 +926,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     variants,
     optionNames
   });
-  useEffect6(() => {
+  useEffect7(() => {
     onVariantChange(product.id, selectedVariant ?? null);
   }, [selectedVariant, product.id, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find(
@@ -900,15 +947,15 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     bundle.widgetConfig.lowStockThreshold,
     bundle.widgetConfig.showLowStockBadge
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
       "aria-disabled": isOos || void 0,
       part: "product",
       children: [
-        isOos && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
-        thumbImage && /* @__PURE__ */ jsx2(
+        isOos && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
+        thumbImage && /* @__PURE__ */ jsx3(
           "img",
           {
             src: thumbImage.url,
@@ -917,11 +964,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             loading: "lazy"
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product-info", children: [
-          /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
-          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-          /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-product-prices", children: [
-            compareAt && /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
+          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx3("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+          /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-product-prices", children: [
+            compareAt && /* @__PURE__ */ jsx3(
               "span",
               {
                 className: "lb-bundle-product-compare-price",
@@ -929,9 +976,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
                 children: compareAt
               }
             ),
-            /* @__PURE__ */ jsx2("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
+            /* @__PURE__ */ jsx3("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
           ] }),
-          unitPriceText && /* @__PURE__ */ jsx2(
+          unitPriceText && /* @__PURE__ */ jsx3(
             "span",
             {
               className: "lb-bundle__product-unit-price",
@@ -939,18 +986,18 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
               children: unitPriceText
             }
           ),
-          showLowStock && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-low-stock-badge", children: [
+          showLowStock && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-low-stock-badge", children: [
             "Only ",
             displayVariant.quantityAvailable,
             " left"
           ] }),
-          showPicker && /* @__PURE__ */ jsx2("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+          showPicker && /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ jsx2(
+            return /* @__PURE__ */ jsx3(
               VariantDropdown,
               {
                 options: dropdownOptions,
@@ -962,7 +1009,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             );
           }) })
         ] }),
-        displayVariant && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
+        displayVariant && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
           "\xD7",
           displayQty
         ] })
@@ -972,7 +1019,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
 }
 
 // src/components/MixMatchBundle.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo6, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo6, useState as useState9 } from "react";
 import {
   formatMoney as formatMoney3,
   formatUnitPrice as formatUnitPrice3,
@@ -982,14 +1029,14 @@ import {
 } from "@lime-bundles/core";
 
 // src/hooks/useShopSettings.ts
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 import {
   DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR2
 } from "@lime-bundles/core";
 function useShopSettings(options) {
-  const [outOfStockBehavior, setOutOfStockBehavior] = useState6(DEFAULT_OUT_OF_STOCK_BEHAVIOR2);
+  const [outOfStockBehavior, setOutOfStockBehavior] = useState7(DEFAULT_OUT_OF_STOCK_BEHAVIOR2);
   const { shopDomain, storefrontAccessToken } = options;
-  useEffect7(() => {
+  useEffect8(() => {
     const controller = new AbortController();
     let active = true;
     fetchShopSettingsOrDefault({
@@ -1010,10 +1057,10 @@ function useShopSettings(options) {
 
 // src/components/MixMatchPicker.tsx
 import {
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useMemo as useMemo5,
   useRef as useRef6,
-  useState as useState7
+  useState as useState8
 } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -1025,7 +1072,7 @@ import {
 } from "@lime-bundles/core";
 
 // src/hooks/useScrollLock.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 var lockCount = 0;
 var savedY = 0;
 function lock() {
@@ -1054,7 +1101,7 @@ function unlock() {
   window.scrollTo(0, savedY);
 }
 function useScrollLock(active) {
-  useEffect8(() => {
+  useEffect9(() => {
     if (!active) return;
     lock();
     return unlock;
@@ -1062,7 +1109,7 @@ function useScrollLock(active) {
 }
 
 // src/hooks/useFocusTrap.ts
-import { useEffect as useEffect9, useRef as useRef5 } from "react";
+import { useEffect as useEffect10, useRef as useRef5 } from "react";
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -1088,7 +1135,7 @@ function useFocusTrap({
   returnFocusRef
 }) {
   const previouslyFocused = useRef5(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!active) return;
     const container = containerRef.current;
     previouslyFocused.current = document.activeElement ?? null;
@@ -1130,10 +1177,17 @@ function useFocusTrap({
 }
 
 // src/components/MixMatchPicker.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ruleFor(bundle, productId) {
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ruleFor(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? 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, "-");
 }
@@ -1182,9 +1236,9 @@ function MixMatchPicker({
   const overlayRef = useRef6(null);
   const dialogRef = useRef6(null);
   const mouseDownTarget = useRef6(null);
-  const [open, setOpen] = useState7(false);
-  const [query, setQuery] = useState7("");
-  const [activeType, setActiveType] = useState7(FILTERS_ALL);
+  const [open, setOpen] = useState8(false);
+  const [query, setQuery] = useState8("");
+  const [activeType, setActiveType] = useState8(FILTERS_ALL);
   const eligible = useMemo5(
     () => buildEligibleProducts(bundle, outOfStockBehavior),
     [bundle, outOfStockBehavior]
@@ -1205,7 +1259,7 @@ function MixMatchPicker({
   const totalUnits = selections.reduce((sum, s) => sum + s.quantity, 0);
   const atCapacity = totalUnits >= requiredQty;
   const shownUnits = Math.min(totalUnits, requiredQty);
-  useEffect10(() => {
+  useEffect11(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -1246,7 +1300,7 @@ function MixMatchPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "div",
       {
         ref: (el) => {
@@ -1258,7 +1312,7 @@ function MixMatchPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs4(
           "div",
           {
             ref: dialogRef,
@@ -1268,13 +1322,13 @@ function MixMatchPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ jsx3("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
-                    /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+              /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ jsx4("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
+                    /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1282,16 +1336,16 @@ function MixMatchPicker({
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ jsx3(CloseIcon, {})
+                      children: /* @__PURE__ */ jsx4(CloseIcon, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ jsx3(
+                    children: /* @__PURE__ */ jsx4(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -1299,7 +1353,7 @@ function MixMatchPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": requiredQty,
-                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ jsx3(
+                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ jsx4(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -1312,8 +1366,8 @@ function MixMatchPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ jsx3(
+              wc.showSearch && /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     type: "text",
@@ -1327,7 +1381,7 @@ function MixMatchPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ jsx3(
+                query.length > 0 && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1335,11 +1389,11 @@ function MixMatchPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ jsx3(SearchClearIcon, {})
+                    children: /* @__PURE__ */ jsx4(SearchClearIcon, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ jsx3(
+              showFilters && /* @__PURE__ */ jsx4(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -1348,7 +1402,7 @@ function MixMatchPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ jsx3(
+                    return /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -1363,7 +1417,7 @@ function MixMatchPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx3("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx4(
                 MixMatchPickerRow,
                 {
                   bundle,
@@ -1382,10 +1436,10 @@ function MixMatchPicker({
                 },
                 ep.product.id
               )) }),
-              showEmpty && /* @__PURE__ */ jsx3("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx3("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ jsx3("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
-              /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-footer", children: [
-                /* @__PURE__ */ jsx3(
+              showEmpty && /* @__PURE__ */ jsx4("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx4("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ jsx4("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
+              /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-footer", children: [
+                /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -1394,7 +1448,7 @@ function MixMatchPicker({
                     children: `${shownUnits} of ${requiredQty} added`
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1438,6 +1492,8 @@ function MixMatchPickerRow({
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
   const currentVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable2(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
+  const vRule = ruleFor(bundle, product.id, currentVariant?.id);
+  const variantMax = variantRuleFor(bundle, currentVariant?.id)?.max;
   const alreadyInBundle = useMemo5(() => {
     if (!currentVariant) return 0;
     let sum = 0;
@@ -1465,22 +1521,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 ? maxAddableQuantity(
     currentVariant,
     spotCeiling,
     Math.max(0, alreadyInBundle - committedQty)
   ) : 0;
-  const stepperMax = Math.max(rule.min, cap);
-  const [qty, setQty] = useState7(rule.min);
-  useEffect10(() => {
-    setQty((prev) => Math.max(rule.min, Math.min(prev, stepperMax)));
-  }, [stepperMax, rule.min]);
+  const stepperMax = Math.max(vRule.min, cap);
+  const [qty, setQty] = useState8(vRule.min);
+  useEffect11(() => {
+    setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
+  }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  useEffect10(() => {
-    if (!variantInBundle) setQty(rule.min);
-  }, [variantInBundle, currentVariantId, rule.min]);
+  useEffect11(() => {
+    if (!variantInBundle) setQty(vRule.min);
+  }, [variantInBundle, currentVariantId, vRule.min]);
   if (!currentVariant) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
   const unitPriceText = formatUnitPrice2(
@@ -1488,8 +1548,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;
@@ -1500,7 +1560,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,
@@ -1522,7 +1582,7 @@ function MixMatchPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -1531,8 +1591,8 @@ function MixMatchPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ jsx4(
             "img",
             {
               src: thumbImage.url,
@@ -1540,10 +1600,10 @@ function MixMatchPickerRow({
               loading: "lazy"
             }
           ),
-          variantInBundle && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInBundle && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -1552,24 +1612,24 @@ function MixMatchPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ jsxs3("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ jsx3("span", { "data-row-price-sale": true, children: formatMoney2(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx3("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney2(compareCents, currency) })
+          /* @__PURE__ */ jsxs4("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ jsx4("span", { "data-row-price-sale": true, children: formatMoney2(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx4("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney2(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ jsx3("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ jsx4("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ jsxs3(
+            return /* @__PURE__ */ jsxs4(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ jsx3("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ jsx4(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -1584,17 +1644,17 @@ function MixMatchPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ jsx3("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs3(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
+          isOos ? /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs4(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1615,7 +1675,7 @@ function MixMatchPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -1624,7 +1684,7 @@ function MixMatchPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1648,7 +1708,7 @@ function MixMatchPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -1667,7 +1727,7 @@ function MixMatchPickerRow({
   );
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "20",
@@ -1677,14 +1737,14 @@ function CloseIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx3("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx3("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx4("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx4("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       width: "16",
@@ -1693,17 +1753,25 @@ function SearchClearIcon() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx3("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ jsx4("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MixMatchBundle.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function ruleFor2(bundle, productId) {
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ruleFor2(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE2;
 }
+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);
@@ -1724,7 +1792,8 @@ function MixMatchBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productHandle
   } = props;
   const result = useBundleData({
     shopDomain,
@@ -1742,16 +1811,16 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = useState8([]);
-  const [seededFor, setSeededFor] = useState8(null);
-  const [pickerOpen, setPickerOpen] = useState8(false);
-  const [addingToCart, setAddingToCart] = useState8(false);
-  const [cartError, setCartError] = useState8(null);
+  const [selections, setSelections] = useState9([]);
+  const [seededFor, setSeededFor] = useState9(null);
+  const [pickerOpen, setPickerOpen] = useState9(false);
+  const [addingToCart, setAddingToCart] = useState9(false);
+  const [cartError, setCartError] = useState9(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();
-  useEffect11(() => {
+  useEffect12(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -1764,37 +1833,64 @@ function MixMatchBundle(props) {
       );
     }
   }, [result, onError]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+    const pick = (product, variant, quantity) => ({
+      productId: product.id,
+      variantId: variant.id,
+      title: product.title,
+      url: `/products/${product.handle}`,
+      variantTitle: variant.title,
+      featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
+      price: parseFloat(variant.price.amount),
+      compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
+      unitPrice: formatUnitPrice3(
+        variant.unitPrice,
+        variant.unitPriceMeasurement,
+        seedCurrency
+      ),
+      quantity
+    });
     const seeds = [];
-    for (const [pid, rule] of Object.entries(bundle.productRules)) {
-      if (!rule.required) continue;
-      const product = bundle.products.find((p) => p.id === pid);
-      const variant = product?.variants.nodes.find(
+    for (const product of bundle.products) {
+      let seededVariant = false;
+      for (const variant2 of product.variants.nodes) {
+        const vRule = bundle.variantRules[variant2.id];
+        if (!vRule?.required) continue;
+        if (!isVariantFulfillable3(variant2, Math.max(1, vRule.min))) continue;
+        seeds.push(pick(product, variant2, Math.max(1, vRule.min)));
+        seededVariant = true;
+      }
+      if (seededVariant) continue;
+      const rule = bundle.productRules[product.id];
+      if (!rule?.required) continue;
+      const variant = product.variants.nodes.find(
         (v) => isVariantFulfillable3(v, rule.min)
       );
-      if (!product || !variant) continue;
-      seeds.push({
-        productId: product.id,
-        variantId: variant.id,
-        title: product.title,
-        url: `/products/${product.handle}`,
-        variantTitle: variant.title,
-        featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
-        price: parseFloat(variant.price.amount),
-        compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
-        unitPrice: formatUnitPrice3(
-          variant.unitPrice,
-          variant.unitPriceMeasurement,
-          seedCurrency
-        ),
-        quantity: rule.min
-      });
+      if (!variant) continue;
+      seeds.push(pick(product, variant, rule.min));
+    }
+    if (seeds.length === 0 && productHandle) {
+      const requiredUnits2 = bundle.minQuantity ?? 0;
+      const qualifies = (p) => {
+        const min = bundle.productRules[p.id]?.min ?? 1;
+        return min <= requiredUnits2 && p.variants.nodes.some((v) => isVariantFulfillable3(v, min));
+      };
+      const seed = bundle.products.find(
+        (p) => p.handle === productHandle && qualifies(p)
+      ) ?? bundle.products.find(qualifies);
+      if (seed) {
+        const min = bundle.productRules[seed.id]?.min ?? 1;
+        const variant = seed.variants.nodes.find(
+          (v) => isVariantFulfillable3(v, min)
+        );
+        if (variant) seeds.push(pick(seed, variant, min));
+      }
     }
     if (seeds.length > 0) setSelections(seeds);
-  }, [bundle, seededFor]);
+  }, [bundle, seededFor, productHandle]);
   const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
   const requiredUnits = bundle?.minQuantity ?? 0;
   const totalQuantity = useMemo6(
@@ -1954,9 +2050,9 @@ function MixMatchBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs4("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs5("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -1975,7 +2071,7 @@ function MixMatchBundle(props) {
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: (el) => {
@@ -1987,12 +2083,19 @@ function MixMatchBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": requiredUnits,
       children: [
-        /* @__PURE__ */ jsx4("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx4("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx4("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx5("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx5("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ jsx5(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -2000,7 +2103,7 @@ function MixMatchBundle(props) {
               "aria-valuenow": shownUnits,
               "aria-valuemin": 0,
               "aria-valuemax": requiredUnits,
-              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ jsx4(
+              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -2010,8 +2113,8 @@ function MixMatchBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ jsx5(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -2020,7 +2123,7 @@ function MixMatchBundle(props) {
                 children: `${shownUnits} of ${requiredUnits} added`
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -2031,7 +2134,7 @@ function MixMatchBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: "lb-mix-match__slots lb-edge-fade",
@@ -2042,15 +2145,15 @@ function MixMatchBundle(props) {
                  button provides the keyboard/AT path (its activation bubbles
                  here); × stops propagation. */
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs5(
                 "div",
                 {
                   className: "lb-mix-match__slot lb-mix-match__slot--filled",
                   onClick: () => setPickerOpen(true),
                   children: [
-                    item.featuredImage && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx4("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
-                    /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__filled-info", children: [
-                      /* @__PURE__ */ jsx4(
+                    item.featuredImage && /* @__PURE__ */ jsx5("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx5("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
+                    /* @__PURE__ */ jsxs5("div", { className: "lb-mix-match__filled-info", children: [
+                      /* @__PURE__ */ jsx5(
                         "button",
                         {
                           type: "button",
@@ -2059,15 +2162,15 @@ function MixMatchBundle(props) {
                           children: item.title
                         }
                       ),
-                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                      /* @__PURE__ */ jsxs4("span", { className: "lb-mix-match__filled-price", children: [
-                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx4("s", { className: "lb-mix-match__filled-compare", children: formatMoney3(item.compareAtPrice, currency) }),
-                        /* @__PURE__ */ jsx4("span", { className: "lb-bundle-product-price", children: formatMoney3(item.price, currency) }),
-                        /* @__PURE__ */ jsx4("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                      /* @__PURE__ */ jsxs5("span", { className: "lb-mix-match__filled-price", children: [
+                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx5("s", { className: "lb-mix-match__filled-compare", children: formatMoney3(item.compareAtPrice, currency) }),
+                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle-product-price", children: formatMoney3(item.price, currency) }),
+                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                       ] }),
-                      item.unitPrice && /* @__PURE__ */ jsx4("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                      item.unitPrice && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                     ] }),
-                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ jsx4(
+                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ jsx5(
                       "button",
                       {
                         type: "button",
@@ -2077,13 +2180,13 @@ function MixMatchBundle(props) {
                           e.stopPropagation();
                           removeSlot(index);
                         },
-                        children: /* @__PURE__ */ jsx4(CloseIcon2, {})
+                        children: /* @__PURE__ */ jsx5(CloseIcon2, {})
                       }
                     ) : (
                       /* Required pick at its floor — quiet state chip instead of
                          the ×; removal returns once another slot covers the
                          product's minimum (variant swap flow). */
-                      /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                      /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__slot-required", children: "Required" })
                     )
                   ]
                 },
@@ -2092,7 +2195,7 @@ function MixMatchBundle(props) {
             ))
           }
         ),
-        totalQuantity < requiredUnits && /* @__PURE__ */ jsxs4(
+        totalQuantity < requiredUnits && /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -2100,34 +2203,34 @@ function MixMatchBundle(props) {
             "data-add-product-trigger": true,
             onClick: () => setPickerOpen(true),
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(PlusIcon, {}) }),
-              /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
+              /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(PlusIcon, {}) }),
+              /* @__PURE__ */ jsx5("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx4("div", { className: "lb-bundle-divider" }),
-        selections.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx4("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs4("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-divider" }),
+        selections.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs5("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx4("span", { "data-savings-amount": true, children: formatMoney3(summary.savings, currency) }),
+              /* @__PURE__ */ jsx5("span", { "data-savings-amount": true, children: formatMoney3(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs4("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs5("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs4("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx4("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney3(summary.comparePrice, currency) }),
-            /* @__PURE__ */ jsx4("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney3(summary.salePrice, currency) })
+          /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney3(summary.comparePrice, currency) }),
+            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney3(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx4(
+        cartError && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx5(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2137,7 +2240,7 @@ function MixMatchBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpen && /* @__PURE__ */ jsx4(
+        pickerOpen && /* @__PURE__ */ jsx5(
           MixMatchPicker,
           {
             outOfStockBehavior,
@@ -2178,7 +2281,7 @@ function countInStockProducts(bundle) {
   return count;
 }
 function PlusIcon() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "18",
@@ -2188,14 +2291,14 @@ function PlusIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx4("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx4("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx5("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx5("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon2() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "16",
@@ -2205,25 +2308,28 @@ function CloseIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx4("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx4("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx5("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx5("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 
 // src/components/VolumeBundle.tsx
-import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo7, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo7, useState as useState10 } from "react";
 import {
   formatMoney as formatMoney4,
   formatUnitPrice as formatUnitPrice4,
   calculateTierSavings,
   getActiveTier,
   getMinTierQuantity,
+  bestValueTierIndex,
+  resolveDefaultTierIndex,
+  resolvePopularTierIndex,
   isVariantFulfillable as isVariantFulfillable4,
   shouldShowLowStockBadge as shouldShowLowStockBadge2
 } from "@lime-bundles/core";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -2247,13 +2353,30 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = useState9(1);
-  const [addingToCart, setAddingToCart] = useState9(false);
-  const [cartError, setCartError] = useState9(null);
+  const [quantity, setQuantity] = useState10(1);
+  const [addingToCart, setAddingToCart] = useState10(false);
+  const [cartError, setCartError] = useState10(null);
+  const [seededFor, setSeededFor] = useState10(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  useEffect13(() => {
+    if (!bundle || seededFor === bundle.id) return;
+    setSeededFor(bundle.id);
+    const tiers = bundle.volumeTiers;
+    if (tiers.length === 0) return;
+    const best = bestValueTierIndex(
+      tiers,
+      bundle.discountConfig.discountType
+    );
+    const idx = resolveDefaultTierIndex(
+      bundle.widgetConfig.defaultTier,
+      tiers.length,
+      best
+    );
+    setQuantity(tiers[idx].minQuantity);
+  }, [bundle, seededFor]);
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const tiersEdgeFadeRef = useEdgeFade();
-  useEffect12(() => {
+  useEffect13(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2296,19 +2419,16 @@ function VolumeBundle(props) {
   );
   const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
   const popularTierIndex = useMemo7(() => {
-    if (!bundle?.widgetConfig.popularBadge.visible || tierSavings.length === 0) {
-      return -1;
-    }
-    const pinned = bundle.widgetConfig.popularBadge.tierIndex;
-    if (pinned !== void 0) {
-      return Math.min(Math.max(pinned, 0), tierSavings.length - 1);
-    }
-    let best = 0;
-    for (let i = 1; i < tierSavings.length; i++) {
-      if (tierSavings[i].savings > tierSavings[best].savings) best = i;
-    }
-    return best;
-  }, [bundle, tierSavings]);
+    if (!bundle || bundle.volumeTiers.length === 0) return -1;
+    return resolvePopularTierIndex(
+      bundle.widgetConfig.popularBadge.tierIndex,
+      bundle.widgetConfig.popularBadge.visible !== false,
+      bestValueTierIndex(
+        bundle.volumeTiers,
+        bundle.discountConfig.discountType
+      )
+    );
+  }, [bundle]);
   const activeUnitPrice = tierSavings.find((ts) => ts.tier === activeTier)?.unitPrice ?? basePrice;
   const undiscountedTotal = basePrice * quantity;
   const volumeTotal = activeUnitPrice * quantity;
@@ -2360,15 +2480,15 @@ function VolumeBundle(props) {
     tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs5("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ jsxs6("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: (el) => {
@@ -2379,12 +2499,19 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx5("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx5("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx6("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx6("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
-          thumbImage && /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
+          thumbImage && /* @__PURE__ */ jsx6(
             "img",
             {
               src: thumbImage.url,
@@ -2393,20 +2520,20 @@ function VolumeBundle(props) {
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ jsx5("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ jsxs5("p", { className: "lb-bundle__product-price", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ jsxs6("p", { className: "lb-bundle__product-price", children: [
               formatMoney4(basePrice, currency),
               " each"
             ] }),
-            unitPriceText && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-            showPicker && /* @__PURE__ */ jsx5("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            unitPriceText && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ jsx6("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
               const dropdownOptions = optionsFor(optionIndex).map((o) => ({
                 value: o.value,
                 label: o.value,
                 disabled: o.disabled
               }));
-              return /* @__PURE__ */ jsx5(
+              return /* @__PURE__ */ jsx6(
                 VariantDropdown,
                 {
                   options: dropdownOptions,
@@ -2419,37 +2546,47 @@ function VolumeBundle(props) {
             }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             className: "lb-bundle__tiers lb-edge-fade",
-            role: "table",
-            "aria-label": "Volume discounts",
+            role: "radiogroup",
+            "aria-label": "Select quantity",
             ref: tiersEdgeFadeRef,
             children: tierSavings.map((ts, tierIndex) => {
               const savingsPercent = Math.round(ts.savingsPercent);
               const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
-              return /* @__PURE__ */ jsxs5(
+              const isChecked = activeTier === ts.tier;
+              return /* @__PURE__ */ jsxs6(
                 "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__ */ jsx5("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-radio-dot" }) }),
-                    /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-info", role: "cell", children: [
-                      /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-label", children: [
+                    /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-radio-dot" }) }),
+                    /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-info", children: [
+                      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-label", children: [
                         "Buy ",
                         ts.tier.minQuantity
                       ] }),
-                      /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-price", children: [
-                        showCompare && /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-compare", children: formatMoney4(basePrice, currency) }),
-                        /* @__PURE__ */ jsx5("span", { children: formatMoney4(ts.unitPrice, currency) }),
-                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-unit", children: "each" })
+                      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-price", children: [
+                        showCompare && /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-compare", children: formatMoney4(basePrice, currency) }),
+                        /* @__PURE__ */ jsx6("span", { children: formatMoney4(ts.unitPrice, currency) }),
+                        /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-unit", children: "each" })
                       ] })
                     ] }),
-                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-right", role: "cell", children: [
-                      tierIndex === popularTierIndex && /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
-                      savingsPercent > 0 && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-savings", children: [
+                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-right", children: [
+                      tierIndex === popularTierIndex && /* @__PURE__ */ jsx6("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
+                      savingsPercent > 0 && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle__tier-savings", children: [
                         "Save ",
                         savingsPercent,
                         "%"
@@ -2462,10 +2599,10 @@ function VolumeBundle(props) {
             })
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ jsx5("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ jsx6("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -2473,7 +2610,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -2487,7 +2624,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -2497,23 +2634,23 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        cartError && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         bundle && displayVariant && shouldShowLowStockBadge2(
           displayVariant,
           minTierQty,
           bundle.widgetConfig.lowStockThreshold,
           bundle.widgetConfig.showLowStockBadge
-        ) && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-low-stock-badge", children: [
+        ) && /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-low-stock-badge", children: [
           "Only ",
           displayVariant.quantityAvailable,
           " left"
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
+        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
               "Total",
-              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ jsxs5("span", { "data-item-count": true, children: [
+              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ jsxs6("span", { "data-item-count": true, children: [
                 " ",
                 "(",
                 quantity,
@@ -2522,24 +2659,24 @@ function VolumeBundle(props) {
                 ")"
               ] })
             ] }),
-            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ jsxs5("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ jsxs6("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx5("span", { "data-savings-amount": true, children: formatMoney4(volumeSavings, currency) }),
+              /* @__PURE__ */ jsx6("span", { "data-savings-amount": true, children: formatMoney4(volumeSavings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs5("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs6("span", { "data-savings-percent": true, children: [
                 "(",
                 volumeSavingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney4(undiscountedTotal, currency) }),
-            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: formatMoney4(volumeTotal, currency) })
+          /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney4(undiscountedTotal, currency) }),
+            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: formatMoney4(volumeTotal, currency) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2555,13 +2692,13 @@ function VolumeBundle(props) {
 }
 
 // src/components/BogoBundle.tsx
-import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo8, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo8, useState as useState11 } from "react";
 import {
   formatMoney as formatMoney5,
   formatUnitPrice as formatUnitPrice5,
   isVariantFulfillable as isVariantFulfillable5
 } from "@lime-bundles/core";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function discountedUnit(price, percent) {
   const cents = Math.round(price * 100);
   const discounted = cents - Math.floor(cents * percent / 100);
@@ -2590,9 +2727,9 @@ function BogoBundle(props) {
     bundleType: "bogo",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = useState10(false);
-  const [cartError, setCartError] = useState10(null);
-  const [selectedVariants, setSelectedVariants] = useState10({ buy: null, get: null });
+  const [addingToCart, setAddingToCart] = useState11(false);
+  const [cartError, setCartError] = useState11(null);
+  const [selectedVariants, setSelectedVariants] = useState11({ buy: null, get: null });
   const handleVariantChange = useCallback8(
     (role, variant) => {
       setSelectedVariants((prev) => {
@@ -2604,7 +2741,7 @@ function BogoBundle(props) {
   );
   const bundle = result.status === "success" && result.bundle.bundleType === "bogo" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect13(() => {
+  useEffect14(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2685,9 +2822,9 @@ function BogoBundle(props) {
     }
   }, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs6("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs7("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx7("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx7("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2704,7 +2841,7 @@ function BogoBundle(props) {
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
   const badge = percent === 100 ? "Free" : `${percent}% off`;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: (el) => {
@@ -2715,12 +2852,19 @@ function BogoBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx6("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx6("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx7("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx7("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx7("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__products", children: [
-          /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "lb-bundle__products", children: [
+          /* @__PURE__ */ jsx7(
             BogoProductRow,
             {
               side: "buy",
@@ -2732,11 +2876,11 @@ function BogoBundle(props) {
               onVariantChange: handleVariantChange
             }
           ),
-          /* @__PURE__ */ jsx6("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            /* @__PURE__ */ jsx6("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-            /* @__PURE__ */ jsx6("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          /* @__PURE__ */ jsx7("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx7("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx7("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
           ] }) }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             BogoProductRow,
             {
               side: "get",
@@ -2749,29 +2893,29 @@ function BogoBundle(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
-            showSavings && /* @__PURE__ */ jsxs6("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx7("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx7("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ jsxs7("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx6("span", { "data-savings-amount": true, children: formatMoney5(savings, currency) }),
+              /* @__PURE__ */ jsx7("span", { "data-savings-amount": true, children: formatMoney5(savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs6("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs7("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney5(comparePrice, currency) }),
-            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney5(salePrice, currency) })
+          /* @__PURE__ */ jsxs7("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ jsx7("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney5(comparePrice, currency) }),
+            /* @__PURE__ */ jsx7("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney5(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx6(
+        cartError && /* @__PURE__ */ jsx7("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx7(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2796,7 +2940,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     variants,
     optionNames
   });
-  useEffect13(() => {
+  useEffect14(() => {
     onVariantChange(side, selectedVariant ?? null);
   }, [selectedVariant, side, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable5(v, quantity)) ?? variants[0];
@@ -2810,8 +2954,8 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
-  return /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
-    thumbImage && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
+    thumbImage && /* @__PURE__ */ jsx7(
       "img",
       {
         src: thumbImage.url,
@@ -2820,11 +2964,11 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         loading: "lazy"
       }
     ),
-    /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
-      /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-title", children: product.title }),
-      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-product-prices", children: [
-        compareAt && /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs7("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ jsx7("p", { className: "lb-bundle__product-title", children: product.title }),
+      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx7("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+      /* @__PURE__ */ jsxs7("span", { className: "lb-bundle-product-prices", children: [
+        compareAt && /* @__PURE__ */ jsx7(
           "span",
           {
             className: "lb-bundle-product-compare-price",
@@ -2832,13 +2976,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
             children: compareAt
           }
         ),
-        /* @__PURE__ */ jsx6("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
-        /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
+        /* @__PURE__ */ jsx7("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
+        /* @__PURE__ */ jsxs7("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
           "\xD7",
           quantity
         ] })
       ] }),
-      unitPriceText && /* @__PURE__ */ jsx6(
+      unitPriceText && /* @__PURE__ */ jsx7(
         "span",
         {
           className: "lb-bundle__product-unit-price",
@@ -2846,13 +2990,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
           children: unitPriceText
         }
       ),
-      showPicker && /* @__PURE__ */ jsx6("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+      showPicker && /* @__PURE__ */ jsx7("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
         const dropdownOptions = optionsFor(optionIndex).map((o) => ({
           value: o.value,
           label: o.value,
           disabled: o.disabled
         }));
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx7(
           VariantDropdown,
           {
             options: dropdownOptions,
@@ -2864,12 +3008,12 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         );
       }) })
     ] }),
-    badge && /* @__PURE__ */ jsx6("span", { className: "lb-bogo__badge", children: badge })
+    badge && /* @__PURE__ */ jsx7("span", { className: "lb-bogo__badge", children: badge })
   ] });
 }
 
 // src/components/MultiStepBundle.tsx
-import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo10, useState as useState12 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect16, useMemo as useMemo10, useState as useState13 } from "react";
 import {
   formatMoney as formatMoney7,
   formatUnitPrice as formatUnitPrice7,
@@ -2882,10 +3026,10 @@ import {
 
 // src/components/MultiStepPicker.tsx
 import {
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useMemo as useMemo9,
   useRef as useRef7,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import {
@@ -2897,10 +3041,17 @@ import {
   stepHeadroom,
   DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE3
 } from "@lime-bundles/core";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function ruleFor3(bundle, productId) {
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ruleFor3(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE3;
 }
+function variantRuleFor3(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
 function sanitizeId2(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
@@ -2948,13 +3099,13 @@ function MultiStepPicker({
   const dialogRef = useRef7(null);
   const titleRef = useRef7(null);
   const mouseDownTarget = useRef7(null);
-  const [open, setOpen] = useState11(false);
-  const [stepIndex, setStepIndex] = useState11(
+  const [open, setOpen] = useState12(false);
+  const [stepIndex, setStepIndex] = useState12(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
   );
-  const [query, setQuery] = useState11("");
-  const [activeType, setActiveType] = useState11(FILTERS_ALL2);
-  const [announcement, setAnnouncement] = useState11("");
+  const [query, setQuery] = useState12("");
+  const [activeType, setActiveType] = useState12(FILTERS_ALL2);
+  const [announcement, setAnnouncement] = useState12("");
   const step = steps[stepIndex];
   const stepMin = step?.minQuantity ?? 1;
   const stepPicks = selections[stepIndex] ?? [];
@@ -2979,7 +3130,7 @@ function MultiStepPicker({
     return types;
   }, [eligible]);
   const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
-  useEffect14(() => {
+  useEffect15(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -3028,7 +3179,7 @@ function MultiStepPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         ref: (el) => {
@@ -3040,7 +3191,7 @@ function MultiStepPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ jsxs7(
+        children: /* @__PURE__ */ jsxs8(
           "div",
           {
             ref: dialogRef,
@@ -3050,10 +3201,10 @@ function MultiStepPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ jsx8(
                       "h4",
                       {
                         className: "lb-mix-match__modal-title",
@@ -3063,9 +3214,9 @@ function MultiStepPicker({
                         children: "Add to your bundle"
                       }
                     ),
-                    /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                    /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
@@ -3073,16 +3224,16 @@ function MultiStepPicker({
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ jsx7(CloseIcon3, {})
+                      children: /* @__PURE__ */ jsx8(CloseIcon3, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ jsx7(
+                    children: /* @__PURE__ */ jsx8(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -3091,7 +3242,7 @@ function MultiStepPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": stepMin,
-                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ jsx7(
+                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ jsx8(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3104,8 +3255,8 @@ function MultiStepPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ jsx7(
+              wc.showSearch && /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ jsx8(
                   "input",
                   {
                     type: "text",
@@ -3119,7 +3270,7 @@ function MultiStepPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ jsx7(
+                query.length > 0 && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3127,11 +3278,11 @@ function MultiStepPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ jsx7(SearchClearIcon2, {})
+                    children: /* @__PURE__ */ jsx8(SearchClearIcon2, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ jsx7(
+              showFilters && /* @__PURE__ */ jsx8(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -3140,7 +3291,7 @@ function MultiStepPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL2, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ jsx7(
+                    return /* @__PURE__ */ jsx8(
                       "button",
                       {
                         type: "button",
@@ -3155,7 +3306,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx7("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx8(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3173,10 +3324,10 @@ function MultiStepPicker({
                 },
                 `${stepIndex}:${ep.product.id}`
               )) }),
-              showEmpty && /* @__PURE__ */ jsx7("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx7("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ jsx7("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
-              /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
-                stepIndex > 0 && /* @__PURE__ */ jsx7(
+              showEmpty && /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx8("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ jsx8("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
+              /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
+                stepIndex > 0 && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3186,7 +3337,7 @@ function MultiStepPicker({
                     children: "Back"
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -3195,7 +3346,7 @@ function MultiStepPicker({
                     children: `${shownUnits} of ${stepMin} added`
                   }
                 ),
-                !isLastStep && /* @__PURE__ */ jsx7(
+                !isLastStep && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3208,7 +3359,7 @@ function MultiStepPicker({
                     children: "Next"
                   }
                 ),
-                isLastStep && /* @__PURE__ */ jsx7(
+                isLastStep && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -3253,6 +3404,8 @@ function MultiStepPickerRow({
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
   const currentVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable6(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
+  const vRule = ruleFor3(bundle, product.id, currentVariant?.id);
+  const variantMax = variantRuleFor3(bundle, currentVariant?.id)?.max;
   const stepPicks = useMemo9(
     () => selections[stepIndex] ?? [],
     [selections, stepIndex]
@@ -3287,24 +3440,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 = 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 ? maxAddableQuantity2(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] = useState11(rule.min);
-  useEffect14(() => {
-    setQty((prev) => Math.max(rule.min, Math.min(prev, stepperMax)));
-  }, [stepperMax, rule.min]);
+  const stepperMax = Math.max(vRule.min, cap);
+  const [qty, setQty] = useState12(vRule.min);
+  useEffect15(() => {
+    setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
+  }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  useEffect14(() => {
-    if (!variantInStep) setQty(rule.min);
-  }, [variantInStep, currentVariantId, rule.min]);
+  useEffect15(() => {
+    if (!variantInStep) setQty(vRule.min);
+  }, [variantInStep, currentVariantId, vRule.min]);
   if (!currentVariant || !step) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
   const unitPriceText = formatUnitPrice6(
@@ -3312,8 +3468,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;
@@ -3324,7 +3480,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,
@@ -3346,7 +3502,7 @@ function MultiStepPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -3355,8 +3511,8 @@ function MultiStepPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ jsx8(
             "img",
             {
               src: thumbImage.url,
@@ -3364,10 +3520,10 @@ function MultiStepPickerRow({
               loading: "lazy"
             }
           ),
-          variantInStep && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+          variantInStep && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx8(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -3376,24 +3532,24 @@ function MultiStepPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ jsxs7("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ jsx7("span", { "data-row-price-sale": true, children: formatMoney6(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx7("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney6(compareCents, currency) })
+          /* @__PURE__ */ jsxs8("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ jsx8("span", { "data-row-price-sale": true, children: formatMoney6(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx8("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney6(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ jsx7("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ jsx8("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ jsxs7(
+            return /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ jsx8(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -3408,39 +3564,39 @@ function MultiStepPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ jsx7("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs7(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
+          isOos ? /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
                       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__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -3449,7 +3605,7 @@ function MultiStepPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
@@ -3474,7 +3630,7 @@ function MultiStepPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -3493,7 +3649,7 @@ function MultiStepPickerRow({
   );
 }
 function CloseIcon3() {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "svg",
     {
       width: "20",
@@ -3503,14 +3659,14 @@ function CloseIcon3() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx7("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx7("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx8("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx8("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon2() {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       width: "16",
@@ -3519,17 +3675,25 @@ function SearchClearIcon2() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx7("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ jsx8("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MultiStepBundle.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function ruleFor4(bundle, productId) {
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function ruleFor4(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
   return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE4;
 }
+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;
@@ -3576,14 +3740,14 @@ function MultiStepBundle(props) {
     bundleType: "multi_step",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = useState12([]);
-  const [pickerOpenAt, setPickerOpenAt] = useState12(null);
-  const [addingToCart, setAddingToCart] = useState12(false);
-  const [cartError, setCartError] = useState12(null);
+  const [selections, setSelections] = useState13([]);
+  const [pickerOpenAt, setPickerOpenAt] = useState13(null);
+  const [addingToCart, setAddingToCart] = useState13(false);
+  const [cartError, setCartError] = useState13(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "multi_step" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect15(() => {
+  useEffect16(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -3597,7 +3761,7 @@ function MultiStepBundle(props) {
     }
   }, [result, onError]);
   const steps = useMemo10(() => bundle?.steps ?? [], [bundle]);
-  useEffect15(() => {
+  useEffect16(() => {
     const seeded = steps.map(() => []);
     if (bundle) {
       const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
@@ -3807,9 +3971,9 @@ function MultiStepBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs8("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx8("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx8("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ jsxs9("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx9("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx9("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -3830,7 +3994,7 @@ function MultiStepBundle(props) {
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: (el) => {
@@ -3842,12 +4006,19 @@ function MultiStepBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": totalMin,
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ jsx8("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ jsx8("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ jsx9("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx9("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx9("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
+          BundleCountdown,
+          {
+            endsAt: bundle.endsAt,
+            widgetConfig: bundle.widgetConfig
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ jsx9(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -3855,7 +4026,7 @@ function MultiStepBundle(props) {
               "aria-valuenow": completedSteps,
               "aria-valuemin": 0,
               "aria-valuemax": steps.length,
-              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ jsx8(
+              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ jsx9(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3865,8 +4036,8 @@ function MultiStepBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ jsx9(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -3875,7 +4046,7 @@ function MultiStepBundle(props) {
                 children: `${completedSteps} of ${steps.length} steps completed`
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -3886,15 +4057,15 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx8("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx9("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs9(
           "section",
           {
             className: "lb-multi-step__group",
             "data-step-group": i,
             children: [
-              /* @__PURE__ */ jsxs8("div", { className: "lb-multi-step__group-heading", children: [
-                /* @__PURE__ */ jsx8("span", { className: "lb-multi-step__group-name", children: step.name }),
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs9("div", { className: "lb-multi-step__group-heading", children: [
+                /* @__PURE__ */ jsx9("span", { className: "lb-multi-step__group-name", children: step.name }),
+                /* @__PURE__ */ jsx9(
                   "span",
                   {
                     className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
@@ -3903,7 +4074,7 @@ function MultiStepBundle(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
@@ -3913,13 +4084,13 @@ function MultiStepBundle(props) {
                        title button provides the keyboard/AT path (its
                        activation bubbles here); × stops propagation. */
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-                    /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         className: "lb-mix-match__slot lb-mix-match__slot--filled",
                         onClick: () => setPickerOpenAt(i),
                         children: [
-                          item.featuredImage && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx8(
+                          item.featuredImage && /* @__PURE__ */ jsx9("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx9(
                             "img",
                             {
                               src: item.featuredImage,
@@ -3927,8 +4098,8 @@ function MultiStepBundle(props) {
                               loading: "lazy"
                             }
                           ) }),
-                          /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__filled-info", children: [
-                            /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__filled-info", children: [
+                            /* @__PURE__ */ jsx9(
                               "button",
                               {
                                 type: "button",
@@ -3937,15 +4108,15 @@ function MultiStepBundle(props) {
                                 children: item.title
                               }
                             ),
-                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                            /* @__PURE__ */ jsxs8("span", { className: "lb-mix-match__filled-price", children: [
-                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx8("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ jsx8("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
-                              /* @__PURE__ */ jsx8("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                            /* @__PURE__ */ jsxs9("span", { className: "lb-mix-match__filled-price", children: [
+                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx9("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
+                              /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
+                              /* @__PURE__ */ jsx9("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                             ] }),
-                            item.unitPrice && /* @__PURE__ */ jsx8("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                            item.unitPrice && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                           ] }),
-                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx8(
+                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx9(
                             "button",
                             {
                               type: "button",
@@ -3955,13 +4126,13 @@ function MultiStepBundle(props) {
                                 e.stopPropagation();
                                 removeSlot(i, index);
                               },
-                              children: /* @__PURE__ */ jsx8(CloseIcon4, {})
+                              children: /* @__PURE__ */ jsx9(CloseIcon4, {})
                             }
                           ) : (
                             /* Required pick at its floor — quiet state chip instead
                                of the ×; removal returns once another slot covers
                                the product's minimum (variant swap flow). */
-                            /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                            /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__slot-required", children: "Required" })
                           )
                         ]
                       },
@@ -3970,7 +4141,7 @@ function MultiStepBundle(props) {
                   ))
                 }
               ),
-              stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs8(
+              stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   type: "button",
@@ -3979,15 +4150,15 @@ function MultiStepBundle(props) {
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9(
                       "span",
                       {
                         className: "lb-mix-match__add-product-icon",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx8(PlusIcon2, {})
+                        children: /* @__PURE__ */ jsx9(PlusIcon2, {})
                       }
                     ),
-                    /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                    /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
                   ]
                 }
               )
@@ -3995,29 +4166,29 @@ function MultiStepBundle(props) {
           },
           i
         )) }),
-        /* @__PURE__ */ jsx8("div", { className: "lb-bundle-divider" }),
-        allSatisfied && /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ jsx8("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs8("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ jsx9("div", { className: "lb-bundle-divider" }),
+        allSatisfied && /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx9("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs9("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ jsx8("span", { "data-savings-amount": true, children: formatMoney7(summary.savings, currency) }),
+              /* @__PURE__ */ jsx9("span", { "data-savings-amount": true, children: formatMoney7(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ jsxs8("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ jsxs9("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx8("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney7(summary.comparePrice, currency) }),
-            /* @__PURE__ */ jsx8("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney7(summary.salePrice, currency) })
+          /* @__PURE__ */ jsxs9("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney7(summary.comparePrice, currency) }),
+            /* @__PURE__ */ jsx9("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney7(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx8("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx8(
+        cartError && /* @__PURE__ */ jsx9("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx9(
           "button",
           {
             className: "lb-bundle__cta",
@@ -4027,7 +4198,7 @@ function MultiStepBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpenAt !== null && /* @__PURE__ */ jsx8(
+        pickerOpenAt !== null && /* @__PURE__ */ jsx9(
           MultiStepPicker,
           {
             outOfStockBehavior,
@@ -4063,7 +4234,7 @@ function stepHasInStockProduct(bundle, stepIndex) {
   });
 }
 function PlusIcon2() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
       width: "18",
@@ -4073,14 +4244,14 @@ function PlusIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx8("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx9("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx9("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon4() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
       width: "16",
@@ -4090,8 +4261,8 @@ function CloseIcon4() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx8("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx9("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx9("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -4104,7 +4275,7 @@ async function fetchShopCustomCss(options) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-import { useState as useState13, useEffect as useEffect16 } from "react";
+import { useState as useState14, useEffect as useEffect17 } from "react";
 import {
   fetchBundlesForProduct,
   injectCustomCss as injectCustomCss2
@@ -4115,10 +4286,10 @@ var INITIAL_STATE2 = {
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = useState13(
+  const [state, setState] = useState14(
     INITIAL_STATE2
   );
-  useEffect16(() => {
+  useEffect17(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
     fetchBundlesForProduct({
@@ -4200,6 +4371,7 @@ export {
   BUNDLES_FOR_PRODUCT_QUERY,
   BUNDLE_METAOBJECT_QUERY2 as BUNDLE_METAOBJECT_QUERY,
   BogoBundle,
+  BundleCountdown,
   BundleParseError2 as BundleParseError,
   DEFAULT_OUT_OF_STOCK_BEHAVIOR3 as DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,