@kotao/storefront 0.2.1 → 0.2.3

package/dist/react.js

@@ -1,10 +1,12 @@
 import { getCartFormInput, createAnalyticsBus, createPixelTransport } from './chunk-XMTWFJCZ.js';
 export { useNonce } from './chunk-XMTWFJCZ.js';
+import { getPaginationInfo } from './chunk-5QOFKGKD.js';
+import { CART_FORM_ACTIONS, GRANTED_CONSENT, CONSENT_COOKIE, readConsentCookie, mergeConsent, buildConsentCookie } from './chunk-OGWYTYYS.js';
 import { getSeoMeta, serializeJsonLd } from './chunk-MYDKIJRH.js';
 export { REACT_SEAM_CART_DOCUMENTS, createStorefrontApiCartAdapter } from './chunk-2IWNUDSZ.js';
+export { StorefrontForm, StorefrontFormFields } from './chunk-VV653S52.js';
+import './chunk-IIOHENCG.js';
 import { buildImageAttrs } from './chunk-3YQXJNR7.js';
-import { getPaginationInfo } from './chunk-5QOFKGKD.js';
-import { CART_FORM_ACTIONS, GRANTED_CONSENT, CONSENT_COOKIE, readConsentCookie, mergeConsent, buildConsentCookie } from './chunk-OGWYTYYS.js';
 import { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext, useSyncExternalStore } from 'react';
 import { useFetcher } from 'react-router';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -437,6 +439,12 @@ function useGlobalThemeTokens() {
 
 // ../smart-cart/src/format.ts
 var formatMoney2 = (m) => {
+  if (m.currency === "EUR" && Number.isFinite(m.amount)) {
+    const negative = m.amount < 0;
+    const abs = Math.round(Math.abs(m.amount));
+    const units = Math.floor(abs / 100).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    return `${negative ? "-" : ""}\u20AC${units},${String(abs % 100).padStart(2, "0")}`;
+  }
   if (m.currency && /^[A-Za-z]{3}$/.test(m.currency)) {
     try {
       return new Intl.NumberFormat(void 0, {
@@ -448,6 +456,10 @@ var formatMoney2 = (m) => {
   }
   return new Intl.NumberFormat(void 0, { minimumFractionDigits: 2 }).format(m.amount / 100);
 };
+var formatMoneyCompact = (m) => {
+  const formatted = formatMoney2(m);
+  return Number.isFinite(m.amount) && Math.round(Math.abs(m.amount)) % 100 === 0 ? formatted.replace(/[.,]00(?=\D*$)/, "") : formatted;
+};
 var escapeHtml = (s) => String(s ?? "").replace(
   /[&<>"']/g,
   (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
@@ -456,7 +468,7 @@ var formatCountdown = (ms) => {
   const total = Number.isFinite(ms) && ms > 0 ? Math.floor(ms / 1e3) : 0;
   const minutes = Math.floor(total / 60);
   const seconds = total % 60;
-  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
 };
 
 // ../smart-cart/src/widgets/add-on.ts
@@ -478,10 +490,10 @@ function findAddOnLine(state, variantId) {
 var css = `
   .ksc-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
     gap: 2px 12px; padding: 14px 18px; border-top: 1px solid var(--ksc-border); font: inherit; color: var(--ksc-text); }
-  .ksc-addon__icon { grid-row: 1 / span 2; width: 34px; height: 34px; display: flex; align-items: center;
+  .ksc-addon__icon { grid-row: 1 / span 2; width: 44px; height: 44px; display: flex; align-items: center;
     justify-content: center; color: var(--ksc-accent); }
-  .ksc-addon__icon svg { width: 28px; height: 28px; }
-  .ksc-addon__img { grid-row: 1 / span 2; width: 34px; height: 34px; object-fit: cover; border-radius: 8px;
+  .ksc-addon__icon svg { width: 34px; height: 34px; }
+  .ksc-addon__img { grid-row: 1 / span 2; width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
     background: var(--ksc-border); }
   .ksc-addon__text { grid-column: 2; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
   .ksc-addon__title { font-size: .875rem; font-weight: 600; }
@@ -549,12 +561,11 @@ function readMessage(config) {
   return typeof raw === "string" && raw.trim() !== "" ? raw : null;
 }
 var css2 = `
-  .ksc-rt { display: flex; align-items: center; justify-content: center; gap: 6px;
-    padding: 10px 16px; font: inherit; font-size: 0.85rem; font-weight: 500;
-    color: color-mix(in oklab, var(--ksc-positive, #0e9f6e) 72%, var(--ksc-text, #111));
-    background: color-mix(in oklab, var(--ksc-positive, #0e9f6e) 13%, var(--ksc-surface, #fff)); }
-  .ksc-rt__count { font-variant-numeric: tabular-nums; font-weight: 700;
-    color: color-mix(in oklab, var(--ksc-positive, #0e9f6e) 85%, var(--ksc-text, #111)); }
+  .ksc-rt { display: flex; align-items: center; justify-content: center; gap: 4px;
+    padding: 9px 16px; font: inherit; font-size: 0.8125rem; font-weight: 400;
+    color: var(--ksc-text, #111);
+    background: rgb(215, 254, 218); }
+  .ksc-rt__count { font-variant-numeric: tabular-nums; font-weight: 700; }
   .ksc-rt__icon { font-size: 0.95em; line-height: 1; }
   @media (prefers-reduced-motion: reduce) { .ksc-rt { transition: none; } }
 `;
@@ -567,10 +578,10 @@ var reservationTimer = {
     if (minutes === null) return "";
     void readMode(config);
     const seed = formatCountdown(minutes * MS_PER_MINUTE);
-    const message = readMessage(config) ?? "Your cart is reserved for";
+    const message = readMessage(config) ?? "Your cart will expire in";
     return `<div class="ksc-rt">
       <span>${escapeHtml(message)}</span>
-      <span class="ksc-rt__count" data-ksc-countdown data-ksc-end-text="0:00">${seed}</span>
+      <span class="ksc-rt__count" data-ksc-countdown data-ksc-end-text="00:00">${seed}</span>
       <span class="ksc-rt__icon" aria-hidden="true">\u23F0</span>
     </div>`;
   }
@@ -591,78 +602,121 @@ function readVariantIds(config) {
   }
   return [...new Set(ids)];
 }
+function readTitle(config) {
+  const raw = config.title;
+  return typeof raw === "string" && raw.trim() !== "" ? raw : "You might also like";
+}
 function cartVariantIds(state) {
   if (state === null) return /* @__PURE__ */ new Set();
   const ids = /* @__PURE__ */ new Set();
   for (const line of state.lines) {
     const tag = line.attributes?.[UPSELL_VARIANT_ATTR];
     if (typeof tag === "string") ids.add(tag);
+    if (line.variantId !== null && line.variantId !== void 0) ids.add(String(line.variantId));
   }
   return ids;
 }
+var ARROW_LEFT_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>`;
+var ARROW_RIGHT_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>`;
 var css3 = `
-  .ksc-up { padding: 12px 16px; font: inherit; color: var(--ksc-text); }
-  .ksc-up__title { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 600;
-    text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in oklab, var(--ksc-text) 65%, transparent); }
+  .ksc-up { padding: 14px 6px 16px; font: inherit; color: var(--ksc-text); }
+  .ksc-up__title { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 700; text-align: center; }
+  .ksc-up__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 2px; }
+  .ksc-up__arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
+    padding: 0; border: none; background: none; cursor: pointer; color: rgb(52, 64, 84); border-radius: 8px; }
+  .ksc-up__arrow:hover { background: var(--ksc-border); }
+  .ksc-up__arrow svg { width: 18px; height: 18px; }
   .ksc-up__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; }
-  .ksc-up__card { scroll-snap-align: start; flex: 0 0 132px; display: flex; flex-direction: column;
-    gap: 6px; border: 1px solid color-mix(in oklab, var(--ksc-text) 12%, transparent);
-    border-radius: var(--ksc-radius); padding: 8px; background: var(--ksc-surface); }
-  .ksc-up__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(var(--ksc-radius) - 4px);
-    background: color-mix(in oklab, var(--ksc-text) 6%, transparent); }
-  .ksc-up__name { font-size: 0.8125rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical; overflow: hidden; }
-  .ksc-up__variant { font-size: 0.75rem; color: color-mix(in oklab, var(--ksc-text) 55%, transparent); }
-  .ksc-up__price { font-size: 0.8125rem; color: color-mix(in oklab, var(--ksc-text) 70%, transparent); }
-  .ksc-up__compare { color: color-mix(in oklab, var(--ksc-text) 45%, transparent); margin-right: 4px; }
-  .ksc-up__add { margin-top: auto; padding: 6px 8px; font: inherit; font-size: 0.8125rem; cursor: pointer;
-    border: none; border-radius: calc(var(--ksc-radius) - 4px); background: var(--ksc-accent);
-    color: var(--ksc-accent-text); transition: opacity .15s ease; }
+    scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+  .ksc-up__track::-webkit-scrollbar { display: none; }
+  .ksc-up__card { scroll-snap-align: start; flex: 0 0 100%; display: grid;
+    grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; align-items: start;
+    border-radius: 12px; padding: 12px; background: rgb(242, 244, 247); box-sizing: border-box; }
+  .ksc-up__img { grid-row: 1 / span 4; width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
+    background: var(--ksc-surface); }
+  .ksc-up__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; display: -webkit-box;
+    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .ksc-up__prices { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.875rem; }
+  .ksc-up__price { font-weight: 700; }
+  .ksc-up__compare { color: rgb(152, 162, 179); text-decoration: line-through; }
+  .ksc-up__save { font-size: 0.75rem; font-weight: 500; color: rgb(7, 148, 85);
+    background: rgb(220, 250, 230); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
+  .ksc-up__variant { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
+    font-size: 0.78rem; color: rgb(152, 162, 179); }
+  .ksc-up__select { font: inherit; font-size: 0.8125rem; color: var(--ksc-text); padding: 4px 24px 4px 10px;
+    border: 1px solid var(--ksc-border); border-radius: 8px; background-color: var(--ksc-surface); cursor: pointer;
+    appearance: none; -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 8px center; }
+  .ksc-up__add { justify-self: start; margin-top: 6px; padding: 8px 14px; font: inherit; font-size: 0.8125rem;
+    font-weight: 600; cursor: pointer; border: none; border-radius: 8px; background: rgb(7, 148, 85);
+    color: #fff; transition: opacity .15s ease; }
   .ksc-up__add:hover { opacity: 0.9; }
-  .ksc-up__add:focus-visible { outline: 2px solid var(--ksc-accent); outline-offset: 2px; }
+  .ksc-up__add:focus-visible { outline: 2px solid rgb(7, 148, 85); outline-offset: 2px; }
   @media (prefers-reduced-motion: reduce) { .ksc-up__track { scroll-behavior: auto; } .ksc-up__add { transition: none; } }
 `;
-function card(variant, currency) {
+function card(variant, currency, siblings) {
   const name = escapeHtml(variant.productTitle);
   const img = variant.imageUrl !== null ? `<img class="ksc-up__img" src="${escapeHtml(variant.imageUrl)}" alt="${escapeHtml(variant.imageAltText ?? "")}" loading="lazy" />` : `<div class="ksc-up__img" role="presentation"></div>`;
-  const variantTitle = variant.title !== null && variant.title.trim() !== "" && variant.title !== DEFAULT_VARIANT_TITLE ? `<span class="ksc-up__variant">${escapeHtml(variant.title)}</span>` : "";
   const price = escapeHtml(formatMoney2({ amount: variant.price.amount, currency }));
   const showCompare = variant.compareAtPrice !== null && variant.compareAtPrice.amount > variant.price.amount;
-  const priceHtml = showCompare ? `<span class="ksc-up__price"><s class="ksc-up__compare">${escapeHtml(formatMoney2({ amount: variant.compareAtPrice.amount, currency }))}</s>${price}</span>` : `<span class="ksc-up__price">${price}</span>`;
+  const compare = showCompare ? `<s class="ksc-up__compare">${escapeHtml(formatMoney2({ amount: variant.compareAtPrice.amount, currency }))}</s>` : "";
+  const savePct = showCompare ? Math.round(
+    (variant.compareAtPrice.amount - variant.price.amount) / variant.compareAtPrice.amount * 100
+  ) : 0;
+  const save = savePct > 0 ? `<span class="ksc-up__save">You save ${savePct}%</span>` : "";
+  const hasMeaningfulTitle = variant.title !== null && variant.title.trim() !== "" && variant.title !== DEFAULT_VARIANT_TITLE;
+  const variantHtml = siblings !== void 0 && siblings.length > 1 ? `<span class="ksc-up__variant"><span>Size:</span><select class="ksc-up__select" data-smart-cart-upsell-variant aria-label="Size">${siblings.map(
+    (v) => `<option value="${escapeHtml(v.id)}"${v.id === variant.id ? " selected" : ""}>${escapeHtml(v.title ?? "")}</option>`
+  ).join("")}</select></span>` : hasMeaningfulTitle ? `<span class="ksc-up__variant"><span>Size:</span><span>${escapeHtml(variant.title)}</span></span>` : "";
   return `<div class="ksc-up__card" role="listitem">
           ${img}
           <span class="ksc-up__name">${name}</span>
-          ${variantTitle}
-          ${priceHtml}
-          <button type="button" class="ksc-up__add" data-smart-cart-upsell-add data-variant-id="${escapeHtml(variant.id)}" aria-label="Add ${name} to cart">Add</button>
+          <span class="ksc-up__prices"><span class="ksc-up__price">${price}</span>${compare}${save}</span>
+          ${variantHtml}
+          <button type="button" class="ksc-up__add" data-smart-cart-upsell-add data-variant-id="${escapeHtml(variant.id)}" aria-label="Add ${name} to cart">Add to cart</button>
         </div>`;
 }
 var upsellCarousel = {
   key: UPSELL_KEY,
   zone: "after-items",
   css: css3,
-  render({ config, state, variants }) {
+  render({ config, state, variants, productVariants }) {
     if (variants === void 0 || variants.size === 0) return "";
     const inCart = cartVariantIds(state);
-    const cards = readVariantIds(config).filter((id) => !inCart.has(id)).map((id) => variants.get(id)).filter((variant) => variant !== void 0).map((variant) => card(variant, state?.currency ?? variant.price.currency)).join("");
+    const cards = readVariantIds(config).filter((id) => !inCart.has(id)).map((id) => variants.get(id)).filter((variant) => variant !== void 0).map(
+      (variant) => card(
+        variant,
+        state?.currency ?? variant.price.currency,
+        variant.productHandle !== null ? productVariants?.get(variant.productHandle) : void 0
+      )
+    ).join("");
     if (cards === "") return "";
     return `<section class="ksc-up" aria-label="Recommended add-ons">
-      <p class="ksc-up__title">You might also like</p>
-      <div class="ksc-up__track" role="list">${cards}</div>
+      <p class="ksc-up__title">${escapeHtml(readTitle(config))}</p>
+      <div class="ksc-up__row">
+        <button type="button" class="ksc-up__arrow" data-smart-cart-upsell-prev aria-label="Previous item">${ARROW_LEFT_SVG}</button>
+        <div class="ksc-up__track" role="list">${cards}</div>
+        <button type="button" class="ksc-up__arrow" data-smart-cart-upsell-next aria-label="Next item">${ARROW_RIGHT_SVG}</button>
+      </div>
     </section>`;
   }
 };
 
 // ../smart-cart/src/widgets/discount-code.ts
 var css4 = `
-  .ksc-discount { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
-  .ksc-discount__row { display: flex; gap: 8px; }
-  .ksc-discount__input { flex: 1; padding: 8px 10px; border: 1.5px solid color-mix(in oklab, var(--ksc-text) 25%, transparent); border-radius: calc(var(--ksc-radius) / 2); background: none; color: var(--ksc-text); font: inherit; font-size: 0.875rem; outline: none; }
-  .ksc-discount__input:focus { border-color: var(--ksc-accent); }
-  .ksc-discount__apply { padding: 8px 14px; border: none; border-radius: calc(var(--ksc-radius) / 2); background: var(--ksc-accent); color: var(--ksc-accent-text); font: inherit; font-size: 0.875rem; cursor: pointer; white-space: nowrap; }
+  .ksc-discount { padding: 10px 20px; display: flex; flex-direction: column; gap: 8px; }
+  .ksc-discount__row { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px;
+    border: 1px solid rgb(190, 190, 190); border-radius: 10px; background: var(--ksc-surface); }
+  .ksc-discount__row:focus-within { border-color: var(--ksc-text); }
+  .ksc-discount__input { flex: 1; min-width: 0; padding: 6px 0; border: none; background: none;
+    color: var(--ksc-text); font: inherit; font-size: 0.875rem; outline: none; }
+  .ksc-discount__apply { padding: 8px 16px; border: none; border-radius: 8px;
+    background: rgb(220, 250, 230); color: var(--ksc-text); font: inherit; font-size: 0.875rem;
+    font-weight: 500; cursor: pointer; white-space: nowrap; }
+  .ksc-discount__apply:hover { filter: brightness(0.97); }
   .ksc-discount__chips { display: flex; flex-wrap: wrap; gap: 6px; }
-  .ksc-discount__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 10px; background: color-mix(in oklab, var(--ksc-accent) 12%, transparent); border-radius: 999px; font-size: 0.8125rem; color: var(--ksc-text); }
+  .ksc-discount__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 10px; background: rgb(242, 244, 247); border-radius: 999px; font-size: 0.8125rem; color: var(--ksc-text); }
   .ksc-discount__chip-remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 2px; color: color-mix(in oklab, var(--ksc-text) 60%, transparent); line-height: 1; font-size: 1rem; }
   .ksc-discount__chip-remove:hover { color: var(--ksc-text); }
 `;
@@ -695,11 +749,26 @@ function readMessage2(config, key) {
   const raw = config[key];
   return typeof raw === "string" && raw.trim() !== "" ? raw : null;
 }
+function renderTemplate(template, amount) {
+  return template.split(/\{amount\}/g).map((part) => escapeHtml(part)).join(`<b>${escapeHtml(amount)}</b>`);
+}
+var TRUCK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 5h14v11H1zM15 9h4l3 3v4h-7z"/><circle cx="6" cy="18.5" r="1.8"/><circle cx="18" cy="18.5" r="1.8"/></svg>`;
 var css5 = `
-  .ksc-fsb { padding: 12px 16px; font: inherit; color: var(--ksc-text); }
-  .ksc-fsb__msg { margin: 0 0 8px; font-size: 0.875rem; }
-  .ksc-fsb__track { height: 6px; border-radius: var(--ksc-radius); background: color-mix(in oklab, var(--ksc-text) 12%, transparent); overflow: hidden; }
-  .ksc-fsb__fill { height: 100%; background: var(--ksc-accent); transition: width .3s ease; }
+  .ksc-fsb { padding: 14px 20px 10px; font: inherit; color: var(--ksc-text); }
+  .ksc-fsb__msg { margin: 0 0 10px; font-size: 0.8125rem; text-align: center; }
+  .ksc-fsb__msg b { font-weight: 700; }
+  .ksc-fsb__track { position: relative; height: 8px; border-radius: 999px;
+    background: rgb(234, 236, 240); }
+  .ksc-fsb__fill { height: 100%; border-radius: 999px; background: rgb(29, 41, 57);
+    transition: width .3s ease; }
+  .ksc-fsb__step { position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
+    width: 14px; height: 14px; border-radius: 4px; border: 2px solid rgb(29, 41, 57);
+    background: var(--ksc-surface); box-sizing: border-box; }
+  .ksc-fsb--unlocked .ksc-fsb__step { background: rgb(29, 41, 57); }
+  .ksc-fsb__tier { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
+    margin-top: 6px; font-size: 0.78rem; color: rgb(152, 162, 179); }
+  .ksc-fsb__tier svg { width: 20px; height: 20px; }
+  .ksc-fsb--unlocked .ksc-fsb__tier { color: rgb(29, 41, 57); }
   @media (prefers-reduced-motion: reduce) { .ksc-fsb__fill { transition: none; } }
 `;
 var freeShippingBar = {
@@ -709,20 +778,22 @@ var freeShippingBar = {
   render({ config, state }) {
     const threshold = readThreshold(config);
     if (threshold === null || state === null) return "";
-    const subtotal = state.subtotal.amount;
+    const discountTotal = state.discountTotal?.amount ?? 0;
+    const subtotal = Math.max(0, state.subtotal.amount - discountTotal);
     const remaining = Math.max(0, threshold - subtotal);
     const unlocked = remaining === 0;
     const pct = Math.min(100, Math.round(subtotal / threshold * 100));
-    const remainingMoney = formatMoney2({ amount: remaining, currency: state.subtotal.currency });
+    const remainingMoney = formatMoneyCompact({
+      amount: remaining,
+      currency: state.subtotal.currency
+    });
     const beforeTemplate = readMessage2(config, "messageBefore");
     const afterTemplate = readMessage2(config, "messageAfter");
-    const message = unlocked ? afterTemplate ?? "You've unlocked free shipping!" : (beforeTemplate ?? "You're {amount} away from free shipping").replace(
-      /\{amount\}/g,
-      remainingMoney
-    );
-    return `<div class="ksc-fsb">
-      <p class="ksc-fsb__msg">${escapeHtml(message)}</p>
-      <div class="ksc-fsb__track"><div class="ksc-fsb__fill" style="width: ${pct}%"></div></div>
+    const message = unlocked ? afterTemplate !== null ? renderTemplate(afterTemplate, remainingMoney) : `<b>Free shipping</b> unlocked!` : beforeTemplate !== null ? renderTemplate(beforeTemplate, remainingMoney) : `Add <b>${escapeHtml(remainingMoney)}</b> to unlock <b>Free shipping</b>!`;
+    return `<div class="ksc-fsb${unlocked ? " ksc-fsb--unlocked" : ""}">
+      <p class="ksc-fsb__msg">${message}</p>
+      <div class="ksc-fsb__track"><div class="ksc-fsb__fill" style="width: ${pct}%"></div><span class="ksc-fsb__step" aria-hidden="true"></span></div>
+      <div class="ksc-fsb__tier">${TRUCK_SVG}<span>${unlocked ? "" : "\u{1F512} "}Free shipping</span></div>
     </div>`;
   }
 };
@@ -889,6 +960,23 @@ var PAYMENT_ICON_SVGS = {
 		<path d="M228.897012,82.7490197 C216.569147,146.069792 174.366398,167.970272 120.46841,167.970272 L93.0241367,167.970272 C86.4398419,167.970272 80.8794007,172.764903 79.8555471,179.265958 L61.8174095,293.621258 C61.1431644,297.883153 64.4394738,301.745495 68.7513129,301.745495 L117.421821,301.745495 C123.182038,301.745495 128.084882,297.550192 128.983876,291.864891 L129.458344,289.384335 L138.631407,231.249423 L139.222412,228.036354 C140.121406,222.351053 145.02425,218.15575 150.784467,218.15575 L158.067979,218.15575 C205.215193,218.15575 242.132193,199.002194 252.920115,143.605884 C257.423406,120.456802 255.092683,101.128442 243.181019,87.5519756 C239.568397,83.4399129 235.081754,80.0437153 229.854273,77.2718188 C229.571257,79.0614817 229.263268,80.8761167 228.897012,82.7490197 L228.897012,82.7490197 Z" fill="#2790C3"></path>
 		<path d="M216.952052,72.1275783 C215.070825,71.5781934 213.13133,71.0787526 211.133566,70.6375799 C209.135803,70.1964071 207.071448,69.8051785 204.957148,69.4638939 C197.548776,68.265236 189.457835,67.699203 180.767565,67.699203 L107.457976,67.699203 C105.651665,67.699203 103.936919,68.1070797 102.4053,68.8479169 C99.0174265,70.4710996 96.5118984,73.6675208 95.8959214,77.5881313 L80.3133678,176.385849 L79.8638711,179.265958 C80.8877248,172.764903 86.4481659,167.970272 93.0324607,167.970272 L120.476734,167.970272 C174.374722,167.970272 216.577471,146.078116 228.905336,82.7490197 C229.271592,80.8761167 229.579581,79.0614817 229.862597,77.2718188 C226.741092,75.623664 223.361542,74.2002577 219.723948,72.9932757 C218.816631,72.6936112 217.892665,72.4022708 216.952052,72.1275783" fill="#1F264F"></path>
 	</g>
+</svg>`,
+  "apple-pay": `<svg width="512px" height="211px" viewBox="0 0 512 211" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M93.5520633,27.1031049 C87.5513758,34.2039183 77.9502759,39.8045599 68.349176,39.0044683 C67.1490386,29.4033684 71.849577,19.2021998 77.3502072,12.901478 C83.3508946,5.6006416 93.8520976,0.400045829 102.353071,0 C103.353186,10.0011457 99.4527392,19.8022685 93.5520633,27.1031049 Z M102.25306,40.904686 C88.3514675,40.1045943 76.4501041,48.8055911 69.8493479,48.8055911 C63.1485803,48.8055911 53.0474231,41.3047318 42.0461628,41.5047547 C27.7445244,41.7047776 14.4430006,49.8057057 7.14216427,62.7071836 C-7.8595543,88.5101396 3.24171744,126.714516 17.7433787,147.716922 C24.8441922,158.118114 33.345166,169.51942 44.5464492,169.119374 C55.1476637,168.719328 59.3481449,162.218584 72.1496114,162.218584 C85.0510894,162.218584 88.7515133,169.119374 99.9527965,168.919351 C111.554126,168.719328 118.854962,158.51816 125.955775,148.116968 C134.056703,136.315616 137.357081,124.814299 137.557104,124.21423 C137.357081,124.014207 115.154538,115.513233 114.954515,89.9103 C114.754492,68.5078482 132.45652,58.3066795 133.256612,57.7066108 C123.255466,42.9049151 107.653679,41.3047318 102.25306,40.904686 Z M182.56226,11.9013634 L182.56226,167.819225 L206.765033,167.819225 L206.765033,114.513118 L240.268871,114.513118 C270.872377,114.513118 292.37484,93.5107124 292.37484,63.1072295 C292.37484,32.7037465 271.272423,11.9013634 241.068963,11.9013634 L182.56226,11.9013634 Z M206.765033,32.3037007 L234.668229,32.3037007 C255.670635,32.3037007 267.67201,43.5049839 267.67201,63.2072409 C267.67201,82.909498 255.670635,94.2107926 234.568218,94.2107926 L206.765033,94.2107926 L206.765033,32.3037007 Z M336.579904,169.019363 C351.781646,169.019363 365.883261,161.31848 372.283994,149.117083 L372.784052,149.117083 L372.784052,167.819225 L395.186618,167.819225 L395.186618,90.2103344 C395.186618,67.7077565 377.184556,53.2060952 349.481382,53.2060952 C323.778438,53.2060952 304.776261,67.9077794 304.076181,88.1100938 L325.878678,88.1100938 C327.678884,78.5089939 336.579904,72.2082721 348.781302,72.2082721 C363.582998,72.2082721 371.883949,79.1090626 371.883949,91.8105177 L371.883949,100.411503 L341.680488,102.211709 C313.577269,103.911904 298.375528,115.413222 298.375528,135.415513 C298.375528,155.617827 314.077326,169.019363 336.579904,169.019363 Z M343.080649,150.517243 C330.179171,150.517243 321.978231,144.316533 321.978231,134.815444 C321.978231,125.014321 329.879137,119.313668 344.980867,118.413565 L371.883949,116.713371 L371.883949,125.514379 C371.883949,140.116051 359.482528,150.517243 343.080649,150.517243 Z M425.090044,210.224083 C448.692748,210.224083 459.794019,201.223052 469.495131,173.919924 L512,54.7062671 L487.397182,54.7062671 L458.893916,146.816819 L458.393859,146.816819 L429.890594,54.7062671 L404.587695,54.7062671 L445.592392,168.219271 L443.39214,175.120061 C439.691716,186.821402 433.691029,191.321918 422.989803,191.321918 C421.089585,191.321918 417.389162,191.121895 415.88899,190.921872 L415.88899,209.624014 C417.28915,210.02406 423.289838,210.224083 425.090044,210.224083 Z" fill="#000000"></path>
+    </g>
+</svg>`,
+  "google-pay": `<svg width="512px" height="204px" viewBox="0 0 512 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Google Pay</title>
+    <g>
+        <path d="M362.926585,55.0572275 C377.002187,55.0572275 387.878788,58.8960279 396.196189,66.5736286 C404.51359,74.2512294 408.35239,84.4880304 408.35239,97.2840316 L408.35239,158.704838 L390.437988,158.704838 L390.437988,144.629236 L389.798188,144.629236 C382.120587,156.145637 371.243986,161.903838 358.447985,161.903838 C347.571384,161.903838 337.974383,158.704838 330.296782,152.306837 C323.258982,145.908836 318.780381,136.951636 318.780381,127.354635 C318.780381,117.117834 322.619182,108.800433 330.296782,102.402432 C337.974383,96.0044315 348.850984,93.4452313 361.646985,93.4452313 C373.163386,93.4452313 382.120587,95.3646315 389.158388,99.8432319 L389.158388,95.3646315 C389.158388,89.3931642 386.92904,83.421697 382.470345,79.5309543 L381.480787,78.7298298 C376.362387,74.2512294 369.964386,71.6920291 362.926585,71.6920291 C352.049984,71.6920291 343.732584,76.1706296 337.974383,85.1278305 L321.339581,74.8910295 C331.576382,61.4552281 345.012184,55.0572275 362.926585,55.0572275 Z M272.714777,11.5508233 C284.195633,11.5508233 295.105804,15.5456243 303.828346,22.9962452 L305.34458,24.3468245 C314.301781,32.0244253 318.780381,43.5408264 318.780381,55.6970276 C318.780381,67.8532288 314.301781,78.7298298 305.34458,87.0472306 C296.387379,95.3646315 285.510778,99.8432319 272.714777,99.8432319 L242.004374,99.2034318 L242.004374,158.704838 L222.810372,158.704838 L222.810372,11.5508233 L272.714777,11.5508233 Z M365.485786,108.800433 C357.808185,108.800433 351.410184,110.719833 346.291784,114.558633 C341.173383,117.757634 338.614183,122.236234 338.614183,127.994435 C338.614183,133.112835 341.173383,137.591436 345.012184,140.150636 C349.490784,143.349636 354.609185,145.269036 359.727585,145.269036 C366.893346,145.269036 374.059107,142.482352 379.664324,137.429163 L380.840987,136.311835 C387.238988,130.553635 390.437988,123.515834 390.437988,115.838233 C384.679788,111.359633 376.362387,108.800433 365.485786,108.800433 Z M273.994377,29.465225 L242.004374,29.465225 L242.004374,80.64923 L273.994377,80.64923 C281.032177,80.64923 288.069978,78.0900298 292.548579,72.9716293 C302.78538,63.3746283 302.78538,47.3796268 293.188379,37.7826258 L292.548579,37.1428258 C287.430178,32.0244253 281.032177,28.825425 273.994377,29.465225 Z M512,58.2562278 L448.659794,203.490842 L429.465792,203.490842 L453.138394,152.946637 L411.55139,58.8960279 L432.024992,58.8960279 L462.095595,131.193435 L462.735395,131.193435 L492.166198,58.8960279 L512,58.8960279 L512,58.2562278 Z" fill="#5F6368"></path>
+        <g>
+            <path d="M165.868166,86.4074306 C165.868166,80.64923 165.228366,74.8910295 164.588566,69.1328289 L84.6135583,69.1328289 L84.6135583,101.762632 L130.039363,101.762632 C128.119963,111.999433 122.361762,121.596434 113.404561,127.354635 L113.404561,148.468037 L140.915964,148.468037 C156.910965,133.752635 165.868166,111.999433 165.868166,86.4074306 Z" fill="#4285F4"></path>
+            <path d="M84.6135583,168.941639 C107.646361,168.941639 126.840362,161.264038 140.915964,148.468037 L113.404561,127.354635 C105.72696,132.473035 96.1299594,135.672035 84.6135583,135.672035 C62.8603561,135.672035 43.6663543,120.956634 37.2683536,100.483032 L9.11715089,100.483032 L9.11715089,122.236234 C23.8325523,151.027237 52.6235551,168.941639 84.6135583,168.941639 Z" fill="#34A853"></path>
+            <path d="M37.2683536,100.483032 C33.4295533,90.246231 33.4295533,78.7298298 37.2683536,67.8532288 L37.2683536,46.1000266 L9.11715089,46.1000266 C-3.0390503,69.772629 -3.0390503,97.9238317 9.11715089,122.236234 L37.2683536,100.483032 Z" fill="#FBBC04"></path>
+            <path d="M84.6135583,33.3040254 C96.7697595,33.3040254 108.286161,37.7826258 117.243361,46.1000266 L117.243361,46.1000266 L141.555764,21.7876243 C126.200562,7.71202289 105.72696,-0.60537792 85.2533583,0.0344221425 C53.2633552,0.0344221425 23.8325523,17.9488239 9.75695095,46.7398267 L37.9081537,68.4930288 C43.6663543,48.0194268 62.8603561,33.3040254 84.6135583,33.3040254 Z" fill="#EA4335"></path>
+        </g>
+    </g>
 </svg>`
 };
 
@@ -909,10 +997,11 @@ function readBadges(config) {
   return valid.length > 0 ? valid : null;
 }
 var css7 = `
-  .ksc-tb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
+  .ksc-tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
     padding: 10px 16px 4px; }
-  .ksc-tb__icon { display: flex; align-items: center; height: 22px; width: auto; }
-  .ksc-tb__icon svg { height: 22px; width: auto; display: block; }
+  .ksc-tb__icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 26px;
+    border: 1px solid rgb(234, 236, 240); border-radius: 5px; background: #fff; box-sizing: border-box; }
+  .ksc-tb__icon svg { max-height: 15px; max-width: 28px; width: auto; height: auto; display: block; }
 `;
 var trustBadges = {
   key: "trustBadges",
@@ -960,7 +1049,7 @@ var STYLES2 = `
     --ksc-border: color-mix(in oklab, var(--ksc-text) 12%, transparent); }
   .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0;
     transition: opacity .25s ease; }
-  .panel { position: absolute; top: 0; right: 0; height: 100%; width: min(480px, 100vw);
+  .panel { position: absolute; top: 0; right: 0; height: 100%; width: min(520px, 100vw);
     background: var(--ksc-surface); color: var(--ksc-text); font-family: var(--ksc-font);
     transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column;
     box-shadow: -8px 0 40px rgba(0,0,0,.14); }
@@ -969,12 +1058,13 @@ var STYLES2 = `
   :host(:not([open])) { pointer-events: none; }
   :host([open]) { pointer-events: auto; }
 
-  /* Header */
-  .ksc-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
-    padding: 16px 18px; border-bottom: 1px solid var(--ksc-border); }
-  .ksc-head__title { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
-  .ksc-head__count { color: var(--ksc-muted); font-weight: 500; font-size: .95rem; }
-  .ksc-head__close { margin-left: auto; display: flex; align-items: center; justify-content: center;
+  /* Header \u2014 centered "My cart \xB7 N" with the close control pinned right (original cart layout). */
+  .ksc-head { position: relative; display: flex; align-items: center; justify-content: center;
+    gap: 6px; flex: 0 0 auto; padding: 16px 52px; }
+  .ksc-head__title { font-size: 1.125rem; font-weight: 600; letter-spacing: .01em; }
+  .ksc-head__count { font-weight: 600; font-size: 1.125rem; }
+  .ksc-head__close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
+    display: flex; align-items: center; justify-content: center;
     width: 32px; height: 32px; padding: 0; border: none; background: none; cursor: pointer;
     color: var(--ksc-text); border-radius: 8px; }
   .ksc-head__close:hover { background: var(--ksc-border); }
@@ -986,63 +1076,66 @@ var STYLES2 = `
     gap: 14px; padding: 56px 24px; text-align: center; color: var(--ksc-muted); }
   .ksc-empty svg { width: 44px; height: 44px; opacity: .5; }
   .ksc-empty p { margin: 0; font-size: .95rem; }
-  .ksc-line { display: grid; grid-template-columns: 64px 1fr; gap: 14px;
-    padding: 16px 18px; border-bottom: 1px solid var(--ksc-border); }
-  .ksc-line__img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
+  .ksc-line { display: grid; grid-template-columns: 80px 1fr; gap: 14px;
+    padding: 14px 20px; }
+  .ksc-line + .ksc-line { border-top: 1px solid var(--ksc-border); }
+  .ksc-line__img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px;
     background: var(--ksc-border); }
   .ksc-line__img--ph { display: block; }
-  .ksc-line__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
-  .ksc-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
-  .ksc-line__title { font-size: .875rem; font-weight: 600; line-height: 1.3; }
-  .ksc-line__compare { color: var(--ksc-muted); text-decoration: line-through;
-    font-size: .8125rem; white-space: nowrap; padding-top: 1px; }
-  .ksc-line__meta { display: flex; flex-direction: column; gap: 1px; }
-  .ksc-line__opt { font-size: .78rem; color: var(--ksc-muted); line-height: 1.35;
+  .ksc-line__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+  .ksc-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+  .ksc-line__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+  .ksc-line__title { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
+  .ksc-line__compare { color: rgb(152, 162, 179); text-decoration: line-through;
+    font-size: .875rem; white-space: nowrap; }
+  .ksc-line__meta { display: flex; flex-direction: column; gap: 3px; }
+  .ksc-line__opt { font-size: .8125rem; color: rgb(152, 162, 179); line-height: 1.35;
     overflow: hidden; text-overflow: ellipsis; }
-  .ksc-line__opt b { font-weight: 500; color: color-mix(in oklab, var(--ksc-text) 78%, transparent); }
-  .ksc-line__variant { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ksc-muted); }
-  .ksc-line__discount { font-size: .78rem; font-weight: 500; color: var(--ksc-positive); line-height: 1.35; }
-  .ksc-line__discount s { color: var(--ksc-muted); text-decoration: line-through; }
-  .ksc-line__select { font: inherit; font-size: .78rem; color: var(--ksc-text); padding: 3px 22px 3px 8px;
+  .ksc-line__opt b { font-weight: 700; color: var(--ksc-text); }
+  .ksc-line__variant { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
+    font-size: .8125rem; color: rgb(152, 162, 179); }
+  .ksc-line__discount { font-size: .8125rem; font-weight: 500; color: var(--ksc-positive); line-height: 1.35; }
+  .ksc-line__discount s { color: rgb(152, 162, 179); text-decoration: line-through; }
+  .ksc-line__select { font: inherit; font-size: .8125rem; color: var(--ksc-text); padding: 4px 24px 4px 10px;
     border: 1px solid var(--ksc-border); border-radius: 8px; background: var(--ksc-surface); cursor: pointer;
     appearance: none; -webkit-appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
     background-repeat: no-repeat; background-position: right 8px center; }
   .ksc-line__select:focus { outline: none; border-color: var(--ksc-accent); }
   .ksc-line__bottom { display: flex; align-items: center; justify-content: space-between;
-    gap: 10px; margin-top: 5px; }
+    gap: 10px; margin-top: 4px; }
   .ksc-qty { display: inline-flex; align-items: center; border: 1px solid var(--ksc-border);
-    border-radius: 999px; }
-  .ksc-qty button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
+    border-radius: 8px; }
+  .ksc-qty button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
     padding: 0; border: none; background: none; cursor: pointer; color: var(--ksc-text);
-    font-size: 16px; line-height: 1; border-radius: 999px; }
+    font-size: 16px; line-height: 1; border-radius: 8px; }
   .ksc-qty button:hover { background: var(--ksc-border); }
-  .ksc-qty__n { min-width: 22px; text-align: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
-  .ksc-line__end { display: flex; align-items: center; gap: 8px; }
-  .ksc-line__prices { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
-  .ksc-line__price { font-size: .875rem; font-weight: 600; }
-  .ksc-line__save { font-size: .68rem; font-weight: 600; color: var(--ksc-positive); white-space: nowrap;
-    background: color-mix(in oklab, var(--ksc-positive) 14%, transparent); padding: 1px 6px; border-radius: 999px; }
-  .ksc-line__remove { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
+  .ksc-qty__n { min-width: 26px; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; }
+  .ksc-line__prices { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
+  .ksc-line__price { font-size: .9375rem; font-weight: 700; }
+  .ksc-line__save { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem;
+    font-weight: 500; color: rgb(7, 148, 85); white-space: nowrap;
+    background: rgb(220, 250, 230); padding: 3px 8px; border-radius: 6px; }
+  .ksc-line__save svg { width: 12px; height: 12px; }
+  .ksc-line__remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
     padding: 0; border: none; background: none; cursor: pointer; color: var(--ksc-muted); border-radius: 8px; }
   .ksc-line__remove:hover { color: var(--ksc-text); background: var(--ksc-border); }
-  .ksc-line__remove svg { width: 15px; height: 15px; }
+  .ksc-line__remove svg { width: 17px; height: 17px; }
 
   /* Footer / summary / checkout */
   .footer { flex: 0 0 auto; border-top: 1px solid var(--ksc-border); }
-  .ksc-summary { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 2px; }
+  .ksc-summary { display: flex; flex-direction: column; gap: 6px; padding: 12px 20px 2px; }
   .ksc-summary__row { display: flex; align-items: center; justify-content: space-between;
-    font-size: .8125rem; color: var(--ksc-muted); }
-  .ksc-summary__row--discount { color: var(--ksc-positive); font-weight: 500; }
-  .ksc-summary__row--total { font-size: .95rem; font-weight: 600; color: var(--ksc-text); padding-top: 3px; }
-  .checkout { display: block; text-align: center; margin: 8px 18px 0; padding: 15px;
+    font-size: .875rem; color: rgb(71, 84, 103); }
+  .ksc-summary__row--total { font-size: 1rem; font-weight: 700; color: var(--ksc-text); }
+  .checkout { display: block; text-align: center; margin: 10px 20px 0; padding: 16px;
     background: var(--ksc-accent); color: var(--ksc-accent-text); text-decoration: none;
-    border-radius: var(--ksc-radius); font-weight: 600; font-size: .95rem; }
+    border-radius: 10px; font-weight: 700; font-size: 1rem; }
   .checkout:hover { opacity: .92; }
   .ksc-continue { display: block; width: 100%; padding: 8px 18px 16px; text-align: center;
-    border: none; background: none; cursor: pointer; color: var(--ksc-muted); font: inherit;
-    font-size: .8125rem; text-decoration: underline; text-underline-offset: 2px; }
-  .ksc-continue:hover { color: var(--ksc-text); }
+    border: none; background: none; cursor: pointer; color: var(--ksc-text); font: inherit;
+    font-size: .875rem; font-weight: 700; }
+  .ksc-continue:hover { opacity: .7; }
 
   @media (prefers-reduced-motion: reduce) { .overlay, .panel { transition: none; } }
   .chrome { position: absolute; inset: 0; pointer-events: none; }
@@ -1052,6 +1145,7 @@ var STYLES2 = `
 var CLOSE_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>`;
 var TRASH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13"/></svg>`;
 var BAG_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h12l1 12H5L6 8zM9 8a3 3 0 0 1 6 0"/></svg>`;
+var TAG_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13l-7 7-9-9V4h7l9 9z"/><circle cx="7.5" cy="7.5" r="1" fill="currentColor"/></svg>`;
 var Base = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
 var SmartCartElement = class _SmartCartElement extends Base {
@@ -1145,6 +1239,13 @@ var SmartCartElement = class _SmartCartElement extends Base {
       }
       const upsellBtn = target?.closest("[data-smart-cart-upsell-add]");
       if (upsellBtn) void this.#onUpsellAdd(upsellBtn);
+      const upsellNav = target?.closest(
+        "[data-smart-cart-upsell-prev], [data-smart-cart-upsell-next]"
+      );
+      if (upsellNav) {
+        this.#onUpsellNav(upsellNav);
+        return;
+      }
       const discountApply = target?.closest("[data-smart-cart-discount-apply]");
       if (discountApply) {
         void this.#onDiscountApply(discountApply);
@@ -1155,7 +1256,12 @@ var SmartCartElement = class _SmartCartElement extends Base {
     });
     this.#root.querySelector(".panel")?.addEventListener("change", (e) => {
       const select = e.target?.closest("[data-smart-cart-variant]");
-      if (select) void this.#onVariantSelect(select);
+      if (select) {
+        void this.#onVariantSelect(select);
+        return;
+      }
+      const upsellSelect = e.target?.closest("[data-smart-cart-upsell-variant]");
+      if (upsellSelect) this.#onUpsellVariantSelect(upsellSelect);
     });
   }
   connectedCallback() {
@@ -1200,8 +1306,7 @@ var SmartCartElement = class _SmartCartElement extends Base {
       this.#renderCart(state);
       this.#renderChrome(state);
     }
-    void this.#resolveUpsellVariants();
-    void this.#resolveProductVariants();
+    void this.#resolveUpsellVariants().then(() => this.#resolveProductVariants());
   }
   /** Add a line (from a theme add-to-cart submit intercepted by mountSmartCart) and open the drawer on
    *  the result. Opens first for instant feedback, then adds and reconciles against the server cart.
@@ -1223,8 +1328,9 @@ var SmartCartElement = class _SmartCartElement extends Base {
     }
   }
   /** Lazily fetch sibling variants for every cart line that has a product handle and a real variant
-   *  title (single-variant lines have none → no switcher). Caches per handle, never re-fetches, and
-   *  re-renders the cart once new variants land so the `<select>`s appear. Fail-closed per the lookup. */
+   *  title (single-variant lines have none → no switcher), plus every resolved upsell/add-on
+   *  product (the upsell card's size select). Caches per handle, never re-fetches, and re-renders
+   *  the cart once new variants land so the `<select>`s appear. Fail-closed per the lookup. */
   async #resolveProductVariants() {
     const lookup = this.#variantLookup;
     if (!lookup?.fetchProductVariants || this.#lastState === null) return;
@@ -1235,6 +1341,12 @@ var SmartCartElement = class _SmartCartElement extends Base {
         handles.add(handle);
       }
     }
+    for (const variant of this.#upsellVariants?.values() ?? []) {
+      const handle = variant.productHandle;
+      if (handle !== null && handle.length > 0 && !this.#productVariants.has(handle) && !this.#productVariantsFetching.has(handle)) {
+        handles.add(handle);
+      }
+    }
     if (handles.size === 0) return;
     await Promise.all(
       [...handles].map(async (handle) => {
@@ -1379,6 +1491,20 @@ var SmartCartElement = class _SmartCartElement extends Base {
       this.#addOnPending = false;
     }
   }
+  /** Scroll the upsell track one card left/right (the arrows sit outside the track). */
+  #onUpsellNav(btn) {
+    const track = btn.closest(".ksc-up")?.querySelector(".ksc-up__track");
+    if (!track) return;
+    const direction = btn.hasAttribute("data-smart-cart-upsell-prev") ? -1 : 1;
+    track.scrollBy({ left: direction * track.clientWidth, behavior: "smooth" });
+  }
+  /** Retarget an upsell card's add button when the shopper picks a different size — the select
+   *  carries no other intent (no re-render, no network). */
+  #onUpsellVariantSelect(select) {
+    if (!(select instanceof HTMLSelectElement)) return;
+    const addBtn = select.closest(".ksc-up__card")?.querySelector("[data-smart-cart-upsell-add]");
+    if (addBtn && select.value) addBtn.setAttribute("data-variant-id", select.value);
+  }
   async #onUpsellAdd(btn) {
     if (!this.#adapter || this.#upsellPending) return;
     const variantId = btn.getAttribute("data-variant-id");
@@ -1554,7 +1680,8 @@ ${css8}`);
           config: cfg,
           state,
           formatMoney: formatMoney2,
-          ...this.#upsellVariants !== null && { variants: this.#upsellVariants }
+          ...this.#upsellVariants !== null && { variants: this.#upsellVariants },
+          ...this.#productVariants.size > 0 && { productVariants: this.#productVariants }
         });
       } catch (err) {
         console.error(`[kotao-smart-cart] widget render failed`, widget.key, err);
@@ -1612,33 +1739,34 @@ ${css8}`);
     const hasSwitcher = variants !== void 0 && variants.length > 1;
     const optName = l.options?.[0]?.name ?? "";
     const propLines = (l.properties ?? []).map(
-      (p) => `<span class="ksc-line__opt"><b>${escapeHtml(p.name)}:</b> ${escapeHtml(p.value)}</span>`
+      (p) => `<span class="ksc-line__opt">${escapeHtml(p.name)}: <b>${escapeHtml(p.value)}</b></span>`
     );
     const optLines = hasSwitcher ? [] : opts.map(
-      (o) => o.name ? `<span class="ksc-line__opt"><b>${escapeHtml(o.name)}:</b> ${escapeHtml(o.value)}</span>` : `<span class="ksc-line__opt">${escapeHtml(o.value)}</span>`
+      (o) => o.name ? `<span class="ksc-line__opt">${escapeHtml(o.name)}: <b>${escapeHtml(o.value)}</b></span>` : `<span class="ksc-line__opt">${escapeHtml(o.value)}</span>`
     );
-    const switcher = hasSwitcher ? `<div class="ksc-line__variant">${optName ? `<span><b>${escapeHtml(optName)}:</b></span>` : ""}<select class="ksc-line__select" data-smart-cart-variant data-line-id="${id}" data-qty="${l.quantity}" aria-label="${escapeHtml(optName || "Variant")}">${variants.map(
+    const switcher = hasSwitcher ? `<div class="ksc-line__variant">${optName ? `<span>${escapeHtml(optName)}:</span>` : ""}<select class="ksc-line__select" data-smart-cart-variant data-line-id="${id}" data-qty="${l.quantity}" aria-label="${escapeHtml(optName || "Variant")}">${variants.map(
       (v) => `<option value="${escapeHtml(v.id)}"${v.title === l.variantTitle ? " selected" : ""}>${escapeHtml(v.title ?? "")}</option>`
     ).join("")}</select></div>` : "";
     const metaParts = [...propLines, ...optLines, ...switcher ? [switcher] : []];
     const meta = metaParts.length ? `<div class="ksc-line__meta">${metaParts.join("")}</div>` : "";
-    const compare = l.compareAtLinePrice && l.compareAtLinePrice.amount > l.linePrice.amount ? `<span class="ksc-line__compare">${escapeHtml(formatMoney2(l.compareAtLinePrice))}</span>` : "";
-    const save = l.compareAtLinePrice && l.compareAtLinePrice.amount > l.linePrice.amount ? `<span class="ksc-line__save">You save ${escapeHtml(
-      formatMoney2({
-        amount: l.compareAtLinePrice.amount - l.linePrice.amount,
+    const hasLineDiscount = (l.discountAllocations?.length ?? 0) > 0;
+    const struck = l.compareAtLinePrice && l.compareAtLinePrice.amount > l.linePrice.amount ? l.compareAtLinePrice : hasLineDiscount && l.originalLinePrice && l.originalLinePrice.amount > l.linePrice.amount ? l.originalLinePrice : void 0;
+    const compare = struck ? `<span class="ksc-line__compare">${escapeHtml(formatMoney2(struck))}</span>` : "";
+    const save = struck && struck.amount - l.linePrice.amount > 0 ? `<span class="ksc-line__save">${TAG_SVG}You save ${escapeHtml(
+      formatMoneyCompact({
+        amount: struck.amount - l.linePrice.amount,
         currency: l.linePrice.currency
       })
     )}</span>` : "";
-    const hasLineDiscount = (l.discountAllocations?.length ?? 0) > 0;
-    const displayPrice = hasLineDiscount ? l.originalLinePrice ?? l.linePrice : l.linePrice;
+    const displayPrice = l.linePrice;
     const discountRows = hasLineDiscount ? l.discountAllocations.map((a) => {
       const code = escapeHtml(a.code);
       if (typeof a.quantity === "number" && a.quantity > 0) {
         const unit = Math.round((l.originalLinePrice ?? l.linePrice).amount / l.quantity);
-        const struck = escapeHtml(
+        const struck2 = escapeHtml(
           formatMoney2({ amount: unit * a.quantity, currency: l.linePrice.currency })
         );
-        return `<div class="ksc-line__discount"><span>\u{1F381} ${a.quantity}\xD7 ${code} \u2014 <s>${struck}</s> FREE \xB7 You save 100%</span></div>`;
+        return `<div class="ksc-line__discount"><span>\u{1F381} ${a.quantity}\xD7 ${code} \u2014 <s>${struck2}</s> FREE \xB7 You save 100%</span></div>`;
       }
       return `<div class="ksc-line__discount"><span>\u{1F3F7} ${code} \u2212${escapeHtml(formatMoney2(a.amount))}</span></div>`;
     }).join("") : "";
@@ -1646,24 +1774,24 @@ ${css8}`);
       ${image}
       <div class="ksc-line__body">
         <div class="ksc-line__top">
-          <span class="ksc-line__title">${escapeHtml(l.title)}</span>
-          ${compare}
+          <div class="ksc-line__main">
+            <span class="ksc-line__title">${escapeHtml(l.title)}</span>
+            ${meta}
+            ${discountRows}
+          </div>
+          <div class="ksc-line__prices">
+            ${compare}
+            <span class="ksc-line__price">${escapeHtml(formatMoney2(displayPrice))}</span>
+            ${save}
+          </div>
         </div>
-        ${meta}
-        ${discountRows}
         <div class="ksc-line__bottom">
           <div class="ksc-qty">
             <button type="button" data-smart-cart-qty-dec data-qty="${l.quantity}" aria-label="Decrease quantity">\u2212</button>
             <span class="ksc-qty__n">${l.quantity}</span>
             <button type="button" data-smart-cart-qty-inc data-qty="${l.quantity}" aria-label="Increase quantity">+</button>
           </div>
-          <div class="ksc-line__end">
-            <div class="ksc-line__prices">
-              <span class="ksc-line__price">${escapeHtml(formatMoney2(displayPrice))}</span>
-              ${save}
-            </div>
-            <button type="button" class="ksc-line__remove" data-smart-cart-line-remove aria-label="Remove item">${TRASH_SVG}</button>
-          </div>
+          <button type="button" class="ksc-line__remove" data-smart-cart-line-remove aria-label="Remove item">${TRASH_SVG}</button>
         </div>
       </div>
     </div>`;
@@ -1683,7 +1811,7 @@ ${css8}`);
     }
     try {
       if (displayLines.length === 0) {
-        items.innerHTML = `<div class="ksc-empty">${BAG_SVG}<p data-empty>Your cart is empty.</p></div>`;
+        items.innerHTML = `<div class="ksc-empty">${BAG_SVG}<p data-empty>Your cart is empty</p></div>`;
         checkoutWrap.innerHTML = "";
         if (continueWrap)
           continueWrap.innerHTML = `<button type="button" class="ksc-continue" data-smart-cart-close>Continue shopping</button>`;
@@ -1693,30 +1821,21 @@ ${css8}`);
         return;
       }
       items.innerHTML = displayLines.map((l) => this.#renderLine(l)).join("");
-      const namedAllocations = state.discountAllocations ?? [];
-      const cartDiscount = namedAllocations.length > 0 ? namedAllocations.reduce((sum, a) => sum + a.amount.amount, 0) : state.discountTotal?.amount ?? 0;
-      const displayTotal = {
-        amount: Math.max(0, state.subtotal.amount - cartDiscount),
+      const finalSubtotal = {
+        amount: state.lines.reduce((sum, l) => sum + l.linePrice.amount, 0),
         currency: state.subtotal.currency
       };
-      const rows = [];
-      if (namedAllocations.length > 0) {
-        for (const a of namedAllocations) {
-          rows.push(
-            `<div class="ksc-summary__row ksc-summary__row--discount" data-savings><span>${escapeHtml(a.code)}</span><span>\u2212${escapeHtml(formatMoney2(a.amount))}</span></div>`
-          );
-        }
-      } else if ((state.discountTotal?.amount ?? 0) > 0) {
-        rows.push(
-          `<div class="ksc-summary__row ksc-summary__row--discount" data-savings><span>Discounts</span><span>\u2212${escapeHtml(formatMoney2(state.discountTotal))}</span></div>`
-        );
-      }
-      rows.push(
-        `<div class="ksc-summary__row ksc-summary__row--total"><span>Subtotal</span><span>${escapeHtml(formatMoney2(state.subtotal))}</span></div>`
-      );
+      const discountsTotal = state.discountTotal?.amount ?? state.discountAllocations?.reduce((sum, a) => sum + a.amount.amount, 0) ?? 0;
+      const displayTotal = finalSubtotal;
+      const rows = [
+        ...discountsTotal > 0 ? [
+          `<div class="ksc-summary__row ksc-summary__row--discount"><span>Discounts</span><span>-${escapeHtml(formatMoney2({ amount: discountsTotal, currency: state.subtotal.currency }))}</span></div>`
+        ] : [],
+        `<div class="ksc-summary__row ksc-summary__row--total"><span>Subtotal</span><span>${escapeHtml(formatMoney2(finalSubtotal))}</span></div>`
+      ];
       const totalLabel = escapeHtml(formatMoney2(displayTotal));
       checkoutWrap.innerHTML = `<div class="ksc-summary">${rows.join("")}</div>
-      <a class="checkout" data-checkout href="${escapeHtml(state.checkoutUrl)}">Checkout${totalLabel ? ` \xB7 ${totalLabel}` : ""}</a>`;
+      <a class="checkout" data-checkout href="${escapeHtml(state.checkoutUrl)}">Checkout${totalLabel ? ` \u2022 ${totalLabel}` : ""}</a>`;
       if (continueWrap)
         continueWrap.innerHTML = `<button type="button" class="ksc-continue" data-smart-cart-close>or continue shopping</button>`;
     } catch (err) {