@salesgenterp/ui-components 0.4.554 → 0.4.556

package/dist/index.modern.js

@@ -49,7 +49,7 @@ import TableRow$1 from '@mui/material/TableRow';
 import { Virtuoso } from 'react-virtuoso';
 import Box$1 from '@mui/material/Box';
 import TableSortLabel$1 from '@mui/material/TableSortLabel';
-import { FiZap, FiCheck, FiCopy, FiShoppingCart, FiGift, FiArrowRight, FiPlusCircle, FiTag, FiPercent, FiLayers, FiTruck } from 'react-icons/fi';
+import { FiZap, FiCheck, FiCopy, FiShoppingCart, FiPercent, FiGift, FiArrowRight, FiPlusCircle, FiTag, FiLayers, FiTruck } from 'react-icons/fi';
 import { createPortal } from 'react-dom';
 import { HiSparkles, HiChevronUpDown } from 'react-icons/hi2';
 import { paramCase } from 'param-case';
@@ -2937,6 +2937,21 @@ var saveExcessPayment = function saveExcessPayment(_ref2) {
     return Promise.reject(e);
   }
 };
+var verifyExcessPaymentToken = function verifyExcessPaymentToken(_ref3) {
+  var apiEndPoint = _ref3.apiEndPoint,
+    token = _ref3.token,
+    excessPaymentToken = _ref3.excessPaymentToken;
+  try {
+    return Promise.resolve(API({
+      url: "/ecommerce/customer/verifyExcessPaymentLink?token=" + excessPaymentToken,
+      apiEndPoint: apiEndPoint,
+      token: token,
+      method: 'POST'
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 
 var ExcessPaymentForm = function ExcessPaymentForm(_ref) {
   var paymentMethods = _ref.paymentMethods,
@@ -3030,7 +3045,8 @@ var ExcessPaymentDialog = function ExcessPaymentDialog(_ref2) {
     token = _ref2.token,
     styles = _ref2.styles,
     onSave = _ref2.onSave,
-    customerData = _ref2.customerData;
+    customerData = _ref2.customerData,
+    excessPaymentToken = _ref2.excessPaymentToken;
   var _useForm = useForm({
       defaultValues: {
         paymentModeId: '',
@@ -3101,26 +3117,51 @@ var ExcessPaymentDialog = function ExcessPaymentDialog(_ref2) {
     token: token,
     asyncService: function asyncService() {
       try {
-        return Promise.resolve(getPaymentMethods({
+        return Promise.resolve(verifyExcessPaymentToken({
           apiEndPoint: apiEndPoint,
-          token: token
+          token: token,
+          excessPaymentToken: excessPaymentToken
         }));
       } catch (e) {
         return Promise.reject(e);
       }
     }
   }, function (data) {
-    var paymentMethods = (data === null || data === void 0 ? void 0 : data.filter(function (item) {
-      return item === null || item === void 0 ? void 0 : item.ecommerce;
-    })) || [];
-    return /*#__PURE__*/React__default.createElement(ExcessPaymentForm, {
-      loading: loading,
-      paymentMethods: paymentMethods,
-      control: control,
-      styles: styles,
-      handleSubmit: handleSubmit,
-      onSubmit: onSubmit,
-      onClose: onClose
+    if (data === false) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          color: 'red',
+          textAlign: 'center',
+          padding: '16px 8px'
+        }
+      }, "This excess payment link has already been used. An excess payment was previously added using this link.");
+    }
+    return /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
+      apiEndPoint: apiEndPoint,
+      token: token,
+      asyncService: function asyncService() {
+        try {
+          return Promise.resolve(getPaymentMethods({
+            apiEndPoint: apiEndPoint,
+            token: token
+          }));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
+    }, function (paymentMethodsData) {
+      var paymentMethods = (paymentMethodsData === null || paymentMethodsData === void 0 ? void 0 : paymentMethodsData.filter(function (item) {
+        return item === null || item === void 0 ? void 0 : item.ecommerce;
+      })) || [];
+      return /*#__PURE__*/React__default.createElement(ExcessPaymentForm, {
+        loading: loading,
+        paymentMethods: paymentMethods,
+        control: control,
+        styles: styles,
+        handleSubmit: handleSubmit,
+        onSubmit: onSubmit,
+        onClose: onClose
+      });
     });
   })));
 };
@@ -3143,7 +3184,7 @@ var totalIcons = [{
   icon: /*#__PURE__*/React__default.createElement(TbFileDollar, null)
 }];
 var Dashboard = function Dashboard(_ref) {
-  var _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
+  var _queryParams$excessPa, _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
   var apiEndPoint = _ref.apiEndPoint,
     serviceApiEndPoint = _ref.serviceApiEndPoint,
     token = _ref.token,
@@ -3209,11 +3250,13 @@ var Dashboard = function Dashboard(_ref) {
   var _useState8 = useState(0),
     value = _useState8[0],
     setValue = _useState8[1];
+  var showSalesOrderTable = !hideSalesOrderTab;
+  var showInvoiceTable = !hideInvoiceTab;
+  var showTableSection = showSalesOrderTable || showInvoiceTable;
   useEffect(function () {
-    if (hideSalesOrderTab) {
+    if (hideSalesOrderTab && !hideInvoiceTab) {
       setValue(1);
-    }
-    if (hideInvoiceTab) {
+    } else if (hideInvoiceTab && !hideSalesOrderTab) {
       setValue(0);
     }
   }, [hideSalesOrderTab, hideInvoiceTab]);
@@ -3510,6 +3553,7 @@ var Dashboard = function Dashboard(_ref) {
     setTriggerTableData: setTriggerTableData,
     styles: styles
   }), (isExcessPaymentModal === null || isExcessPaymentModal === void 0 ? void 0 : isExcessPaymentModal.open) && /*#__PURE__*/React__default.createElement(ExcessPaymentDialog, {
+    excessPaymentToken: (_queryParams$excessPa = queryParams === null || queryParams === void 0 ? void 0 : queryParams.excessPayment) != null ? _queryParams$excessPa : '',
     customerData: customerData,
     apiEndPoint: apiEndPoint,
     token: token,
@@ -3653,7 +3697,7 @@ var Dashboard = function Dashboard(_ref) {
     style: {
       marginTop: '1rem'
     }
-  })))))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(APITable, {
+  })))))), showTableSection && /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(APITable, {
     key: value,
     cacheFilters: true,
     extraFilterParams: value === 0 ? selectDates.recentInvoices : selectDates.salesOrders,
@@ -3664,7 +3708,7 @@ var Dashboard = function Dashboard(_ref) {
     }, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 12
-    }, /*#__PURE__*/React__default.createElement(Box, {
+    }, showSalesOrderTable && showInvoiceTable && /*#__PURE__*/React__default.createElement(Box, {
       sx: {
         borderBottom: 1,
         borderColor: 'divider'
@@ -3675,9 +3719,9 @@ var Dashboard = function Dashboard(_ref) {
       "aria-label": "basic tabs example",
       primaryColor: primaryColor,
       fontColor: fontColor
-    }, !hideSalesOrderTab && /*#__PURE__*/React__default.createElement(Tab, _extends({
+    }, /*#__PURE__*/React__default.createElement(Tab, _extends({
       label: "Sales Orders"
-    }, a11yProps(0))), !hideInvoiceTab && /*#__PURE__*/React__default.createElement(Tab, _extends({
+    }, a11yProps(0))), /*#__PURE__*/React__default.createElement(Tab, _extends({
       label: "Recent Invoices"
     }, a11yProps(1)))))), /*#__PURE__*/React__default.createElement(TypographyContainer$2, {
       variant: "h4",
@@ -8157,6 +8201,10 @@ var formatCurrency = function formatCurrency(amount) {
     maximumFractionDigits: 2
   });
 };
+var getPerQuantitySaveLabel = function getPerQuantitySaveLabel(amount, coupon) {
+  var prefix = (coupon === null || coupon === void 0 ? void 0 : coupon.maxAllowedDiscount) > 0 ? 'Save up to' : 'Save';
+  return prefix + " $" + formatCurrency(amount) + " per quantity";
+};
 var getUnitSaving = function getUnitSaving(coupon, productPrice) {
   if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage && productPrice > 0) {
     return productPrice * (coupon.offPercentage / 100);
@@ -8175,10 +8223,19 @@ var formatCartCount = function formatCartCount(cartQuantity) {
 var formatRemainingQuantity = function formatRemainingQuantity(remaining) {
   return remaining + " more " + (remaining === 1 ? 'quantity' : 'quantities');
 };
+var formatQuantityLabel = function formatQuantityLabel(count) {
+  return count + " " + (count === 1 ? 'quantity' : 'quantities');
+};
 var isBuyXGetFreeProduct = function isBuyXGetFreeProduct(coupon) {
   var _coupon$freeProducts;
   return (coupon === null || coupon === void 0 ? void 0 : coupon.discountType) === 'BuyXGetFreeProduct' || (coupon === null || coupon === void 0 ? void 0 : (_coupon$freeProducts = coupon.freeProducts) === null || _coupon$freeProducts === void 0 ? void 0 : _coupon$freeProducts.length) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0;
 };
+var isBuyXGetDiscount = function isBuyXGetDiscount(coupon) {
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.discountType) === 'BuyXGetDiscount') return true;
+  if (isBuyXGetFreeProduct(coupon)) return false;
+  if (!((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0) || (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) return false;
+  return Boolean(coupon === null || coupon === void 0 ? void 0 : coupon.offPercentage) || Boolean(coupon === null || coupon === void 0 ? void 0 : coupon.offAmount);
+};
 var getBuyXGetFreeProductOffPercent = function getBuyXGetFreeProductOffPercent(coupon) {
   var pct = Number(coupon === null || coupon === void 0 ? void 0 : coupon.offPercentage);
   if (Number.isFinite(pct) && pct > 0) return pct;
@@ -8192,6 +8249,22 @@ var getBuyXGetFreeProductOfferLabel = function getBuyXGetFreeProductOfferLabel(c
   if (offPercent >= 100) return 'free';
   return offPercent + "% off on these products";
 };
+var getBuyXGetDiscountOffLabel = function getBuyXGetDiscountOffLabel(coupon, productPrice) {
+  if (productPrice === void 0) {
+    productPrice = 0;
+  }
+  if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage) {
+    return coupon.offPercentage + "% off";
+  }
+  var unitSaving = getUnitSaving(coupon, productPrice);
+  if (unitSaving) {
+    return "$" + formatCurrency(unitSaving) + " off";
+  }
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.offAmount) > 0) {
+    return "$" + formatCurrency(coupon.offAmount) + " off";
+  }
+  return 'discount';
+};
 var getFreeProductHref = function getFreeProductHref(product) {
   return "/product-details/" + paramCase((product === null || product === void 0 ? void 0 : product.productAlias) || (product === null || product === void 0 ? void 0 : product.productName) || '') + "?id=" + (product === null || product === void 0 ? void 0 : product.productId);
 };
@@ -8200,8 +8273,8 @@ var getBuyXGetFreeProductMessages = function getBuyXGetFreeProductMessages(quant
     offPercentage = 100;
   }
   var isFullyFree = offPercentage >= 100;
-  var buyTimes = quantityToBuy + " " + (quantityToBuy === 1 ? 'time' : 'times');
-  var benefitSummary = isFullyFree ? "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') : "Buy this product " + buyTimes + ", get " + offPercentage + "% off on these products";
+  var addQtyLabel = formatQuantityLabel(quantityToBuy);
+  var benefitSummary = isFullyFree ? "Add " + addQtyLabel + " of this product and get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') : "Add " + addQtyLabel + " of this product and get " + offPercentage + "% off on these products";
   var lines = [benefitSummary];
   if (cartQuantity <= 0) {
     return lines;
@@ -8217,7 +8290,7 @@ var getBuyXGetFreeProductMessages = function getBuyXGetFreeProductMessages(quant
 };
 var getBuyXGetYMessages = function getBuyXGetYMessages(quantityToBuy, quantityToGet, cartQuantity) {
   var totalNeeded = quantityToBuy + quantityToGet;
-  var lines = ["Buy " + quantityToBuy + ", get " + quantityToGet + " for free"];
+  var lines = ["Add " + formatQuantityLabel(quantityToBuy) + ", get " + formatQuantityLabel(quantityToGet) + " for free"];
   if (cartQuantity <= 0) {
     return lines;
   }
@@ -8230,8 +8303,34 @@ var getBuyXGetYMessages = function getBuyXGetYMessages(quantityToBuy, quantityTo
     lines.push(formatCartCount(cartQuantity));
     lines.push("Add " + formatRemainingQuantity(_remaining) + " to apply this coupon");
   } else {
-    var freeLabel = quantityToGet === 1 ? 'item' : 'items';
-    lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + quantityToGet + " " + freeLabel + " for free");
+    lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + formatQuantityLabel(quantityToGet) + " for free");
+  }
+  return lines;
+};
+var getBuyXGetDiscountMessages = function getBuyXGetDiscountMessages(coupon, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    _ref$productPrice = _ref.productPrice,
+    productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
+    _ref$cartQuantity = _ref.cartQuantity,
+    cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity;
+  var quantityToBuy = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) || 0;
+  var offLabel = getBuyXGetDiscountOffLabel(coupon, productPrice);
+  var addLabel = formatQuantityLabel(quantityToBuy);
+  var unitSaving = getUnitSaving(coupon, productPrice);
+  var lines = ["Add " + addLabel + ", get " + offLabel];
+  if (unitSaving) {
+    lines[0] = "Add " + addLabel + ", get " + offLabel + " \xB7 " + getPerQuantitySaveLabel(unitSaving, coupon);
+  }
+  if (cartQuantity <= 0) {
+    return lines;
+  }
+  if (cartQuantity < quantityToBuy) {
+    var remaining = quantityToBuy - cartQuantity;
+    lines.push(formatCartCount(cartQuantity));
+    lines.push("Add " + formatRemainingQuantity(remaining) + " to qualify");
+  } else {
+    var totalSaving = unitSaving ? unitSaving * cartQuantity : null;
+    lines.push(totalSaving ? formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get $" + formatCurrency(totalSaving) + " off" : formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + offLabel);
   }
   return lines;
 };
@@ -8239,10 +8338,21 @@ var getCouponTypeIcon = function getCouponTypeIcon(coupon) {
   if (isBuyXGetFreeProduct(coupon)) {
     return isFullyFreeBuyXOffer(coupon) ? FiGift : FiPercent;
   }
+  if (isBuyXGetDiscount(coupon)) return FiLayers;
   if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) return FiLayers;
   if (coupon !== null && coupon !== void 0 && coupon.offPercentage) return FiPercent;
   return FiTag;
 };
+var getCouponLimitMessages = function getCouponLimitMessages(coupon) {
+  var lines = [];
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.maxAllowedDiscount) > 0) {
+    lines.push("Maximum saving is up to $" + formatCurrency(coupon.maxAllowedDiscount) + ".");
+  }
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.maxAllowedAmount) > 0) {
+    lines.push("Applies when your order is more than $" + formatCurrency(coupon.maxAllowedAmount) + ".");
+  }
+  return lines;
+};
 var getDetailMeta = function getDetailMeta(line) {
   if (line.includes('added in the cart') && line.includes('Apply')) {
     return {
@@ -8273,15 +8383,21 @@ var getDetailMeta = function getDetailMeta(line) {
     tone: 'info'
   };
 };
-var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    _ref$productPrice = _ref.productPrice,
-    productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
-    _ref$cartQuantity = _ref.cartQuantity,
-    cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity;
+var getCouponBenefit = function getCouponBenefit(coupon, _temp2) {
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+    _ref2$productPrice = _ref2.productPrice,
+    productPrice = _ref2$productPrice === void 0 ? 0 : _ref2$productPrice,
+    _ref2$cartQuantity = _ref2.cartQuantity,
+    cartQuantity = _ref2$cartQuantity === void 0 ? 0 : _ref2$cartQuantity;
   if (isBuyXGetFreeProduct(coupon)) {
     return getBuyXGetFreeProductMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity, getBuyXGetFreeProductOffPercent(coupon));
   }
+  if (isBuyXGetDiscount(coupon)) {
+    return getBuyXGetDiscountMessages(coupon, {
+      productPrice: productPrice,
+      cartQuantity: cartQuantity
+    });
+  }
   var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
   if (hasBuyXGetY) {
     return getBuyXGetYMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity);
@@ -8290,9 +8406,9 @@ var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
   if (!unitSaving) return null;
   var lines = [];
   if (coupon !== null && coupon !== void 0 && coupon.offPercentage) {
-    lines.push(coupon.offPercentage + "% off \xB7 Save $" + formatCurrency(unitSaving) + " per item");
+    lines.push(coupon.offPercentage + "% off \xB7 " + getPerQuantitySaveLabel(unitSaving, coupon));
   } else {
-    lines.push("Save $" + formatCurrency(unitSaving) + " per item");
+    lines.push(getPerQuantitySaveLabel(unitSaving, coupon));
   }
   if (cartQuantity > 0) {
     var totalSaving = unitSaving * cartQuantity;
@@ -8300,47 +8416,44 @@ var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
   }
   return lines;
 };
-var getSuggestionPreviewText = function getSuggestionPreviewText(coupon, _temp2) {
-  var _ref2 = _temp2 === void 0 ? {} : _temp2,
-    _ref2$productPrice = _ref2.productPrice,
-    productPrice = _ref2$productPrice === void 0 ? 0 : _ref2$productPrice,
-    _ref2$cartQuantity = _ref2.cartQuantity,
-    cartQuantity = _ref2$cartQuantity === void 0 ? 0 : _ref2$cartQuantity;
+var getSuggestionPreviewText = function getSuggestionPreviewText(coupon, _temp3) {
+  var _ref3 = _temp3 === void 0 ? {} : _temp3,
+    _ref3$productPrice = _ref3.productPrice,
+    productPrice = _ref3$productPrice === void 0 ? 0 : _ref3$productPrice,
+    _ref3$cartQuantity = _ref3.cartQuantity,
+    cartQuantity = _ref3$cartQuantity === void 0 ? 0 : _ref3$cartQuantity;
   if (!coupon) return null;
   if (isBuyXGetFreeProduct(coupon)) {
-    var _quantityToBuy = coupon.quantityToBuy || 1;
+    var quantityToBuy = coupon.quantityToBuy || 1;
     var quantityToGet = coupon.quantityToGet || 1;
-    var buyTimes = _quantityToBuy + " " + (_quantityToBuy === 1 ? 'time' : 'times');
+    var addQtyLabel = formatQuantityLabel(quantityToBuy);
     var offPercent = getBuyXGetFreeProductOffPercent(coupon);
     if (offPercent >= 100) {
-      return "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') + ". Click View All offers to know more";
+      return "Add " + addQtyLabel + " of this product and get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') + ". Click View All offers to know more";
     }
-    return "Buy this product " + buyTimes + ", get " + offPercent + "% off on some products. Click View All offers to know more";
+    return "Add " + addQtyLabel + " of this product and get " + offPercent + "% off on some products. Click View All offers to know more";
   }
-  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
-  if (hasBuyXGetY) {
+  if (isBuyXGetDiscount(coupon)) {
     var _getCouponBenefit;
     return ((_getCouponBenefit = getCouponBenefit(coupon, {
       productPrice: productPrice,
       cartQuantity: cartQuantity
     })) === null || _getCouponBenefit === void 0 ? void 0 : _getCouponBenefit[0]) || null;
   }
-  var unitSaving = getUnitSaving(coupon, productPrice);
-  var quantityToBuy = coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy;
-  var hasBuyQuantityRequirement = quantityToBuy > 0 && !((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0);
-  if (hasBuyQuantityRequirement && coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
-    var qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
-    return "Buy " + quantityToBuy + " " + qtyLabel + ", get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
-  }
-  if (hasBuyQuantityRequirement && unitSaving) {
-    var _qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
-    return "Buy " + quantityToBuy + " " + _qtyLabel + ", save $" + formatCurrency(unitSaving) + " per item";
+  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
+  if (hasBuyXGetY) {
+    var _getCouponBenefit2;
+    return ((_getCouponBenefit2 = getCouponBenefit(coupon, {
+      productPrice: productPrice,
+      cartQuantity: cartQuantity
+    })) === null || _getCouponBenefit2 === void 0 ? void 0 : _getCouponBenefit2[0]) || null;
   }
+  var unitSaving = getUnitSaving(coupon, productPrice);
   if (coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
-    return "get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
+    return "get " + coupon.offPercentage + "% off, " + getPerQuantitySaveLabel(unitSaving, coupon).toLowerCase();
   }
   if (unitSaving) {
-    return "save $" + formatCurrency(unitSaving) + " per item";
+    return getPerQuantitySaveLabel(unitSaving, coupon).toLowerCase();
   }
   return null;
 };
@@ -8360,6 +8473,23 @@ var getSavingsBadge = function getSavingsBadge(coupon, productPrice) {
       bottom: 'GIFT'
     };
   }
+  if (isBuyXGetDiscount(coupon)) {
+    if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage) {
+      return {
+        variant: 'percent',
+        top: coupon.offPercentage + "%",
+        bottom: 'OFF'
+      };
+    }
+    var _unitSaving = getUnitSaving(coupon, productPrice);
+    if (_unitSaving) {
+      return {
+        variant: 'amount',
+        top: "$" + formatCurrency(_unitSaving),
+        bottom: 'SAVE'
+      };
+    }
+  }
   if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) {
     return {
       variant: 'bogo',
@@ -8404,8 +8534,29 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
       target: _target,
       percent: _percent,
       qualified: qualified,
-      unitLabel: _target === 1 ? 'Item' : 'Items',
-      message: qualified ? "You're eligible — apply your code at checkout!" : _remaining2 === 1 ? "Only 1 more item to unlock " + unlockLabel + "!" : "Only " + _remaining2 + " more items to unlock " + unlockLabel + "!"
+      unitLabel: _target === 1 ? 'Quantity' : 'Quantities',
+      message: qualified ? "You're eligible — apply your code at checkout!" : _remaining2 === 1 ? "Only 1 more quantity to unlock " + unlockLabel + "!" : "Only " + _remaining2 + " more quantities to unlock " + unlockLabel + "!"
+    };
+  }
+  if (isBuyXGetDiscount(coupon)) {
+    var _target2 = coupon.quantityToBuy || 0;
+    if (!_target2) return null;
+    var _current2 = Math.min(cartQuantity, _target2);
+    var _percent2 = Math.min(100, _current2 / _target2 * 100);
+    var _remaining3 = Math.max(0, _target2 - cartQuantity);
+    var _qualified = cartQuantity >= _target2;
+    var offLabel = getBuyXGetDiscountOffLabel(coupon);
+    return {
+      type: 'buyxgetdiscount',
+      current: _current2,
+      target: _target2,
+      percent: _percent2,
+      qualified: _qualified,
+      unitLabel: _target2 === 1 ? 'Quantity' : 'Quantities',
+      showTimeline: true,
+      quantityToBuy: _target2,
+      offLabel: offLabel,
+      message: _qualified ? "You're eligible — apply your code at checkout!" : _remaining3 === 1 ? "Only 1 more quantity to unlock " + offLabel + "!" : "Only " + _remaining3 + " more quantities to unlock " + offLabel + "!"
     };
   }
   var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
@@ -8423,18 +8574,18 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
     };
   }
   if (cartQuantity >= quantityToBuy) {
-    var _current2 = cartQuantity;
-    var _target2 = totalNeeded;
-    var _percent2 = Math.min(100, _current2 / _target2 * 100);
-    var _remaining3 = totalNeeded - cartQuantity;
+    var _current3 = cartQuantity;
+    var _target3 = totalNeeded;
+    var _percent3 = Math.min(100, _current3 / _target3 * 100);
+    var _remaining4 = totalNeeded - cartQuantity;
     return {
       type: 'quantity',
-      current: _current2,
-      target: _target2,
-      percent: _percent2,
+      current: _current3,
+      target: _target3,
+      percent: _percent3,
       qualified: false,
-      unitLabel: _target2 === 1 ? 'Item' : 'Items',
-      message: _remaining3 === 1 ? 'Only 1 more item to apply this coupon' : "Only " + _remaining3 + " more items to apply this coupon",
+      unitLabel: _target3 === 1 ? 'Quantity' : 'Quantities',
+      message: _remaining4 === 1 ? 'Only 1 more quantity to apply this coupon' : "Only " + _remaining4 + " more quantities to apply this coupon",
       showTimeline: true,
       quantityToBuy: quantityToBuy,
       quantityToGet: quantityToGet
@@ -8450,8 +8601,8 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
     target: target,
     percent: percent,
     qualified: false,
-    unitLabel: target === 1 ? 'Item' : 'Items',
-    message: remaining === 1 ? 'Only 1 more item to qualify' : "Only " + remaining + " more items to qualify",
+    unitLabel: target === 1 ? 'Quantity' : 'Quantities',
+    message: remaining === 1 ? 'Only 1 more quantity to qualify' : "Only " + remaining + " more quantities to qualify",
     showTimeline: true,
     quantityToBuy: quantityToBuy,
     quantityToGet: quantityToGet
@@ -8460,17 +8611,17 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
 var isProgressDetailLine = function isProgressDetailLine(line) {
   return line === null || line === void 0 ? void 0 : line.startsWith('Add ');
 };
-var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
-  var open = _ref3.open,
-    onClose = _ref3.onClose,
-    productName = _ref3.productName,
-    _ref3$productDiscount = _ref3.productDiscounts,
-    productDiscounts = _ref3$productDiscount === void 0 ? [] : _ref3$productDiscount,
-    primaryColor = _ref3.primaryColor,
-    _ref3$cartQuantity = _ref3.cartQuantity,
-    cartQuantity = _ref3$cartQuantity === void 0 ? 0 : _ref3$cartQuantity,
-    _ref3$productPrice = _ref3.productPrice,
-    productPrice = _ref3$productPrice === void 0 ? 0 : _ref3$productPrice;
+var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref4) {
+  var open = _ref4.open,
+    onClose = _ref4.onClose,
+    productName = _ref4.productName,
+    _ref4$productDiscount = _ref4.productDiscounts,
+    productDiscounts = _ref4$productDiscount === void 0 ? [] : _ref4$productDiscount,
+    primaryColor = _ref4.primaryColor,
+    _ref4$cartQuantity = _ref4.cartQuantity,
+    cartQuantity = _ref4$cartQuantity === void 0 ? 0 : _ref4$cartQuantity,
+    _ref4$productPrice = _ref4.productPrice,
+    productPrice = _ref4$productPrice === void 0 ? 0 : _ref4$productPrice;
   var _useState = useState(null),
     copiedCode = _useState[0],
     setCopiedCode = _useState[1];
@@ -8478,7 +8629,7 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
   var copyCouponCode = useCallback(function (code) {
     try {
       if (!code) return Promise.resolve();
-      var _temp3 = _catch(function () {
+      var _temp4 = _catch(function () {
         var _navigator, _navigator$clipboard;
         return Promise.resolve((_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(code)).then(function () {
           var _window;
@@ -8490,7 +8641,7 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
       }, function (error) {
         console.error('Failed to copy coupon code', error);
       });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -8516,10 +8667,10 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
     };
     document.addEventListener('keydown', handleKeyDown);
     return function () {
-      scrollLocks.forEach(function (_ref4) {
-        var el = _ref4.el,
-          overflow = _ref4.overflow,
-          overscrollBehavior = _ref4.overscrollBehavior;
+      scrollLocks.forEach(function (_ref5) {
+        var el = _ref5.el,
+          overflow = _ref5.overflow,
+          overscrollBehavior = _ref5.overscrollBehavior;
         el.style.overflow = overflow;
         el.style.overscrollBehavior = overscrollBehavior;
       });
@@ -8584,8 +8735,9 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
       productPrice: productPrice,
       cartQuantity: cartQuantity
     });
+    var limitMessages = getCouponLimitMessages(coupon);
     var benefitSummary = (benefit === null || benefit === void 0 ? void 0 : benefit[0]) || null;
-    var benefitDetails = (benefit === null || benefit === void 0 ? void 0 : benefit.length) > 1 ? benefit.slice(1) : [];
+    var benefitDetails = [].concat((benefit === null || benefit === void 0 ? void 0 : benefit.length) > 1 ? benefit.slice(1) : [], limitMessages);
     var statusDetails = benefitDetails.filter(function (line) {
       return !isProgressDetailLine(line);
     });
@@ -8601,7 +8753,8 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
     var savingsBadge = getSavingsBadge(coupon, productPrice);
     var progressInfo = getProgressInfo(coupon, cartQuantity);
     var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
-    var showTimeline = hasBuyXGetY && ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.showTimeline) || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgety');
+    var isQtyDiscount = isBuyXGetDiscount(coupon);
+    var showTimeline = (hasBuyXGetY || isQtyDiscount) && ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.showTimeline) || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgety' || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgetdiscount');
     return /*#__PURE__*/React__default.createElement(OfferCard, {
       key: (_coupon$discountId = coupon === null || coupon === void 0 ? void 0 : coupon.discountId) != null ? _coupon$discountId : coupon === null || coupon === void 0 ? void 0 : coupon.couponCode,
       $accentColor: accentColor,
@@ -8611,7 +8764,7 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
       $variant: savingsBadge.variant
     }, /*#__PURE__*/React__default.createElement(BadgeTop, null, savingsBadge.top), /*#__PURE__*/React__default.createElement(BadgeBottom, null, savingsBadge.bottom)), /*#__PURE__*/React__default.createElement(CardHeaderCopy, null, /*#__PURE__*/React__default.createElement(CardMetaRow, null, /*#__PURE__*/React__default.createElement(TypePill, {
       $accentColor: accentColor
-    }, /*#__PURE__*/React__default.createElement(TypeIcon, null), /*#__PURE__*/React__default.createElement("span", null, isBuyXGetFreeProduct(coupon) ? isFullyFreeOffer ? 'Free Gift' : getBuyXGetFreeProductOffPercent(coupon) + "% Off" : hasBuyXGetY ? 'Buy & Get' : coupon !== null && coupon !== void 0 && coupon.offPercentage ? 'Percent Off' : 'Instant Save')), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.qualified) && /*#__PURE__*/React__default.createElement(QualifiedPill, {
+    }, /*#__PURE__*/React__default.createElement(TypeIcon, null), /*#__PURE__*/React__default.createElement("span", null, isBuyXGetFreeProduct(coupon) ? isFullyFreeOffer ? 'Free Gift' : getBuyXGetFreeProductOffPercent(coupon) + "% Off" : isQtyDiscount ? 'Add & Save' : hasBuyXGetY ? 'Add & Get' : coupon !== null && coupon !== void 0 && coupon.offPercentage ? 'Percent Off' : 'Instant Save')), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.qualified) && /*#__PURE__*/React__default.createElement(QualifiedPill, {
       $accentColor: accentColor
     }, /*#__PURE__*/React__default.createElement(HiSparkles, null), "Ready")), /*#__PURE__*/React__default.createElement(TitleRow, null, /*#__PURE__*/React__default.createElement(OfferTitle, {
       title: coupon === null || coupon === void 0 ? void 0 : coupon.discountName
@@ -8632,36 +8785,24 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
       onClick: function onClick() {
         return copyCouponCode(coupon === null || coupon === void 0 ? void 0 : coupon.couponCode);
       }
-    }, isCopied ? /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px'
-      }
-    }, /*#__PURE__*/React__default.createElement(FiCheck, null), /*#__PURE__*/React__default.createElement("span", null, "Copied")) : /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px'
-      }
-    }, /*#__PURE__*/React__default.createElement(FiCopy, null), /*#__PURE__*/React__default.createElement("span", null, "Copy")))))))), benefitSummary && /*#__PURE__*/React__default.createElement(OfferDescription, null, benefitSummary), showTimeline && /*#__PURE__*/React__default.createElement(BuyXTimeline, {
+    }, isCopied ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(FiCheck, null), /*#__PURE__*/React__default.createElement("span", null, "Copied")) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(FiCopy, null), /*#__PURE__*/React__default.createElement("span", null, "Copy")))))))), benefitSummary && /*#__PURE__*/React__default.createElement(OfferDescription, null, benefitSummary), showTimeline && /*#__PURE__*/React__default.createElement(BuyXTimeline, {
       $accentColor: accentColor
     }, /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
       $accentColor: accentColor
-    }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Buy ", coupon.quantityToBuy)), /*#__PURE__*/React__default.createElement(TimelineTrack, {
+    }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Add ", coupon.quantityToBuy)), /*#__PURE__*/React__default.createElement(TimelineTrack, {
       $accentColor: accentColor
     }, /*#__PURE__*/React__default.createElement(TimelineArrow, {
       $accentColor: accentColor
     })), /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
       $accentColor: accentColor,
       $highlight: true
-    }, /*#__PURE__*/React__default.createElement(FiGift, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Get ", coupon.quantityToGet, " FREE"))), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'quantity' && !progressInfo.qualified && /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(ProgressTrack, {
+    }, isQtyDiscount ? /*#__PURE__*/React__default.createElement(FiPercent, null) : /*#__PURE__*/React__default.createElement(FiGift, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, isQtyDiscount ? "Get " + ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.offLabel) || getBuyXGetDiscountOffLabel(coupon, productPrice)) : "Get " + coupon.quantityToGet + " FREE"))), ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'quantity' || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgetdiscount') && !progressInfo.qualified && /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(ProgressTrack, {
       $accentColor: accentColor,
       role: "progressbar",
       "aria-valuenow": progressInfo.current,
       "aria-valuemin": 0,
       "aria-valuemax": progressInfo.target,
-      "aria-label": progressInfo.current + " of " + progressInfo.target + " items toward eligibility"
+      "aria-label": progressInfo.current + " of " + progressInfo.target + " quantities toward eligibility"
     }, /*#__PURE__*/React__default.createElement(ProgressFill, {
       $accentColor: accentColor,
       $percent: progressInfo.percent
@@ -8703,95 +8844,95 @@ var DialogTitle = styled.h2(_templateObject11$3 || (_templateObject11$3 = _tagge
 var CloseButton = styled.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n\n  svg {\n    font-size: 1.25rem;\n  }\n\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.04);\n  }\n\n  &:focus-visible {\n    outline: 2px solid #437c0f;\n    outline-offset: 1px;\n  }\n"])));
 var ScrollableBody = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n  padding: 0.85rem;\n"])));
 var EmptyState$1 = styled.p(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: #5a6354;\n"])));
-var SavingsCenter = styled.section(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  --accent: ", ";\n  position: relative;\n  width: 100%;\n  border-radius: 0.85rem;\n  border: 1px solid ", ";\n  background: linear-gradient(165deg, #ffffff 0%, #fafcf7 45%, #f6f9f2 100%);\n  overflow: hidden;\n  box-shadow: 0 1px 2px rgba(16, 22, 10, 0.04),\n    0 8px 24px ", ";\n  animation: ", " 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',\n    'Inter', Roboto, sans-serif;\n  ", "\n"])), function (_ref5) {
-  var $accentColor = _ref5.$accentColor;
-  return $accentColor;
-}, function (_ref6) {
+var SavingsCenter = styled.section(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  --accent: ", ";\n  position: relative;\n  width: 100%;\n  border-radius: 0.85rem;\n  border: 1px solid ", ";\n  background: linear-gradient(165deg, #ffffff 0%, #fafcf7 45%, #f6f9f2 100%);\n  overflow: hidden;\n  box-shadow: 0 1px 2px rgba(16, 22, 10, 0.04),\n    0 8px 24px ", ";\n  animation: ", " 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',\n    'Inter', Roboto, sans-serif;\n  ", "\n"])), function (_ref6) {
   var $accentColor = _ref6.$accentColor;
-  return $accentColor + "20";
+  return $accentColor;
 }, function (_ref7) {
   var $accentColor = _ref7.$accentColor;
+  return $accentColor + "20";
+}, function (_ref8) {
+  var $accentColor = _ref8.$accentColor;
   return $accentColor + "10";
 }, fadeSlideUp, reducedMotion);
-var AmbientGlow = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -40%;\n  right: -15%;\n  width: 55%;\n  height: 80%;\n  background: radial-gradient(\n    circle,\n    ", " 0%,\n    transparent 70%\n  );\n  pointer-events: none;\n"])), function (_ref8) {
-  var $accentColor = _ref8.$accentColor;
+var AmbientGlow = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -40%;\n  right: -15%;\n  width: 55%;\n  height: 80%;\n  background: radial-gradient(\n    circle,\n    ", " 0%,\n    transparent 70%\n  );\n  pointer-events: none;\n"])), function (_ref9) {
+  var $accentColor = _ref9.$accentColor;
   return $accentColor + "18";
 });
-var Sparkle = styled.span(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background: ", ";\n  box-shadow: 0 0 12px ", ";\n  animation: ", " 4s ease-in-out infinite;\n  animation-delay: ", ";\n  pointer-events: none;\n  opacity: 0.3;\n\n  ", "\n"])), function (_ref9) {
-  var $top = _ref9.$top;
+var Sparkle = styled.span(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background: ", ";\n  box-shadow: 0 0 12px ", ";\n  animation: ", " 4s ease-in-out infinite;\n  animation-delay: ", ";\n  pointer-events: none;\n  opacity: 0.3;\n\n  ", "\n"])), function (_ref10) {
+  var $top = _ref10.$top;
   return $top;
-}, function (_ref10) {
-  var $left = _ref10.$left;
-  return $left;
 }, function (_ref11) {
-  var $size = _ref11.$size;
-  return $size === 'sm' ? '4px' : '6px';
+  var $left = _ref11.$left;
+  return $left;
 }, function (_ref12) {
   var $size = _ref12.$size;
   return $size === 'sm' ? '4px' : '6px';
 }, function (_ref13) {
-  var $accentColor = _ref13.$accentColor;
-  return $accentColor;
+  var $size = _ref13.$size;
+  return $size === 'sm' ? '4px' : '6px';
 }, function (_ref14) {
   var $accentColor = _ref14.$accentColor;
+  return $accentColor;
+}, function (_ref15) {
+  var $accentColor = _ref15.$accentColor;
   return $accentColor + "80";
-}, sparkleFloat, function (_ref15) {
-  var $delay = _ref15.$delay;
+}, sparkleFloat, function (_ref16) {
+  var $delay = _ref16.$delay;
   return $delay;
 }, reducedMotion);
-var SectionHeader = styled.header(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.65rem 0.8rem;\n  background: linear-gradient(\n    135deg,\n    ", " 0%,\n    ", " 55%,\n    transparent 100%\n  );\n  border-bottom: 1px solid ", ";\n  position: relative;\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      105deg,\n      transparent 38%,\n      rgba(255, 255, 255, 0.45) 50%,\n      transparent 62%\n    );\n    background-size: 200% 100%;\n    animation: ", " 6s ease-in-out infinite;\n    pointer-events: none;\n  }\n\n  ", "\n"])), function (_ref16) {
-  var $accentColor = _ref16.$accentColor;
-  return $accentColor + "16";
-}, function (_ref17) {
+var SectionHeader = styled.header(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.65rem 0.8rem;\n  background: linear-gradient(\n    135deg,\n    ", " 0%,\n    ", " 55%,\n    transparent 100%\n  );\n  border-bottom: 1px solid ", ";\n  position: relative;\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      105deg,\n      transparent 38%,\n      rgba(255, 255, 255, 0.45) 50%,\n      transparent 62%\n    );\n    background-size: 200% 100%;\n    animation: ", " 6s ease-in-out infinite;\n    pointer-events: none;\n  }\n\n  ", "\n"])), function (_ref17) {
   var $accentColor = _ref17.$accentColor;
-  return $accentColor + "05";
+  return $accentColor + "16";
 }, function (_ref18) {
   var $accentColor = _ref18.$accentColor;
+  return $accentColor + "05";
+}, function (_ref19) {
+  var $accentColor = _ref19.$accentColor;
   return $accentColor + "12";
 }, shimmer, reducedMotion);
-var HeaderIconWrap = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  --icon-shadow: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 0.55rem;\n  flex-shrink: 0;\n  color: #fff;\n  background: linear-gradient(\n    145deg,\n    ", " 0%,\n    ", " 100%\n  );\n  box-shadow: 0 4px 12px var(--icon-shadow);\n  z-index: 1;\n\n  svg {\n    font-size: 1.05rem;\n  }\n"])), function (_ref19) {
-  var $accentColor = _ref19.$accentColor;
-  return $accentColor + "40";
-}, function (_ref20) {
+var HeaderIconWrap = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  --icon-shadow: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 0.55rem;\n  flex-shrink: 0;\n  color: #fff;\n  background: linear-gradient(\n    145deg,\n    ", " 0%,\n    ", " 100%\n  );\n  box-shadow: 0 4px 12px var(--icon-shadow);\n  z-index: 1;\n\n  svg {\n    font-size: 1.05rem;\n  }\n"])), function (_ref20) {
   var $accentColor = _ref20.$accentColor;
-  return $accentColor;
+  return $accentColor + "40";
 }, function (_ref21) {
   var $accentColor = _ref21.$accentColor;
+  return $accentColor;
+}, function (_ref22) {
+  var $accentColor = _ref22.$accentColor;
   return $accentColor + "cc";
 });
 var HeaderCopy = styled.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  z-index: 1;\n"])));
-var Eyebrow = styled.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: ", ";\n\n  svg {\n    font-size: 0.65rem;\n  }\n"])), function (_ref22) {
-  var $accentColor = _ref22.$accentColor;
+var Eyebrow = styled.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: ", ";\n\n  svg {\n    font-size: 0.65rem;\n  }\n"])), function (_ref23) {
+  var $accentColor = _ref23.$accentColor;
   return $accentColor;
 });
 var SectionHeading = styled.h3(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n  margin: 0.1rem 0 0;\n  font-size: 0.95rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  color: #12180d;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var OfferCountBadge = styled.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.28rem;\n  padding: 0.28rem 0.55rem;\n  border-radius: 999px;\n  background: rgba(18, 24, 13, 0.92);\n  color: #f8fff0;\n  font-size: 0.65rem;\n  font-weight: 600;\n  z-index: 1;\n\n  strong {\n    font-size: 0.82rem;\n    font-weight: 800;\n    line-height: 1;\n  }\n\n  svg {\n    font-size: 0.72rem;\n    color: ", ";\n  }\n"])), function (_ref23) {
-  var $accentColor = _ref23.$accentColor;
+var OfferCountBadge = styled.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.28rem;\n  padding: 0.28rem 0.55rem;\n  border-radius: 999px;\n  background: rgba(18, 24, 13, 0.92);\n  color: #f8fff0;\n  font-size: 0.65rem;\n  font-weight: 600;\n  z-index: 1;\n\n  strong {\n    font-size: 0.82rem;\n    font-weight: 800;\n    line-height: 1;\n  }\n\n  svg {\n    font-size: 0.72rem;\n    color: ", ";\n  }\n"])), function (_ref24) {
+  var $accentColor = _ref24.$accentColor;
   return $accentColor;
 });
 var OfferStack = styled.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.55rem;\n"])));
-var OfferCard = styled.article(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.7rem;\n  border: 1px solid ", ";\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(16, 20, 12, 0.04);\n  opacity: 0;\n  animation: ", " 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  animation-delay: ", "s;\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n  overflow: hidden;\n\n  &:hover {\n    border-color: ", ";\n    box-shadow: 0 4px 14px ", ";\n  }\n\n  &:focus-within {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n\n  ", "\n"])), function (_ref24) {
-  var $accentColor = _ref24.$accentColor;
+var OfferCard = styled.article(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.7rem;\n  border: 1px solid ", ";\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(16, 20, 12, 0.04);\n  opacity: 0;\n  animation: ", " 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  animation-delay: ", "s;\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n  overflow: hidden;\n\n  &:hover {\n    border-color: ", ";\n    box-shadow: 0 4px 14px ", ";\n  }\n\n  &:focus-within {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n\n  ", "\n"])), function (_ref25) {
+  var $accentColor = _ref25.$accentColor;
   return $accentColor + "20";
-}, fadeSlideUp, function (_ref25) {
-  var $index = _ref25.$index;
+}, fadeSlideUp, function (_ref26) {
+  var $index = _ref26.$index;
   return 0.06 + $index * 0.04;
-}, function (_ref26) {
-  var $accentColor = _ref26.$accentColor;
-  return $accentColor + "45";
 }, function (_ref27) {
   var $accentColor = _ref27.$accentColor;
-  return $accentColor + "12";
+  return $accentColor + "45";
 }, function (_ref28) {
   var $accentColor = _ref28.$accentColor;
+  return $accentColor + "12";
+}, function (_ref29) {
+  var $accentColor = _ref29.$accentColor;
   return $accentColor + "50";
 }, reducedMotion);
 var CardBody = styled.div(_templateObject26$1 || (_templateObject26$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.35rem;\n  padding: 0.6rem 0.65rem;\n"])));
 var CardHeader = styled.div(_templateObject27$1 || (_templateObject27$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n"])));
 var CardHeaderCopy = styled.div(_templateObject28$1 || (_templateObject28$1 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n"])));
-var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-width: 3.1rem;\n  padding: 0.3rem 0.35rem;\n  border-radius: 0.5rem;\n  flex-shrink: 0;\n  text-align: center;\n  color: #fff;\n  line-height: 1;\n  background: ", ";\n  box-shadow: 0 3px 10px ", ";\n"])), function (_ref29) {
-  var $accentColor = _ref29.$accentColor,
-    $variant = _ref29.$variant;
+var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-width: 3.1rem;\n  padding: 0.3rem 0.35rem;\n  border-radius: 0.5rem;\n  flex-shrink: 0;\n  text-align: center;\n  color: #fff;\n  line-height: 1;\n  background: ", ";\n  box-shadow: 0 3px 10px ", ";\n"])), function (_ref30) {
+  var $accentColor = _ref30.$accentColor,
+    $variant = _ref30.$variant;
   if ($variant === 'gift') {
     return "linear-gradient(145deg, #e8a317 0%, #c47d0a 100%)";
   }
@@ -8799,152 +8940,152 @@ var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _tag
     return "linear-gradient(145deg, " + $accentColor + " 0%, #2d5f0a 100%)";
   }
   return "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "cc 100%)";
-}, function (_ref30) {
-  var $accentColor = _ref30.$accentColor;
+}, function (_ref31) {
+  var $accentColor = _ref31.$accentColor;
   return $accentColor + "28";
 });
 var BadgeTop = styled.span(_templateObject30$1 || (_templateObject30$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.82rem;\n  font-weight: 900;\n  letter-spacing: -0.02em;\n"])));
 var BadgeBottom = styled.span(_templateObject31$1 || (_templateObject31$1 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.1rem;\n  font-size: 0.52rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  opacity: 0.92;\n"])));
 var CardMetaRow = styled.div(_templateObject32$1 || (_templateObject32$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.28rem;\n"])));
-var TypePill = styled.span(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.22rem;\n  padding: 0.12rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    font-size: 0.65rem;\n  }\n"])), function (_ref31) {
-  var $accentColor = _ref31.$accentColor;
-  return $accentColor;
-}, function (_ref32) {
+var TypePill = styled.span(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.22rem;\n  padding: 0.12rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    font-size: 0.65rem;\n  }\n"])), function (_ref32) {
   var $accentColor = _ref32.$accentColor;
-  return $accentColor + "10";
+  return $accentColor;
 }, function (_ref33) {
   var $accentColor = _ref33.$accentColor;
+  return $accentColor + "10";
+}, function (_ref34) {
+  var $accentColor = _ref34.$accentColor;
   return $accentColor + "22";
 });
-var QualifiedPill = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.2rem;\n  padding: 0.12rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.6rem;\n  font-weight: 700;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    font-size: 0.62rem;\n  }\n"])), function (_ref34) {
-  var $accentColor = _ref34.$accentColor;
-  return $accentColor;
-}, function (_ref35) {
+var QualifiedPill = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.2rem;\n  padding: 0.12rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.6rem;\n  font-weight: 700;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    font-size: 0.62rem;\n  }\n"])), function (_ref35) {
   var $accentColor = _ref35.$accentColor;
-  return $accentColor + "12";
+  return $accentColor;
 }, function (_ref36) {
   var $accentColor = _ref36.$accentColor;
+  return $accentColor + "12";
+}, function (_ref37) {
+  var $accentColor = _ref37.$accentColor;
   return $accentColor + "30";
 });
 var TitleRow = styled.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.45rem;\n  min-width: 0;\n  flex-wrap: wrap;\n"])));
 var OfferTitle = styled.h4(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  flex: 1;\n  min-width: 0;\n  font-size: 0.88rem;\n  font-weight: 800;\n  letter-spacing: -0.015em;\n  color: #141a10;\n  line-height: 1.25;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 var OfferDescription = styled.p(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-size: 0.74rem;\n  font-weight: 500;\n  color: #4a5540;\n  line-height: 1.35;\n"])));
-var BuyXTimeline = styled.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.4rem 0.55rem;\n  border-radius: 0.5rem;\n  background: ", ";\n  border: 1px solid ", ";\n"])), function (_ref37) {
-  var $accentColor = _ref37.$accentColor;
-  return $accentColor + "07";
-}, function (_ref38) {
+var BuyXTimeline = styled.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.4rem 0.55rem;\n  border-radius: 0.5rem;\n  background: ", ";\n  border: 1px solid ", ";\n"])), function (_ref38) {
   var $accentColor = _ref38.$accentColor;
+  return $accentColor + "07";
+}, function (_ref39) {
+  var $accentColor = _ref39.$accentColor;
   return $accentColor + "14";
 });
 var TimelineStep = styled.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  min-width: 0;\n"])));
-var TimelineIcon = styled.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.45rem;\n  height: 1.45rem;\n  border-radius: 0.35rem;\n  color: ", ";\n  background: ", ";\n\n  svg {\n    font-size: 0.72rem;\n  }\n"])), function (_ref39) {
-  var $accentColor = _ref39.$accentColor,
-    $highlight = _ref39.$highlight;
-  return $highlight ? '#fff' : $accentColor;
-}, function (_ref40) {
+var TimelineIcon = styled.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.45rem;\n  height: 1.45rem;\n  border-radius: 0.35rem;\n  color: ", ";\n  background: ", ";\n\n  svg {\n    font-size: 0.72rem;\n  }\n"])), function (_ref40) {
   var $accentColor = _ref40.$accentColor,
     $highlight = _ref40.$highlight;
+  return $highlight ? '#fff' : $accentColor;
+}, function (_ref41) {
+  var $accentColor = _ref41.$accentColor,
+    $highlight = _ref41.$highlight;
   return $highlight ? $accentColor : $accentColor + "14";
 });
 var TimelineLabel = styled.span(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n  font-size: 0.65rem;\n  font-weight: 700;\n  color: #3a4334;\n  white-space: nowrap;\n"])));
 var TimelineTrack = styled.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 2rem;\n  padding: 0 0.15rem;\n"])));
-var TimelineArrow = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 2px;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    ", ",\n    ", "\n  );\n  position: relative;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: -1px;\n    top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: ", ";\n  }\n"])), function (_ref41) {
-  var $accentColor = _ref41.$accentColor;
-  return $accentColor + "44";
-}, function (_ref42) {
+var TimelineArrow = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 2px;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    ", ",\n    ", "\n  );\n  position: relative;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: -1px;\n    top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: ", ";\n  }\n"])), function (_ref42) {
   var $accentColor = _ref42.$accentColor;
-  return $accentColor;
+  return $accentColor + "44";
 }, function (_ref43) {
   var $accentColor = _ref43.$accentColor;
   return $accentColor;
+}, function (_ref44) {
+  var $accentColor = _ref44.$accentColor;
+  return $accentColor;
 });
 var ProgressBlock = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n"])));
 var ProgressTrack = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 0.35rem;\n  border-radius: 999px;\n  background: #e8ede3;\n  overflow: hidden;\n"])));
-var ProgressFill = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", "%;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  animation: ", " 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;\n  transition: width 0.4s ease;\n\n  ", "\n"])), function (_ref44) {
-  var $percent = _ref44.$percent;
+var ProgressFill = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", "%;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  animation: ", " 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;\n  transition: width 0.4s ease;\n\n  ", "\n"])), function (_ref45) {
+  var $percent = _ref45.$percent;
   return $percent;
-}, function (_ref45) {
-  var $accentColor = _ref45.$accentColor;
-  return $accentColor + "cc";
 }, function (_ref46) {
   var $accentColor = _ref46.$accentColor;
+  return $accentColor + "cc";
+}, function (_ref47) {
+  var $accentColor = _ref47.$accentColor;
   return $accentColor;
 }, progressGrow, reducedMotion);
 var ProgressMeta = styled.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.2rem 0.5rem;\n"])));
 var ProgressCount = styled.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteralLoose(["\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: #2f3829;\n\n  strong {\n    font-size: 0.78rem;\n    font-weight: 800;\n  }\n\n  span {\n    color: #6a7364;\n  }\n"])));
 var ProgressHint = styled.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteralLoose(["\n  font-size: 0.68rem;\n  font-weight: 600;\n  color: #7a5e12;\n  line-height: 1.3;\n"])));
-var SuccessBanner = styled.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.32rem 0.5rem;\n  border-radius: 0.45rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    flex-shrink: 0;\n    font-size: 0.75rem;\n  }\n"])), function (_ref47) {
-  var $accentColor = _ref47.$accentColor;
-  return $accentColor;
-}, function (_ref48) {
+var SuccessBanner = styled.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.32rem 0.5rem;\n  border-radius: 0.45rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    flex-shrink: 0;\n    font-size: 0.75rem;\n  }\n"])), function (_ref48) {
   var $accentColor = _ref48.$accentColor;
-  return $accentColor + "10";
+  return $accentColor;
 }, function (_ref49) {
   var $accentColor = _ref49.$accentColor;
+  return $accentColor + "10";
+}, function (_ref50) {
+  var $accentColor = _ref50.$accentColor;
   return $accentColor + "25";
 });
 var StatusList = styled.div(_templateObject51 || (_templateObject51 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n"])));
-var StatusItem = styled.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.3rem;\n  padding: 0.28rem 0.45rem;\n  border-radius: 0.45rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  line-height: 1.35;\n  opacity: 0;\n  animation: ", " 0.28s ease forwards;\n  animation-delay: ", "s;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  border: 1px solid\n    ", ";\n\n  svg {\n    flex-shrink: 0;\n    margin-top: 0.1rem;\n    font-size: 0.82rem;\n  }\n\n  ", "\n"])), chipIn, function (_ref50) {
-  var $chipIndex = _ref50.$chipIndex;
+var StatusItem = styled.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.3rem;\n  padding: 0.28rem 0.45rem;\n  border-radius: 0.45rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  line-height: 1.35;\n  opacity: 0;\n  animation: ", " 0.28s ease forwards;\n  animation-delay: ", "s;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  border: 1px solid\n    ", ";\n\n  svg {\n    flex-shrink: 0;\n    margin-top: 0.1rem;\n    font-size: 0.82rem;\n  }\n\n  ", "\n"])), chipIn, function (_ref51) {
+  var $chipIndex = _ref51.$chipIndex;
   return 0.1 + $chipIndex * 0.05;
-}, function (_ref51) {
-  var $accentColor = _ref51.$accentColor,
-    $tone = _ref51.$tone;
-  if ($tone === 'warning') return '#fff8eb';
-  if ($tone === 'success') return $accentColor + "10";
-  return '#f4f6f1';
 }, function (_ref52) {
   var $accentColor = _ref52.$accentColor,
     $tone = _ref52.$tone;
-  if ($tone === 'warning') return '#8a6400';
-  if ($tone === 'success') return $accentColor;
-  return '#45503c';
+  if ($tone === 'warning') return '#fff8eb';
+  if ($tone === 'success') return $accentColor + "10";
+  return '#f4f6f1';
 }, function (_ref53) {
   var $accentColor = _ref53.$accentColor,
     $tone = _ref53.$tone;
+  if ($tone === 'warning') return '#8a6400';
+  if ($tone === 'success') return $accentColor;
+  return '#45503c';
+}, function (_ref54) {
+  var $accentColor = _ref54.$accentColor,
+    $tone = _ref54.$tone;
   if ($tone === 'warning') return '#f0d48a';
   if ($tone === 'success') return $accentColor + "28";
   return '#e0e5da';
 }, reducedMotion);
 var GiftSection = styled.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteralLoose(["\n  padding-top: 0.35rem;\n  border-top: 1px solid #eef1e9;\n"])));
-var GiftSectionHeader = styled.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.28rem;\n  margin-bottom: 0.3rem;\n  font-size: 0.62rem;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: ", ";\n\n  svg {\n    font-size: 0.72rem;\n  }\n"])), function (_ref54) {
-  var $accentColor = _ref54.$accentColor;
+var GiftSectionHeader = styled.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.28rem;\n  margin-bottom: 0.3rem;\n  font-size: 0.62rem;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: ", ";\n\n  svg {\n    font-size: 0.72rem;\n  }\n"])), function (_ref55) {
+  var $accentColor = _ref55.$accentColor;
   return $accentColor;
 });
 var GiftList = styled.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.22rem;\n"])));
-var GiftLink = styled.a(_templateObject56 || (_templateObject56 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.35rem;\n  padding: 0.32rem 0.45rem;\n  border-radius: 0.4rem;\n  border: 1px solid ", ";\n  background: #fafcf8;\n  color: #2a3325;\n  font-size: 0.72rem;\n  font-weight: 600;\n  line-height: 1.3;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color 0.18s ease, border-color 0.18s ease;\n\n  span {\n    flex: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  svg {\n    flex-shrink: 0;\n    font-size: 0.72rem;\n    color: ", ";\n    transition: transform 0.18s ease;\n  }\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n\n    svg {\n      transform: translateX(2px);\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n\n  ", "\n"])), function (_ref55) {
-  var $accentColor = _ref55.$accentColor;
-  return $accentColor + "1e";
-}, function (_ref56) {
+var GiftLink = styled.a(_templateObject56 || (_templateObject56 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.35rem;\n  padding: 0.32rem 0.45rem;\n  border-radius: 0.4rem;\n  border: 1px solid ", ";\n  background: #fafcf8;\n  color: #2a3325;\n  font-size: 0.72rem;\n  font-weight: 600;\n  line-height: 1.3;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color 0.18s ease, border-color 0.18s ease;\n\n  span {\n    flex: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  svg {\n    flex-shrink: 0;\n    font-size: 0.72rem;\n    color: ", ";\n    transition: transform 0.18s ease;\n  }\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n\n    svg {\n      transform: translateX(2px);\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n\n  ", "\n"])), function (_ref56) {
   var $accentColor = _ref56.$accentColor;
-  return $accentColor;
+  return $accentColor + "1e";
 }, function (_ref57) {
   var $accentColor = _ref57.$accentColor;
   return $accentColor;
 }, function (_ref58) {
   var $accentColor = _ref58.$accentColor;
-  return $accentColor + "08";
+  return $accentColor;
 }, function (_ref59) {
   var $accentColor = _ref59.$accentColor;
+  return $accentColor + "08";
+}, function (_ref60) {
+  var $accentColor = _ref60.$accentColor;
   return $accentColor;
 }, reducedMotion);
 var CodeRow = styled.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  flex-shrink: 0;\n"])));
-var CodeValue = styled.code(_templateObject58 || (_templateObject58 = _taggedTemplateLiteralLoose(["\n  min-width: 0;\n  max-width: 8.5rem;\n  padding: 0.28rem 0.45rem;\n  border-radius: 0.4rem;\n  border: 1.5px dashed ", ";\n  background: #fff;\n  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;\n  font-size: 0.68rem;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  color: #141a10;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_ref60) {
-  var $accentColor = _ref60.$accentColor;
+var CodeValue = styled.code(_templateObject58 || (_templateObject58 = _taggedTemplateLiteralLoose(["\n  min-width: 0;\n  max-width: 8.5rem;\n  padding: 0.28rem 0.45rem;\n  border-radius: 0.4rem;\n  border: 1.5px dashed ", ";\n  background: #fff;\n  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;\n  font-size: 0.68rem;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  color: #141a10;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_ref61) {
+  var $accentColor = _ref61.$accentColor;
   return $accentColor;
 });
-var PrimaryCopyButton = styled.button(_templateObject59 || (_templateObject59 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.22rem;\n  flex-shrink: 0;\n  height: 1.7rem;\n  padding: 0 0.55rem;\n  border: none;\n  border-radius: 0.4rem;\n  font-size: 0.68rem;\n  font-weight: 800;\n  color: #fff;\n  cursor: pointer;\n  background: ", ";\n  box-shadow: 0 2px 8px ", ";\n  transition: transform 0.15s ease, background 0.2s ease;\n  animation: ", " 0.35s ease;\n\n  svg {\n    font-size: 0.72rem;\n  }\n\n  &:hover {\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref61) {
-  var $accentColor = _ref61.$accentColor,
-    $copied = _ref61.$copied;
+var PrimaryCopyButton = styled.button(_templateObject59 || (_templateObject59 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.22rem;\n  flex-shrink: 0;\n  height: 1.7rem;\n  padding: 0 0.55rem;\n  border: none;\n  border-radius: 0.4rem;\n  font-size: 0.68rem;\n  font-weight: 800;\n  color: #fff;\n  cursor: pointer;\n  background: ", ";\n  box-shadow: 0 2px 8px ", ";\n  transition: transform 0.15s ease, background 0.2s ease;\n  animation: ", " 0.35s ease;\n\n  svg {\n    font-size: 0.72rem;\n  }\n\n  &:hover {\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref62) {
+  var $accentColor = _ref62.$accentColor,
+    $copied = _ref62.$copied;
   return $copied ? "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "dd 100%)" : 'linear-gradient(145deg, #1a2114 0%, #0f140c 100%)';
-}, function (_ref62) {
-  var $accentColor = _ref62.$accentColor;
-  return $accentColor + "28";
 }, function (_ref63) {
-  var $copied = _ref63.$copied;
-  return $copied ? copyPop : 'none';
+  var $accentColor = _ref63.$accentColor;
+  return $accentColor + "28";
 }, function (_ref64) {
-  var $accentColor = _ref64.$accentColor;
+  var $copied = _ref64.$copied;
+  return $copied ? copyPop : 'none';
+}, function (_ref65) {
+  var $accentColor = _ref65.$accentColor;
   return $accentColor;
 }, reducedMotion);
 
@@ -9192,7 +9333,7 @@ var CardRow = function CardRow(_ref3) {
     discountName: row === null || row === void 0 ? void 0 : row.couponCode
   }), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
     coupon: firstSuggestion,
-    productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0,
+    productPrice: (row === null || row === void 0 ? void 0 : row.tierPrice) || (row === null || row === void 0 ? void 0 : row.standardPrice) || 0,
     cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
     primaryColor: accentColor,
     loading: loading,
@@ -9296,7 +9437,7 @@ var CardRow = function CardRow(_ref3) {
     productDiscounts: productDiscounts,
     primaryColor: accentColor,
     cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
-    productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0
+    productPrice: (row === null || row === void 0 ? void 0 : row.tierPrice) || (row === null || row === void 0 ? void 0 : row.standardPrice) || 0
   })));
 };
 
@@ -9750,7 +9891,7 @@ var CartPageProductCard = function CartPageProductCard(_ref3) {
     discountAmount: item === null || item === void 0 ? void 0 : item.discountAmount
   }))), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
     coupon: firstSuggestion,
-    productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0,
+    productPrice: (item === null || item === void 0 ? void 0 : item.tierPrice) || (item === null || item === void 0 ? void 0 : item.standardPrice) || 0,
     cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
     primaryColor: accentColor,
     loading: loading,
@@ -9814,7 +9955,7 @@ var CartPageProductCard = function CartPageProductCard(_ref3) {
     productDiscounts: productDiscounts,
     primaryColor: accentColor,
     cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
-    productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0
+    productPrice: (item === null || item === void 0 ? void 0 : item.tierPrice) || (item === null || item === void 0 ? void 0 : item.standardPrice) || 0
   }));
 };
 
@@ -13631,7 +13772,7 @@ var Step2 = function Step2(_ref) {
     icon: /*#__PURE__*/React__default.createElement(FiTruck, {
       className: "icon"
     })
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement(Fragment$1, null, /*#__PURE__*/React__default.createElement(Grid, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,