@nok-integration/storefront-react 0.22.1 → 0.22.3

package/dist/standalone/storefront.mjs

@@ -5500,7 +5500,7 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
-const MAX_AGE_MS = 5 * 6e4;
+const MAX_AGE_MS$1 = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
   constructor(now = () => Date.now()) {
@@ -5515,7 +5515,7 @@ class ProductCache {
     const key = ProductCache.keyFor(sku, market);
     const entry = this.entries.get(key);
     if (!entry) return void 0;
-    if (this.now() - entry.at > MAX_AGE_MS) {
+    if (this.now() - entry.at > MAX_AGE_MS$1) {
       this.entries.delete(key);
       return void 0;
     }
@@ -5543,6 +5543,37 @@ class ProductCache {
     this.entries.clear();
   }
 }
+const MAX_AGE_MS = 5 * 6e4;
+class CartCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entry = null;
+  version = 0;
+  get() {
+    if (!this.entry) return void 0;
+    if (this.now() - this.entry.at > MAX_AGE_MS) {
+      this.entry = null;
+      return void 0;
+    }
+    return this.entry.cart;
+  }
+  set(cart2) {
+    this.entry = {
+      cart: cart2,
+      at: this.now()
+    };
+    this.version += 1;
+  }
+  get revision() {
+    return this.version;
+  }
+  clear() {
+    this.entry = null;
+    this.version += 1;
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5643,6 +5674,7 @@ function NoScreenTitle({ children }) {
   });
 }
 const ShopContext = createContext(null);
+const CartCacheContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
   const { apiBaseUrl, getToken, market, navigate: hostNavigate, prefetch: hostPrefetch, sessionTransport = "bearer", theme = "auto", notifications = "internal", features, onEvent, locale, assetBaseUrl } = config;
   const listeners = useRef(/* @__PURE__ */ new Set());
@@ -5672,7 +5704,10 @@ function DaznShopProvider({ children, ...config }) {
     } catch {
     }
   }, []);
-  const api = useMemo(() => clientExports.createClient({
+  const cartsRef = useRef(null);
+  cartsRef.current ??= new CartCache();
+  const carts = cartsRef.current;
+  const client2 = useMemo(() => clientExports.createClient({
     baseUrl: apiBaseUrl,
     getToken: stableGetToken,
     fetch: createShopFetch({
@@ -5683,6 +5718,33 @@ function DaznShopProvider({ children, ...config }) {
     credentials: sessionTransport === "cookie" ? "include" : "omit",
     market
   }), [apiBaseUrl, stableGetToken, emit, sessionTransport, market]);
+  const api = useMemo(() => {
+    carts.clear();
+    const remember2 = (cart2) => {
+      carts.set(cart2);
+      return cart2;
+    };
+    const read = (fn) => (...args) => {
+      const before = carts.revision;
+      return fn(...args).then((cart2) => carts.revision === before ? remember2(cart2) : cart2);
+    };
+    const write = (fn) => (...args) => fn(...args).then(remember2);
+    return {
+      ...client2,
+      cart: {
+        ...client2.cart,
+        create: read(client2.cart.create),
+        get: read(client2.cart.get),
+        addItem: write(client2.cart.addItem),
+        updateItem: write(client2.cart.updateItem),
+        removeItem: write(client2.cart.removeItem)
+      },
+      vip: {
+        ...client2.vip,
+        addToCart: write(client2.vip.addToCart)
+      }
+    };
+  }, [client2, carts]);
   const navigate = useCallback((to) => {
     emit({
       type: "navigate",
@@ -5719,8 +5781,11 @@ function DaznShopProvider({ children, ...config }) {
   }), [api, market, products, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
   return jsx(ShopContext.Provider, {
     value: value2,
-    children: jsx(ScreenTitleProvider, {
-      children
+    children: jsx(CartCacheContext.Provider, {
+      value: carts,
+      children: jsx(ScreenTitleProvider, {
+        children
+      })
     })
   });
 }
@@ -5757,6 +5822,9 @@ function useShopFeatures() {
     stockAlerts: true
   };
 }
+function useCartCache() {
+  return useContext(CartCacheContext);
+}
 function ShopLink({ to, children, ...rest }) {
   const navigate = useNavigate();
   const prefetch = usePrefetch();
@@ -5899,7 +5967,7 @@ const neutral$2 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$2 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$V = {
+const styles$W = {
   badge: badge$5,
   neutral: neutral$2,
   success: success$1,
@@ -5908,7 +5976,7 @@ const styles$V = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$V.badge, styles$V[tone]].join(" "),
+    className: [styles$W.badge, styles$W[tone]].join(" "),
     children
   });
 }
@@ -5917,7 +5985,7 @@ const fullWidth = "_fullWidth_ci424_25";
 const primary = "_primary_ci424_29";
 const secondary = "_secondary_ci424_34";
 const ghost = "_ghost_ci424_40";
-const styles$U = {
+const styles$V = {
   button: button$1,
   fullWidth,
   primary,
@@ -5925,12 +5993,12 @@ const styles$U = {
   ghost
 };
 const spinner = "_spinner_1rueh_5";
-const styles$T = {
+const styles$U = {
   spinner
 };
 function Spinner({ className }) {
   return jsx("span", {
-    className: [styles$T.spinner, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$U.spinner, className ?? ""].filter(Boolean).join(" "),
     "aria-hidden": "true"
   });
 }
@@ -5939,7 +6007,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   return jsxs("button", {
     ref,
     type,
-    className: [styles$U.button, styles$U[variant], fullWidth2 ? styles$U.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$V.button, styles$V[variant], fullWidth2 ? styles$V.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
@@ -5948,9 +6016,9 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
     })]
   });
 });
-const skeleton = "_skeleton_1nxz7_1";
-const styles$S = {
-  skeleton
+const skeleton$1 = "_skeleton_1nxz7_1";
+const styles$T = {
+  skeleton: skeleton$1
 };
 function Skeleton({ width, height, radius, className, circle }) {
   const style = {
@@ -5960,13 +6028,13 @@ function Skeleton({ width, height, radius, className, circle }) {
   };
   return jsx("span", {
     "aria-hidden": "true",
-    className: [styles$S.skeleton, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$T.skeleton, className ?? ""].filter(Boolean).join(" "),
     style
   });
 }
 const surface$1 = "_surface_stwld_10";
 const fill = "_fill_stwld_35";
-const styles$R = {
+const styles$S = {
   surface: surface$1,
   fill
 };
@@ -6113,7 +6181,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     ...rest,
     ref: attach,
     "data-shop-theme": tone,
-    className: [styles$R.surface, fill2 ? styles$R.fill : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$S.surface, fill2 ? styles$S.fill : "", className ?? ""].filter(Boolean).join(" "),
     children
   });
 });
@@ -6126,7 +6194,7 @@ const lineMid = "_lineMid_ney0g_45";
 const lineNarrow = "_lineNarrow_ney0g_49";
 const row$9 = "_row_ney0g_53";
 const action$2 = "_action_ney0g_57";
-const styles$Q = {
+const styles$R = {
   root: root$6,
   inner,
   media: media$3,
@@ -6180,7 +6248,7 @@ function useMoney(defaultLocale) {
 }
 function useLocale(override) {
   const shop = useShopOptional();
-  return override ?? shop?.locale ?? shop?.market?.lang ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
+  return override ?? shop?.locale ?? (shop?.market?.lang && shop.market.country && !shop.market.lang.includes("-") ? `${shop.market.lang}-${shop.market.country}` : shop?.market?.lang) ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
 }
 const ES = {
   "(opens {0} in a new tab)": "(abre {0} en una nueva pestaña)",
@@ -6365,6 +6433,7 @@ const ES = {
   "We’ve sent a confirmation to {0}": "Hemos enviado una confirmación a {0}",
   "What do you want to return?": "¿Qué desea devolver?",
   "Your order is confirmed": "Su pedido está confirmado",
+  "Order confirmed": "Pedido confirmado",
   "You’ll receive a shipping label PDF to your email as well.": "Recibirá un PDF de la etiqueta de envío en su correo electrónico.",
   "{0} photographs": "{0} fotografías",
   "{0}, opens in a new tab": "{0}, se abre en una pestaña nueva",
@@ -6429,36 +6498,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
   return jsx(ShopSurface, {
     tone,
     fill: true,
-    className: styles$Q.root,
+    className: styles$R.root,
     children: jsx("div", {
-      className: styles$Q.inner,
+      className: styles$R.inner,
       role: "status",
       "aria-label": t("Loading"),
       children: shape === "media" ? jsxs(Fragment, {
         children: [jsx(Skeleton, {
-          className: styles$Q.media
+          className: styles$R.media
         }), jsxs("div", {
-          className: styles$Q.lines,
+          className: styles$R.lines,
           children: [jsx(Skeleton, {
             height: 22,
-            className: styles$Q.lineWide
+            className: styles$R.lineWide
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$Q.lineMid
+            className: styles$R.lineMid
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$Q.lineNarrow
+            className: styles$R.lineNarrow
           })]
         }), jsx(Skeleton, {
           height: 48,
           radius: 8,
-          className: styles$Q.action
+          className: styles$R.action
         })]
       }) : jsx("div", {
-        className: styles$Q.lines,
+        className: styles$R.lines,
         children: [0, 1, 2, 3].map((i) => jsx(Skeleton, {
           height: 72,
-          className: styles$Q.row
+          className: styles$R.row
         }, i))
       })
     })
@@ -6470,7 +6539,7 @@ const text$6 = "_text_ryf3q_21";
 const title$n = "_title_ryf3q_35";
 const body$9 = "_body_ryf3q_40";
 const action$1 = "_action_ryf3q_48";
-const styles$P = {
+const styles$Q = {
   root: root$5,
   icon: icon$4,
   text: text$6,
@@ -6480,22 +6549,22 @@ const styles$P = {
 };
 function EmptyState({ title: title2, body: body3, action: action2, icon: icon2 }) {
   return jsxs("div", {
-    className: styles$P.root,
+    className: styles$Q.root,
     role: "status",
     children: [icon2 && jsx("div", {
-      className: styles$P.icon,
+      className: styles$Q.icon,
       children: icon2
     }), jsxs("div", {
-      className: styles$P.text,
+      className: styles$Q.text,
       children: [jsx("h2", {
-        className: styles$P.title,
+        className: styles$Q.title,
         children: title2
       }), body3 && jsx("p", {
-        className: styles$P.body,
+        className: styles$Q.body,
         children: body3
       })]
     }), action2 && jsx("div", {
-      className: styles$P.action,
+      className: styles$Q.action,
       children: action2
     })]
   });
@@ -6632,7 +6701,7 @@ function isDuplicateOrder(err) {
 const root$4 = "_root_1lbpx_1";
 const title$m = "_title_1lbpx_10";
 const body$8 = "_body_1lbpx_15";
-const styles$O = {
+const styles$P = {
   root: root$4,
   title: title$m,
   body: body$8
@@ -6642,13 +6711,13 @@ function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return jsxs("div", {
-    className: styles$O.root,
+    className: styles$P.root,
     role: "alert",
     children: [jsx("h2", {
-      className: styles$O.title,
+      className: styles$P.title,
       children: title2 ?? t(treatment.title)
     }), jsx("p", {
-      className: styles$O.body,
+      className: styles$P.body,
       children: body3 ?? t(treatment.body)
     }), showRetry && jsx(Button, {
       variant: "secondary",
@@ -6696,7 +6765,7 @@ const rich = "_rich_oz4st_183";
 const description = "_description_oz4st_198";
 const thumb$4 = "_thumb_oz4st_216";
 const thumbImage = "_thumbImage_oz4st_227";
-const styles$N = {
+const styles$O = {
   viewport,
   anchor,
   caret,
@@ -6819,41 +6888,41 @@ function ToastProvider({ children }) {
   return jsxs(ToastContext.Provider, {
     value: api,
     children: [children, jsx("div", {
-      className: styles$N.viewport,
+      className: styles$O.viewport,
       ref: viewportRef,
       "aria-live": "polite",
       "aria-atomic": "false",
       children: toasts.map((t) => {
         const rich2 = Boolean(t.description || t.image);
         return jsxs("div", {
-          className: styles$N.anchor,
+          className: styles$O.anchor,
           children: [t.anchor === "cart" && jsx("span", {
-            className: styles$N.caret,
+            className: styles$O.caret,
             children: jsx(Caret, {})
           }), jsxs("div", {
-            className: [styles$N.toast, rich2 ? styles$N.rich : styles$N[t.tone]].join(" "),
+            className: [styles$O.toast, rich2 ? styles$O.rich : styles$O[t.tone]].join(" "),
             role: "status",
             children: [t.image && jsx("span", {
-              className: styles$N.thumb,
+              className: styles$O.thumb,
               children: jsx(ShopImage, {
                 src: t.image,
                 alt: "",
                 fill: true,
                 sizes: "40px",
-                className: styles$N.thumbImage
+                className: styles$O.thumbImage
               })
             }), jsxs("span", {
-              className: styles$N.text,
+              className: styles$O.text,
               children: [jsx("span", {
-                className: styles$N.message,
+                className: styles$O.message,
                 children: t.message
               }), t.description && jsx("span", {
-                className: styles$N.description,
+                className: styles$O.description,
                 children: t.description
               })]
             }), t.action && jsx("button", {
               type: "button",
-              className: styles$N.action,
+              className: styles$O.action,
               onClick: () => {
                 t.action?.onAction();
                 dismiss(t.id);
@@ -6868,15 +6937,15 @@ function ToastProvider({ children }) {
 }
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$M = {
+const styles$N = {
   badge: badge$4,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
   return jsxs("span", {
-    className: styles$M.badge,
+    className: styles$N.badge,
     children: [jsxs("svg", {
-      className: styles$M.icon,
+      className: styles$N.icon,
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -6906,7 +6975,7 @@ const badge$3 = "_badge_rvfx9_48";
 const price$4 = "_price_rvfx9_52";
 const compareAt = "_compareAt_rvfx9_57";
 const strikethrough = "_strikethrough_rvfx9_65";
-const styles$L = {
+const styles$M = {
   root: root$3,
   center: center$1,
   end,
@@ -6924,12 +6993,12 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
   return jsxs("div", {
-    className: [styles$L.root, styles$L[size], styles$L[align], styles$L[variant]].join(" "),
+    className: [styles$M.root, styles$M[size], styles$M[align], styles$M[variant]].join(" "),
     children: [jsx("span", {
-      className: styles$L.price,
+      className: styles$M.price,
       children: format(price2)
     }), hasCompare && jsxs("span", {
-      className: styles$L.compareAt,
+      className: styles$M.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
         children: t("Was {0}", format(compareAt2))
@@ -6999,7 +7068,7 @@ const past = "_past_1cum7_113";
 const current$1 = "_current_1cum7_118";
 const future = "_future_1cum7_133";
 const date$1 = "_date_1cum7_138";
-const styles$K = {
+const styles$L = {
   timeline,
   row: row$8,
   line: line$3,
@@ -7033,39 +7102,40 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
   const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
-    className: styles$K.timeline,
+    className: styles$L.timeline,
     children: progress2.map((entry, i) => {
       const state = stateOf(entry, i, currentIndex);
       const estimate = !entry.at && i === progress2.length - 1 && estimatedDelivery ? formatWindow(estimatedDelivery, locale) : void 0;
       return jsxs("li", {
-        className: styles$K.row,
+        className: styles$L.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [jsxs("div", {
-          className: styles$K.line,
+          className: styles$L.line,
           children: [jsx("span", {
-            className: styles$K.marker,
+            className: styles$L.marker,
             children: state === "future" ? jsx("span", {
-              className: styles$K.pending,
+              className: styles$L.pending,
               "aria-hidden": "true"
             }) : jsx(StepTick, {
               tone: state
             })
           }), jsxs("span", {
-            className: styles$K.text,
+            className: styles$L.text,
             children: [jsx("span", {
-              className: [styles$K.label, styles$K[state]].join(" "),
+              className: [styles$L.label, styles$L[state]].join(" "),
+              "data-state": state,
               children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
-              className: styles$K.date,
+              className: styles$L.date,
               dateTime: entry.at,
               children: formatStepDate(entry.at, locale)
             }) : estimate && jsx("span", {
-              className: styles$K.date,
+              className: styles$L.date,
               children: estimate
             })]
           })]
         }), i < progress2.length - 1 && jsx("span", {
-          className: styles$K.connector,
+          className: styles$L.connector,
           "aria-hidden": "true"
         })]
       }, entry.step);
@@ -7079,7 +7149,7 @@ function stateOf(entry, index, currentIndex) {
 }
 function StepTick({ tone }) {
   return jsxs("svg", {
-    className: styles$K.tick,
+    className: styles$L.tick,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -7219,12 +7289,12 @@ const SWATCH_HEX = {
 function swatchColour(name2) {
   return SWATCH_HEX[name2.toLowerCase().trim()] ?? "#c9cdd0";
 }
-const summary = "_summary_1hsxt_2";
-const row$7 = "_row_1hsxt_16";
-const free = "_free_1hsxt_53";
-const pending$1 = "_pending_1hsxt_59";
-const discount = "_discount_1hsxt_69";
-const styles$J = {
+const summary = "_summary_1k2h8_2";
+const row$7 = "_row_1k2h8_16";
+const free = "_free_1k2h8_53";
+const pending$1 = "_pending_1k2h8_59";
+const discount = "_discount_1k2h8_69";
+const styles$K = {
   summary,
   row: row$7,
   free,
@@ -7253,11 +7323,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
   const isDeferred = (key) => deferred.includes(key);
   const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
   return jsx("dl", {
-    className: styles$J.summary,
+    className: styles$K.summary,
     children: visible.map(({ label: label2, key }) => {
       if (key === "discount" && discount2) {
         return jsxs("div", {
-          className: [styles$J.row, styles$J.discount].join(" "),
+          className: [styles$K.row, styles$K.discount].join(" "),
           children: [jsx("dt", {
             children: t(label2)
           }), jsx("dd", {
@@ -7267,11 +7337,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
       }
       const pending2 = key !== "total" && isDeferred(key);
       return jsxs("div", {
-        className: styles$J.row,
+        className: styles$K.row,
         children: [jsx("dt", {
           children: t(label2)
         }), jsx("dd", {
-          className: pending2 ? styles$J.pending : void 0,
+          className: pending2 ? styles$K.pending : void 0,
           children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t)
         })]
       }, key);
@@ -7281,34 +7351,34 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
 function renderValue(key, pricing, format, t) {
   if (key === "shipping" && pricing.shipping.amount === 0) {
     return jsx("span", {
-      className: styles$J.free,
+      className: styles$K.free,
       children: t("Free")
     });
   }
   return key === "discount" ? null : format(pricing[key]);
 }
-const lines$1 = "_lines_1lx0d_19";
-const line$2 = "_line_1lx0d_19";
-const thumb$3 = "_thumb_1lx0d_34";
-const image$b = "_image_1lx0d_44";
-const placeholder$8 = "_placeholder_1lx0d_51";
-const lineBody = "_lineBody_1lx0d_56";
-const lineText = "_lineText_1lx0d_65";
-const lineTitle = "_lineTitle_1lx0d_75";
-const lineMeta = "_lineMeta_1lx0d_106";
-const detail$1 = "_detail_1lx0d_103";
-const linePrice = "_linePrice_1lx0d_127";
-const paid$3 = "_paid_1lx0d_139";
-const was$4 = "_was_1lx0d_152";
-const card$4 = "_card_1lx0d_175";
-const cardTitle = "_cardTitle_1lx0d_183";
-const cardBody = "_cardBody_1lx0d_195";
-const summaryCard = "_summaryCard_1lx0d_167";
-const itemsHeader = "_itemsHeader_1lx0d_14";
-const itemsTitle = "_itemsTitle_1lx0d_238";
-const itemsCount = "_itemsCount_1lx0d_249";
-const cardLines = "_cardLines_1lx0d_268";
-const styles$I = {
+const lines$1 = "_lines_gr6vv_19";
+const line$2 = "_line_gr6vv_19";
+const thumb$3 = "_thumb_gr6vv_34";
+const image$b = "_image_gr6vv_44";
+const placeholder$8 = "_placeholder_gr6vv_51";
+const lineBody = "_lineBody_gr6vv_56";
+const lineText = "_lineText_gr6vv_65";
+const lineTitle = "_lineTitle_gr6vv_75";
+const lineMeta = "_lineMeta_gr6vv_106";
+const detail$1 = "_detail_gr6vv_103";
+const linePrice = "_linePrice_gr6vv_127";
+const paid$3 = "_paid_gr6vv_139";
+const was$4 = "_was_gr6vv_152";
+const card$4 = "_card_gr6vv_175";
+const cardTitle = "_cardTitle_gr6vv_183";
+const cardBody = "_cardBody_gr6vv_195";
+const summaryCard = "_summaryCard_gr6vv_167";
+const itemsHeader = "_itemsHeader_gr6vv_14";
+const itemsTitle = "_itemsTitle_gr6vv_238";
+const itemsCount = "_itemsCount_gr6vv_249";
+const cardLines = "_cardLines_gr6vv_268";
+const styles$J = {
   lines: lines$1,
   line: line$2,
   thumb: thumb$3,
@@ -7351,42 +7421,42 @@ function OrderLine({ item: item2 }) {
   const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
   const details2 = detailsOf(item2, t);
   return jsxs("li", {
-    className: styles$I.line,
+    className: styles$J.line,
     children: [jsx("div", {
-      className: styles$I.thumb,
+      className: styles$J.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$I.image
+        className: styles$J.image
       }) : jsx("div", {
-        className: styles$I.placeholder,
+        className: styles$J.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$I.lineBody,
+      className: styles$J.lineBody,
       children: [jsxs("div", {
-        className: styles$I.lineText,
+        className: styles$J.lineText,
         children: [jsx("span", {
-          className: styles$I.lineTitle,
+          className: styles$J.lineTitle,
           children: item2.title ?? item2.sku
         }), jsxs("span", {
-          className: styles$I.lineMeta,
+          className: styles$J.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
-            className: styles$I.detail,
+            className: styles$J.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
           })]
         })]
       }), jsxs("span", {
-        className: styles$I.linePrice,
+        className: styles$J.linePrice,
         children: [jsx("span", {
-          className: styles$I.paid,
+          className: styles$J.paid,
           children: format(item2.line_total)
         }), compareAt2 && jsxs("span", {
-          className: styles$I.was,
+          className: styles$J.was,
           children: [jsx("span", {
             className: "visually-hidden",
             children: t("Was {0}", format(compareAt2))
@@ -7402,7 +7472,7 @@ function OrderLine({ item: item2 }) {
 function OrderLines({ order }) {
   const t = useT();
   return jsx("ul", {
-    className: styles$I.lines,
+    className: styles$J.lines,
     "aria-label": t("Items"),
     children: order.items.map((item2) => jsx(OrderLine, {
       item: item2
@@ -7413,19 +7483,19 @@ function OrderItemsCard({ order }) {
   const t = useT();
   const itemCount = order.items.reduce((n, i) => n + i.qty, 0);
   return jsxs("section", {
-    className: styles$I.card,
+    className: styles$J.card,
     "aria-label": t("Items"),
     children: [jsxs("div", {
-      className: styles$I.itemsHeader,
+      className: styles$J.itemsHeader,
       children: [jsx("h2", {
-        className: styles$I.itemsTitle,
+        className: styles$J.itemsTitle,
         children: t("Items")
       }), jsx("span", {
-        className: styles$I.itemsCount,
+        className: styles$J.itemsCount,
         children: itemCount
       })]
     }), jsx("ul", {
-      className: [styles$I.lines, styles$I.cardLines].join(" "),
+      className: [styles$J.lines, styles$J.cardLines].join(" "),
       children: order.items.map((item2) => jsx(OrderLine, {
         item: item2
       }, item2.line_ref))
@@ -7435,13 +7505,13 @@ function OrderItemsCard({ order }) {
 function ShippingAddressCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$I.card,
+    className: styles$J.card,
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
-      className: styles$I.cardTitle,
+      className: styles$J.cardTitle,
       children: t("Shipping address")
     }), jsx("p", {
-      className: styles$I.cardBody,
+      className: styles$J.cardBody,
       children: formatAddress(order.ship_to)
     })]
   });
@@ -7449,10 +7519,10 @@ function ShippingAddressCard({ order }) {
 function OrderSummaryCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: [styles$I.card, styles$I.summaryCard].join(" "),
+    className: [styles$J.card, styles$J.summaryCard].join(" "),
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
-      className: styles$I.cardTitle,
+      className: styles$J.cardTitle,
       children: t("Order summary")
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
@@ -7489,7 +7559,7 @@ const handleSlot = "_handleSlot_1f3nh_23";
 const handle = "_handle_1f3nh_23";
 const closeSlot$1 = "_closeSlot_1f3nh_35";
 const close$2 = "_close_1f3nh_35";
-const styles$H = {
+const styles$I = {
   header: header$6,
   slot,
   handleSlot,
@@ -7517,23 +7587,23 @@ function CloseIcon$1() {
 }
 function SheetHeader({ onClose, closeLabel }) {
   return jsxs("div", {
-    className: styles$H.header,
+    className: styles$I.header,
     children: [jsx("div", {
-      className: styles$H.slot,
+      className: styles$I.slot,
       "aria-hidden": "true"
     }), jsx("div", {
-      className: styles$H.handleSlot,
+      className: styles$I.handleSlot,
       "aria-hidden": "true",
       children: jsx("div", {
-        className: styles$H.handle
+        className: styles$I.handle
       })
     }), jsx("button", {
       type: "button",
-      className: styles$H.closeSlot,
+      className: styles$I.closeSlot,
       onClick: onClose,
       "aria-label": closeLabel,
       children: jsx("span", {
-        className: styles$H.close,
+        className: styles$I.close,
         children: jsx(CloseIcon$1, {})
       })
     })]
@@ -7589,7 +7659,7 @@ const radio = "_radio_1oaa3_95";
 const label$1 = "_label_1oaa3_125";
 const footer$1 = "_footer_1oaa3_134";
 const error$1 = "_error_1oaa3_142";
-const styles$G = {
+const styles$H = {
   scrim: scrim$5,
   sheet: sheet$3,
   body: body$7,
@@ -7607,12 +7677,12 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   const t = useT();
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$G.scrim,
+    className: styles$H.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$G.sheet,
+      className: styles$H.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "reason-sheet-title",
@@ -7621,23 +7691,23 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         onClose,
         closeLabel
       }), jsxs("div", {
-        className: styles$G.body,
+        className: styles$H.body,
         children: [jsx("h2", {
           id: "reason-sheet-title",
-          className: styles$G.title,
+          className: styles$H.title,
           children: t(title2)
         }), jsx("div", {
-          className: styles$G.options,
+          className: styles$H.options,
           role: "radiogroup",
           "aria-labelledby": "reason-sheet-title",
           children: options2.map((o) => jsxs("button", {
             type: "button",
             role: "radio",
             "aria-checked": o.value === choice,
-            className: styles$G.option,
+            className: styles$H.option,
             onClick: () => setChoice(o.value),
             children: [jsx("span", {
-              className: styles$G.radio,
+              className: styles$H.radio,
               "aria-hidden": "true",
               children: o.value === choice && jsxs("svg", {
                 width: "20",
@@ -7658,15 +7728,15 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
                 })]
               })
             }), jsx("span", {
-              className: styles$G.label,
+              className: styles$H.label,
               children: t(o.label)
             })]
           }, o.value))
         })]
       }), jsxs("div", {
-        className: styles$G.footer,
+        className: styles$H.footer,
         children: [error2 && jsx("p", {
-          className: styles$G.error,
+          className: styles$H.error,
           role: "alert",
           children: error2
         }), jsx(Button, {
@@ -7691,7 +7761,7 @@ const attrs$1 = "_attrs_1pjby_55";
 const price$3 = "_price_1pjby_63";
 const paid$2 = "_paid_1pjby_72";
 const was$3 = "_was_1pjby_80";
-const styles$F = {
+const styles$G = {
   line: line$1,
   thumb: thumb$2,
   img: img$1,
@@ -7707,35 +7777,35 @@ function ReturnItemRow({ item: item2, className }) {
   const { format } = useMoney();
   const t = useT();
   return jsxs("div", {
-    className: [styles$F.line, className ?? ""].join(" ").trim(),
+    className: [styles$G.line, className ?? ""].join(" ").trim(),
     children: [jsx("div", {
-      className: styles$F.thumb,
+      className: styles$G.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$F.img
+        className: styles$G.img
       }) : jsx("div", {
-        className: styles$F.placeholder,
+        className: styles$G.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$F.meta,
+      className: styles$G.meta,
       children: [jsx("p", {
-        className: styles$F.name,
+        className: styles$G.name,
         children: item2.title ?? item2.sku
       }), item2.attributes?.size && jsx("p", {
-        className: styles$F.attrs,
+        className: styles$G.attrs,
         children: t("Size: {0}", item2.attributes.size)
       })]
     }), jsxs("div", {
-      className: styles$F.price,
+      className: styles$G.price,
       children: [jsx("span", {
-        className: styles$F.paid,
+        className: styles$G.paid,
         children: format(item2.unit_price)
       }), item2.compare_at_unit_price && jsxs("span", {
-        className: styles$F.was,
+        className: styles$G.was,
         children: [jsx("span", {
           className: "visually-hidden",
           children: t("Was {0}", format(item2.compare_at_unit_price))
@@ -7758,7 +7828,7 @@ const check = "_check_15fz5_66";
 const row$6 = "_row_15fz5_110";
 const reason = "_reason_15fz5_135";
 const reasonSet = "_reasonSet_15fz5_155";
-const styles$E = {
+const styles$F = {
   page: page$6,
   titles: titles$2,
   title: title$k,
@@ -7865,55 +7935,55 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   }
   if (returnable.length === 0) {
     return jsx("div", {
-      className: styles$E.page,
+      className: styles$F.page,
       children: jsxs("div", {
-        className: styles$E.titles,
+        className: styles$F.titles,
         children: [jsx("h1", {
-          className: styles$E.title,
+          className: styles$F.title,
           children: t("Nothing left to return")
         }), jsx("p", {
-          className: styles$E.subtitle,
+          className: styles$F.subtitle,
           children: t("Every item on this order has already been returned or cancelled.")
         })]
       })
     });
   }
   return jsxs("div", {
-    className: styles$E.page,
+    className: styles$F.page,
     children: [jsxs("div", {
-      className: styles$E.titles,
+      className: styles$F.titles,
       children: [jsx("h1", {
-        className: styles$E.title,
+        className: styles$F.title,
         children: t("What do you want to return?")
       }), jsx("p", {
-        className: styles$E.subtitle,
+        className: styles$F.subtitle,
         children: t("Select items you want to return")
       })]
     }), jsx("div", {
-      className: styles$E.list,
+      className: styles$F.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$E.card,
+          className: styles$F.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$E.checkSlot,
+            className: styles$F.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$E.check,
+              className: styles$F.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$E.row,
+            className: styles$F.row,
             children: [jsx(ReturnItemRow, {
               item: item2
             }), jsxs("button", {
               type: "button",
-              className: `${styles$E.reason} ${reason2 ? styles$E.reasonSet : ""}`,
+              className: `${styles$F.reason} ${reason2 ? styles$F.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7965,7 +8035,7 @@ const body$6 = "_body_51f4e_113";
 const body2 = "_body2_51f4e_121";
 const download = "_download_51f4e_139";
 const note$1 = "_note_51f4e_161";
-const styles$D = {
+const styles$E = {
   page: page$5,
   top,
   items: items$2,
@@ -8039,42 +8109,42 @@ function ReturnLabelView({ ret, onDone }) {
   const t = useT();
   const { preparing, unavailable, onDownload } = useLabelDownload(ret.label_url);
   return jsxs("div", {
-    className: styles$D.page,
+    className: styles$E.page,
     children: [jsxs("div", {
-      className: styles$D.top,
+      className: styles$E.top,
       children: [jsx("div", {
-        className: styles$D.items,
+        className: styles$E.items,
         children: ret.items.map((item2) => jsx(ReturnItemRow, {
           item: item2
         }, item2.line_ref))
       }), jsxs("div", {
-        className: styles$D.intro,
+        className: styles$E.intro,
         children: [jsx("h1", {
-          className: styles$D.title,
+          className: styles$E.title,
           children: t("We’ve generated your return label")
         }), jsx("p", {
-          className: styles$D.subtitle,
+          className: styles$E.subtitle,
           children: t("Follow the instructions below to complete your return")
         })]
       }), jsxs("div", {
-        className: styles$D.card,
+        className: styles$E.card,
         children: [jsxs("section", {
-          className: styles$D.step,
+          className: styles$E.step,
           children: [jsxs("div", {
-            className: styles$D.stepHead,
+            className: styles$E.stepHead,
             children: [jsx("span", {
-              className: styles$D.number,
+              className: styles$E.number,
               "aria-hidden": "true",
               children: "1"
             }), jsx("h2", {
-              className: styles$D.stepTitle,
+              className: styles$E.stepTitle,
               children: t("Download your return label")
             })]
           }), jsx("p", {
-            className: styles$D.body,
+            className: styles$E.body,
             children: t("Tap the button below to download your pre-paid return label")
           }), ret.label_url && jsxs("a", {
-            className: styles$D.download,
+            className: styles$E.download,
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
@@ -8086,27 +8156,27 @@ function ReturnLabelView({ ret, onDone }) {
               children: ` ${t("(opens in a new tab)")}`
             })]
           }), unavailable && jsx("p", {
-            className: styles$D.note,
+            className: styles$E.note,
             role: "status",
             children: t("Your return label is not ready yet. Try again in a moment.")
           }), ret.label_email && jsxs("p", {
-            className: styles$D.note,
+            className: styles$E.note,
             children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
           })]
         }), jsxs("section", {
-          className: styles$D.step2,
+          className: styles$E.step2,
           children: [jsxs("div", {
-            className: styles$D.stepHead,
+            className: styles$E.stepHead,
             children: [jsx("span", {
-              className: styles$D.number,
+              className: styles$E.number,
               "aria-hidden": "true",
               children: "2"
             }), jsx("h2", {
-              className: styles$D.stepTitle,
+              className: styles$E.stepTitle,
               children: t("Pack and ship the item")
             })]
           }), jsxs("p", {
-            className: styles$D.body2,
+            className: styles$E.body2,
             children: [t("Repackage the item securely and attach the return label to the outside of the package."), jsx("br", {}), t("Drop it off at your local carrier or post office.")]
           })]
         })]
@@ -8134,7 +8204,7 @@ const attrs = "_attrs_g4vus_108";
 const price$2 = "_price_g4vus_123";
 const paid$1 = "_paid_g4vus_132";
 const was$2 = "_was_g4vus_140";
-const styles$C = {
+const styles$D = {
   page: page$4,
   titles: titles$1,
   title: title$i,
@@ -8168,42 +8238,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$C.page,
+      className: styles$D.page,
       children: [jsxs("div", {
-        className: styles$C.titles,
+        className: styles$D.titles,
         children: [jsx("h1", {
-          className: styles$C.title,
+          className: styles$D.title,
           children: t("Return in progress")
         }), jsx("p", {
-          className: styles$C.subtitle,
+          className: styles$D.subtitle,
           children: t("Return #{0} · Reported {1}", ret.return_ref, reported)
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$C.items,
+        className: styles$D.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$C.item,
+          className: styles$D.item,
           children: [jsx("div", {
-            className: styles$C.thumb,
+            className: styles$D.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$C.img
+              className: styles$D.img
             }) : jsx("div", {
-              className: styles$C.placeholder,
+              className: styles$D.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$C.meta,
+            className: styles$D.meta,
             children: [jsx("p", {
-              className: styles$C.name,
+              className: styles$D.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$C.attrs,
+              className: styles$D.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: t("Size: {0}", item2.attributes.size)
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -8211,12 +8281,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$C.price,
+            className: styles$D.price,
             children: [jsx("span", {
-              className: styles$C.paid,
+              className: styles$D.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$C.was,
+              className: styles$D.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -8332,30 +8402,343 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     busy
   });
 }
-const page$3 = "_page_1iwin_8";
-const widget = "_widget_1iwin_18";
-const titleRow = "_titleRow_1iwin_26";
-const headline$2 = "_headline_1iwin_42";
-const track$5 = "_track_1iwin_74";
-const rule$1 = "_rule_1iwin_99";
-const help$2 = "_help_1iwin_109";
-const helpTitle = "_helpTitle_1iwin_115";
-const helpRows = "_helpRows_1iwin_122";
-const helpRowEnd = "_helpRowEnd_1iwin_131";
-const helpStatus = "_helpStatus_1iwin_139";
-const helpRow = "_helpRow_1iwin_122";
-const cancel = "_cancel_1iwin_197";
-const cancelledHead = "_cancelledHead_1iwin_221";
-const cancelledTitle = "_cancelledTitle_1iwin_227";
-const cancelledMeta = "_cancelledMeta_1iwin_241";
+function HelpIcon() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsxs("g", {
+      transform: "translate(1.93 1.93)",
+      children: [jsx("path", {
+        d: "M10.0781 14.1543C10.52 14.1543 10.8779 14.5123 10.8779 14.9541C10.8778 15.3958 10.5199 15.7539 10.0781 15.7539H10.0693C9.62757 15.7539 9.26963 15.3958 9.26953 14.9541C9.26953 14.5123 9.62751 14.1543 10.0693 14.1543H10.0781Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        d: "M8.21777 4.7168C8.93457 4.29562 9.77726 4.14167 10.5967 4.28223C11.4161 4.42286 12.1599 4.84835 12.6953 5.48438C13.2303 6.12005 13.5233 6.92505 13.5225 7.75586L13.5107 8.00098C13.3992 9.19732 12.4886 10.0076 11.8057 10.4629C11.4401 10.7066 11.0785 10.8882 10.8018 11.0137V11.8223C10.8014 12.2637 10.4425 12.622 10.001 12.6221C9.55954 12.6219 9.20156 12.2637 9.20117 11.8223V10.4775C9.20117 10.1332 9.42146 9.82671 9.74805 9.71777C9.75073 9.71685 9.75671 9.71536 9.76367 9.71289C9.77824 9.70771 9.80199 9.69931 9.83301 9.6875C9.89571 9.66361 9.98896 9.62621 10.1016 9.57617C10.3291 9.47505 10.6264 9.32523 10.918 9.13086C11.5496 8.70973 11.9217 8.23795 11.9219 7.75586C11.9225 7.30239 11.7627 6.86161 11.4707 6.51465C11.1787 6.16788 10.773 5.93611 10.3262 5.85938C9.87921 5.78271 9.41933 5.86603 9.02832 6.0957C8.63742 6.32547 8.34003 6.68657 8.18945 7.11426C8.04274 7.53077 7.58557 7.74995 7.16895 7.60352C6.75252 7.45687 6.53351 7.00053 6.67969 6.58398C6.9556 5.79964 7.50096 5.1381 8.21777 4.7168Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.0693 0C15.6304 0.000197913 20.1395 4.50828 20.1396 10.0693C20.1395 15.6304 15.6304 20.1395 10.0693 20.1396C4.50828 20.1395 0.000197917 15.6304 0 10.0693C0.00019791 4.50828 4.50828 0.000197906 10.0693 0ZM10.0693 2C5.61285 2.0002 2.0002 5.61285 2 10.0693C2.0002 14.5258 5.61285 18.1395 10.0693 18.1396C14.5258 18.1395 18.1395 14.5258 18.1396 10.0693C18.1395 5.61285 14.5258 2.0002 10.0693 2Z",
+        fill: "currentColor"
+      })]
+    })
+  });
+}
+const crumbs$1 = "_crumbs_1qwg2_1";
+const home = "_home_1qwg2_13";
+const trail = "_trail_1qwg2_25";
+const separator = "_separator_1qwg2_31";
+const current = "_current_1qwg2_37";
+const help$3 = "_help_1qwg2_42";
+const helpLabel = "_helpLabel_1qwg2_56";
+const styles$C = {
+  crumbs: crumbs$1,
+  home,
+  trail,
+  separator,
+  current,
+  help: help$3,
+  helpLabel
+};
+function VipBreadcrumb({ title: title2, trail: trail2 = [], onHome }) {
+  const t = useT();
+  return jsx("nav", {
+    "aria-label": t("Breadcrumb"),
+    children: jsxs("ol", {
+      className: styles$C.crumbs,
+      children: [jsx("li", {
+        children: jsx("button", {
+          type: "button",
+          className: styles$C.home,
+          onClick: onHome,
+          children: t("Homepage")
+        })
+      }), trail2.map((crumb, i) => jsxs(Fragment$1, {
+        children: [jsx("li", {
+          className: styles$C.separator,
+          "aria-hidden": "true",
+          children: "›"
+        }), jsx("li", {
+          className: styles$C.trail,
+          children: crumb
+        })]
+      }, i)), jsx("li", {
+        className: styles$C.separator,
+        "aria-hidden": "true",
+        children: "›"
+      }), jsx("li", {
+        "aria-current": "page",
+        className: styles$C.current,
+        children: title2
+      })]
+    })
+  });
+}
+function VipHelpLink({ onHelp }) {
+  const t = useT();
+  return jsxs("button", {
+    type: "button",
+    className: styles$C.help,
+    onClick: onHelp,
+    children: [jsx(HelpIcon, {}), jsx("span", {
+      className: styles$C.helpLabel,
+      children: t("Need help with your order?")
+    })]
+  });
+}
+const crumbs = "_crumbs_19inq_1";
+const help$2 = "_help_19inq_2";
+const skeleton = "_skeleton_19inq_3";
+const skConnector = "_skConnector_19inq_43";
+const skMain = "_skMain_19inq_47";
+const skSubtitle = "_skSubtitle_19inq_53";
+const skTimeline = "_skTimeline_19inq_57";
+const skStep = "_skStep_19inq_64";
+const skStepText = "_skStepText_19inq_71";
+const skAside = "_skAside_19inq_84";
+const skLine = "_skLine_19inq_91";
+const skLineText = "_skLineText_19inq_97";
+const skMeta = "_skMeta_19inq_105";
+const skBadge = "_skBadge_19inq_112";
+const skPrice = "_skPrice_19inq_116";
+const skCard = "_skCard_19inq_124";
+const skAddress = "_skAddress_19inq_132";
+const skSummary = "_skSummary_19inq_137";
+const skCell = "_skCell_19inq_145";
+const skHelp = "_skHelp_19inq_150";
 const styles$B = {
+  crumbs,
+  help: help$2,
+  skeleton,
+  skConnector,
+  skMain,
+  skSubtitle,
+  skTimeline,
+  skStep,
+  skStepText,
+  skAside,
+  skLine,
+  skLineText,
+  skMeta,
+  skBadge,
+  skPrice,
+  skCard,
+  skAddress,
+  skSummary,
+  skCell,
+  skHelp
+};
+function isWideOrder(order) {
+  return order.vip !== void 0;
+}
+function OrderCrumbs({ order, current: current2 }) {
+  const navigate = useNavigate();
+  const title2 = order?.items[0]?.title ?? order?.items[0]?.sku;
+  return jsx("div", {
+    className: styles$B.crumbs,
+    children: jsx(VipBreadcrumb, {
+      title: current2,
+      trail: [title2 ?? jsx(Skeleton, {
+        width: 150,
+        height: 14,
+        radius: 4
+      })],
+      onHome: () => navigate?.("/")
+    })
+  });
+}
+function OrderHelpLink({ orderRef, onContactSupport }) {
+  const emit = useShopEvent();
+  return jsx("div", {
+    className: styles$B.help,
+    children: jsx(VipHelpLink, {
+      onHelp: () => {
+        emit({
+          type: "support_requested",
+          orderRef
+        });
+        onContactSupport?.();
+      }
+    })
+  });
+}
+function WideOrderSkeleton({ current: current2 }) {
+  const t = useT();
+  return jsxs("div", {
+    className: styles$B.skeleton,
+    "data-shop-layout": "wide",
+    "aria-busy": "true",
+    "aria-label": t("Loading"),
+    children: [jsx(OrderCrumbs, {
+      order: null,
+      current: current2
+    }), jsxs("div", {
+      className: styles$B.skMain,
+      children: [jsx(Skeleton, {
+        width: 202,
+        height: 15,
+        radius: 4
+      }), jsx(Skeleton, {
+        width: 339,
+        height: 14,
+        radius: 4,
+        className: styles$B.skSubtitle
+      }), jsxs("div", {
+        className: styles$B.skTimeline,
+        children: [jsx(SkStep, {
+          lines: [87, 97]
+        }), jsx("span", {
+          className: styles$B.skConnector,
+          style: {
+            height: 46
+          }
+        }), jsx(SkStep, {
+          lines: [73]
+        }), jsx("span", {
+          className: styles$B.skConnector,
+          style: {
+            height: 26
+          }
+        }), jsx(SkStep, {
+          lines: [123, 105]
+        })]
+      })]
+    }), jsxs("div", {
+      className: styles$B.skAside,
+      children: [jsxs("div", {
+        className: styles$B.skLine,
+        children: [jsx(Skeleton, {
+          width: 48,
+          height: 48,
+          radius: 8
+        }), jsxs("div", {
+          className: styles$B.skLineText,
+          children: [jsx(Skeleton, {
+            width: 162,
+            height: 10,
+            radius: 4
+          }), jsxs("span", {
+            className: styles$B.skMeta,
+            children: [jsx(Skeleton, {
+              width: 26,
+              height: 10,
+              radius: 4
+            }), jsx(Skeleton, {
+              width: 12,
+              height: 10,
+              radius: 4
+            }), jsx(Skeleton, {
+              width: 33,
+              height: 8,
+              radius: 4,
+              className: styles$B.skBadge
+            })]
+          })]
+        }), jsxs("div", {
+          className: styles$B.skPrice,
+          children: [jsx(Skeleton, {
+            width: 17,
+            height: 14,
+            radius: 4
+          }), jsx(Skeleton, {
+            width: 42,
+            height: 12,
+            radius: 4
+          })]
+        })]
+      }), jsxs("div", {
+        className: [styles$B.skCard, styles$B.skAddress].join(" "),
+        children: [jsx(Skeleton, {
+          width: 149,
+          height: 18,
+          radius: 4
+        }), jsx(Skeleton, {
+          width: 205,
+          height: 12,
+          radius: 4
+        })]
+      }), jsxs("div", {
+        className: [styles$B.skCard, styles$B.skSummary].join(" "),
+        children: [jsx(Skeleton, {
+          width: 134,
+          height: 18,
+          radius: 4
+        }), [[16, 77, 50, 10], [374, 77, 42, 12], [17, 122, 53, 10], [366, 122, 49, 12], [16, 167, 52, 13], [389, 168, 26, 10], [16, 213, 29, 10], [381, 212, 34, 12]].map(([left2, top2, width, height], i) => jsx("span", {
+          className: styles$B.skCell,
+          style: {
+            left: left2,
+            top: top2
+          },
+          children: jsx(Skeleton, {
+            width,
+            height,
+            radius: 4
+          })
+        }, i))]
+      }), jsx(Skeleton, {
+        height: 48,
+        radius: 8
+      }), jsxs("div", {
+        className: styles$B.skHelp,
+        children: [jsx(Skeleton, {
+          width: 24,
+          height: 24,
+          circle: true
+        }), jsx(Skeleton, {
+          width: 158,
+          height: 13,
+          radius: 4
+        })]
+      })]
+    })]
+  });
+}
+function SkStep({ lines: lines2 }) {
+  return jsxs("div", {
+    className: styles$B.skStep,
+    children: [jsx(Skeleton, {
+      width: 24,
+      height: 24,
+      circle: true
+    }), jsx("div", {
+      className: styles$B.skStepText,
+      children: lines2.map((w, i) => jsx(Skeleton, {
+        width: w,
+        height: i === 0 ? 14 : 13,
+        radius: 4
+      }, i))
+    })]
+  });
+}
+const page$3 = "_page_j9tz4_8";
+const widget = "_widget_j9tz4_18";
+const titleRow = "_titleRow_j9tz4_26";
+const headline$2 = "_headline_j9tz4_42";
+const track$5 = "_track_j9tz4_74";
+const rule$1 = "_rule_j9tz4_99";
+const help$1 = "_help_j9tz4_109";
+const helpTitle = "_helpTitle_j9tz4_115";
+const helpRows = "_helpRows_j9tz4_122";
+const helpRowEnd = "_helpRowEnd_j9tz4_131";
+const helpStatus = "_helpStatus_j9tz4_139";
+const helpRow = "_helpRow_j9tz4_122";
+const cancel = "_cancel_j9tz4_197";
+const cancelledHead = "_cancelledHead_j9tz4_221";
+const cancelledTitle = "_cancelledTitle_j9tz4_227";
+const cancelledMeta = "_cancelledMeta_j9tz4_241";
+const aside$1 = "_aside_j9tz4_249";
+const phoneSkeleton$1 = "_phoneSkeleton_j9tz4_254";
+const wide$2 = "_wide_j9tz4_258";
+const styles$A = {
   page: page$3,
   widget,
   titleRow,
   headline: headline$2,
   track: track$5,
   rule: rule$1,
-  help: help$2,
+  help: help$1,
   helpTitle,
   helpRows,
   helpRowEnd,
@@ -8364,7 +8747,10 @@ const styles$B = {
   cancel,
   cancelledHead,
   cancelledTitle,
-  cancelledMeta
+  cancelledMeta,
+  aside: aside$1,
+  phoneSkeleton: phoneSkeleton$1,
+  wide: wide$2
 };
 function RedirectLink() {
   return jsxs("svg", {
@@ -8454,20 +8840,24 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     return anchorTop(void 0, void 0, scrollerOf(cancelledPage.current));
   }, [cancelled]);
   if (state === "loading") {
-    return jsxs("div", {
-      className: styles$B.page,
-      children: [jsx(Skeleton, {
-        height: 206,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 48,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 113,
-        radius: 18
-      }), jsx(Skeleton, {
-        height: 240,
-        radius: 18
+    return jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: [styles$A.page, styles$A.phoneSkeleton].join(" "),
+        children: [jsx(Skeleton, {
+          height: 206,
+          radius: 8
+        }), jsx(Skeleton, {
+          height: 48,
+          radius: 8
+        }), jsx(Skeleton, {
+          height: 113,
+          radius: 18
+        }), jsx(Skeleton, {
+          height: 240,
+          radius: 18
+        })]
+      }), jsx(WideOrderSkeleton, {
+        current: t("Order #{0}", shortRef$1(orderRef))
       })]
     });
   }
@@ -8533,15 +8923,15 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   if (order.status === "cancelled") {
     return jsxs("div", {
-      className: styles$B.page,
+      className: styles$A.page,
       ref: cancelledPage,
       children: [jsxs("div", {
-        className: styles$B.cancelledHead,
+        className: styles$A.cancelledHead,
         children: [jsx("h1", {
-          className: styles$B.cancelledTitle,
+          className: styles$A.cancelledTitle,
           children: t("Order cancelled")
         }), jsx("p", {
-          className: styles$B.cancelledMeta,
+          className: styles$A.cancelledMeta,
           children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
       }), !order.vip && jsx(Button, {
@@ -8559,18 +8949,25 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       })]
     });
   }
+  const wide2 = isWideOrder(order);
   return jsxs("div", {
-    className: styles$B.page,
-    children: [jsxs("section", {
-      className: styles$B.widget,
+    className: [styles$A.page, wide2 ? styles$A.wide : ""].join(" "),
+    ...wide2 ? {
+      "data-shop-layout": "wide"
+    } : {},
+    children: [wide2 && jsx(OrderCrumbs, {
+      order,
+      current: t("Order #{0}", shortRef$1(order.order_ref))
+    }), jsxs("section", {
+      className: styles$A.widget,
       "aria-label": t("Delivery status"),
       children: [jsxs("div", {
-        className: styles$B.titleRow,
+        className: styles$A.titleRow,
         children: [jsx("h1", {
-          className: styles$B.headline,
+          className: styles$A.headline,
           children: t("Order #{0}", shortRef$1(order.order_ref))
         }), order.tracking?.url && inTransit && jsxs("a", {
-          className: styles$B.track,
+          className: styles$A.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -8587,29 +8984,37 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         locale
       })]
     }), jsx("hr", {
-      className: styles$B.rule
-    }), jsx(OrderLines, {
-      order
-    }), jsx(ShippingAddressCard, {
-      order
-    }), jsx(OrderSummaryCard, {
-      order
-    }), order.can_cancel && jsx("button", {
-      type: "button",
-      className: styles$B.cancel,
-      onClick: () => setCancelOpen(true),
-      children: t("Cancel order")
-    }), jsx(NeedHelp, {
-      order,
-      ...onStartReturn ? {
-        onStartReturn
-      } : {},
-      ...onOpenReturn ? {
-        onOpenReturn
-      } : {},
-      ...onContactSupport ? {
-        onContactSupport
-      } : {}
+      className: styles$A.rule
+    }), jsxs("div", {
+      className: styles$A.aside,
+      children: [jsx(OrderLines, {
+        order
+      }), jsx(ShippingAddressCard, {
+        order
+      }), jsx(OrderSummaryCard, {
+        order
+      }), order.can_cancel && jsx("button", {
+        type: "button",
+        className: styles$A.cancel,
+        onClick: () => setCancelOpen(true),
+        children: t("Cancel order")
+      }), jsx(NeedHelp, {
+        order,
+        ...onStartReturn ? {
+          onStartReturn
+        } : {},
+        ...onOpenReturn ? {
+          onOpenReturn
+        } : {},
+        ...onContactSupport ? {
+          onContactSupport
+        } : {}
+      }), wide2 && jsx(OrderHelpLink, {
+        orderRef: order.order_ref,
+        ...onContactSupport ? {
+          onContactSupport
+        } : {}
+      })]
     }), cancelOpen && jsx(ReasonSheet, {
       title: "Reason for cancelling",
       options: CANCEL_REASONS,
@@ -8649,14 +9054,14 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   if (order.status !== "delivered") return null;
   const returns = order.returns ?? [];
   return jsxs("section", {
-    className: styles$B.help,
+    className: styles$A.help,
     "aria-labelledby": "order-help",
     children: [jsx("h2", {
-      className: styles$B.helpTitle,
+      className: styles$A.helpTitle,
       id: "order-help",
       children: t("Need help?")
     }), jsxs("div", {
-      className: styles$B.helpRows,
+      className: styles$A.helpRows,
       children: [returns.map((ret) => jsx(HelpRow, {
         label: returns.length > 1 ? t("Track return {0}", ret.return_ref) : "Track your return",
         status: RETURN_STATUS[ret.status] ?? ret.status.replace(/_/g, " "),
@@ -8686,14 +9091,14 @@ function HelpRow({ label: label2, status, onClick }) {
   const t = useT();
   return jsxs("button", {
     type: "button",
-    className: styles$B.helpRow,
+    className: styles$A.helpRow,
     onClick,
     children: [jsx("span", {
       children: t(label2)
     }), jsxs("span", {
-      className: styles$B.helpRowEnd,
+      className: styles$A.helpRowEnd,
       children: [status && jsx("span", {
-        className: styles$B.helpStatus,
+        className: styles$A.helpStatus,
         children: t(status)
       }), jsx(ChevronRight$1, {})]
     })]
@@ -8702,21 +9107,27 @@ function HelpRow({ label: label2, status, onClick }) {
 function shortRef$1(orderRef) {
   return orderRef.replace(/^ord_/, "");
 }
-const page$2 = "_page_vqbqs_6";
-const confirmed = "_confirmed_vqbqs_16";
-const title$h = "_title_vqbqs_22";
-const headline$1 = "_headline_vqbqs_47";
-const subtitle$4 = "_subtitle_vqbqs_65";
-const rule = "_rule_vqbqs_77";
-const done = "_done_vqbqs_94";
-const styles$A = {
+const page$2 = "_page_1c6sm_6";
+const confirmed = "_confirmed_1c6sm_16";
+const title$h = "_title_1c6sm_22";
+const headline$1 = "_headline_1c6sm_47";
+const subtitle$4 = "_subtitle_1c6sm_65";
+const rule = "_rule_1c6sm_77";
+const done = "_done_1c6sm_94";
+const aside = "_aside_1c6sm_98";
+const phoneSkeleton = "_phoneSkeleton_1c6sm_103";
+const wide$1 = "_wide_1c6sm_107";
+const styles$z = {
   page: page$2,
   confirmed,
   title: title$h,
   headline: headline$1,
   subtitle: subtitle$4,
   rule,
-  done
+  done,
+  aside,
+  phoneSkeleton,
+  wide: wide$1
 };
 function OrderConfirmationView(props) {
   return jsx(ShopSurface, {
@@ -8741,7 +9152,7 @@ function confirmationProgress(progress2) {
     };
   });
 }
-function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
+function OrderConfirmationContent({ orderRef, locale: localeProp, onDone, onContactSupport }) {
   const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -8762,20 +9173,24 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     void load();
   }, [load]);
   if (state === "loading") {
-    return jsxs("div", {
-      className: styles$A.page,
-      children: [jsx(Skeleton, {
-        height: 140,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 72,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 120,
-        radius: 18
-      }), jsx(Skeleton, {
-        height: 240,
-        radius: 18
+    return jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: [styles$z.page, styles$z.phoneSkeleton].join(" "),
+        children: [jsx(Skeleton, {
+          height: 140,
+          radius: 8
+        }), jsx(Skeleton, {
+          height: 72,
+          radius: 8
+        }), jsx(Skeleton, {
+          height: 120,
+          radius: 18
+        }), jsx(Skeleton, {
+          height: 240,
+          radius: 18
+        })]
+      }), jsx(WideOrderSkeleton, {
+        current: t("Order confirmed")
       })]
     });
   }
@@ -8785,18 +9200,25 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       onRetry: () => void load()
     });
   }
+  const wide2 = isWideOrder(order);
   return jsxs("div", {
-    className: styles$A.page,
-    children: [jsxs("section", {
-      className: styles$A.confirmed,
+    className: [styles$z.page, wide2 ? styles$z.wide : ""].join(" "),
+    ...wide2 ? {
+      "data-shop-layout": "wide"
+    } : {},
+    children: [wide2 && jsx(OrderCrumbs, {
+      order,
+      current: t("Order confirmed")
+    }), jsxs("section", {
+      className: styles$z.confirmed,
       "aria-label": t("Order confirmation"),
       children: [jsxs("div", {
-        className: styles$A.title,
+        className: styles$z.title,
         children: [jsx("h1", {
-          className: styles$A.headline,
+          className: styles$z.headline,
           children: t("Your order is confirmed")
         }), order.email && jsx("p", {
-          className: styles$A.subtitle,
+          className: styles$z.subtitle,
           children: t("We’ve sent a confirmation to {0}", order.email)
         })]
       }), jsx(OrderTimeline, {
@@ -8807,19 +9229,27 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         locale
       })]
     }), jsx("hr", {
-      className: styles$A.rule
-    }), jsx(OrderLines, {
-      order
-    }), jsx(ShippingAddressCard, {
-      order
-    }), jsx(OrderSummaryCard, {
-      order
-    }), onDone && jsx(Button, {
-      variant: "secondary",
-      fullWidth: true,
-      className: styles$A.done,
-      onClick: onDone,
-      children: t("Done")
+      className: styles$z.rule
+    }), jsxs("div", {
+      className: styles$z.aside,
+      children: [jsx(OrderLines, {
+        order
+      }), jsx(ShippingAddressCard, {
+        order
+      }), jsx(OrderSummaryCard, {
+        order
+      }), onDone && jsx(Button, {
+        variant: "secondary",
+        fullWidth: true,
+        className: styles$z.done,
+        onClick: onDone,
+        children: t("Done")
+      }), wide2 && jsx(OrderHelpLink, {
+        orderRef: order.order_ref,
+        ...onContactSupport ? {
+          onContactSupport
+        } : {}
+      })]
     })]
   });
 }
@@ -8828,7 +9258,7 @@ const progress = "_progress_u46qd_22";
 const delivered = "_delivered_u46qd_27";
 const neutral = "_neutral_u46qd_34";
 const critical = "_critical_u46qd_43";
-const styles$z = {
+const styles$y = {
   badge: badge$2,
   progress,
   delivered,
@@ -8854,7 +9284,7 @@ function OrderStatusBadge({ status }) {
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "neutral";
   return jsx("span", {
-    className: [styles$z.badge, styles$z[tone]].join(" "),
+    className: [styles$y.badge, styles$y[tone]].join(" "),
     children: t(label2)
   });
 }
@@ -8873,7 +9303,7 @@ function ReturnStatusBadge({ status }) {
   const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
   const tone = RETURN_TONE[status] ?? "neutral";
   return jsx("span", {
-    className: [styles$z.badge, styles$z[tone]].join(" "),
+    className: [styles$y.badge, styles$y[tone]].join(" "),
     children: t(label2)
   });
 }
@@ -8894,7 +9324,7 @@ const image$a = "_image_qj11j_160";
 const placeholder$5 = "_placeholder_qj11j_167";
 const more = "_more_qj11j_174";
 const chevron$2 = "_chevron_qj11j_187";
-const styles$y = {
+const styles$x = {
   page: page$1,
   empty,
   cta: cta$3,
@@ -8972,7 +9402,7 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$y.page,
+      className: styles$x.page,
       children: [jsx(Skeleton, {
         height: 148,
         radius: 12
@@ -8993,14 +9423,14 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
   }
   if (orders2.length === 0 && returns.length === 0) {
     return jsx("div", {
-      className: styles$y.empty,
+      className: styles$x.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
         body: t("Your orders will show up here once you've shopped."),
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
-            className: styles$y.cta,
+            className: styles$x.cta,
             onClick: onStartShopping,
             children: t("Continue shopping")
           })
@@ -9018,7 +9448,7 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
     ret
   }))].sort((a, b) => Date.parse(b.at) - Date.parse(a.at));
   return jsx("ul", {
-    className: styles$y.page,
+    className: styles$x.page,
     children: rows.map((row2) => jsx("li", {
       children: "order" in row2 ? jsx(OrderCard, {
         order: row2.order,
@@ -9042,39 +9472,39 @@ function ReturnCard({ ret, locale, onOpen }) {
   const items2 = `${ret.item_count} ${ret.item_count === 1 ? t("item") : t("items")}`;
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
-      className: styles$y.head,
+      className: styles$x.head,
       children: [jsxs("div", {
-        className: styles$y.heading,
+        className: styles$x.heading,
         children: [jsx("span", {
-          className: styles$y.title,
+          className: styles$x.title,
           children: `${t("Return")} #${shortRef(ret.return_ref)}`
         }), jsx("span", {
-          className: styles$y.date,
+          className: styles$x.date,
           children: formatPlaced(ret.reported_at, locale)
         })]
       }), jsx(ReturnStatusBadge, {
         status: ret.status
       })]
     }), jsxs("div", {
-      className: styles$y.bottom,
+      className: styles$x.bottom,
       children: [jsx(ReturnThumbnails, {
         ret
       }), jsx("span", {
-        className: styles$y.meta,
+        className: styles$x.meta,
         children: `${items2} · ${money2(ret.value)}`
       }), onOpen && jsx("span", {
-        className: styles$y.chevron,
+        className: styles$x.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$y.card,
+    className: styles$x.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$y.card, styles$y.tappable].join(" "),
+    className: [styles$x.card, styles$x.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `${t("Return")} ${shortRef(ret.return_ref)}, ${ret.headline}`,
     children: body3
@@ -9087,27 +9517,27 @@ function ReturnThumbnails({ ret }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$y.strip,
+      className: styles$x.strip,
       children: jsx("div", {
-        className: [styles$y.tile, styles$y.placeholder].join(" "),
+        className: [styles$x.tile, styles$x.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$y.strip,
+    className: styles$x.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$y.tile,
+        className: styles$x.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$y.image
+          className: styles$x.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$y.more,
+          className: styles$x.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -9124,36 +9554,36 @@ function OrderCard({ order, locale, onOpen }) {
   const t = useT();
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
-      className: styles$y.head,
+      className: styles$x.head,
       children: [jsxs("div", {
-        className: styles$y.heading,
+        className: styles$x.heading,
         children: [jsx("span", {
-          className: styles$y.title,
+          className: styles$x.title,
           children: t("Order #{0}", shortRef(order.order_ref))
         }), jsx("span", {
-          className: styles$y.date,
+          className: styles$x.date,
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
         status: order.status
       })]
     }), jsxs("div", {
-      className: styles$y.bottom,
+      className: styles$x.bottom,
       children: [jsx(Thumbnails, {
         order
       }), onOpen && jsx("span", {
-        className: styles$y.chevron,
+        className: styles$x.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$y.card,
+    className: styles$x.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$y.card, styles$y.tappable].join(" "),
+    className: [styles$x.card, styles$x.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `Order ${shortRef(order.order_ref)}, ${order.headline}`,
     children: body3
@@ -9166,27 +9596,27 @@ function Thumbnails({ order }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$y.strip,
+      className: styles$x.strip,
       children: jsx("div", {
-        className: [styles$y.tile, styles$y.placeholder].join(" "),
+        className: [styles$x.tile, styles$x.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$y.strip,
+    className: styles$x.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$y.tile,
+        className: styles$x.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$y.image
+          className: styles$x.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$y.more,
+          className: styles$x.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -9216,7 +9646,7 @@ const swatches = "_swatches_mdi63_1";
 const swatch = "_swatch_mdi63_1";
 const swatchActive = "_swatchActive_mdi63_18";
 const swatchDot = "_swatchDot_mdi63_22";
-const styles$x = {
+const styles$w = {
   swatches,
   swatch,
   swatchActive,
@@ -9226,12 +9656,12 @@ function ColourSwatches({ variants, className }) {
   const colours = colourOptions(variants);
   if (colours.length === 0) return null;
   return jsx("div", {
-    className: [styles$x.swatches, className ?? ""].join(" ").trim(),
+    className: [styles$w.swatches, className ?? ""].join(" ").trim(),
     "aria-hidden": "true",
     children: colours.map((c, i) => jsx("span", {
-      className: [styles$x.swatch, i === 0 ? styles$x.swatchActive : ""].join(" "),
+      className: [styles$w.swatch, i === 0 ? styles$w.swatchActive : ""].join(" "),
       children: jsx("span", {
-        className: styles$x.swatchDot,
+        className: styles$w.swatchDot,
         style: {
           background: swatchColour(c.value)
         }
@@ -9251,7 +9681,7 @@ const titlePrice$1 = "_titlePrice_yg69t_100";
 const title$f = "_title_yg69t_5";
 const large = "_large_yg69t_185";
 const swatchSlot = "_swatchSlot_yg69t_223";
-const styles$w = {
+const styles$v = {
   tile: tile$1,
   media: media$2,
   image: image$9,
@@ -9273,37 +9703,37 @@ function ProductTile({ product, priority, size = "default" }) {
   const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
-    className: [styles$w.tile, size === "large" ? styles$w.large : ""].join(" "),
+    className: [styles$v.tile, size === "large" ? styles$v.large : ""].join(" "),
     children: [jsxs("div", {
-      className: styles$w.media,
+      className: styles$v.media,
       children: [image2 ? jsx(ShopImage, {
         src: image2,
         alt: product.title,
         fill: true,
         sizes: size === "large" ? "(max-width: 480px) 100vw, 480px" : "(max-width: 480px) 45vw, 200px",
-        className: styles$w.image,
+        className: styles$v.image,
         priority
       }) : jsx("div", {
-        className: styles$w.placeholder,
+        className: styles$v.placeholder,
         "aria-hidden": "true"
       }), anyInStock && topBadge2 && jsx("span", {
-        className: styles$w.topBadge,
+        className: styles$v.topBadge,
         children: topBadge2
       }), anyInStock && pct !== void 0 && jsx("span", {
-        className: styles$w.saleBadge,
+        className: styles$v.saleBadge,
         children: jsx(SaleBadge, {
           pct
         })
       }), !anyInStock && jsx("span", {
-        className: styles$w.oos,
+        className: styles$v.oos,
         children: t("Out of stock")
       })]
     }), jsxs("div", {
-      className: styles$w.bottom,
+      className: styles$v.bottom,
       children: [jsxs("div", {
-        className: styles$w.titlePrice,
+        className: styles$v.titlePrice,
         children: [jsx("span", {
-          className: styles$w.title,
+          className: styles$v.title,
           children: product.title
         }), jsx(PriceBlock, {
           price: product.price,
@@ -9314,7 +9744,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })]
       }), jsx(ColourSwatches, {
         variants: product.variants,
-        className: styles$w.swatchSlot
+        className: styles$v.swatchSlot
       })]
     })]
   });
@@ -9334,7 +9764,7 @@ const name = "_name_v48ok_142";
 const price$1 = "_price_v48ok_155";
 const paid = "_paid_v48ok_164";
 const was$1 = "_was_v48ok_170";
-const styles$v = {
+const styles$u = {
   section: section$3,
   title: title$e,
   link,
@@ -9358,54 +9788,54 @@ function ProductGallery({ title: title2, product }) {
   const inStock = product.variants.some((v) => v.in_stock);
   const images = product.media.length > 0 ? product.media : [void 0];
   return jsxs("section", {
-    className: styles$v.section,
+    className: styles$u.section,
     "aria-labelledby": `gallery-${product.sku}`,
     children: [jsx("h2", {
-      className: styles$v.title,
+      className: styles$u.title,
       id: `gallery-${product.sku}`,
       children: title2
     }), jsxs(ShopLink, {
       to: `/product/${encodeURIComponent(product.sku)}`,
-      className: styles$v.link,
+      className: styles$u.link,
       children: [jsx("ul", {
-        className: styles$v.track,
+        className: styles$u.track,
         "aria-label": t("{0} photographs", product.title),
         children: images.map((src, i) => jsxs("li", {
-          className: styles$v.frame,
+          className: styles$u.frame,
           children: [src ? jsx(ShopImage, {
             src,
             alt: "",
             fill: true,
             sizes: "165px",
-            className: styles$v.image,
+            className: styles$u.image,
             ...i === 0 ? {
               priority: true
             } : {}
           }) : jsx("div", {
-            className: styles$v.placeholder,
+            className: styles$u.placeholder,
             "aria-hidden": "true"
           }), i === 0 && inStock && pct !== void 0 && jsx("span", {
-            className: styles$v.saleBadge,
+            className: styles$u.saleBadge,
             children: jsx(SaleBadge, {
               pct
             })
           }), i === 0 && !inStock && jsx("span", {
-            className: styles$v.oos,
+            className: styles$u.oos,
             children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
-        className: styles$v.caption,
+        className: styles$u.caption,
         children: [jsx("span", {
-          className: styles$v.name,
+          className: styles$u.name,
           children: product.title
         }), jsxs("span", {
-          className: styles$v.price,
+          className: styles$u.price,
           children: [jsx("span", {
-            className: styles$v.paid,
+            className: styles$u.paid,
             children: format(product.price)
           }), product.compare_at && jsxs("span", {
-            className: styles$v.was,
+            className: styles$u.was,
             children: [jsx("span", {
               className: "visually-hidden",
               children: t("Was {0}", format(product.compare_at))
@@ -9416,7 +9846,7 @@ function ProductGallery({ title: title2, product }) {
           })]
         }), jsx(ColourSwatches, {
           variants: product.variants,
-          className: styles$v.swatchRow
+          className: styles$u.swatchRow
         })]
       })]
     })]
@@ -9427,7 +9857,7 @@ const chips$1 = "_chips_6p29u_8";
 const chip$1 = "_chip_6p29u_8";
 const on = "_on_6p29u_36";
 const clear = "_clear_6p29u_42";
-const styles$u = {
+const styles$t = {
   bar: bar$1,
   chips: chips$1,
   chip: chip$1,
@@ -9438,24 +9868,24 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
   const t = useT();
   const hasActive = active.length > 0;
   return jsxs("div", {
-    className: styles$u.bar,
+    className: styles$t.bar,
     role: "group",
     "aria-label": t("Filters"),
     children: [jsx("div", {
-      className: styles$u.chips,
+      className: styles$t.chips,
       children: options2.map((opt) => {
         const on2 = active.includes(opt.value);
         return jsx("button", {
           type: "button",
           "aria-pressed": on2,
-          className: [styles$u.chip, on2 ? styles$u.on : ""].join(" "),
+          className: [styles$t.chip, on2 ? styles$t.on : ""].join(" "),
           onClick: () => onToggle(opt.value),
           children: opt.label
         }, opt.value);
       })
     }), hasActive && onClear && jsx("button", {
       type: "button",
-      className: styles$u.clear,
+      className: styles$t.clear,
       onClick: onClear,
       children: t("Clear")
     })]
@@ -9463,7 +9893,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
 }
 const wrap$2 = "_wrap_15ntf_1";
 const grid$1 = "_grid_15ntf_7";
-const styles$t = {
+const styles$s = {
   wrap: wrap$2,
   grid: grid$1
 };
@@ -9509,7 +9939,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
   }, [loadMore]);
   const visible = active.length === 0 ? products : products.filter((p) => active.includes(p.category));
   return jsxs("div", {
-    className: styles$t.wrap,
+    className: styles$s.wrap,
     children: [filters.length > 0 && jsx(FilterBar, {
       options: filters,
       active,
@@ -9524,7 +9954,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
         children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
-      className: styles$t.grid,
+      className: styles$s.grid,
       children: visible.map((product, i) => jsx("li", {
         children: jsx(ProductTile, {
           product,
@@ -9532,7 +9962,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
         })
       }, product.sku))
     }), loading && jsx("div", {
-      className: styles$t.grid,
+      className: styles$s.grid,
       "aria-hidden": "true",
       children: [0, 1].map((i) => jsx(Skeleton, {
         height: 200,
@@ -9551,7 +9981,7 @@ const seeAll = "_seeAll_1rll1_27";
 const track$3 = "_track_1rll1_33";
 const item = "_item_1rll1_67";
 const inset = "_inset_1rll1_79";
-const styles$s = {
+const styles$r = {
   rail,
   header: header$5,
   title: title$d,
@@ -9564,22 +9994,22 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
   const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
-    className: [styles$s.rail, inset2 ? styles$s.inset : ""].join(" "),
+    className: [styles$r.rail, inset2 ? styles$r.inset : ""].join(" "),
     "aria-label": title2,
     children: [jsxs("div", {
-      className: styles$s.header,
+      className: styles$r.header,
       children: [jsx("h2", {
-        className: styles$s.title,
+        className: styles$r.title,
         children: title2
       }), seeAllTo && jsx(ShopLink, {
-        className: styles$s.seeAll,
+        className: styles$r.seeAll,
         to: seeAllTo,
         children: t("See all")
       })]
     }), jsx("ul", {
-      className: styles$s.track,
+      className: styles$r.track,
       children: products.map((product, i) => jsx("li", {
-        className: styles$s.item,
+        className: styles$r.item,
         children: jsx(ProductTile, {
           product,
           priority: i < 2
@@ -9598,7 +10028,7 @@ const title$c = "_title_uxpgl_67";
 const close$1 = "_close_uxpgl_71";
 const body$5 = "_body_uxpgl_84";
 const footer = "_footer_uxpgl_97";
-const styles$r = {
+const styles$q = {
   overlay: overlay$2,
   scrim: scrim$4,
   sheet: sheet$2,
@@ -9638,14 +10068,14 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
   useModalDialog(open, onClose, sheetRef);
   if (!open) return null;
   return jsxs("div", {
-    className: styles$r.overlay,
+    className: styles$q.overlay,
     children: [jsx("div", {
-      className: styles$r.scrim,
+      className: styles$q.scrim,
       onClick: onClose,
       "aria-hidden": "true"
     }), jsxs(ShopSurface, {
       tone: "light",
-      className: styles$r.sheet,
+      className: styles$q.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId,
@@ -9655,7 +10085,7 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         transition: "none"
       } : void 0,
       children: [jsx("div", {
-        className: styles$r.grabArea,
+        className: styles$q.grabArea,
         onPointerDown: (e) => {
           e.currentTarget.setPointerCapture(e.pointerId);
           onDragStart(e.clientY);
@@ -9664,18 +10094,18 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         onPointerUp: onDragEnd,
         onPointerCancel: onDragEnd,
         children: jsx("div", {
-          className: styles$r.grabber,
+          className: styles$q.grabber,
           "aria-hidden": "true"
         })
       }), jsxs("div", {
-        className: styles$r.header,
+        className: styles$q.header,
         children: [jsx("h2", {
           id: titleId,
-          className: styles$r.title,
+          className: styles$q.title,
           children: title2
         }), jsx("button", {
           type: "button",
-          className: styles$r.close,
+          className: styles$q.close,
           onClick: onClose,
           "aria-label": t("Close"),
           children: jsx("svg", {
@@ -9693,10 +10123,10 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
           })
         })]
       }), jsx("div", {
-        className: styles$r.body,
+        className: styles$q.body,
         children
       }), footer2 && jsx("div", {
-        className: styles$r.footer,
+        className: styles$q.footer,
         children: footer2
       })]
     })]
@@ -9716,7 +10146,7 @@ const stepper = "_stepper_1rmip_10";
 const cap = "_cap_1rmip_23";
 const button = "_button_1rmip_31";
 const value$1 = "_value_1rmip_50";
-const styles$q = {
+const styles$p = {
   wrap: wrap$1,
   stepper,
   cap,
@@ -9794,24 +10224,24 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2, capDesc
     if (!atMax) onChange(qty + 1);
   }
   return jsxs("div", {
-    className: styles$q.wrap,
+    className: styles$p.wrap,
     children: [jsxs("div", {
-      className: styles$q.stepper,
+      className: styles$p.stepper,
       children: [jsx("button", {
         type: "button",
-        className: styles$q.button,
+        className: styles$p.button,
         onClick: decrement,
         disabled: disabled2,
         "aria-label": willDelete ? t("Remove item") : t("Decrease quantity"),
         children: willDelete ? jsx(TrashIcon, {}) : jsx(MinusIcon, {})
       }), jsx("span", {
-        className: styles$q.value,
+        className: styles$p.value,
         "aria-live": "polite",
         "aria-label": `Quantity ${qty}`,
         children: qty
       }), jsx("button", {
         type: "button",
-        className: styles$q.button,
+        className: styles$p.button,
         onClick: increment,
         disabled: disabled2 || atMax,
         "aria-label": t("Increase quantity"),
@@ -9820,7 +10250,7 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2, capDesc
       })]
     }), atMax && capDescribedBy === void 0 && jsx("span", {
       id: ownCapId,
-      className: styles$q.cap,
+      className: styles$p.cap,
       role: "status",
       children: max === 0 ? t("Out of stock") : t("Only {0} left", max)
     })]
@@ -9845,7 +10275,7 @@ const detail = "_detail_1dx14_164";
 const price = "_price_1dx14_183";
 const amount = "_amount_1dx14_191";
 const was = "_was_1dx14_200";
-const styles$p = {
+const styles$o = {
   line,
   row: row$5,
   pending,
@@ -9879,53 +10309,53 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
   const noticeId = useStableId("cart-line-stock");
   const notice = lowStock2 || soldOut ? noticeId : void 0;
   return jsxs("div", {
-    className: [styles$p.line, pending2 ? styles$p.pending : ""].join(" "),
+    className: [styles$o.line, pending2 ? styles$o.pending : ""].join(" "),
     children: [jsxs("div", {
-      className: styles$p.row,
+      className: styles$o.row,
       children: [jsxs("div", {
-        className: styles$p.media,
+        className: styles$o.media,
         children: [displayImage ? jsx(ShopImage, {
           src: displayImage,
           alt: "",
           fill: true,
           sizes: "100px",
-          className: styles$p.image
+          className: styles$o.image
         }) : jsx("div", {
-          className: styles$p.placeholder,
+          className: styles$o.placeholder,
           "aria-hidden": "true"
         }), soldOut ? jsx("span", {
-          className: styles$p.oos,
+          className: styles$o.oos,
           id: noticeId,
           children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
-          className: styles$p.saleBadge,
+          className: styles$o.saleBadge,
           children: jsx(SaleBadge, {
             pct
           })
         })]
       }), jsxs("div", {
-        className: styles$p.info,
+        className: styles$o.info,
         children: [jsxs("div", {
-          className: styles$p.head,
+          className: styles$o.head,
           children: [jsxs("div", {
-            className: styles$p.meta,
+            className: styles$o.meta,
             children: [jsx("span", {
-              className: styles$p.title,
+              className: styles$o.title,
               children: displayTitle
             }), pairs.length > 0 && jsx("div", {
-              className: styles$p.details,
+              className: styles$o.details,
               children: pairs.map(({ key, label: label2, value: value2 }) => jsxs("span", {
-                className: styles$p.detail,
+                className: styles$o.detail,
                 children: [t(label2), ": ", value2]
               }, key))
             })]
           }), jsxs("div", {
-            className: styles$p.price,
+            className: styles$o.price,
             children: [jsx("span", {
-              className: styles$p.amount,
+              className: styles$o.amount,
               children: format(item2.line_total)
             }), compareAt2 && jsx("span", {
-              className: styles$p.was,
+              className: styles$o.was,
               children: format(compareAt2)
             })]
           })]
@@ -9939,10 +10369,10 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         })]
       })]
     }), lowStock2 && jsx("div", {
-      className: styles$p.labels,
+      className: styles$o.labels,
       children: jsx("span", {
         id: noticeId,
-        className: styles$p.lowStock,
+        className: styles$o.lowStock,
         role: "status",
         children: t("Only {0} left", available)
       })
@@ -9954,7 +10384,7 @@ const row$4 = "_row_w9fja_10";
 const icon$2 = "_icon_w9fja_16";
 const label = "_label_w9fja_22";
 const divider$1 = "_divider_w9fja_29";
-const styles$o = {
+const styles$n = {
   box: box$1,
   row: row$4,
   icon: icon$2,
@@ -9964,12 +10394,12 @@ const styles$o = {
 function ShippingInfo() {
   const t = useT();
   return jsxs("section", {
-    className: styles$o.box,
+    className: styles$n.box,
     "aria-label": t("Shipping and returns"),
     children: [jsxs("div", {
-      className: styles$o.row,
+      className: styles$n.row,
       children: [jsx("svg", {
-        className: styles$o.icon,
+        className: styles$n.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -9980,16 +10410,16 @@ function ShippingInfo() {
           fill: "currentColor"
         })
       }), jsx("p", {
-        className: styles$o.label,
+        className: styles$n.label,
         children: t("Standard or express delivery")
       })]
     }), jsx("div", {
-      className: styles$o.divider,
+      className: styles$n.divider,
       role: "presentation"
     }), jsxs("div", {
-      className: styles$o.row,
+      className: styles$n.row,
       children: [jsx("svg", {
-        className: styles$o.icon,
+        className: styles$n.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -10000,7 +10430,7 @@ function ShippingInfo() {
           fill: "currentColor"
         })
       }), jsx("p", {
-        className: styles$o.label,
+        className: styles$n.label,
         children: t("14 days returns")
       })]
     })]
@@ -10011,7 +10441,7 @@ const floating$1 = "_floating_23dkv_52";
 const divider = "_divider_23dkv_58";
 const info$1 = "_info_23dkv_62";
 const actions = "_actions_23dkv_70";
-const styles$n = {
+const styles$m = {
   bar,
   floating: floating$1,
   divider,
@@ -10020,12 +10450,12 @@ const styles$n = {
 };
 function StickyCtaBar({ children, info: info2, variant = "floating", className }) {
   return jsxs("div", {
-    className: [styles$n.bar, styles$n[variant], className ?? ""].join(" "),
+    className: [styles$m.bar, styles$m[variant], className ?? ""].join(" "),
     children: [info2 && jsx("div", {
-      className: styles$n.info,
+      className: styles$m.info,
       children: info2
     }), jsx("div", {
-      className: styles$n.actions,
+      className: styles$m.actions,
       children
     })]
   });
@@ -10038,7 +10468,7 @@ const sectionHeader = "_sectionHeader_1bdb0_40";
 const sectionTitle = "_sectionTitle_1bdb0_46";
 const count = "_count_1bdb0_67";
 const lines = "_lines_1bdb0_91";
-const styles$m = {
+const styles$l = {
   surface,
   screen,
   body: body$4,
@@ -10054,7 +10484,7 @@ function CartView(props = {}) {
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
-    className: styles$m.surface,
+    className: styles$l.surface,
     children: jsx(CartViewContent, {
       ...props
     })
@@ -10064,22 +10494,28 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
-  const [cart2, setCart] = useState(null);
-  const [state, setState] = useState("loading");
+  const carts = useCartCache();
+  const [cart2, setCart] = useState(() => carts?.get() ?? null);
+  const [state, setState] = useState(() => {
+    const seeded = carts?.get();
+    if (!seeded) return "loading";
+    return seeded.items.length === 0 ? "empty" : "ready";
+  });
   const [errorCode, setErrorCode] = useState(void 0);
   const [pendingSku, setPendingSku] = useState(null);
   const [handingOff, setHandingOff] = useState(false);
   const load = useCallback(async () => {
-    setState("loading");
+    if (!carts?.get()) setState("loading");
     try {
-      const next = await api.cart.get();
+      const fetched = await api.cart.get();
+      const next = carts?.get() ?? fetched;
       setCart(next);
       setState(next.items.length === 0 ? "empty" : "ready");
     } catch (err) {
       setErrorCode(codeOf(err));
       setState("error");
     }
-  }, [api]);
+  }, [api, carts]);
   useEffect(() => {
     void load();
   }, [load]);
@@ -10216,22 +10652,22 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   }
   const itemCount = cart2.items.reduce((n, i) => n + i.qty, 0);
   return jsxs("div", {
-    className: styles$m.screen,
+    className: styles$l.screen,
     children: [jsxs("div", {
-      className: styles$m.body,
+      className: styles$l.body,
       children: [jsxs("section", {
-        className: styles$m.items,
+        className: styles$l.items,
         children: [jsxs("div", {
-          className: styles$m.sectionHeader,
+          className: styles$l.sectionHeader,
           children: [jsx("h2", {
-            className: styles$m.sectionTitle,
+            className: styles$l.sectionTitle,
             children: t("Items")
           }), jsx("span", {
-            className: styles$m.count,
+            className: styles$l.count,
             children: itemCount
           })]
         }), jsx("ul", {
-          className: styles$m.lines,
+          className: styles$l.lines,
           children: cart2.items.map((item2) => jsx("li", {
             children: jsx(CartLineItem, {
               item: item2,
@@ -10258,7 +10694,7 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
       children: jsx(Button, {
         variant: "primary",
         onClick: () => void handOff(cart2),
-        disabled: handingOff,
+        loading: handingOff,
         children: checkoutLabel ?? t("Proceed to checkout")
       })
     })]
@@ -10304,7 +10740,7 @@ const placeholder$1 = "_placeholder_1vbj7_31";
 const dots$2 = "_dots_1vbj7_49";
 const dot$2 = "_dot_1vbj7_49";
 const dotActive$2 = "_dotActive_1vbj7_100";
-const styles$l = {
+const styles$k = {
   gallery: gallery$1,
   track: track$2,
   slide: slide$1,
@@ -10355,30 +10791,30 @@ function MediaGallery({ media: media2, alt, focus }) {
   }
   if (media2.length === 0) {
     return jsx("div", {
-      className: styles$l.placeholder,
+      className: styles$k.placeholder,
       "aria-hidden": "true"
     });
   }
   return jsxs("div", {
-    className: styles$l.gallery,
+    className: styles$k.gallery,
     children: [jsx("div", {
-      className: styles$l.track,
+      className: styles$k.track,
       ref: trackRef,
       role: "group",
       "aria-label": `${alt} images`,
       children: media2.map((src, i) => jsx("div", {
-        className: styles$l.slide,
+        className: styles$k.slide,
         children: jsx(ShopImage, {
           src,
           alt: `${alt} — image ${i + 1} of ${media2.length}`,
           fill: true,
           sizes: "(max-width: 480px) 100vw, 480px",
-          className: styles$l.image,
+          className: styles$k.image,
           priority: i === 0
         })
       }, src))
     }), media2.length > 1 && jsx("div", {
-      className: styles$l.dots,
+      className: styles$k.dots,
       role: "tablist",
       "aria-label": t("Gallery pagination"),
       children: media2.map((src, i) => jsx("button", {
@@ -10386,7 +10822,7 @@ function MediaGallery({ media: media2, alt, focus }) {
         role: "tab",
         "aria-selected": i === active,
         "aria-label": `Go to image ${i + 1}`,
-        className: [styles$l.dot, i === active ? styles$l.dotActive : ""].join(" "),
+        className: [styles$k.dot, i === active ? styles$k.dotActive : ""].join(" "),
         onClick: () => goTo(i)
       }, src))
     })]
@@ -10394,7 +10830,7 @@ function MediaGallery({ media: media2, alt, focus }) {
 }
 const row$3 = "_row_l4edh_1";
 const badge$1 = "_badge_l4edh_11";
-const styles$k = {
+const styles$j = {
   row: row$3,
   badge: badge$1
 };
@@ -10402,9 +10838,9 @@ function PdpBadges({ badges: badges2 }) {
   const flags = badges2.filter((b) => b.trim().length > 0);
   if (flags.length === 0) return null;
   return jsx("ul", {
-    className: styles$k.row,
+    className: styles$j.row,
     children: flags.map((flag) => jsx("li", {
-      className: styles$k.badge,
+      className: styles$j.badge,
       children: flag
     }, flag))
   });
@@ -10415,7 +10851,7 @@ const thumb = "_thumb_1m6o7_7";
 const main = "_main_1m6o7_34";
 const image$5 = "_image_1m6o7_44";
 const badges = "_badges_1m6o7_49";
-const styles$j = {
+const styles$i = {
   gallery,
   thumbs,
   thumb,
@@ -10432,14 +10868,14 @@ function DesktopGallery({ media: media2, alt, badges: badges2, focus }) {
   }, [mediaKey, focus, media2.length]);
   const shown = media2[active] ?? media2[0];
   return jsxs("div", {
-    className: styles$j.gallery,
+    className: styles$i.gallery,
     children: [media2.length > 0 && jsx("div", {
-      className: styles$j.thumbs,
+      className: styles$i.thumbs,
       role: "group",
       "aria-label": t("{0} images", alt),
       children: media2.map((src, i) => jsx("button", {
         type: "button",
-        className: styles$j.thumb,
+        className: styles$i.thumb,
         "aria-pressed": i === active,
         "aria-label": t("Show image {0} of {1}", String(i + 1), String(media2.length)),
         onClick: () => setActive(i),
@@ -10448,20 +10884,20 @@ function DesktopGallery({ media: media2, alt, badges: badges2, focus }) {
           alt: "",
           fill: true,
           sizes: "72px",
-          className: styles$j.image
+          className: styles$i.image
         })
       }, src))
     }), jsxs("div", {
-      className: styles$j.main,
+      className: styles$i.main,
       children: [shown ? jsx(ShopImage, {
         src: shown,
         alt: t("{0} — image {1} of {2}", alt, String(active + 1), String(media2.length)),
         fill: true,
         sizes: "440px",
-        className: styles$j.image,
+        className: styles$i.image,
         priority: true
       }) : null, jsx("div", {
-        className: styles$j.badges,
+        className: styles$i.badges,
         children: jsx(PdpBadges, {
           badges: badges2
         })
@@ -10494,7 +10930,7 @@ const fabric = "_fabric_r4azu_328";
 const fabricLabel = "_fabricLabel_r4azu_336";
 const fabricText = "_fabricText_r4azu_344";
 const notes = "_notes_r4azu_355";
-const styles$i = {
+const styles$h = {
   scrim: scrim$3,
   sheet: sheet$1,
   body: body$3,
@@ -10548,12 +10984,12 @@ function SizeGuideSheet({ guide, onClose }) {
   const shown = useMemo(() => authored && unit2 && unit2 !== authored ? rows.map((row2) => row2.map((cell) => convert(cell, authored, unit2))) : rows, [rows, authored, unit2]);
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$i.scrim,
+    className: styles$h.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$i.sheet,
+      className: styles$h.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "size-guide-title",
@@ -10562,36 +10998,36 @@ function SizeGuideSheet({ guide, onClose }) {
         onClose,
         closeLabel: t("Close size guide")
       }), jsxs("div", {
-        className: styles$i.body,
+        className: styles$h.body,
         children: [jsxs("div", {
-          className: styles$i.titles,
+          className: styles$h.titles,
           children: [jsx("h2", {
             id: "size-guide-title",
-            className: styles$i.title,
+            className: styles$h.title,
             children: guide.title
           }), guide.subtitle && jsx("p", {
-            className: styles$i.subtitle,
+            className: styles$h.subtitle,
             children: guide.subtitle
           })]
         }), hasTable && authored && unit2 && jsx("div", {
-          className: styles$i.units,
+          className: styles$h.units,
           role: "radiogroup",
           "aria-label": t("Measurement unit"),
           children: [authored, otherUnit(authored)].map((u) => jsx("button", {
             type: "button",
             role: "radio",
             "aria-checked": u === unit2,
-            className: `${styles$i.unit} ${u === unit2 ? styles$i.unitOn : styles$i.unitOff}`,
+            className: `${styles$h.unit} ${u === unit2 ? styles$h.unitOn : styles$h.unitOff}`,
             onClick: () => setUnit(u),
             children: UNIT_LABEL[u]
           }, u))
         }), hasTable && jsx("div", {
-          className: styles$i.tableWrap,
+          className: styles$h.tableWrap,
           children: jsxs("table", {
-            className: styles$i.table,
+            className: styles$h.table,
             children: [jsx("colgroup", {
               children: columns.map((c, i) => jsx("col", {
-                className: i === 0 || i === columns.length - 1 ? styles$i.colEdge : styles$i.col
+                className: i === 0 || i === columns.length - 1 ? styles$h.colEdge : styles$h.col
               }, c))
             }), jsx("thead", {
               children: jsx("tr", {
@@ -10612,39 +11048,39 @@ function SizeGuideSheet({ guide, onClose }) {
             })]
           })
         }), guide.note && jsx("p", {
-          className: styles$i.note,
+          className: styles$h.note,
           children: guide.note
         }), measurements.length > 0 && jsxs("section", {
-          className: styles$i.how,
+          className: styles$h.how,
           "aria-labelledby": "size-guide-how",
           children: [jsx("h3", {
             id: "size-guide-how",
-            className: styles$i.howTitle,
+            className: styles$h.howTitle,
             children: t("How to measure")
           }), jsx("dl", {
-            className: styles$i.howList,
+            className: styles$h.howList,
             children: measurements.map((m) => jsxs("div", {
-              className: styles$i.howItem,
+              className: styles$h.howItem,
               children: [jsx("dt", {
-                className: styles$i.howLabel,
+                className: styles$h.howLabel,
                 children: m.label
               }), jsx("dd", {
-                className: styles$i.howText,
+                className: styles$h.howText,
                 children: m.description
               })]
             }, m.label))
           })]
         }), guide.fabric && jsxs("div", {
-          className: styles$i.fabric,
+          className: styles$h.fabric,
           children: [jsx("p", {
-            className: styles$i.fabricLabel,
+            className: styles$h.fabricLabel,
             children: t("Fabric")
           }), jsx("p", {
-            className: styles$i.fabricText,
+            className: styles$h.fabricText,
             children: guide.fabric
           })]
         }), notes2.length > 0 && jsx("ul", {
-          className: styles$i.notes,
+          className: styles$h.notes,
           children: notes2.map((n) => jsx("li", {
             children: n
           }, n))
@@ -10653,18 +11089,18 @@ function SizeGuideSheet({ guide, onClose }) {
     })
   });
 }
-const root$2 = "_root_1q3xe_1";
-const header$3 = "_header_1q3xe_11";
-const title$9 = "_title_1q3xe_18";
-const chips = "_chips_1q3xe_26";
-const chip = "_chip_1q3xe_26";
-const selected$2 = "_selected_1q3xe_50";
-const disabled$1 = "_disabled_1q3xe_62";
-const lowStock = "_lowStock_1q3xe_74";
-const error = "_error_1q3xe_84";
-const sizeGuide = "_sizeGuide_1q3xe_91";
-const info = "_info_1q3xe_115";
-const styles$h = {
+const root$2 = "_root_u44hz_1";
+const header$3 = "_header_u44hz_11";
+const title$9 = "_title_u44hz_18";
+const chips = "_chips_u44hz_26";
+const chip = "_chip_u44hz_26";
+const selected$2 = "_selected_u44hz_50";
+const disabled$1 = "_disabled_u44hz_62";
+const lowStock = "_lowStock_u44hz_74";
+const error = "_error_u44hz_84";
+const sizeGuide = "_sizeGuide_u44hz_93";
+const info = "_info_u44hz_117";
+const styles$g = {
   root: root$2,
   header: header$3,
   title: title$9,
@@ -10682,22 +11118,22 @@ function SizeSelector({ sizes: sizes2, selected: selected2, onSelect, error: err
   const [guideOpen, setGuideOpen] = useState(false);
   const showGuide = useShopFeatures().sizeCharts && guide !== void 0;
   return jsxs("section", {
-    className: styles$h.root,
+    className: styles$g.root,
     "aria-labelledby": "size-heading",
     children: [jsxs("div", {
-      className: styles$h.header,
+      className: styles$g.header,
       children: [jsx("h2", {
         id: "size-heading",
-        className: styles$h.title,
+        className: styles$g.title,
         children: t("Size")
       }), showGuide && jsxs("button", {
         type: "button",
-        className: styles$h.sizeGuide,
+        className: styles$g.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
         children: [t("Size guide"), jsxs("svg", {
-          className: styles$h.info,
+          className: styles$g.info,
           width: "12",
           height: "12",
           viewBox: "0 0 12 12",
@@ -10723,7 +11159,7 @@ function SizeSelector({ sizes: sizes2, selected: selected2, onSelect, error: err
         })]
       })]
     }), jsx("div", {
-      className: styles$h.chips,
+      className: styles$g.chips,
       role: "radiogroup",
       "aria-label": t("Size"),
       "aria-required": "true",
@@ -10736,7 +11172,7 @@ function SizeSelector({ sizes: sizes2, selected: selected2, onSelect, error: err
           "aria-checked": isSelected,
           "aria-disabled": disabled2 || void 0,
           disabled: disabled2,
-          className: [styles$h.chip, isSelected ? styles$h.selected : "", disabled2 ? styles$h.disabled : ""].filter(Boolean).join(" "),
+          className: [styles$g.chip, isSelected ? styles$g.selected : "", disabled2 ? styles$g.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(size.value),
           children: [size.value, disabled2 && jsx("span", {
             className: "visually-hidden",
@@ -10745,11 +11181,11 @@ function SizeSelector({ sizes: sizes2, selected: selected2, onSelect, error: err
         }, size.value);
       })
     }), error2 && jsx("p", {
-      className: styles$h.error,
+      className: styles$g.error,
       role: "alert",
       children: t("Please select a size")
     }), lowStock2 && !error2 && jsx("p", {
-      className: styles$h.lowStock,
+      className: styles$g.lowStock,
       role: "status",
       children: lowStock2
     }), showGuide && guideOpen && jsx(SizeGuideSheet, {
@@ -10770,7 +11206,7 @@ const image$4 = "_image_1h4ny_64";
 const placeholder = "_placeholder_1h4ny_68";
 const scrim$2 = "_scrim_1h4ny_76";
 const stockBadge = "_stockBadge_1h4ny_95";
-const styles$g = {
+const styles$f = {
   root: root$1,
   header: header$2,
   title: title$8,
@@ -10787,20 +11223,20 @@ const styles$g = {
 function ColorSelector({ colours, selected: selected2, onSelect }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$g.root,
+    className: styles$f.root,
     "aria-labelledby": "colour-heading",
     children: [jsxs("p", {
-      className: styles$g.header,
+      className: styles$f.header,
       children: [jsx("span", {
         id: "colour-heading",
-        className: styles$g.title,
+        className: styles$f.title,
         children: "Color:"
       }), " ", jsx("span", {
-        className: styles$g.value,
+        className: styles$f.value,
         children: selected2 ?? "Select"
       })]
     }), jsx("div", {
-      className: styles$g.tiles,
+      className: styles$f.tiles,
       role: "radiogroup",
       "aria-label": t("Color"),
       "aria-required": "true",
@@ -10813,26 +11249,26 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
           role: "radio",
           "aria-checked": isSelected,
           "aria-label": `${c.value}${soldOut ? " (out of stock)" : ""}`,
-          className: [styles$g.tile, isSelected ? styles$g.selected : ""].filter(Boolean).join(" "),
+          className: [styles$f.tile, isSelected ? styles$f.selected : ""].filter(Boolean).join(" "),
           onClick: () => onSelect(c.value),
           children: [jsxs("span", {
-            className: styles$g.media,
+            className: styles$f.media,
             children: [c.image ? jsx(ShopImage, {
               src: c.image,
               alt: "",
               fill: true,
               sizes: "79px",
-              className: styles$g.image
+              className: styles$f.image
             }) : jsx("span", {
-              className: styles$g.placeholder,
+              className: styles$f.placeholder,
               "aria-hidden": "true"
             }), soldOut && jsx("span", {
-              className: styles$g.scrim,
+              className: styles$f.scrim,
               "aria-hidden": "true",
               children: t("Out of stock")
             })]
           }), lowStock2 && jsx("span", {
-            className: styles$g.stockBadge,
+            className: styles$f.stockBadge,
             "aria-hidden": "true",
             children: t("{0} left", c.remaining)
           })]
@@ -10847,7 +11283,7 @@ const options = "_options_1mnz1_16";
 const option = "_option_1mnz1_16";
 const selected = "_selected_1mnz1_36";
 const disabled = "_disabled_1mnz1_42";
-const styles$f = {
+const styles$e = {
   fieldset,
   legend,
   options,
@@ -10865,12 +11301,12 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     return values.length > 0 ? values.join(" · ") : variant.sku;
   }
   return jsxs("fieldset", {
-    className: styles$f.fieldset,
+    className: styles$e.fieldset,
     children: [jsx("legend", {
-      className: styles$f.legend,
+      className: styles$e.legend,
       children: t("Select an option")
     }), jsx("div", {
-      className: styles$f.options,
+      className: styles$e.options,
       role: "radiogroup",
       "aria-label": t("Variant"),
       children: variants.map((variant) => {
@@ -10882,7 +11318,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
           "aria-checked": selected2,
           "aria-disabled": disabled2 || void 0,
           disabled: disabled2,
-          className: [styles$f.option, selected2 ? styles$f.selected : "", disabled2 ? styles$f.disabled : ""].filter(Boolean).join(" "),
+          className: [styles$e.option, selected2 ? styles$e.selected : "", disabled2 ? styles$e.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
           children: [labelFor2(variant), disabled2 && jsx("span", {
             className: "visually-hidden",
@@ -10893,14 +11329,14 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     })]
   });
 }
-const root = "_root_9cj0g_2";
-const group = "_group_9cj0g_8";
-const title$7 = "_title_9cj0g_14";
-const body$2 = "_body_9cj0g_22";
-const paragraph = "_paragraph_9cj0g_26";
-const clamped = "_clamped_9cj0g_46";
-const toggle = "_toggle_9cj0g_51";
-const styles$e = {
+const root = "_root_1gy1f_2";
+const group = "_group_1gy1f_8";
+const title$7 = "_title_1gy1f_14";
+const body$2 = "_body_1gy1f_22";
+const paragraph = "_paragraph_1gy1f_26";
+const clamped = "_clamped_1gy1f_46";
+const toggle = "_toggle_1gy1f_58";
+const styles$d = {
   root,
   group,
   title: title$7,
@@ -10921,7 +11357,11 @@ function ProductDetails({ description: description2 }) {
     if (expanded) return;
     const el = bodyRef.current;
     if (!el) return;
-    const measure = () => setClipped(el.scrollHeight - el.clientHeight > 1);
+    const measure = () => {
+      const first = el.firstElementChild;
+      const firstClipped = first ? first.scrollHeight - first.clientHeight > 1 : false;
+      setClipped(firstClipped || el.scrollHeight - el.clientHeight > 1);
+    };
     measure();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     observer?.observe(el);
@@ -10938,25 +11378,25 @@ function ProductDetails({ description: description2 }) {
   const t = useT();
   if (paragraphs.length === 0) return null;
   return jsxs("section", {
-    className: styles$e.root,
+    className: styles$d.root,
     "aria-labelledby": "details-heading",
     children: [jsxs("div", {
-      className: styles$e.group,
+      className: styles$d.group,
       children: [jsx("h2", {
         id: "details-heading",
-        className: styles$e.title,
+        className: styles$d.title,
         children: t("Product details")
       }), jsx("div", {
         ref: bodyRef,
-        className: [styles$e.body, expanded ? "" : styles$e.clamped].join(" "),
+        className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "),
         children: paragraphs.map((p) => jsx("p", {
-          className: styles$e.paragraph,
+          className: styles$d.paragraph,
           children: p
         }, p))
       })]
     }), clipped ? jsx("button", {
       type: "button",
-      className: styles$e.toggle,
+      className: styles$d.toggle,
       "aria-expanded": expanded,
       onClick: () => setExpanded((v) => !v),
       children: expanded ? t("Less") : t("more")
@@ -10967,7 +11407,7 @@ const banner = "_banner_1xvw4_2";
 const message = "_message_1xvw4_14";
 const icon$1 = "_icon_1xvw4_22";
 const timer = "_timer_1xvw4_27";
-const styles$d = {
+const styles$c = {
   banner,
   message,
   icon: icon$1,
@@ -10991,11 +11431,11 @@ function PromoBanner({ promo: promo2 }) {
   const remaining = promo2.ends_at && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
-    className: styles$d.banner,
+    className: styles$c.banner,
     children: [jsxs("span", {
-      className: styles$d.message,
+      className: styles$c.message,
       children: [jsxs("svg", {
-        className: styles$d.icon,
+        className: styles$c.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -11017,7 +11457,7 @@ function PromoBanner({ promo: promo2 }) {
         })]
       }), promo2.message]
     }), showTimer && jsxs("span", {
-      className: styles$d.timer,
+      className: styles$c.timer,
       children: [jsxs("svg", {
         width: "16",
         height: "16",
@@ -11051,14 +11491,14 @@ const availability = "_availability_1479k_55";
 const low = "_low_1479k_62";
 const oos = "_oos_1479k_66";
 const breadcrumb = "_breadcrumb_1479k_70";
-const help$1 = "_help_1479k_71";
+const help = "_help_1479k_71";
 const desktopGallery = "_desktopGallery_1479k_72";
 const wide = "_wide_1479k_77";
 const phoneGallery = "_phoneGallery_1479k_101";
 const introBadges = "_introBadges_1479k_115";
 const sizes = "_sizes_1479k_119";
 const cta$2 = "_cta_1479k_123";
-const styles$c = {
+const styles$b = {
   page,
   content,
   intro,
@@ -11069,7 +11509,7 @@ const styles$c = {
   low,
   oos,
   breadcrumb,
-  help: help$1,
+  help,
   desktopGallery,
   wide,
   phoneGallery,
@@ -11305,15 +11745,15 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
   return jsxs(ShopSurface, {
     tone: "light",
     fill: true,
-    className: [styles$c.page, claim ? styles$c.wide : ""].join(" "),
+    className: [styles$b.page, claim ? styles$b.wide : ""].join(" "),
     ...claim ? {
       "data-shop-layout": "wide"
     } : {},
     children: [breadcrumb2 && jsx("div", {
-      className: styles$c.breadcrumb,
+      className: styles$b.breadcrumb,
       children: breadcrumb2
     }), jsx("div", {
-      className: styles$c.phoneGallery,
+      className: styles$b.phoneGallery,
       children: jsx(MediaGallery, {
         media: media2,
         alt: product.title,
@@ -11322,7 +11762,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
         } : {}
       })
     }), claim && jsx("div", {
-      className: styles$c.desktopGallery,
+      className: styles$b.desktopGallery,
       children: jsx(DesktopGallery, {
         media: media2,
         alt: product.title,
@@ -11332,20 +11772,20 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
         } : {}
       })
     }), jsxs("div", {
-      className: styles$c.content,
+      className: styles$b.content,
       children: [jsxs("div", {
-        className: styles$c.intro,
+        className: styles$b.intro,
         children: [jsx("div", {
-          className: styles$c.introBadges,
+          className: styles$b.introBadges,
           children: jsx(PdpBadges, {
             badges: product.badges ?? []
           })
         }), jsxs("div", {
-          className: styles$c.productInfo,
+          className: styles$b.productInfo,
           children: [jsxs("div", {
-            className: styles$c.titlePrice,
+            className: styles$b.titlePrice,
             children: [jsx("h1", {
-              className: styles$c.title,
+              className: styles$b.title,
               children: product.title
             }), jsx(PriceBlock, {
               price: claim ? {
@@ -11362,7 +11802,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
           })]
         })]
       }), stockNotice && jsx("p", {
-        className: [styles$c.availability, anyInStock ? styles$c.low : styles$c.oos].join(" "),
+        className: [styles$b.availability, anyInStock ? styles$b.low : styles$b.oos].join(" "),
         role: "status",
         children: availabilityLabel
       }), hasColours && jsx("div", {
@@ -11374,7 +11814,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
         })
       }), hasSizes && jsx("div", {
         ref: sizeRef,
-        className: styles$c.sizes,
+        className: styles$b.sizes,
         children: jsx(SizeSelector, {
           sizes: sizes2,
           selected: selectedSize,
@@ -11397,10 +11837,10 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
         inset: true
       })]
     }), jsx(StickyCtaBar, {
-      className: styles$c.cta,
+      className: styles$b.cta,
       children: cta2
     }), help2 && jsx("div", {
-      className: styles$c.help,
+      className: styles$b.help,
       children: help2
     })]
   });
@@ -11413,7 +11853,7 @@ const text$3 = "_text_1tiqx_108";
 const title$5 = "_title_1tiqx_157";
 const subtitle$2 = "_subtitle_1tiqx_168";
 const noImage = "_noImage_1tiqx_183";
-const styles$b = {
+const styles$a = {
   hero: hero$2,
   image: image$3,
   scrim: scrim$1,
@@ -11429,10 +11869,10 @@ function PcpHero({ hero: hero2 }) {
   const t = useT();
   return jsxs("section", {
     ref: heroRef,
-    className: [styles$b.hero, hero2.image ? "" : styles$b.noImage].join(" "),
+    className: [styles$a.hero, hero2.image ? "" : styles$a.noImage].join(" "),
     children: [hero2.image && jsxs(Fragment, {
       children: [jsx("div", {
-        className: styles$b.image,
+        className: styles$a.image,
         children: jsx(ShopImage, {
           src: hero2.image,
           alt: "",
@@ -11441,19 +11881,19 @@ function PcpHero({ hero: hero2 }) {
           priority: true
         })
       }), jsx("div", {
-        className: styles$b.scrim,
+        className: styles$a.scrim,
         "aria-hidden": "true"
       }), jsx("div", {
-        className: styles$b.fade,
+        className: styles$a.fade,
         "aria-hidden": "true"
       })]
     }), jsxs("div", {
-      className: styles$b.text,
+      className: styles$a.text,
       children: [jsx("h1", {
-        className: styles$b.title,
+        className: styles$a.title,
         children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
-        className: styles$b.subtitle,
+        className: styles$a.subtitle,
         children: t(hero2.subtitle)
       })]
     })]
@@ -11462,14 +11902,14 @@ function PcpHero({ hero: hero2 }) {
 const text$2 = "_text_1saw4_6";
 const center = "_center_1saw4_18";
 const left = "_left_1saw4_23";
-const styles$a = {
+const styles$9 = {
   text: text$2,
   center,
   left
 };
 function LifestyleText({ text: text2, align = "center" }) {
   return jsx("p", {
-    className: [styles$a.text, align === "left" ? styles$a.left : styles$a.center].join(" "),
+    className: [styles$9.text, align === "left" ? styles$9.left : styles$9.center].join(" "),
     children: text2
   });
 }
@@ -11481,7 +11921,7 @@ const image$2 = "_image_79nr3_46";
 const dots$1 = "_dots_79nr3_51";
 const dot$1 = "_dot_79nr3_51";
 const dotActive$1 = "_dotActive_79nr3_76";
-const styles$9 = {
+const styles$8 = {
   wrap,
   box,
   track: track$1,
@@ -11505,36 +11945,36 @@ function LifestyleImage({ images, videos }) {
   }, []);
   if (images.length === 0) return null;
   return jsx("div", {
-    className: styles$9.wrap,
+    className: styles$8.wrap,
     children: jsxs("div", {
-      className: styles$9.box,
+      className: styles$8.box,
       children: [jsx("ul", {
-        className: styles$9.track,
+        className: styles$8.track,
         ref: trackRef,
         children: images.map((src, i) => {
           const clip = videos?.[i];
           return jsx("li", {
-            className: styles$9.slide,
+            className: styles$8.slide,
             children: clip ? jsx(ShopVideo, {
               src: clip,
               poster: src,
               fill: true,
-              className: styles$9.image
+              className: styles$8.image
             }) : jsx(ShopImage, {
               src,
               alt: "",
               fill: true,
               sizes: "(max-width: 480px) 100vw, 480px",
-              className: styles$9.image,
+              className: styles$8.image,
               priority: i === 0
             })
           }, src);
         })
       }), images.length > 1 && jsx("div", {
-        className: styles$9.dots,
+        className: styles$8.dots,
         "aria-hidden": "true",
         children: images.map((src, i) => jsx("span", {
-          className: [styles$9.dot, i === active ? styles$9.dotActive : ""].join(" ")
+          className: [styles$8.dot, i === active ? styles$8.dotActive : ""].join(" ")
         }, src))
       })]
     })
@@ -11548,7 +11988,7 @@ const author = "_author_qsxtq_58";
 const dots = "_dots_qsxtq_69";
 const dot = "_dot_qsxtq_69";
 const dotActive = "_dotActive_qsxtq_85";
-const styles$8 = {
+const styles$7 = {
   section: section$2,
   track,
   card,
@@ -11572,26 +12012,26 @@ function ReviewCarousel({ quotes }) {
     return () => track2.removeEventListener("scroll", onScroll);
   }, []);
   return jsxs("section", {
-    className: styles$8.section,
+    className: styles$7.section,
     "aria-label": t("Reviews"),
     children: [jsx("ul", {
-      className: styles$8.track,
+      className: styles$7.track,
       ref: trackRef,
       children: quotes.map((q, i) => jsxs("li", {
-        className: styles$8.card,
+        className: styles$7.card,
         children: [jsxs("blockquote", {
-          className: styles$8.quote,
+          className: styles$7.quote,
           children: ["“", q.quote, "”"]
         }), jsx("p", {
-          className: styles$8.author,
+          className: styles$7.author,
           children: q.author
         })]
       }, i))
     }), quotes.length > 1 && jsx("div", {
-      className: styles$8.dots,
+      className: styles$7.dots,
       "aria-hidden": "true",
       children: quotes.map((_, i) => jsx("span", {
-        className: [styles$8.dot, i === active ? styles$8.dotActive : ""].join(" ")
+        className: [styles$7.dot, i === active ? styles$7.dotActive : ""].join(" ")
       }, i))
     })]
   });
@@ -11600,7 +12040,7 @@ const section$1 = "_section_1nrsi_1";
 const row$2 = "_row_1nrsi_9";
 const title$4 = "_title_1nrsi_20";
 const body$1 = "_body_1nrsi_43";
-const styles$7 = {
+const styles$6 = {
   section: section$1,
   row: row$2,
   title: title$4,
@@ -11609,15 +12049,15 @@ const styles$7 = {
 function WhyUs({ items: items2 }) {
   const t = useT();
   return jsx("section", {
-    className: styles$7.section,
+    className: styles$6.section,
     "aria-label": t("Why shop with us"),
     children: items2.map((it, i) => jsxs("div", {
-      className: styles$7.row,
+      className: styles$6.row,
       children: [jsx("p", {
-        className: styles$7.title,
+        className: styles$6.title,
         children: it.title
       }), jsx("p", {
-        className: styles$7.body,
+        className: styles$6.body,
         children: it.body
       })]
     }, i))
@@ -11627,7 +12067,7 @@ const section = "_section_snuuj_1";
 const title$3 = "_title_snuuj_10";
 const list$1 = "_list_snuuj_17";
 const row$1 = "_row_snuuj_32";
-const styles$6 = {
+const styles$5 = {
   section,
   title: title$3,
   list: list$1,
@@ -11636,17 +12076,17 @@ const styles$6 = {
 function ExploreList({ title: title2, links }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$6.section,
+    className: styles$5.section,
     "aria-label": title2,
     children: [jsx("h2", {
-      className: styles$6.title,
+      className: styles$5.title,
       children: title2
     }), jsx("ul", {
-      className: styles$6.list,
+      className: styles$5.list,
       children: links.map((l) => jsx("li", {
         children: jsxs(ShopLink, {
           to: `/category/${encodeURIComponent(l.code)}`,
-          className: styles$6.row,
+          className: styles$5.row,
           children: [jsx("span", {
             children: t(l.label)
           }), jsx("svg", {
@@ -11674,7 +12114,7 @@ const featured = "_featured_1kft8_36";
 const gridBlock = "_gridBlock_1kft8_37";
 const blockTitle = "_blockTitle_1kft8_44";
 const grid = "_grid_1kft8_37";
-const styles$5 = {
+const styles$4 = {
   pcp,
   blocks,
   featured,
@@ -11697,9 +12137,9 @@ function Block({ block }) {
       });
     case "featured":
       return jsxs("div", {
-        className: styles$5.featured,
+        className: styles$4.featured,
         children: [block.title && jsx("h2", {
-          className: styles$5.blockTitle,
+          className: styles$4.blockTitle,
           children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
@@ -11719,12 +12159,12 @@ function Block({ block }) {
       });
     case "grid":
       return jsxs("div", {
-        className: styles$5.gridBlock,
+        className: styles$4.gridBlock,
         children: [block.title && jsx("h2", {
-          className: styles$5.blockTitle,
+          className: styles$4.blockTitle,
           children: t(block.title)
         }), jsx("ul", {
-          className: styles$5.grid,
+          className: styles$4.grid,
           children: block.products.map((p) => jsx("li", {
             children: jsx(ProductTile, {
               product: p
@@ -11753,11 +12193,11 @@ function CategoryContent({ page: page2 }) {
   return jsxs(ShopSurface, {
     tone: "dark",
     fill: true,
-    className: styles$5.pcp,
+    className: styles$4.pcp,
     children: [jsx(PcpHero, {
       hero: page2.hero
     }), jsx("div", {
-      className: styles$5.blocks,
+      className: styles$4.blocks,
       children: page2.blocks.map((block, i) => jsx(Block, {
         block
       }, i))
@@ -11943,7 +12383,7 @@ const cta$1 = "_cta_dctyt_79";
 const video = "_video_dctyt_83";
 const desktopOnly = "_desktopOnly_dctyt_87";
 const phoneOnly = "_phoneOnly_dctyt_97";
-const styles$4 = {
+const styles$3 = {
   hero: hero$1,
   image: image$1,
   foot,
@@ -11971,9 +12411,9 @@ function VipHero({ hero: hero2, onContinue }) {
     "data-shop-layout": "wide",
     children: jsxs("section", {
       ref,
-      className: styles$4.hero,
+      className: styles$3.hero,
       children: [hero2.image && jsx("div", {
-        className: [styles$4.image, wide2 ? styles$4.phoneOnly : ""].join(" "),
+        className: [styles$3.image, wide2 ? styles$3.phoneOnly : ""].join(" "),
         children: jsx(ShopImage, {
           src: hero2.image,
           alt: "",
@@ -11982,7 +12422,7 @@ function VipHero({ hero: hero2, onContinue }) {
           priority: true
         })
       }), wide2 && jsxs("div", {
-        className: [styles$4.image, styles$4.desktopOnly].join(" "),
+        className: [styles$3.image, styles$3.desktopOnly].join(" "),
         children: [desktopImage && jsx(ShopImage, {
           src: desktopImage,
           alt: "",
@@ -11994,28 +12434,28 @@ function VipHero({ hero: hero2, onContinue }) {
             poster: desktopImage
           } : {},
           fill: true,
-          className: styles$4.video
+          className: styles$3.video
         })]
       }), jsxs("div", {
-        className: styles$4.foot,
+        className: styles$3.foot,
         children: [jsxs("div", {
-          className: styles$4.text,
+          className: styles$3.text,
           children: [jsx("img", {
             src: assetUrl("/figma/home/dazn-logo.svg"),
             alt: t("DAZN"),
-            className: styles$4.logo
+            className: styles$3.logo
           }), jsxs("div", {
-            className: styles$4.copy,
+            className: styles$3.copy,
             children: [jsx("h1", {
-              className: styles$4.headline,
+              className: styles$3.headline,
               children: hero2.headline
             }), hero2.body && jsx("p", {
-              className: styles$4.body,
+              className: styles$3.body,
               children: hero2.body
             })]
           })]
         }), jsx("div", {
-          className: styles$4.cta,
+          className: styles$3.cta,
           children: jsx(Button, {
             variant: "primary",
             fullWidth: true,
@@ -12027,81 +12467,6 @@ function VipHero({ hero: hero2, onContinue }) {
     })
   });
 }
-function HelpIcon() {
-  return jsx("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsxs("g", {
-      transform: "translate(1.93 1.93)",
-      children: [jsx("path", {
-        d: "M10.0781 14.1543C10.52 14.1543 10.8779 14.5123 10.8779 14.9541C10.8778 15.3958 10.5199 15.7539 10.0781 15.7539H10.0693C9.62757 15.7539 9.26963 15.3958 9.26953 14.9541C9.26953 14.5123 9.62751 14.1543 10.0693 14.1543H10.0781Z",
-        fill: "currentColor"
-      }), jsx("path", {
-        d: "M8.21777 4.7168C8.93457 4.29562 9.77726 4.14167 10.5967 4.28223C11.4161 4.42286 12.1599 4.84835 12.6953 5.48438C13.2303 6.12005 13.5233 6.92505 13.5225 7.75586L13.5107 8.00098C13.3992 9.19732 12.4886 10.0076 11.8057 10.4629C11.4401 10.7066 11.0785 10.8882 10.8018 11.0137V11.8223C10.8014 12.2637 10.4425 12.622 10.001 12.6221C9.55954 12.6219 9.20156 12.2637 9.20117 11.8223V10.4775C9.20117 10.1332 9.42146 9.82671 9.74805 9.71777C9.75073 9.71685 9.75671 9.71536 9.76367 9.71289C9.77824 9.70771 9.80199 9.69931 9.83301 9.6875C9.89571 9.66361 9.98896 9.62621 10.1016 9.57617C10.3291 9.47505 10.6264 9.32523 10.918 9.13086C11.5496 8.70973 11.9217 8.23795 11.9219 7.75586C11.9225 7.30239 11.7627 6.86161 11.4707 6.51465C11.1787 6.16788 10.773 5.93611 10.3262 5.85938C9.87921 5.78271 9.41933 5.86603 9.02832 6.0957C8.63742 6.32547 8.34003 6.68657 8.18945 7.11426C8.04274 7.53077 7.58557 7.74995 7.16895 7.60352C6.75252 7.45687 6.53351 7.00053 6.67969 6.58398C6.9556 5.79964 7.50096 5.1381 8.21777 4.7168Z",
-        fill: "currentColor"
-      }), jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M10.0693 0C15.6304 0.000197913 20.1395 4.50828 20.1396 10.0693C20.1395 15.6304 15.6304 20.1395 10.0693 20.1396C4.50828 20.1395 0.000197917 15.6304 0 10.0693C0.00019791 4.50828 4.50828 0.000197906 10.0693 0ZM10.0693 2C5.61285 2.0002 2.0002 5.61285 2 10.0693C2.0002 14.5258 5.61285 18.1395 10.0693 18.1396C14.5258 18.1395 18.1395 14.5258 18.1396 10.0693C18.1395 5.61285 14.5258 2.0002 10.0693 2Z",
-        fill: "currentColor"
-      })]
-    })
-  });
-}
-const crumbs = "_crumbs_wl5mz_1";
-const home = "_home_wl5mz_13";
-const separator = "_separator_wl5mz_25";
-const current = "_current_wl5mz_31";
-const help = "_help_wl5mz_36";
-const helpLabel = "_helpLabel_wl5mz_50";
-const styles$3 = {
-  crumbs,
-  home,
-  separator,
-  current,
-  help,
-  helpLabel
-};
-function VipBreadcrumb({ title: title2, onHome }) {
-  const t = useT();
-  return jsx("nav", {
-    "aria-label": t("Breadcrumb"),
-    children: jsxs("ol", {
-      className: styles$3.crumbs,
-      children: [jsx("li", {
-        children: jsx("button", {
-          type: "button",
-          className: styles$3.home,
-          onClick: onHome,
-          children: t("Homepage")
-        })
-      }), jsx("li", {
-        className: styles$3.separator,
-        "aria-hidden": "true",
-        children: "›"
-      }), jsx("li", {
-        "aria-current": "page",
-        className: styles$3.current,
-        children: title2
-      })]
-    })
-  });
-}
-function VipHelpLink({ onHelp }) {
-  const t = useT();
-  return jsxs("button", {
-    type: "button",
-    className: styles$3.help,
-    onClick: onHelp,
-    children: [jsx(HelpIcon, {}), jsx("span", {
-      className: styles$3.helpLabel,
-      children: t("Need help with your order?")
-    })]
-  });
-}
 function VipLandingView({ token, onUnavailable, onHelp }) {
   const t = useT();
   const { api, emit } = useShop();
@@ -12638,7 +13003,11 @@ function useCartCount() {
   const shop = useShopOptional();
   const api = shop?.api;
   const subscribe = shop?.subscribe;
-  const [count2, setCount] = useState(null);
+  const carts = useCartCache();
+  const [count2, setCount] = useState(() => {
+    const seeded = carts?.get();
+    return seeded ? seeded.items.reduce((n, i) => n + i.qty, 0) : null;
+  });
   useEffect(() => {
     if (!api) return;
     let live = true;