@lime-bundles/widget 1.0.0 → 2.1.0

package/dist/index.js

@@ -11,369 +11,2579 @@ import {
   reportImpression,
   reportAddToCart,
   injectCustomCss,
-  fetchBundlesForProduct
+  sanitizeCustomCss,
+  getABTestAssignment,
+  applyABVariantB
 } from "@lime-bundles/core";
 
-// src/renderers/fixed.ts
+// src/renderers/pricing.ts
+import {
+  parseCents,
+  formatCents,
+  percentageDiscountUnit,
+  computeFixedPricing,
+  computeBundleSaleCents
+} from "@lime-bundles/core";
+
+// src/renderers/countdown.ts
+import { formatCountdown } from "@lime-bundles/core";
+function renderCountdown(endsAtIso) {
+  const parsed = parseIso(endsAtIso);
+  if (parsed === null) return null;
+  if (parsed <= Date.now()) return null;
+  const target = parsed;
+  const wrap = document.createElement("div");
+  wrap.className = "lb-bundle-countdown";
+  wrap.setAttribute("data-countdown", "");
+  const labelWrap = document.createElement("div");
+  labelWrap.className = "lb-bundle-countdown__label";
+  const labelText = document.createElement("span");
+  labelText.textContent = "Ends in";
+  labelWrap.appendChild(labelText);
+  wrap.appendChild(labelWrap);
+  const timer = document.createElement("span");
+  timer.className = "lb-bundle-countdown__timer";
+  timer.setAttribute("data-countdown-timer", "");
+  wrap.appendChild(timer);
+  let intervalId = null;
+  function tick() {
+    const msLeft = target - Date.now();
+    if (msLeft <= 0) {
+      wrap.style.display = "none";
+      stop();
+      return;
+    }
+    timer.textContent = formatCountdown(msLeft);
+  }
+  function stop() {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  }
+  tick();
+  intervalId = setInterval(tick, 1e3);
+  return { el: wrap, stop };
+}
+function parseIso(iso) {
+  const t = Date.parse(iso);
+  return Number.isFinite(t) ? t : null;
+}
+
+// src/renderers/dom.ts
+function el(tag, className, attrs = {}) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  for (const [k, v] of Object.entries(attrs)) {
+    node.setAttribute(k, v);
+  }
+  return node;
+}
+
+// src/renderers/image.ts
 import {
-  formatMoney
+  transformImageUrl,
+  THUMB_PX
 } from "@lime-bundles/core";
-function renderFixedBundle(container, bundle, onAddToCart) {
+
+// src/renderers/fixed.ts
+var PLACEHOLDER_THUMB_SVG = `
+<svg class="lb-bundle-placeholder-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <rect x="4" y="4" width="20" height="20" rx="3"></rect>
+  <line x1="4" y1="20" x2="24" y2="20"></line>
+  <circle cx="10" cy="12" r="2"></circle>
+</svg>`;
+function renderFixedBundle(container, bundle, onAddToCart, onCleanup) {
+  const wc = bundle.widgetConfig;
+  const qtyFor = (productId, variantId) => {
+    const vq = bundle.variantQuantities[variantId];
+    if (vq !== void 0) return vq;
+    return bundle.productQuantities[productId] ?? 1;
+  };
+  const rows = [];
+  let oosCount = 0;
+  bundle.products.forEach((product, idx) => {
+    const row = buildRowState(bundle, product, idx);
+    if (row.qty === 0) return;
+    if (row.isOos) {
+      oosCount++;
+      if (wc.outOfStockBehavior === "hide") return;
+    }
+    rows.push(row);
+  });
+  if (rows.length === 0) return;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  const title = document.createElement("h3");
-  title.className = "lb-bundle__title";
+  const root = el("div", "lb-fixed", {
+    "data-discount-type": bundle.discountConfig.discountType,
+    "data-discount-value": String(bundle.discountConfig.discountValue)
+  });
+  const headerHandle = renderHeader(bundle, currency);
+  root.appendChild(headerHandle.el);
+  if (wc.countdown.showCountdown && bundle.endsAt) {
+    const countdown = renderCountdown(bundle.endsAt);
+    if (countdown) {
+      root.appendChild(countdown.el);
+      onCleanup?.(countdown.stop);
+    }
+  }
+  const list = el("div", "lb-fixed__products");
+  const rowHandles = [];
+  rows.forEach((rowState) => {
+    const handle = renderProductRow(rowState, currency, qtyFor, () => {
+      updatePricing();
+    });
+    rowHandles.push(handle);
+    list.appendChild(handle.el);
+  });
+  root.appendChild(list);
+  root.appendChild(el("div", "lb-bundle-divider"));
+  const pricingHandle = renderPricingRow(bundle);
+  root.appendChild(pricingHandle.el);
+  const savingsBarHandle = wc.savingsBar.visible ? renderSavingsBar() : null;
+  if (savingsBarHandle) root.appendChild(savingsBarHandle.el);
+  const cta = renderCta(bundle, oosCount, () => {
+    const lines = rows.filter((r) => r.selected).map((r) => ({
+      merchandiseId: r.selected.id,
+      quantity: r.qty,
+      attributes: [
+        { key: "_lime_bundle_gid", value: bundle.id },
+        { key: "_lime_bundle_type", value: bundle.bundleType }
+      ]
+    }));
+    if (lines.length === 0) return;
+    onAddToCart(lines);
+  });
+  root.appendChild(cta);
+  root.appendChild(
+    el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
+  );
+  root.appendChild(
+    el("span", "lb-visually-hidden", {
+      "data-status": "",
+      "aria-live": "polite"
+    })
+  );
+  container.appendChild(root);
+  updatePricing();
+  function updatePricing() {
+    const totalCents = rows.reduce((sum, r) => {
+      if (!r.selected) return sum;
+      const unit = parseCents(r.selected.price.amount);
+      return sum + unit * r.qty;
+    }, 0);
+    const saleCents = computeSale(totalCents, bundle.discountConfig, rows);
+    const savingsCents = Math.max(0, totalCents - saleCents);
+    pricingHandle.update({ totalCents, saleCents, savingsCents, currency });
+    if (savingsBarHandle) {
+      savingsBarHandle.update({ savingsCents, currency });
+    }
+    headerHandle.refresh(
+      deriveHeaderBadge(bundle, totalCents, saleCents, currency)
+    );
+  }
+}
+function buildRowState(bundle, product, productIndex) {
+  const selectedVariantIds = bundle.selectedVariantIds?.[productIndex] ?? null;
+  const available = product.variants.nodes.filter(
+    (v) => v.availableForSale
+  );
+  const eligibleVariants = selectedVariantIds && selectedVariantIds.length > 0 ? available.filter((v) => selectedVariantIds.includes(v.id)) : available;
+  const isOos = eligibleVariants.length === 0;
+  const selected = eligibleVariants[0] ?? null;
+  const productQty = bundle.productQuantities[product.id] ?? 1;
+  const variantQty = selected ? bundle.variantQuantities[selected.id] : void 0;
+  const qty = variantQty ?? productQty;
+  return { product, eligibleVariants, selected, qty, isOos };
+}
+function renderHeader(bundle, currency) {
+  const wc = bundle.widgetConfig;
+  const header = el("div", "lb-bundle-header");
+  const content = el("div", "lb-bundle-header__content");
+  const title = el("h3", "lb-bundle-title");
   title.textContent = bundle.title;
-  title.setAttribute("part", "title");
-  container.appendChild(title);
-  if (bundle.discountLabel) {
-    const badge = document.createElement("span");
-    badge.className = "lb-bundle__discount-badge";
-    badge.textContent = bundle.discountLabel;
-    container.appendChild(badge);
-  }
-  const productsDiv = document.createElement("div");
-  productsDiv.className = "lb-bundle__products";
-  for (const product of bundle.products) {
-    const productEl = document.createElement("div");
-    productEl.className = "lb-bundle__product";
-    productEl.setAttribute("part", "product");
-    if (product.featuredImage) {
-      const img = document.createElement("img");
-      img.src = product.featuredImage.url;
-      img.alt = product.featuredImage.altText ?? product.title;
-      img.className = "lb-bundle__product-image";
-      img.loading = "lazy";
-      productEl.appendChild(img);
-    }
-    const info = document.createElement("div");
-    info.className = "lb-bundle__product-info";
-    info.innerHTML = `
-      <p class="lb-bundle__product-title">${escapeHtml(product.title)}</p>
-      <p class="lb-bundle__product-price">${escapeHtml(formatMoney(product.priceRange.minVariantPrice.amount, currency))}</p>
-    `;
-    productEl.appendChild(info);
-    productsDiv.appendChild(productEl);
+  content.appendChild(title);
+  if (bundle.description) {
+    const subtitle = el("p", "lb-bundle-subtitle");
+    subtitle.textContent = bundle.description;
+    content.appendChild(subtitle);
   }
-  container.appendChild(productsDiv);
+  header.appendChild(content);
+  const badgeEl = el("span", "lb-bundle-header__badge", {
+    "data-header-badge": ""
+  });
+  header.appendChild(badgeEl);
+  const initialPricing = computeFixedPricing(
+    bundle,
+    bundle.productQuantities,
+    wc.pricing.showSaveBadge
+  );
+  if (initialPricing.headerBadge) {
+    badgeEl.textContent = initialPricing.headerBadge;
+  } else {
+    badgeEl.style.display = "none";
+  }
+  void currency;
+  return {
+    el: header,
+    refresh(badgeText) {
+      if (!wc.pricing.showSaveBadge) {
+        badgeEl.style.display = "none";
+        return;
+      }
+      if (badgeText) {
+        badgeEl.textContent = badgeText;
+        badgeEl.style.display = "";
+      } else {
+        badgeEl.style.display = "none";
+      }
+    }
+  };
+}
+function deriveHeaderBadge(bundle, totalCents, saleCents, currency) {
+  if (!bundle.widgetConfig.pricing.showSaveBadge) return "";
+  const savings = totalCents - saleCents;
+  if (savings <= 0) return "";
+  const dc = bundle.discountConfig;
+  if (dc.discountType === "percentage" && dc.discountValue > 0) {
+    return `-${Math.round(dc.discountValue)}%`;
+  }
+  if (dc.discountType === "fixed_amount" && dc.discountValue > 0) {
+    return `-${formatCents(Math.round(dc.discountValue * 100), currency)}`;
+  }
+  return `-${formatCents(savings, currency)}`;
+}
+function renderProductRow(state, currency, qtyFor, onVariantChange) {
+  const rowEl = el(
+    "div",
+    state.isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
+    {
+      "data-product-id": state.product.id.replace(/^.*\//, ""),
+      ...state.isOos ? { "aria-disabled": "true" } : {}
+    }
+  );
+  const thumb = el("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
+  if (state.product.featuredImage) {
+    const img = document.createElement("img");
+    img.src = transformImageUrl(state.product.featuredImage.url, {
+      width: THUMB_PX,
+      height: THUMB_PX,
+      crop: "center"
+    });
+    img.alt = state.product.featuredImage.altText ?? state.product.title;
+    img.width = THUMB_PX;
+    img.height = THUMB_PX;
+    img.loading = "lazy";
+    thumb.appendChild(img);
+  } else {
+    thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG);
+  }
+  let qtyBadgeRef = null;
+  if (!state.isOos) {
+    qtyBadgeRef = el("span", "lb-bundle-qty-badge", {
+      "data-qty-badge": ""
+    });
+    qtyBadgeRef.textContent = String(state.qty);
+    thumb.appendChild(qtyBadgeRef);
+  }
+  rowEl.appendChild(thumb);
+  const info = el("div", "lb-bundle-product-info");
+  const name = document.createElement("a");
+  name.className = "lb-bundle-product-name";
+  name.href = `/products/${state.product.handle}`;
+  name.textContent = state.product.title;
+  info.appendChild(name);
+  if (state.isOos) {
+    const oosLabel = el("span", "lb-bundle-oos-label");
+    oosLabel.textContent = "Out of stock";
+    info.appendChild(oosLabel);
+  } else if (state.selected) {
+    const prices = el("span", "lb-bundle-product-prices");
+    const compare = el("span", "lb-bundle-product-compare-price", {
+      "data-product-compare-price": ""
+    });
+    const priceEl = el("span", "lb-bundle-product-price", {
+      "data-product-price": ""
+    });
+    prices.appendChild(compare);
+    prices.appendChild(priceEl);
+    info.appendChild(prices);
+    const applyVariantToRow = (variant) => {
+      const unit = parseCents(variant.price.amount);
+      priceEl.textContent = formatCents(unit, currency);
+      if (variant.compareAtPrice) {
+        const cmp = parseCents(variant.compareAtPrice.amount);
+        if (cmp > unit) {
+          compare.textContent = formatCents(cmp, currency);
+          compare.removeAttribute("hidden");
+        } else {
+          compare.setAttribute("hidden", "");
+        }
+      } else {
+        compare.setAttribute("hidden", "");
+      }
+    };
+    applyVariantToRow(state.selected);
+    if (state.eligibleVariants.length > 1) {
+      const select = document.createElement("select");
+      select.className = "lb-bundle-variant-select";
+      select.setAttribute("data-variant-select", "");
+      select.setAttribute(
+        "aria-label",
+        `Select variant for ${state.product.title}`
+      );
+      state.eligibleVariants.forEach((variant) => {
+        const opt = document.createElement("option");
+        opt.value = variant.id;
+        opt.textContent = variant.title;
+        if (variant.id === state.selected?.id) opt.selected = true;
+        select.appendChild(opt);
+      });
+      select.addEventListener("change", () => {
+        const variant = state.eligibleVariants.find(
+          (v) => v.id === select.value
+        );
+        if (!variant) return;
+        state.selected = variant;
+        state.qty = qtyFor(state.product.id, variant.id);
+        if (qtyBadgeRef) qtyBadgeRef.textContent = String(state.qty);
+        applyVariantToRow(variant);
+        onVariantChange();
+      });
+      info.appendChild(select);
+    } else if (state.eligibleVariants.length === 1 && state.product.variants.nodes.length > 1) {
+      const badge = el("span", "lb-bundle-variant-badge");
+      badge.textContent = state.eligibleVariants[0].title;
+      info.appendChild(badge);
+    }
+  }
+  rowEl.appendChild(info);
+  return { el: rowEl, state };
+}
+function renderPricingRow(bundle) {
+  const row = el("div", "lb-bundle-pricing");
+  const label = el("span", "lb-bundle-pricing__label");
+  label.textContent = "Bundle price";
+  row.appendChild(label);
+  const prices = el("span", "lb-bundle-pricing__prices");
+  const compare = el("span", "lb-bundle-compare-price", {
+    "data-compare-price": ""
+  });
+  compare.style.display = "none";
+  prices.appendChild(compare);
+  const sale = el("span", "lb-bundle-sale-price", {
+    "data-sale-price": ""
+  });
+  prices.appendChild(sale);
+  row.appendChild(prices);
+  return {
+    el: row,
+    update({ totalCents, saleCents, savingsCents, currency }) {
+      sale.textContent = formatCents(saleCents, currency);
+      if (bundle.widgetConfig.pricing.showCompareAtPrice && savingsCents > 0) {
+        compare.textContent = formatCents(totalCents, currency);
+        compare.style.display = "";
+      } else {
+        compare.style.display = "none";
+      }
+    }
+  };
+}
+function renderSavingsBar() {
+  const bar = el("div", "lb-bundle-savings-bar", {
+    "data-savings-bar": ""
+  });
+  const label = document.createElement("span");
+  label.textContent = "You save";
+  bar.appendChild(label);
+  const amount = el("span", "", { "data-savings-amount": "" });
+  bar.appendChild(amount);
+  return {
+    el: bar,
+    update({ savingsCents, currency }) {
+      if (savingsCents <= 0) {
+        bar.style.display = "none";
+        return;
+      }
+      bar.style.display = "";
+      amount.textContent = formatCents(savingsCents, currency);
+    }
+  };
+}
+function renderCta(bundle, oosCount, onClick) {
   const button = document.createElement("button");
-  button.className = "lb-bundle__cta";
-  button.textContent = bundle.widgetConfig.ctaText ?? "Add Bundle to Cart";
-  button.setAttribute("part", "button");
-  button.addEventListener("click", () => {
-    const lines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
-      const variant = p.variants.nodes.find((v) => v.availableForSale);
-      return {
+  button.type = "button";
+  button.className = "lb-bundle-cta";
+  button.setAttribute("data-add-bundle", "");
+  if (oosCount > 0) {
+    button.disabled = true;
+    button.textContent = `${oosCount} item${oosCount === 1 ? "" : "s"} out of stock`;
+  } else {
+    button.textContent = bundle.widgetConfig.cta.ctaText || "Add to cart";
+    button.addEventListener("click", () => {
+      if (button.disabled) return;
+      onClick();
+    });
+  }
+  return button;
+}
+function computeSale(totalCents, discount, rows) {
+  if (discount.discountType === "percentage") {
+    let saleCents = 0;
+    for (const r of rows) {
+      if (!r.selected) continue;
+      const unit = parseCents(r.selected.price.amount);
+      const off = Math.floor(unit * discount.discountValue / 100);
+      const perUnit = Math.max(0, unit - off);
+      saleCents += perUnit * r.qty;
+    }
+    return saleCents;
+  }
+  return Math.max(0, totalCents - Math.round(discount.discountValue * 100));
+}
+
+// src/renderers/mix-match.ts
+var PLACEHOLDER_THUMB_SVG2 = `
+<svg class="lb-bundle-placeholder-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <rect x="4" y="4" width="20" height="20" rx="3"></rect>
+  <line x1="4" y1="20" x2="24" y2="20"></line>
+  <circle cx="10" cy="12" r="2"></circle>
+</svg>`;
+var PLUS_ICON_SVG = `
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <line x1="9" y1="3" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <line x1="3" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+var CLOSE_ICON_SVG = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <line x1="5" y1="5" x2="15" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  <line x1="15" y1="5" x2="5" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+var SEARCH_CLEAR_ICON_SVG = `
+<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <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"/>
+</svg>`;
+function renderMixMatchBundle(container, bundle, onAddToCart, onCleanup) {
+  const wc = bundle.widgetConfig;
+  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  const requiredQty = bundle.minQuantity ?? 1;
+  const maxQty = bundle.maxQuantity ?? requiredQty;
+  const eligible = buildEligibleProducts(bundle, wc.outOfStockBehavior);
+  const inStockCount = eligible.filter((e) => !e.isOos).length;
+  if (inStockCount < requiredQty) return;
+  const selections = [];
+  const root = el("div", "lb-mix-match", {
+    "data-required-quantity": String(requiredQty),
+    "data-max-quantity": String(maxQty)
+  });
+  const header = renderHeader2(bundle);
+  root.appendChild(header);
+  if (wc.countdown.showCountdown && bundle.endsAt) {
+    const countdown = renderCountdown(bundle.endsAt);
+    if (countdown) {
+      root.appendChild(countdown.el);
+      onCleanup?.(countdown.stop);
+    }
+  }
+  const progress = renderProgress(requiredQty);
+  root.appendChild(progress.el);
+  const slotsContainer = el("div", "lb-mix-match__slots", {
+    "data-selection-slots": ""
+  });
+  root.appendChild(slotsContainer);
+  root.appendChild(el("div", "lb-bundle-divider"));
+  const pricingSection = renderPricingSection(wc.pricing.showCompareAtPrice);
+  root.appendChild(pricingSection.el);
+  const savingsBar = wc.savingsBar.visible ? renderSavingsBar2() : null;
+  if (savingsBar) root.appendChild(savingsBar.el);
+  const placeholder = el("div", "lb-mix-match__price-placeholder", {
+    "data-price-placeholder": ""
+  });
+  const placeholderText = el(
+    "span",
+    "lb-mix-match__price-placeholder-text"
+  );
+  placeholderText.textContent = `Select ${requiredQty} items to see price`;
+  placeholder.appendChild(placeholderText);
+  root.appendChild(placeholder);
+  const modal = renderModal(bundle, eligible, currency, {
+    showSearch: wc.showSearch,
+    onAdd: (product, variant) => addSelection(product, variant),
+    onRemove: (productId, variantId) => removeSelection(productId, variantId),
+    countFor: (productId, variantId) => selections.filter(
+      (s) => s.productId === productId && s.variantId === variantId
+    ).length,
+    isOverMax: () => selections.length >= maxQty
+  });
+  root.appendChild(modal.el);
+  const cta = document.createElement("button");
+  cta.type = "button";
+  cta.className = "lb-bundle-cta";
+  cta.setAttribute("data-add-bundle", "");
+  cta.disabled = true;
+  cta.textContent = `Select ${requiredQty} items to unlock`;
+  cta.addEventListener("click", () => {
+    if (cta.disabled) return;
+    const lines = selections.map((s) => ({
+      merchandiseId: s.variantId,
+      quantity: 1,
+      attributes: [
+        { key: "_lime_bundle_gid", value: bundle.id },
+        { key: "_lime_bundle_type", value: bundle.bundleType }
+      ]
+    }));
+    onAddToCart(lines);
+  });
+  root.appendChild(cta);
+  root.appendChild(
+    el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
+  );
+  root.appendChild(
+    el("span", "lb-visually-hidden", {
+      "data-status": "",
+      "aria-live": "polite"
+    })
+  );
+  container.appendChild(root);
+  const firstEligible = eligible.find((ep) => !ep.isOos);
+  const firstVariant = firstEligible?.firstAvailableVariant ?? firstEligible?.variants[0];
+  if (firstEligible && firstVariant) {
+    selections.push({
+      productId: firstEligible.product.id,
+      productTitle: firstEligible.product.title,
+      variantId: firstVariant.id,
+      variantTitle: firstVariant.title,
+      imageUrl: firstEligible.product.featuredImage?.url ?? null,
+      priceCents: parseCents(firstVariant.price.amount),
+      compareCents: firstVariant.compareAtPrice ? parseCents(firstVariant.compareAtPrice.amount) : null
+    });
+  }
+  afterMutation();
+  function addSelection(product, variant) {
+    if (selections.length >= maxQty) return;
+    selections.push({
+      productId: product.id,
+      productTitle: product.title,
+      variantId: variant.id,
+      variantTitle: variant.title,
+      imageUrl: product.featuredImage?.url ?? null,
+      priceCents: parseCents(variant.price.amount),
+      compareCents: variant.compareAtPrice ? parseCents(variant.compareAtPrice.amount) : null
+    });
+    afterMutation();
+  }
+  function removeSelection(productId, variantId) {
+    const idx = selections.findIndex(
+      (s) => s.productId === productId && s.variantId === variantId
+    );
+    if (idx === -1) return;
+    selections.splice(idx, 1);
+    afterMutation();
+  }
+  function removeSlotAt(index) {
+    if (index < 0 || index >= selections.length) return;
+    selections.splice(index, 1);
+    afterMutation();
+  }
+  function afterMutation() {
+    renderSlots();
+    progress.update(selections.length);
+    pricingSection.update(selections, bundle, currency);
+    if (savingsBar) savingsBar.update(selections, bundle, currency);
+    placeholder.style.display = selections.length === 0 ? "" : "none";
+    modal.refreshCounts();
+    updateCta();
+  }
+  function renderSlots() {
+    slotsContainer.innerHTML = "";
+    const totalSlots = Math.max(requiredQty, selections.length);
+    for (let i = 0; i < totalSlots; i++) {
+      const selection = selections[i];
+      if (selection) {
+        slotsContainer.appendChild(
+          renderFilledSlot(selection, i, currency, () => removeSlotAt(i))
+        );
+      } else {
+        slotsContainer.appendChild(
+          renderEmptySlot(i, () => modal.open())
+        );
+      }
+    }
+  }
+  function updateCta() {
+    const count = selections.length;
+    if (count < requiredQty) {
+      cta.disabled = true;
+      cta.textContent = `Select ${requiredQty - count} more to unlock`;
+    } else {
+      cta.disabled = false;
+      cta.textContent = wc.cta.ctaText || "Add to cart";
+    }
+  }
+}
+function renderHeader2(bundle) {
+  const wc = bundle.widgetConfig;
+  const header = el("div", "lb-bundle-header");
+  const content = el("div", "lb-bundle-header__content");
+  const title = el("h3", "lb-bundle-title");
+  title.textContent = bundle.title;
+  content.appendChild(title);
+  header.appendChild(content);
+  if (wc.pricing.showSaveBadge) {
+    const { discountType, discountValue } = bundle.discountConfig;
+    let label = null;
+    if (discountType === "percentage" && discountValue > 0) {
+      label = `-${Math.round(discountValue)}%`;
+    } else if (discountType === "fixed_amount" && discountValue > 0) {
+      label = `-${formatCents(
+        Math.round(discountValue * 100),
+        bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD"
+      )}`;
+    }
+    if (label) {
+      const badge = el("span", "lb-bundle-header__badge");
+      badge.textContent = label;
+      header.appendChild(badge);
+    }
+  }
+  return header;
+}
+function renderProgress(requiredQty) {
+  const wrap = el("div", "lb-mix-match__progress");
+  const labels = el("div", "lb-mix-match__progress-labels");
+  const count = el("span", "lb-mix-match__progress-count", {
+    "data-progress-count": ""
+  });
+  count.textContent = `0 of ${requiredQty} selected`;
+  labels.appendChild(count);
+  const remaining = el("span", "lb-mix-match__progress-remaining", {
+    "data-progress-remaining": ""
+  });
+  remaining.textContent = `${requiredQty} more to go`;
+  labels.appendChild(remaining);
+  wrap.appendChild(labels);
+  const track = el("div", "lb-mix-match__progress-track", {
+    role: "progressbar",
+    "aria-valuenow": "0",
+    "aria-valuemin": "0",
+    "aria-valuemax": String(requiredQty)
+  });
+  const fill = el("div", "lb-mix-match__progress-fill", {
+    "data-progress-fill": ""
+  });
+  fill.style.width = "0%";
+  track.appendChild(fill);
+  wrap.appendChild(track);
+  function update(selected) {
+    const pct = Math.min(100, selected / requiredQty * 100);
+    count.textContent = `${selected} of ${requiredQty} selected`;
+    if (selected >= requiredQty) {
+      remaining.textContent = "Complete";
+    } else {
+      remaining.textContent = `${requiredQty - selected} more to go`;
+    }
+    fill.style.width = `${pct}%`;
+    track.setAttribute("aria-valuenow", String(Math.min(selected, requiredQty)));
+  }
+  return { el: wrap, update };
+}
+function renderEmptySlot(index, onClick) {
+  const slot = el(
+    "div",
+    "lb-bundle-product-row lb-mix-match__slot lb-mix-match__slot--empty",
+    {
+      "data-slot": String(index + 1),
+      tabindex: "0",
+      role: "button",
+      "aria-label": "Add a product to the bundle"
+    }
+  );
+  const thumb = el("div", "lb-mix-match__empty-thumb");
+  thumb.innerHTML = PLUS_ICON_SVG;
+  slot.appendChild(thumb);
+  const text = el("span", "lb-mix-match__empty-text");
+  text.textContent = "Choose an item";
+  slot.appendChild(text);
+  slot.addEventListener("click", onClick);
+  slot.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick();
+    }
+  });
+  return slot;
+}
+function renderFilledSlot(selection, index, currency, onRemove) {
+  const slot = el(
+    "div",
+    "lb-bundle-product-row lb-mix-match__slot lb-mix-match__slot--filled",
+    { "data-slot": String(index + 1) }
+  );
+  const thumb = el("div", "lb-bundle-thumbnail", { "data-thumbnail": "" });
+  if (selection.imageUrl) {
+    const img = document.createElement("img");
+    img.src = transformImageUrl(selection.imageUrl, {
+      width: THUMB_PX,
+      height: THUMB_PX,
+      crop: "center"
+    });
+    img.alt = selection.productTitle;
+    img.width = THUMB_PX;
+    img.height = THUMB_PX;
+    img.loading = "lazy";
+    thumb.appendChild(img);
+  } else {
+    thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
+  }
+  slot.appendChild(thumb);
+  const info = el("div", "lb-mix-match__filled-info");
+  const title = el("span", "lb-mix-match__filled-title");
+  title.textContent = selection.productTitle;
+  info.appendChild(title);
+  if (selection.variantTitle && selection.variantTitle !== "Default Title") {
+    const variant = el("span", "lb-mix-match__filled-variant");
+    variant.textContent = selection.variantTitle;
+    info.appendChild(variant);
+  }
+  const priceWrap = el("span", "lb-mix-match__filled-price");
+  if (selection.compareCents && selection.compareCents > selection.priceCents) {
+    const compare = el("span", "lb-mix-match__filled-compare");
+    compare.textContent = formatCents(selection.compareCents, currency);
+    priceWrap.appendChild(compare);
+  }
+  const priceEl = document.createElement("span");
+  priceEl.textContent = formatCents(selection.priceCents, currency);
+  priceWrap.appendChild(priceEl);
+  info.appendChild(priceWrap);
+  slot.appendChild(info);
+  const remove = document.createElement("button");
+  remove.type = "button";
+  remove.className = "lb-mix-match__slot-remove";
+  remove.setAttribute("aria-label", `Remove ${selection.productTitle}`);
+  remove.innerHTML = CLOSE_ICON_SVG;
+  remove.addEventListener("click", (e) => {
+    e.stopPropagation();
+    onRemove();
+  });
+  slot.appendChild(remove);
+  return slot;
+}
+function renderPricingSection(showCompareAtPrice) {
+  const wrap = el("div", "lb-bundle-pricing", { "data-pricing-section": "" });
+  wrap.style.display = "none";
+  const label = el("span", "lb-bundle-pricing__label");
+  label.textContent = "Bundle price";
+  wrap.appendChild(label);
+  const prices = el("span", "lb-bundle-pricing__prices");
+  const compare = el("span", "lb-bundle-compare-price", {
+    "data-compare-price": ""
+  });
+  if (showCompareAtPrice) prices.appendChild(compare);
+  const sale = el("span", "lb-bundle-sale-price", { "data-sale-price": "" });
+  prices.appendChild(sale);
+  wrap.appendChild(prices);
+  function update(selections, bundle, currency) {
+    if (selections.length === 0) {
+      wrap.style.display = "none";
+      return;
+    }
+    wrap.style.display = "";
+    const totalCents = selections.reduce((s, sel) => s + sel.priceCents, 0);
+    const saleCents = computeBundleSaleCents(totalCents, bundle.discountConfig);
+    if (showCompareAtPrice && totalCents > saleCents) {
+      compare.textContent = formatCents(totalCents, currency);
+      compare.style.display = "";
+    } else {
+      compare.style.display = "none";
+    }
+    sale.textContent = formatCents(saleCents, currency);
+  }
+  return { el: wrap, update };
+}
+function renderSavingsBar2() {
+  const wrap = el("div", "lb-bundle-savings-bar", {
+    "data-savings-bar": ""
+  });
+  wrap.style.display = "none";
+  const labelEl = document.createElement("span");
+  labelEl.textContent = "You save";
+  wrap.appendChild(labelEl);
+  const amount = el("span", "", { "data-savings-amount": "" });
+  wrap.appendChild(amount);
+  function update(selections, bundle, currency) {
+    if (selections.length === 0) {
+      wrap.style.display = "none";
+      return;
+    }
+    const totalCents = selections.reduce((s, sel) => s + sel.priceCents, 0);
+    const saleCents = computeBundleSaleCents(totalCents, bundle.discountConfig);
+    const savings = Math.max(0, totalCents - saleCents);
+    if (savings <= 0) {
+      wrap.style.display = "none";
+      return;
+    }
+    wrap.style.display = "";
+    amount.textContent = formatCents(savings, currency);
+  }
+  return { el: wrap, update };
+}
+function renderModal(bundle, eligible, currency, handlers) {
+  const overlay = el("div", "lb-mix-match__modal-overlay", {
+    "data-modal-overlay": "",
+    "data-bundle-gid": bundle.id
+  });
+  overlay.style.display = "none";
+  const modal = el("div", "lb-mix-match__modal", {
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": `lb-modal-title-${sanitizeId(bundle.id)}`,
+    tabindex: "-1"
+  });
+  const modalHeader = el("div", "lb-mix-match__modal-header");
+  const modalTitle = el("h4", "lb-mix-match__modal-title", {
+    id: `lb-modal-title-${sanitizeId(bundle.id)}`
+  });
+  modalTitle.textContent = "Pick an item";
+  modalHeader.appendChild(modalTitle);
+  const closeBtn = document.createElement("button");
+  closeBtn.type = "button";
+  closeBtn.className = "lb-mix-match__modal-close";
+  closeBtn.setAttribute("data-modal-close", "");
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.innerHTML = CLOSE_ICON_SVG;
+  closeBtn.addEventListener("click", close);
+  modalHeader.appendChild(closeBtn);
+  modal.appendChild(modalHeader);
+  let searchInput = null;
+  let searchClearBtn = null;
+  if (handlers.showSearch) {
+    const searchWrap = el("div", "lb-mix-match__modal-search");
+    searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.className = "lb-mix-match__modal-search-input";
+    searchInput.setAttribute("data-modal-search", "");
+    searchInput.setAttribute("role", "searchbox");
+    searchInput.setAttribute("aria-label", "Search products");
+    searchInput.setAttribute("placeholder", "Search products");
+    searchInput.autocomplete = "off";
+    searchInput.addEventListener("input", () => applySearch());
+    searchWrap.appendChild(searchInput);
+    searchClearBtn = document.createElement("button");
+    searchClearBtn.type = "button";
+    searchClearBtn.className = "lb-mix-match__modal-search-clear";
+    searchClearBtn.setAttribute("data-modal-search-clear", "");
+    searchClearBtn.setAttribute("aria-label", "Clear search");
+    searchClearBtn.style.display = "none";
+    searchClearBtn.innerHTML = SEARCH_CLEAR_ICON_SVG;
+    searchClearBtn.addEventListener("click", () => {
+      if (!searchInput) return;
+      searchInput.value = "";
+      applySearch();
+      searchInput.focus();
+    });
+    searchWrap.appendChild(searchClearBtn);
+    modal.appendChild(searchWrap);
+  }
+  const list = el("div", "lb-mix-match__modal-list", {
+    "data-modal-list": ""
+  });
+  modal.appendChild(list);
+  const empty = el("div", "lb-mix-match__modal-empty", {
+    "data-modal-empty": ""
+  });
+  empty.style.display = "none";
+  const emptyText = document.createElement("p");
+  emptyText.textContent = "No products match your search.";
+  empty.appendChild(emptyText);
+  modal.appendChild(empty);
+  const live = el("span", "lb-visually-hidden", {
+    "data-modal-live": "",
+    "aria-live": "polite"
+  });
+  modal.appendChild(live);
+  overlay.appendChild(modal);
+  let rowsBuilt = false;
+  const productRows = [];
+  function buildRows() {
+    if (rowsBuilt) return;
+    rowsBuilt = true;
+    list.innerHTML = "";
+    eligible.forEach((ep) => {
+      const variant = ep.firstAvailableVariant ?? ep.variants[0];
+      if (!variant) return;
+      const productEl = el(
+        "div",
+        ep.isOos ? "lb-mix-match__modal-product lb-mix-match__modal-product--sold-out" : "lb-mix-match__modal-product",
+        { "data-product-id": ep.product.id.replace(/^.*\//, "") }
+      );
+      const thumb = el("div", "lb-mix-match__modal-product-thumb");
+      if (ep.product.featuredImage) {
+        const img = document.createElement("img");
+        img.src = transformImageUrl(ep.product.featuredImage.url, {
+          width: THUMB_PX,
+          height: THUMB_PX,
+          crop: "center"
+        });
+        img.alt = ep.product.featuredImage.altText ?? ep.product.title;
+        img.width = THUMB_PX;
+        img.height = THUMB_PX;
+        img.loading = "lazy";
+        thumb.appendChild(img);
+      } else {
+        thumb.insertAdjacentHTML("beforeend", PLACEHOLDER_THUMB_SVG2);
+      }
+      productEl.appendChild(thumb);
+      const info = el("div", "lb-mix-match__modal-product-info");
+      const title = el("span", "lb-mix-match__modal-product-title");
+      title.textContent = ep.product.title;
+      info.appendChild(title);
+      const price = el("span", "lb-mix-match__modal-product-price");
+      price.textContent = formatCents(parseCents(variant.price.amount), currency);
+      info.appendChild(price);
+      if (ep.isOos) {
+        const soldOut = el("span", "lb-mix-match__modal-sold-out-label");
+        soldOut.textContent = "Sold out";
+        info.appendChild(soldOut);
+      }
+      productEl.appendChild(info);
+      if (!ep.isOos) {
+        const addBtn = document.createElement("button");
+        addBtn.type = "button";
+        addBtn.className = "lb-mix-match__modal-add";
+        addBtn.setAttribute("aria-label", `Add ${ep.product.title}`);
+        addBtn.innerHTML = PLUS_ICON_SVG;
+        const countBadge = el("span", "lb-bundle-qty-badge");
+        countBadge.style.display = "none";
+        addBtn.appendChild(countBadge);
+        addBtn.addEventListener("click", () => {
+          if (handlers.isOverMax()) return;
+          handlers.onAdd(ep.product, variant);
+        });
+        productEl.appendChild(addBtn);
+        const removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className = "lb-mix-match__slot-remove";
+        removeBtn.setAttribute("aria-label", `Remove one ${ep.product.title}`);
+        removeBtn.style.display = "none";
+        removeBtn.innerHTML = CLOSE_ICON_SVG;
+        removeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          handlers.onRemove(ep.product.id, variant.id);
+        });
+        productEl.appendChild(removeBtn);
+        productRows.push({
+          el: productEl,
+          product: ep.product,
+          variant,
+          updateCount: () => {
+            const count = handlers.countFor(ep.product.id, variant.id);
+            if (count > 0) {
+              countBadge.textContent = String(count);
+              countBadge.style.display = "";
+              removeBtn.style.display = "";
+            } else {
+              countBadge.style.display = "none";
+              removeBtn.style.display = "none";
+            }
+          }
+        });
+      } else {
+        productRows.push({
+          el: productEl,
+          product: ep.product,
+          variant,
+          updateCount: () => {
+          }
+        });
+      }
+      list.appendChild(productEl);
+    });
+    refreshCounts();
+  }
+  function applySearch() {
+    if (!searchInput) return;
+    const query = searchInput.value.trim().toLowerCase();
+    if (searchClearBtn) {
+      searchClearBtn.style.display = query ? "" : "none";
+    }
+    let visibleCount = 0;
+    productRows.forEach((row) => {
+      const match = !query || row.product.title.toLowerCase().includes(query);
+      row.el.style.display = match ? "" : "none";
+      if (match) visibleCount++;
+    });
+    empty.style.display = visibleCount === 0 && query ? "" : "none";
+  }
+  let lastFocused = null;
+  function onKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+      return;
+    }
+    if (e.key === "Tab") {
+      trapFocus(e, modal);
+    }
+  }
+  let isOpen = false;
+  function open() {
+    if (isOpen) return;
+    if (handlers.isOverMax()) return;
+    isOpen = true;
+    buildRows();
+    lastFocused = overlay.getRootNode().activeElement;
+    overlay.style.display = "";
+    overlay.classList.add("lb-mix-match__modal-overlay--open");
+    modal.focus();
+    document.addEventListener("keydown", onKeydown);
+    overlay.addEventListener("click", onOverlayClick);
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    overlay.classList.remove("lb-mix-match__modal-overlay--open");
+    overlay.style.display = "none";
+    document.removeEventListener("keydown", onKeydown);
+    overlay.removeEventListener("click", onOverlayClick);
+    if (lastFocused instanceof HTMLElement) {
+      lastFocused.focus();
+    }
+  }
+  function onOverlayClick(e) {
+    if (e.target === overlay) close();
+  }
+  function refreshCounts() {
+    productRows.forEach((r) => r.updateCount());
+  }
+  return { el: overlay, open, close, refreshCounts };
+}
+function buildEligibleProducts(bundle, oosBehavior) {
+  const result = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const product of bundle.products) {
+    if (seen.has(product.id)) continue;
+    seen.add(product.id);
+    const available = product.variants.nodes.filter((v) => v.availableForSale);
+    const isOos = available.length === 0;
+    if (isOos && oosBehavior === "hide") continue;
+    result.push({
+      product,
+      variants: product.variants.nodes,
+      firstAvailableVariant: available[0] ?? null,
+      isOos
+    });
+  }
+  return result;
+}
+function trapFocus(e, container) {
+  const focusables = container.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  if (focusables.length === 0) return;
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = container.getRootNode().activeElement;
+  if (e.shiftKey && active === first) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && active === last) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+function sanitizeId(gid) {
+  return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+// src/renderers/volume.ts
+function renderVolumeBundle(container, bundle, onAddToCart, onCleanup) {
+  const wc = bundle.widgetConfig;
+  const product = bundle.products[0];
+  const variant = product?.variants.nodes.find((v) => v.availableForSale);
+  if (!variant && wc.outOfStockBehavior === "hide") return;
+  const basePriceCents = variant ? parseCents(variant.price.amount) : 0;
+  const currency = variant?.price.currencyCode ?? "USD";
+  const discountType = bundle.discountConfig.discountType;
+  const resolved = bundle.volumeTiers.map((tier, index) => {
+    let perUnit;
+    if (discountType === "fixed_amount") {
+      const amt = Math.round((tier.amount ?? 0) * 100);
+      perUnit = Math.max(0, basePriceCents - amt);
+    } else {
+      const pct = tier.percentage ?? 0;
+      const discount = Math.floor(basePriceCents * pct / 100);
+      perUnit = Math.max(0, basePriceCents - discount);
+    }
+    return {
+      tier,
+      index,
+      qty: tier.minQuantity,
+      pricePerUnitCents: perUnit,
+      basePricePerUnitCents: basePriceCents
+    };
+  });
+  const bestTierIndex = pickBestTierIndex(resolved);
+  let selectedIndex = wc.defaultTier === "best_value" ? bestTierIndex : 0;
+  if (typeof wc.defaultTier === "number") {
+    selectedIndex = clamp(wc.defaultTier, 0, resolved.length - 1);
+  }
+  const popularIndex = wc.popularBadge.tierIndex !== void 0 ? clamp(wc.popularBadge.tierIndex, 0, resolved.length - 1) : bestTierIndex;
+  const root = el("div", "lb-volume");
+  root.appendChild(
+    renderHeader3(bundle, resolved, selectedIndex, currency, discountType)
+  );
+  if (wc.countdown.showCountdown && bundle.endsAt) {
+    const countdown = renderCountdown(bundle.endsAt);
+    if (countdown) {
+      root.appendChild(countdown.el);
+      onCleanup?.(countdown.stop);
+    }
+  }
+  const tierGroup = el("div", "lb-volume__tiers", {
+    role: "radiogroup",
+    "aria-label": "Quantity tiers",
+    "data-tier-group": ""
+  });
+  resolved.forEach((r) => {
+    const tierEl = renderTierCard(
+      r,
+      r.index === selectedIndex,
+      currency,
+      wc.popularBadge.visible && r.index === popularIndex ? wc.popularBadge.text : null,
+      wc.pricing.showComparePrice,
+      wc.pricing.showPerUnitPrice
+    );
+    tierEl.addEventListener("click", () => selectTier(r.index));
+    tierEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        selectTier(r.index);
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        const delta = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
+        const next = (r.index + delta + resolved.length) % resolved.length;
+        selectTier(next);
+        const target = tierGroup.children[next];
+        target?.focus();
+      }
+    });
+    tierGroup.appendChild(tierEl);
+  });
+  root.appendChild(tierGroup);
+  root.appendChild(el("div", "lb-bundle-divider"));
+  let pricingEl = renderPricingRow2(
+    resolved,
+    selectedIndex,
+    currency,
+    wc.pricing.showItemCount,
+    wc.pricing.showCompareAtPrice
+  );
+  root.appendChild(pricingEl);
+  let savingsBarEl = wc.savingsBar.visible ? renderSavingsBar3(resolved, selectedIndex, currency) : null;
+  if (savingsBarEl) root.appendChild(savingsBarEl);
+  const cta = renderCta2(bundle, () => {
+    if (!variant) return;
+    const r = resolved[selectedIndex];
+    if (!r) return;
+    onAddToCart([
+      {
         merchandiseId: variant.id,
-        quantity: 1,
+        quantity: r.qty,
         attributes: [
           { key: "_lime_bundle_gid", value: bundle.id },
           { key: "_lime_bundle_type", value: bundle.bundleType }
         ]
-      };
+      }
+    ]);
+  });
+  root.appendChild(cta);
+  root.appendChild(
+    el("p", "lb-bundle-error", { "data-error": "", "aria-live": "polite" })
+  );
+  root.appendChild(
+    el("span", "lb-visually-hidden", {
+      "data-status": "",
+      "aria-live": "polite"
+    })
+  );
+  container.appendChild(root);
+  function selectTier(idx) {
+    if (idx === selectedIndex || idx < 0 || idx >= resolved.length) return;
+    selectedIndex = idx;
+    Array.from(tierGroup.children).forEach((card, i) => {
+      card.setAttribute("aria-checked", String(i === idx));
+      card.tabIndex = i === idx ? 0 : -1;
     });
-    if (lines.length === 0) return;
-    onAddToCart(lines);
+    const newPricing = renderPricingRow2(
+      resolved,
+      idx,
+      currency,
+      wc.pricing.showItemCount,
+      wc.pricing.showCompareAtPrice
+    );
+    pricingEl.replaceWith(newPricing);
+    pricingEl = newPricing;
+    if (savingsBarEl) {
+      const newBar = renderSavingsBar3(resolved, idx, currency);
+      savingsBarEl.replaceWith(newBar);
+      savingsBarEl = newBar;
+    }
+    const badgeEl = root.querySelector("[data-header-badge]");
+    if (badgeEl) {
+      const label = badgeFor(resolved[idx], currency, discountType);
+      if (label) {
+        badgeEl.textContent = label;
+        badgeEl.style.display = "";
+      } else {
+        badgeEl.style.display = "none";
+      }
+    }
+  }
+}
+function renderHeader3(bundle, resolved, selectedIndex, currency, discountType) {
+  const wc = bundle.widgetConfig;
+  const header = el("div", "lb-bundle-header");
+  const content = el("div", "lb-bundle-header__content");
+  const title = el("h3", "lb-bundle-title");
+  title.textContent = bundle.title;
+  content.appendChild(title);
+  header.appendChild(content);
+  if (wc.pricing.showSaveBadge) {
+    const badge = badgeFor(resolved[selectedIndex], currency, discountType);
+    if (badge) {
+      const badgeEl = el("span", "lb-bundle-header__badge", {
+        "data-header-badge": ""
+      });
+      badgeEl.textContent = badge;
+      header.appendChild(badgeEl);
+    }
+  }
+  return header;
+}
+function renderTierCard(r, isSelected, currency, popularLabel, showComparePrice, showPerUnitPrice) {
+  const tier = el("div", "lb-volume__tier", {
+    role: "radio",
+    "aria-checked": String(isSelected),
+    tabindex: isSelected ? "0" : "-1",
+    "data-tier-index": String(r.index),
+    "data-tier-qty": String(r.qty)
+  });
+  const radio = el("span", "lb-volume__radio");
+  radio.appendChild(el("span", "lb-volume__radio-dot"));
+  tier.appendChild(radio);
+  const grid = el("span", "lb-volume__tier-grid");
+  const label = el("span", "lb-volume__tier-label");
+  label.textContent = `Buy ${r.qty}`;
+  grid.appendChild(label);
+  const price = el("span", "lb-volume__tier-price");
+  if (showComparePrice && r.pricePerUnitCents < r.basePricePerUnitCents) {
+    const compare = el("span", "lb-volume__tier-compare");
+    compare.textContent = formatCents(r.basePricePerUnitCents, currency);
+    price.appendChild(compare);
+  }
+  if (showPerUnitPrice) {
+    const each = document.createElement("span");
+    each.setAttribute("data-tier-price-each", "");
+    each.textContent = formatCents(r.pricePerUnitCents, currency);
+    price.appendChild(each);
+    const unit = el("span", "lb-volume__tier-unit");
+    unit.textContent = " each";
+    price.appendChild(unit);
+  }
+  grid.appendChild(price);
+  tier.appendChild(grid);
+  const badge = el("span", "lb-volume__tier-badge");
+  if (popularLabel) {
+    badge.textContent = popularLabel;
+  } else {
+    badge.style.display = "none";
+  }
+  tier.appendChild(badge);
+  return tier;
+}
+function renderPricingRow2(resolved, selectedIndex, currency, showItemCount, showCompareAtPrice) {
+  const r = resolved[selectedIndex];
+  const totalCents = r ? r.pricePerUnitCents * r.qty : 0;
+  const undiscountedCents = r ? r.basePricePerUnitCents * r.qty : 0;
+  const savings = Math.max(0, undiscountedCents - totalCents);
+  const row = el("div", "lb-bundle-pricing");
+  const label = el("span", "lb-bundle-pricing__label", {
+    "data-total-label": ""
   });
-  container.appendChild(button);
+  label.textContent = "Total";
+  if (showItemCount && r) {
+    const count = document.createElement("span");
+    count.setAttribute("data-item-count", "");
+    count.textContent = ` (${r.qty} item${r.qty === 1 ? "" : "s"})`;
+    label.appendChild(count);
+  }
+  row.appendChild(label);
+  const prices = el("span", "lb-bundle-pricing__prices");
+  if (showCompareAtPrice && savings > 0) {
+    const compare = el("span", "lb-bundle-compare-price", {
+      "data-compare-price": ""
+    });
+    compare.textContent = formatCents(undiscountedCents, currency);
+    prices.appendChild(compare);
+  }
+  const sale = el("span", "lb-bundle-sale-price", { "data-total-price": "" });
+  sale.textContent = formatCents(totalCents, currency);
+  prices.appendChild(sale);
+  row.appendChild(prices);
+  return row;
+}
+function renderSavingsBar3(resolved, selectedIndex, currency) {
+  const r = resolved[selectedIndex];
+  const totalCents = r ? r.pricePerUnitCents * r.qty : 0;
+  const undiscountedCents = r ? r.basePricePerUnitCents * r.qty : 0;
+  const savings = Math.max(0, undiscountedCents - totalCents);
+  const bar = el("div", "lb-bundle-savings-bar", { "data-savings-bar": "" });
+  if (savings <= 0) bar.style.display = "none";
+  const labelEl = document.createElement("span");
+  labelEl.textContent = "You save";
+  bar.appendChild(labelEl);
+  const amount = el("span", "", { "data-savings-amount": "" });
+  amount.textContent = formatCents(savings, currency);
+  bar.appendChild(amount);
+  return bar;
+}
+function renderCta2(bundle, onClick) {
+  const product = bundle.products[0];
+  const isAvailable = product?.variants.nodes.some((v) => v.availableForSale);
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "lb-bundle-cta";
+  button.setAttribute("data-add-bundle", "");
+  if (!isAvailable) button.disabled = true;
+  button.textContent = isAvailable ? bundle.widgetConfig.cta.ctaText || "Add to cart" : "Sold out";
+  button.addEventListener("click", () => {
+    if (button.disabled) return;
+    onClick();
+  });
+  return button;
+}
+function badgeFor(resolved, currency, discountType) {
+  if (!resolved) return null;
+  const { tier } = resolved;
+  if (discountType === "fixed_amount") {
+    const amount = tier.amount ?? 0;
+    if (amount > 0) return `-${formatCents(Math.round(amount * 100), currency)}`;
+    return null;
+  }
+  if (discountType === "percentage") {
+    const pct = tier.percentage ?? 0;
+    if (pct > 0) return `-${Math.round(pct)}%`;
+    return null;
+  }
+  return null;
+}
+function pickBestTierIndex(resolved) {
+  let bestSavings = 0;
+  let bestIndex = 0;
+  resolved.forEach((r, i) => {
+    const savings = r.basePricePerUnitCents - r.pricePerUnitCents;
+    if (savings > bestSavings) {
+      bestSavings = savings;
+      bestIndex = i;
+    }
+  });
+  return bestIndex;
+}
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+
+// src/lime-bundle.ts
+import { applyWidgetConfigVars } from "@lime-bundles/core";
+
+// src/styles/bundle-css.ts
+var BUNDLE_BASE_CSS = `/* Lime Bundles \u2014 shared base styles for all bundle widget types */
+
+.lb-bundle-widget.lb-bundle-widget,
+.lb-bundle-widget.lb-bundle-widget * {
+  line-height: normal;
+}
+
+.lb-bundle-widget {
+  /* Internal CSS-only vars (not merchant-configurable). */
+  --lb-text-muted: #666666;
+  --lb-thumbnail-bg: #F0F0F0;
+  --lb-widget-pad: 20px;
+  --lb-progress-color: var(--lb-primary-color);
+
+  font-family: inherit;
+  font-size: 16px;
+  background: var(--lb-bg);
+  border: var(--lb-border-width) solid var(--lb-border);
+  border-radius: var(--lb-radius);
+  padding: var(--lb-widget-pad) var(--lb-widget-pad) 20px;
+  box-sizing: border-box;
+  /* Cap the widget at a comfortable reading width on desktop. Below
+     440px viewports the container is already narrower than the cap,
+     so the rule is inert on mobile. */
+  max-width: 440px;
+}
+
+/* Countdown timer bar \u2014 sits below the gradient header */
+.lb-bundle-countdown {
+  margin: 0 calc(-1 * var(--lb-widget-pad)) 20px;
+  padding: 12px 20px;
+  background: var(--lb-countdown-bg);
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.lb-bundle-countdown__label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lb-bundle-countdown__label svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--lb-countdown-text);
+}
+
+.lb-bundle-countdown__label span {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--lb-countdown-text);
+}
+
+.lb-bundle-countdown__timer {
+  font-family: 'SF Mono', 'Roboto Mono', ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--lb-countdown-text);
+  letter-spacing: 0.02em;
+}
+
+/* Hide wrapper when the inner snippet rendered nothing (product OOS / unfulfillable) */
+.lb-bundle-widget:not(:has(.lb-fixed, .lb-mix-match, .lb-volume)) {
+  display: none;
+}
+
+/* Adjacent widget spacing \u2014 separates multiple bundles on the same product page */
+.lb-bundle-widget + .lb-bundle-widget {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--lb-border);
+}
+
+/* Header \u2014 gradient banner with title + savings badge */
+.lb-bundle-header {
+  margin: calc(-1 * var(--lb-widget-pad)) calc(-1 * var(--lb-widget-pad)) 20px;
+  padding: 20px 20px;
+  background: var(--lb-header-bg);
+  /* Match the widget's inner border curve so there's no background gap at the top corners. */
+  border-radius: max(0px, calc(var(--lb-radius) - var(--lb-border-width))) max(0px, calc(var(--lb-radius) - var(--lb-border-width))) 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+/* When countdown follows header, remove header bottom margin */
+.lb-bundle-header:has(+ .lb-bundle-countdown) {
+  margin-bottom: 0;
+}
+
+.lb-bundle-header__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.lb-bundle-title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: -0.02em;
+  color: var(--lb-text);
+  margin: 0;
+}
+
+.lb-bundle-header .lb-bundle-title {
+  color: var(--lb-header-text);
+}
+
+.lb-bundle-subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--lb-text-muted);
+  margin: 4px 0 0;
+}
+
+.lb-bundle-header .lb-bundle-subtitle {
+  color: var(--lb-header-text);
+  opacity: 0.85;
+  margin-top: 8px;
+}
+
+.lb-bundle-header:has(.lb-bundle-subtitle) {
+  align-items: flex-start;
+}
+
+.lb-bundle-header__badge {
+  background: var(--lb-save-badge-bg);
+  color: var(--lb-save-badge-text);
+  border: var(--lb-save-badge-border-width) solid var(--lb-save-badge-border-color);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 4px 12px;
+  border-radius: var(--lb-save-badge-radius);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Override Dawn's \`div:empty { display: none }\` reset for decorative elements */
+.lb-bundle-divider:empty,
+.lb-mix-match__progress-fill:empty {
+  display: block;
+}
+
+/* Divider */
+.lb-bundle-divider {
+  height: 1px;
+  background: color-mix(in srgb, var(--lb-text) 7%, transparent);
+  margin: 16px 0;
+}
+
+/* Product rows */
+.lb-bundle-product-row {
+  display: flex;
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.lb-bundle-thumbnail {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  background: var(--lb-thumbnail-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lb-bundle-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.lb-bundle-thumbnail svg {
+  width: 28px;
+  height: 28px;
+  color: #BBBBBB;
+}
+
+.lb-bundle-product-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.lb-bundle-product-name {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  color: var(--lb-text);
+  margin: 0;
+  text-decoration: none;
+  display: block;
+}
+
+.lb-bundle-product-name:hover {
+  text-decoration: underline;
+}
+
+.lb-bundle-product-price {
+  /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
+  display: var(--lb-product-price-display, block);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--lb-text);
+}
+
+.lb-bundle-product-prices {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 2px;
+}
+
+.lb-bundle-product-compare-price {
+  /* --lb-product-compare-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
+  display: var(--lb-product-compare-display, inline);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+  text-decoration: line-through;
+}
+
+/* Setting \`display\` above outranks the UA [hidden] rule \u2014 restore it so rows
+   without a compare-at price don't leave a phantom flex item + gap. */
+.lb-bundle-product-compare-price[hidden] {
+  display: none;
+}
+
+.lb-bundle-variant-badge {
+  display: inline-block;
+  border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
+  border-radius: var(--lb-variant-radius);
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-text-muted);
+  margin-top: 8px;
+}
+
+.lb-bundle-quantity {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-text-muted);
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+/* Pricing row \u2014 label left, prices right */
+.lb-bundle-pricing {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 4px 0 8px;
+  gap: 12px;
+}
+
+.lb-bundle-pricing__label {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--lb-text);
+  white-space: nowrap;
+}
+
+.lb-bundle-pricing__prices {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.lb-bundle-sale-price {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--lb-text);
+}
+
+.lb-bundle-compare-price {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+  text-decoration: line-through;
+}
+
+/* Savings bar \u2014 green banner below pricing */
+.lb-bundle-savings-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--lb-savings-bar-bg);
+  color: var(--lb-savings-bar-text);
+  border: var(--lb-savings-bar-border-width) solid var(--lb-savings-bar-border-color);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 12px 16px;
+  border-radius: var(--lb-savings-bar-radius);
+  margin-bottom: 12px;
+}
+
+/* Quantity badge \u2014 overlay on thumbnail top-right */
+.lb-bundle-qty-badge.lb-bundle-qty-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  /* --lb-qty-badge-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
+  display: var(--lb-qty-badge-display, flex);
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--lb-qty-badge-bg);
+  border: var(--lb-image-border-width) solid var(--lb-image-border-color);
+  color: var(--lb-qty-badge-color);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 0;
+  text-align: center;
+  z-index: 1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Override Dawn's \`div:empty\` for savings bar when hidden */
+.lb-bundle-savings-bar:empty {
+  display: none;
+}
+
+/* CTA button */
+.lb-bundle-cta {
+  display: block;
+  width: 100%;
+  padding: 16px;
+  border: var(--lb-cta-border-width) solid var(--lb-cta-border-color);
+  border-radius: var(--lb-cta-radius);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+  text-align: center;
+  transition: opacity 0.15s ease;
+  font-family: inherit;
+}
+
+.lb-bundle-cta:not(:disabled) {
+  background: var(--lb-primary-color);
+  color: var(--lb-btn-text);
+}
+
+.lb-bundle-cta:not(:disabled):hover {
+  opacity: 0.9;
+}
+
+.lb-bundle-cta:disabled {
+  background: color-mix(in srgb, var(--lb-primary-color) 35%, var(--lb-bg));
+  color: color-mix(in srgb, var(--lb-btn-text) 85%, transparent);
+  cursor: not-allowed;
+}
+
+.lb-bundle-cta[data-loading="true"] {
+  opacity: 0.7;
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* Error message */
+.lb-bundle-error {
+  font-size: 16px;
+  color: #D72C0D;
+  margin-top: 8px;
+  display: none;
+}
+
+.lb-bundle-error[data-visible="true"] {
+  display: block;
+}
+
+/* Visually hidden \u2014 accessible to screen readers only */
+.lb-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Placeholder SVG icon for missing images */
+.lb-bundle-placeholder-icon {
+  width: 28px;
+  height: 28px;
+  stroke: #BBBBBB;
+  stroke-width: 1.5;
+  fill: none;
+}
+
+/* Out-of-stock product row */
+.lb-bundle-product-row--oos {
+  opacity: 0.5;
+}
+
+.lb-bundle-oos-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #D72C0D;
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+/* A/B test: hide save badge until JS swaps the label (prevents flash of default) */
+.lb-ab-pending {
+  visibility: hidden;
+}
+`;
+var BUNDLE_FIXED_CSS = `/* Lime Bundles \u2014 Fixed bundle styles */
+
+.lb-fixed__products {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
 }
-function escapeHtml(str) {
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
+
+/* Fixed bundles: product rows */
+.lb-fixed .lb-bundle-product-row {
+  gap: 16px;
+  align-items: center;
 }
 
-// src/renderers/mix-match.ts
-import {
-  formatMoney as formatMoney2,
-  validateQuantity
-} from "@lime-bundles/core";
-function renderMixMatchBundle(container, bundle, onAddToCart) {
-  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  const selections = /* @__PURE__ */ new Map();
-  const title = document.createElement("h3");
-  title.className = "lb-bundle__title";
-  title.textContent = bundle.title;
-  title.setAttribute("part", "title");
-  container.appendChild(title);
-  const instructions = document.createElement("p");
-  instructions.className = "lb-bundle__instructions";
-  instructions.textContent = bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : "Select your items";
-  container.appendChild(instructions);
-  const productsDiv = document.createElement("div");
-  productsDiv.className = "lb-bundle__products lb-bundle__products--selectable";
-  for (const product of bundle.products) {
-    const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-    if (!variant) continue;
-    const productEl = document.createElement("div");
-    productEl.className = "lb-bundle__product lb-bundle__product--selectable";
-    if (product.featuredImage) {
-      const img = document.createElement("img");
-      img.src = product.featuredImage.url;
-      img.alt = product.featuredImage.altText ?? product.title;
-      img.className = "lb-bundle__product-image";
-      img.loading = "lazy";
-      productEl.appendChild(img);
-    }
-    const info = document.createElement("div");
-    info.className = "lb-bundle__product-info";
-    info.innerHTML = `
-      <p class="lb-bundle__product-title">${escapeHtml2(product.title)}</p>
-      <p class="lb-bundle__product-price">${escapeHtml2(formatMoney2(variant.price.amount, currency))}</p>
-    `;
-    productEl.appendChild(info);
-    const selectBtn = document.createElement("button");
-    selectBtn.className = "lb-bundle__select-btn";
-    selectBtn.textContent = variant.availableForSale ? "Select" : "Sold out";
-    selectBtn.disabled = !variant.availableForSale;
-    selectBtn.addEventListener("click", () => {
-      const key = product.id;
-      if (selections.has(key)) {
-        selections.delete(key);
-        productEl.classList.remove("lb-bundle__product--selected");
-        selectBtn.textContent = "Select";
-      } else {
-        selections.set(key, { variantId: variant.id, quantity: 1 });
-        productEl.classList.add("lb-bundle__product--selected");
-        selectBtn.textContent = "Selected";
-      }
-      updateCta();
-    });
-    productEl.appendChild(selectBtn);
-    productsDiv.appendChild(productEl);
+/* Fixed bundles: larger thumbnails */
+.lb-fixed .lb-bundle-thumbnail {
+  width: 60px;
+  height: 60px;
+  min-width: 60px;
+  border-radius: var(--lb-image-border-radius);
+  border: var(--lb-image-border-width) solid var(--lb-image-border-color);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.lb-fixed .lb-bundle-thumbnail img {
+  border-radius: max(0px, calc(var(--lb-image-border-radius) - var(--lb-image-border-width)));
+  border: none;
+}
+
+/* Variant picker select \u2014 styled to match the variant badge aesthetic */
+.lb-bundle-variant-select {
+  margin-top: 8px;
+  display: inline-block;
+  border: var(--lb-variant-border-width) solid var(--lb-variant-border-color);
+  border-radius: var(--lb-variant-radius);
+  padding: 8px 32px 8px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-text);
+  background: var(--lb-bg);
+  font-family: inherit;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: var(--lb-variant-chevron);
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 12px;
+  max-width: 100%;
+}
+
+.lb-bundle-variant-select:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+`;
+var BUNDLE_MIX_MATCH_CSS = `/* Lime Bundles \u2014 Mix & Match styles */
+
+/* === Progress Bar === */
+.lb-mix-match__progress {
+  margin-bottom: 16px;
+}
+
+.lb-mix-match__progress-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.lb-mix-match__progress-count {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+}
+
+.lb-mix-match__progress-remaining {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--lb-text);
+}
+
+.lb-mix-match__progress-track {
+  width: 100%;
+  height: 4px;
+  background: color-mix(in srgb, var(--lb-text) 10%, transparent);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.lb-mix-match__progress-fill {
+  height: 100%;
+  background: var(--lb-text);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* === Slots === */
+.lb-mix-match__slot {
+  cursor: pointer;
+}
+
+.lb-mix-match .lb-bundle-product-row {
+  align-items: center;
+}
+
+.lb-mix-match__slot--empty:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+.lb-mix-match__slot--empty .lb-mix-match__empty-thumb {
+  width: 60px;
+  height: 60px;
+  min-width: 60px;
+  border: var(--lb-image-border-width) dashed color-mix(in srgb, var(--lb-text) 20%, transparent);
+  border-radius: var(--lb-image-border-radius);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: color-mix(in srgb, var(--lb-text) 35%, transparent);
+}
+
+.lb-mix-match__empty-text {
+  font-size: 16px;
+  line-height: 20px;
+  color: color-mix(in srgb, var(--lb-text) 45%, transparent);
+}
+
+/* Filled slot */
+.lb-mix-match__slot--filled {
+  cursor: default;
+}
+
+.lb-mix-match .lb-bundle-thumbnail {
+  width: 60px;
+  height: 60px;
+  min-width: 60px;
+  border-radius: var(--lb-image-border-radius);
+  border: var(--lb-image-border-width) solid var(--lb-image-border-color);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.lb-mix-match .lb-bundle-thumbnail img {
+  border-radius: max(0px, calc(var(--lb-image-border-radius) - var(--lb-image-border-width)));
+  border: none;
+}
+
+.lb-mix-match__slot--filled .lb-mix-match__filled-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.lb-mix-match__slot--filled .lb-mix-match__filled-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  color: var(--lb-text);
+  text-decoration: none;
+  overflow-wrap: break-word;
+}
+
+.lb-mix-match__slot--filled a.lb-mix-match__filled-title:hover {
+  text-decoration: underline;
+}
+
+.lb-mix-match__slot--filled .lb-mix-match__filled-variant {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 2px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+}
+
+.lb-mix-match__filled-price {
+  /* --lb-product-price-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
+  display: var(--lb-product-price-display, block);
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 4px;
+  color: var(--lb-text);
+  font-weight: 500;
+}
+
+.lb-mix-match__filled-compare {
+  /* --lb-product-compare-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
+  display: var(--lb-product-compare-display, inline);
+  font-size: 12px;
+  font-weight: 400;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+  text-decoration: line-through;
+  margin-right: 4px;
+}
+
+.lb-mix-match__slot-remove {
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--lb-text);
+  padding: 0;
+  margin-left: auto;
+  border-radius: 8px;
+}
+
+.lb-mix-match__slot-remove:hover {
+  color: var(--lb-text);
+}
+
+.lb-mix-match__slot-remove:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+
+/* Price placeholder */
+.lb-mix-match__price-placeholder {
+  padding: 4px 0 16px;
+  text-align: center;
+}
+
+.lb-mix-match__price-placeholder-text {
+  font-size: 16px;
+  color: var(--lb-text);
+}
+
+/* === Modal Overlay === */
+.lb-mix-match__modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.lb-mix-match__modal-overlay--open {
+  opacity: 1;
+}
+
+/* === Modal Panel === */
+.lb-mix-match__modal {
+  background: var(--lb-picker-bg);
+  color: var(--lb-picker-text);
+  border-radius: var(--lb-picker-radius);
+  border: var(--lb-picker-border-width) solid var(--lb-picker-border-color);
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 480px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
+  transform: translateY(24px);
+  transition: transform 0.25s ease-out;
+  will-change: transform;
+}
+
+.lb-mix-match__modal-overlay--open .lb-mix-match__modal {
+  transform: translateY(0);
+}
+
+/* === Modal Header === */
+.lb-mix-match__modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 20px 12px;
+  flex-shrink: 0;
+}
+
+.lb-mix-match__modal-title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 24px;
+  margin: 0;
+  color: inherit;
+}
+
+.lb-mix-match__modal-close {
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--lb-picker-text);
+  border-radius: 8px;
+  padding: 0;
+  margin: -12px -12px -12px 0;
+}
+
+.lb-mix-match__modal-close:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+
+/* === Modal Search === */
+.lb-mix-match__modal-search {
+  padding: 0 20px 12px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.lb-mix-match__modal-search-input {
+  width: 100%;
+  padding: 12px 40px 12px 16px;
+  border: var(--lb-picker-search-border-width) solid var(--lb-picker-search-border-color);
+  border-radius: var(--lb-picker-search-radius);
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--lb-picker-text);
+  background: var(--lb-picker-bg);
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.lb-mix-match__modal-search-input::placeholder {
+  color: color-mix(in srgb, var(--lb-picker-text) 50%, transparent);
+}
+
+.lb-mix-match__modal-search-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--lb-primary-color);
+}
+
+.lb-mix-match__modal-search-clear {
+  position: absolute;
+  right: 32px;
+  /* Anchor to the input area only \u2014 parent has padding-bottom: 12px which would
+     otherwise push a top:50% center down by 6px. */
+  top: 0;
+  bottom: 12px;
+  min-width: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--lb-picker-text);
+  padding: 0;
+}
+
+/* === Modal Product List === */
+.lb-mix-match__modal-list {
+  overflow-y: auto;
+  flex: 1;
+  padding: 0 20px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.lb-mix-match__modal-product {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--lb-picker-text) 7%, transparent);
+}
+
+.lb-mix-match__modal-product:last-child {
+  border-bottom: none;
+}
+
+.lb-mix-match__modal-product-thumb {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  border-radius: var(--lb-picker-product-radius);
+  border: var(--lb-picker-product-border-width) solid var(--lb-picker-product-border-color);
+  box-sizing: border-box;
+  overflow: visible;
+  background: #F0F0F0;
+}
+
+/* Qty badge inside the picker modal inherits picker-product border (width + color) plus
+   inverted picker bg/text for clear contrast against the modal \u2014 always stays round
+   (the badge shape is independent of the thumbnail shape). */
+.lb-mix-match__modal-product-thumb .lb-bundle-qty-badge.lb-bundle-qty-badge {
+  /* --lb-picker-qty-badge-display fallback is the "on" branch; Liquid sets 'none' when merchant disables. */
+  display: var(--lb-picker-qty-badge-display, flex);
+  background: var(--lb-picker-qty-badge-bg);
+  color: var(--lb-picker-qty-badge-color);
+  border: var(--lb-picker-product-border-width) solid var(--lb-picker-product-border-color);
+}
+
+.lb-mix-match__modal-product-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: max(0px, calc(var(--lb-picker-product-radius) - var(--lb-picker-product-border-width)));
+}
+
+.lb-mix-match__modal-product-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.lb-mix-match__modal-product-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  color: inherit;
+  margin: 0;
+}
+
+.lb-mix-match__modal-product-price {
+  font-size: 12px;
+  line-height: 20px;
+  color: inherit;
+  margin: 4px 0 0;
+}
+
+.lb-mix-match__variant-select {
+  font-size: 12px;
+  margin: 4px 0 0;
+  padding: 4px 24px 4px 8px;
+  border: var(--lb-picker-variant-border-width) solid var(--lb-picker-variant-border-color);
+  border-radius: var(--lb-picker-variant-radius);
+  background-color: var(--lb-picker-bg);
+  background-image: var(--lb-picker-variant-chevron);
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  background-size: 12px;
+  color: var(--lb-picker-text);
+  font-family: inherit;
+  min-height: 32px;
+  cursor: pointer;
+  max-width: 120px;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.lb-mix-match__variant-select:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+
+.lb-mix-match__modal-add {
+  padding: 8px 20px;
+  background: var(--lb-picker-add-bg);
+  color: var(--lb-picker-add-label);
+  border: var(--lb-picker-add-border-width) solid var(--lb-picker-add-border-color);
+  border-radius: var(--lb-picker-add-radius);
+  box-sizing: border-box;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.lb-mix-match__modal-add:hover {
+  opacity: 0.9;
+}
+
+.lb-mix-match__modal-add:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+
+.lb-mix-match__modal-add:disabled {
+  background: color-mix(in srgb, var(--lb-picker-add-bg) 35%, var(--lb-picker-bg));
+  color: color-mix(in srgb, var(--lb-picker-add-label) 85%, transparent);
+  cursor: not-allowed;
+}
+
+/* Sold out product row */
+.lb-mix-match__modal-product--sold-out {
+  opacity: 0.5;
+}
+
+.lb-mix-match__modal-product--sold-out .lb-mix-match__modal-sold-out-label {
+  font-size: 12px;
+  color: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* === Modal Empty State === */
+.lb-mix-match__modal-empty {
+  padding: 32px 20px;
+  text-align: center;
+}
+
+.lb-mix-match__modal-empty p {
+  margin: 0;
+  font-size: 16px;
+  color: var(--lb-picker-text);
+}
+
+/* Hidden utility for search filtering */
+.lb-hidden {
+  display: none !important;
+}
+
+/* === Mobile Full-Screen Modal === */
+@media (max-width: 767px) {
+  .lb-mix-match__modal-overlay {
+    align-items: flex-end;
   }
-  container.appendChild(productsDiv);
-  const validationEl = document.createElement("p");
-  validationEl.className = "lb-bundle__validation";
-  container.appendChild(validationEl);
-  const button = document.createElement("button");
-  button.className = "lb-bundle__cta";
-  button.setAttribute("part", "button");
-  button.disabled = true;
-  container.appendChild(button);
-  function updateCta() {
-    const total = Array.from(selections.values()).reduce(
-      (s, v) => s + v.quantity,
-      0
-    );
-    const validation = validateQuantity(
-      total,
-      bundle.minQuantity,
-      bundle.maxQuantity
-    );
-    button.disabled = !validation.valid;
-    button.textContent = bundle.widgetConfig.ctaText ?? `Add ${total} Items to Cart`;
-    validationEl.textContent = validation.message ?? "";
+
+  .lb-mix-match__modal {
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: 16px 16px 0 0;
+    transform: translateY(100%);
+  }
+
+  .lb-mix-match__modal-overlay--open .lb-mix-match__modal {
+    transform: translateY(0);
   }
-  updateCta();
-  button.addEventListener("click", () => {
-    const lines = Array.from(selections.values()).map((s) => ({
-      merchandiseId: s.variantId,
-      quantity: s.quantity,
-      attributes: [
-        { key: "_lime_bundle_gid", value: bundle.id },
-        { key: "_lime_bundle_type", value: bundle.bundleType }
-      ]
-    }));
-    if (lines.length === 0) return;
-    onAddToCart(lines);
-  });
 }
-function escapeHtml2(str) {
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
+
+/* === Reduced Motion === */
+@media (prefers-reduced-motion: reduce) {
+  .lb-mix-match__modal-overlay,
+  .lb-mix-match__modal,
+  .lb-mix-match__progress-fill {
+    transition: none;
+  }
 }
+`;
+var BUNDLE_VOLUME_CSS = `/* Lime Bundles \u2014 Volume / Quantity Breaks styles */
 
-// src/renderers/volume.ts
-import {
-  formatMoney as formatMoney3,
-  calculateTierSavings
-} from "@lime-bundles/core";
-function renderVolumeBundle(container, bundle, onAddToCart) {
-  const product = bundle.products[0];
-  if (!product) return;
-  const basePrice = parseFloat(product.priceRange.minVariantPrice.amount);
-  const currency = product.priceRange.minVariantPrice.currencyCode;
-  let quantity = 1;
-  const title = document.createElement("h3");
-  title.className = "lb-bundle__title";
-  title.textContent = bundle.title;
-  title.setAttribute("part", "title");
-  container.appendChild(title);
-  const productEl = document.createElement("div");
-  productEl.className = "lb-bundle__product lb-bundle__product--volume";
-  if (product.featuredImage) {
-    const img = document.createElement("img");
-    img.src = product.featuredImage.url;
-    img.alt = product.featuredImage.altText ?? product.title;
-    img.className = "lb-bundle__product-image";
-    img.loading = "lazy";
-    productEl.appendChild(img);
-  }
-  const info = document.createElement("div");
-  info.className = "lb-bundle__product-info";
-  info.innerHTML = `
-    <p class="lb-bundle__product-title">${escapeHtml3(product.title)}</p>
-    <p class="lb-bundle__product-price">${escapeHtml3(formatMoney3(basePrice, currency))} each</p>
-  `;
-  productEl.appendChild(info);
-  container.appendChild(productEl);
-  const tiersDiv = document.createElement("div");
-  tiersDiv.className = "lb-bundle__tiers";
-  tiersDiv.setAttribute("role", "table");
-  tiersDiv.setAttribute("aria-label", "Volume discounts");
-  container.appendChild(tiersDiv);
-  const qtyWrapper = document.createElement("div");
-  qtyWrapper.className = "lb-bundle__quantity-selector";
-  const label = document.createElement("label");
-  label.textContent = "Quantity";
-  qtyWrapper.appendChild(label);
-  const qtyControl = document.createElement("div");
-  qtyControl.className = "lb-bundle__quantity-control";
-  const minusBtn = document.createElement("button");
-  minusBtn.textContent = "\u2212";
-  minusBtn.setAttribute("aria-label", "Decrease quantity");
-  const qtyInput = document.createElement("input");
-  qtyInput.type = "number";
-  qtyInput.min = "1";
-  qtyInput.value = "1";
-  qtyInput.className = "lb-bundle__quantity-input";
-  const plusBtn = document.createElement("button");
-  plusBtn.textContent = "+";
-  plusBtn.setAttribute("aria-label", "Increase quantity");
-  qtyControl.append(minusBtn, qtyInput, plusBtn);
-  qtyWrapper.appendChild(qtyControl);
-  container.appendChild(qtyWrapper);
-  const button = document.createElement("button");
-  button.className = "lb-bundle__cta";
-  button.setAttribute("part", "button");
-  container.appendChild(button);
-  function updateTiers() {
-    const savings = calculateTierSavings(
-      bundle.volumeTiers,
-      basePrice,
-      quantity
-    );
-    tiersDiv.innerHTML = "";
-    for (const ts of savings) {
-      const row = document.createElement("div");
-      row.className = `lb-bundle__tier${ts.isActive ? " lb-bundle__tier--active" : ""}`;
-      row.setAttribute("role", "row");
-      row.innerHTML = `
-        <span class="lb-bundle__tier-quantity" role="cell">${ts.tier.minQuantity}+ items</span>
-        <span class="lb-bundle__tier-price" role="cell">${escapeHtml3(formatMoney3(ts.unitPrice, currency))} each</span>
-        <span class="lb-bundle__tier-savings" role="cell">Save ${ts.savingsPercent.toFixed(0)}%</span>
-        ${ts.tier.label ? `<span class="lb-bundle__tier-label" role="cell">${escapeHtml3(ts.tier.label)}</span>` : ""}
-      `;
-      tiersDiv.appendChild(row);
-    }
-    button.textContent = bundle.widgetConfig.ctaText ?? `Add ${quantity} to Cart`;
-  }
-  updateTiers();
-  minusBtn.addEventListener("click", () => {
-    if (quantity > 1) {
-      quantity--;
-      qtyInput.value = String(quantity);
-      updateTiers();
-    }
-  });
-  plusBtn.addEventListener("click", () => {
-    quantity++;
-    qtyInput.value = String(quantity);
-    updateTiers();
-  });
-  qtyInput.addEventListener("change", () => {
-    const val = parseInt(qtyInput.value, 10);
-    if (!isNaN(val) && val > 0) {
-      quantity = val;
-      updateTiers();
-    }
-  });
-  button.addEventListener("click", () => {
-    const variant = product.variants.nodes.find((v) => v.availableForSale);
-    if (!variant) return;
-    onAddToCart([
-      {
-        merchandiseId: variant.id,
-        quantity,
-        attributes: [
-          { key: "_lime_bundle_gid", value: bundle.id },
-          { key: "_lime_bundle_type", value: bundle.bundleType }
-        ]
-      }
-    ]);
-  });
+.lb-volume__tiers {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lb-volume__tier {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: var(--lb-tier-border-width) solid var(--lb-tier-border-color);
+  border-radius: var(--lb-tier-radius);
+  padding: 12px 16px;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.15s ease;
+}
+
+.lb-volume__tier:hover {
+  border-color: color-mix(in srgb, var(--lb-tier-border-color) 50%, black);
+}
+
+.lb-volume__tier:focus-visible {
+  outline: 2px solid var(--lb-primary-color);
+  outline-offset: 2px;
+}
+
+.lb-volume__tier[aria-checked="true"] {
+  border-color: var(--lb-tier-selected-border-color);
+  outline: var(--lb-tier-selected-border-width) solid var(--lb-tier-selected-border-color);
+  outline-offset: calc(-1 * var(--lb-tier-selected-border-width));
+}
+
+.lb-volume__radio {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border: 2px solid var(--lb-text);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease;
 }
-function escapeHtml3(str) {
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
+
+.lb-volume__tier[aria-checked="true"] .lb-volume__radio {
+  border-color: var(--lb-text);
+}
+
+.lb-volume__radio-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.lb-volume__tier[aria-checked="true"] .lb-volume__radio-dot {
+  background: var(--lb-text);
+}
+
+/* Tier content: 2x2 grid layout */
+.lb-volume__tier-grid {
+  flex: 1;
+  display: grid;
+  row-gap: 4px;
+  align-items: center;
+}
+
+.lb-volume__tier-label {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--lb-text);
+}
+
+.lb-volume__tier-badge {
+  flex-shrink: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lb-popular-badge-text);
+  background: var(--lb-popular-badge-bg);
+  border: var(--lb-popular-badge-border-width) solid var(--lb-popular-badge-border-color);
+  border-radius: var(--lb-popular-badge-radius);
+  padding: 4px 8px;
+}
+
+.lb-volume__tier-price {
+  grid-column: 1 / -1;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--lb-text);
+}
+
+.lb-volume__tier-unit {
+  font-size: 12px;
+  color: var(--lb-text);
+}
+
+/* Compare-at (strikethrough) price */
+.lb-volume__tier-compare {
+  font-size: 12px;
+  line-height: 16px;
+  color: color-mix(in srgb, var(--lb-text) 60%, transparent);
+  text-decoration: line-through;
+  margin-right: 4px;
 }
 
-// src/styles/widget-styles.ts
-var WIDGET_STYLES = `
-:host {
+
+`;
+var BUNDLE_SKELETON_CSS = `/* Lime Bundles \u2014 web-component loading skeleton (not mirrored to theme assets) */
+
+.lb-bundle-widget--loading {
   display: block;
-  --lb-primary-color: #000;
-  --lb-secondary-color: #666;
-  --lb-accent-color: #2563eb;
-  --lb-background: #fff;
-  --lb-border-color: #e5e7eb;
-  --lb-border-radius: 8px;
-  --lb-font-family: inherit;
-  --lb-font-size: 14px;
-  --lb-spacing-sm: 8px;
-  --lb-spacing-md: 16px;
-  --lb-spacing-lg: 24px;
-  --lb-button-bg: var(--lb-accent-color);
-  --lb-button-text: #fff;
-  --lb-button-radius: var(--lb-border-radius);
-  --lb-savings-color: #16a34a;
-  --lb-error-color: #dc2626;
-}
-
-.lb-bundle {
-  font-family: var(--lb-font-family);
-  font-size: var(--lb-font-size);
-  color: var(--lb-primary-color);
-  background: var(--lb-background);
-  border: 1px solid var(--lb-border-color);
-  border-radius: var(--lb-border-radius);
-  padding: var(--lb-spacing-lg);
-}
-
-.lb-bundle__title { margin: 0 0 var(--lb-spacing-md); font-size: 1.25em; font-weight: 600; }
-.lb-bundle__discount-badge { display: inline-block; background: var(--lb-savings-color); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 600; margin-bottom: var(--lb-spacing-md); }
-.lb-bundle__products { display: grid; gap: var(--lb-spacing-md); margin-bottom: var(--lb-spacing-lg); }
-.lb-bundle__product { display: flex; gap: var(--lb-spacing-md); align-items: center; padding: var(--lb-spacing-sm); border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); }
-.lb-bundle__product--selected { border-color: var(--lb-accent-color); }
-.lb-bundle__product-image { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--lb-border-radius) - 2px); flex-shrink: 0; }
-.lb-bundle__product-info { flex: 1; min-width: 0; }
-.lb-bundle__product-title { margin: 0; font-weight: 500; }
-.lb-bundle__product-price { margin: 4px 0 0; color: var(--lb-secondary-color); }
-.lb-bundle__instructions { color: var(--lb-secondary-color); margin: 0 0 var(--lb-spacing-md); }
-.lb-bundle__tiers { margin-bottom: var(--lb-spacing-lg); }
-.lb-bundle__tier { display: flex; align-items: center; gap: var(--lb-spacing-md); padding: var(--lb-spacing-sm) var(--lb-spacing-md); border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); margin-bottom: var(--lb-spacing-sm); }
-.lb-bundle__tier--active { border-color: var(--lb-savings-color); }
-.lb-bundle__tier-savings { color: var(--lb-savings-color); font-weight: 600; }
-.lb-bundle__quantity-selector { margin-bottom: var(--lb-spacing-lg); }
-.lb-bundle__quantity-selector label { display: block; margin-bottom: var(--lb-spacing-sm); font-weight: 500; }
-.lb-bundle__quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); }
-.lb-bundle__quantity-control button { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; font-size: 1.1em; display: flex; align-items: center; justify-content: center; }
-.lb-bundle__quantity-input { width: 40px; text-align: center; border: none; border-left: 1px solid var(--lb-border-color); border-right: 1px solid var(--lb-border-color); height: 32px; font-size: var(--lb-font-size); -moz-appearance: textfield; }
-.lb-bundle__quantity-input::-webkit-outer-spin-button, .lb-bundle__quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; }
-.lb-bundle__select-btn { padding: 6px 12px; border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); background: transparent; cursor: pointer; }
-.lb-bundle__select-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.lb-bundle__cta { width: 100%; padding: 12px 24px; border: none; border-radius: var(--lb-button-radius); background: var(--lb-button-bg); color: var(--lb-button-text); font-size: 1em; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
-.lb-bundle__cta:hover:not(:disabled) { opacity: 0.9; }
-.lb-bundle__cta:disabled { opacity: 0.5; cursor: not-allowed; }
-.lb-bundle__error { color: var(--lb-error-color); margin: var(--lb-spacing-sm) 0; font-size: 0.9em; }
-.lb-bundle__validation { color: var(--lb-secondary-color); margin: var(--lb-spacing-sm) 0; font-size: 0.9em; }
-
-.lb-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: lb-shimmer 1.5s infinite; border-radius: var(--lb-border-radius); }
-.lb-skeleton--title { height: 24px; width: 60%; margin-bottom: var(--lb-spacing-md); }
-.lb-skeleton--products { height: 200px; }
-@keyframes lb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+  padding: var(--lb-widget-pad, 20px);
+  border: 1px solid var(--lb-border, #E5E5E5);
+  border-radius: var(--lb-radius, 12px);
+  background: var(--lb-bg, #FFFFFF);
+  /* Contain layout/paint so the skeleton doesn't influence ancestor
+     layout once the real content swaps in. */
+  contain: layout paint;
+}
+
+.lb-bundle-widget--loading .lb-skeleton {
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 0%,
+    rgba(0, 0, 0, 0.10) 50%,
+    rgba(0, 0, 0, 0.06) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: 6px;
+  animation: lb-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--title {
+  height: 28px;
+  width: 60%;
+  margin-bottom: 16px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--products {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--row {
+  display: grid;
+  grid-template-columns: 56px 1fr 60px;
+  gap: 12px;
+  align-items: center;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--thumb {
+  height: 56px;
+  width: 56px;
+  border-radius: 8px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--line {
+  height: 14px;
+  border-radius: 4px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--line + .lb-skeleton--line {
+  margin-top: 8px;
+  width: 70%;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--price {
+  height: 20px;
+  width: 60px;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--footer {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--lb-border, #E5E5E5);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--total {
+  height: 24px;
+  width: 40%;
+}
+
+.lb-bundle-widget--loading .lb-skeleton--cta {
+  height: 44px;
+  width: 140px;
+  border-radius: var(--lb-cta-radius, 8px);
+}
+
+@keyframes lb-skeleton-pulse {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: -200% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lb-bundle-widget--loading .lb-skeleton {
+    animation: none;
+  }
+}
 `;
 
 // src/lime-bundle.ts
@@ -406,22 +2616,38 @@ var LimeBundleElement = class extends HTMLElement {
   bundles = [];
   abortController = null;
   impressionCleanups = [];
+  /**
+   * Tick / observer / listener cleanups registered by individual renderers
+   * (e.g. countdown setInterval handles). Flushed in disconnectedCallback
+   * so we never leak timers or event listeners when the widget is removed.
+   */
+  renderCleanups = [];
+  /**
+   * Merchant custom CSS fetched from the shop metafield. Injected inside
+   * the shadow root alongside the bundle stylesheets so selectors like
+   * `.lb-bundle-widget { ... }` reach the widget's DOM.
+   */
+  shopCustomCss = null;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render();
     this.fetchBundle();
   }
   disconnectedCallback() {
     this.abortController?.abort();
     this.teardownImpressions();
+    this.teardownRenderers();
   }
   teardownImpressions() {
     for (const cleanup of this.impressionCleanups) cleanup();
     this.impressionCleanups = [];
   }
+  teardownRenderers() {
+    for (const cleanup of this.renderCleanups) cleanup();
+    this.renderCleanups = [];
+  }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue || !this.isConnected) return;
     if (name === "bundle-gid" || name === "product-handle" || name === "shop-domain" || name === "storefront-token") {
@@ -497,7 +2723,10 @@ var LimeBundleElement = class extends HTMLElement {
       const css = await cssPromise;
       if (css?.shop?.metafield?.value) {
         injectCustomCss(this.shopDomain, css.shop.metafield.value);
+        const sanitized = sanitizeCustomCss(css.shop.metafield.value);
+        if (sanitized.ok) this.shopCustomCss = sanitized.css;
       }
+      await this.applyABVariants();
       this.renderBundles();
     } catch (err) {
       if (controller.signal.aborted) return;
@@ -508,6 +2737,40 @@ var LimeBundleElement = class extends HTMLElement {
       );
     }
   }
+  /**
+   * Resolve the visitor's A/B bucket for every bundle with an active test
+   * and merge Variant B overrides where applicable. Runs in parallel; any
+   * assignment failure logs internally but still renders Variant A (safe
+   * default). The `getABTestAssignment` helper also persists the bucket
+   * via a first-party cookie + POSTs to /api/ab-assign for server-side
+   * analytics.
+   */
+  async applyABVariants() {
+    if (!this.appUrl || this.bundles.length === 0) return;
+    const results = await Promise.all(
+      this.bundles.map(async (bundle) => {
+        if (!bundle.abTestId || !bundle.abVariantB) return bundle;
+        try {
+          const assignment = await getABTestAssignment(
+            this.appUrl,
+            this.shopDomain,
+            bundle.abTestId,
+            bundle.id
+          );
+          if (assignment?.variant === "B") {
+            return applyABVariantB(bundle);
+          }
+        } catch (err) {
+          console.warn(
+            `[lime-bundle] A/B assignment failed for bundle ${bundle.id}; falling back to Variant A.`,
+            err
+          );
+        }
+        return bundle;
+      })
+    );
+    this.bundles = results;
+  }
   async fetchSingleBundle(client, signal) {
     const data = await client.query(
       BUNDLE_METAOBJECT_QUERY,
@@ -652,29 +2915,41 @@ var LimeBundleElement = class extends HTMLElement {
   }
   renderBundles() {
     this.teardownImpressions();
+    this.teardownRenderers();
     this.shadow.innerHTML = "";
     const style = document.createElement("style");
-    style.textContent = WIDGET_STYLES;
+    style.textContent = [
+      BUNDLE_BASE_CSS,
+      BUNDLE_FIXED_CSS,
+      BUNDLE_MIX_MATCH_CSS,
+      BUNDLE_VOLUME_CSS
+    ].join("\n");
     this.shadow.appendChild(style);
+    if (this.shopCustomCss) {
+      const customStyle = document.createElement("style");
+      customStyle.setAttribute("data-lime-bundles", "shop-custom-css");
+      customStyle.textContent = this.shopCustomCss;
+      this.shadow.appendChild(customStyle);
+    }
     for (const bundle of this.bundles) {
       const container = document.createElement("div");
-      container.className = "lb-bundle";
+      container.className = "lb-bundle-widget";
       container.setAttribute("role", "region");
       container.setAttribute("aria-label", bundle.title);
+      container.setAttribute("data-bundle-type", bundle.bundleType);
+      container.setAttribute("data-bundle-gid", bundle.id);
+      applyWidgetConfigVars(container, bundle.widgetConfig);
       const dispatch = (lines) => this.handleAddToCart(bundle, lines);
+      const registerCleanup = (fn) => this.renderCleanups.push(fn);
       switch (bundle.bundleType) {
         case "fixed":
-          renderFixedBundle(container, bundle, dispatch);
+          renderFixedBundle(container, bundle, dispatch, registerCleanup);
           break;
         case "mix_match":
-          renderMixMatchBundle(
-            container,
-            bundle,
-            dispatch
-          );
+          renderMixMatchBundle(container, bundle, dispatch, registerCleanup);
           break;
         case "volume":
-          renderVolumeBundle(container, bundle, dispatch);
+          renderVolumeBundle(container, bundle, dispatch, registerCleanup);
           break;
       }
       this.shadow.appendChild(container);
@@ -711,10 +2986,40 @@ var LimeBundleElement = class extends HTMLElement {
   }
   renderLoading() {
     this.shadow.innerHTML = `
-      <style>${WIDGET_STYLES}</style>
-      <div class="lb-bundle lb-bundle--loading">
+      <style>${BUNDLE_BASE_CSS}</style>
+      <style>${BUNDLE_SKELETON_CSS}</style>
+      <div class="lb-bundle-widget lb-bundle-widget--loading" aria-busy="true" aria-label="Loading bundle">
         <div class="lb-skeleton lb-skeleton--title"></div>
-        <div class="lb-skeleton lb-skeleton--products"></div>
+        <div class="lb-skeleton--products">
+          <div class="lb-skeleton--row">
+            <div class="lb-skeleton lb-skeleton--thumb"></div>
+            <div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+            </div>
+            <div class="lb-skeleton lb-skeleton--price"></div>
+          </div>
+          <div class="lb-skeleton--row">
+            <div class="lb-skeleton lb-skeleton--thumb"></div>
+            <div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+            </div>
+            <div class="lb-skeleton lb-skeleton--price"></div>
+          </div>
+          <div class="lb-skeleton--row">
+            <div class="lb-skeleton lb-skeleton--thumb"></div>
+            <div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+              <div class="lb-skeleton lb-skeleton--line"></div>
+            </div>
+            <div class="lb-skeleton lb-skeleton--price"></div>
+          </div>
+        </div>
+        <div class="lb-skeleton--footer">
+          <div class="lb-skeleton lb-skeleton--total"></div>
+          <div class="lb-skeleton lb-skeleton--cta"></div>
+        </div>
       </div>
     `;
   }
@@ -728,9 +3033,6 @@ var LimeBundleElement = class extends HTMLElement {
       })
     );
   }
-  render() {
-    this.shadow.innerHTML = `<style>${WIDGET_STYLES}</style>`;
-  }
 };
 
 // src/index.ts